"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import {
  ClipboardList,
  Search,
  Plus,
  Edit2,
  Trash2,
  Printer,
  Download,
  Upload,
  Calendar,
  FileSpreadsheet,
  Users,
  CheckCircle2,
  AlertTriangle,
  RotateCcw,
  Sparkles,
  BookOpen,
  Filter,
  UserCheck,
  ChevronLeft,
  ChevronRight,
  Info,
  HeartHandshake,
  MessageSquareText,
  ShieldAlert,
  Lock,
} from "lucide-react";
import * as XLSX from "xlsx";
import { Modal } from "@/components/ui/Modal";
import { StatCard } from "@/components/ui/StatCard";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Select } from "@/components/ui/Select";
import { Badge } from "@/components/ui/Badge";
import { useAuth } from "@/context/AuthContext";
import { useSmartSchool, UnifiedStudent, HomeroomAssignment } from "@/context/SmartSchoolContext";
import { getCurrentAcademicYear, getAcademicYearOptions } from "@/lib/academicYear";
import { CatatanWaliKelasRecord } from "@/lib/db";
import { findTeacherForUser } from "@/lib/teacherUtils";
import { parseRoles } from "@/lib/rbac";
import { CatatanWaliKelasPrintModal } from "./CatatanWaliKelasPrintModal";

// Grade groups for 30 classes at SMA BPI 1 Bandung
const AVAILABLE_CLASSES = [
  "X-1", "X-2", "X-3", "X-4", "X-5", "X-6", "X-7", "X-8", "X-9", "X-10",
  "XI-1", "XI-2", "XI-3", "XI-4", "XI-5", "XI-6", "XI-7", "XI-8", "XI-9", "XI-10",
  "XII-1", "XII-2", "XII-3", "XII-4", "XII-5", "XII-6", "XII-7", "XII-8", "XII-9", "XII-10",
];

const CATEGORY_OPTIONS = [
  "Semua Kategori",
  "Pembinaan / Kasus Siswa",
  "Konseling / Pendekatan Personal",
  "Motivasi / Pengarahan Kelas",
];

const STATUS_OPTIONS = [
  "Semua Status",
  "Selesai",
  "Dalam Pemantauan",
  "Rujukan ke BK",
];

const SEMESTER_OPTIONS = ["Ganjil", "Genap"];

export const CatatanWaliKelasView: React.FC = () => {
  const { user } = useAuth();
  const { students, homerooms, teachers } = useSmartSchool();

  // Deteksi role & hak akses guru login
  const userRoles = useMemo(() => parseRoles(user?.role), [user?.role]);
  const hasWaliKelasRole = userRoles.includes("Wali Kelas");
  const isSuperAdminOrKurikulum =
    userRoles.includes("Super Admin") || userRoles.includes("Kurikulum");

  // Identifikasi profil Guru yang sedang login secara real-time
  const activeTeacher = useMemo(() => {
    return findTeacherForUser(user, teachers || []);
  }, [user, teachers]);

  // Resolusi penetapan kelas Wali Kelas secara Real-Time dari Database
  const assignedHomeroomClasses = useMemo(() => {
    const classSet = new Set<string>();

    // 1. Dari master guru login (homeroomClass)
    if (activeTeacher?.homeroomClass && typeof activeTeacher.homeroomClass === "string" && activeTeacher.homeroomClass.trim()) {
      classSet.add(activeTeacher.homeroomClass.trim());
    }

    // 2. Dari penetapan homerooms context (Plotting Guru & Pengampuan Rombel)
    if (Array.isArray(homerooms)) {
      homerooms.forEach((h) => {
        const hTeacherId = String(h.teacherId || "").trim();
        const tId = activeTeacher?.id ? String(activeTeacher.id).trim() : "";
        const uRef = user?.reference_id ? String(user.reference_id).trim() : "";
        const tNip = (activeTeacher?.nip || "").toLowerCase().trim();
        const uNip = (user?.id_induk || "").toLowerCase().trim();
        const hNip = (h.nip || "").toLowerCase().trim();
        const tName = (activeTeacher?.fullName || "").toLowerCase().trim();
        const uName = (user?.name || "").toLowerCase().trim();
        const hName = (h.teacherName || "").toLowerCase().trim();

        const isIdMatch = Boolean((tId && hTeacherId === tId) || (uRef && hTeacherId === uRef));
        const isNipMatch = Boolean(hNip && hNip !== "-" && ((tNip && hNip === tNip) || (uNip && hNip === uNip)));
        const isNameMatch = Boolean(
          hName &&
          hName !== "belum ditugaskan" &&
          ((tName && (hName === tName || hName.includes(tName) || tName.includes(hName))) ||
           (uName && (hName === uName || hName.includes(uName) || uName.includes(hName))))
        );

        if ((isIdMatch || isNipMatch || isNameMatch) && h.className) {
          classSet.add(h.className.trim());
        }
      });
    }

    // 3. Fallback pencocokan langsung ke teachers list jika activeTeacher belum match via findTeacherForUser
    if (classSet.size === 0 && Array.isArray(teachers) && user) {
      const uNip = (user.id_induk || "").toLowerCase().trim();
      const uName = (user.name || "").toLowerCase().trim();
      const foundT = teachers.find(
        (t) =>
          (uNip && t.nip && t.nip.toLowerCase().trim() === uNip) ||
          (uName && t.fullName && t.fullName.toLowerCase().trim() === uName)
      );
      if (foundT?.homeroomClass) {
        classSet.add(foundT.homeroomClass.trim());
      }
    }

    return Array.from(classSet);
  }, [activeTeacher, homerooms, teachers, user]);

  const isWaliKelasUser = hasWaliKelasRole || Boolean(activeTeacher?.homeroomClass) || assignedHomeroomClasses.length > 0;
  const isStrictWaliKelasLock = isWaliKelasUser && assignedHomeroomClasses.length > 0;

  // Filter Dropdown Kelas Rombel: HANYA kelas binaan wali kelas yang muncul
  const availableClassOptions = useMemo(() => {
    if (isStrictWaliKelasLock) {
      return assignedHomeroomClasses;
    }
    if (isSuperAdminOrKurikulum && assignedHomeroomClasses.length === 0) {
      return AVAILABLE_CLASSES;
    }
    if (assignedHomeroomClasses.length > 0) {
      return assignedHomeroomClasses;
    }
    return AVAILABLE_CLASSES;
  }, [isStrictWaliKelasLock, isSuperAdminOrKurikulum, assignedHomeroomClasses]);

  // Top Filters
  const academicYearOptions = useMemo(() => {
    const list = getAcademicYearOptions();
    if (!list.includes("2025/2026")) list.unshift("2025/2026");
    if (!list.includes("2027/2028")) list.push("2027/2028");
    return list;
  }, []);

  const [selectedAcademicYear, setSelectedAcademicYear] = useState<string>("2026/2027");
  const [selectedSemester, setSelectedSemester] = useState<"Ganjil" | "Genap">("Ganjil");
  const [selectedClass, setSelectedClass] = useState<string>(() => {
    return "X-1";
  });

  // Sinkronisasi Real-Time Penguncian Kelas: Pastikan selectedClass selalu berada pada kelas binaan
  useEffect(() => {
    if (availableClassOptions.length > 0 && !availableClassOptions.includes(selectedClass)) {
      setSelectedClass(availableClassOptions[0]);
    }
  }, [availableClassOptions, selectedClass]);

  // Secondary Filters & Search
  const [categoryFilter, setCategoryFilter] = useState<string>("Semua Kategori");
  const [statusFilter, setStatusFilter] = useState<string>("Semua Status");
  const [searchTerm, setSearchTerm] = useState<string>("");

  // Records & Loading
  const [records, setRecords] = useState<CatatanWaliKelasRecord[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const pageSize = 10;

  // Modals state
  const [isAddEditModalOpen, setIsAddEditModalOpen] = useState<boolean>(false);
  const [editingRecord, setEditingRecord] = useState<CatatanWaliKelasRecord | null>(null);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
  const [deletingRecord, setDeletingRecord] = useState<CatatanWaliKelasRecord | null>(null);
  const [isImportModalOpen, setIsImportModalOpen] = useState<boolean>(false);
  const [isPrintModalOpen, setIsPrintModalOpen] = useState<boolean>(false);

  // Form state
  const [formDate, setFormDate] = useState<string>(new Date().toISOString().split("T")[0]);
  const [formCategory, setFormCategory] = useState<CatatanWaliKelasRecord["category"]>(
    "Pembinaan / Kasus Siswa"
  );
  const [formTargetType, setFormTargetType] = useState<"Individu Siswa" | "Seluruh Kelas">(
    "Individu Siswa"
  );
  const [formStudentNis, setFormStudentNis] = useState<string>("");
  const [formStudentName, setFormStudentName] = useState<string>("");
  const [formNotes, setFormNotes] = useState<string>("");
  const [formFollowUp, setFormFollowUp] = useState<string>("");
  const [formStatus, setFormStatus] = useState<"Selesai" | "Dalam Pemantauan" | "Rujukan ke BK">(
    "Selesai"
  );
  const [formSubmitting, setFormSubmitting] = useState<boolean>(false);

  // Import state
  const [importFile, setImportFile] = useState<File | null>(null);
  const [importError, setImportError] = useState<string | null>(null);
  const [isImporting, setIsImporting] = useState<boolean>(false);

  // Notification Toast
  const [toastMessage, setToastMessage] = useState<string | null>(null);
  const [toastType, setToastType] = useState<"success" | "error">("success");

  const showToast = (msg: string, type: "success" | "error" = "success") => {
    setToastMessage(msg);
    setToastType(type);
    setTimeout(() => setToastMessage(null), 3500);
  };

  // 1. Dynamic Homeroom Teacher Resolution (with Real-Time Active Teacher Alignment)
  const currentHomeroom = useMemo(() => {
    // Jika guru yang login adalah wali kelas dari selectedClass ini, gunakan datanya secara langsung
    if (activeTeacher && (activeTeacher.homeroomClass === selectedClass || assignedHomeroomClasses.includes(selectedClass))) {
      return {
        className: selectedClass,
        teacherName: activeTeacher.fullName,
        nip: activeTeacher.nip || activeTeacher.nuptk || "NIPY. 10100",
      };
    }

    // Default from homerooms context (Plotting Guru & Pengampuan Kelas)
    const found = homerooms.find((h) => h.className === selectedClass);
    if (found && found.teacherName && found.teacherName !== "Belum Ditugaskan") {
      return {
        className: found.className,
        teacherName: found.teacherName,
        nip: found.nip || "NIPY. 10100",
      };
    }

    // Fallback from teachers table
    const teacherFound = teachers.find(
      (t) => t.isHomeroomTeacher && t.homeroomClass === selectedClass
    );
    if (teacherFound) {
      return {
        className: selectedClass,
        teacherName: teacherFound.fullName,
        nip: teacherFound.nip || teacherFound.nuptk || "NIPY. 10100",
      };
    }

    // Historical simulation for Ibu Reni Susanti
    if (selectedAcademicYear === "2027/2028" && selectedClass === "XII-4") {
      return {
        className: "XII-4",
        teacherName: "Reni Susanti, S.Pd.",
        nip: "NIPY. 10105",
      };
    }
    if (selectedAcademicYear === "2026/2027" && selectedClass === "XII-6") {
      return {
        className: "XII-6",
        teacherName: "Reni Susanti, S.Pd.",
        nip: "NIPY. 10105",
      };
    }
    if (selectedAcademicYear === "2025/2026" && selectedClass === "XI-6") {
      return {
        className: "XI-6",
        teacherName: "Reni Susanti, S.Pd.",
        nip: "NIPY. 10105",
      };
    }

    return {
      className: selectedClass,
      teacherName: activeTeacher?.fullName || "Wali Kelas",
      nip: activeTeacher?.nip || "NIPY. 10100",
    };
  }, [activeTeacher, assignedHomeroomClasses, homerooms, teachers, selectedClass, selectedAcademicYear]);

  // 2. Dynamic Students List for Active Class and Academic Year (STRICT REAL-TIME FILTERING)
  const classStudents = useMemo(() => {
    const targetClass = (selectedClass || "").trim().toUpperCase();
    return (students || [])
      .filter((s) => {
        // STRICT CLASS FILTERING: Hanya siswa yang rombel/kelasnya adalah selectedClass
        const studentRombel = (s.className || (s as any).rombel || "").trim().toUpperCase();
        const matchesClass =
          studentRombel === targetClass ||
          (s.academicHistory &&
            Array.isArray(s.academicHistory) &&
            s.academicHistory.some(
              (h) => (h.className || "").trim().toUpperCase() === targetClass && h.academicYear === selectedAcademicYear
            ));

        if (!matchesClass) return false;

        // Hanya siswa aktif di kelas binaan (abaikan mutasi, alumni/lulus, atau nonaktif)
        const stStatus = String(s.status || "").trim().toLowerCase();
        if (stStatus && (stStatus === "nonaktif" || stStatus === "non_aktif" || stStatus === "mutasi" || stStatus === "lulus")) {
          return false;
        }

        return true;
      })
      .sort((a, b) => a.fullName.localeCompare(b.fullName));
  }, [students, selectedClass, selectedAcademicYear]);

  // Fetch Catatan from API
  const fetchRecords = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.append("academic_year", selectedAcademicYear);
      params.append("semester", selectedSemester);
      params.append("class_name", selectedClass);
      if (categoryFilter !== "Semua Kategori") params.append("category", categoryFilter);
      if (statusFilter !== "Semua Status") params.append("status", statusFilter);
      if (searchTerm.trim() !== "") params.append("search", searchTerm.trim());

      const res = await fetch(`/api/kurikulum/catatan-wali-kelas?${params.toString()}`);
      const json = await res.json();
      if (json.success && Array.isArray(json.data)) {
        setRecords(json.data);
      } else {
        setRecords([]);
      }
    } catch (err: any) {
      console.error("fetchRecords error:", err);
      showToast("Gagal memuat catatan wali kelas", "error");
    } finally {
      setLoading(false);
    }
  }, [
    selectedAcademicYear,
    selectedSemester,
    selectedClass,
    categoryFilter,
    statusFilter,
    searchTerm,
  ]);

  useEffect(() => {
    fetchRecords();
    setCurrentPage(1);
  }, [fetchRecords]);

  // Pagination calculation
  const paginatedRecords = useMemo(() => {
    const start = (currentPage - 1) * pageSize;
    return records.slice(start, start + pageSize);
  }, [records, currentPage]);

  const totalPages = Math.max(1, Math.ceil(records.length / pageSize));

  // StatCards values
  const stats = useMemo(() => {
    const total = records.length;
    const kasusCount = records.filter(
      (r) => r.category === "Pembinaan / Kasus Siswa"
    ).length;
    const konselingCount = records.filter(
      (r) => r.category === "Konseling / Pendekatan Personal"
    ).length;
    const motivasiCount = records.filter(
      (r) => r.category === "Motivasi / Pengarahan Kelas"
    ).length;
    const selesaiCount = records.filter((r) => r.status === "Selesai").length;
    const rujukanCount = records.filter((r) => r.status === "Rujukan ke BK").length;

    return {
      total,
      kasusCount,
      konselingCount,
      motivasiCount,
      selesaiCount,
      rujukanCount,
    };
  }, [records]);

  // Open Add Modal
  const handleOpenAddModal = () => {
    setEditingRecord(null);
    setFormDate(new Date().toISOString().split("T")[0]);
    setFormCategory("Pembinaan / Kasus Siswa");
    setFormTargetType("Individu Siswa");
    const firstStudent = classStudents[0];
    setFormStudentNis(firstStudent?.nis || "");
    setFormStudentName(firstStudent?.fullName || "");
    setFormNotes("");
    setFormFollowUp("");
    setFormStatus("Selesai");
    setIsAddEditModalOpen(true);
  };

  // Open Edit Modal
  const handleOpenEditModal = (rec: CatatanWaliKelasRecord) => {
    setEditingRecord(rec);
    setFormDate(rec.date);
    setFormCategory(rec.category);
    setFormTargetType(rec.target_type);
    setFormStudentNis(rec.student_nis || "");
    setFormStudentName(rec.student_name || "");
    setFormNotes(rec.notes);
    setFormFollowUp(rec.follow_up || "");
    setFormStatus(rec.status);
    setIsAddEditModalOpen(true);
  };

  // Submit Add / Edit
  const handleSubmitForm = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formNotes.trim()) {
      showToast("Uraian catatan wajib diisi", "error");
      return;
    }

    setFormSubmitting(true);
    try {
      const payload = {
        academic_year: selectedAcademicYear,
        semester: selectedSemester,
        class_name: selectedClass,
        homeroom_teacher_name: currentHomeroom.teacherName,
        homeroom_teacher_nip: currentHomeroom.nip,
        date: formDate,
        category: formCategory,
        target_type: formTargetType,
        student_nis: formTargetType === "Individu Siswa" ? formStudentNis : null,
        student_name: formTargetType === "Individu Siswa" ? formStudentName : "Seluruh Kelas",
        notes: formNotes,
        follow_up: formFollowUp,
        status: formStatus,
      };

      if (editingRecord) {
        const res = await fetch("/api/kurikulum/catatan-wali-kelas", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ id: editingRecord.id, ...payload }),
        });
        const json = await res.json();
        if (!json.success) throw new Error(json.error || "Gagal memperbarui catatan");
        showToast("Catatan wali kelas berhasil diperbarui");
      } else {
        const res = await fetch("/api/kurikulum/catatan-wali-kelas", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });
        const json = await res.json();
        if (!json.success) throw new Error(json.error || "Gagal menambahkan catatan");
        showToast("Catatan wali kelas berhasil ditambahkan");
      }

      setIsAddEditModalOpen(false);
      fetchRecords();
    } catch (err: any) {
      console.error("submit error:", err);
      showToast(err.message || "Terjadi kesalahan", "error");
    } finally {
      setFormSubmitting(false);
    }
  };

  // Delete Action
  const handleDelete = async () => {
    if (!deletingRecord) return;
    try {
      const res = await fetch(`/api/kurikulum/catatan-wali-kelas?id=${deletingRecord.id}`, {
        method: "DELETE",
      });
      const json = await res.json();
      if (!json.success) throw new Error(json.error || "Gagal menghapus");
      showToast("Catatan berhasil dihapus");
      setIsDeleteModalOpen(false);
      setDeletingRecord(null);
      fetchRecords();
    } catch (err: any) {
      showToast(err.message || "Gagal menghapus catatan", "error");
    }
  };

  // Download Template Excel
  const handleDownloadTemplate = () => {
    window.open("/api/kurikulum/catatan-wali-kelas/template", "_blank");
  };

  // Export Excel (.xlsx)
  const handleExportXLSX = () => {
    if (records.length === 0) {
      showToast("Tidak ada data catatan untuk diekspor", "error");
      return;
    }

    const rows = records.map((item, idx) => ({
      No: idx + 1,
      Tanggal: item.date,
      Kategori: item.category,
      Sasaran: item.target_type,
      "Nama Siswa": item.target_type === "Seluruh Kelas" ? "Seluruh Kelas" : item.student_name || "-",
      NIS: item.target_type === "Seluruh Kelas" ? "-" : item.student_nis || "-",
      "Uraian Catatan / Kejadian": item.notes,
      "Tindak Lanjut": item.follow_up || "-",
      Status: item.status,
      "Wali Kelas": item.homeroom_teacher_name,
      Kelas: item.class_name,
      Semester: item.semester,
      "Tahun Ajaran": item.academic_year,
    }));

    const ws = XLSX.utils.json_to_sheet(rows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, `Catatan WK ${selectedClass}`);

    const tglExport = new Date().toISOString().split("T")[0];
    const fileName = `Catatan_Wali_Kelas_${selectedClass}_${selectedAcademicYear.replace(/[\/\s]/g, "-")}_${selectedSemester}_${tglExport}.xlsx`;
    XLSX.writeFile(wb, fileName);
    showToast("Berhasil mengekspor catatan ke Excel");
  };

  // Import Excel (.xlsx)
  const handleProcessImport = async () => {
    if (!importFile) {
      setImportError("Silakan pilih file Excel terlebih dahulu");
      return;
    }

    setIsImporting(true);
    setImportError(null);

    try {
      const buffer = await importFile.arrayBuffer();
      const wb = XLSX.read(buffer, { type: "array" });
      const firstSheet = wb.Sheets[wb.SheetNames[0]];
      const rawRows: any[] = XLSX.utils.sheet_to_json(firstSheet);

      if (!rawRows || rawRows.length === 0) {
        throw new Error("File Excel kosong atau tidak memiliki data yang valid.");
      }

      const recordsToImport: any[] = [];

      for (const row of rawRows) {
        const nis = String(row["NIS"] || row["nis"] || "").trim();
        const nama = String(row["Nama Siswa"] || row["nama_siswa"] || "").trim();
        const tgl = String(row["Tanggal"] || row["tanggal"] || new Date().toISOString().split("T")[0]).trim();
        const kat = String(row["Kategori"] || row["kategori"] || "Pembinaan / Kasus Siswa").trim();
        const sasaran = String(row["Sasaran"] || row["sasaran"] || (nis === "-" ? "Seluruh Kelas" : "Individu Siswa")).trim();
        const uraian = String(row["Uraian Catatan"] || row["uraian"] || row["Catatan"] || "").trim();
        const tindakLanjut = String(row["Tindak Lanjut"] || row["tindak_lanjut"] || "").trim();
        const status = String(row["Status"] || row["status"] || "Selesai").trim();

        if (!uraian) continue;

        recordsToImport.push({
          academic_year: selectedAcademicYear,
          semester: selectedSemester,
          class_name: selectedClass,
          homeroom_teacher_name: currentHomeroom.teacherName,
          homeroom_teacher_nip: currentHomeroom.nip,
          date: tgl,
          category: kat,
          target_type: sasaran,
          student_nis: sasaran === "Seluruh Kelas" ? null : nis,
          student_name: sasaran === "Seluruh Kelas" ? "Seluruh Kelas" : nama,
          notes: uraian,
          follow_up: tindakLanjut,
          status: status,
        });
      }

      if (recordsToImport.length === 0) {
        throw new Error("Tidak ada baris data valid yang dapat diimpor. Pastikan kolom sesuai template.");
      }

      const res = await fetch("/api/kurikulum/catatan-wali-kelas", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ records: recordsToImport }),
      });
      const json = await res.json();
      if (!json.success) throw new Error(json.error || "Gagal mengimpor data");

      showToast(`Berhasil mengimpor ${json.count || recordsToImport.length} catatan`);
      setIsImportModalOpen(false);
      setImportFile(null);
      fetchRecords();
    } catch (err: any) {
      console.error("Import error:", err);
      setImportError(err.message || "Gagal memproses file Excel");
    } finally {
      setIsImporting(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* Toast Notification */}
      {toastMessage && (
        <div
          className={`fixed bottom-5 right-5 z-50 px-4 py-3 rounded-xl shadow-lg border text-sm font-semibold flex items-center gap-2 animate-fadeIn ${
            toastType === "success"
              ? "bg-emerald-50 border-emerald-200 text-emerald-800"
              : "bg-rose-50 border-rose-200 text-rose-800"
          }`}
        >
          {toastType === "success" ? (
            <CheckCircle2 className="w-4 h-4 text-emerald-600" />
          ) : (
            <AlertTriangle className="w-4 h-4 text-rose-600" />
          )}
          <span>{toastMessage}</span>
        </div>
      )}

      {/* HEADER UTAMA */}
      <div className="bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-xs">
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
          <div className="space-y-1">
            <div className="flex items-center gap-2">
              <span className="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-blue-50 text-blue-700 border border-blue-200">
                Modul Kurikulum
              </span>
              <span className="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-purple-50 text-purple-700 border border-purple-200">
                Real-Time & Dinamis
              </span>
            </div>
            <h1 className="text-xl sm:text-2xl font-black text-slate-900 tracking-tight flex items-center gap-2.5">
              <ClipboardList className="w-6 h-6 text-blue-600" />
              <span>Catatan & Log Pembinaan Wali Kelas</span>
            </h1>
            <p className="text-xs sm:text-sm text-slate-500 max-w-3xl">
              Pencatatan pembinaan kasus siswa, konseling personal, materi motivasi klasikal, import/export Excel massal, serta pratinjau cetak resmi F4 dengan tanda tangan dinamis Kepala Sekolah dan Wali Kelas.
            </p>
          </div>

          {/* Action Utama: Tambah, Export, Template, Import, Cetak */}
          <div className="flex flex-wrap items-center gap-2 shrink-0">
            <Button
              type="button"
              variant="primary"
              size="sm"
              onClick={handleOpenAddModal}
              className="bg-blue-600 hover:bg-blue-700 text-white gap-2 font-semibold shadow-xs"
            >
              <Plus className="w-4 h-4" />
              <span>+ Catat Kasus / Pembinaan</span>
            </Button>

            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={handleExportXLSX}
              className="text-emerald-700 bg-white border-emerald-300 hover:bg-emerald-50 gap-2 font-semibold shadow-xs"
              title="Unduh Rekap Catatan ke Excel (.xlsx)"
            >
              <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
              <span>Export Excel</span>
            </Button>

            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={handleDownloadTemplate}
              className="text-slate-700 bg-white border-slate-300 hover:bg-slate-50 gap-2 font-semibold shadow-xs"
              title="Download Template Format Excel (.xlsx)"
            >
              <Download className="w-4 h-4 text-slate-600" />
              <span className="hidden sm:inline">Template Excel</span>
            </Button>

            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => {
                setImportFile(null);
                setImportError(null);
                setIsImportModalOpen(true);
              }}
              className="text-slate-700 bg-white border-slate-300 hover:bg-slate-50 gap-2 font-semibold shadow-xs"
              title="Unggah Catatan Massal dari Excel (.xlsx)"
            >
              <Upload className="w-4 h-4 text-slate-600" />
              <span>Import Excel</span>
            </Button>

            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => setIsPrintModalOpen(true)}
              className="text-blue-700 bg-blue-50 border-blue-200 hover:bg-blue-100 gap-2 font-semibold shadow-xs"
              title="Pratinjau Cetak Lembar F4 Resmi"
            >
              <Printer className="w-4 h-4 text-blue-600" />
              <span>Cetak F4</span>
            </Button>
          </div>
        </div>

        {/* Dynamic Class & Homeroom Information Bar */}
        <div className="mt-5 pt-4 border-t border-slate-100 flex flex-wrap items-center justify-between gap-3 text-xs">
          <div className="flex flex-wrap items-center gap-3">
            {/* Filter Tahun Ajaran */}
            <div className="flex items-center gap-1.5">
              <span className="font-bold text-slate-600">Tahun Ajaran:</span>
              <select
                value={selectedAcademicYear}
                onChange={(e) => setSelectedAcademicYear(e.target.value)}
                className="px-2.5 py-1.5 bg-slate-50 border border-slate-300 rounded-lg font-bold text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              >
                {academicYearOptions.map((ay) => (
                  <option key={ay} value={ay}>
                    {ay}
                  </option>
                ))}
              </select>
            </div>

            {/* Filter Semester */}
            <div className="flex items-center gap-1.5">
              <span className="font-bold text-slate-600">Semester:</span>
              <select
                value={selectedSemester}
                onChange={(e) => setSelectedSemester(e.target.value as "Ganjil" | "Genap")}
                className="px-2.5 py-1.5 bg-slate-50 border border-slate-300 rounded-lg font-bold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              >
                {SEMESTER_OPTIONS.map((sem) => (
                  <option key={sem} value={sem}>
                    {sem}
                  </option>
                ))}
              </select>
            </div>

            {/* Filter Kelas Rombel */}
            <div className="flex items-center gap-1.5">
              <span className="font-bold text-slate-600">Kelas / Rombel:</span>
              <select
                value={selectedClass}
                onChange={(e) => setSelectedClass(e.target.value)}
                disabled={isStrictWaliKelasLock && availableClassOptions.length <= 1}
                className={`px-2.5 py-1.5 bg-blue-50 border border-blue-300 rounded-lg font-black text-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 ${
                  isStrictWaliKelasLock ? "cursor-default opacity-95" : "cursor-pointer"
                }`}
              >
                {availableClassOptions.map((cls) => (
                  <option key={cls} value={cls}>
                    Kelas {cls}
                  </option>
                ))}
              </select>
              {isStrictWaliKelasLock && (
                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-200">
                  <Lock className="w-3 h-3 text-amber-700" />
                  Terkunci: Wali Kelas
                </span>
              )}
            </div>
          </div>

          {/* Dynamic Homeroom Badge */}
          <div className="flex items-center gap-2 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200/80 px-3.5 py-1.5 rounded-xl">
            <UserCheck className="w-4 h-4 text-blue-600 shrink-0" />
            <div>
              <span className="text-[11px] text-slate-500 font-medium">Wali Kelas: </span>
              <span className="font-bold text-blue-950 text-xs">{currentHomeroom.teacherName}</span>
              <span className="text-[10px] text-slate-500 ml-1.5 font-mono font-medium">({currentHomeroom.nip})</span>
            </div>
            {isStrictWaliKelasLock && (
              <span className="ml-1 text-[10px] px-2 py-0.5 rounded-full font-bold bg-blue-600 text-white shadow-2xs">
                Kelas Binaan Anda
              </span>
            )}
          </div>
        </div>
      </div>

      {/* STAT CARDS OVERVIEW */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        <StatCard
          title="Total Catatan Kelas"
          value={stats.total.toString()}
          icon={ClipboardList}
          iconColor="blue"
          description={`Log pembinaan Kelas ${selectedClass}`}
        />
        <StatCard
          title="Kasus / Pelanggaran"
          value={stats.kasusCount.toString()}
          icon={ShieldAlert}
          iconColor="danger"
          description="Kedisiplinan & tata tertib"
        />
        <StatCard
          title="Konseling Pribadi"
          value={stats.konselingCount.toString()}
          icon={HeartHandshake}
          iconColor="warning"
          description="Pendekatan personal & curhat"
        />
        <StatCard
          title="Rujukan ke BK"
          value={stats.rujukanCount.toString()}
          icon={MessageSquareText}
          iconColor="purple"
          description="Eskalasi ke Bimbingan Konseling"
        />
      </div>

      {/* FILTER & SEARCH BAR */}
      <div className="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-xs flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
        <div className="flex flex-wrap items-center gap-2.5 flex-1">
          {/* Filter Kategori */}
          <select
            value={categoryFilter}
            onChange={(e) => setCategoryFilter(e.target.value)}
            className="px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
          >
            {CATEGORY_OPTIONS.map((opt) => (
              <option key={opt} value={opt}>
                {opt}
              </option>
            ))}
          </select>

          {/* Filter Status */}
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
          >
            {STATUS_OPTIONS.map((opt) => (
              <option key={opt} value={opt}>
                {opt}
              </option>
            ))}
          </select>

          {/* Search Box */}
          <div className="relative flex-1 min-w-[200px]">
            <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              placeholder="Cari nama siswa, NIS, atau kata kunci uraian..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-9 pr-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
            />
          </div>
        </div>

        <button
          type="button"
          onClick={() => {
            setCategoryFilter("Semua Kategori");
            setStatusFilter("Semua Status");
            setSearchTerm("");
          }}
          className="text-xs font-semibold text-slate-500 hover:text-slate-800 flex items-center gap-1.5 self-end sm:self-auto py-1 px-2.5 rounded-lg hover:bg-slate-100 transition-colors"
          title="Reset Filter"
        >
          <RotateCcw className="w-3.5 h-3.5" />
          <span>Reset</span>
        </button>
      </div>

      {/* TABEL CATATAN WALI KELAS */}
      <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse text-xs">
            <thead>
              <tr className="bg-slate-50/80 border-b border-slate-200 text-slate-600 font-bold uppercase tracking-wider text-[11px]">
                <th className="py-3 px-3 text-center w-12">No</th>
                <th className="py-3 px-3 w-24">Tanggal</th>
                <th className="py-3 px-3 w-40">Kategori</th>
                <th className="py-3 px-4 min-w-[170px]">Sasaran / Siswa</th>
                <th className="py-3 px-4 min-w-[240px]">Uraian Kejadian / Materi</th>
                <th className="py-3 px-4 min-w-[180px]">Tindak Lanjut / Solusi</th>
                <th className="py-3 px-3 text-center w-32">Status</th>
                <th className="py-3 px-3 text-center w-24">Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 text-slate-700">
              {loading ? (
                <tr>
                  <td colSpan={8} className="py-12 text-center text-slate-400">
                    <div className="inline-flex items-center gap-2">
                      <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
                      <span>Memuat log catatan wali kelas...</span>
                    </div>
                  </td>
                </tr>
              ) : records.length === 0 ? (
                <tr>
                  <td colSpan={8} className="py-16 text-center text-slate-400">
                    <div className="flex flex-col items-center justify-center gap-2">
                      <ClipboardList className="w-10 h-10 text-slate-300 stroke-[1.5]" />
                      <p className="font-semibold text-slate-600">Belum ada catatan pembinaan pada filter ini</p>
                      <p className="text-xs text-slate-400">
                        Klik tombol <strong>&ldquo;+ Catat Kasus / Pembinaan&rdquo;</strong> untuk mencatat aktivitas baru.
                      </p>
                    </div>
                  </td>
                </tr>
              ) : (
                paginatedRecords.map((item, idx) => {
                  const itemIndex = (currentPage - 1) * pageSize + idx + 1;
                  return (
                    <tr key={item.id} className="hover:bg-slate-50/70 transition-colors">
                      <td className="py-3.5 px-3 text-center text-slate-400 font-medium">
                        {itemIndex}
                      </td>
                      <td className="py-3.5 px-3 whitespace-nowrap font-mono text-slate-700 font-medium">
                        {item.date}
                      </td>
                      <td className="py-3.5 px-3">
                        <span
                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold ${
                            item.category === "Pembinaan / Kasus Siswa"
                              ? "bg-rose-50 text-rose-700 border border-rose-200"
                              : item.category === "Konseling / Pendekatan Personal"
                              ? "bg-amber-50 text-amber-700 border border-amber-200"
                              : "bg-purple-50 text-purple-700 border border-purple-200"
                          }`}
                        >
                          {item.category}
                        </span>
                      </td>
                      <td className="py-3.5 px-4">
                        {item.target_type === "Seluruh Kelas" ? (
                          <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg bg-blue-50 text-blue-800 font-bold text-xs border border-blue-200">
                            <Users className="w-3.5 h-3.5 text-blue-600" />
                            <span>Seluruh Kelas {item.class_name}</span>
                          </div>
                        ) : (
                          <div>
                            <div className="font-bold text-slate-900">{item.student_name || "-"}</div>
                            {item.student_nis && (
                              <div className="text-[10px] text-slate-500 font-mono">NIS: {item.student_nis}</div>
                            )}
                          </div>
                        )}
                      </td>
                      <td className="py-3.5 px-4 max-w-sm">
                        <div className="text-slate-800 leading-relaxed line-clamp-3">
                          {item.notes}
                        </div>
                      </td>
                      <td className="py-3.5 px-4 max-w-xs">
                        {item.follow_up ? (
                          <div className="text-slate-700 italic leading-relaxed line-clamp-2">
                            {item.follow_up}
                          </div>
                        ) : (
                          <span className="text-slate-400 italic">-</span>
                        )}
                      </td>
                      <td className="py-3.5 px-3 text-center">
                        <span
                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold ${
                            item.status === "Selesai"
                              ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
                              : item.status === "Dalam Pemantauan"
                              ? "bg-blue-50 text-blue-700 border border-blue-200"
                              : "bg-red-50 text-red-700 border border-red-200"
                          }`}
                        >
                          {item.status}
                        </span>
                      </td>
                      <td className="py-3.5 px-3 text-center">
                        <div className="flex items-center justify-center gap-1">
                          <button
                            type="button"
                            onClick={() => handleOpenEditModal(item)}
                            className="p-1.5 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
                            title="Edit Catatan"
                          >
                            <Edit2 className="w-3.5 h-3.5" />
                          </button>
                          <button
                            type="button"
                            onClick={() => {
                              setDeletingRecord(item);
                              setIsDeleteModalOpen(true);
                            }}
                            className="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors"
                            title="Hapus Catatan"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

        {/* PAGINATION BAR */}
        {records.length > pageSize && (
          <div className="p-4 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500">
            <span>
              Menampilkan {(currentPage - 1) * pageSize + 1} s.d.{" "}
              {Math.min(currentPage * pageSize, records.length)} dari {records.length} catatan
            </span>
            <div className="flex items-center gap-1">
              <button
                type="button"
                disabled={currentPage <= 1}
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                className="p-1.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <span className="px-2 font-bold text-slate-800">
                {currentPage} / {totalPages}
              </span>
              <button
                type="button"
                disabled={currentPage >= totalPages}
                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                className="p-1.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* ========================================================================= */}
      {/* MODAL: TAMBAH / EDIT CATATAN WALI KELAS                                  */}
      {/* ========================================================================= */}
      <Modal
        isOpen={isAddEditModalOpen}
        onClose={() => setIsAddEditModalOpen(false)}
        title={editingRecord ? "Edit Catatan Wali Kelas" : `+ Tambah Catatan Wali Kelas ${selectedClass}`}
        maxWidth="lg"
      >
        <form onSubmit={handleSubmitForm} className="space-y-4">
          <div className="p-3 bg-blue-50/60 border border-blue-200/70 rounded-xl flex items-center justify-between text-xs">
            <div>
              <span className="text-slate-500">Wali Kelas: </span>
              <span className="font-bold text-blue-900">{currentHomeroom.teacherName}</span>
            </div>
            <div>
              <span className="text-slate-500">Kelas / T.A.: </span>
              <span className="font-bold text-slate-900">{selectedClass} ({selectedAcademicYear} - {selectedSemester})</span>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {/* Tanggal */}
            <div>
              <label className="block text-[11px] font-bold text-slate-700 mb-1">
                Tanggal Catatan <span className="text-rose-500">*</span>
              </label>
              <Input
                type="date"
                value={formDate}
                onChange={(e) => setFormDate(e.target.value)}
                required
              />
            </div>

            {/* Kategori Catatan */}
            <div>
              <label className="block text-[11px] font-bold text-slate-700 mb-1">
                Kategori Catatan <span className="text-rose-500">*</span>
              </label>
              <select
                value={formCategory}
                onChange={(e) => setFormCategory(e.target.value as any)}
                className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-300 rounded-lg font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                required
              >
                <option value="Pembinaan / Kasus Siswa">Pembinaan / Kasus Siswa</option>
                <option value="Konseling / Pendekatan Personal">Konseling / Pendekatan Personal</option>
                <option value="Motivasi / Pengarahan Kelas">Motivasi / Pengarahan Kelas</option>
              </select>
            </div>
          </div>

          {/* Target Sasaran: Individu atau Seluruh Kelas */}
          <div>
            <label className="block text-[11px] font-bold text-slate-700 mb-1.5">
              Sasaran Pembinaan <span className="text-rose-500">*</span>
            </label>
            <div className="grid grid-cols-2 gap-2">
              <button
                type="button"
                onClick={() => setFormTargetType("Individu Siswa")}
                className={`py-2 px-3 rounded-xl text-xs font-bold border transition-all flex items-center justify-center gap-2 ${
                  formTargetType === "Individu Siswa"
                    ? "bg-blue-50 border-blue-300 text-blue-700 shadow-xs"
                    : "bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100"
                }`}
              >
                <UserCheck className="w-4 h-4" />
                <span>Individu Siswa</span>
              </button>
              <button
                type="button"
                onClick={() => setFormTargetType("Seluruh Kelas")}
                className={`py-2 px-3 rounded-xl text-xs font-bold border transition-all flex items-center justify-center gap-2 ${
                  formTargetType === "Seluruh Kelas"
                    ? "bg-blue-50 border-blue-300 text-blue-700 shadow-xs"
                    : "bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100"
                }`}
              >
                <Users className="w-4 h-4" />
                <span>Seluruh Kelas (Klasikal)</span>
              </button>
            </div>
          </div>

          {/* Dropdown Siswa jika target Individu */}
          {formTargetType === "Individu Siswa" && (
            <div>
              <label className="block text-[11px] font-bold text-slate-700 mb-1">
                Pilih Siswa (Rombel {selectedClass}) <span className="text-rose-500">*</span>
              </label>
              {classStudents.length === 0 ? (
                <div className="p-2.5 bg-amber-50 text-amber-800 rounded-lg text-xs border border-amber-200">
                  Tidak ada data siswa aktif yang terdaftar di kelas {selectedClass}.
                </div>
              ) : (
                <select
                  value={formStudentNis}
                  onChange={(e) => {
                    const found = classStudents.find((s) => s.nis === e.target.value);
                    if (found) {
                      setFormStudentNis(found.nis);
                      setFormStudentName(found.fullName);
                    }
                  }}
                  className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-300 rounded-lg font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                  required
                >
                  <option value="">-- Pilih Siswa Kelas {selectedClass} ({classStudents.length} Siswa Aktif) --</option>
                  {classStudents.map((st) => (
                    <option key={st.id || st.nis} value={st.nis}>
                      {st.nis} - {st.fullName}
                    </option>
                  ))}
                  {formStudentNis && !classStudents.some((s) => s.nis === formStudentNis) && (
                    <option value={formStudentNis}>
                      {formStudentNis} - {formStudentName} (Tercatat)
                    </option>
                  )}
                </select>
              )}
            </div>
          )}

          {/* Uraian Kejadian / Kronologi / Catatan */}
          <div>
            <label className="block text-[11px] font-bold text-slate-700 mb-1">
              Uraian Kejadian / Kronologi / Catatan Pembinaan <span className="text-rose-500">*</span>
            </label>
            <textarea
              rows={4}
              value={formNotes}
              onChange={(e) => setFormNotes(e.target.value)}
              placeholder="Jelaskan detail kronologi kasus, pokok masalah, atau materi pengarahan yang disampaikan..."
              className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-300 rounded-lg text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              required
            />
          </div>

          {/* Tindak Lanjut / Solusi */}
          <div>
            <label className="block text-[11px] font-bold text-slate-700 mb-1">
              Tindak Lanjut / Solusi yang Diberikan
            </label>
            <textarea
              rows={2}
              value={formFollowUp}
              onChange={(e) => setFormFollowUp(e.target.value)}
              placeholder="Contoh: Pembinaan lisan, peringatan tertulis, komitmen siswa, panggilan orang tua, dll..."
              className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-300 rounded-lg text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
            />
          </div>

          {/* Status Tindak Lanjut */}
          <div>
            <label className="block text-[11px] font-bold text-slate-700 mb-1">
              Status Penyelesaian <span className="text-rose-500">*</span>
            </label>
            <select
              value={formStatus}
              onChange={(e) => setFormStatus(e.target.value as any)}
              className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-300 rounded-lg font-bold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
            >
              <option value="Selesai">Selesai (Tuntas & Ada Kesepakatan)</option>
              <option value="Dalam Pemantauan">Dalam Pemantauan (Butuh Observasi Lanjutan)</option>
              <option value="Rujukan ke BK">Rujukan ke BK (Membutuhkan Penanganan Khusus)</option>
            </select>
          </div>

          {/* Actions */}
          <div className="pt-3 border-t border-slate-200 flex items-center justify-end gap-2">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => setIsAddEditModalOpen(false)}
            >
              Batal
            </Button>
            <Button
              type="submit"
              variant="primary"
              size="sm"
              disabled={formSubmitting}
              className="bg-blue-600 hover:bg-blue-700 text-white font-semibold shadow-xs"
            >
              {formSubmitting
                ? "Menyimpan..."
                : editingRecord
                ? "Simpan Perubahan"
                : "Simpan Catatan"}
            </Button>
          </div>
        </form>
      </Modal>

      {/* ========================================================================= */}
      {/* MODAL: KONFIRMASI HAPUS CATATAN                                           */}
      {/* ========================================================================= */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => setIsDeleteModalOpen(false)}
        title="Konfirmasi Hapus Catatan Wali Kelas"
        maxWidth="sm"
      >
        <div className="space-y-4">
          <p className="text-xs text-slate-600">
            Apakah Anda yakin ingin menghapus catatan pembinaan ini? Data yang dihapus tidak dapat dipulihkan kembali.
          </p>
          {deletingRecord && (
            <div className="p-3 bg-slate-50 border border-slate-200 rounded-lg text-xs space-y-1">
              <p><strong>Sasaran:</strong> {deletingRecord.student_name || "Seluruh Kelas"}</p>
              <p><strong>Kategori:</strong> {deletingRecord.category}</p>
              <p className="italic text-slate-500 truncate"><strong>Uraian:</strong> &ldquo;{deletingRecord.notes}&rdquo;</p>
            </div>
          )}
          <div className="flex items-center justify-end gap-2 pt-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setIsDeleteModalOpen(false)}
            >
              Batal
            </Button>
            <Button
              variant="primary"
              size="sm"
              onClick={handleDelete}
              className="bg-rose-600 hover:bg-rose-700 text-white font-semibold"
            >
              Ya, Hapus Catatan
            </Button>
          </div>
        </div>
      </Modal>

      {/* ========================================================================= */}
      {/* MODAL: IMPORT EXCEL (.XLSX)                                               */}
      {/* ========================================================================= */}
      <Modal
        isOpen={isImportModalOpen}
        onClose={() => setIsImportModalOpen(false)}
        title={`Import Data Catatan Wali Kelas ${selectedClass} dari Excel (.xlsx)`}
        maxWidth="md"
      >
        <div className="space-y-4">
          <div className="p-3 bg-blue-50 border border-blue-200 rounded-xl text-xs text-blue-900 leading-relaxed">
            <p className="font-bold mb-1">Petunjuk Unggah Excel:</p>
            <ul className="list-disc list-inside space-y-0.5 text-[11px] text-blue-800">
              <li>Pastikan kolom sesuai template resmi: <strong>NIS, Nama Siswa, Tanggal, Kategori, Sasaran, Uraian Catatan, Tindak Lanjut, Status</strong>.</li>
              <li>Data akan otomatis terhubung ke <strong>Kelas {selectedClass}</strong> pada Tahun Ajaran <strong>{selectedAcademicYear} - Semester {selectedSemester}</strong>.</li>
            </ul>
          </div>

          <div className="flex justify-between items-center">
            <span className="text-xs text-slate-600 font-semibold">Belum punya format template?</span>
            <button
              type="button"
              onClick={handleDownloadTemplate}
              className="text-xs text-blue-600 hover:text-blue-800 font-bold flex items-center gap-1.5"
            >
              <Download className="w-3.5 h-3.5" />
              <span>Download Template Resmi (.xlsx)</span>
            </button>
          </div>

          {/* File input */}
          <div className="border-2 border-dashed border-slate-300 rounded-xl p-6 text-center hover:bg-slate-50 transition-colors">
            <input
              type="file"
              accept=".xlsx, .xls"
              onChange={(e) => {
                const f = e.target.files?.[0];
                if (f) {
                  setImportFile(f);
                  setImportError(null);
                }
              }}
              className="hidden"
              id="import-excel-file"
            />
            <label htmlFor="import-excel-file" className="cursor-pointer">
              <FileSpreadsheet className="w-10 h-10 text-emerald-600 mx-auto mb-2" />
              <p className="text-xs font-bold text-slate-700">
                {importFile ? importFile.name : "Klik untuk memilih berkas Excel (.xlsx / .xls)"}
              </p>
              <p className="text-[10px] text-slate-400 mt-1">
                Maksimal ukuran file: 5 MB
              </p>
            </label>
          </div>

          {importError && (
            <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-700 font-medium">
              {importError}
            </div>
          )}

          <div className="pt-2 border-t border-slate-200 flex items-center justify-end gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setIsImportModalOpen(false)}
            >
              Batal
            </Button>
            <Button
              variant="primary"
              size="sm"
              disabled={!importFile || isImporting}
              onClick={handleProcessImport}
              className="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold"
            >
              {isImporting ? "Mengimpor Data..." : "Proses & Simpan ke Database"}
            </Button>
          </div>
        </div>
      </Modal>

      {/* ========================================================================= */}
      {/* MODAL: CETAK F4 & TOGGLE ORIENTASI                                        */}
      {/* ========================================================================= */}
      <CatatanWaliKelasPrintModal
        isOpen={isPrintModalOpen}
        onClose={() => setIsPrintModalOpen(false)}
        data={records}
        academicYear={selectedAcademicYear}
        semester={selectedSemester}
        className={selectedClass}
        homeroomTeacherName={currentHomeroom.teacherName}
        homeroomTeacherNip={currentHomeroom.nip}
      />
    </div>
  );
};

export default CatatanWaliKelasView;