"use client";

import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
import { SearchX, RotateCcw, Home } from "lucide-react";
import Button from "@/components/Button";

interface NoMatchResultProps {
  onReset: () => Promise<void>;
  resetting: boolean;
}

export default function NoMatchResult({ onReset, resetting }: NoMatchResultProps) {
  const router = useRouter();

  return (
    <motion.div
      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.4 }}
    >
      <motion.div
        initial={{ scale: 0, rotate: -20 }}
        animate={{ scale: 1, rotate: 0 }}
        transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
      >
        <SearchX size={56} className="text-muted" />
      </motion.div>

      <motion.h1
        className="mt-4 text-3xl font-black text-heading"
        initial={{ y: 30, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ delay: 0.35 }}
      >
        都不太满意
      </motion.h1>

      <motion.p
        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
        initial={{ y: 20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ delay: 0.45 }}
      >
        这一轮没有店被选中，换个范围或类型再试试？
      </motion.p>

      <motion.div
        className="mt-8 flex w-full max-w-xs flex-col gap-3"
        initial={{ y: 30, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ delay: 0.55 }}
      >
        <Button
          onClick={onReset}
          shape="pill"
          loading={resetting}
          loadingText="重置中..."
          icon={<RotateCcw size={15} />}
          className="px-8 py-3"
        >
          再来一轮
        </Button>

        <Button
          onClick={() => router.push("/")}
          variant="secondary"
          shape="pill"
          icon={<Home size={15} />}
          className="px-8 py-3"
        >
          换个条件重新搜
        </Button>
      </motion.div>
    </motion.div>
  );
}