"use client";

import { useEffect, useState, useCallback } from "react";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Skeleton } from "@/components/ui/skeleton";
import { useRombel, type Rombel } from "@/hooks/use-rombel";
import { Users, BookOpen, GraduationCap, Calendar, Building } from "lucide-react";

interface RombelDetailProps {
  rombelId: string | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function RombelDetail({ rombelId, open, onOpenChange }: RombelDetailProps) {
  const [rombelData, setRombelData] = useState<Rombel | null>(null);
  const [isLoadingDetail, setIsLoadingDetail] = useState(false);
  const { fetchRombelById } = useRombel();

  const loadRombelData = useCallback(async () => {
    if (!rombelId) return;
    setIsLoadingDetail(true);
    try {
      const data = await fetchRombelById(rombelId);
      setRombelData(data);
    } finally {
      setIsLoadingDetail(false);
    }
  }, [rombelId, fetchRombelById]);

  useEffect(() => {
    if (open && rombelId) {
      loadRombelData();
    } else {
      setRombelData(null);
    }
  }, [open, rombelId, loadRombelData]);

  const handleClose = () => {
    onOpenChange(false);
    setRombelData(null);
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <GraduationCap className="h-5 w-5" />
            Detail Rombel
          </DialogTitle>
          <DialogDescription>Informasi lengkap tentang rombongan belajar dan daftar siswa</DialogDescription>
        </DialogHeader>

        {isLoadingDetail ? (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <Skeleton className="h-20" />
              <Skeleton className="h-20" />
            </div>
            <Skeleton className="h-40" />
          </div>
        ) : rombelData ? (
          <Tabs defaultValue="info" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="info">Informasi</TabsTrigger>
              <TabsTrigger value="siswa">
                Daftar Siswa ({rombelData.siswa?.length || rombelData._count?.siswa || 0})
              </TabsTrigger>
            </TabsList>

            <TabsContent value="info" className="space-y-4">
              {/* Info Cards */}
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="bg-muted/50 rounded-lg border p-4">
                  <div className="flex items-center gap-3">
                    <div className="bg-primary/10 text-primary rounded-full p-2">
                      <GraduationCap className="h-5 w-5" />
                    </div>
                    <div>
                      <p className="text-muted-foreground text-sm">Nama Rombel</p>
                      <p className="font-semibold">{rombelData.namaRombel}</p>
                    </div>
                  </div>
                </div>

                <div className="bg-muted/50 rounded-lg border p-4">
                  <div className="flex items-center gap-3">
                    <div className="bg-primary/10 text-primary rounded-full p-2">
                      <BookOpen className="h-5 w-5" />
                    </div>
                    <div>
                      <p className="text-muted-foreground text-sm">Tingkat</p>
                      <p className="font-semibold">Tingkat {rombelData.tingkat}</p>
                    </div>
                  </div>
                </div>

                <div className="bg-muted/50 rounded-lg border p-4">
                  <div className="flex items-center gap-3">
                    <div className="bg-primary/10 text-primary rounded-full p-2">
                      <Calendar className="h-5 w-5" />
                    </div>
                    <div>
                      <p className="text-muted-foreground text-sm">Tahun Pelajaran</p>
                      <p className="font-semibold">{rombelData.tahunPelajaran}</p>
                    </div>
                  </div>
                </div>

                <div className="bg-muted/50 rounded-lg border p-4">
                  <div className="flex items-center gap-3">
                    <div className="bg-primary/10 text-primary rounded-full p-2">
                      <Building className="h-5 w-5" />
                    </div>
                    <div>
                      <p className="text-muted-foreground text-sm">Jurusan</p>
                      <p className="font-semibold">
                        {rombelData.jurusan
                          ? `${rombelData.jurusan.kodeJurusan} - ${rombelData.jurusan.namaJurusan}`
                          : "-"}
                      </p>
                    </div>
                  </div>
                </div>

                <div className="bg-muted/50 rounded-lg border p-4">
                  <div className="flex items-center gap-3">
                    <div className="bg-primary/10 text-primary rounded-full p-2">
                      <Users className="h-5 w-5" />
                    </div>
                    <div>
                      <p className="text-muted-foreground text-sm">Jumlah Siswa</p>
                      <p className="font-semibold">{rombelData.siswa?.length || rombelData._count?.siswa || 0} siswa</p>
                    </div>
                  </div>
                </div>

                <div className="bg-muted/50 rounded-lg border p-4">
                  <div className="flex items-center gap-3">
                    <Badge variant={rombelData.isActive ? "default" : "secondary"} className="px-3 py-1">
                      {rombelData.isActive ? "Aktif" : "Tidak Aktif"}
                    </Badge>
                  </div>
                </div>
              </div>

              {/* Additional Info */}
              {rombelData._count?.cpFase !== undefined && rombelData._count.cpFase > 0 && (
                <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/20">
                  <p className="text-sm text-blue-700 dark:text-blue-300">
                    <BookOpen className="mr-2 inline h-4 w-4" />
                    Rombel ini memiliki <strong>{rombelData._count.cpFase}</strong> Capaian Pembelajaran (CP Fase)
                    terkait
                  </p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="siswa">
              <ScrollArea className="h-[400px]">
                {rombelData.siswa && rombelData.siswa.length > 0 ? (
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead className="w-12">No</TableHead>
                          <TableHead>NISN</TableHead>
                          <TableHead>NIS</TableHead>
                          <TableHead>Nama Siswa</TableHead>
                          <TableHead>JK</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {rombelData.siswa.map((siswa, index) => (
                          <TableRow key={siswa.id}>
                            <TableCell className="font-medium">{index + 1}</TableCell>
                            <TableCell className="font-mono text-sm">{siswa.nisn}</TableCell>
                            <TableCell className="font-mono text-sm">{siswa.nis}</TableCell>
                            <TableCell>{siswa.nama}</TableCell>
                            <TableCell>
                              <Badge variant="outline">{siswa.jk === "L" ? "Laki-laki" : "Perempuan"}</Badge>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center py-12 text-center">
                    <Users className="text-muted-foreground mb-4 h-12 w-12" />
                    <h3 className="text-lg font-semibold">Belum Ada Siswa</h3>
                    <p className="text-muted-foreground mt-1 text-sm">Rombel ini belum memiliki siswa terdaftar</p>
                  </div>
                )}
              </ScrollArea>
            </TabsContent>
          </Tabs>
        ) : (
          <div className="py-8 text-center">
            <p className="text-muted-foreground">Data tidak ditemukan</p>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}