"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { Plus, Search, Users, BookOpen, GraduationCap, ChevronRight, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Modal } from "@/components/ui/modal";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";

interface ClassesClientProps {
  initialClasses: any[];
  teachers: any[];
  academicYears: any[];
}

export default function ClassesClient({
  initialClasses,
  teachers,
  academicYears,
}: ClassesClientProps) {
  const router = useRouter();
  const [classes, setClasses] = React.useState(initialClasses);
  const [search, setSearch] = React.useState("");
  const [gradeFilter, setGradeFilter] = React.useState("ALL");

  // Modal Create Class
  const [createModalOpen, setCreateModalOpen] = React.useState(false);
  const [name, setName] = React.useState("");
  const [gradeLevel, setGradeLevel] = React.useState("10");
  const [academicYearId, setAcademicYearId] = React.useState(academicYears[0]?.id || "");
  const [semesterId, setSemesterId] = React.useState(academicYears[0]?.semesters[0]?.id || "");
  const [homeroomTeacherId, setHomeroomTeacherId] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");

  // Modal View Students
  const [selectedClass, setSelectedClass] = React.useState<any | null>(null);

  const filteredClasses = classes.filter((c) => {
    const matchSearch =
      c.name.toLowerCase().includes(search.toLowerCase()) ||
      (c.homeroomTeacher?.fullName || "").toLowerCase().includes(search.toLowerCase());
    const matchGrade = gradeFilter === "ALL" || c.gradeLevel === gradeFilter;
    return matchSearch && matchGrade;
  });

  const handleCreateClass = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setErrorMsg("");

    try {
      const res = await fetch("/api/academic/classes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name,
          gradeLevel,
          academicYearId,
          semesterId,
          homeroomTeacherId: homeroomTeacherId || null,
        }),
      });

      const data = await res.json();
      if (!res.ok || !data.success) {
        setErrorMsg(data.error || "Gagal membuat kelas.");
        setIsLoading(false);
        return;
      }

      setCreateModalOpen(false);
      setName("");
      router.refresh();
      window.location.reload();
    } catch (err) {
      setErrorMsg("Terjadi kesalahan jaringan.");
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* Top Filter & Add Action */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
          <div className="relative flex-1 sm:w-64">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
            <input
              type="text"
              placeholder="Cari kelas atau wali kelas..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs bg-white text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div className="flex gap-1 bg-white p-1 rounded-xl border border-slate-200 text-xs font-semibold">
            {["ALL", "10", "11", "12"].map((g) => (
              <button
                key={g}
                onClick={() => setGradeFilter(g)}
                className={`px-3 py-1.5 rounded-lg transition-all ${
                  gradeFilter === g
                    ? "bg-blue-600 text-white shadow-sm"
                    : "text-slate-600 hover:bg-slate-100"
                }`}
              >
                {g === "ALL" ? "Semua Tingkat" : `Kelas ${g}`}
              </button>
            ))}
          </div>
        </div>

        <Button
          size="sm"
          onClick={() => setCreateModalOpen(true)}
          className="w-full sm:w-auto font-bold"
        >
          <Plus className="mr-1.5 h-4 w-4" />
          Tambah Rombel Kelas
        </Button>
      </div>

      {/* Grid of Classes */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {filteredClasses.map((c) => (
          <Card
            key={c.id}
            className="hover:border-blue-400 hover:shadow-md transition-all group"
          >
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <Badge variant="primary">
                  Tingkat {c.gradeLevel} (Fase {c.gradeLevel === "10" ? "E" : "F"})
                </Badge>
                <span className="text-xs text-slate-400 font-mono">
                  {c.academicYear?.name}
                </span>
              </div>
              <CardTitle className="text-xl mt-2 group-hover:text-blue-600 transition-colors">
                Kelas {c.name}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 pt-2">
              {/* Homeroom teacher */}
              <div className="flex items-start gap-2.5 p-2.5 rounded-xl bg-slate-50 border border-slate-100 text-xs">
                <GraduationCap className="h-4 w-4 text-blue-600 shrink-0 mt-0.5" />
                <div className="truncate">
                  <p className="font-semibold text-slate-800 truncate">
                    {c.homeroomTeacher?.fullName || "Belum ditentukan"}
                  </p>
                  <p className="text-[10px] text-slate-400">
                    Wali Kelas {c.homeroomTeacher?.nip ? `(NIP: ${c.homeroomTeacher.nip})` : ""}
                  </p>
                </div>
              </div>

              {/* Stats badges */}
              <div className="grid grid-cols-2 gap-2 text-xs">
                <div className="p-2 rounded-lg bg-slate-50 border border-slate-100 text-center">
                  <span className="text-[10px] text-slate-400 block">Peserta Didik</span>
                  <span className="font-bold text-slate-800 text-sm">
                    {c.members?.length || 0} Siswa
                  </span>
                </div>
                <div className="p-2 rounded-lg bg-slate-50 border border-slate-100 text-center">
                  <span className="text-[10px] text-slate-400 block">Mata Pelajaran</span>
                  <span className="font-bold text-slate-800 text-sm">
                    {c.teacherSubjects?.length || 0} Mapel
                  </span>
                </div>
              </div>

              {/* Action Button */}
              <div className="pt-2 border-t border-slate-100 flex items-center justify-between">
                <button
                  type="button"
                  onClick={() => setSelectedClass(c)}
                  className="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1"
                >
                  <Users className="h-3.5 w-3.5" />
                  Lihat Daftar Siswa ({c.members?.length || 0})
                </button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Modal Tambah Kelas */}
      <Modal
        isOpen={createModalOpen}
        onClose={() => setCreateModalOpen(false)}
        title="Tambah Rombongan Belajar (Rombel)"
        description="Masukkan nama dan tetapkan wali kelas untuk rombel baru."
      >
        <form onSubmit={handleCreateClass} className="space-y-4">
          {errorMsg && (
            <div className="p-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 text-xs">
              {errorMsg}
            </div>
          )}

          <Input
            label="Nama Kelas / Rombel"
            placeholder="Contoh: X.3 atau XI IPA 2"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
          />

          <Select
            label="Tingkat Kelas"
            value={gradeLevel}
            onChange={(e) => setGradeLevel(e.target.value)}
          >
            <option value="10">Kelas 10 (Fase E - Kurikulum Merdeka)</option>
            <option value="11">Kelas 11 (Fase F - Kurikulum Merdeka)</option>
            <option value="12">Kelas 12 (Fase F)</option>
          </Select>

          <Select
            label="Tahun Ajaran"
            value={academicYearId}
            onChange={(e) => {
              setAcademicYearId(e.target.value);
              const found = academicYears.find((y) => y.id === e.target.value);
              if (found && found.semesters.length > 0) {
                setSemesterId(found.semesters[0].id);
              }
            }}
          >
            {academicYears.map((y) => (
              <option key={y.id} value={y.id}>
                {y.name} {y.isActive ? "(Aktif)" : ""}
              </option>
            ))}
          </Select>

          <Select
            label="Wali Kelas"
            value={homeroomTeacherId}
            onChange={(e) => setHomeroomTeacherId(e.target.value)}
          >
            <option value="">-- Pilih Wali Kelas (Opsional) --</option>
            {teachers.map((t) => (
              <option key={t.id} value={t.id}>
                {t.fullName} {t.nip ? `(${t.nip})` : ""}
              </option>
            ))}
          </Select>

          <div className="flex justify-end gap-2.5 pt-4 border-t border-slate-100">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => setCreateModalOpen(false)}
            >
              Batal
            </Button>
            <Button type="submit" size="sm" isLoading={isLoading}>
              Simpan Rombel
            </Button>
          </div>
        </form>
      </Modal>

      {/* Modal Daftar Siswa Rombel */}
      {selectedClass && (
        <Modal
          isOpen={!!selectedClass}
          onClose={() => setSelectedClass(null)}
          title={`Daftar Siswa Kelas ${selectedClass.name}`}
          description={`Total: ${selectedClass.members?.length || 0} siswa terdaftar di rombel ini`}
          maxWidth="2xl"
        >
          <div className="space-y-4">
            <div className="max-h-96 overflow-y-auto border border-slate-200 rounded-xl">
              <table className="w-full text-xs text-left">
                <thead className="bg-slate-50 text-slate-600 font-bold border-b border-slate-200 sticky top-0">
                  <tr>
                    <th className="py-2.5 px-3">No</th>
                    <th className="py-2.5 px-3">NIS</th>
                    <th className="py-2.5 px-3">NISN</th>
                    <th className="py-2.5 px-3">Nama Lengkap</th>
                    <th className="py-2.5 px-3">Jenis Kelamin</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {selectedClass.members?.map((m: any, idx: number) => (
                    <tr key={m.id} className="hover:bg-slate-50">
                      <td className="py-2.5 px-3 text-slate-400 font-mono">{idx + 1}</td>
                      <td className="py-2.5 px-3 font-mono font-semibold text-slate-700">
                        {m.student.nis}
                      </td>
                      <td className="py-2.5 px-3 font-mono text-slate-500">
                        {m.student.nisn || "-"}
                      </td>
                      <td className="py-2.5 px-3 font-bold text-slate-900">
                        {m.student.fullName}
                      </td>
                      <td className="py-2.5 px-3 text-slate-600">
                        {m.student.gender === "MALE" ? "Laki-laki" : "Perempuan"}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="flex justify-end pt-2">
              <Button size="sm" onClick={() => setSelectedClass(null)}>
                Tutup
              </Button>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
}