"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 { 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, ArrowLeft, Loader2 } from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { useParams } from "next/navigation";
import { toast } from "sonner";

interface CPElement {
  id: string;
  elemen: string;
  capaianPembelajaran: string;
  _count?: { tujuanPembelajaran: number };
}

export function CPElementClient() {
  const params = useParams();
  const cpFaseId = params.cpFaseId as string;

  const [data, setData] = useState<CPElement[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingItem, setEditingItem] = useState<CPElement | null>(null);
  const [formData, setFormData] = useState({
    elemen: "",
    capaianPembelajaran: "",
  });

  const fetchData = async () => {
    try {
      setIsLoading(true);
      const response = await fetch(`/api/administrasi-guru/cp-element?cpFaseId=${cpFaseId}`);
      const result = await response.json();

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

  useEffect(() => {
    if (cpFaseId) {
      fetchData();
    }
  }, [cpFaseId]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      setIsSaving(true);

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

      const method = editingItem ? "PUT" : "POST";
      const payload = {
        ...formData,
        cpFaseId: cpFaseId, // Required for POST
      };

      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);
        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 resetForm = () => {
    setFormData({ elemen: "", capaianPembelajaran: "" });
    setEditingItem(null);
  };

  const handleEdit = (item: CPElement) => {
    setEditingItem(item);
    setFormData({
      elemen: item.elemen,
      capaianPembelajaran: item.capaianPembelajaran,
    });
    setIsDialogOpen(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Hapus element ini? Semua Tujuan Pembelajaran terkait akan ikut terhapus.")) return;

    try {
      const response = await fetch(`/api/administrasi-guru/cp-element/${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");
    }
  };

  return (
    <div className="flex flex-col gap-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/dashboard/administrasi-guru">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold tracking-tight">CP Element</h1>
          <p className="text-muted-foreground">Kelola Elemen dan Capaian Pembelajaran per Element</p>
        </div>
      </div>

      {/* Main Content */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Daftar CP Element</CardTitle>
            <CardDescription>Element-element dari CP Fase yang dipilih</CardDescription>
          </div>
          <Dialog
            open={isDialogOpen}
            onOpenChange={(open) => {
              setIsDialogOpen(open);
              if (!open) resetForm();
            }}
          >
            <DialogTrigger asChild>
              <Button>
                <Plus className="mr-2 h-4 w-4" />
                Tambah Element
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl">
              <DialogHeader>
                <DialogTitle>{editingItem ? "Edit CP Element" : "Tambah CP Element"}</DialogTitle>
                <DialogDescription>Input data Element Capaian Pembelajaran</DialogDescription>
              </DialogHeader>
              <form onSubmit={handleSubmit}>
                <div className="grid gap-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="elemen">Nama Elemen</Label>
                    <Input
                      id="elemen"
                      placeholder="Contoh: Bilangan, Aljabar, Geometri"
                      value={formData.elemen}
                      onChange={(e) => setFormData({ ...formData, elemen: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="capaianPembelajaran">Capaian Pembelajaran</Label>
                    <Textarea
                      id="capaianPembelajaran"
                      placeholder="Masukkan deskripsi capaian pembelajaran untuk elemen ini..."
                      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>Elemen</TableHead>
                <TableHead>Capaian Pembelajaran</TableHead>
                <TableHead>Tujuan Pembelajaran</TableHead>
                <TableHead className="text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} 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={4} className="text-muted-foreground h-24 text-center">
                    Belum ada data CP Element. Silakan tambah data baru.
                  </TableCell>
                </TableRow>
              ) : (
                data.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium">{item.elemen}</TableCell>
                    <TableCell className="max-w-md truncate">{item.capaianPembelajaran}</TableCell>
                    <TableCell>
                      <Badge variant="outline">{item._count?.tujuanPembelajaran || 0} TP</Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <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/${cpFaseId}/elements/${item.id}/tp`}>
                            <ChevronRight className="h-4 w-4" />
                          </Link>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}