"use client";

import { useEffect, useState } from "react";
import { format } from "date-fns";
import { id as idLocale } from "date-fns/locale";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Loader2, Calendar as CalendarIcon, Save, FileText } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";

interface AbsensiDialogProps {
  jadwalId: string;
  jadwalInfo: string; // e.g., "Matematika - X RPL 1"
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}

interface StudentAbsensi {
  id: string; // Siswa ID
  nama: string;
  nis: string;
  rombel: string;
  status: "HADIR" | "SAKIT" | "IZIN" | "ALPHA" | null; // null if fresh
  keterangan?: string;
  absensiId?: string;
  isChecked?: boolean; // Helper for UI
  suratIjin?: {
    type: string;
    keterangan: string;
    fileUrl?: string | null;
  };
}

export function AbsensiDialog({ jadwalId, jadwalInfo, isOpen, onOpenChange }: AbsensiDialogProps) {
  const [date, setDate] = useState<string>(new Date().toISOString().split("T")[0]); // YYYY-MM-DD
  const [students, setStudents] = useState<StudentAbsensi[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  // Fetch data when dialog opens or date changes
  useEffect(() => {
    if (isOpen && jadwalId) {
      fetchAbsensi();
    }
  }, [isOpen, date, jadwalId]);

  const fetchAbsensi = async () => {
    try {
      setIsLoading(true);
      const response = await fetch(`/api/absensi?jadwalId=${jadwalId}&tanggal=${date}`);
      const result = await response.json();

      if (result.success) {
        // Map response to UI state
        // If status is null (no record), default to unchecked (will become ALPHA/Absent on save if left)
        const mapped = result.data.map((s: any) => ({
          ...s,
          status: s.status || "ALPHA", // Default to Alpha if not recorded? Or null?
          // User wants check = attend.
          // So if s.status == 'HADIR', isChecked = true.
          // If s.status == null, isChecked = false.
          isChecked: s.status === "HADIR",
        }));
        setStudents(mapped);
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      console.error("Error fetching absensi:", error);
      toast.error("Gagal mengambil data absensi");
    } finally {
      setIsLoading(false);
    }
  };

  const handleCheck = (id: string, checked: boolean) => {
    setStudents((prev) =>
      prev.map((s) => {
        if (s.id === id) {
          return {
            ...s,
            isChecked: checked,
            status: checked ? "HADIR" : "ALPHA", // Default uncheck to Alpha
          };
        }
        return s;
      }),
    );
  };

  const handleStatusChange = (id: string, value: "HADIR" | "SAKIT" | "IZIN" | "ALPHA") => {
    setStudents((prev) =>
      prev.map((s) => {
        if (s.id === id) {
          return {
            ...s,
            status: value,
            isChecked: value === "HADIR",
          };
        }
        return s;
      }),
    );
  };

  const handleKeteranganChange = (id: string, value: string) => {
    setStudents((prev) => prev.map((s) => (s.id === id ? { ...s, keterangan: value } : s)));
  };

  const handleSave = async () => {
    try {
      setIsSaving(true);

      const payload = {
        jadwalId,
        tanggal: date,
        records: students.map((s) => ({
          siswaId: s.id,
          status: s.isChecked ? "HADIR" : s.status === "HADIR" ? "ALPHA" : s.status, // Ensure unchecking HADIR becomes ALPHA
          keterangan: s.keterangan || "",
        })),
      };

      const response = await fetch("/api/absensi", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const result = await response.json();

      if (result.success) {
        toast.success("Absensi berhasil disimpan");
        onOpenChange(false);
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      console.error("Error saving absensi:", error);
      toast.error("Gagal menyimpan absensi");
    } finally {
      setIsSaving(false);
    }
  };

  const handleCheckAll = (checked: boolean) => {
    setStudents((prev) =>
      prev.map((s) => ({
        ...s,
        isChecked: checked,
        status: checked ? "HADIR" : "ALPHA",
      })),
    );
  };

  // Prevent dialog close on outside click as requested
  const handleInteractOutside = (e: Event) => {
    e.preventDefault();
  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent
        className="flex h-[90vh] max-w-4xl flex-col gap-0 p-0" // Full height modal
        onInteractOutside={handleInteractOutside}
      >
        <DialogHeader className="border-b px-6 py-4">
          <DialogTitle>Absensi Siswa</DialogTitle>
          <DialogDescription>{jadwalInfo}</DialogDescription>
          <div className="mt-2 flex items-center gap-4">
            <div className="relative">
              <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="w-40" />
            </div>
            <div className="text-muted-foreground text-sm">
              Total Siswa: {students.length} | Hadir: {students.filter((s) => s.isChecked).length}
            </div>
          </div>
        </DialogHeader>

        <div className="flex-1 overflow-y-auto p-6">
          {isLoading ? (
            <div className="flex h-full items-center justify-center">
              <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
            </div>
          ) : (
            <div className="rounded-md border bg-white">
              <div className="sticky top-0 z-10 grid grid-cols-12 items-center gap-2 border-b bg-gray-50 p-3 text-sm font-medium">
                <div className="col-span-1 text-center">
                  <Checkbox
                    checked={students.length > 0 && students.every((s) => s.isChecked)}
                    onCheckedChange={(c) => handleCheckAll(!!c)}
                  />
                </div>
                <div className="col-span-1">No</div>
                <div className="col-span-3">Nama Siswa</div>
                <div className="col-span-2">Rombel</div>
                <div className="col-span-2">Status</div>
                <div className="col-span-3">Keterangan</div>
              </div>
              {students.map((student, index) => (
                <div
                  key={student.id}
                  className={`hover:bg-muted/30 grid grid-cols-12 items-center gap-2 border-b p-3 text-sm last:border-0 ${student.isChecked ? "bg-green-50/50" : ""}`}
                >
                  <div className="col-span-1 text-center">
                    <Checkbox checked={student.isChecked} onCheckedChange={(c) => handleCheck(student.id, !!c)} />
                  </div>
                  <div className="text-muted-foreground col-span-1">{index + 1}</div>
                  <div className="col-span-3 flex flex-col justify-center font-medium">
                    <span className="text-sm">{student.nama}</span>
                    {student.suratIjin && (
                      <div className="mt-1.5 flex flex-wrap items-center gap-2">
                        <Badge
                          variant={student.suratIjin.type === "SAKIT" ? "destructive" : "secondary"}
                          className="h-5 rounded-sm px-1.5 text-[10px] font-bold"
                        >
                          {student.suratIjin.type}
                        </Badge>
                        <span
                          className="text-muted-foreground line-clamp-1 max-w-[140px] text-[11px]"
                          title={student.suratIjin.keterangan}
                        >
                          {student.suratIjin.keterangan}
                        </span>
                        {student.suratIjin.fileUrl && (
                          <a
                            href={student.suratIjin.fileUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-primary hover:bg-primary/10 hover:border-primary/20 flex items-center gap-1 rounded-sm border border-transparent px-1.5 py-0.5 text-[10px] font-medium transition-colors"
                            onClick={(e) => e.stopPropagation()}
                          >
                            <FileText className="h-3 w-3" /> Bukti
                          </a>
                        )}
                      </div>
                    )}
                  </div>
                  <div className="text-muted-foreground col-span-2 text-xs">{student.rombel}</div>
                  <div className="col-span-2">
                    {/* If checked, shows HADIR. If not checked, user can select reason if not simple absent */}
                    {student.isChecked ? (
                      <span className="rounded border border-green-200 bg-green-100 px-2 py-1 text-xs font-bold text-green-600">
                        HADIR
                      </span>
                    ) : (
                      <Select
                        value={student.status === "HADIR" ? "ALPHA" : student.status || "ALPHA"}
                        onValueChange={(v: any) => handleStatusChange(student.id, v)}
                      >
                        <SelectTrigger className="h-7 w-full text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="ALPHA">ALPHA</SelectItem>
                          <SelectItem value="SAKIT">SAKIT</SelectItem>
                          <SelectItem value="IZIN">IZIN</SelectItem>
                        </SelectContent>
                      </Select>
                    )}
                  </div>
                  <div className="col-span-3">
                    <Input
                      className="h-7 text-xs"
                      placeholder="Ket..."
                      value={
                        student.keterangan ||
                        (student.suratIjin ? `${student.suratIjin.type} - ${student.suratIjin.keterangan}` : "")
                      }
                      onChange={(e) => handleKeteranganChange(student.id, e.target.value)}
                    />
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <DialogFooter className="bg-muted/20 border-t px-6 py-4">
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
            Tutup
          </Button>
          <Button onClick={handleSave} disabled={isSaving || isLoading}>
            {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            Simpan Absensi
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}