"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Plus, Pencil, Trash2, Loader2, ClipboardCheck, FileText } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { useSchool } from "@/hooks/use-school";
import { useAuth } from "@/contexts/auth-context";
import { AbsensiDialog } from "./absensi-dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

interface Jadwal {
  id: string;
  hari: string;
  jamMulai: string;
  jamSelesai: string;
  mapelId: string;
  guruId: string;
  mapel: { id: string; namaMapel: string; kodeMapel: string };
  guru: { id: string; nama: string };
  rombels: { id: string; namaRombel: string }[];
}

const HARI_OPTIONS = ["SENIN", "SELASA", "RABU", "KAMIS", "JUMAT", "SABTU"];

export function JadwalList() {
  const router = useRouter();
  const { user } = useAuth();
  const { school } = useSchool();
  const [data, setData] = useState<Jadwal[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [editingItem, setEditingItem] = useState<Jadwal | null>(null);
  const [selectedScheduleForAbsensi, setSelectedScheduleForAbsensi] = useState<Jadwal | null>(null);

  // Master Data
  const [gurus, setGurus] = useState<{ id: string; nama: string }[]>([]);
  const [mapels, setMapels] = useState<{ id: string; namaMapel: string }[]>([]);
  const [rombels, setRombels] = useState<{ id: string; namaRombel: string }[]>([]);

  // Form Data
  const [formData, setFormData] = useState({
    hari: "",
    jamMulai: "",
    jamSelesai: "",
    mapelId: "",
    guruId: "",
    rombelIds: [] as string[],
    tahunPelajaran: "",
    semester: "GANJIL",
  });

  const fetchData = async () => {
    try {
      setIsLoading(true);
      const params = new URLSearchParams();
      if (school?.tahunPelajaran) params.append("tahunPelajaran", school.tahunPelajaran);

      const response = await fetch(`/api/jadwal-mengajar?${params}`);
      const result = await response.json();
      if (result.success) setData(result.data);
    } catch (error) {
      console.error("Error fetching jadwal:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const fetchMasterData = async () => {
    try {
      const [gRes, mRes, rRes] = await Promise.all([fetch("/api/guru"), fetch("/api/mapel"), fetch("/api/rombel")]);
      const gData = await gRes.json();
      const mData = await mRes.json();
      const rData = await rRes.json();

      if (gData.success) setGurus(gData.data);
      if (mData.success) setMapels(mData.data);
      if (rData.success) setRombels(rData.data);
    } catch (error) {
      console.error("Error fetching master data:", error);
    }
  };

  useEffect(() => {
    fetchData();
    fetchMasterData();
  }, [school?.tahunPelajaran]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      setIsSaving(true);
      const url = editingItem ? `/api/jadwal-mengajar/${editingItem.id}` : "/api/jadwal-mengajar";
      const method = editingItem ? "PUT" : "POST";

      const payload = {
        ...formData,
        tahunPelajaran: school?.tahunPelajaran || "2024/2025",
        semester: "GANJIL", // Defaulting to Ganjil for now
      };

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

      const result = await response.json();
      if (result.success) {
        toast.success(result.message);
        setIsDialogOpen(false);
        fetchData();
        resetForm();
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      toast.error("Terjadi kesalahan");
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Hapus jadwal ini?")) return;
    try {
      const response = await fetch(`/api/jadwal-mengajar/${id}`, { method: "DELETE" });
      const result = await response.json();
      if (result.success) {
        toast.success(result.message);
        fetchData();
      }
    } catch (error) {
      toast.error("Gagal menghapus");
    }
  };

  const handleEdit = (item: Jadwal) => {
    setEditingItem(item);
    setFormData({
      hari: item.hari,
      jamMulai: item.jamMulai,
      jamSelesai: item.jamSelesai,
      mapelId: item.mapelId || item.mapel.id, // Fallback if direct mapelId not present
      guruId: item.guruId || item.guru.id,
      rombelIds: item.rombels.map((r) => r.id),
      tahunPelajaran: "",
      semester: "GANJIL",
    });
    setIsDialogOpen(true);
  };

  const resetForm = () => {
    setFormData({
      hari: "SENIN",
      jamMulai: "07:00",
      jamSelesai: "08:20",
      mapelId: "",
      guruId: "",
      rombelIds: [],
      tahunPelajaran: "",
      semester: "GANJIL",
    });
    setEditingItem(null);
  };

  // Filters
  const [filterHari, setFilterHari] = useState<string>("ALL");
  const [filterKelas, setFilterKelas] = useState<string>("ALL");

  const filteredData = data.filter((item) => {
    const matchHari = filterHari === "ALL" || item.hari === filterHari;
    const matchKelas = filterKelas === "ALL" || item.rombels.some((r) => r.id === filterKelas);
    return matchHari && matchKelas;
  });

  return (
    <div className="flex flex-col gap-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Jadwal Mengajar</h1>
          <p className="text-muted-foreground">Kelola jadwal pelajaran guru per rombel</p>
        </div>
        <Dialog
          open={isDialogOpen}
          onOpenChange={(open) => {
            setIsDialogOpen(open);
            if (!open) resetForm();
          }}
        >
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" /> Tambah Jadwal
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>{editingItem ? "Edit Jadwal" : "Tambah Jadwal"}</DialogTitle>
              <DialogDescription>Masukkan detail jadwal mengajar</DialogDescription>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Hari</Label>
                  <Select value={formData.hari} onValueChange={(v) => setFormData({ ...formData, hari: v })}>
                    <SelectTrigger>
                      <SelectValue placeholder="Pilih Hari" />
                    </SelectTrigger>
                    <SelectContent>
                      {HARI_OPTIONS.map((h) => (
                        <SelectItem key={h} value={h}>
                          {h}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Jam</Label>
                  <div className="flex items-center gap-2">
                    <Input
                      type="time"
                      value={formData.jamMulai}
                      onChange={(e) => setFormData({ ...formData, jamMulai: e.target.value })}
                      required
                    />
                    <span>-</span>
                    <Input
                      type="time"
                      value={formData.jamSelesai}
                      onChange={(e) => setFormData({ ...formData, jamSelesai: e.target.value })}
                      required
                    />
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <Label>Mata Pelajaran</Label>
                <Select value={formData.mapelId} onValueChange={(v) => setFormData({ ...formData, mapelId: v })}>
                  <SelectTrigger>
                    <SelectValue placeholder="Pilih Mapel" />
                  </SelectTrigger>
                  <SelectContent>
                    {mapels.map((m) => (
                      <SelectItem key={m.id} value={m.id}>
                        {m.namaMapel}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {user?.role === "ADMIN" && (
                <div className="space-y-2">
                  <Label>Guru Pengampu</Label>
                  <Select value={formData.guruId} onValueChange={(v) => setFormData({ ...formData, guruId: v })}>
                    <SelectTrigger>
                      <SelectValue placeholder="Pilih Guru" />
                    </SelectTrigger>
                    <SelectContent>
                      {gurus.map((g) => (
                        <SelectItem key={g.id} value={g.id}>
                          {g.nama}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              <div className="space-y-2">
                <Label>Rombel (Kelas)</Label>
                <div className="h-40 space-y-2 overflow-y-auto rounded-md border p-2">
                  {rombels.map((r) => (
                    <div key={r.id} className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id={`rombel-${r.id}`}
                        className="h-4 w-4 rounded border-gray-300"
                        checked={formData.rombelIds.includes(r.id)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setFormData((prev) => ({ ...prev, rombelIds: [...prev.rombelIds, r.id] }));
                          } else {
                            setFormData((prev) => ({ ...prev, rombelIds: prev.rombelIds.filter((id) => id !== r.id) }));
                          }
                        }}
                      />
                      <label
                        htmlFor={`rombel-${r.id}`}
                        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                      >
                        {r.namaRombel}
                      </label>
                    </div>
                  ))}
                </div>
                <p className="text-muted-foreground text-xs">Bisa pilih lebih dari satu (kelas gabungan)</p>
              </div>

              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Batal
                </Button>
                <Button type="submit" disabled={isSaving}>
                  {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Simpan
                </Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </Dialog>
      </div>

      <div className="flex items-center gap-4 rounded-lg border bg-gray-50 p-4">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium">Filter Hari:</span>
          <Select value={filterHari} onValueChange={setFilterHari}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Semua Hari" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">Semua Hari</SelectItem>
              {HARI_OPTIONS.map((h) => (
                <SelectItem key={h} value={h}>
                  {h}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium">Filter Kelas:</span>
          <Select value={filterKelas} onValueChange={setFilterKelas}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Semua Kelas" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">Semua Kelas</SelectItem>
              {rombels.map((r) => (
                <SelectItem key={r.id} value={r.id}>
                  {r.namaRombel}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Hari</TableHead>
                <TableHead>Jam</TableHead>
                <TableHead>Mapel</TableHead>
                <TableHead>Guru</TableHead>
                <TableHead>Kelas</TableHead>
                <TableHead className="text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredData.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-muted-foreground h-24 text-center">
                    {data.length === 0 ? "Belum ada jadwal" : "Tidak ada jadwal yang sesuai filter"}
                  </TableCell>
                </TableRow>
              ) : (
                filteredData.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell>{item.hari}</TableCell>
                    <TableCell>
                      {item.jamMulai} - {item.jamSelesai}
                    </TableCell>
                    <TableCell>{item.mapel.namaMapel}</TableCell>
                    <TableCell>{item.guru.nama}</TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        {item.rombels.map((r) => (
                          <Badge key={r.id} variant="outline">
                            {r.namaRombel}
                          </Badge>
                        ))}
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        {/* Input Penilaian Button */}
                        {item.rombels.length === 1 ? (
                          <Button
                            variant="default"
                            size="sm"
                            className="bg-green-600 hover:bg-green-700"
                            onClick={() =>
                              router.push(
                                `/dashboard/guru/penilaian?rombelId=${item.rombels[0].id}&mapelId=${item.mapelId || item.mapel.id}&guruId=${item.guruId || item.guru.id}&rombelName=${encodeURIComponent(item.rombels[0].namaRombel)}&mapelName=${encodeURIComponent(item.mapel.namaMapel)}`,
                              )
                            }
                          >
                            <FileText className="mr-1 h-4 w-4" /> Nilai
                          </Button>
                        ) : (
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="default" size="sm" className="bg-green-600 hover:bg-green-700">
                                <FileText className="mr-1 h-4 w-4" /> Nilai
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent>
                              {item.rombels.map((r) => (
                                <DropdownMenuItem
                                  key={r.id}
                                  onClick={() =>
                                    router.push(
                                      `/dashboard/guru/penilaian?rombelId=${r.id}&mapelId=${item.mapelId || item.mapel.id}&guruId=${item.guruId || item.guru.id}&rombelName=${encodeURIComponent(r.namaRombel)}&mapelName=${encodeURIComponent(item.mapel.namaMapel)}`,
                                    )
                                  }
                                >
                                  {r.namaRombel}
                                </DropdownMenuItem>
                              ))}
                            </DropdownMenuContent>
                          </DropdownMenu>
                        )}

                        <Button
                          variant="default"
                          size="sm"
                          className="h-8 bg-blue-600 hover:bg-blue-700"
                          onClick={() => setSelectedScheduleForAbsensi(item)}
                        >
                          <ClipboardCheck className="mr-1 h-4 w-4" /> Absen
                        </Button>
                        <Button variant="ghost" size="icon" onClick={() => handleEdit(item)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="text-destructive"
                          onClick={() => handleDelete(item.id)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {selectedScheduleForAbsensi && (
        <AbsensiDialog
          isOpen={!!selectedScheduleForAbsensi}
          onOpenChange={(open) => !open && setSelectedScheduleForAbsensi(null)}
          jadwalId={selectedScheduleForAbsensi.id}
          jadwalInfo={`${selectedScheduleForAbsensi.mapel.namaMapel} - ${selectedScheduleForAbsensi.rombels.map((r) => r.namaRombel).join(", ")}`}
        />
      )}
    </div>
  );
}