"use client";

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

// Dummy data untuk demo
const dummyGuru = [
  { id: "1", nama: "Budi Santoso", nip: "198501012010011001" },
  { id: "2", nama: "Siti Rahayu", nip: "198602022011012002" },
];

const dummyMapel = [
  { id: "1", kodeMapel: "MTK", namaMapel: "Matematika" },
  { id: "2", kodeMapel: "BIN", namaMapel: "Bahasa Indonesia" },
  { id: "3", kodeMapel: "BIG", namaMapel: "Bahasa Inggris" },
];

const dummyRombel = [
  { id: "1", namaRombel: "X RPL 1", tingkat: "X", tahunPelajaran: "2024/2025" },
  { id: "2", namaRombel: "X RPL 2", tingkat: "X", tahunPelajaran: "2024/2025" },
  { id: "3", namaRombel: "XI RPL 1", tingkat: "XI", tahunPelajaran: "2024/2025" },
  { id: "4", namaRombel: "XI RPL 2", tingkat: "XI", tahunPelajaran: "2024/2025" },
  { id: "5", namaRombel: "XII RPL 1", tingkat: "XII", tahunPelajaran: "2024/2025" },
];

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 };
}

// Dummy CP Fase data
const dummyCPFase: CPFase[] = [
  {
    id: "1",
    tahunPelajaran: "2024/2025",
    semester: "GANJIL",
    capaianPembelajaran: "Peserta didik mampu memahami konsep bilangan dan operasinya...",
    guru: { id: "1", nama: "Budi Santoso" },
    mapel: { id: "1", namaMapel: "Matematika" },
    rombel: { id: "1", namaRombel: "X RPL 1", tingkat: "X" },
    _count: { cpElements: 3 },
  },
];

export function CPFaseClient() {
  const [data, setData] = useState<CPFase[]>(dummyCPFase);
  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: "",
    rombelId: "",
    guruId: "",
    mapelId: "",
    capaianPembelajaran: "",
  });
  const [duplicateFormData, setDuplicateFormData] = useState({
    targetRombelId: "",
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // TODO: Implement API call
    console.log("Form submitted:", formData);
    setIsDialogOpen(false);
    resetForm();
  };

  const handleDuplicate = (e: React.FormEvent) => {
    e.preventDefault();
    if (!duplicatingItem) return;

    // TODO: Implement API call untuk duplicate
    // Ini akan duplicate CP Fase beserta semua child-nya (CPElement -> TP -> ATP)
    // ke rombel yang dipilih
    console.log("Duplicating CP Fase:", duplicatingItem.id, "to Rombel:", duplicateFormData.targetRombelId);

    // Simulasi: tambah data baru
    const targetRombel = dummyRombel.find((r) => r.id === duplicateFormData.targetRombelId);
    if (targetRombel) {
      const newCPFase: CPFase = {
        ...duplicatingItem,
        id: `new-${Date.now()}`,
        rombel: { id: targetRombel.id, namaRombel: targetRombel.namaRombel, tingkat: targetRombel.tingkat },
        _count: { cpElements: duplicatingItem._count?.cpElements || 0 },
      };
      setData([...data, newCPFase]);
    }

    setIsDuplicateDialogOpen(false);
    setDuplicatingItem(null);
    setDuplicateFormData({ targetRombelId: "" });
  };

  const resetForm = () => {
    setFormData({
      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 = (id: string) => {
    // TODO: Implement API call
    setData(data.filter((item) => item.id !== id));
  };

  const openDuplicateDialog = (item: CPFase) => {
    setDuplicatingItem(item);
    setDuplicateFormData({ targetRombelId: "" });
    setIsDuplicateDialogOpen(true);
  };

  // Filter rombel yang belum memiliki CP Fase untuk mapel dan guru yang sama
  const getAvailableRombelForDuplicate = () => {
    if (!duplicatingItem) return dummyRombel;

    // Rombel yang sudah digunakan oleh CP Fase dengan guru dan mapel yang sama
    const usedRombelIds = data
      .filter(
        (cp) =>
          cp.guru.id === duplicatingItem.guru.id &&
          cp.mapel.id === duplicatingItem.mapel.id &&
          cp.tahunPelajaran === duplicatingItem.tahunPelajaran &&
          cp.semester === duplicatingItem.semester,
      )
      .map((cp) => cp.rombel.id);

    return dummyRombel.filter((r) => !usedRombelIds.includes(r.id));
  };

  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 Fase</h1>
          <p className="text-muted-foreground">Kelola Capaian Pembelajaran per Rombel/Kelas</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) => 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>
                          {dummyRombel.map((rombel) => (
                            <SelectItem key={rombel.id} value={rombel.id}>
                              {rombel.namaRombel}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <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>
                          {dummyGuru.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>
                        {dummyMapel.map((mapel) => (
                          <SelectItem key={mapel.id} value={mapel.id}>
                            {mapel.namaMapel}
                          </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">{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>
              {data.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-muted-foreground text-center">
                    Belum ada data CP Fase
                  </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 ke rombel yang dipilih.
            </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">Data yang akan diduplikasi:</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">Guru:</span> {duplicatingItem.guru.nama}
                    </div>
                    <div>
                      <span className="text-muted-foreground">Dari Rombel:</span> {duplicatingItem.rombel.namaRombel}
                    </div>
                    <div>
                      <span className="text-muted-foreground">Elements:</span> {duplicatingItem._count?.cpElements || 0}
                    </div>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="targetRombel">Rombel Tujuan</Label>
                  <Select
                    value={duplicateFormData.targetRombelId}
                    onValueChange={(value) => setDuplicateFormData({ targetRombelId: 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>
                  {getAvailableRombelForDuplicate().length === 0 && (
                    <p className="text-muted-foreground text-sm">
                      Semua rombel sudah memiliki CP Fase untuk kombinasi guru, mapel, dan semester ini.
                    </p>
                  )}
                </div>
              </div>
              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setIsDuplicateDialogOpen(false)}>
                  Batal
                </Button>
                <Button type="submit" disabled={!duplicateFormData.targetRombelId}>
                  <Copy className="mr-2 h-4 w-4" />
                  Duplicate
                </Button>
              </DialogFooter>
            </form>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}