import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { motion } from "framer-motion";
import { Search, CheckCircle2, XCircle, GraduationCap } from "lucide-react";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { dataKelulusan, type Kelulusan } from "@/lib/site-data";

export const Route = createFileRoute("/kelulusan")({
  head: () => ({
    meta: [
      { title: "Cek Kelulusan — MTs Miftahul Ulum Anggana" },
      { name: "description", content: "Cek pengumuman kelulusan siswa MTs Miftahul Ulum Anggana dengan memasukkan NISN." },
    ],
  }),
  component: KelulusanPage,
});

type Result = Kelulusan | "notfound" | null;

function KelulusanPage() {
  const [nisn, setNisn] = useState("");
  const [result, setResult] = useState<Result>(null);
  const [loading, setLoading] = useState(false);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setResult(null);
    setTimeout(() => {
      const found = dataKelulusan.find((d) => d.nisn === nisn.trim());
      setResult(found ?? "notfound");
      setLoading(false);
    }, 700);
  };

  return (
    <>
      <PageHero title="Cek Kelulusan" subtitle="Masukkan NISN untuk melihat status kelulusan." />
      <section className="section-pad">
        <div className="container-x max-w-2xl">
          <Reveal>
            <div className="neu-lg p-8">
              <div className="mx-auto grid h-16 w-16 place-items-center rounded-2xl text-primary-foreground" style={{ backgroundImage: "var(--gradient-primary)" }}>
                <GraduationCap className="h-8 w-8" />
              </div>
              <h2 className="mt-5 text-center text-2xl font-bold">Pengumuman Kelulusan</h2>
              <p className="mx-auto mt-2 max-w-md text-center text-sm text-muted-foreground">
                Pengumuman resmi kelulusan Tahun Pelajaran 2025/2026. Masukkan Nomor Induk Siswa Nasional (NISN) Anda.
              </p>
              <form className="mt-6 flex flex-col gap-3 sm:flex-row" onSubmit={handleSearch}>
                <input
                  required
                  value={nisn}
                  onChange={(e) => setNisn(e.target.value.replace(/\D/g, ""))}
                  className="input-neu flex-1"
                  placeholder="Contoh: 0098765432"
                  maxLength={15}
                  inputMode="numeric"
                />
                <button type="submit" className="btn-neu btn-neu-primary" disabled={loading}>
                  <Search className="h-5 w-5" /> {loading ? "Mencari..." : "Cek"}
                </button>
              </form>
              <p className="mt-3 text-center text-xs text-muted-foreground">Coba NISN demo: 0098765432</p>
            </div>
          </Reveal>

          {result && result !== "notfound" && (
            <motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} className="mt-6">
              <div className="neu-lg overflow-hidden">
                <div className="p-6 text-center text-primary-foreground" style={{ backgroundImage: "var(--gradient-primary)" }}>
                  <CheckCircle2 className="mx-auto h-12 w-12" />
                  <p className="mt-2 font-display text-2xl font-bold">{result.status}</p>
                </div>
                <div className="space-y-4 p-7">
                  <Row label="NISN" value={result.nisn} />
                  <Row label="Nama Siswa" value={result.nama} />
                  <Row label="Status" value={result.status} />
                  <div>
                    <p className="text-sm text-muted-foreground">Keterangan</p>
                    <p className="mt-1 font-medium text-foreground">{result.keterangan}</p>
                  </div>
                </div>
              </div>
            </motion.div>
          )}

          {result === "notfound" && (
            <motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} className="mt-6">
              <div className="neu-lg flex flex-col items-center p-8 text-center">
                <XCircle className="h-12 w-12 text-destructive" />
                <p className="mt-3 font-display text-lg font-bold">Data Tidak Ditemukan</p>
                <p className="mt-1 text-sm text-muted-foreground">NISN yang Anda masukkan tidak terdaftar. Periksa kembali atau hubungi madrasah.</p>
              </div>
            </motion.div>
          )}
        </div>
      </section>
    </>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between border-b border-border pb-3">
      <span className="text-sm text-muted-foreground">{label}</span>
      <span className="font-semibold text-foreground">{value}</span>
    </div>
  );
}