"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import {
  CalendarCheck,
  BarChart3,
  Search,
  Plus,
  Trash2,
  Printer,
  X,
  CheckCircle2,
  AlertTriangle,
  Clock,
  Download,
  Calendar,
  Layers,
  ChevronLeft,
  ChevronRight,
  Filter,
  PieChart,
  TrendingUp,
  Info,
  Check,
  Building2,
  Wrench,
  Percent,
  CheckSquare,
  FileSpreadsheet,
} from "lucide-react";
import * as XLSX from "xlsx";
import { Modal } from "@/components/ui/Modal";
import { StatCard } from "@/components/ui/StatCard";
import { useSchoolOfficials } from "@/hooks/useSchoolOfficials";
import { getCurrentAcademicYear, getAcademicYearOptions } from "@/lib/academicYear";

export const ACADEMIC_YEARS = getAcademicYearOptions();

export const AVAILABLE_YEARS = [
  "2024",
  "2025",
  "2026",
  "2027",
  "2028",
  "2029",
  "2030",
];

export const AVAILABLE_MONTHS = [
  { value: 1, label: "Januari" },
  { value: 2, label: "Februari" },
  { value: 3, label: "Maret" },
  { value: 4, label: "April" },
  { value: 5, label: "Mei" },
  { value: 6, label: "Juni" },
  { value: 7, label: "Juli" },
  { value: 8, label: "Agustus" },
  { value: 9, label: "September" },
  { value: 10, label: "Oktober" },
  { value: 11, label: "November" },
  { value: 12, label: "Desember" },
];

export interface RoomItem {
  room_code: string;
  room_name: string;
  floor: number;
}

export interface InspectionItem {
  id: number;
  floor: number;
  room_code: string;
  room_name: string;
  item_name: string;
  category: string;
  sort_order: number;
}

export type PeriodicTabType = "lantai-1" | "lantai-2" | "lantai-3" | "rekapitulasi";

export const formatDateID = (dateStr?: string | null): string => {
  if (!dateStr) return "-";
  try {
    const d = new Date(dateStr);
    if (isNaN(d.getTime())) return dateStr;
    return d.toLocaleDateString("id-ID", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  } catch {
    return dateStr;
  }
};

export const PeriodicInspectionManagementView: React.FC = () => {
  // Navigation Tab State (Lantai 1, Lantai 2, Lantai 3, Rekapitulasi)
  const [activeTab, setActiveTab] = useState<PeriodicTabType>("lantai-1");

  // Academic Year State
  const activeAcademicYear = useMemo(() => getCurrentAcademicYear(), []);
  const [selectedAcademicYear, setSelectedAcademicYear] = useState<string>(() =>
    getCurrentAcademicYear()
  );

  // Month & Year Filter
  const now = new Date();
  const [selectedYear, setSelectedYear] = useState<number>(() => now.getFullYear());
  const [selectedMonth, setSelectedMonth] = useState<number>(() => now.getMonth() + 1);

  // Rooms per Floor
  const [floor1Rooms, setFloor1Rooms] = useState<RoomItem[]>([]);
  const [floor2Rooms, setFloor2Rooms] = useState<RoomItem[]>([]);
  const [floor3Rooms, setFloor3Rooms] = useState<RoomItem[]>([]);

  // Selected Room per Floor
  const [selectedFloor1Room, setSelectedFloor1Room] = useState<string>("");
  const [selectedFloor2Room, setSelectedFloor2Room] = useState<string>("");
  const [selectedFloor3Room, setSelectedFloor3Room] = useState<string>("");

  // Inspection Items & Matrix Logs
  const [items, setItems] = useState<InspectionItem[]>([]);
  const [logs, setLogs] = useState<
    Record<number, Record<number, { status: "baik" | "rusak" | "belum"; notes?: string | null }>>
  >({});
  const [isMatrixLoading, setIsMatrixLoading] = useState<boolean>(true);

  // Pagination for Matrix Table (10 items per page)
  const [matrixCurrentPage, setMatrixCurrentPage] = useState<number>(1);
  const [matrixSearchTerm, setMatrixSearchTerm] = useState<string>("");

  // Add Custom Item Modal
  const [isAddItemModalOpen, setIsAddItemModalOpen] = useState<boolean>(false);
  const [newItemName, setNewItemName] = useState<string>("");
  const [newItemCategory, setNewItemCategory] = useState<string>("Umum");
  const [isAddingItem, setIsAddingItem] = useState<boolean>(false);

  // Note Modal on Right-Click or Damage Flag
  const [isDamageNoteModalOpen, setIsDamageNoteModalOpen] = useState<boolean>(false);
  const [activeCellForNote, setActiveCellForNote] = useState<{
    item_id: number;
    item_name: string;
    day: number;
    date: string;
    notes: string;
  } | null>(null);

  // Recap & Statistics Tab State
  const [rekapYear, setRekapYear] = useState<number>(() => now.getFullYear());
  const [rekapMonth, setRekapMonth] = useState<string>("Semua");
  const [rekapFloor, setRekapFloor] = useState<string>("Semua");
  const [rekapRoom, setRekapRoom] = useState<string>("Semua");
  const [rekapStatus, setRekapStatus] = useState<string>("Semua");
  const [rekapData, setRekapData] = useState<any>(null);
  const [isRekapLoading, setIsRekapLoading] = useState<boolean>(false);
  const [rekapCurrentPage, setRekapCurrentPage] = useState<number>(1);
  const [rekapTrendType, setRekapTrendType] = useState<"bar" | "line">("bar");

  // Print Modal
  const [isPrintModalOpen, setIsPrintModalOpen] = useState<boolean>(false);

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

  // Master Officials
  const { getOfficial } = useSchoolOfficials();
  const kepalaSekolah = getOfficial("kepala_sekolah");
  const wakasekSarana = getOfficial("wakasek_sarana");

  // Determine Active Floor Number
  const activeFloorNumber = useMemo(() => {
    if (activeTab === "lantai-1") return 1;
    if (activeTab === "lantai-2") return 2;
    if (activeTab === "lantai-3") return 3;
    return 1;
  }, [activeTab]);

  // Determine Active Selected Room
  const activeSelectedRoom = useMemo(() => {
    if (activeTab === "lantai-1") return selectedFloor1Room;
    if (activeTab === "lantai-2") return selectedFloor2Room;
    if (activeTab === "lantai-3") return selectedFloor3Room;
    return "";
  }, [activeTab, selectedFloor1Room, selectedFloor2Room, selectedFloor3Room]);

  // Determine Active Room List
  const activeRoomList = useMemo(() => {
    if (activeTab === "lantai-1") return floor1Rooms;
    if (activeTab === "lantai-2") return floor2Rooms;
    if (activeTab === "lantai-3") return floor3Rooms;
    return [];
  }, [activeTab, floor1Rooms, floor2Rooms, floor3Rooms]);

  // Fetch Rooms for Floor
  const fetchRooms = useCallback(async () => {
    try {
      const [res1, res2, res3] = await Promise.all([
        fetch("/api/sarpras/pemeriksaan-berkala/rooms?floor=1").then((r) => r.json()),
        fetch("/api/sarpras/pemeriksaan-berkala/rooms?floor=2").then((r) => r.json()),
        fetch("/api/sarpras/pemeriksaan-berkala/rooms?floor=3").then((r) => r.json()),
      ]);

      if (res1.success && res1.data) {
        setFloor1Rooms(res1.data);
        if (res1.data.length > 0 && !selectedFloor1Room) {
          setSelectedFloor1Room(res1.data[0].room_code);
        }
      }
      if (res2.success && res2.data) {
        setFloor2Rooms(res2.data);
        if (res2.data.length > 0 && !selectedFloor2Room) {
          setSelectedFloor2Room(res2.data[0].room_code);
        }
      }
      if (res3.success && res3.data) {
        setFloor3Rooms(res3.data);
        if (res3.data.length > 0 && !selectedFloor3Room) {
          setSelectedFloor3Room(res3.data[0].room_code);
        }
      }
    } catch (err) {
      console.error("fetchRooms error:", err);
    }
  }, [selectedFloor1Room, selectedFloor2Room, selectedFloor3Room]);

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

  // Fetch Inspection Matrix for Floor & Room
  const fetchMatrix = useCallback(async () => {
    if (activeTab === "rekapitulasi" || !activeSelectedRoom) return;

    try {
      setIsMatrixLoading(true);
      const res = await fetch(
        `/api/sarpras/pemeriksaan-berkala/matrix?floor=${activeFloorNumber}&room_code=${encodeURIComponent(
          activeSelectedRoom
        )}&year=${selectedYear}&month=${selectedMonth}&academic_year=${encodeURIComponent(
          selectedAcademicYear
        )}`,
        { cache: "no-store" }
      );
      const json = await res.json();
      if (json.success && json.data) {
        setItems(json.data.items || []);
        setLogs(json.data.logs || {});
      } else {
        setItems([]);
        setLogs({});
      }
    } catch (err) {
      console.error("fetchMatrix error:", err);
      showToast("Gagal memuat matriks pemeriksaan", "error");
    } finally {
      setIsMatrixLoading(false);
    }
  }, [
    activeTab,
    activeFloorNumber,
    activeSelectedRoom,
    selectedYear,
    selectedMonth,
    selectedAcademicYear,
  ]);

  useEffect(() => {
    fetchMatrix();
    setMatrixCurrentPage(1);
  }, [fetchMatrix]);

  // Fetch Recap Data (Tab 4)
  const fetchRecap = useCallback(async () => {
    if (activeTab !== "rekapitulasi") return;

    try {
      setIsRekapLoading(true);
      const monthParam = rekapMonth === "Semua" ? "" : rekapMonth;
      const floorParam = rekapFloor === "Semua" ? "" : rekapFloor;
      const roomParam = rekapRoom === "Semua" ? "" : rekapRoom;
      const statusParam = rekapStatus === "Semua" ? "" : rekapStatus;

      const res = await fetch(
        `/api/sarpras/pemeriksaan-berkala/rekap?year=${rekapYear}&month=${monthParam}&floor=${floorParam}&room_code=${roomParam}&status=${statusParam}&academic_year=${encodeURIComponent(
          selectedAcademicYear
        )}`,
        { cache: "no-store" }
      );
      const json = await res.json();
      if (json.success) {
        setRekapData(json.data);
      }
    } catch (err) {
      console.error("fetchRecap error:", err);
      showToast("Gagal memuat rekapitulasi pemeriksaan", "error");
    } finally {
      setIsRekapLoading(false);
    }
  }, [activeTab, rekapYear, rekapMonth, rekapFloor, rekapRoom, rekapStatus, selectedAcademicYear]);

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

  // Number of days in selected month
  const daysInMonth = useMemo(() => {
    return new Date(selectedYear, selectedMonth, 0).getDate();
  }, [selectedYear, selectedMonth]);

  // Today Date Helper
  const todayStr = useMemo(() => {
    const t = new Date();
    const y = t.getFullYear();
    const m = String(t.getMonth() + 1).padStart(2, "0");
    const d = String(t.getDate()).padStart(2, "0");
    return `${y}-${m}-${d}`;
  }, []);

  // Filtered Items for Matrix
  const filteredMatrixItems = useMemo(() => {
    if (!matrixSearchTerm.trim()) return items;
    const term = matrixSearchTerm.toLowerCase();
    return items.filter(
      (it) =>
        it.item_name.toLowerCase().includes(term) ||
        (it.category && it.category.toLowerCase().includes(term))
    );
  }, [items, matrixSearchTerm]);

  // Paginated Matrix Items (10 items per page)
  const matrixTotalPages = Math.ceil(filteredMatrixItems.length / 10) || 1;
  const paginatedMatrixItems = useMemo(() => {
    const start = (matrixCurrentPage - 1) * 10;
    return filteredMatrixItems.slice(start, start + 10);
  }, [filteredMatrixItems, matrixCurrentPage]);

  // 3-State Toggle Cell Logic
  // State 0: Belum Diperiksa ('belum')
  // State 1: Kondisi Baik ('baik')
  // State 2: Ada Kerusakan ('rusak')
  const handleToggleCell = async (itemId: number, day: number, forceStatus?: "baik" | "rusak" | "belum") => {
    const currentStatus = logs[itemId]?.[day]?.status || "belum";
    let nextStatus: "baik" | "rusak" | "belum" = "baik";

    if (forceStatus) {
      nextStatus = forceStatus;
    } else {
      if (currentStatus === "belum") nextStatus = "baik";
      else if (currentStatus === "baik") nextStatus = "rusak";
      else nextStatus = "belum";
    }

    const dateStr = `${selectedYear}-${String(selectedMonth).padStart(2, "0")}-${String(day).padStart(
      2,
      "0"
    )}`;

    // Optimistic Update
    setLogs((prev) => {
      const updated = { ...prev };
      if (!updated[itemId]) updated[itemId] = {};
      if (nextStatus === "belum") {
        delete updated[itemId][day];
      } else {
        updated[itemId][day] = {
          status: nextStatus,
          notes: updated[itemId]?.[day]?.notes || null,
        };
      }
      return updated;
    });

    try {
      const res = await fetch("/api/sarpras/pemeriksaan-berkala/toggle", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          item_id: itemId,
          date: dateStr,
          status: nextStatus,
          academic_year: selectedAcademicYear,
        }),
      });
      const json = await res.json();
      if (!json.success) {
        throw new Error(json.error || "Gagal menyimpan checklist");
      }
    } catch (err: any) {
      console.error("handleToggleCell error:", err);
      showToast("Gagal menyimpan perubahan checklist", "error");
      fetchMatrix(); // Rollback on error
    }
  };

  // Right-click Handler to open note / direct flag kerusakan
  const handleCellContextMenu = (e: React.MouseEvent, item: InspectionItem, day: number) => {
    e.preventDefault();
    const dateStr = `${selectedYear}-${String(selectedMonth).padStart(2, "0")}-${String(day).padStart(
      2,
      "0"
    )}`;
    const currentNotes = logs[item.id]?.[day]?.notes || "";

    setActiveCellForNote({
      item_id: item.id,
      item_name: item.item_name,
      day,
      date: dateStr,
      notes: currentNotes,
    });
    setIsDamageNoteModalOpen(true);
  };

  // Save Damage Note from Modal
  const handleSaveDamageNote = async (status: "baik" | "rusak" | "belum", noteText: string) => {
    if (!activeCellForNote) return;
    const { item_id, day, date } = activeCellForNote;

    // Optimistic Update
    setLogs((prev) => {
      const updated = { ...prev };
      if (!updated[item_id]) updated[item_id] = {};
      if (status === "belum") {
        delete updated[item_id][day];
      } else {
        updated[item_id][day] = {
          status,
          notes: noteText.trim() || null,
        };
      }
      return updated;
    });

    setIsDamageNoteModalOpen(false);

    try {
      const res = await fetch("/api/sarpras/pemeriksaan-berkala/toggle", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          item_id,
          date,
          status,
          notes: noteText.trim() || null,
          academic_year: selectedAcademicYear,
        }),
      });
      const json = await res.json();
      if (!json.success) throw new Error(json.error);
      showToast(
        status === "rusak" ? "Status ditandai: Ada Kerusakan" : "Catatan checklist berhasil disimpan",
        "success"
      );
    } catch (err) {
      console.error("handleSaveDamageNote error:", err);
      showToast("Gagal menyimpan catatan", "error");
      fetchMatrix();
    }
  };

  // Add Custom Item Handler
  const handleAddItem = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newItemName.trim() || !activeSelectedRoom) return;

    const currentRoom = activeRoomList.find((r) => r.room_code === activeSelectedRoom);
    const roomName = currentRoom ? currentRoom.room_name : activeSelectedRoom;

    try {
      setIsAddingItem(true);
      const res = await fetch("/api/sarpras/pemeriksaan-berkala/items", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          floor: activeFloorNumber,
          room_code: activeSelectedRoom,
          room_name: roomName,
          item_name: newItemName.trim(),
          category: newItemCategory || "Umum",
        }),
      });
      const json = await res.json();
      if (!json.success) throw new Error(json.error);

      showToast("Item pemeriksaan baru berhasil ditambahkan", "success");
      setIsAddItemModalOpen(false);
      setNewItemName("");
      fetchMatrix();
    } catch (err: any) {
      console.error("handleAddItem error:", err);
      showToast(err.message || "Gagal menambahkan item", "error");
    } finally {
      setIsAddingItem(false);
    }
  };

  // Delete Item Handler
  const handleDeleteItem = async (itemId: number, itemName: string) => {
    if (!confirm(`Hapus objek pemeriksaan "${itemName}" dari ruangan ini?`)) return;

    try {
      const res = await fetch(`/api/sarpras/pemeriksaan-berkala/items?id=${itemId}`, {
        method: "DELETE",
      });
      const json = await res.json();
      if (!json.success) throw new Error(json.error);

      showToast("Item berhasil dihapus", "success");
      fetchMatrix();
    } catch (err: any) {
      console.error("handleDeleteItem error:", err);
      showToast(err.message || "Gagal menghapus item", "error");
    }
  };

  // Export Matrix to Excel
  const handleExportMatrixExcel = () => {
    if (items.length === 0) {
      showToast("Tidak ada data untuk diekspor", "error");
      return;
    }

    const currentRoom = activeRoomList.find((r) => r.room_code === activeSelectedRoom);
    const roomTitle = currentRoom ? currentRoom.room_name : activeSelectedRoom;

    const header = ["No", "Objek Pemeriksaan", "Kategori"];
    for (let d = 1; d <= daysInMonth; d++) {
      header.push(`Tgl ${d}`);
    }
    header.push("Total Baik", "Total Rusak");

    const rows = items.map((it, idx) => {
      let bCount = 0;
      let rCount = 0;
      const dayValues = [];

      for (let d = 1; d <= daysInMonth; d++) {
        const st = logs[it.id]?.[d]?.status;
        if (st === "baik") {
          dayValues.push("✓");
          bCount++;
        } else if (st === "rusak") {
          dayValues.push("!");
          rCount++;
        } else {
          dayValues.push("-");
        }
      }

      return [idx + 1, it.item_name, it.category || "Umum", ...dayValues, bCount, rCount];
    });

    const ws = XLSX.utils.aoa_to_sheet([header, ...rows]);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Checklist Pemeriksaan");
    XLSX.writeFile(
      wb,
      `Checklist_Pemeriksaan_${roomTitle.replace(/\s+/g, "_")}_${selectedMonth}_${selectedYear}.xlsx`
    );
    showToast("Berhasil mengekspor checklist ke Excel", "success");
  };

  // Active Room Title Helper
  const currentActiveRoomObj = useMemo(() => {
    return activeRoomList.find((r) => r.room_code === activeSelectedRoom);
  }, [activeRoomList, activeSelectedRoom]);

  // Recap Pagination
  const rekapDetails = rekapData?.details || [];
  const rekapTotalPages = Math.ceil(rekapDetails.length / 10) || 1;
  const paginatedRekapDetails = useMemo(() => {
    const start = (rekapCurrentPage - 1) * 10;
    return rekapDetails.slice(start, start + 10);
  }, [rekapDetails, rekapCurrentPage]);

  // Recap Trend Data for SVG Chart
  const rekapDailyTrend = useMemo(() => {
    if (!rekapData?.dailyCounts) return [];
    const entries = Object.entries(rekapData.dailyCounts as Record<string, { baik: number; rusak: number }>);
    entries.sort(([a], [b]) => a.localeCompare(b));
    return entries.map(([dateStr, counts]) => ({
      date: dateStr.substring(5), // MM-DD
      baik: counts.baik,
      rusak: counts.rusak,
      total: counts.baik + counts.rusak,
    }));
  }, [rekapData]);

  return (
    <div className="space-y-6 pb-12">
      {/* Toast */}
      {toast && (
        <div
          className={`fixed bottom-5 right-5 z-50 flex items-center gap-2 px-4 py-3 rounded-xl shadow-lg border text-sm font-semibold transition-all duration-300 ${
            toast.type === "success"
              ? "bg-emerald-50 border-emerald-200 text-emerald-800"
              : "bg-rose-50 border-rose-200 text-rose-800"
          }`}
        >
          {toast.type === "success" ? (
            <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0" />
          ) : (
            <AlertTriangle className="w-5 h-5 text-rose-600 shrink-0" />
          )}
          <span>{toast.message}</span>
        </div>
      )}

      {/* Header Utama & Academic Year Dropdown (Unified White Card) */}
      <div className="bg-white rounded-2xl border border-gray-100 p-5 sm:p-6 shadow-sm print:hidden">
        <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">
              <CalendarCheck className="w-4 h-4 text-red-600" />
              <span>🔧 MODUL SARANA & PRASARANA • BPI SMARTSCHOOL</span>
            </div>
            <h1 className="text-xl sm:text-2xl font-bold text-gray-900">
              Pemeriksaan Berkala Sarpras
            </h1>
            <p className="text-xs sm:text-sm text-gray-500 mt-1">
              Inspeksi sarana & prasarana berkala berbasis hirarki lantai & ruang, matriks checklist harian bulanan, rekapitulasi kondisi fasilitas, dan pelaporan resmi SMA BPI 1 Bandung.
            </p>
          </div>

          <div className="flex items-center gap-2.5">
            <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="periodic-academic-year-select" className="text-xs font-semibold text-gray-600 shrink-0">
                T.A:
              </label>
              <select
                id="periodic-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 === activeAcademicYear ? "(Aktif)" : ""}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>
      </div>

      {/* 1. STRUKTUR NAVIGATION TAB (Pill Style) & Web Content (Hidden on Print) */}
      <div className="space-y-6 print:hidden">
        <div className="flex flex-wrap items-center gap-2 p-1.5 bg-slate-100/80 rounded-2xl w-fit border border-slate-200/80">
        {/* Tab 1: Pemeriksaan Lantai 1 */}
        <button
          type="button"
          onClick={() => setActiveTab("lantai-1")}
          className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-bold transition-all ${
            activeTab === "lantai-1"
              ? "bg-blue-600 text-white shadow-sm"
              : "text-slate-600 hover:text-slate-900 hover:bg-white/60"
          }`}
        >
          <Building2 className="w-4 h-4" />
          <span>Pemeriksaan Lantai 1</span>
        </button>

        {/* Tab 2: Pemeriksaan Lantai 2 */}
        <button
          type="button"
          onClick={() => setActiveTab("lantai-2")}
          className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-bold transition-all ${
            activeTab === "lantai-2"
              ? "bg-blue-600 text-white shadow-sm"
              : "text-slate-600 hover:text-slate-900 hover:bg-white/60"
          }`}
        >
          <Building2 className="w-4 h-4" />
          <span>Pemeriksaan Lantai 2</span>
        </button>

        {/* Tab 3: Pemeriksaan Lantai 3 */}
        <button
          type="button"
          onClick={() => setActiveTab("lantai-3")}
          className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-bold transition-all ${
            activeTab === "lantai-3"
              ? "bg-blue-600 text-white shadow-sm"
              : "text-slate-600 hover:text-slate-900 hover:bg-white/60"
          }`}
        >
          <Building2 className="w-4 h-4" />
          <span>Pemeriksaan Lantai 3</span>
        </button>

        {/* Tab 4: Rekapitulasi & Statistik */}
        <button
          type="button"
          onClick={() => setActiveTab("rekapitulasi")}
          className={`inline-flex items-center gap-2 px-4 py-2 rounded-full 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 & Statistik</span>
        </button>
      </div>

      {/* ========================================================= */}
      {/* KONTEN TAB LANTAI 1, 2, 3 (MATRIKS CHECKLIST BULANAN)      */}
      {/* ========================================================= */}
      {activeTab !== "rekapitulasi" && (
        <div className="space-y-4">
          {/* Dynamic Pill Tabs Ruang */}
          <div className="bg-white p-3.5 rounded-2xl border border-slate-200/80 shadow-xs print:hidden">
            <div className="flex items-center justify-between mb-2">
              <span className="text-xs font-bold text-slate-700 flex items-center gap-1.5">
                <Layers className="w-3.5 h-3.5 text-blue-600" />
                <span>Pilih Ruangan di Lantai {activeFloorNumber}:</span>
              </span>
              <span className="text-[11px] text-slate-500">
                {activeRoomList.length} Ruangan Terdaftar
              </span>
            </div>

            <div className="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-thin">
              {activeRoomList.map((r) => {
                const isSelected = activeSelectedRoom === r.room_code;
                return (
                  <button
                    key={r.room_code}
                    type="button"
                    onClick={() => {
                      if (activeTab === "lantai-1") setSelectedFloor1Room(r.room_code);
                      else if (activeTab === "lantai-2") setSelectedFloor2Room(r.room_code);
                      else if (activeTab === "lantai-3") setSelectedFloor3Room(r.room_code);
                    }}
                    className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition-all cursor-pointer ${
                      isSelected
                        ? "bg-blue-600 text-white shadow-xs"
                        : "bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200"
                    }`}
                  >
                    {r.room_name}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Toolbar & Filter Bar Bulan / Tahun */}
          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs print:hidden">
            <div className="flex flex-wrap items-center gap-2.5">
              {/* Dropdown Bulan */}
              <div className="flex items-center gap-1.5 bg-slate-50 px-3 py-2 rounded-xl border border-slate-200 text-xs">
                <span className="font-semibold text-slate-600">Bulan:</span>
                <select
                  value={selectedMonth}
                  onChange={(e) => setSelectedMonth(parseInt(e.target.value, 10))}
                  className="bg-transparent font-bold text-slate-800 focus:outline-none cursor-pointer"
                >
                  {AVAILABLE_MONTHS.map((m) => (
                    <option key={m.value} value={m.value}>
                      {m.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* Dropdown Tahun */}
              <div className="flex items-center gap-1.5 bg-slate-50 px-3 py-2 rounded-xl border border-slate-200 text-xs">
                <span className="font-semibold text-slate-600">Tahun:</span>
                <select
                  value={selectedYear}
                  onChange={(e) => setSelectedYear(parseInt(e.target.value, 10))}
                  className="bg-transparent font-bold text-slate-800 focus:outline-none cursor-pointer"
                >
                  {AVAILABLE_YEARS.map((y) => (
                    <option key={y} value={y}>
                      {y}
                    </option>
                  ))}
                </select>
              </div>

              {/* Action Buttons */}
              <button
                type="button"
                onClick={() => setIsAddItemModalOpen(true)}
                className="flex items-center gap-1.5 px-3.5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                <span>Tambah Objek</span>
              </button>

              <button
                type="button"
                onClick={handleExportMatrixExcel}
                className="flex items-center gap-1.5 px-3.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold border border-slate-200 transition-colors cursor-pointer"
              >
                <Download className="w-3.5 h-3.5 text-slate-600" />
                <span>Ekspor Excel</span>
              </button>

              <button
                type="button"
                onClick={() => setIsPrintModalOpen(true)}
                className="flex items-center gap-1.5 px-3.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold border border-slate-200 transition-colors cursor-pointer"
              >
                <Printer className="w-3.5 h-3.5 text-slate-600" />
                <span>Cetak Matriks</span>
              </button>
            </div>

            {/* Legend & Search */}
            <div className="flex flex-wrap items-center gap-3">
              {/* Legend 3-State */}
              <div className="hidden sm:flex items-center gap-2 text-[11px] text-slate-600 bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-200">
                <span className="flex items-center gap-1">
                  <span className="w-2.5 h-2.5 rounded-full bg-slate-200 inline-block" />
                  <span>Kosong (-)</span>
                </span>
                <span className="flex items-center gap-1 text-emerald-700 font-semibold">
                  <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 inline-block" />
                  <span>Baik (✓)</span>
                </span>
                <span className="flex items-center gap-1 text-rose-700 font-semibold">
                  <span className="w-2.5 h-2.5 rounded-full bg-rose-500 inline-block" />
                  <span>Rusak (!)</span>
                </span>
              </div>

              {/* Search */}
              <div className="relative">
                <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
                <input
                  type="text"
                  placeholder="Cari objek..."
                  value={matrixSearchTerm}
                  onChange={(e) => setMatrixSearchTerm(e.target.value)}
                  className="pl-9 pr-3 py-1.5 text-xs bg-slate-50 border border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 w-40 sm:w-48"
                />
              </div>
            </div>
          </div>

          {/* Matriks Checklist Table (Limit 10 Items per Page) */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div className="p-3 bg-slate-50/80 border-b border-slate-200 flex items-center justify-between text-xs">
              <span className="font-bold text-slate-800">
                Matriks Checklist: {currentActiveRoomObj?.room_name || activeSelectedRoom} (Lantai{" "}
                {activeFloorNumber})
              </span>
              <span className="text-slate-500 text-[11px]">
                Klik sel untuk ganti status: Kosong &rarr; Baik (✓) &rarr; Rusak (!) &rarr; Kosong
              </span>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse text-xs select-none">
                <thead>
                  <tr className="bg-slate-100 text-slate-700 font-bold uppercase text-[10px] tracking-wider border-b border-slate-300">
                    <th className="py-2.5 px-2 text-center w-8 border-r border-slate-200 sticky left-0 bg-slate-100 z-10">
                      NO
                    </th>
                    <th className="py-2.5 px-3 min-w-[170px] border-r border-slate-200 sticky left-8 bg-slate-100 z-10 shadow-xs">
                      OBJEK PEMERIKSAAN
                    </th>

                    {/* Columns 1 to 31 */}
                    {Array.from({ length: daysInMonth }, (_, i) => i + 1).map((day) => {
                      const dayDate = new Date(selectedYear, selectedMonth - 1, day);
                      const dayOfWeek = dayDate.getDay();
                      const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
                      const dateStr = `${selectedYear}-${String(selectedMonth).padStart(
                        2,
                        "0"
                      )}-${String(day).padStart(2, "0")}`;
                      const isToday = dateStr === todayStr;

                      return (
                        <th
                          key={day}
                          className={`py-2 px-1 text-center w-8 border-r border-slate-200 font-semibold ${
                            isToday
                              ? "bg-blue-600 text-white font-extrabold"
                              : isWeekend
                              ? "bg-slate-200/70 text-slate-500"
                              : "text-slate-700"
                          }`}
                          title={`${day} ${
                            AVAILABLE_MONTHS.find((m) => m.value === selectedMonth)?.label
                          } ${selectedYear}${isToday ? " (Hari Ini)" : ""}${
                            isWeekend ? " (Akhir Pekan)" : ""
                          }`}
                        >
                          {day}
                        </th>
                      );
                    })}

                    <th className="py-2 px-2 text-center w-12 text-emerald-700 bg-emerald-50/70 border-r border-slate-200">
                      BAIK
                    </th>
                    <th className="py-2 px-2 text-center w-12 text-rose-700 bg-rose-50/70 border-r border-slate-200">
                      RUSAK
                    </th>
                    <th className="py-2 px-2 text-center w-10">AKSI</th>
                  </tr>
                </thead>

                <tbody className="divide-y divide-slate-100">
                  {isMatrixLoading ? (
                    <tr>
                      <td
                        colSpan={daysInMonth + 5}
                        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 item dan data checklist ruangan...</span>
                        </div>
                      </td>
                    </tr>
                  ) : paginatedMatrixItems.length === 0 ? (
                    <tr>
                      <td
                        colSpan={daysInMonth + 5}
                        className="py-12 text-center text-slate-400"
                      >
                        <div className="flex flex-col items-center gap-2">
                          <CheckSquare className="w-8 h-8 text-slate-300" />
                          <p className="font-semibold text-slate-600">
                            Belum ada objek pemeriksaan untuk ruangan ini
                          </p>
                          <button
                            type="button"
                            onClick={() => setIsAddItemModalOpen(true)}
                            className="text-xs text-blue-600 hover:underline font-bold"
                          >
                            + Tambah Objek Pemeriksaan Sekarang
                          </button>
                        </div>
                      </td>
                    </tr>
                  ) : (
                    paginatedMatrixItems.map((item, idx) => {
                      const rowNum = (matrixCurrentPage - 1) * 10 + idx + 1;

                      // Count baik & rusak for this item this month
                      let totalBaik = 0;
                      let totalRusak = 0;
                      for (let d = 1; d <= daysInMonth; d++) {
                        const st = logs[item.id]?.[d]?.status;
                        if (st === "baik") totalBaik++;
                        else if (st === "rusak") totalRusak++;
                      }

                      return (
                        <tr key={item.id} className="hover:bg-slate-50/70 transition-colors">
                          <td className="py-2 px-2 text-center font-medium text-slate-500 border-r border-slate-200 sticky left-0 bg-white">
                            {rowNum}
                          </td>
                          <td className="py-2 px-3 font-semibold text-slate-800 border-r border-slate-200 sticky left-8 bg-white shadow-xs truncate max-w-[200px]" title={item.item_name}>
                            {item.item_name}
                            <span className="block text-[9px] font-normal text-slate-400">
                              {item.category || "Umum"}
                            </span>
                          </td>

                          {/* Matrix Cells 1 to 31 */}
                          {Array.from({ length: daysInMonth }, (_, i) => i + 1).map((day) => {
                            const cellLog = logs[item.id]?.[day];
                            const status = cellLog?.status || "belum";
                            const notes = cellLog?.notes;

                            const dayDate = new Date(selectedYear, selectedMonth - 1, day);
                            const dayOfWeek = dayDate.getDay();
                            const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
                            const dateStr = `${selectedYear}-${String(selectedMonth).padStart(
                              2,
                              "0"
                            )}-${String(day).padStart(2, "0")}`;
                            const isToday = dateStr === todayStr;

                            return (
                              <td
                                key={day}
                                onClick={() => handleToggleCell(item.id, day)}
                                onContextMenu={(e) => handleCellContextMenu(e, item, day)}
                                className={`py-1.5 px-0 text-center border-r border-slate-200 cursor-pointer transition-colors relative group ${
                                  isToday
                                    ? "bg-blue-50/60 hover:bg-blue-100"
                                    : isWeekend
                                    ? "bg-slate-100/50 hover:bg-slate-200/50"
                                    : "hover:bg-slate-100"
                                }`}
                                title={`Tgl ${day}: ${
                                  status === "baik"
                                    ? "Kondisi Baik"
                                    : status === "rusak"
                                    ? `Ada Kerusakan (${notes || "Perlu Perbaikan"})`
                                    : "Belum Diperiksa"
                                } (Klik kiri untuk toggle, Klik kanan untuk catatan)`}
                              >
                                {status === "baik" ? (
                                  <span className="inline-flex items-center justify-center w-5 h-5 rounded-md bg-emerald-100 text-emerald-700 font-extrabold text-[11px] shadow-2xs">
                                    ✓
                                  </span>
                                ) : status === "rusak" ? (
                                  <span className="inline-flex items-center justify-center w-5 h-5 rounded-md bg-rose-100 text-rose-700 font-extrabold text-[11px] shadow-2xs animate-pulse">
                                    !
                                  </span>
                                ) : (
                                  <span className="text-slate-300 font-bold text-xs">-</span>
                                )}
                              </td>
                            );
                          })}

                          {/* Total Baik */}
                          <td className="py-2 px-2 text-center font-bold text-emerald-700 bg-emerald-50/40 border-r border-slate-200">
                            {totalBaik}
                          </td>
                          {/* Total Rusak */}
                          <td className="py-2 px-2 text-center font-bold text-rose-700 bg-rose-50/40 border-r border-slate-200">
                            {totalRusak}
                          </td>

                          {/* Delete Item */}
                          <td className="py-2 px-2 text-center">
                            <button
                              type="button"
                              onClick={() => handleDeleteItem(item.id, item.item_name)}
                              className="p-1 text-slate-400 hover:text-rose-600 rounded transition-colors cursor-pointer"
                              title="Hapus objek pemeriksaan"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Controls Matriks (10 Baris per Halaman) */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-4 py-3 bg-slate-50/70 border-t border-slate-200 text-xs text-slate-500">
              <div>
                Menampilkan{" "}
                <span className="font-bold text-slate-700">
                  {filteredMatrixItems.length > 0 ? (matrixCurrentPage - 1) * 10 + 1 : 0}
                </span>{" "}
                sampai{" "}
                <span className="font-bold text-slate-700">
                  {Math.min(matrixCurrentPage * 10, filteredMatrixItems.length)}
                </span>{" "}
                dari{" "}
                <span className="font-bold text-slate-700">
                  {filteredMatrixItems.length}
                </span>{" "}
                objek pemeriksaan
              </div>

              <div className="flex items-center gap-1.5">
                <button
                  type="button"
                  disabled={matrixCurrentPage <= 1}
                  onClick={() => setMatrixCurrentPage((p) => Math.max(p - 1, 1))}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer font-medium"
                >
                  <ChevronLeft className="w-3.5 h-3.5" />
                  <span>Sebelumnya</span>
                </button>

                {Array.from({ length: matrixTotalPages }, (_, i) => i + 1)
                  .filter(
                    (p) =>
                      p === 1 ||
                      p === matrixTotalPages ||
                      (p >= matrixCurrentPage - 1 && p <= matrixCurrentPage + 1)
                  )
                  .map((p, idx, arr) => {
                    const prev = arr[idx - 1];
                    const showEllipsis = prev && p - prev > 1;

                    return (
                      <React.Fragment key={p}>
                        {showEllipsis && <span className="px-1 text-slate-400">...</span>}
                        <button
                          type="button"
                          onClick={() => setMatrixCurrentPage(p)}
                          className={`w-7 h-7 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                            matrixCurrentPage === p
                              ? "bg-blue-600 text-white shadow-xs"
                              : "bg-white hover:bg-slate-100 text-slate-700 border border-slate-200"
                          }`}
                        >
                          {p}
                        </button>
                      </React.Fragment>
                    );
                  })}

                <button
                  type="button"
                  disabled={matrixCurrentPage >= matrixTotalPages}
                  onClick={() => setMatrixCurrentPage((p) => Math.min(p + 1, matrixTotalPages))}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer font-medium"
                >
                  <span>Selanjutnya</span>
                  <ChevronRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ========================================================= */}
      {/* TAB 4: REKAPITULASI & STATISTIK PEMERIKSAAN               */}
      {/* ========================================================= */}
      {activeTab === "rekapitulasi" && (
        <div className="space-y-6">
          {/* Multi-Filter Bar */}
          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-4 print:hidden">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-100 pb-3">
              <div className="flex items-center gap-2">
                <Filter className="w-4 h-4 text-blue-600" />
                <h3 className="text-sm font-bold text-slate-900">
                  Filter Multi-Kriteria Rekapitulasi Pemeriksaan
                </h3>
              </div>

              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => setIsPrintModalOpen(true)}
                  className="flex items-center gap-2 px-3.5 py-2 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 Rekap PDF</span>
                </button>
              </div>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
              {/* Filter Tahun */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Filter Tahun
                </label>
                <select
                  value={rekapYear}
                  onChange={(e) => setRekapYear(parseInt(e.target.value, 10))}
                  className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                >
                  {AVAILABLE_YEARS.map((y) => (
                    <option key={y} value={y}>
                      {y}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Bulan */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Filter Bulan
                </label>
                <select
                  value={rekapMonth}
                  onChange={(e) => setRekapMonth(e.target.value)}
                  className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                >
                  <option value="Semua">Semua Bulan</option>
                  {AVAILABLE_MONTHS.map((m) => (
                    <option key={m.value} value={m.value}>
                      {m.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Lantai */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Filter Lantai
                </label>
                <select
                  value={rekapFloor}
                  onChange={(e) => {
                    setRekapFloor(e.target.value);
                    setRekapRoom("Semua");
                  }}
                  className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                >
                  <option value="Semua">Semua Lantai</option>
                  <option value="1">Lantai 1</option>
                  <option value="2">Lantai 2</option>
                  <option value="3">Lantai 3</option>
                </select>
              </div>

              {/* Filter Status */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Status Kondisi
                </label>
                <select
                  value={rekapStatus}
                  onChange={(e) => setRekapStatus(e.target.value)}
                  className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                >
                  <option value="Semua">Semua Status</option>
                  <option value="baik">Kondisi Baik (✓)</option>
                  <option value="rusak">Ada Kerusakan (!)</option>
                </select>
              </div>

              {/* Filter Tahun Ajaran */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Tahun Ajaran
                </label>
                <select
                  value={selectedAcademicYear}
                  onChange={(e) => setSelectedAcademicYear(e.target.value)}
                  className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                >
                  {ACADEMIC_YEARS.map((yr) => (
                    <option key={yr} value={yr}>
                      {yr}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          {/* Metric Cards (Kartu Ringkasan Rekap) */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <StatCard
              title="Total Item Diperiksa"
              value={isRekapLoading ? "..." : `${rekapData?.totalInspected || 0} Kali Cek`}
              subtitle="Akumulasi checklist aktif"
              icon={CheckSquare}
              iconColor="blue"
            />
            <StatCard
              title="Kondisi Baik"
              value={isRekapLoading ? "..." : `${rekapData?.totalBaik || 0} Titik`}
              subtitle="Fasilitas berfungsi normal"
              icon={CheckCircle2}
              iconColor="success"
            />
            <StatCard
              title="Ditemukan Kerusakan"
              value={isRekapLoading ? "..." : `${rekapData?.totalRusak || 0} Temuan`}
              subtitle="Memerlukan perbaikan"
              icon={AlertTriangle}
              iconColor="danger"
            />
            <StatCard
              title="Persentase Kondisi Baik"
              value={isRekapLoading ? "..." : `${rekapData?.percentageBaik || 0}%`}
              subtitle="Rasio kelaikan sarana"
              icon={Percent}
              iconColor="purple"
            />
          </div>

          {/* Visualisasi Grafik Tren & Doughnut */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
            {/* Tren Pemeriksaan */}
            <div className="lg:col-span-2 bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs flex flex-col justify-between">
              <div>
                <div className="flex items-center justify-between gap-3 mb-2">
                  <div className="flex items-center gap-2">
                    <div className="p-2 bg-blue-50 rounded-xl text-blue-600">
                      <TrendingUp className="w-4 h-4" />
                    </div>
                    <div>
                      <h3 className="text-sm font-bold text-slate-900">
                        Tren Pemeriksaan Berkala
                      </h3>
                      <p className="text-[11px] text-slate-500">
                        Distribusi jumlah ceklis per tanggal ({rekapYear})
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center bg-slate-100 p-0.5 rounded-xl border border-slate-200">
                    <button
                      type="button"
                      onClick={() => setRekapTrendType("bar")}
                      className={`px-2.5 py-1 text-xs font-semibold rounded-lg transition-colors cursor-pointer ${
                        rekapTrendType === "bar"
                          ? "bg-white text-blue-600 shadow-xs"
                          : "text-slate-600 hover:text-slate-900"
                      }`}
                    >
                      Batang
                    </button>
                    <button
                      type="button"
                      onClick={() => setRekapTrendType("line")}
                      className={`px-2.5 py-1 text-xs font-semibold rounded-lg transition-colors cursor-pointer ${
                        rekapTrendType === "line"
                          ? "bg-white text-blue-600 shadow-xs"
                          : "text-slate-600 hover:text-slate-900"
                      }`}
                    >
                      Garis
                    </button>
                  </div>
                </div>

                {/* SVG Trend Chart */}
                <div className="relative mt-4 pt-2">
                  {rekapDailyTrend.length === 0 ? (
                    <div className="h-44 flex items-center justify-center text-slate-400 text-xs font-semibold">
                      Belum ada data checklist pada periode yang dipilih
                    </div>
                  ) : (
                    <svg viewBox="0 0 520 180" className="w-full h-44 overflow-visible select-none">
                      <defs>
                        <linearGradient id="recBarGrad" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stopColor="#2563eb" />
                          <stop offset="100%" stopColor="#3b82f6" />
                        </linearGradient>
                      </defs>

                      {[0, 0.5, 1].map((pct, idx) => {
                        const y = 140 - pct * 120;
                        return (
                          <line
                            key={idx}
                            x1="30"
                            y1={y}
                            x2="510"
                            y2={y}
                            stroke="#e2e8f0"
                            strokeDasharray="3 3"
                            strokeWidth="1"
                          />
                        );
                      })}

                      {(() => {
                        const maxVal = Math.max(...rekapDailyTrend.map((d) => d.total), 1);
                        const stepX = 480 / Math.max(rekapDailyTrend.length, 1);

                        if (rekapTrendType === "bar") {
                          return rekapDailyTrend.map((d, idx) => {
                            const x = 35 + idx * stepX;
                            const barH = (d.total / maxVal) * 115;
                            const y = 140 - barH;

                            return (
                              <g key={idx}>
                                <rect
                                  x={x}
                                  y={y}
                                  width={Math.min(stepX - 4, 18)}
                                  height={barH}
                                  rx="3"
                                  fill="url(#recBarGrad)"
                                />
                                {d.total > 0 && (
                                  <text
                                    x={x + Math.min(stepX - 4, 18) / 2}
                                    y={y - 4}
                                    textAnchor="middle"
                                    className="text-[9px] fill-blue-700 font-bold"
                                  >
                                    {d.total}
                                  </text>
                                )}
                                <text
                                  x={x + Math.min(stepX - 4, 18) / 2}
                                  y={156}
                                  textAnchor="middle"
                                  className="text-[8px] fill-slate-500 font-semibold"
                                >
                                  {d.date}
                                </text>
                              </g>
                            );
                          });
                        }

                        // Line chart
                        const points = rekapDailyTrend.map((d, idx) => {
                          const x = 35 + idx * stepX + stepX / 2;
                          const y = 140 - (d.total / maxVal) * 115;
                          return { x, y, total: d.total, date: d.date };
                        });

                        const pathD = points.reduce(
                          (acc, p, idx) => (idx === 0 ? `M ${p.x} ${p.y}` : `${acc} L ${p.x} ${p.y}`),
                          ""
                        );

                        return (
                          <>
                            <path
                              d={pathD}
                              fill="none"
                              stroke="#2563eb"
                              strokeWidth="2.5"
                              strokeLinecap="round"
                            />
                            {points.map((p, idx) => (
                              <g key={idx}>
                                <circle cx={p.x} cy={p.y} r="3" fill="#1d4ed8" stroke="#fff" strokeWidth="1.5" />
                                {p.total > 0 && (
                                  <text x={p.x} y={p.y - 6} textAnchor="middle" className="text-[9px] fill-blue-700 font-bold">
                                    {p.total}
                                  </text>
                                )}
                                <text x={p.x} y={156} textAnchor="middle" className="text-[8px] fill-slate-500 font-semibold">
                                  {p.date}
                                </text>
                              </g>
                            ))}
                          </>
                        );
                      })()}
                    </svg>
                  )}
                </div>
              </div>

              <div className="flex items-center justify-between text-[11px] text-slate-500 pt-2 border-t border-slate-100">
                <span>Grafik terhubung dinamis dengan filter periode</span>
                <span className="font-semibold text-slate-700">
                  Total {rekapData?.totalInspected || 0} Titik Diperiksa
                </span>
              </div>
            </div>

            {/* Doughnut Chart Rasio Kondisi */}
            <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs flex flex-col justify-between">
              <div>
                <div className="flex items-center gap-2 mb-3">
                  <div className="p-2 bg-purple-50 rounded-xl text-purple-600">
                    <PieChart className="w-4 h-4" />
                  </div>
                  <div>
                    <h3 className="text-sm font-bold text-slate-900">
                      Rasio Kelaikan Fasilitas
                    </h3>
                    <p className="text-[11px] text-slate-500">
                      Perbandingan Kondisi Baik vs Rusak
                    </p>
                  </div>
                </div>

                <div className="relative flex items-center justify-center my-3">
                  {(() => {
                    const total = rekapData?.totalInspected || 0;
                    const baik = rekapData?.totalBaik || 0;
                    const rusak = rekapData?.totalRusak || 0;
                    const r = 50;
                    const circ = 2 * Math.PI * r;

                    if (total === 0) {
                      return (
                        <div className="w-36 h-36 rounded-full border-8 border-slate-100 flex items-center justify-center text-slate-400 text-xs font-semibold">
                          Kosong
                        </div>
                      );
                    }

                    const pBaik = (baik / total) * circ;
                    const pRusak = (rusak / total) * circ;

                    return (
                      <div className="relative w-36 h-36">
                        <svg viewBox="0 0 120 120" className="w-full h-full -rotate-90">
                          {/* Baik */}
                          <circle
                            cx="60"
                            cy="60"
                            r={r}
                            fill="none"
                            stroke="#10b981"
                            strokeWidth="14"
                            strokeDasharray={`${pBaik} ${circ}`}
                            strokeDashoffset={0}
                          />
                          {/* Rusak */}
                          <circle
                            cx="60"
                            cy="60"
                            r={r}
                            fill="none"
                            stroke="#f43f5e"
                            strokeWidth="14"
                            strokeDasharray={`${pRusak} ${circ}`}
                            strokeDashoffset={-pBaik}
                          />
                        </svg>
                        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                          <span className="text-lg font-extrabold text-slate-800">
                            {rekapData?.percentageBaik || 0}%
                          </span>
                          <span className="text-[9px] font-bold text-slate-400 uppercase">
                            Baik
                          </span>
                        </div>
                      </div>
                    );
                  })()}
                </div>

                <div className="space-y-2 pt-2">
                  <div className="flex items-center justify-between text-xs">
                    <div className="flex items-center gap-1.5">
                      <span className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
                      <span className="text-slate-600">Kondisi Baik (✓)</span>
                    </div>
                    <span className="font-bold text-slate-800">
                      {rekapData?.totalBaik || 0} Titik
                    </span>
                  </div>

                  <div className="flex items-center justify-between text-xs">
                    <div className="flex items-center gap-1.5">
                      <span className="w-2.5 h-2.5 rounded-full bg-rose-500" />
                      <span className="text-slate-600">Ada Kerusakan (!)</span>
                    </div>
                    <span className="font-bold text-slate-800">
                      {rekapData?.totalRusak || 0} Temuan
                    </span>
                  </div>
                </div>
              </div>

              <div className="pt-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
                <span>Rasio Kelaikan Total:</span>
                <span className="font-bold text-blue-600">
                  {rekapData?.percentageBaik || 0}% Baik
                </span>
              </div>
            </div>
          </div>

          {/* Tabel Detail Rekapitulasi Berpaginasi */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
              <div>
                <h3 className="text-sm font-bold text-slate-900">
                  Daftar Rincian Temuan Pemeriksaan
                </h3>
                <p className="text-xs text-slate-500">
                  Catatan inspeksi pada periode terpilih ({rekapDetails.length} data)
                </p>
              </div>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse text-xs">
                <thead>
                  <tr className="bg-slate-50/80 border-b border-slate-200 text-slate-600 font-bold uppercase tracking-wider text-[11px]">
                    <th className="py-3 px-3 text-center w-12">NO</th>
                    <th className="py-3 px-3">TANGGAL</th>
                    <th className="py-3 px-3">LANTAI</th>
                    <th className="py-3 px-3">RUANGAN</th>
                    <th className="py-3 px-4 min-w-[180px]">OBJEK PEMERIKSAAN</th>
                    <th className="py-3 px-3 text-center">STATUS</th>
                    <th className="py-3 px-3 min-w-[160px]">CATATAN KERUSAKAN</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 text-slate-700">
                  {isRekapLoading ? (
                    <tr>
                      <td colSpan={7} className="py-8 text-center text-slate-400">
                        Memuat data rekapitulasi...
                      </td>
                    </tr>
                  ) : paginatedRekapDetails.length === 0 ? (
                    <tr>
                      <td colSpan={7} className="py-10 text-center text-slate-400">
                        Tidak ada riwayat pemeriksaan yang cocok dengan filter.
                      </td>
                    </tr>
                  ) : (
                    paginatedRekapDetails.map((row: any, idx: number) => {
                      const rowNum = (rekapCurrentPage - 1) * 10 + idx + 1;
                      return (
                        <tr key={row.id || idx} className="hover:bg-slate-50/70 transition-colors">
                          <td className="py-2.5 px-3 text-center font-medium text-slate-500">
                            {rowNum}
                          </td>
                          <td className="py-2.5 px-3 font-semibold text-slate-800 whitespace-nowrap">
                            {formatDateID(row.date)}
                          </td>
                          <td className="py-2.5 px-3 whitespace-nowrap">
                            Lantai {row.floor}
                          </td>
                          <td className="py-2.5 px-3 font-medium text-slate-800">
                            {row.room_name} ({row.room_code})
                          </td>
                          <td className="py-2.5 px-4 font-semibold text-slate-900">
                            {row.item_name}
                          </td>
                          <td className="py-2.5 px-3 text-center whitespace-nowrap">
                            {row.status === "baik" ? (
                              <span className="inline-block px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                Baik (✓)
                              </span>
                            ) : (
                              <span className="inline-block px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200">
                                Rusak (!)
                              </span>
                            )}
                          </td>
                          <td className="py-2.5 px-3 text-slate-600">
                            {row.notes || "-"}
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Controls Rekap */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-4 py-3 bg-slate-50/70 border-t border-slate-200 text-xs text-slate-500">
              <div>
                Menampilkan{" "}
                <span className="font-bold text-slate-700">
                  {rekapDetails.length > 0 ? (rekapCurrentPage - 1) * 10 + 1 : 0}
                </span>{" "}
                sampai{" "}
                <span className="font-bold text-slate-700">
                  {Math.min(rekapCurrentPage * 10, rekapDetails.length)}
                </span>{" "}
                dari{" "}
                <span className="font-bold text-slate-700">
                  {rekapDetails.length}
                </span>{" "}
                data
              </div>

              <div className="flex items-center gap-1.5">
                <button
                  type="button"
                  disabled={rekapCurrentPage <= 1}
                  onClick={() => setRekapCurrentPage((p) => Math.max(p - 1, 1))}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer font-medium"
                >
                  <ChevronLeft className="w-3.5 h-3.5" />
                  <span>Sebelumnya</span>
                </button>

                {Array.from({ length: rekapTotalPages }, (_, i) => i + 1)
                  .filter(
                    (p) =>
                      p === 1 ||
                      p === rekapTotalPages ||
                      (p >= rekapCurrentPage - 1 && p <= rekapCurrentPage + 1)
                  )
                  .map((p, idx, arr) => {
                    const prev = arr[idx - 1];
                    const showEllipsis = prev && p - prev > 1;

                    return (
                      <React.Fragment key={p}>
                        {showEllipsis && <span className="px-1 text-slate-400">...</span>}
                        <button
                          type="button"
                          onClick={() => setRekapCurrentPage(p)}
                          className={`w-7 h-7 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                            rekapCurrentPage === p
                              ? "bg-blue-600 text-white shadow-xs"
                              : "bg-white hover:bg-slate-100 text-slate-700 border border-slate-200"
                          }`}
                        >
                          {p}
                        </button>
                      </React.Fragment>
                    );
                  })}

                <button
                  type="button"
                  disabled={rekapCurrentPage >= rekapTotalPages}
                  onClick={() => setRekapCurrentPage((p) => Math.min(p + 1, rekapTotalPages))}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer font-medium"
                >
                  <span>Selanjutnya</span>
                  <ChevronRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      </div>

      {/* ========================================================= */}
      {/* MODAL: TAMBAH OBJEK PEMERIKSAAN                           */}
      {/* ========================================================= */}
      <Modal
        isOpen={isAddItemModalOpen}
        onClose={() => setIsAddItemModalOpen(false)}
        title={`Tambah Objek Pemeriksaan: ${currentActiveRoomObj?.room_name || activeSelectedRoom}`}
        maxWidth="max-w-md"
      >
        <form onSubmit={handleAddItem} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Nama Objek / Item Pemeriksaan <span className="text-rose-500">*</span>
            </label>
            <input
              type="text"
              required
              placeholder="Contoh: Lampu Sorot Panggung, Stop Kontak, dll."
              value={newItemName}
              onChange={(e) => setNewItemName(e.target.value)}
              className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Kategori Item
            </label>
            <select
              value={newItemCategory}
              onChange={(e) => setNewItemCategory(e.target.value)}
              className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            >
              <option value="Umum">Umum</option>
              <option value="Kelistrikan">Kelistrikan</option>
              <option value="Sanitasi / Air">Sanitasi / Air</option>
              <option value="Mebeler">Mebeler</option>
              <option value="Struktur Bangunan">Struktur Bangunan</option>
            </select>
          </div>

          <div className="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsAddItemModalOpen(false)}
              className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="submit"
              disabled={isAddingItem}
              className="flex items-center gap-1.5 px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer disabled:opacity-50"
            >
              {isAddingItem ? (
                <>
                  <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  <span>Menyimpan...</span>
                </>
              ) : (
                <>
                  <Plus className="w-4 h-4" />
                  <span>Tambah Item</span>
                </>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* ========================================================= */}
      {/* MODAL: CATATAN KERUSAKAN / STATUS CHECKLIST               */}
      {/* ========================================================= */}
      {activeCellForNote && (
        <Modal
          isOpen={isDamageNoteModalOpen}
          onClose={() => setIsDamageNoteModalOpen(false)}
          title={`Catatan Pemeriksaan: ${activeCellForNote.item_name}`}
          maxWidth="max-w-md"
        >
          <div className="space-y-4">
            <div className="p-3 bg-slate-50 rounded-xl border border-slate-200 text-xs">
              <div className="font-bold text-slate-800">
                Tanggal: {formatDateID(activeCellForNote.date)}
              </div>
              <div className="text-slate-500">
                Ruang: {currentActiveRoomObj?.room_name || activeSelectedRoom}
              </div>
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Catatan Temuan / Kerusakan:
              </label>
              <textarea
                rows={3}
                placeholder="Rincian kerusakan, penyebab, atau tindak lanjut yang diperlukan..."
                value={activeCellForNote.notes}
                onChange={(e) =>
                  setActiveCellForNote({ ...activeCellForNote, notes: e.target.value })
                }
                className="w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 resize-none"
              />
            </div>

            <div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-slate-100">
              <button
                type="button"
                onClick={() => handleSaveDamageNote("belum", "")}
                className="px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl text-xs font-semibold"
              >
                Reset Kosong (-)
              </button>

              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => handleSaveDamageNote("baik", activeCellForNote.notes)}
                  className="px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold shadow-xs cursor-pointer"
                >
                  Set Baik (✓)
                </button>
                <button
                  type="button"
                  onClick={() => handleSaveDamageNote("rusak", activeCellForNote.notes)}
                  className="px-3.5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-xs font-bold shadow-xs cursor-pointer"
                >
                  Set Rusak (!)
                </button>
              </div>
            </div>
          </div>
        </Modal>
      )}

      {/* ========================================================= */}
      {/* MODAL & PRATINJAU CETAK RESMI DINAS                      */}
      {/* ========================================================= */}
      <Modal
        isOpen={isPrintModalOpen}
        onClose={() => setIsPrintModalOpen(false)}
        title="Pratinjau Cetak Laporan Pemeriksaan Berkala Sarpras"
        maxWidth="max-w-5xl"
        hideOnPrint={false}
      >
        <div className="space-y-4">
          <div className="flex items-center justify-between p-3 bg-slate-100 rounded-xl text-xs font-medium print:hidden">
            <span>
              Laporan resmi siap dicetak atau disimpan ke file PDF.
            </span>
            <button
              type="button"
              onClick={() => {
                if (typeof document !== "undefined") {
                  document.body.style.overflow = "visible";
                }
                window.print();
              }}
              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 Sekarang (Ctrl + P)</span>
            </button>
          </div>

          {/* Area Dokumen Cetak */}
          <div
            id="print-periodic-inspection-document"
            className="printable-document printable-area bg-white p-8 sm:p-10 border border-slate-200 rounded-2xl shadow-xs text-slate-900 print-landscape"
          >
            {/* Kop Surat Resmi SMA BPI 1 Bandung */}
            <div className="w-full mb-4">
              {/* 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 block"
              />
            </div>

            {/* Judul Laporan */}
            <div className="text-center mb-6">
              <h2 className="text-base font-extrabold uppercase tracking-wide text-slate-900">
                Laporan Rekapitulasi Pemeriksaan Berkala Sarana & Prasarana
              </h2>
              <p className="text-xs text-slate-600 mt-1">
                Tahun Ajaran: <strong>{selectedAcademicYear}</strong> | Periode:{" "}
                <strong>
                  {AVAILABLE_MONTHS.find((m) => m.value === selectedMonth)?.label} {selectedYear}
                </strong>
                {activeTab !== "rekapitulasi" && ` | Lokasi: Lantai ${activeFloorNumber} (${currentActiveRoomObj?.room_name || activeSelectedRoom})`}
              </p>
            </div>

            {/* Ringkasan Angka */}
            <div className="grid grid-cols-4 gap-2 mb-4 p-3 bg-slate-50 rounded-xl border border-slate-200 text-center text-xs">
              <div>
                <div className="text-[10px] text-slate-500 font-bold uppercase">Total Titik Cek</div>
                <div className="text-sm font-extrabold text-blue-700">
                  {rekapData?.totalInspected || items.length}
                </div>
              </div>
              <div>
                <div className="text-[10px] text-slate-500 font-bold uppercase">Kondisi Baik</div>
                <div className="text-sm font-extrabold text-emerald-600">
                  {rekapData?.totalBaik || 0}
                </div>
              </div>
              <div>
                <div className="text-[10px] text-slate-500 font-bold uppercase">Ada Kerusakan</div>
                <div className="text-sm font-extrabold text-rose-600">
                  {rekapData?.totalRusak || 0}
                </div>
              </div>
              <div>
                <div className="text-[10px] text-slate-500 font-bold uppercase">Rasio Kelaikan</div>
                <div className="text-sm font-extrabold text-purple-700">
                  {rekapData?.percentageBaik || 0}%
                </div>
              </div>
            </div>

            {/* Tabel Data Rekap Print */}
            <table className="w-full text-left border-collapse border border-slate-300 text-[10px] mb-8">
              <thead>
                <tr className="bg-slate-100 text-slate-800 font-bold border-b border-slate-300 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">LOKASI / RUANG</th>
                  <th className="border border-slate-300 py-2 px-3">OBJEK PEMERIKSAAN</th>
                  <th className="border border-slate-300 py-2 px-2 text-center">STATUS</th>
                  <th className="border border-slate-300 py-2 px-3">CATATAN PEMERIKSAAN</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {(rekapDetails.length > 0 ? rekapDetails : items).map((row: any, idx: number) => {
                  return (
                    <tr key={row.id || idx}>
                      <td className="border border-slate-300 py-1.5 px-2 text-center font-medium">
                        {idx + 1}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3 font-semibold">
                        {row.room_name || currentActiveRoomObj?.room_name || "Lantai " + activeFloorNumber}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3 font-bold text-slate-900">
                        {row.item_name}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-center font-semibold">
                        {row.status === "rusak" ? "Ada Kerusakan (!)" : "Baik (✓)"}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3 text-slate-600">
                        {row.notes || "-"}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

            {/* Footer Tanda Tangan Resmi Dinamis (Kiri: Kepala Sekolah, Kanan: Wakasek Sarana) */}
            <div className="mt-8 pt-4 grid grid-cols-2 gap-8 text-center text-xs signature-block signature-section">
              {/* Sebelah Kiri: Kepala Sekolah */}
              <div className="flex flex-col items-center">
                <p className="text-slate-600 mb-0.5">Mengetahui,</p>
                <p className="font-bold text-slate-900">
                  {kepalaSekolah?.title || "Kepala SMA BPI 1 Bandung"}
                </p>
                <div
                  style={{ height: "72px", minHeight: "72px" }}
                  className="w-full flex items-center justify-center my-2"
                >
                  {kepalaSekolah?.signature_image ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={kepalaSekolah.signature_image}
                      alt="Tanda Tangan Kepala Sekolah"
                      className="h-16 max-w-[140px] object-contain mx-auto"
                    />
                  ) : (
                    <div style={{ height: "72px" }} />
                  )}
                </div>
                <p className="font-bold text-slate-900 underline">
                  {kepalaSekolah?.name && kepalaSekolah.name !== "-"
                    ? kepalaSekolah.name
                    : "Tatang, M.Pd."}
                </p>
                <p className="text-[10px] text-slate-500 font-mono mt-0.5">
                  {kepalaSekolah?.nip && kepalaSekolah.nip !== "-"
                    ? kepalaSekolah.nip.startsWith("NIP")
                      ? kepalaSekolah.nip
                      : `NIP. ${kepalaSekolah.nip}`
                    : "NIPY. 10079"}
                </p>
              </div>

              {/* Sebelah Kanan: Wakasek Sarana */}
              <div className="flex flex-col items-center">
                <p className="text-slate-600 mb-0.5">
                  Bandung,{" "}
                  {new Date().toLocaleDateString("id-ID", {
                    day: "numeric",
                    month: "long",
                    year: "numeric",
                  })}
                </p>
                <p className="font-bold text-slate-900">
                  {wakasekSarana?.title || "Wakasek Bidang Sarana & Prasarana"}
                </p>
                <div
                  style={{ height: "72px", minHeight: "72px" }}
                  className="w-full flex items-center justify-center my-2"
                >
                  {wakasekSarana?.signature_image ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={wakasekSarana.signature_image}
                      alt="Tanda Tangan Wakasek Sarana"
                      className="h-16 max-w-[140px] object-contain mx-auto"
                    />
                  ) : (
                    <div style={{ height: "72px" }} />
                  )}
                </div>
                <p className="font-bold text-slate-900 underline">
                  {wakasekSarana?.name && wakasekSarana.name !== "-"
                    ? wakasekSarana.name
                    : "Muhammad Ridwanto, S.Pd."}
                </p>
                <p className="text-[10px] text-slate-500 font-mono mt-0.5">
                  {wakasekSarana?.nip && wakasekSarana.nip !== "-"
                    ? wakasekSarana.nip.startsWith("NIP")
                      ? wakasekSarana.nip
                      : `NIPY. ${wakasekSarana.nip}`
                    : "NIPY. 10064"}
                </p>
              </div>
            </div>
          </div>
        </div>
      </Modal>

    </div>
  );
};

export default PeriodicInspectionManagementView;