"use client";

import React, { useState, useMemo, useEffect, useCallback } from "react";
import {
  BookOpenCheck,
  Calendar,
  Clock,
  Users,
  Search,
  Filter,
  CheckCircle2,
  AlertTriangle,
  XCircle,
  FileSpreadsheet,
  Printer,
  ChevronRight,
  TrendingUp,
  UserCheck,
  UserX,
  FileText,
  ShieldAlert,
  Info,
  CalendarDays,
  Plus,
  RefreshCw,
  Edit3,
  Trash2,
  X,
  Sparkles,
  BarChart3,
  PieChart,
  Check,
  Save,
  Building,
  GraduationCap,
  ExternalLink,
} from "lucide-react";
import * as XLSX from "xlsx";
import { Modal } from "@/components/ui/Modal";
import { StatCard } from "@/components/ui/StatCard";
import { Pagination } from "@/components/ui/Pagination";
import { PrintOrientationToggle } from "@/components/ui/PrintOrientationToggle";
import { triggerPrint, PrintOrientation } from "@/lib/printUtils";
import {
  ScheduleItem,
  DayOfWeek,
} from "@/data/mockCurriculumData";
import { getCurrentAcademicYear, getAcademicYearOptions } from "@/lib/academicYear";
import { TeacherDetail } from "@/data/mockTeacherData";
import { useSmartSchool } from "@/context/SmartSchoolContext";
import { useAuth } from "@/context/AuthContext";
import { parseRoles } from "@/lib/rbac";
import { findTeacherForUser, getTeacherTaughtClasses } from "@/lib/teacherUtils";
import { mockAvailableClasses } from "@/data/mockStudentData";
import { KBMSessionDBRecord, SchoolOfficialDBRecord } from "@/lib/db";

// Helper: Format Date ID
const formatDateID = (dateStr: string) => {
  if (!dateStr) return "-";
  try {
    const d = new Date(dateStr);
    return d.toLocaleDateString("id-ID", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
    });
  } catch {
    return dateStr;
  }
};

const getTodayDateString = () => {
  const d = new Date();
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const getDayNameFromDate = (dateStr: string): DayOfWeek => {
  try {
    const d = new Date(dateStr);
    const dayIndex = d.getDay();
    const days: DayOfWeek[] = ["Senin", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Senin"];
    return days[dayIndex] || "Senin";
  } catch {
    return "Senin";
  }
};

const ACADEMIC_YEARS = getAcademicYearOptions();
const MONTHS_LIST = [
  { value: "Semua Bulan", label: "Semua Bulan" },
  { value: "07", label: "Juli" },
  { value: "08", label: "Agustus" },
  { value: "09", label: "September" },
  { value: "10", label: "Oktober" },
  { value: "11", label: "November" },
  { value: "12", label: "Desember" },
  { value: "01", label: "Januari" },
  { value: "02", label: "Februari" },
  { value: "03", label: "Maret" },
  { value: "04", label: "April" },
  { value: "05", label: "Mei" },
  { value: "06", label: "Juni" },
];

export const PresensiKBMManagementView: React.FC = () => {
  // ==========================================
  // NAVIGATION & GENERAL STATE
  // ==========================================
  const [activeTab, setActiveTab] = useState<"presensi" | "rekapitulasi">("presensi");
  const [selectedAcademicYear, setSelectedAcademicYear] = useState<string>(() => getCurrentAcademicYear());
  const [selectedSemester, setSelectedSemester] = useState<"Ganjil" | "Genap">("Ganjil");
  const [officials, setOfficials] = useState<SchoolOfficialDBRecord[]>([]);

  // Toast Notification
  const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" } | null>(null);
  const showToast = (message: string, type: "success" | "error" | "info" = "success") => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 4000);
  };

  // Fetch School Officials for dynamic signatures
  useEffect(() => {
    fetch("/api/school-officials")
      .then((res) => res.json())
      .then((json) => {
        if (json.success && Array.isArray(json.data)) {
          setOfficials(json.data);
        }
      })
      .catch((err) => console.error("fetch officials err:", err));
  }, []);

  const kepalaSekolah = useMemo(() => officials.find((o) => o.id === "kepala_sekolah"), [officials]);
  const wakasekKurikulum = useMemo(() => officials.find((o) => o.id === "wakasek_kurikulum"), [officials]);

  // ==========================================
  // TAB 1: PRESENSI & JURNAL MENGAJAR (HARI INI)
  // ==========================================
  const [selectedDate, setSelectedDate] = useState<string>(() => getTodayDateString());
  const activeDayName = useMemo(() => getDayNameFromDate(selectedDate), [selectedDate]);

  // Context Integration
  const { teachers: contextTeachers, plottingList, homerooms, getHomeroomForClass } = useSmartSchool();
  const { user } = useAuth();

  // Role Guru Mapel detection
  const isGuruMapel = useMemo(() => {
    if (!user?.role) return false;
    const roles = parseRoles(user.role);
    return (
      roles.includes("Guru Mapel") &&
      !roles.includes("Super Admin") &&
      !roles.includes("Kurikulum") &&
      !roles.includes("Wali Kelas")
    );
  }, [user?.role]);

  // Teacher Selection - Loaded from Data Guru (/api/teachers & localStorage)
  const [teachersList, setTeachersList] = useState<TeacherDetail[]>(() => {
    if (typeof window !== "undefined") {
      try {
        const saved =
          localStorage.getItem("bpi_smartschool_teachers_data") ||
          localStorage.getItem("bpi_smartschool_teachers");
        if (saved) {
          const parsed = JSON.parse(saved);
          if (Array.isArray(parsed) && parsed.length > 0) {
            return parsed;
          }
        }
      } catch {}
    }
    return [];
  });

  const [selectedTeacherId, setSelectedTeacherId] = useState<string>("");

  // Fetch real teachers directly from /api/teachers
  const fetchRealTeachers = useCallback(async () => {
    try {
      const res = await fetch(`/api/teachers?force=true&t=${Date.now()}`);
      if (res.ok) {
        const json = await res.json();
        if (json.success && Array.isArray(json.data) && json.data.length > 0) {
          let list = json.data;
          const isReversed =
            list[0]?.fullName?.toLowerCase().includes("aldini") ||
            (list[list.length - 1]?.fullName?.toLowerCase().includes("tatang") &&
              !list[0]?.fullName?.toLowerCase().includes("tatang"));
          if (isReversed) {
            list = [...list].reverse();
          }
          setTeachersList(list);
          if (typeof window !== "undefined") {
            try {
              localStorage.setItem("bpi_smartschool_teachers_data", JSON.stringify(list));
            } catch {}
          }
        }
      }
    } catch (err) {
      console.error("fetchRealTeachers err:", err);
    }
  }, []);

  useEffect(() => {
    fetchRealTeachers();
  }, [fetchRealTeachers]);

  // Sync with Context teachers when available
  useEffect(() => {
    if (contextTeachers && contextTeachers.length > 0 && teachersList.length === 0) {
      setTeachersList(contextTeachers);
    }
  }, [contextTeachers, teachersList.length]);

  // Listen to cross-tab / storage updates
  useEffect(() => {
    const handleSync = () => {
      if (typeof window !== "undefined") {
        try {
          const saved =
            localStorage.getItem("bpi_smartschool_teachers_data") ||
            localStorage.getItem("bpi_smartschool_teachers");
          if (saved) {
            const parsed = JSON.parse(saved);
            if (Array.isArray(parsed) && parsed.length > 0) {
              setTeachersList(parsed);
            }
          }
        } catch {}
      }
    };

    window.addEventListener("storage", handleSync);
    window.addEventListener("smartschool:sync", handleSync);
    return () => {
      window.removeEventListener("storage", handleSync);
      window.removeEventListener("smartschool:sync", handleSync);
    };
  }, []);

  // Identify logged-in teacher from Master Data Guru
  const loggedInTeacher = useMemo(() => {
    return findTeacherForUser(
      user,
      teachersList.length > 0 ? teachersList : contextTeachers || []
    );
  }, [user, teachersList, contextTeachers]);

  // Compute taught classes
  const taughtClasses = useMemo(() => {
    if (!isGuruMapel) return mockAvailableClasses;
    const list = getTeacherTaughtClasses(loggedInTeacher, plottingList);
    return list.length > 0 ? list : ["X-1"];
  }, [isGuruMapel, loggedInTeacher, plottingList]);

  // Ensure a valid real teacher is selected (Lock to logged-in teacher if Guru Mapel)
  useEffect(() => {
    if (isGuruMapel && loggedInTeacher?.id) {
      setSelectedTeacherId(loggedInTeacher.id);
      return;
    }
    if (teachersList.length > 0) {
      const exists = teachersList.some((t) => t.id === selectedTeacherId);
      if (!exists || !selectedTeacherId) {
        setSelectedTeacherId(teachersList[0].id);
      }
    }
  }, [isGuruMapel, loggedInTeacher, teachersList, selectedTeacherId]);

  const activeTeacher = useMemo(() => {
    if (isGuruMapel && loggedInTeacher) {
      return loggedInTeacher;
    }
    return teachersList.find((t) => t.id === selectedTeacherId) || teachersList[0] || null;
  }, [isGuruMapel, loggedInTeacher, teachersList, selectedTeacherId]);

  // Today's KBM sessions from DB
  const [dbSessions, setDbSessions] = useState<KBMSessionDBRecord[]>([]);
  const [isLoadingSessions, setIsLoadingSessions] = useState<boolean>(false);

  // Real-time Teacher Daily Schedules from API & DB
  const [teacherDaySchedules, setTeacherDaySchedules] = useState<ScheduleItem[]>([]);
  const [isLoadingSchedules, setIsLoadingSchedules] = useState<boolean>(false);

  // Filter daily schedules for Guru Mapel by taught classes
  const displayDaySchedules = useMemo(() => {
    if (!isGuruMapel) return teacherDaySchedules;
    return teacherDaySchedules.filter((sch) => taughtClasses.includes(sch.className));
  }, [isGuruMapel, teacherDaySchedules, taughtClasses]);

  const fetchDailySchedules = useCallback(async () => {
    if (!activeTeacher) return;
    try {
      setIsLoadingSchedules(true);
      const res = await fetch(
        `/api/kurikulum/presensi-kbm/jadwal-harian?teacher_id=${encodeURIComponent(
          activeTeacher.id
        )}&teacher_name=${encodeURIComponent(
          activeTeacher.fullName
        )}&date=${encodeURIComponent(selectedDate)}&academic_year=${encodeURIComponent(
          selectedAcademicYear
        )}&semester=${encodeURIComponent(selectedSemester)}`
      );
      const json = await res.json();
      if (json.success && Array.isArray(json.data)) {
        setTeacherDaySchedules(json.data);
      } else {
        setTeacherDaySchedules([]);
      }
    } catch (err) {
      console.error("fetchDailySchedules error:", err);
      setTeacherDaySchedules([]);
    } finally {
      setIsLoadingSchedules(false);
    }
  }, [activeTeacher, selectedDate, selectedAcademicYear, selectedSemester]);

  const fetchSessions = useCallback(async () => {
    if (!selectedTeacherId) return;
    try {
      setIsLoadingSessions(true);
      const res = await fetch(
        `/api/kurikulum/presensi-kbm?teacher_id=${encodeURIComponent(
          selectedTeacherId
        )}&date=${encodeURIComponent(selectedDate)}&academic_year=${encodeURIComponent(
          selectedAcademicYear
        )}`
      );
      const json = await res.json();
      if (json.success && Array.isArray(json.data)) {
        setDbSessions(json.data);
      }
    } catch (err) {
      console.error("fetchSessions error:", err);
    } finally {
      setIsLoadingSessions(false);
    }
  }, [selectedTeacherId, selectedDate, selectedAcademicYear]);

  useEffect(() => {
    fetchSessions();
  }, [fetchSessions]);

  useEffect(() => {
    fetchDailySchedules();
  }, [fetchDailySchedules]);

  // Check attendance status for a schedule
  const getSessionForSchedule = (sch: any) => {
    if (sch.session) return sch.session;
    return dbSessions.find(
      (s) =>
        (s.schedule_id && s.schedule_id === sch.id) ||
        (s.class_name === sch.className &&
          s.subject_name === sch.subjectName &&
          (s.period_start === (sch.jam_mulai_ke || sch.period)))
    );
  };

  // ==========================================
  // MODAL INPUT PRESENSI & JURNAL KBM
  // ==========================================
  const [isAttendanceModalOpen, setIsAttendanceModalOpen] = useState<boolean>(false);
  const [currentScheduleForModal, setCurrentScheduleForModal] = useState<ScheduleItem | null>(null);
  const [currentSessionId, setCurrentSessionId] = useState<number | null>(null);
  const [topicInput, setTopicInput] = useState<string>("");
  const [notesInput, setNotesInput] = useState<string>("");

  // Student list for attendance in modal
  interface StudentAttendanceRow {
    student_id: string;
    student_nis: string;
    student_nisn: string;
    student_name: string;
    student_class: string;
    status: "H" | "S" | "I" | "A";
    notes: string;
  }
  const [studentRows, setStudentRows] = useState<StudentAttendanceRow[]>([]);
  const [isLoadingStudents, setIsLoadingStudents] = useState<boolean>(false);
  const [isSubmittingAttendance, setIsSubmittingAttendance] = useState<boolean>(false);
  const [modalError, setModalError] = useState<string | null>(null);

  // Open modal to Start/Edit KBM & Absen
  const handleOpenAttendanceModal = async (sch: ScheduleItem) => {
    setCurrentScheduleForModal(sch);
    setModalError(null);
    setIsLoadingStudents(true);
    setIsAttendanceModalOpen(true);

    const existingSession = getSessionForSchedule(sch);
    if (existingSession) {
      setCurrentSessionId(existingSession.id);
      setTopicInput(existingSession.topic);
      setNotesInput(existingSession.notes || "");

      // Fetch detail attendance from DB
      try {
        const res = await fetch(`/api/kurikulum/presensi-kbm/${existingSession.id}`);
        const json = await res.json();
        if (json.success && json.data?.attendance) {
          setStudentRows(
            json.data.attendance.map((a: any) => ({
              student_id: a.student_id,
              student_nis: a.student_nis || "",
              student_nisn: a.student_nisn || "",
              student_name: a.student_name,
              student_class: a.student_class,
              status: a.status as "H" | "S" | "I" | "A",
              notes: a.notes || "",
            }))
          );
          setIsLoadingStudents(false);
          return;
        }
      } catch (err) {
        console.error("fetch session detail err:", err);
      }
    } else {
      setCurrentSessionId(null);
      setTopicInput("");
      setNotesInput("");
    }

    // New Attendance: fetch class students and set default Hadir (H)
    try {
      const res = await fetch(`/api/kurikulum/presensi-kbm/students?rombel=${encodeURIComponent(sch.className)}`);
      const json = await res.json();
      if (json.success && Array.isArray(json.data)) {
        setStudentRows(
          json.data.map((st: any) => ({
            student_id: st.id,
            student_nis: st.nis || "",
            student_nisn: st.nisn || "",
            student_name: st.nama_lengkap,
            student_class: st.rombel || sch.className,
            status: "H", // Default seluruh siswa otomatis Hadir (H)
            notes: "",
          }))
        );
      } else {
        setStudentRows([]);
      }
    } catch (err) {
      console.error("fetch students err:", err);
      setStudentRows([]);
    } finally {
      setIsLoadingStudents(false);
    }
  };

  // Quick action: Set Semua Hadir
  const handleSetAllPresent = () => {
    setStudentRows((prev) =>
      prev.map((s) => ({
        ...s,
        status: "H",
        notes: "",
      }))
    );
    showToast("Seluruh siswa telah diatur Hadir (H)", "info");
  };

  // Update single student status
  const handleUpdateStudentStatus = (index: number, status: "H" | "S" | "I" | "A") => {
    setStudentRows((prev) => {
      const copy = [...prev];
      copy[index] = {
        ...copy[index],
        status,
        notes: status === "A" && !copy[index].notes ? "Tanpa Keterangan (Alfa)" : copy[index].notes,
      };
      return copy;
    });
  };

  // Update single student notes
  const handleUpdateStudentNotes = (index: number, notes: string) => {
    setStudentRows((prev) => {
      const copy = [...prev];
      copy[index] = { ...copy[index], notes };
      return copy;
    });
  };

  // Save Attendance & Journal to DB
  const handleSaveAttendance = async () => {
    if (!topicInput.trim()) {
      setModalError("Pokok bahasan materi KBM wajib diisi.");
      return;
    }
    if (!currentScheduleForModal) return;

    try {
      setIsSubmittingAttendance(true);
      setModalError(null);

      const payload = {
        session: {
          id: currentSessionId || undefined,
          schedule_id: currentScheduleForModal.id,
          date: selectedDate,
          day_name: activeDayName,
          period_start: currentScheduleForModal.jam_mulai_ke || currentScheduleForModal.period,
          period_end: currentScheduleForModal.jam_selesai_ke || currentScheduleForModal.periodEnd || currentScheduleForModal.period,
          time_slot: currentScheduleForModal.timeSlot,
          subject_code: currentScheduleForModal.subjectCode,
          subject_name: currentScheduleForModal.subjectName,
          class_name: currentScheduleForModal.className,
          room_name: currentScheduleForModal.roomName,
          teacher_id: currentScheduleForModal.teacherId || selectedTeacherId,
          teacher_name: currentScheduleForModal.teacherName || activeTeacher?.fullName || "Guru Mapel",
          topic: topicInput.trim(),
          notes: notesInput.trim() || null,
          academic_year: selectedAcademicYear,
          semester: selectedSemester,
        },
        attendance: studentRows,
      };

      const res = await fetch("/api/kurikulum/presensi-kbm", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal menyimpan presensi & jurnal");
      }

      showToast(json.message || "Presensi & Jurnal KBM berhasil disimpan", "success");
      setIsAttendanceModalOpen(false);
      fetchSessions();
      fetchDailySchedules();
    } catch (err: any) {
      console.error("handleSaveAttendance error:", err);
      setModalError(err.message || "Terjadi kesalahan saat menyimpan");
    } finally {
      setIsSubmittingAttendance(false);
    }
  };

  // Delete session
  const handleDeleteSession = async (sessionId: number) => {
    if (!confirm("Apakah Anda yakin ingin menghapus catatan presensi & jurnal KBM ini?")) return;
    try {
      const res = await fetch(`/api/kurikulum/presensi-kbm/${sessionId}`, {
        method: "DELETE",
      });
      const json = await res.json();
      if (json.success) {
        showToast("Catatan presensi berhasil dihapus", "info");
        fetchSessions();
        fetchDailySchedules();
      } else {
        showToast(json.error || "Gagal menghapus", "error");
      }
    } catch {
      showToast("Terjadi kesalahan sistem saat menghapus", "error");
    }
  };

  // Summary counts in modal
  const modalCounts = useMemo(() => {
    let hadir = 0;
    let sakit = 0;
    let izin = 0;
    let alfa = 0;
    studentRows.forEach((s) => {
      if (s.status === "H") hadir++;
      else if (s.status === "S") sakit++;
      else if (s.status === "I") izin++;
      else if (s.status === "A") alfa++;
    });
    return { hadir, sakit, izin, alfa, total: studentRows.length };
  }, [studentRows]);

  // ==========================================
  // TAB 2: REKAPITULASI PRESENSI MAPEL
  // ==========================================
  const [filterSubject, setFilterSubject] = useState<string>("Matematika");
  const [filterClass, setFilterClass] = useState<string>("Semua Kelas");
  const [filterMonth, setFilterMonth] = useState<string>("Semua Bulan");
  const [tab2SearchTerm, setTab2SearchTerm] = useState<string>("");
  const [tab2CurrentPage, setTab2CurrentPage] = useState<number>(1);

  // Recap Data State
  interface StudentRecapItem {
    student_id: string;
    nisn: string;
    nis: string;
    student_name: string;
    student_class: string;
    hadir: number;
    sakit: number;
    izin: number;
    alfa: number;
    total: number;
    attendanceRate: number;
  }
  const [recapData, setRecapData] = useState<{
    totalSessions: number;
    averageAttendanceRate: number;
    frequentAlphaCount: number;
    totalStudents: number;
    studentRecaps: StudentRecapItem[];
    classComparison: Array<{ className: string; attendanceRate: number; totalEntries: number }>;
    statusDistribution: { hadir: number; sakit: number; izin: number; alfa: number };
  }>({
    totalSessions: 0,
    averageAttendanceRate: 0,
    frequentAlphaCount: 0,
    totalStudents: 0,
    studentRecaps: [],
    classComparison: [],
    statusDistribution: { hadir: 0, sakit: 0, izin: 0, alfa: 0 },
  });
  const [isLoadingRecap, setIsLoadingRecap] = useState<boolean>(false);

  const fetchRecap = useCallback(async () => {
    try {
      setIsLoadingRecap(true);
      const params = new URLSearchParams();
      if (filterSubject && filterSubject !== "Semua") params.set("subject_name", filterSubject);
      if (filterClass && filterClass !== "Semua Kelas") params.set("class_name", filterClass);
      if (filterMonth && filterMonth !== "Semua Bulan") params.set("month", filterMonth);
      params.set("academic_year", selectedAcademicYear);
      params.set("semester", selectedSemester);

      const res = await fetch(`/api/kurikulum/presensi-kbm/rekap?${params.toString()}`);
      const json = await res.json();
      if (json.success && json.data) {
        setRecapData(json.data);
      }
    } catch (err) {
      console.error("fetchRecap err:", err);
    } finally {
      setIsLoadingRecap(false);
    }
  }, [filterSubject, filterClass, filterMonth, selectedAcademicYear, selectedSemester]);

  useEffect(() => {
    if (activeTab === "rekapitulasi") {
      fetchRecap();
    }
  }, [activeTab, fetchRecap]);

  // Master Subjects for dropdown (dynamically populated from real teachers)
  const availableSubjectsList = useMemo(() => {
    const set = new Set<string>();
    teachersList.forEach((t) => {
      if (t.primarySubject && t.primarySubject.trim()) {
        set.add(t.primarySubject.trim());
      }
    });
    if (set.size === 0) {
      return [
        "Matematika",
        "Matematika Lanjutan",
        "Biologi",
        "Fisika",
        "Kimia",
        "Bahasa Indonesia",
        "Bahasa Inggris",
        "Informatika",
        "Pendidikan Agama Islam",
        "PPKn",
        "Sejarah Indonesia",
        "Ekonomi",
        "Sosiologi",
        "Geografi",
        "Seni Budaya",
        "PJOK",
        "Bahasa Sunda",
        "Bimbingan Konseling (BK)",
      ];
    }
    return Array.from(set).sort((a, b) => a.localeCompare(b, "id"));
  }, [teachersList]);

  // Auto-align Tab 2 filters for Guru Mapel
  useEffect(() => {
    if (isGuruMapel) {
      if (activeTeacher?.primarySubject) {
        setFilterSubject(activeTeacher.primarySubject);
      }
      if (
        taughtClasses.length > 0 &&
        (!taughtClasses.includes(filterClass) || filterClass === "Semua Kelas")
      ) {
        setFilterClass(taughtClasses[0]);
      }
    }
  }, [isGuruMapel, activeTeacher, taughtClasses, filterClass]);

  // Filtered Student Recaps with Search Term (Restricted to taughtClasses for Guru Mapel)
  const filteredStudentRecaps = useMemo(() => {
    return recapData.studentRecaps.filter((s) => {
      if (isGuruMapel && !taughtClasses.includes(s.student_class)) {
        return false;
      }
      const matchSearch =
        s.student_name.toLowerCase().includes(tab2SearchTerm.toLowerCase()) ||
        s.nis.includes(tab2SearchTerm) ||
        s.nisn.includes(tab2SearchTerm) ||
        s.student_class.toLowerCase().includes(tab2SearchTerm.toLowerCase());
      return matchSearch;
    });
  }, [recapData.studentRecaps, tab2SearchTerm, isGuruMapel, taughtClasses]);

  // Paginated Student Recaps (Limit 10 Data per page)
  const tab2PaginatedData = useMemo(() => {
    const startIndex = (tab2CurrentPage - 1) * 10;
    return filteredStudentRecaps.slice(startIndex, startIndex + 10);
  }, [filteredStudentRecaps, tab2CurrentPage]);

  // Student Detail Modal
  const [selectedStudentDetail, setSelectedStudentDetail] = useState<StudentRecapItem | null>(null);

  // ==========================================
  // EXPORT EXCEL (.xlsx)
  // ==========================================
  const handleExportExcel = () => {
    if (filteredStudentRecaps.length === 0) {
      showToast("Tidak ada data rekapitulasi untuk diekspor", "error");
      return;
    }

    const exportRows = filteredStudentRecaps.map((item, idx) => ({
      "No": idx + 1,
      "NISN": item.nisn,
      "NIS": item.nis,
      "Nama Siswa": item.student_name,
      "Kelas": item.student_class,
      "Mata Pelajaran": filterSubject,
      "Hadir (H)": item.hadir,
      "Sakit (S)": item.sakit,
      "Izin (I)": item.izin,
      "Alfa (A)": item.alfa,
      "Total Pertemuan": item.total,
      "% Kehadiran": `${item.attendanceRate}%`,
      "Tahun Ajaran": selectedAcademicYear,
      "Semester": selectedSemester,
    }));

    const ws = XLSX.utils.json_to_sheet(exportRows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Rekap Presensi KBM");
    XLSX.writeFile(
      wb,
      `Rekap_Presensi_KBM_${filterSubject.replace(/\s+/g, "_")}_${selectedAcademicYear.replace("/", "-")}.xlsx`
    );
    showToast("Berhasil mengekspor data ke file Excel (.xlsx)", "success");
  };

  // ==========================================
  // PRINT PDF MODAL & SIGNATORIES (WALI KELAS & GURU MAPEL)
  // ==========================================
  const [isPrintModalOpen, setIsPrintModalOpen] = useState<boolean>(false);
  const [printOrientation, setPrintOrientation] = useState<PrintOrientation>("landscape");
  const [selectedPrintHomeroomTeacherId, setSelectedPrintHomeroomTeacherId] = useState<string>("");
  const [selectedPrintSubjectTeacherId, setSelectedPrintSubjectTeacherId] = useState<string>("");

  // Target class for homeroom
  const printTargetClass = useMemo(() => {
    if (filterClass && filterClass !== "Semua Kelas") return filterClass;
    if (filteredStudentRecaps.length > 0 && filteredStudentRecaps[0]?.student_class) {
      return filteredStudentRecaps[0].student_class;
    }
    return "X-1";
  }, [filterClass, filteredStudentRecaps]);

  // Find default homeroom teacher based on printTargetClass
  const defaultHomeroomTeacher = useMemo(() => {
    // 1. Search in teachersList by homeroomClass
    const fromTeachers = teachersList.find((t) => t.homeroomClass === printTargetClass);
    if (fromTeachers) return fromTeachers;

    // 2. Search in homerooms from context
    const fromContext = homerooms?.find((h) => h.className === printTargetClass);
    if (fromContext && fromContext.teacherName) {
      const match = teachersList.find((t) => t.fullName === fromContext.teacherName || t.id === fromContext.teacherId);
      if (match) return match;
    }

    // 3. Fallback to any teacher assigned as homeroom
    return teachersList.find((t) => t.isHomeroomTeacher || Boolean(t.homeroomClass)) || teachersList[0] || null;
  }, [printTargetClass, teachersList, homerooms]);

  // Find default subject teacher based on filterSubject
  const defaultSubjectTeacher = useMemo(() => {
    // 1. If activeTeacher teaches this subject
    if (
      activeTeacher &&
      (activeTeacher.primarySubject?.toLowerCase() === filterSubject?.toLowerCase() ||
        activeTeacher.secondarySubjects?.some((s: string) => s.toLowerCase() === filterSubject?.toLowerCase()))
    ) {
      return activeTeacher;
    }

    // 2. Search in teachersList matching filterSubject
    const match = teachersList.find(
      (t) =>
        t.primarySubject?.toLowerCase() === filterSubject?.toLowerCase() ||
        t.secondarySubjects?.some((s: string) => s.toLowerCase() === filterSubject?.toLowerCase())
    );
    if (match) return match;

    return activeTeacher || teachersList[0] || null;
  }, [filterSubject, activeTeacher, teachersList]);

  // Auto-select defaults when modal opens or filters change
  useEffect(() => {
    if (defaultHomeroomTeacher && (!selectedPrintHomeroomTeacherId || !teachersList.some((t) => t.id === selectedPrintHomeroomTeacherId))) {
      setSelectedPrintHomeroomTeacherId(defaultHomeroomTeacher.id);
    }
  }, [defaultHomeroomTeacher, selectedPrintHomeroomTeacherId, teachersList]);

  useEffect(() => {
    if (defaultSubjectTeacher && (!selectedPrintSubjectTeacherId || !teachersList.some((t) => t.id === selectedPrintSubjectTeacherId))) {
      setSelectedPrintSubjectTeacherId(defaultSubjectTeacher.id);
    }
  }, [defaultSubjectTeacher, selectedPrintSubjectTeacherId, teachersList]);

  // When print modal is opened, re-sync with filterClass and filterSubject
  const handleOpenPrintModal = () => {
    if (defaultHomeroomTeacher) {
      setSelectedPrintHomeroomTeacherId(defaultHomeroomTeacher.id);
    }
    if (defaultSubjectTeacher) {
      setSelectedPrintSubjectTeacherId(defaultSubjectTeacher.id);
    }
    setIsPrintModalOpen(true);
  };

  const effectiveHomeroomTeacher = useMemo(() => {
    return (
      teachersList.find((t) => t.id === selectedPrintHomeroomTeacherId) ||
      defaultHomeroomTeacher
    );
  }, [teachersList, selectedPrintHomeroomTeacherId, defaultHomeroomTeacher]);

  const effectiveSubjectTeacher = useMemo(() => {
    return (
      teachersList.find((t) => t.id === selectedPrintSubjectTeacherId) ||
      defaultSubjectTeacher
    );
  }, [teachersList, selectedPrintSubjectTeacherId, defaultSubjectTeacher]);

  const getTeacherNIPLabel = (t: TeacherDetail | null) => {
    if (!t) return "NIPY. 10085";
    if (t.nip && t.nip.trim() && t.nip !== "-") return `NIP. ${t.nip}`;
    if (t.nuptk && t.nuptk.trim() && t.nuptk !== "-") return `NUPTK. ${t.nuptk}`;
    const numId = t.id ? t.id.replace(/\D/g, "") : "85";
    return `NIPY. 100${numId.padStart(2, "0")}`;
  };

  const handlePrintDocument = () => {
    triggerPrint(printOrientation);
  };

  return (
    <div className="space-y-6 pb-16">
      {/* Toast Notification */}
      {toast && (
        <div
          className={`fixed bottom-5 right-5 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl shadow-lg text-xs font-semibold text-white transition-all transform animate-in fade-in slide-in-from-bottom-2 ${
            toast.type === "success"
              ? "bg-emerald-600"
              : toast.type === "error"
              ? "bg-red-600"
              : "bg-blue-600"
          }`}
        >
          {toast.type === "success" && <CheckCircle2 className="w-4 h-4 shrink-0" />}
          {toast.type === "error" && <XCircle className="w-4 h-4 shrink-0" />}
          {toast.type === "info" && <Info className="w-4 h-4 shrink-0" />}
          <span>{toast.message}</span>
          <button
            type="button"
            onClick={() => setToast(null)}
            className="ml-2 hover:opacity-80 cursor-pointer"
          >
            <X className="w-3.5 h-3.5" />
          </button>
        </div>
      )}

      {/* Web Screen Interface */}
      <div className="space-y-6 print:hidden">
        {/* Header Utama & Academic Year Dropdown */}
        <div className="bg-white rounded-2xl border border-gray-100 p-5 sm:p-6 shadow-sm">
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-red-600 mb-1">
              <BookOpenCheck className="w-4 h-4 text-red-600" />
              <span>📖 MODUL KURIKULUM • BPI SMARTSCHOOL</span>
            </div>
            <h1 className="text-xl sm:text-2xl font-bold text-gray-900">
              Presensi & Jurnal KBM Guru Mapel
            </h1>
            <p className="text-xs sm:text-sm text-gray-500 mt-1">
              Pencatatan presensi siswa per jam pelajaran tatap muka, agenda jurnal mengajar harian guru, dan rekapitulasi kehadiran mata pelajaran SMA BPI 1 Bandung.
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-2.5">
            {/* Selector Semester */}
            <div className="flex items-center gap-1.5 bg-gray-50 px-3 py-1.5 rounded-xl border border-gray-200">
              <span className="text-xs font-semibold text-gray-600 shrink-0">Semester:</span>
              <select
                value={selectedSemester}
                onChange={(e) => setSelectedSemester(e.target.value as "Ganjil" | "Genap")}
                className="bg-transparent text-xs font-bold text-gray-800 focus:outline-none cursor-pointer py-1"
              >
                <option value="Ganjil">Ganjil</option>
                <option value="Genap">Genap</option>
              </select>
            </div>

            {/* Selector Tahun Ajaran */}
            <div className="flex items-center gap-1.5 bg-gray-50 px-3 py-1.5 rounded-xl border border-gray-200">
              <Calendar className="w-4 h-4 text-red-500 shrink-0" />
              <label htmlFor="kbm-academic-year-select" className="text-xs font-semibold text-gray-600 shrink-0">
                T.A:
              </label>
              <select
                id="kbm-academic-year-select"
                value={selectedAcademicYear}
                onChange={(e) => setSelectedAcademicYear(e.target.value)}
                className="bg-transparent text-xs font-bold text-gray-800 focus:outline-none cursor-pointer py-1 pr-1"
              >
                {ACADEMIC_YEARS.map((year) => (
                  <option key={year} value={year}>
                    {year} {year === getCurrentAcademicYear() ? "(Aktif)" : ""}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>
      </div>

      {/* Pill Button Tab Navigation */}
      <div className="flex flex-wrap items-center gap-2 p-1.5 bg-slate-100 rounded-2xl w-fit border border-slate-200/80 print:hidden">
        <button
          type="button"
          onClick={() => setActiveTab("presensi")}
          className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all ${
            activeTab === "presensi"
              ? "bg-blue-600 text-white shadow-sm"
              : "text-slate-600 hover:text-slate-900 hover:bg-white/60"
          }`}
        >
          <BookOpenCheck className="w-4 h-4" />
          <span>Presensi & Jurnal Mengajar</span>
          <span
            className={`px-2 py-0.5 rounded-full text-[10px] font-extrabold ${
              activeTab === "presensi" ? "bg-white/20 text-white" : "bg-slate-200 text-slate-700"
            }`}
          >
            {displayDaySchedules.length} Jadwal
          </span>
        </button>

        <button
          type="button"
          onClick={() => setActiveTab("rekapitulasi")}
          className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all ${
            activeTab === "rekapitulasi"
              ? "bg-blue-600 text-white shadow-sm"
              : "text-slate-600 hover:text-slate-900 hover:bg-white/60"
          }`}
        >
          <BarChart3 className="w-4 h-4" />
          <span>Rekapitulasi Presensi Mapel</span>
        </button>
      </div>

      {/* ========================================================= */}
      {/* TAB 1: PRESENSI & JURNAL MENGAJAR (HARI INI)              */}
      {/* ========================================================= */}
      {activeTab === "presensi" && (
        <div className="space-y-6">
          {/* Guru Mapel Role Banner */}
          {isGuruMapel && (
            <div className="p-3.5 bg-blue-50 border border-blue-200 rounded-xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-xs text-blue-800">
              <div className="flex items-center gap-2 font-medium">
                <span className="font-bold bg-blue-600 text-white px-2 py-0.5 rounded text-[10px] uppercase tracking-wide">
                  Hak Akses Guru Mapel
                </span>
                <span>
                  Presensi & Jurnal KBM untuk <strong>{activeTeacher?.fullName || user?.name}</strong> ({activeTeacher?.primarySubject || "Guru Mapel"}) — Rombel Pengampuan: <strong>{taughtClasses.join(", ")}</strong>
                </span>
              </div>
              <span className="text-[11px] text-blue-700 font-semibold bg-white px-2.5 py-1 rounded-md border border-blue-200">
                Mode Filter Kelas Mengajar Aktif
              </span>
            </div>
          )}

          {/* Filter Bar Guru & Tanggal KBM */}
          <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
              {/* Pemilih Guru Mapel */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5">
                  👤 Guru Pengampu Aktif
                </label>
                <select
                  value={selectedTeacherId}
                  onChange={(e) => setSelectedTeacherId(e.target.value)}
                  disabled={isGuruMapel}
                  className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer disabled:bg-slate-100 disabled:cursor-not-allowed"
                >
                  {isGuruMapel ? (
                    <option value={activeTeacher?.id || selectedTeacherId}>
                      {activeTeacher?.fullName || user?.name} — {activeTeacher?.primarySubject || "Guru Mapel"} (Akun Anda)
                    </option>
                  ) : teachersList.length === 0 ? (
                    <option value="">Memuat data guru...</option>
                  ) : (
                    teachersList.map((t) => (
                      <option key={t.id} value={t.id}>
                        {t.fullName} — {t.primarySubject || "Guru Mapel"}
                      </option>
                    ))
                  )}
                </select>
              </div>

              {/* Pemilih Tanggal KBM */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5">
                  📅 Tanggal Pelaksanaan KBM
                </label>
                <div className="flex items-center gap-2">
                  <input
                    type="date"
                    value={selectedDate}
                    onChange={(e) => setSelectedDate(e.target.value)}
                    className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer"
                  />
                  <button
                    type="button"
                    onClick={() => setSelectedDate(getTodayDateString())}
                    className="px-3 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold shrink-0 transition-colors cursor-pointer"
                    title="Kembali ke Hari Ini"
                  >
                    Hari Ini
                  </button>
                </div>
              </div>

              {/* Status Hari & Info Ringkas */}
              <div className="bg-blue-50/70 border border-blue-200/70 p-3 rounded-xl flex items-center justify-between">
                <div>
                  <div className="text-[11px] font-semibold text-blue-700">Hari Terpilih:</div>
                  <div className="text-sm font-extrabold text-blue-900">
                    {formatDateID(selectedDate)}
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => {
                    fetchSessions();
                    fetchDailySchedules();
                  }}
                  className="p-2 bg-white hover:bg-blue-100 text-blue-700 rounded-lg shadow-xs transition-colors cursor-pointer"
                  title="Sinkronkan Jadwal & Presensi"
                >
                  <RefreshCw className={`w-4 h-4 ${isLoadingSessions || isLoadingSchedules ? "animate-spin" : ""}`} />
                </button>
              </div>
            </div>
          </div>

          {/* Section Heading */}
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-base font-bold text-slate-900 flex items-center gap-2">
                <CalendarDays className="w-5 h-5 text-blue-600" />
                <span>Jadwal Mengajar {activeTeacher?.fullName} pada Hari {activeDayName}</span>
              </h2>
              <p className="text-xs text-slate-500 mt-0.5">
                Pilih sesi pelajaran di bawah ini untuk memulai presensi kelas serta pengisian jurnal materi mengajar.
              </p>
            </div>
          </div>

          {/* Grid Kartu Jadwal Mengajar */}
          {isLoadingSchedules ? (
            <div className="bg-white rounded-2xl border border-slate-200 p-12 text-center text-slate-400">
              <RefreshCw className="w-10 h-10 text-blue-500 animate-spin mx-auto mb-3" />
              <p className="font-bold text-slate-700 text-sm">Memuat Jadwal Mengajar Real-Time...</p>
              <p className="text-xs text-slate-400 mt-1">Mengambil data dari Master Jadwal Pelajaran SMA BPI 1</p>
            </div>
          ) : displayDaySchedules.length === 0 ? (
            <div className="bg-white rounded-2xl border border-slate-200 p-12 text-center text-slate-400">
              <CalendarDays className="w-12 h-12 text-slate-300 mx-auto mb-3" />
              <p className="font-bold text-slate-700 text-sm">Tidak ada jadwal mengajar untuk guru ini pada hari terpilih</p>
              <p className="text-xs text-slate-400 mt-1 max-w-md mx-auto">
                {isGuruMapel
                  ? `Tidak ada slot jadwal KBM untuk kelas pengampuan Anda (${taughtClasses.join(", ")}) pada hari ${activeDayName}.`
                  : `Guru terpilih tidak memiliki slot jadwal KBM pada hari ${activeDayName}. Anda dapat mengubah tanggal atau memilih guru lainnya di atas.`}
              </p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
              {displayDaySchedules.map((sch) => {
                const sessionRecord = getSessionForSchedule(sch);
                const isAttended = Boolean(sessionRecord);

                return (
                  <div
                    key={sch.id}
                    className={`bg-white rounded-2xl border transition-all duration-200 overflow-hidden shadow-xs hover:shadow-md flex flex-col justify-between ${
                      isAttended
                        ? "border-emerald-200 ring-1 ring-emerald-500/10"
                        : "border-slate-200"
                    }`}
                  >
                    {/* Top Header Card */}
                    <div className="p-5 pb-3">
                      <div className="flex items-start justify-between gap-2 mb-2">
                        <div className="flex items-center gap-2">
                          <span className="px-2.5 py-1 bg-blue-50 text-blue-700 font-bold rounded-lg text-xs">
                            Jam Ke-{sch.jam_mulai_ke || sch.period}
                            {sch.jam_selesai_ke && sch.jam_selesai_ke !== (sch.jam_mulai_ke || sch.period)
                              ? ` - ${sch.jam_selesai_ke}`
                              : ""}{" "}
                            ({sch.durasi_jp || 1} JP)
                          </span>
                          <span className="text-xs font-semibold text-slate-500 flex items-center gap-1">
                            <Clock className="w-3.5 h-3.5" />
                            {sch.timeSlot}
                          </span>
                        </div>

                        {/* Status Badge */}
                        {isAttended ? (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full text-[11px] font-bold">
                            <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" />
                            [Sudah Diabsen]
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-[11px] font-bold">
                            <Clock className="w-3.5 h-3.5 text-amber-600" />
                            [Belum Diabsen]
                          </span>
                        )}
                      </div>

                      <h3 className="text-base font-extrabold text-slate-900 mt-2">
                        {sch.subjectName}
                      </h3>

                      <div className="flex flex-wrap items-center gap-3 mt-2 text-xs text-slate-600">
                        <div className="flex items-center gap-1 font-bold text-slate-800 bg-slate-100 px-2.5 py-0.5 rounded-md">
                          <GraduationCap className="w-3.5 h-3.5 text-blue-600" />
                          Kelas {sch.className}
                        </div>
                        <div className="flex items-center gap-1 text-slate-500">
                          <Building className="w-3.5 h-3.5" />
                          {sch.roomName}
                        </div>
                      </div>

                      {/* Detail Jurnal jika sudah diabsen */}
                      {isAttended && sessionRecord && (
                        <div className="mt-4 p-3 bg-slate-50 rounded-xl border border-slate-100 space-y-1.5 text-xs">
                          <div>
                            <span className="text-slate-400 font-medium">Materi: </span>
                            <span className="font-semibold text-slate-800">
                              {sessionRecord.topic}
                            </span>
                          </div>
                          {sessionRecord.notes && (
                            <div className="text-[11px] text-slate-500 line-clamp-2">
                              &quot;{sessionRecord.notes}&quot;
                            </div>
                          )}

                          {/* Mini Stat */}
                          <div className="flex items-center gap-2 pt-1 border-t border-slate-200/70 text-[11px]">
                            <span className="text-emerald-700 font-bold">
                              H: {sessionRecord.present_count}
                            </span>
                            <span className="text-slate-400">•</span>
                            <span className="text-amber-700 font-bold">
                              S: {sessionRecord.sick_count}
                            </span>
                            <span className="text-slate-400">•</span>
                            <span className="text-blue-700 font-bold">
                              I: {sessionRecord.permit_count}
                            </span>
                            <span className="text-slate-400">•</span>
                            <span className="text-rose-700 font-bold">
                              A: {sessionRecord.absent_count}
                            </span>
                          </div>
                        </div>
                      )}
                    </div>

                    {/* Bottom Action Card */}
                    <div className="p-4 pt-0">
                      {isAttended && sessionRecord ? (
                        <div className="flex items-center gap-2">
                          <button
                            type="button"
                            onClick={() => handleOpenAttendanceModal(sch)}
                            className="flex-1 flex items-center justify-center gap-1.5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold transition-colors cursor-pointer"
                          >
                            <Edit3 className="w-3.5 h-3.5 text-slate-600" />
                            <span>Edit Presensi & Jurnal</span>
                          </button>
                          <button
                            type="button"
                            onClick={() => handleDeleteSession(sessionRecord.id)}
                            className="p-2.5 bg-rose-50 hover:bg-rose-100 text-rose-600 rounded-xl transition-colors cursor-pointer"
                            title="Hapus Sesi"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      ) : (
                        <button
                          type="button"
                          onClick={() => handleOpenAttendanceModal(sch)}
                          className="w-full flex items-center justify-center gap-2 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer"
                        >
                          <Edit3 className="w-4 h-4" />
                          <span>Mulai KBM & Absen</span>
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* ========================================================= */}
      {/* TAB 2: REKAPITULASI PRESENSI MAPEL                        */}
      {/* ========================================================= */}
      {activeTab === "rekapitulasi" && (
        <div className="space-y-6">
          {/* Guru Mapel Role Banner */}
          {isGuruMapel && (
            <div className="p-3.5 bg-blue-50 border border-blue-200 rounded-xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-xs text-blue-800">
              <div className="flex items-center gap-2 font-medium">
                <span className="font-bold bg-blue-600 text-white px-2 py-0.5 rounded text-[10px] uppercase tracking-wide">
                  Hak Akses Guru Mapel
                </span>
                <span>
                  Rekapitulasi Presensi untuk <strong>{activeTeacher?.fullName || user?.name}</strong> ({filterSubject}) — Rombel Pengampuan: <strong>{taughtClasses.join(", ")}</strong>
                </span>
              </div>
              <span className="text-[11px] text-blue-700 font-semibold bg-white px-2.5 py-1 rounded-md border border-blue-200">
                Mode Filter Rombel Pengampuan
              </span>
            </div>
          )}

          {/* Multi-Filter Bar */}
          <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {/* Filter Mapel */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5">
                  📚 Mata Pelajaran
                </label>
                <select
                  value={filterSubject}
                  onChange={(e) => setFilterSubject(e.target.value)}
                  className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer"
                >
                  {availableSubjectsList.map((m) => (
                    <option key={m} value={m}>
                      {m}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Kelas */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5">
                  🏫 Kelas / Rombel
                </label>
                <select
                  value={filterClass}
                  onChange={(e) => setFilterClass(e.target.value)}
                  className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer"
                >
                  {isGuruMapel ? (
                    taughtClasses.map((c) => (
                      <option key={c} value={c}>
                        Kelas {c}
                      </option>
                    ))
                  ) : (
                    <>
                      <option value="Semua Kelas">Semua Kelas</option>
                      {mockAvailableClasses.map((c) => (
                        <option key={c} value={c}>
                          Kelas {c}
                        </option>
                      ))}
                    </>
                  )}
                </select>
              </div>

              {/* Filter Bulan / Periode */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5">
                  🗓️ Bulan / Periode
                </label>
                <select
                  value={filterMonth}
                  onChange={(e) => setFilterMonth(e.target.value)}
                  className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer"
                >
                  {MONTHS_LIST.map((m) => (
                    <option key={m.value} value={m.value}>
                      {m.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Tahun Ajaran */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5">
                  🎓 Tahun Ajaran
                </label>
                <select
                  value={selectedAcademicYear}
                  onChange={(e) => setSelectedAcademicYear(e.target.value)}
                  className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer"
                >
                  {ACADEMIC_YEARS.map((y) => (
                    <option key={y} value={y}>
                      T.A. {y}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          {/* Metric Cards Summary */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <StatCard
              title="Total Pertemuan KBM"
              value={`${recapData.totalSessions} Sesi`}
              icon={CalendarDays}
              description={`Pertemuan ${filterSubject} terdata`}
              iconColor="blue"
            />
            <StatCard
              title="Rata-rata Kehadiran"
              value={`${recapData.averageAttendanceRate}%`}
              icon={UserCheck}
              description="Tingkat partisipasi hadir siswa"
              iconColor="success"
            />
            <StatCard
              title="Siswa Indisipliner"
              value={`${recapData.frequentAlphaCount} Siswa`}
              icon={AlertTriangle}
              description="Akumulasi ketidakhadiran Alfa > 3x"
              iconColor={recapData.frequentAlphaCount > 0 ? "danger" : "warning"}
            />
            <StatCard
              title="Total Siswa Terdata"
              value={`${recapData.totalStudents} Siswa`}
              icon={Users}
              description="Jumlah siswa dalam cakupan filter"
              iconColor="purple"
            />
          </div>

          {/* Visualisasi Grafik Tingkat Kehadiran Antar Kelas & Proporsi Status */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
            {/* Bar Chart Tingkat Kehadiran per Kelas */}
            <div className="lg:col-span-2 bg-white p-5 rounded-2xl border border-slate-200 shadow-xs">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-2">
                  <BarChart3 className="w-5 h-5 text-blue-600" />
                  <h3 className="text-sm font-bold text-slate-900">
                    Tingkat Kehadiran Siswa per Kelas ({filterSubject})
                  </h3>
                </div>
                <span className="text-xs text-slate-400 font-medium">Berdasarkan data KBM</span>
              </div>

              {recapData.classComparison.length === 0 ? (
                <div className="h-48 flex items-center justify-center text-xs text-slate-400">
                  Belum ada data sesi untuk menampilkan grafik perbandingan kelas.
                </div>
              ) : (
                <div className="space-y-3 pt-2">
                  {recapData.classComparison.map((c) => (
                    <div key={c.className} className="space-y-1">
                      <div className="flex justify-between text-xs font-semibold">
                        <span className="text-slate-700">Kelas {c.className}</span>
                        <span className="text-blue-700">{c.attendanceRate}% Hadir</span>
                      </div>
                      <div className="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
                        <div
                          className="bg-blue-600 h-3 rounded-full transition-all duration-500"
                          style={{ width: `${c.attendanceRate}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Proporsi Status Kehadiran */}
            <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs">
              <div className="flex items-center gap-2 mb-4">
                <PieChart className="w-5 h-5 text-emerald-600" />
                <h3 className="text-sm font-bold text-slate-900">
                  Distribusi Status Kehadiran
                </h3>
              </div>

              <div className="space-y-3 pt-2">
                <div className="p-3 bg-emerald-50/60 rounded-xl border border-emerald-100 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="w-3 h-3 rounded-full bg-emerald-600" />
                    <span className="text-xs font-bold text-emerald-900">Hadir (H)</span>
                  </div>
                  <span className="text-xs font-extrabold text-emerald-700">
                    {recapData.statusDistribution.hadir}
                  </span>
                </div>

                <div className="p-3 bg-amber-50/60 rounded-xl border border-amber-100 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="w-3 h-3 rounded-full bg-amber-500" />
                    <span className="text-xs font-bold text-amber-900">Sakit (S)</span>
                  </div>
                  <span className="text-xs font-extrabold text-amber-700">
                    {recapData.statusDistribution.sakit}
                  </span>
                </div>

                <div className="p-3 bg-blue-50/60 rounded-xl border border-blue-100 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="w-3 h-3 rounded-full bg-blue-500" />
                    <span className="text-xs font-bold text-blue-900">Izin (I)</span>
                  </div>
                  <span className="text-xs font-extrabold text-blue-700">
                    {recapData.statusDistribution.izin}
                  </span>
                </div>

                <div className="p-3 bg-rose-50/60 rounded-xl border border-rose-100 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="w-3 h-3 rounded-full bg-rose-600" />
                    <span className="text-xs font-bold text-rose-900">Alfa (A)</span>
                  </div>
                  <span className="text-xs font-extrabold text-rose-700">
                    {recapData.statusDistribution.alfa}
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Action Bar Atas & Search */}
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white p-4 rounded-2xl border border-slate-200 shadow-xs">
            {/* Search Input */}
            <div className="relative w-full sm:w-72">
              <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                value={tab2SearchTerm}
                onChange={(e) => {
                  setTab2SearchTerm(e.target.value);
                  setTab2CurrentPage(1);
                }}
                placeholder="Cari nama siswa, NIS, atau kelas..."
                className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              />
              {tab2SearchTerm && (
                <button
                  type="button"
                  onClick={() => setTab2SearchTerm("")}
                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                >
                  <X className="w-3.5 h-3.5" />
                </button>
              )}
            </div>

            {/* Tombol Ekspor Excel & Cetak PDF */}
            <div className="flex items-center gap-2.5">
              <button
                type="button"
                onClick={handleExportExcel}
                className="flex items-center gap-1.5 px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer"
              >
                <FileSpreadsheet className="w-4 h-4" />
                <span>Ekspor Excel (.xlsx)</span>
              </button>

              <button
                type="button"
                onClick={handleOpenPrintModal}
                className="flex items-center gap-1.5 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer"
              >
                <Printer className="w-4 h-4" />
                <span>Cetak PDF Rekap KBM</span>
              </button>
            </div>
          </div>

          {/* Tabel Rekapitulasi Berpaginasi (Limit 10 Data) */}
          <div className="bg-white rounded-2xl border border-slate-200 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 text-slate-600 font-bold border-b border-slate-200 uppercase tracking-wider text-[11px]">
                    <th className="py-3.5 px-3 text-center w-12">No</th>
                    <th className="py-3.5 px-3">NISN</th>
                    <th className="py-3.5 px-3">Nama Siswa</th>
                    <th className="py-3.5 px-3">Kelas</th>
                    <th className="py-3.5 px-3 text-center text-emerald-700">Hadir (H)</th>
                    <th className="py-3.5 px-3 text-center text-amber-700">Sakit (S)</th>
                    <th className="py-3.5 px-3 text-center text-blue-700">Izin (I)</th>
                    <th className="py-3.5 px-3 text-center text-rose-700">Alfa (A)</th>
                    <th className="py-3.5 px-3 text-center">% Kehadiran</th>
                    <th className="py-3.5 px-3 text-center w-24">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 text-slate-700">
                  {isLoadingRecap ? (
                    <tr>
                      <td colSpan={10} 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 data rekapitulasi kehadiran siswa...</span>
                        </div>
                      </td>
                    </tr>
                  ) : tab2PaginatedData.length === 0 ? (
                    <tr>
                      <td colSpan={10} className="py-12 text-center text-slate-400">
                        <div className="flex flex-col items-center justify-center gap-2">
                          <UserX className="w-10 h-10 text-slate-300" />
                          <p className="font-semibold text-slate-600">
                            Tidak Ada Data Rekapitulasi
                          </p>
                          <p className="text-[11px] text-slate-400 max-w-sm">
                            Belum ada riwayat sesi KBM yang sesuai dengan kriteria filter mata pelajaran dan kelas saat ini.
                          </p>
                        </div>
                      </td>
                    </tr>
                  ) : (
                    tab2PaginatedData.map((item, idx) => {
                      const rowNum = (tab2CurrentPage - 1) * 10 + idx + 1;
                      const isHighAlpha = item.alfa > 3;

                      return (
                        <tr
                          key={item.student_id}
                          className={`hover:bg-slate-50/60 transition-colors ${
                            isHighAlpha ? "bg-rose-50/30" : ""
                          }`}
                        >
                          <td className="py-3 px-3 text-center font-medium text-slate-500">
                            {rowNum}
                          </td>
                          <td className="py-3 px-3 font-mono text-[11px] text-slate-600">
                            {item.nisn}
                          </td>
                          <td className="py-3 px-3 font-bold text-slate-900">
                            <div className="flex items-center gap-1.5">
                              <span>{item.student_name}</span>
                              {isHighAlpha && (
                                <span
                                  className="px-1.5 py-0.5 bg-rose-100 text-rose-700 rounded text-[10px] font-bold"
                                  title="Indisipliner: Alfa melebihi 3 kali"
                                >
                                  Alfa &gt; 3x
                                </span>
                              )}
                            </div>
                          </td>
                          <td className="py-3 px-3 font-semibold text-slate-700">
                            {item.student_class}
                          </td>
                          <td className="py-3 px-3 text-center font-bold text-emerald-700">
                            {item.hadir}
                          </td>
                          <td className="py-3 px-3 text-center font-bold text-amber-700">
                            {item.sakit}
                          </td>
                          <td className="py-3 px-3 text-center font-bold text-blue-700">
                            {item.izin}
                          </td>
                          <td className="py-3 px-3 text-center font-extrabold text-rose-700">
                            {item.alfa}
                          </td>
                          <td className="py-3 px-3 text-center">
                            <span
                              className={`px-2 py-0.5 rounded-full font-bold text-[11px] ${
                                item.attendanceRate >= 85
                                  ? "bg-emerald-100 text-emerald-800"
                                  : item.attendanceRate >= 75
                                  ? "bg-amber-100 text-amber-800"
                                  : "bg-rose-100 text-rose-800"
                              }`}
                            >
                              {item.attendanceRate}%
                            </span>
                          </td>
                          <td className="py-3 px-3 text-center">
                            <button
                              type="button"
                              onClick={() => setSelectedStudentDetail(item)}
                              className="px-2.5 py-1 bg-slate-100 hover:bg-blue-50 hover:text-blue-700 text-slate-700 rounded-lg font-bold text-[11px] transition-colors cursor-pointer"
                            >
                              Detail
                            </button>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Controls (10 Data per Halaman) */}
            <div className="p-4 border-t border-slate-100 flex justify-between items-center text-xs">
              <span className="text-slate-500">
                Menampilkan {filteredStudentRecaps.length > 0 ? (tab2CurrentPage - 1) * 10 + 1 : 0} -{" "}
                {Math.min(tab2CurrentPage * 10, filteredStudentRecaps.length)} dari{" "}
                {filteredStudentRecaps.length} siswa
              </span>
              <Pagination
                currentPage={tab2CurrentPage}
                totalItems={filteredStudentRecaps.length}
                itemsPerPage={10}
                onPageChange={(page) => setTab2CurrentPage(page)}
              />
            </div>
          </div>
        </div>
      )}

      {/* ========================================================= */}
      {/* MODAL INPUT PRESENSI KBM & JURNAL MENGAJAR                */}
      {/* ========================================================= */}
      <Modal
        isOpen={isAttendanceModalOpen}
        onClose={() => setIsAttendanceModalOpen(false)}
        title={
          currentSessionId
            ? `Edit Presensi & Jurnal KBM — Kelas ${currentScheduleForModal?.className}`
            : `Presensi & Jurnal Mengajar Baru — Kelas ${currentScheduleForModal?.className}`
        }
        maxWidth="max-w-4xl"
      >
        <div className="space-y-5">
          {modalError && (
            <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs font-semibold text-rose-700 flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <span>{modalError}</span>
            </div>
          )}

          {/* Info Header Sesi */}
          <div className="p-4 bg-blue-50/70 border border-blue-200/60 rounded-2xl flex flex-wrap items-center justify-between gap-3 text-xs">
            <div>
              <span className="text-blue-700 font-bold uppercase tracking-wider text-[10px]">
                Mata Pelajaran & Kelas:
              </span>
              <div className="text-sm font-extrabold text-blue-950">
                {currentScheduleForModal?.subjectName} — Kelas {currentScheduleForModal?.className}
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div>
                <span className="text-blue-700 font-bold uppercase tracking-wider text-[10px]">
                  Jam Pelajaran:
                </span>
                <div className="font-bold text-slate-800">
                  Jam Ke-{currentScheduleForModal?.jam_mulai_ke || currentScheduleForModal?.period}
                  {currentScheduleForModal?.jam_selesai_ke && currentScheduleForModal?.jam_selesai_ke !== (currentScheduleForModal?.jam_mulai_ke || currentScheduleForModal?.period)
                    ? ` - ${currentScheduleForModal.jam_selesai_ke}`
                    : ""}{" "}
                  ({currentScheduleForModal?.durasi_jp || 1} JP) • {currentScheduleForModal?.timeSlot}
                </div>
              </div>

              <div>
                <span className="text-blue-700 font-bold uppercase tracking-wider text-[10px]">
                  Tanggal KBM:
                </span>
                <div className="font-bold text-slate-800">
                  {formatDateID(selectedDate)}
                </div>
              </div>
            </div>
          </div>

          {/* Bagian A: Input Jurnal KBM */}
          <div className="space-y-3 bg-white p-4 rounded-xl border border-slate-200">
            <div className="flex items-center gap-2 text-xs font-bold text-slate-900 border-b border-slate-100 pb-2">
              <BookOpenCheck className="w-4 h-4 text-blue-600" />
              <span>A. JURNAL MENGAJAR GURU (AGENDA KBM)</span>
            </div>

            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1">
                Judul / Pokok Bahasan Materi <span className="text-rose-500">*</span>
              </label>
              <input
                type="text"
                value={topicInput}
                onChange={(e) => setTopicInput(e.target.value)}
                placeholder="Contoh: Sistem Persamaan Linear Tiga Variabel (Metode Gabungan / Eliminasi)"
                className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              />
            </div>

            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1">
                Catatan Pembelajaran / Jurnal KBM (Opsional)
              </label>
              <textarea
                value={notesInput}
                onChange={(e) => setNotesInput(e.target.value)}
                rows={2}
                placeholder="Tuliskan catatan kemajuan materi, metode pembelajaran, atau kejadian khusus selama KBM..."
                className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-none"
              />
            </div>
          </div>

          {/* Bagian B: Input Presensi Siswa */}
          <div className="space-y-3 bg-white p-4 rounded-xl border border-slate-200">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-100 pb-2">
              <div className="flex items-center gap-2 text-xs font-bold text-slate-900">
                <Users className="w-4 h-4 text-emerald-600" />
                <span>B. PRESENSI SISWA KELAS {currentScheduleForModal?.className}</span>
              </div>

              {/* Quick Action: Set Semua Hadir */}
              <button
                type="button"
                onClick={handleSetAllPresent}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 rounded-lg text-xs font-bold border border-emerald-200 transition-colors cursor-pointer"
              >
                <Check className="w-3.5 h-3.5" />
                <span>Set Semua Hadir (H)</span>
              </button>
            </div>

            {/* Quick Summary Pill Counters */}
            <div className="flex flex-wrap items-center gap-2 text-xs">
              <span className="px-2.5 py-1 bg-slate-100 text-slate-700 font-bold rounded-lg">
                Total: {modalCounts.total}
              </span>
              <span className="px-2.5 py-1 bg-emerald-100 text-emerald-800 font-bold rounded-lg">
                Hadir: {modalCounts.hadir}
              </span>
              <span className="px-2.5 py-1 bg-amber-100 text-amber-800 font-bold rounded-lg">
                Sakit: {modalCounts.sakit}
              </span>
              <span className="px-2.5 py-1 bg-blue-100 text-blue-800 font-bold rounded-lg">
                Izin: {modalCounts.izin}
              </span>
              <span className="px-2.5 py-1 bg-rose-100 text-rose-800 font-bold rounded-lg">
                Alfa: {modalCounts.alfa}
              </span>
            </div>

            {/* Warning Callout Integrasi BK jika ada siswa Alfa */}
            {modalCounts.alfa > 0 && (
              <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-800 flex items-center gap-2 font-medium">
                <ShieldAlert className="w-4 h-4 text-rose-600 shrink-0" />
                <span>
                  <strong>Perhatian:</strong> Terdapat {modalCounts.alfa} siswa dengan status Alfa (Tanpa Keterangan). Pastikan data kehadiran telah diverifikasi.
                </span>
              </div>
            )}

            {/* Tabel Presensi Siswa */}
            <div className="max-h-80 overflow-y-auto border border-slate-200 rounded-xl">
              <table className="w-full text-left border-collapse text-xs">
                <thead className="bg-slate-50 sticky top-0 z-10 text-slate-600 font-bold border-b border-slate-200 text-[11px]">
                  <tr>
                    <th className="py-2.5 px-3 text-center w-10">No</th>
                    <th className="py-2.5 px-3">NISN / NIS</th>
                    <th className="py-2.5 px-3">Nama Siswa</th>
                    <th className="py-2.5 px-3 text-center w-48">Status Kehadiran</th>
                    <th className="py-2.5 px-3">Catatan / Alasan</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {isLoadingStudents ? (
                    <tr>
                      <td colSpan={5} className="py-8 text-center text-slate-400">
                        Memuat daftar siswa kelas {currentScheduleForModal?.className}...
                      </td>
                    </tr>
                  ) : studentRows.length === 0 ? (
                    <tr>
                      <td colSpan={5} className="py-8 text-center text-slate-400">
                        Tidak ada siswa terdaftar di kelas ini.
                      </td>
                    </tr>
                  ) : (
                    studentRows.map((st, idx) => (
                      <tr
                        key={st.student_id || idx}
                        className={st.status === "A" ? "bg-rose-50/40" : ""}
                      >
                        <td className="py-2 px-3 text-center text-slate-500 font-medium">
                          {idx + 1}
                        </td>
                        <td className="py-2 px-3 font-mono text-[11px] text-slate-600">
                          {st.student_nisn || st.student_nis}
                        </td>
                        <td className="py-2 px-3 font-bold text-slate-900">
                          {st.student_name}
                        </td>
                        <td className="py-2 px-3 text-center">
                          {/* 4 Status Pills Radio */}
                          <div className="inline-flex items-center gap-1 bg-slate-100 p-0.5 rounded-lg">
                            <button
                              type="button"
                              onClick={() => handleUpdateStudentStatus(idx, "H")}
                              className={`px-2 py-1 rounded text-xs font-extrabold cursor-pointer transition-all ${
                                st.status === "H"
                                  ? "bg-emerald-600 text-white shadow-xs"
                                  : "text-slate-600 hover:text-emerald-700"
                              }`}
                              title="Hadir"
                            >
                              H
                            </button>
                            <button
                              type="button"
                              onClick={() => handleUpdateStudentStatus(idx, "S")}
                              className={`px-2 py-1 rounded text-xs font-extrabold cursor-pointer transition-all ${
                                st.status === "S"
                                  ? "bg-amber-500 text-white shadow-xs"
                                  : "text-slate-600 hover:text-amber-700"
                              }`}
                              title="Sakit"
                            >
                              S
                            </button>
                            <button
                              type="button"
                              onClick={() => handleUpdateStudentStatus(idx, "I")}
                              className={`px-2 py-1 rounded text-xs font-extrabold cursor-pointer transition-all ${
                                st.status === "I"
                                  ? "bg-blue-600 text-white shadow-xs"
                                  : "text-slate-600 hover:text-blue-700"
                              }`}
                              title="Izin"
                            >
                              I
                            </button>
                            <button
                              type="button"
                              onClick={() => handleUpdateStudentStatus(idx, "A")}
                              className={`px-2 py-1 rounded text-xs font-extrabold cursor-pointer transition-all ${
                                st.status === "A"
                                  ? "bg-rose-600 text-white shadow-xs"
                                  : "text-slate-600 hover:text-rose-700"
                              }`}
                              title="Alfa (Tanpa Keterangan)"
                            >
                              A
                            </button>
                          </div>
                        </td>
                        <td className="py-2 px-3">
                          <input
                            type="text"
                            value={st.notes}
                            onChange={(e) => handleUpdateStudentNotes(idx, e.target.value)}
                            placeholder={st.status === "A" ? "Alfa / Tanpa Keterangan" : "Catatan..."}
                            className="w-full px-2 py-1 bg-slate-50 border border-slate-200 rounded text-xs font-normal text-slate-800 placeholder-slate-300 focus:outline-none focus:ring-1 focus:ring-blue-500"
                          />
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>

          {/* Modal Footer Actions */}
          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-200">
            <button
              type="button"
              onClick={() => setIsAttendanceModalOpen(false)}
              className="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="button"
              onClick={handleSaveAttendance}
              disabled={isSubmittingAttendance}
              className="flex items-center gap-1.5 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer"
            >
              <Save className="w-4 h-4" />
              <span>{isSubmittingAttendance ? "Menyimpan..." : "Simpan Presensi & Jurnal"}</span>
            </button>
          </div>
        </div>
      </Modal>

      {/* ========================================================= */}
      {/* MODAL DETAIL SISWA KBM                                    */}
      {/* ========================================================= */}
      {selectedStudentDetail && (
        <Modal
          isOpen={Boolean(selectedStudentDetail)}
          onClose={() => setSelectedStudentDetail(null)}
          title={`Detail Kehadiran Siswa — ${selectedStudentDetail.student_name}`}
          maxWidth="max-w-md"
        >
          <div className="space-y-4">
            <div className="p-4 bg-slate-50 rounded-2xl border border-slate-200 space-y-2 text-xs">
              <div className="flex justify-between">
                <span className="text-slate-500">Nama Siswa:</span>
                <span className="font-bold text-slate-900">{selectedStudentDetail.student_name}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">NISN / NIS:</span>
                <span className="font-mono text-slate-800">{selectedStudentDetail.nisn} / {selectedStudentDetail.nis}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Kelas:</span>
                <span className="font-bold text-slate-800">{selectedStudentDetail.student_class}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Mata Pelajaran:</span>
                <span className="font-bold text-blue-700">{filterSubject}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Persentase Kehadiran:</span>
                <span className="font-extrabold text-emerald-700">{selectedStudentDetail.attendanceRate}%</span>
              </div>
            </div>

            <div className="grid grid-cols-4 gap-2 text-center text-xs">
              <div className="p-2.5 bg-emerald-50 rounded-xl border border-emerald-200">
                <div className="text-[10px] text-emerald-700 font-bold">Hadir</div>
                <div className="text-base font-extrabold text-emerald-900">{selectedStudentDetail.hadir}</div>
              </div>
              <div className="p-2.5 bg-amber-50 rounded-xl border border-amber-200">
                <div className="text-[10px] text-amber-700 font-bold">Sakit</div>
                <div className="text-base font-extrabold text-amber-900">{selectedStudentDetail.sakit}</div>
              </div>
              <div className="p-2.5 bg-blue-50 rounded-xl border border-blue-200">
                <div className="text-[10px] text-blue-700 font-bold">Izin</div>
                <div className="text-base font-extrabold text-blue-900">{selectedStudentDetail.izin}</div>
              </div>
              <div className="p-2.5 bg-rose-50 rounded-xl border border-rose-200">
                <div className="text-[10px] text-rose-700 font-bold">Alfa</div>
                <div className="text-base font-extrabold text-rose-900">{selectedStudentDetail.alfa}</div>
              </div>
            </div>

            {selectedStudentDetail.alfa > 3 && (
              <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-800 flex items-start gap-2">
                <ShieldAlert className="w-4 h-4 text-rose-600 shrink-0 mt-0.5" />
                <div>
                  <strong>Status Indisipliner Terdeteksi!</strong> Siswa ini telah memiliki {selectedStudentDetail.alfa} kali catatan Alfa. Direkomendasikan koordinasi dengan Guru BK dan Wali Kelas.
                </div>
              </div>
            )}

            <div className="pt-2 flex justify-end">
              <button
                type="button"
                onClick={() => setSelectedStudentDetail(null)}
                className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold transition-colors cursor-pointer"
              >
                Tutup
              </button>
            </div>
          </div>
        </Modal>
      )}
      </div>

      {/* ========================================================= */}
      {/* MODAL & PRATINJAU CETAK DOKUMEN RESMI DINAS                */}
      {/* ========================================================= */}
      <Modal
        isOpen={isPrintModalOpen}
        onClose={() => setIsPrintModalOpen(false)}
        title="Pratinjau Cetak Laporan Rekapitulasi Presensi KBM"
        maxWidth="max-w-5xl"
        hideOnPrint={false}
      >
        <div className="space-y-4">
          <div className="p-3 bg-slate-100 rounded-xl text-xs font-medium print:hidden space-y-2.5">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div>
                <span className="block font-bold text-slate-800">
                  Menampilkan {filteredStudentRecaps.length} siswa sesuai filter aktif
                </span>
                <span className="text-[11px] text-slate-500">Standar resmi: Kertas F4 / Folio (215mm x 330mm)</span>
              </div>
              <div className="flex items-center gap-2">
                <PrintOrientationToggle orientation={printOrientation} onChange={setPrintOrientation} />
                <button
                  type="button"
                  onClick={handlePrintDocument}
                  className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold shadow-xs cursor-pointer transition-colors"
                >
                  <Printer className="w-4 h-4" />
                  <span>Cetak Dokumen F4</span>
                </button>
              </div>
            </div>

            {/* Pengaturan Penandatangan Dokumen (Wali Kelas & Guru Mapel) */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 border-t border-slate-200">
              <div className="flex items-center gap-2">
                <span className="text-[11px] font-semibold text-slate-600 shrink-0">
                  ✍️ Wali Kelas (Kiri):
                </span>
                <select
                  value={selectedPrintHomeroomTeacherId}
                  onChange={(e) => setSelectedPrintHomeroomTeacherId(e.target.value)}
                  className="w-full bg-white border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 font-medium focus:ring-1 focus:ring-blue-500 cursor-pointer"
                >
                  {teachersList.map((t) => (
                    <option key={t.id} value={t.id}>
                      {t.fullName} {t.homeroomClass ? `(Wali ${t.homeroomClass})` : ""}
                    </option>
                  ))}
                </select>
              </div>

              <div className="flex items-center gap-2">
                <span className="text-[11px] font-semibold text-slate-600 shrink-0">
                  ✍️ Guru Mapel (Kanan):
                </span>
                <select
                  value={selectedPrintSubjectTeacherId}
                  onChange={(e) => setSelectedPrintSubjectTeacherId(e.target.value)}
                  className="w-full bg-white border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 font-medium focus:ring-1 focus:ring-blue-500 cursor-pointer"
                >
                  {teachersList.map((t) => (
                    <option key={t.id} value={t.id}>
                      {t.fullName} — {t.primarySubject || "Guru Mapel"}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          {/* Area Dokumen Cetak Dinas */}
          <div
            id="print-kbm-attendance-document"
            className={`printable-document printable-area ${printOrientation === "landscape" ? "print-landscape" : "print-portrait"} bg-white p-8 sm:p-10 border border-slate-200 rounded-2xl shadow-xs text-slate-900 print:p-0 print:border-none print:shadow-none w-full`}
          >
            {/* Kop Surat Resmi SMA BPI 1 Bandung */}
            <div className="kop-surat-bpi w-full mb-4 text-center">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/images/kop-surat-bpi.png"
                alt="Kop Surat Resmi Yayasan BPI - SMA BPI 1 Bandung"
                className="w-full h-auto object-contain block mx-auto mb-2"
              />
            </div>

            {/* Judul Laporan */}
            <div className="text-center mb-6">
              <h2 className="text-base font-extrabold uppercase tracking-wide text-slate-900">
                Laporan Rekapitulasi Kehadiran Siswa Mata Pelajaran
              </h2>
              <p className="text-xs text-slate-600 mt-1">
                Mata Pelajaran: <strong>{filterSubject}</strong> | Kelas:{" "}
                <strong>{filterClass}</strong> | T.A:{" "}
                <strong>{selectedAcademicYear} ({selectedSemester})</strong>
                {filterMonth !== "Semua Bulan" && ` | Periode: ${filterMonth}`}
              </p>
            </div>

            {/* Tabel Data Rekap Cetak */}
            <table className="w-full text-left border-collapse border border-slate-300 text-[11px] mb-6">
              <thead>
                <tr className="bg-slate-100 text-slate-800 font-bold uppercase">
                  <th className="border border-slate-300 py-2 px-2 text-center w-8">No</th>
                  <th className="border border-slate-300 py-2 px-3">NISN</th>
                  <th className="border border-slate-300 py-2 px-3">NIS</th>
                  <th className="border border-slate-300 py-2 px-4">Nama Siswa</th>
                  <th className="border border-slate-300 py-2 px-3 text-center">Kelas</th>
                  <th className="border border-slate-300 py-2 px-2 text-center">H</th>
                  <th className="border border-slate-300 py-2 px-2 text-center">S</th>
                  <th className="border border-slate-300 py-2 px-2 text-center">I</th>
                  <th className="border border-slate-300 py-2 px-2 text-center">A</th>
                  <th className="border border-slate-300 py-2 px-2 text-center">Total</th>
                  <th className="border border-slate-300 py-2 px-3 text-center">% Hadir</th>
                </tr>
              </thead>
              <tbody>
                {filteredStudentRecaps.length === 0 ? (
                  <tr>
                    <td colSpan={11} className="py-6 text-center text-slate-400">
                      Tidak ada data presensi yang sesuai.
                    </td>
                  </tr>
                ) : (
                  filteredStudentRecaps.map((item, idx) => (
                    <tr key={item.student_id} className="hover:bg-slate-50">
                      <td className="border border-slate-300 py-1.5 px-2 text-center">
                        {idx + 1}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3 font-mono">
                        {item.nisn}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3 font-mono">
                        {item.nis}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-4 font-bold">
                        {item.student_name}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3 text-center">
                        {item.student_class}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-center font-semibold text-emerald-700">
                        {item.hadir}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-center">
                        {item.sakit}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-center">
                        {item.izin}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-center font-bold text-rose-700">
                        {item.alfa}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-center font-bold">
                        {item.total}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3 text-center font-extrabold">
                        {item.attendanceRate}%
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>

            {/* Footer Tanda Tangan Resmi Dinamis */}
            <div className="flex justify-between items-start text-xs pt-4 text-slate-800 signature-block signature-section">
              {/* Sebelah Kiri: Wali Kelas */}
              <div className="text-left w-64">
                <div>Mengetahui,</div>
                <div className="font-bold text-slate-900 mt-0.5">
                  Wali Kelas {filterClass !== "Semua Kelas" ? filterClass : (effectiveHomeroomTeacher?.homeroomClass || printTargetClass)}
                </div>
                <div className="min-h-[72px] flex items-center justify-start py-2">
                  <div className="h-14" />
                </div>
                <div className="font-extrabold text-slate-900 underline">
                  {effectiveHomeroomTeacher?.fullName || "Wali Kelas"}
                </div>
                <div className="text-[11px] text-slate-600">
                  {getTeacherNIPLabel(effectiveHomeroomTeacher)}
                </div>
              </div>

              {/* Sebelah Kanan: Guru Mata Pelajaran */}
              <div className="text-right w-64">
                <div>Bandung, {formatDateID(new Date().toISOString().split("T")[0])}</div>
                <div className="font-bold text-slate-900 mt-0.5">
                  Guru Mata Pelajaran
                </div>
                <div className="min-h-[72px] flex items-center justify-end py-2">
                  <div className="h-14" />
                </div>
                <div className="font-extrabold text-slate-900 underline">
                  {effectiveSubjectTeacher?.fullName || "Guru Mata Pelajaran"}
                </div>
                <div className="text-[11px] text-slate-600">
                  {getTeacherNIPLabel(effectiveSubjectTeacher)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default PresensiKBMManagementView;