"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Plus, Edit, Trash2, Search, Loader2, UserPlus } from "lucide-react";
import {
  useSiswa,
  createSiswa,
  updateSiswa,
  deleteSiswa,
  generateUser,
  type CreateSiswaData,
  type UpdateSiswaData,
  type Siswa,
} from "@/hooks/use-siswa";
import { useJurusan } from "@/hooks/use-jurusan";
import { ImportSiswa } from "./import-siswa";
import { ExportSiswa } from "./export-siswa";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";

const SiswaFormSchema = z.object({
  nisn: z.string().min(1, "NISN tidak boleh kosong"),
  nis: z.string().min(1, "NIS tidak boleh kosong"),
  tingkat: z.string().min(1, "Tingkat tidak boleh kosong"),
  kelas: z.string().min(1, "Kelas tidak boleh kosong"),
  jurusanId: z.string().optional(),
  nama: z.string().min(1, "Nama tidak boleh kosong"),
  jk: z.enum(["L", "P"]),
  agama: z.string().min(1, "Agama tidak boleh kosong"),
  noWa: z.string().optional(),
  noWaOrtu: z.string().optional(),
});

type SiswaFormData = z.infer<typeof SiswaFormSchema>;

export function SiswaManagement() {
  const { siswa, isLoading, mutate } = useSiswa();
  const { data: jurusanList } = useJurusan();
  const [searchTerm, setSearchTerm] = useState("");
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    setValue,
    watch,
  } = useForm<SiswaFormData>({
    resolver: zodResolver(SiswaFormSchema),
  });

  const filteredSiswa = siswa.filter(
    (item) =>
      item.nama.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.nisn.includes(searchTerm) ||
      item.nis.includes(searchTerm) ||
      item.kelas.toLowerCase().includes(searchTerm.toLowerCase()),
  );

  const handleGenerateUser = async (siswaId: string) => {
    if (!confirm("Buat akun user untuk siswa ini? Username: NIS, Password: NISN")) return;

    try {
      await generateUser(siswaId);
      toast.success("Akun user berhasil dibuat");
      mutate();
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Gagal membuat user";
      toast.error(errorMessage);
    }
  };

  const handleAdd = () => {
    reset();
    setEditingId(null);
    setIsDialogOpen(true);
  };

  const handleEdit = (item: Siswa) => {
    reset();
    setEditingId(item.id);
    setValue("nisn", item.nisn);
    setValue("nis", item.nis);
    setValue("tingkat", item.tingkat);
    setValue("kelas", item.kelas);
    setValue("jurusanId", item.jurusanId || "");
    setValue("nama", item.nama);
    setValue("jk", item.jk);
    setValue("agama", item.agama);
    setValue("noWa", item.noWa || "");
    setValue("noWaOrtu", item.noWaOrtu || "");
    setIsDialogOpen(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Apakah Anda yakin ingin menghapus data siswa ini?")) return;

    try {
      await deleteSiswa(id);
      toast.success("Siswa berhasil dihapus");
      mutate();
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Gagal menghapus siswa";
      toast.error(errorMessage);
    }
  };

  const onSubmit = async (data: SiswaFormData) => {
    setIsSubmitting(true);
    try {
      if (editingId) {
        await updateSiswa(editingId, data as UpdateSiswaData);
        toast.success("Siswa berhasil diperbarui");
      } else {
        await createSiswa(data as CreateSiswaData);
        toast.success("Siswa berhasil ditambahkan");
      }

      setIsDialogOpen(false);
      reset();
      mutate();
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Terjadi kesalahan";
      toast.error(errorMessage);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Data Siswa</CardTitle>
            <CardDescription>Kelola data siswa sekolah</CardDescription>
          </div>
          <div className="flex items-center space-x-2">
            <ExportSiswa />
            <ImportSiswa onImportComplete={() => mutate()} />
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button onClick={handleAdd}>
                  <Plus className="mr-2 h-4 w-4" />
                  Tambah Siswa
                </Button>
              </DialogTrigger>
              <DialogContent className="bg-background supports-backdrop-filter:bg-background/60 h-[80vh] w-[95vw] max-w-7xl overflow-y-auto backdrop-blur">
                <DialogHeader className="space-y-3 pb-6">
                  <DialogTitle className="text-foreground text-2xl font-semibold">
                    {editingId ? "Edit Siswa" : "Tambah Siswa"}
                  </DialogTitle>
                  <DialogDescription className="text-muted-foreground">
                    {editingId ? "Perbarui data siswa" : "Tambahkan siswa baru ke sistem"}
                  </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
                  <div className="bg-card space-y-4 rounded-lg border p-4">
                    <h3 className="text-card-foreground text-lg font-medium">Informasi Identitas</h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="nisn" className="text-foreground text-sm font-medium">
                          NISN
                        </Label>
                        <Input id="nisn" {...register("nisn")} placeholder="Masukkan NISN" className="bg-background" />
                        {errors.nisn && <p className="text-destructive text-sm">{errors.nisn.message}</p>}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="nis" className="text-foreground text-sm font-medium">
                          NIS
                        </Label>
                        <Input id="nis" {...register("nis")} placeholder="Masukkan NIS" className="bg-background" />
                        {errors.nis && <p className="text-destructive text-sm">{errors.nis.message}</p>}
                      </div>
                    </div>
                  </div>

                  <div className="bg-card space-y-4 rounded-lg border p-4">
                    <h3 className="text-card-foreground text-lg font-medium">Informasi Akademik</h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="tingkat" className="text-foreground text-sm font-medium">
                          Tingkat
                        </Label>
                        <Input
                          id="tingkat"
                          {...register("tingkat")}
                          placeholder="Contoh: 10, 11, 12"
                          className="bg-background"
                        />
                        {errors.tingkat && <p className="text-destructive text-sm">{errors.tingkat.message}</p>}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="kelas" className="text-foreground text-sm font-medium">
                          Kelas
                        </Label>
                        <Input
                          id="kelas"
                          {...register("kelas")}
                          placeholder="Contoh: A, B, C"
                          className="bg-background"
                        />
                        {errors.kelas && <p className="text-destructive text-sm">{errors.kelas.message}</p>}
                      </div>
                    </div>
                    <div className="grid grid-cols-1 gap-4">
                      <div className="space-y-1">
                        <Label htmlFor="jurusanId" className="text-foreground text-sm font-medium">
                          Jurusan
                        </Label>
                        <Select
                          value={watch("jurusanId") || ""}
                          onValueChange={(value) => setValue("jurusanId", value || undefined)}
                        >
                          <SelectTrigger className="bg-background">
                            <SelectValue placeholder="Pilih jurusan (opsional)" />
                          </SelectTrigger>
                          <SelectContent>
                            {jurusanList?.map((item) => (
                              <SelectItem key={item.id} value={item.id}>
                                {item.namaJurusan} ({item.kodeJurusan})
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        {errors.jurusanId && <p className="text-destructive text-sm">{errors.jurusanId.message}</p>}
                      </div>
                    </div>
                  </div>

                  <div className="bg-card space-y-4 rounded-lg border p-4">
                    <h3 className="text-card-foreground text-lg font-medium">Informasi Personal</h3>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="nama" className="text-foreground text-sm font-medium">
                          Nama Lengkap
                        </Label>
                        <Input
                          id="nama"
                          {...register("nama")}
                          placeholder="Masukkan nama lengkap"
                          className="bg-background"
                        />
                        {errors.nama && <p className="text-destructive text-sm">{errors.nama.message}</p>}
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="jk" className="text-foreground text-sm font-medium">
                            Jenis Kelamin
                          </Label>
                          <Select onValueChange={(value) => setValue("jk", value as "L" | "P")}>
                            <SelectTrigger className="bg-background">
                              <SelectValue placeholder="Pilih jenis kelamin" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="L">Laki-laki</SelectItem>
                              <SelectItem value="P">Perempuan</SelectItem>
                            </SelectContent>
                          </Select>
                          {errors.jk && <p className="text-destructive text-sm">{errors.jk.message}</p>}
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="agama" className="text-foreground text-sm font-medium">
                            Agama
                          </Label>
                          <Input
                            id="agama"
                            {...register("agama")}
                            placeholder="Masukkan agama"
                            className="bg-background"
                          />
                          {errors.agama && <p className="text-destructive text-sm">{errors.agama.message}</p>}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="bg-card space-y-4 rounded-lg border p-4">
                    <h3 className="text-card-foreground text-lg font-medium">Informasi Kontak</h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="noWa" className="text-foreground text-sm font-medium">
                          No. WhatsApp Siswa
                        </Label>
                        <Input
                          id="noWa"
                          {...register("noWa")}
                          placeholder="Masukkan nomor WhatsApp"
                          className="bg-background"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="noWaOrtu" className="text-foreground text-sm font-medium">
                          No. WhatsApp Orang Tua
                        </Label>
                        <Input
                          id="noWaOrtu"
                          {...register("noWaOrtu")}
                          placeholder="Masukkan nomor WhatsApp orang tua"
                          className="bg-background"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="bg-muted/50 -mx-6 mt-6 -mb-6 flex justify-end space-x-3 rounded-b-lg border-t px-6 py-4">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => setIsDialogOpen(false)}
                      disabled={isSubmitting}
                      className="bg-background hover:bg-accent"
                    >
                      Batal
                    </Button>
                    <Button type="submit" disabled={isSubmitting} className="bg-primary hover:bg-primary/90">
                      {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                      {editingId ? "Perbarui" : "Simpan"}
                    </Button>
                  </div>
                </form>
              </DialogContent>
            </Dialog>
          </div>
        </div>

        <div className="flex items-center space-x-2">
          <div className="relative max-w-sm flex-1">
            <Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
            <Input
              placeholder="Cari siswa..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
        </div>
      </CardHeader>

      <CardContent>
        {isLoading ? (
          <div className="flex items-center justify-center py-6">
            <Loader2 className="h-6 w-6 animate-spin" />
            <span className="ml-2">Memuat data...</span>
          </div>
        ) : (
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[60px]">No</TableHead>
                  <TableHead>NISN</TableHead>
                  <TableHead>NIS</TableHead>
                  <TableHead>Nama</TableHead>
                  <TableHead>Kelas</TableHead>
                  <TableHead>JK</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Agama</TableHead>
                  <TableHead className="w-[100px]">Aksi</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredSiswa.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={9} className="py-6 text-center">
                      {searchTerm ? "Tidak ada siswa yang sesuai dengan pencarian" : "Belum ada data siswa"}
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredSiswa.map((item, index) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{index + 1}</TableCell>
                      <TableCell>{item.nisn}</TableCell>
                      <TableCell>{item.nis}</TableCell>
                      <TableCell className="font-medium">{item.nama}</TableCell>
                      <TableCell>
                        <Badge variant="secondary">
                          {item.tingkat} {item.kelas} {item.jurusan?.namaJurusan || "Tidak ada"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge variant={item.jk === "L" ? "default" : "secondary"}>{item.jk === "L" ? "L" : "P"}</Badge>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            item.user?.status === "AKTIF"
                              ? "default"
                              : item.user?.status === "KELUAR"
                                ? "destructive"
                                : item.user?.status === "TAMAT"
                                  ? "outline"
                                  : "secondary"
                          }
                        >
                          {item.user?.status || "TIDAK TERDAFTAR"}
                        </Badge>
                      </TableCell>
                      <TableCell>{item.agama}</TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-1">
                          {!item.user && (
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleGenerateUser(item.id)}
                              title="Buat Akun User"
                              className="text-blue-600 hover:text-blue-700"
                            >
                              <UserPlus className="h-4 w-4" />
                            </Button>
                          )}
                          <Button variant="ghost" size="sm" onClick={() => handleEdit(item)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(item.id)}
                            className="text-destructive hover:text-destructive"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        )}
      </CardContent>
    </Card>
  );
}