"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, ArrowUp } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { toast } from "sonner";
import { useKelas } from "../_hooks/use-kelas";

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

export function SiswaNaikKelasForm() {
  const [dariKelas, setDariKelas] = React.useState("");
  const [keKelas, setKeKelas] = React.useState("");
  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 { kelasList, loading: kelasLoading, error: kelasError } = useKelas();

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

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

      if (result.success) {
        setSiswaList(result.data);
        setSelectedSiswa([]);
        toast.success(`Ditemukan ${result.count} siswa di kelas ${dariKelas}`);
      } 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(siswaList.map((s) => s.id));
    } else {
      setSelectedSiswa([]);
    }
  };

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

    if (!keKelas) {
      toast.error("Pilih kelas tujuan");
      return;
    }

    if (dariKelas === keKelas) {
      toast.error("Kelas asal dan tujuan tidak boleh sama");
      return;
    }

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

      const result = await response.json();

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

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ArrowUp className="h-5 w-5" />
            Naik Kelas Siswa
          </CardTitle>
          <CardDescription>Proses kenaikan kelas siswa dari satu tingkat ke tingkat lainnya</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="dari-kelas">Dari Kelas</Label>
              <Select value={dariKelas} onValueChange={setDariKelas}>
                <SelectTrigger>
                  <SelectValue placeholder="Pilih kelas asal" />
                </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">
              <Label htmlFor="ke-kelas">Naik ke Kelas</Label>
              <Select value={keKelas} onValueChange={setKeKelas}>
                <SelectTrigger>
                  <SelectValue placeholder="Pilih kelas tujuan" />
                </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>

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

          {dariKelas && keKelas && dariKelas !== keKelas && (
            <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
              <div className="flex items-center gap-2 text-blue-800">
                <ArrowUp className="h-4 w-4" />
                <span className="font-medium">
                  Siswa akan naik dari kelas {dariKelas} ke kelas {keKelas}
                </span>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {siswaList.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Daftar Siswa - Kelas {dariKelas}</CardTitle>
            <CardDescription>
              Pilih siswa yang akan naik ke kelas {keKelas || "..."} ({siswaList.length} siswa)
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="select-all-naik"
                  checked={selectedSiswa.length === siswaList.length}
                  onCheckedChange={handleSelectAll}
                />
                <Label htmlFor="select-all-naik" className="text-sm font-medium">
                  Pilih Semua ({selectedSiswa.length}/{siswaList.length})
                </Label>
              </div>

              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-12"></TableHead>
                      <TableHead>NISN</TableHead>
                      <TableHead>Nama</TableHead>
                      <TableHead>Kelas Saat Ini</TableHead>
                      <TableHead>Jurusan</TableHead>
                      <TableHead>Naik ke Kelas</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {siswaList.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.name}</TableCell>
                        <TableCell>{siswa.kelas}</TableCell>
                        <TableCell>{siswa.jurusan?.namaJurusan || "-"}</TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1">
                            <ArrowUp className="h-3 w-3 text-green-600" />
                            <span className="font-medium text-green-600">{keKelas || "-"}</span>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

              {selectedSiswa.length > 0 && keKelas && (
                <div className="flex items-center justify-between border-t pt-4">
                  <p className="text-muted-foreground text-sm">
                    {selectedSiswa.length} siswa dipilih untuk naik ke kelas {keKelas}
                  </p>
                  <Button onClick={handleSubmit} disabled={!keKelas || processing || dariKelas === keKelas}>
                    {processing ? (
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    ) : (
                      <ArrowUp className="mr-2 h-4 w-4" />
                    )}
                    Proses Naik Kelas
                  </Button>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}