"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Search, Loader2, UserX, GraduationCap, X } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { useKelas } from "../_hooks/use-kelas";

interface Siswa {
  id: string;
  nama: string;
  nisn: string;
  kelas: string;
  jurusan?: {
    namaJurusan: string;
  };
}

export function SiswaKeluarForm() {
  const [kelas, setKelas] = React.useState("");
  const [alasan, setAlasan] = React.useState("");
  const [tipeKeluar, setTipeKeluar] = React.useState<"keluar" | "tamat">("keluar");
  const [siswaList, setSiswaList] = React.useState<Siswa[]>([]);
  const [selectedSiswa, setSelectedSiswa] = React.useState<string[]>([]);
  const [loading, setLoading] = React.useState(false);
  const [processing, setProcessing] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState("");
  const [selectedJurusan, setSelectedJurusan] = React.useState("__all__");

  const { kelasList, loading: kelasLoading, error: kelasError } = useKelas();

  const alasanOptions = ["Lulus", "Pindah Sekolah", "Mengundurkan Diri", "Dikeluarkan", "Putus Sekolah", "Lainnya"];

  // Get unique jurusan from siswa list
  const uniqueJurusan = React.useMemo(() => {
    const jurusanSet = new Set(siswaList.map((s) => s.jurusan?.namaJurusan).filter(Boolean));
    return Array.from(jurusanSet);
  }, [siswaList]);

  // Filter and search siswa
  const filteredSiswa = React.useMemo(() => {
    return siswaList.filter((siswa) => {
      const matchesSearch =
        searchQuery === "" ||
        siswa.nama.toLowerCase().includes(searchQuery.toLowerCase()) ||
        siswa.nisn.toLowerCase().includes(searchQuery.toLowerCase());

      const matchesJurusan =
        selectedJurusan === "" || selectedJurusan === "__all__" || siswa.jurusan?.namaJurusan === selectedJurusan;

      return matchesSearch && matchesJurusan;
    });
  }, [siswaList, searchQuery, selectedJurusan]);

  const handleCariSiswa = async () => {
    if (!kelas) {
      toast.error("Pilih kelas terlebih dahulu");
      return;
    }

    setLoading(true);
    try {
      const response = await fetch(`/api/siswa/mutasi?kelas=${encodeURIComponent(kelas)}`);
      const result = await response.json();

      if (result.success) {
        setSiswaList(result.data);
        setSelectedSiswa([]);
        setSearchQuery("");
        setSelectedJurusan("__all__");
        toast.success(`Ditemukan ${result.count} siswa di kelas ${kelas}`);
      } else {
        toast.error(result.error || "Gagal mengambil data siswa");
        setSiswaList([]);
      }
    } catch (error) {
      console.error("Error fetching siswa:", error);
      toast.error("Terjadi kesalahan saat mengambil data siswa");
      setSiswaList([]);
    } finally {
      setLoading(false);
    }
  };

  const handleSelectSiswa = (siswaId: string, checked: boolean) => {
    if (checked) {
      setSelectedSiswa((prev) => [...prev, siswaId]);
    } else {
      setSelectedSiswa((prev) => prev.filter((id) => id !== siswaId));
    }
  };

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedSiswa(filteredSiswa.map((s) => s.id));
    } else {
      setSelectedSiswa([]);
    }
  };

  const clearFilters = () => {
    setSearchQuery("");
    setSelectedJurusan("__all__");
  };

  const handleSubmit = async () => {
    if (selectedSiswa.length === 0) {
      toast.error("Pilih minimal satu siswa");
      return;
    }

    if (!alasan) {
      toast.error("Alasan harus diisi");
      return;
    }

    setProcessing(true);
    try {
      const response = await fetch("/api/siswa/mutasi", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          type: tipeKeluar,
          siswaIds: selectedSiswa,
          alasan,
          dariKelas: kelas,
        }),
      });

      const result = await response.json();

      if (result.success) {
        toast.success(result.message);
        // Reset form
        setSiswaList([]);
        setSelectedSiswa([]);
        setKelas("");
        setAlasan("");
      } else {
        toast.error(result.error || "Gagal memproses mutasi siswa");
      }
    } catch (error) {
      console.error("Error processing mutasi:", error);
      toast.error("Terjadi kesalahan saat memproses mutasi siswa");
    } finally {
      setProcessing(false);
    }
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            {tipeKeluar === "keluar" ? <UserX className="h-5 w-5" /> : <GraduationCap className="h-5 w-5" />}
            {tipeKeluar === "keluar" ? "Siswa Keluar" : "Siswa Tamat"}
          </CardTitle>
          <CardDescription>
            {tipeKeluar === "keluar" ? "Proses siswa yang keluar dari sekolah" : "Proses siswa yang telah tamat/lulus"}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="tipe-keluar">Tipe</Label>
              <Select value={tipeKeluar} onValueChange={(value) => setTipeKeluar(value as "keluar" | "tamat")}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="keluar">Keluar</SelectItem>
                  <SelectItem value="tamat">Tamat/Lulus</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="kelas">Kelas</Label>
              <Select value={kelas} onValueChange={setKelas}>
                <SelectTrigger>
                  <SelectValue placeholder="Pilih kelas" />
                </SelectTrigger>
                <SelectContent>
                  {kelasLoading ? (
                    <SelectItem value="__loading__" disabled>
                      Loading...
                    </SelectItem>
                  ) : kelasError ? (
                    <SelectItem value="__error__" disabled>
                      Error loading kelas
                    </SelectItem>
                  ) : (
                    kelasList.map((k) => (
                      <SelectItem key={k.kelas} value={k.kelas}>
                        {k.kelas} ({k.jumlahSiswa} siswa)
                      </SelectItem>
                    ))
                  )}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="alasan">Alasan</Label>
              <Select value={alasan} onValueChange={setAlasan}>
                <SelectTrigger>
                  <SelectValue placeholder="Pilih alasan" />
                </SelectTrigger>
                <SelectContent>
                  {alasanOptions.map((a) => (
                    <SelectItem key={a} value={a}>
                      {a}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="flex gap-2">
            <Button onClick={handleCariSiswa} disabled={!kelas || loading}>
              {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Search className="mr-2 h-4 w-4" />}
              Cari Siswa
            </Button>
          </div>

          {siswaList.length > 0 && (
            <div className="bg-muted/50 space-y-4 rounded-lg border p-4">
              <div className="flex items-center justify-between">
                <h4 className="text-sm font-medium">Filter & Pencarian</h4>
                {(searchQuery || (selectedJurusan && selectedJurusan !== "__all__")) && (
                  <Button variant="ghost" size="sm" onClick={clearFilters}>
                    <X className="mr-1 h-3 w-3" />
                    Clear
                  </Button>
                )}
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="search">Cari Nama/NISN</Label>
                  <Input
                    id="search"
                    placeholder="Masukkan nama atau NISN siswa..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="filter-jurusan">Filter Jurusan</Label>
                  <Select value={selectedJurusan} onValueChange={setSelectedJurusan}>
                    <SelectTrigger>
                      <SelectValue placeholder="Semua jurusan" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__all__">Semua jurusan</SelectItem>
                      {uniqueJurusan.map((jurusan) => (
                        <SelectItem key={jurusan} value={jurusan as string}>
                          {jurusan}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {(searchQuery || (selectedJurusan && selectedJurusan !== "__all__")) && (
                <div className="text-muted-foreground flex items-center gap-2 text-sm">
                  <span>Filter aktif:</span>
                  {searchQuery && <Badge variant="secondary">Pencarian: &quot;{searchQuery}&quot;</Badge>}
                  {selectedJurusan && selectedJurusan !== "__all__" && (
                    <Badge variant="secondary">Jurusan: {selectedJurusan}</Badge>
                  )}
                </div>
              )}
            </div>
          )}
        </CardContent>
      </Card>

      {siswaList.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Daftar Siswa - Kelas {kelas}</CardTitle>
            <CardDescription>
              Pilih siswa yang akan {tipeKeluar === "keluar" ? "keluar" : "tamat"} ({filteredSiswa.length} dari{" "}
              {siswaList.length} siswa)
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="select-all"
                    checked={filteredSiswa.length > 0 && selectedSiswa.length === filteredSiswa.length}
                    onCheckedChange={handleSelectAll}
                  />
                  <Label htmlFor="select-all" className="text-sm font-medium">
                    Pilih Semua ({selectedSiswa.length}/{filteredSiswa.length})
                  </Label>
                </div>
                {selectedSiswa.length > 0 && (
                  <Button onClick={handleSubmit} disabled={!alasan || processing}>
                    {processing ? (
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    ) : tipeKeluar === "keluar" ? (
                      <UserX className="mr-2 h-4 w-4" />
                    ) : (
                      <GraduationCap className="mr-2 h-4 w-4" />
                    )}
                    {tipeKeluar === "keluar" ? "Proses Keluar" : "Proses Tamat"}
                  </Button>
                )}
              </div>

              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-12"></TableHead>
                      <TableHead>NISN</TableHead>
                      <TableHead>Nama</TableHead>
                      <TableHead>Kelas</TableHead>
                      <TableHead>Jurusan</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredSiswa.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={5} className="text-muted-foreground py-8 text-center">
                          {siswaList.length === 0
                            ? "Tidak ada siswa ditemukan"
                            : "Tidak ada siswa yang sesuai dengan filter"}
                        </TableCell>
                      </TableRow>
                    ) : (
                      filteredSiswa.map((siswa) => (
                        <TableRow key={siswa.id}>
                          <TableCell>
                            <Checkbox
                              checked={selectedSiswa.includes(siswa.id)}
                              onCheckedChange={(checked) => handleSelectSiswa(siswa.id, checked as boolean)}
                            />
                          </TableCell>
                          <TableCell className="font-mono text-sm">{siswa.nisn}</TableCell>
                          <TableCell className="font-medium">{siswa.nama}</TableCell>
                          <TableCell>{siswa.kelas}</TableCell>
                          <TableCell>{siswa.jurusan?.namaJurusan || "-"}</TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>

              {selectedSiswa.length > 0 && (
                <div className="border-t pt-4">
                  <p className="text-muted-foreground text-center text-sm">
                    {selectedSiswa.length} siswa dipilih untuk {tipeKeluar}
                  </p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}