"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Plus, Pencil, Trash2, ChevronRight, Copy, Loader2, AlertTriangle } from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { useSchool } from "@/hooks/use-school";
import { useAuth } from "@/contexts/auth-context";

interface Guru {
  id: string;
  nama: string;
  nip: string;
}

interface Mapel {
  id: string;
  kodeMapel: string;
  namaMapel: string;
}

interface Rombel {
  id: string;
  namaRombel: string;
  tingkat: string;
  tahunPelajaran: string;
}

interface CPFase {
  id: string;
  tahunPelajaran: string;
  semester: "GANJIL" | "GENAP";
  capaianPembelajaran: string;
  guru: { id: string; nama: string };
  mapel: { id: string; namaMapel: string };
  rombel: { id: string; namaRombel: string; tingkat: string };
  _count?: { cpElements: number };
}

export function AdministrasiGuruClient() {
  const { school } = useSchool();
  const { user } = useAuth(); // To check role if needed or pass guruId
  const [data, setData] = useState<CPFase[]>([]);
  const [gurus, setGurus] = useState<Guru[]>([]);
  const [mapels, setMapels] = useState<Mapel[]>([]);
  const [rombels, setRombels] = useState<Rombel[]>([]);

  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = useState(false);
  const [editingItem, setEditingItem] = useState<CPFase | null>(null);
  const [duplicatingItem, setDuplicatingItem] = useState<CPFase | null>(null);

  const [formData, setFormData] = useState({
    tahunPelajaran: "",
    semester: "" as "GANJIL" | "GENAP" | "",
    rombelId: "",
    guruId: "",
    mapelId: "",
    capaianPembelajaran: "",
  });

  const [duplicateFormData, setDuplicateFormData] = useState({
    targetRombelIds: [] as string[],
    tahunPelajaran: "",
    semester: "" as "GANJIL" | "GENAP" | "",
  });

  // Fetch all required data
  const fetchData = async () => {
    try {
      setIsLoading(true);
      const params = new URLSearchParams();
      // Default filter by current school year if available
      if (school?.tahunPelajaran) {
        params.append("tahunPelajaran", school.tahunPelajaran);
      }
      // If user is GURU, the API automatically filters by their ID.
      // If ADMIN, they can see all.

      const response = await fetch(`/api/administrasi-guru/cp-fase?${params.toString()}`);
      const result = await response.json();

      if (result.success) {
        setData(result.data);
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      console.error("Error fetching CP Fase:", error);
      toast.error("Gagal mengambil data");
    } finally {
      setIsLoading(false);
    }
  };

  const fetchMasterData = async () => {
    try {
      // Parallel fetch for master data
      const [guruRes, mapelRes, rombelRes] = await Promise.all([
        fetch("/api/guru"),
        fetch("/api/mapel"),
        fetch("/api/rombel"),
      ]);

      const guruData = await guruRes.json();
      const mapelData = await mapelRes.json();
      const rombelData = await rombelRes.json();

      if (guruData.success) setGurus(guruData.data);
      if (mapelData.success) setMapels(mapelData.data);
      if (rombelData.success) setRombels(rombelData.data);
    } catch (error) {
      console.error("Error fetching master data:", error);
    }
  };

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

  // Set default tahun pelajaran from school context when form opens
  useEffect(() => {
    if (isDialogOpen && !editingItem && school?.tahunPelajaran) {
      setFormData((prev) => ({ ...prev, tahunPelajaran: school.tahunPelajaran }));
    }
  }, [isDialogOpen, editingItem, school]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.semester) {
      toast.error("Pilih semester");
      return;
    }

    try {
      setIsSaving(true);

      const url = editingItem ? `/api/administrasi-guru/cp-fase/${editingItem.id}` : "/api/administrasi-guru/cp-fase";

      const method = editingItem ? "PUT" : "POST";

      // Admin might need to set guruId manually if not provided (though form has field).
      // If user is GURU, backend handles it, but sending it doesn't hurt if valid.

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

      const result = await response.json();

      if (result.success) {
        toast.success(result.message);
        setIsDialogOpen(false);
        resetForm();
        fetchData();
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      console.error("Error saving data:", error);
      toast.error("Terjadi kesalahan saat menyimpan");
    } finally {
      setIsSaving(false);
    }
  };

  const handleDuplicate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!duplicatingItem) return;
    if (duplicateFormData.targetRombelIds.length === 0) {
      toast.error("Pilih minimal satu rombel tujuan");
      return;
    }

    try {
      setIsSaving(true);

      const url = `/api/administrasi-guru/cp-fase/${duplicatingItem.id}`;
      // POST to [id] endpoint triggers duplicate logic as defined in route.ts

      const response = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          targetRombelIds: duplicateFormData.targetRombelIds,
          tahunPelajaran: duplicateFormData.tahunPelajaran || duplicatingItem.tahunPelajaran,
          semester: duplicateFormData.semester || duplicatingItem.semester,
        }),
      });

      const result = await response.json();

      if (result.success) {
        toast.success(result.message);
        setIsDuplicateDialogOpen(false);
        setDuplicatingItem(null);
        setDuplicateFormData({ targetRombelIds: [], tahunPelajaran: "", semester: "" });
        fetchData();
      } else {
        // Show partial success or error
        if (result.data?.errors?.length > 0) {
          toast.warning(`Berhasil: ${result.data.created}, Error: ${result.data.errors.length}. Cek console.`);
          console.warn("Duplicate errors:", result.data.errors);
        } else {
          toast.error(result.message);
        }
      }
    } catch (error) {
      console.error("Error duplicating:", error);
      toast.error("Terjadi kesalahan saat duplikasi");
    } finally {
      setIsSaving(false);
    }
  };

  const resetForm = () => {
    setFormData({
      tahunPelajaran: school?.tahunPelajaran || "",
      semester: "",
      rombelId: "",
      guruId: "",
      mapelId: "",
      capaianPembelajaran: "",
    });
    setEditingItem(null);
  };

  const handleEdit = (item: CPFase) => {
    setEditingItem(item);
    setFormData({
      tahunPelajaran: item.tahunPelajaran,
      semester: item.semester,
      rombelId: item.rombel.id,
      guruId: item.guru.id,
      mapelId: item.mapel.id,
      capaianPembelajaran: item.capaianPembelajaran,
    });
    setIsDialogOpen(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Apakah Anda yakin ingin menghapus data ini? Semua elemen, TP, dan ATP terkait akan ikut terhapus."))
      return;

    try {
      const response = await fetch(`/api/administrasi-guru/cp-fase/${id}`, {
        method: "DELETE",
      });
      const result = await response.json();

      if (result.success) {
        toast.success(result.message);
        fetchData();
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      console.error("Error deleting:", error);
      toast.error("Gagal menghapus data");
    }
  };

  const openDuplicateDialog = (item: CPFase) => {
    setDuplicatingItem(item);
    setDuplicateFormData({
      targetRombelIds: [],
      tahunPelajaran: item.tahunPelajaran,
      semester: item.semester,
    });
    setIsDuplicateDialogOpen(true);
  };

  // Filter rombel for duplication: Exclude current rombel
  const getAvailableRombelForDuplicate = () => {
    if (!duplicatingItem) return rombels;
    // We mainly want to exclude the source rombel.
    // The backend handles the check if the target rombel already has data (returns error/skip).
    return rombels.filter((r) => r.id !== duplicatingItem.rombel.id);
  };

  return (
    <div className="flex flex-col gap-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Administrasi Guru</h1>
          <p className="text-muted-foreground">Kelola Capaian Pembelajaran, Tujuan Pembelajaran, dan Alur TP</p>
        </div>
      </div>

      {/* Main Content */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Daftar CP Fase</CardTitle>
            <CardDescription>Data Capaian Pembelajaran per Semester dan Rombel</CardDescription>
          </div>
          <Dialog
            open={isDialogOpen}
            onOpenChange={(open) => {
              setIsDialogOpen(open);
              if (!open) resetForm();
            }}
          >
            <DialogTrigger asChild>
              <Button>
                <Plus className="mr-2 h-4 w-4" />
                Tambah CP Fase
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl">
              <DialogHeader>
                <DialogTitle>{editingItem ? "Edit CP Fase" : "Tambah CP Fase"}</DialogTitle>
                <DialogDescription>Input data Capaian Pembelajaran Fase</DialogDescription>
              </DialogHeader>
              <form onSubmit={handleSubmit}>
                <div className="grid gap-4 py-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="tahunPelajaran">Tahun Pelajaran</Label>
                      <Input
                        id="tahunPelajaran"
                        placeholder="2024/2025"
                        value={formData.tahunPelajaran}
                        onChange={(e) => setFormData({ ...formData, tahunPelajaran: e.target.value })}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="semester">Semester</Label>
                      <Select
                        value={formData.semester}
                        onValueChange={(value: "GANJIL" | "GENAP") => setFormData({ ...formData, semester: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Pilih semester" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="GANJIL">Ganjil</SelectItem>
                          <SelectItem value="GENAP">Genap</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="rombel">Rombel / Kelas</Label>
                      <Select
                        value={formData.rombelId}
                        onValueChange={(value) => setFormData({ ...formData, rombelId: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Pilih rombel" />
                        </SelectTrigger>
                        <SelectContent>
                          {rombels.map((rombel) => (
                            <SelectItem key={rombel.id} value={rombel.id}>
                              {rombel.namaRombel}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    {user?.role === "ADMIN" && (
                      <div className="space-y-2">
                        <Label htmlFor="guru">Guru</Label>
                        <Select
                          value={formData.guruId}
                          onValueChange={(value) => setFormData({ ...formData, guruId: value })}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Pilih guru" />
                          </SelectTrigger>
                          <SelectContent>
                            {gurus.map((guru) => (
                              <SelectItem key={guru.id} value={guru.id}>
                                {guru.nama}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    )}
                  </div>

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

                  <div className="space-y-2">
                    <Label htmlFor="capaianPembelajaran">Capaian Pembelajaran</Label>
                    <Textarea
                      id="capaianPembelajaran"
                      placeholder="Masukkan deskripsi capaian pembelajaran..."
                      rows={5}
                      value={formData.capaianPembelajaran}
                      onChange={(e) => setFormData({ ...formData, capaianPembelajaran: e.target.value })}
                      required
                    />
                  </div>
                </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" />}
                    {editingItem ? "Update" : "Simpan"}
                  </Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Tahun Pelajaran</TableHead>
                <TableHead>Semester</TableHead>
                <TableHead>Rombel</TableHead>
                <TableHead>Guru</TableHead>
                <TableHead>Mapel</TableHead>
                <TableHead>CP Elements</TableHead>
                <TableHead className="text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={7} className="h-24 text-center">
                    <div className="flex items-center justify-center gap-2">
                      <Loader2 className="h-4 w-4 animate-spin" />
                      Loading data...
                    </div>
                  </TableCell>
                </TableRow>
              ) : data.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-muted-foreground h-24 text-center">
                    Belum ada data CP Fase. Silakan tambah data baru.
                  </TableCell>
                </TableRow>
              ) : (
                data.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell>{item.tahunPelajaran}</TableCell>
                    <TableCell>
                      <Badge variant={item.semester === "GANJIL" ? "default" : "secondary"}>{item.semester}</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-col">
                        <span className="font-medium">{item.rombel.namaRombel}</span>
                        <span className="text-muted-foreground text-xs">Tingkat {item.rombel.tingkat}</span>
                      </div>
                    </TableCell>
                    <TableCell>{item.guru.nama}</TableCell>
                    <TableCell>{item.mapel.namaMapel}</TableCell>
                    <TableCell>
                      <Badge variant="outline">{item._count?.cpElements || 0} Element</Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-1">
                        <Button
                          variant="ghost"
                          size="icon"
                          title="Duplicate ke Rombel Lain"
                          onClick={() => openDuplicateDialog(item)}
                        >
                          <Copy className="h-4 w-4" />
                        </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>
                        <Button variant="ghost" size="icon" asChild>
                          <Link href={`/dashboard/administrasi-guru/cp-fase/${item.id}/elements`}>
                            <ChevronRight className="h-4 w-4" />
                          </Link>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* Duplicate Dialog */}
      <Dialog open={isDuplicateDialogOpen} onOpenChange={setIsDuplicateDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Duplicate CP Fase ke Rombel Lain</DialogTitle>
            <DialogDescription>
              Duplikasi seluruh data CP Fase beserta CP Element, Tujuan Pembelajaran, dan ATP.
            </DialogDescription>
          </DialogHeader>
          {duplicatingItem && (
            <form onSubmit={handleDuplicate}>
              <div className="grid gap-4 py-4">
                {/* Info CP Fase yang akan diduplikasi */}
                <div className="bg-muted/50 rounded-lg border p-4">
                  <p className="mb-2 text-sm font-medium">Sumber Data:</p>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div>
                      <span className="text-muted-foreground">Mapel:</span> {duplicatingItem.mapel.namaMapel}
                    </div>
                    <div>
                      <span className="text-muted-foreground">Rombel:</span> {duplicatingItem.rombel.namaRombel}
                    </div>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="targetRombel">Rombel Tujuan (Bisa Pilih Banyak)</Label>
                  <Select
                    onValueChange={(value) => {
                      // Simple single select wrapped in array for now, or implement MultiSelect if available
                      // For this implementation, we'll allow selecting one at a time or simple select
                      // But schema supports array. Let's make it single select for simplicity unless UI has MultiSelect component
                      setDuplicateFormData((prev) => ({ ...prev, targetRombelIds: [value] }));
                    }}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Pilih rombel tujuan" />
                    </SelectTrigger>
                    <SelectContent>
                      {getAvailableRombelForDuplicate().map((rombel) => (
                        <SelectItem key={rombel.id} value={rombel.id}>
                          {rombel.namaRombel} (Tingkat {rombel.tingkat})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <p className="text-muted-foreground text-xs">
                    *Saat ini hanya mendukung duplicate ke 1 rombel per aksi.
                  </p>
                </div>
              </div>
              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setIsDuplicateDialogOpen(false)}>
                  Batal
                </Button>
                <Button type="submit" disabled={duplicateFormData.targetRombelIds.length === 0 || isSaving}>
                  {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  Duplicate
                </Button>
              </DialogFooter>
            </form>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}