"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { Plus, Search, BookOpen, GraduationCap, Layers, UserCheck } 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 { Textarea } from "@/components/ui/textarea";
import { Select } from "@/components/ui/select";

interface SubjectsClientProps {
  initialSubjects: any[];
  teachers: any[];
  classes: any[];
}

export default function SubjectsClient({
  initialSubjects,
  teachers,
  classes,
}: SubjectsClientProps) {
  const router = useRouter();
  const [subjects, setSubjects] = React.useState(initialSubjects);
  const [search, setSearch] = React.useState("");

  // Modal Tambah Mapel
  const [createModalOpen, setCreateModalOpen] = React.useState(false);
  const [code, setCode] = React.useState("");
  const [name, setName] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");

  // Modal Assign Guru
  const [assignModalOpen, setAssignModalOpen] = React.useState(false);
  const [selectedSubject, setSelectedSubject] = React.useState<any | null>(null);
  const [assignTeacherId, setAssignTeacherId] = React.useState(teachers[0]?.id || "");
  const [assignClassId, setAssignClassId] = React.useState(classes[0]?.id || "");
  const [assignLoading, setAssignLoading] = React.useState(false);
  const [assignError, setAssignError] = React.useState("");

  const filteredSubjects = subjects.filter(
    (s) =>
      s.name.toLowerCase().includes(search.toLowerCase()) ||
      s.code.toLowerCase().includes(search.toLowerCase())
  );

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

    try {
      const res = await fetch("/api/academic/subjects", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code, name, description }),
      });
      const data = await res.json();
      if (!res.ok || !data.success) {
        setErrorMsg(data.error || "Gagal membuat mata pelajaran.");
        setIsLoading(false);
        return;
      }
      setCreateModalOpen(false);
      setCode("");
      setName("");
      setDescription("");
      window.location.reload();
    } catch (err) {
      setErrorMsg("Terjadi gangguan koneksi.");
      setIsLoading(false);
    }
  };

  const handleAssignTeacher = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedSubject) return;
    setAssignLoading(true);
    setAssignError("");

    try {
      const res = await fetch("/api/academic/teacher-subjects", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          subjectId: selectedSubject.id,
          teacherId: assignTeacherId,
          classId: assignClassId,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data.success) {
        setAssignError(data.error || "Gagal menugaskan guru.");
        setAssignLoading(false);
        return;
      }
      setAssignModalOpen(false);
      window.location.reload();
    } catch (err) {
      setAssignError("Terjadi gangguan koneksi.");
      setAssignLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* Search & Actions */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="relative w-full sm:w-72">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
          <input
            type="text"
            placeholder="Cari mata pelajaran atau kode..."
            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>

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

      {/* Grid of Subjects */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {filteredSubjects.map((s) => (
          <Card key={s.id} className="hover:border-blue-400 transition-all flex flex-col justify-between">
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <Badge variant="primary">{s.code}</Badge>
                <span className="text-[11px] text-slate-400">
                  {s.teacherSubjects?.length || 0} Pengampu
                </span>
              </div>
              <CardTitle className="text-lg mt-2 text-slate-900">
                {s.name}
              </CardTitle>
              {s.description && (
                <p className="text-xs text-slate-500 line-clamp-2 mt-1">
                  {s.description}
                </p>
              )}
            </CardHeader>

            <CardContent className="space-y-3 pt-2">
              {/* List Assigned Teachers & Classes */}
              <div className="space-y-1.5 max-h-32 overflow-y-auto">
                {s.teacherSubjects && s.teacherSubjects.length > 0 ? (
                  s.teacherSubjects.map((ts: any) => (
                    <div
                      key={ts.id}
                      className="p-2 rounded-lg bg-slate-50 border border-slate-100 flex items-center justify-between text-xs"
                    >
                      <span className="font-semibold text-slate-800 truncate mr-2">
                        {ts.teacher.fullName}
                      </span>
                      <Badge variant="secondary" className="shrink-0 font-mono">
                        {ts.class.name}
                      </Badge>
                    </div>
                  ))
                ) : (
                  <p className="text-xs text-slate-400 italic py-2">
                    Belum ada guru pengampu yang ditugaskan.
                  </p>
                )}
              </div>

              {/* Action */}
              <div className="pt-2 border-t border-slate-100 flex justify-end">
                <Button
                  size="sm"
                  variant="outline"
                  className="text-xs"
                  onClick={() => {
                    setSelectedSubject(s);
                    setAssignModalOpen(true);
                  }}
                >
                  <UserCheck className="mr-1.5 h-3.5 w-3.5 text-blue-600" />
                  Tugaskan Guru
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Modal Tambah Mapel */}
      <Modal
        isOpen={createModalOpen}
        onClose={() => setCreateModalOpen(false)}
        title="Tambah Mata Pelajaran Baru"
        description="Tambahkan mata pelajaran ke dalam kurikulum SMAN 3 OKU."
      >
        <form onSubmit={handleCreateSubject} 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="Kode Mata Pelajaran"
            placeholder="Contoh: BIO-10 atau SEJ-11"
            value={code}
            onChange={(e) => setCode(e.target.value.toUpperCase())}
            required
          />

          <Input
            label="Nama Mata Pelajaran"
            placeholder="Contoh: Biologi atau Sejarah Indonesia"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
          />

          <Textarea
            label="Deskripsi Mata Pelajaran"
            placeholder="Keterangan cakupan materi / capaian pembelajaran"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />

          <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 Mapel
            </Button>
          </div>
        </form>
      </Modal>

      {/* Modal Assign Guru */}
      {selectedSubject && (
        <Modal
          isOpen={assignModalOpen}
          onClose={() => setAssignModalOpen(false)}
          title={`Tugaskan Guru Pengampu: ${selectedSubject.name}`}
          description="Pilih guru dan rombel kelas yang akan diajar."
        >
          <form onSubmit={handleAssignTeacher} className="space-y-4">
            {assignError && (
              <div className="p-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 text-xs">
                {assignError}
              </div>
            )}

            <Select
              label="Pilih Guru Pendidik"
              value={assignTeacherId}
              onChange={(e) => setAssignTeacherId(e.target.value)}
            >
              {teachers.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.fullName} {t.nip ? `(NIP: ${t.nip})` : ""}
                </option>
              ))}
            </Select>

            <Select
              label="Pilih Rombongan Belajar (Kelas)"
              value={assignClassId}
              onChange={(e) => setAssignClassId(e.target.value)}
            >
              {classes.map((c) => (
                <option key={c.id} value={c.id}>
                  Kelas {c.name} (Tingkat {c.gradeLevel})
                </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={() => setAssignModalOpen(false)}
              >
                Batal
              </Button>
              <Button type="submit" size="sm" isLoading={assignLoading}>
                Simpan Penugasan
              </Button>
            </div>
          </form>
        </Modal>
      )}
    </div>
  );
}