"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Search, Printer, AlertCircle, CheckCircle2, XCircle } from "lucide-react";
import { checkSkl } from "./action";
import { toast } from "sonner";
import Link from "next/link";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

const formSchema = z.object({
  nisn: z.string().min(8, "NISN minimal 8 karakter"),
  // tanggalLahir: z.string().optional(), // Can enable later
});

export default function SklPage() {
  const [result, setResult] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      nisn: "",
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
    setLoading(true);
    setError(null);
    setResult(null);

    const res = await checkSkl(values.nisn);

    if (res.success) {
      setResult(res.data);
      toast.success("Data ditemukan");
    } else {
      setError(res.error || "Data tidak ditemukan");
    }
    setLoading(false);
  }

  return (
    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center bg-slate-50 p-4">
      <div className="w-full max-w-lg space-y-8">
        <div className="text-center">
          <h1 className="text-3xl font-bold tracking-tight text-slate-900">Cek Kelulusan</h1>
          <p className="mt-2 text-slate-600">Masukkan NISN siswa untuk memeriksa status kelulusan.</p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Pencarian Data</CardTitle>
            <CardDescription>Silakan masukkan identitas siswa</CardDescription>
          </CardHeader>
          <CardContent>
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                <FormField
                  control={form.control}
                  name="nisn"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>NISN</FormLabel>
                      <FormControl>
                        <Input placeholder="Contoh: 0012345678" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Button type="submit" className="w-full" disabled={loading}>
                  {loading ? (
                    <>Mencari...</>
                  ) : (
                    <>
                      <Search className="mr-2 h-4 w-4" /> Cek Status
                    </>
                  )}
                </Button>
              </form>
            </Form>
          </CardContent>
        </Card>

        {error && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Tidak Ditemukan</AlertTitle>
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

        {result && (
          <Card className="border-t-primary animate-in fade-in slide-in-from-bottom-4 border-t-4 shadow-lg">
            <CardHeader className="pb-2 text-center">
              {result.status === "LULUS" ? (
                <CheckCircle2 className="mx-auto mb-2 h-12 w-12 text-green-500" />
              ) : (
                <XCircle className="mx-auto mb-2 h-12 w-12 text-red-500" />
              )}
              <CardTitle className="text-2xl">{result.status === "LULUS" ? "LULUS" : result.status}</CardTitle>
              <CardDescription>Tahun Pelajaran 2024/2025</CardDescription>
            </CardHeader>
            <CardContent className="grid gap-2 text-sm sm:text-base">
              <div className="grid grid-cols-3 border-b py-2">
                <span className="font-medium text-slate-500">Nama</span>
                <span className="col-span-2 font-semibold">{result.nama}</span>
              </div>
              <div className="grid grid-cols-3 border-b py-2">
                <span className="font-medium text-slate-500">NISN</span>
                <span className="col-span-2">{result.nisn}</span>
              </div>
              <div className="grid grid-cols-3 border-b py-2">
                <span className="font-medium text-slate-500">Kelas</span>
                <span className="col-span-2">{result.kelas}</span>
              </div>
              <div className="grid grid-cols-3 border-b py-2">
                <span className="font-medium text-slate-500">Jurusan</span>
                <span className="col-span-2">{result.jurusan}</span>
              </div>
            </CardContent>
            <CardFooter>
              {result.status === "LULUS" && (
                <Link href={`/print/skl/${result.id}`} target="_blank" className="w-full">
                  <Button className="w-full" size="lg" variant="outline">
                    <Printer className="mr-2 h-4 w-4" /> Cetak Surat Keterangan
                  </Button>
                </Link>
              )}
            </CardFooter>
          </Card>
        )}
      </div>
    </div>
  );
}