"use client";

import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
import {
  ClipboardList,
  BarChart3,
  Search,
  Plus,
  Pencil,
  Trash2,
  Printer,
  X,
  CheckCircle2,
  AlertTriangle,
  Clock,
  Download,
  Upload,
  Calendar,
  CalendarDays,
  FileSpreadsheet,
  RotateCcw,
  User,
  Package,
  Layers,
  ChevronLeft,
  ChevronRight,
  Filter,
  PieChart,
  TrendingUp,
  Info,
  Check,
  Camera,
  Image as ImageIcon,
  Building2,
  Wrench,
  Hammer,
  Eye,
  DollarSign,
  Coins,
} 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 = [
  "Semua Tahun",
  "2024",
  "2025",
  "2026",
  "2027",
  "2028",
  "2029",
  "2030",
];

export const AVAILABLE_MONTHS = [
  "Semua Bulan",
  "Januari",
  "Februari",
  "Maret",
  "April",
  "Mei",
  "Juni",
  "Juli",
  "Agustus",
  "September",
  "Oktober",
  "November",
  "Desember",
];

export const ACTIVITY_TYPES = [
  "Semua",
  "Pemeriksaan Rutin",
  "Perbaikan Ringan",
  "Perbaikan Mayor",
] as const;

export const MAINTENANCE_STATUSES = [
  "Semua",
  "Dalam Proses",
  "Selesai",
  "Dibatalkan",
] as const;

export interface MaintenanceRecord {
  id: number;
  activity_code: string;
  start_date: string;
  activity_type: string;
  description: string;
  technician: string;
  cost: number;
  status: string;
  end_date: string | null;
  photo_before: string | null;
  photo_after: string | null;
  notes: string | null;
  officer_name: string;
  academic_year: string;
  created_at?: string;
  updated_at?: string;
}

export type MaintenanceTabType = "daftar" | "rekapitulasi";

export const formatRupiah = (val: number | string | null | undefined): string => {
  const num = typeof val === "number" ? val : Number(val) || 0;
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
    maximumFractionDigits: 0,
  }).format(num);
};

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 MaintenanceManagementView: React.FC = () => {
  // Active Tab State (Tab 1: Daftar Perbaikan & Pemeliharaan, Tab 2: Rekapitulasi & Statistik)
  const [activeTab, setActiveTab] = useState<MaintenanceTabType>("daftar");

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

  // Tab 1 Specific Filters & Pagination
  const [tab1SearchTerm, setTab1SearchTerm] = useState<string>("");
  const [tab1TypeFilter, setTab1TypeFilter] = useState<string>("Semua");
  const [tab1StatusFilter, setTab1StatusFilter] = useState<string>("Semua");
  const [tab1CurrentPage, setTab1CurrentPage] = useState<number>(1);

  // Tab 2 Specific Filters & Pagination
  const [selectedYear, setSelectedYear] = useState<string>(() => new Date().getFullYear().toString());
  const [selectedMonth, setSelectedMonth] = useState<string>("Semua Bulan");
  const [selectedTypeFilter, setSelectedTypeFilter] = useState<string>("Semua");
  const [selectedStatusFilter, setSelectedStatusFilter] = useState<string>("Semua");
  const [tab2SearchTerm, setTab2SearchTerm] = useState<string>("");
  const [tab2CurrentPage, setTab2CurrentPage] = useState<number>(1);

  // Chart view toggle: "bar" | "line"
  const [trendChartType, setTrendChartType] = useState<"bar" | "line">("bar");

  // Data State
  const [records, setRecords] = useState<MaintenanceRecord[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // Modal State
  const [isFormModalOpen, setIsFormModalOpen] = useState<boolean>(false);
  const [isQuickStatusModalOpen, setIsQuickStatusModalOpen] = useState<boolean>(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
  const [isImportModalOpen, setIsImportModalOpen] = useState<boolean>(false);
  const [isPrintModalOpen, setIsPrintModalOpen] = useState<boolean>(false);
  const [selectedRecord, setSelectedRecord] = useState<MaintenanceRecord | null>(null);

  // Lightbox Modal for Photo Preview
  const [lightboxImage, setLightboxImage] = useState<{ url: string; title: string } | null>(null);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.key === "Escape" || e.key === "Esc") && lightboxImage) {
        e.preventDefault();
        e.stopPropagation();
        setLightboxImage(null);
      }
    };
    if (lightboxImage) {
      document.body.style.overflow = "hidden";
      window.addEventListener("keydown", handleKeyDown);
    }
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      const otherDialogs = document.querySelectorAll('[role="dialog"]');
      if (otherDialogs.length === 0) {
        document.body.style.overflow = "";
      }
    };
  }, [lightboxImage]);

  // Form State
  const [formData, setFormData] = useState<{
    activity_code: string;
    start_date: string;
    activity_type: string;
    description: string;
    technician: string;
    cost: number | string;
    status: string;
    end_date: string;
    photo_before: string | null;
    photo_after: string | null;
    notes: string;
    officer_name: string;
  }>({
    activity_code: "",
    start_date: new Date().toISOString().split("T")[0],
    activity_type: "Pemeriksaan Rutin",
    description: "",
    technician: "",
    cost: 0,
    status: "Dalam Proses",
    end_date: "",
    photo_before: null,
    photo_after: null,
    notes: "",
    officer_name: "",
  });

  // Quick Status Modal Form State
  const [quickStatusData, setQuickStatusData] = useState<{
    status: string;
    end_date: string;
    cost: number | string;
    notes: string;
    photo_after: string | null;
  }>({
    status: "Selesai",
    end_date: new Date().toISOString().split("T")[0],
    cost: 0,
    notes: "",
    photo_after: null,
  });

  const [formError, setFormError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  // Import Excel State
  const [importFile, setImportFile] = useState<File | null>(null);
  const [parsedRows, setParsedRows] = useState<any[]>([]);
  const [importError, setImportError] = useState<string | null>(null);
  const [isImporting, setIsImporting] = useState<boolean>(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 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);
    }, 3500);
  };

  // Master Pejabat Sekolah (Kepala Sekolah & Wakasek Sarana)
  const { getOfficial } = useSchoolOfficials();
  const kepalaSekolah = getOfficial("kepala_sekolah");
  const wakasekSarana = getOfficial("wakasek_sarana");

  // Fetch Maintenance Records
  const fetchRecords = useCallback(
    async (academicYear: string = selectedAcademicYear) => {
      try {
        setIsLoading(true);
        setError(null);
        const res = await fetch(
          `/api/sarpras/perbaikan?academic_year=${encodeURIComponent(academicYear)}`,
          { cache: "no-store" }
        );
        const json = await res.json();
        if (!res.ok || !json.success) {
          throw new Error(json.error || "Gagal memuat data perbaikan & pemeliharaan");
        }
        setRecords(json.data || []);
      } catch (err: any) {
        console.error("fetchRecords error:", err);
        setError(err.message || "Terjadi kesalahan saat memuat data");
      } finally {
        setIsLoading(false);
      }
    },
    [selectedAcademicYear]
  );

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

  // Reset pagination on filter changes
  useEffect(() => {
    setTab1CurrentPage(1);
  }, [tab1SearchTerm, tab1TypeFilter, tab1StatusFilter, selectedAcademicYear]);

  useEffect(() => {
    setTab2CurrentPage(1);
  }, [selectedYear, selectedMonth, selectedTypeFilter, selectedStatusFilter, tab2SearchTerm, selectedAcademicYear]);

  // Tab 1 Filtered List
  const tab1FilteredRecords = useMemo(() => {
    return records.filter((item) => {
      if (tab1TypeFilter !== "Semua" && item.activity_type !== tab1TypeFilter) {
        return false;
      }
      if (tab1StatusFilter !== "Semua" && item.status !== tab1StatusFilter) {
        return false;
      }
      if (tab1SearchTerm.trim()) {
        const term = tab1SearchTerm.toLowerCase();
        const match =
          item.activity_code.toLowerCase().includes(term) ||
          item.description.toLowerCase().includes(term) ||
          item.technician.toLowerCase().includes(term) ||
          item.officer_name.toLowerCase().includes(term) ||
          (item.notes && item.notes.toLowerCase().includes(term));
        if (!match) return false;
      }
      return true;
    });
  }, [records, tab1TypeFilter, tab1StatusFilter, tab1SearchTerm]);

  // Tab 1 Pagination (10 data per page)
  const tab1TotalPages = Math.ceil(tab1FilteredRecords.length / 10) || 1;
  const tab1PaginatedData = useMemo(() => {
    const start = (tab1CurrentPage - 1) * 10;
    return tab1FilteredRecords.slice(start, start + 10);
  }, [tab1FilteredRecords, tab1CurrentPage]);

  // Tab 2 Filtered List for Recap & Statistics
  const tab2FilteredRecords = useMemo(() => {
    return records.filter((item) => {
      // Filter Tahun
      if (selectedYear !== "Semua Tahun") {
        const itemYear = (item.start_date || "").substring(0, 4);
        if (itemYear !== selectedYear) return false;
      }

      // Filter Bulan
      if (selectedMonth !== "Semua Bulan") {
        const monthIdx = AVAILABLE_MONTHS.indexOf(selectedMonth);
        if (monthIdx > 0) {
          const itemDate = new Date(item.start_date);
          if (!isNaN(itemDate.getTime()) && itemDate.getMonth() + 1 !== monthIdx) {
            return false;
          }
        }
      }

      // Filter Jenis Aktivitas
      if (selectedTypeFilter !== "Semua" && item.activity_type !== selectedTypeFilter) {
        return false;
      }

      // Filter Status
      if (selectedStatusFilter !== "Semua" && item.status !== selectedStatusFilter) {
        return false;
      }

      // Filter Search
      if (tab2SearchTerm.trim()) {
        const term = tab2SearchTerm.toLowerCase();
        const match =
          item.activity_code.toLowerCase().includes(term) ||
          item.description.toLowerCase().includes(term) ||
          item.technician.toLowerCase().includes(term) ||
          item.officer_name.toLowerCase().includes(term) ||
          (item.notes && item.notes.toLowerCase().includes(term));
        if (!match) return false;
      }

      return true;
    });
  }, [records, selectedYear, selectedMonth, selectedTypeFilter, selectedStatusFilter, tab2SearchTerm]);

  // Tab 2 Pagination (10 data per page)
  const tab2TotalPages = Math.ceil(tab2FilteredRecords.length / 10) || 1;
  const tab2PaginatedData = useMemo(() => {
    const start = (tab2CurrentPage - 1) * 10;
    return tab2FilteredRecords.slice(start, start + 10);
  }, [tab2FilteredRecords, tab2CurrentPage]);

  // Metric Calculation (Tab 2)
  const rekapStats = useMemo(() => {
    let total = tab2FilteredRecords.length;
    let dalamProses = 0;
    let selesai = 0;
    let dibatalkan = 0;
    let totalBiaya = 0;

    let rutin = 0;
    let ringan = 0;
    let mayor = 0;

    tab2FilteredRecords.forEach((item) => {
      totalBiaya += Number(item.cost) || 0;
      if (item.status === "Dalam Proses") dalamProses++;
      else if (item.status === "Selesai") selesai++;
      else if (item.status === "Dibatalkan") dibatalkan++;

      if (item.activity_type.toLowerCase().includes("rutin")) rutin++;
      else if (item.activity_type.toLowerCase().includes("ringan")) ringan++;
      else if (item.activity_type.toLowerCase().includes("mayor")) mayor++;
    });

    return {
      total,
      dalamProses,
      selesai,
      dibatalkan,
      totalBiaya,
      rutin,
      ringan,
      mayor,
    };
  }, [tab2FilteredRecords]);

  // Monthly Distribution for Trend Chart
  const monthlyTrendData = useMemo(() => {
    const counts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    const monthLabels = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "Mei",
      "Jun",
      "Jul",
      "Agu",
      "Sep",
      "Okt",
      "Nov",
      "Des",
    ];

    tab2FilteredRecords.forEach((item) => {
      const d = new Date(item.start_date);
      if (!isNaN(d.getTime())) {
        const m = d.getMonth();
        if (m >= 0 && m < 12) {
          counts[m]++;
        }
      }
    });

    const maxVal = Math.max(...counts, 1);
    return monthLabels.map((lbl, idx) => ({
      month: lbl,
      count: counts[idx],
      pct: (counts[idx] / maxVal) * 100,
    }));
  }, [tab2FilteredRecords]);

  // Open Form Modal for Create
  const handleOpenCreateModal = () => {
    setSelectedRecord(null);
    setFormData({
      activity_code: "",
      start_date: new Date().toISOString().split("T")[0],
      activity_type: "Pemeriksaan Rutin",
      description: "",
      technician: "",
      cost: 0,
      status: "Dalam Proses",
      end_date: "",
      photo_before: null,
      photo_after: null,
      notes: "",
      officer_name: "",
    });
    setFormError(null);
    setIsFormModalOpen(true);
  };

  // Open Form Modal for Edit
  const handleOpenEditModal = (item: MaintenanceRecord) => {
    setSelectedRecord(item);
    setFormData({
      activity_code: item.activity_code,
      start_date: item.start_date || new Date().toISOString().split("T")[0],
      activity_type: item.activity_type || "Pemeriksaan Rutin",
      description: item.description || "",
      technician: item.technician || "",
      cost: item.cost || 0,
      status: item.status || "Dalam Proses",
      end_date: item.end_date || "",
      photo_before: item.photo_before || null,
      photo_after: item.photo_after || null,
      notes: item.notes || "",
      officer_name: item.officer_name || "",
    });
    setFormError(null);
    setIsFormModalOpen(true);
  };

  // Open Quick Status Update Modal
  const handleOpenQuickStatusModal = (item: MaintenanceRecord) => {
    setSelectedRecord(item);
    setQuickStatusData({
      status: item.status === "Selesai" ? "Selesai" : "Selesai",
      end_date: item.end_date || new Date().toISOString().split("T")[0],
      cost: item.cost || 0,
      notes: item.notes || "",
      photo_after: item.photo_after || null,
    });
    setFormError(null);
    setIsQuickStatusModalOpen(true);
  };

  // Open Delete Confirmation Modal
  const handleOpenDeleteModal = (item: MaintenanceRecord) => {
    setSelectedRecord(item);
    setIsDeleteModalOpen(true);
  };

  // Handle Photo Upload (Convert to Base64)
  const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>, target: "before" | "after") => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 2 * 1024 * 1024) {
      showToast("Ukuran foto maksimal 2 MB", "error");
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      const result = reader.result as string;
      if (target === "before") {
        setFormData((prev) => ({ ...prev, photo_before: result }));
      } else {
        setFormData((prev) => ({ ...prev, photo_after: result }));
      }
    };
    reader.readAsDataURL(file);
  };

  const handleQuickPhotoAfterUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 2 * 1024 * 1024) {
      showToast("Ukuran foto maksimal 2 MB", "error");
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      setQuickStatusData((prev) => ({ ...prev, photo_after: reader.result as string }));
    };
    reader.readAsDataURL(file);
  };

  // Save Add / Edit Record
  const handleSubmitForm = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.description.trim()) {
      setFormError("Deskripsi aktivitas wajib diisi");
      return;
    }
    if (!formData.technician.trim()) {
      setFormError("Nama teknisi / pelaksana wajib diisi");
      return;
    }
    if (!formData.officer_name.trim()) {
      setFormError("Nama petugas penanggung jawab wajib diisi");
      return;
    }

    try {
      setIsSubmitting(true);
      setFormError(null);

      const payload = {
        activity_code: formData.activity_code.trim() || undefined,
        start_date: formData.start_date,
        activity_type: formData.activity_type,
        description: formData.description.trim(),
        technician: formData.technician.trim(),
        cost: Number(formData.cost) || 0,
        status: formData.status,
        end_date: formData.end_date || null,
        photo_before: formData.photo_before,
        photo_after: formData.photo_after,
        notes: formData.notes.trim() || null,
        officer_name: formData.officer_name.trim(),
        academic_year: selectedAcademicYear,
      };

      const url = selectedRecord
        ? `/api/sarpras/perbaikan/${selectedRecord.id}`
        : "/api/sarpras/perbaikan";
      const method = selectedRecord ? "PUT" : "POST";

      const res = await fetch(url, {
        method,
        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 data aktivitas");
      }

      showToast(
        selectedRecord
          ? "Data perbaikan & pemeliharaan berhasil diperbarui"
          : "Catatan aktivitas baru berhasil ditambahkan",
        "success"
      );

      setIsFormModalOpen(false);
      fetchRecords(selectedAcademicYear);
    } catch (err: any) {
      console.error("handleSubmitForm error:", err);
      setFormError(err.message || "Terjadi kesalahan saat menyimpan data");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Save Quick Status Update
  const handleSubmitQuickStatus = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedRecord) return;

    try {
      setIsSubmitting(true);
      setFormError(null);

      const payload = {
        status: quickStatusData.status,
        end_date: quickStatusData.end_date || (quickStatusData.status === "Selesai" ? new Date().toISOString().split("T")[0] : null),
        cost: Number(quickStatusData.cost) || 0,
        notes: quickStatusData.notes.trim() || selectedRecord.notes,
        photo_after: quickStatusData.photo_after || selectedRecord.photo_after,
      };

      const res = await fetch(`/api/sarpras/perbaikan/${selectedRecord.id}`, {
        method: "PUT",
        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 memperbarui status aktivitas");
      }

      showToast("Status aktivitas berhasil diperbarui", "success");
      setIsQuickStatusModalOpen(false);
      fetchRecords(selectedAcademicYear);
    } catch (err: any) {
      console.error("handleSubmitQuickStatus error:", err);
      setFormError(err.message || "Terjadi kesalahan saat update status");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Delete Record
  const handleDeleteRecord = async () => {
    if (!selectedRecord) return;
    try {
      setIsSubmitting(true);
      const res = await fetch(`/api/sarpras/perbaikan/${selectedRecord.id}`, {
        method: "DELETE",
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal menghapus data aktivitas");
      }
      showToast("Data aktivitas berhasil dihapus", "success");
      setIsDeleteModalOpen(false);
      fetchRecords(selectedAcademicYear);
    } catch (err: any) {
      console.error("handleDeleteRecord error:", err);
      showToast(err.message || "Gagal menghapus data", "error");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Download Excel Template
  const handleDownloadTemplate = () => {
    window.location.href = "/api/sarpras/perbaikan/template";
  };

  // Handle Excel File Selection
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setImportFile(file);
    setImportError(null);

    const reader = new FileReader();
    reader.onload = (evt) => {
      try {
        const bstr = evt.target?.result;
        const wb = XLSX.read(bstr, { type: "binary" });
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
        const data = XLSX.utils.sheet_to_json(ws, { defval: "" });

        if (!data || data.length === 0) {
          setImportError("File Excel kosong atau format tabel tidak dikenali.");
          setParsedRows([]);
          return;
        }

        setParsedRows(data);
      } catch (err: any) {
        console.error("Excel parse error:", err);
        setImportError("Format file tidak didukung atau file rusak.");
        setParsedRows([]);
      }
    };
    reader.readAsBinaryString(file);
  };

  // Submit Import Excel
  const handleImportSubmit = async () => {
    if (!parsedRows || parsedRows.length === 0) {
      setImportError("Silakan pilih file Excel yang memiliki data valid terlebih dahulu.");
      return;
    }

    try {
      setIsImporting(true);
      setImportError(null);

      const res = await fetch("/api/sarpras/perbaikan/import", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          items: parsedRows,
          academic_year: selectedAcademicYear,
        }),
      });

      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal mengimpor file Excel");
      }

      showToast(json.message || "Data berhasil diimpor!", "success");
      setIsImportModalOpen(false);
      setImportFile(null);
      setParsedRows([]);
      fetchRecords(selectedAcademicYear);
    } catch (err: any) {
      console.error("handleImportSubmit error:", err);
      setImportError(err.message || "Gagal memproses data import");
    } finally {
      setIsImporting(false);
    }
  };

  // Export Active Data to Excel
  const handleExportDataExcel = () => {
    const dataToExport = activeTab === "daftar" ? tab1FilteredRecords : tab2FilteredRecords;
    if (dataToExport.length === 0) {
      showToast("Tidak ada data untuk diekspor", "error");
      return;
    }

    const exportRows = dataToExport.map((item, idx) => ({
      No: idx + 1,
      "Kode Aktivitas": item.activity_code,
      "Tanggal Mulai": item.start_date,
      "Jenis Aktivitas": item.activity_type,
      "Deskripsi": item.description,
      "Teknisi / Pelaksana": item.technician,
      "Biaya": item.cost,
      "Status": item.status,
      "Tanggal Selesai": item.end_date || "-",
      "Catatan": item.notes || "-",
      "Petugas": item.officer_name,
      "Tahun Ajaran": item.academic_year,
    }));

    const ws = XLSX.utils.json_to_sheet(exportRows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Perbaikan & Pemeliharaan");
    XLSX.writeFile(
      wb,
      `Perbaikan_Pemeliharaan_Sarpras_SMA_BPI_1_${new Date().toISOString().split("T")[0]}.xlsx`
    );
    showToast("Berhasil mengekspor data ke Excel", "success");
  };

  // Trigger Print Browser
  const handlePrintDocument = () => {
    if (typeof document !== "undefined") {
      document.body.style.overflow = "visible";
    }
    window.print();
  };

  return (
    <div className="space-y-6 pb-12">
      {/* Toast Notification */}
      {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 */}
      <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">
              <Wrench 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">
              Perbaikan & Pemeliharaan
            </h1>
            <p className="text-xs sm:text-sm text-gray-500 mt-1">
              Pencatatan sirkulasi perbaikan & pemeliharaan sarana, tindak lanjut servis teknisi, rincian biaya pengeluaran, dokumentasi sebelum & sesudah, serta pelaporan resmi dinas 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="maintenance-academic-year-select" className="text-xs font-semibold text-gray-600 shrink-0">
                T.A:
              </label>
              <select
                id="maintenance-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>

      {/* Top Tab Navigation & Web Dashboard 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">
        <button
          type="button"
          onClick={() => setActiveTab("daftar")}
          className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-bold transition-all ${
            activeTab === "daftar"
              ? "bg-blue-600 text-white shadow-sm"
              : "text-slate-600 hover:text-slate-900 hover:bg-white/60"
          }`}
        >
          <ClipboardList className="w-4 h-4" />
          <span>Daftar Perbaikan & Pemeliharaan</span>
          <span
            className={`px-2 py-0.5 rounded-full text-[10px] font-extrabold ${
              activeTab === "daftar"
                ? "bg-white/20 text-white"
                : "bg-slate-200 text-slate-700"
            }`}
          >
            {records.length}
          </span>
        </button>

        <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>
          <span
            className={`px-2 py-0.5 rounded-full text-[10px] font-extrabold ${
              activeTab === "rekapitulasi"
                ? "bg-white/20 text-white"
                : "bg-slate-200 text-slate-700"
            }`}
          >
            {tab2FilteredRecords.length}
          </span>
        </button>
      </div>

      {/* ========================================================= */}
      {/* TAB 1: DAFTAR PERBAIKAN & PEMELIHARAAN                    */}
      {/* ========================================================= */}
      {activeTab === "daftar" && (
        <div className="space-y-4">
          {/* Action Bar Atas */}
          <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">
            {/* Tombol Utama */}
            <div className="flex flex-wrap items-center gap-2">
              <button
                type="button"
                onClick={handleOpenCreateModal}
                className="flex items-center gap-2 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"
              >
                <Plus className="w-4 h-4" />
                <span>Tambah Aktivitas</span>
              </button>

              {/* [ 📊 Export Excel ] */}
              <button
                type="button"
                onClick={handleExportDataExcel}
                className="flex items-center gap-2 px-3.5 py-2.5 bg-white hover:bg-emerald-50 text-emerald-700 rounded-xl text-xs font-bold border border-emerald-300 shadow-xs transition-colors cursor-pointer"
                title="Ekspor Data Perbaikan & Pemeliharaan ke Excel (.xlsx)"
              >
                <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
                <span>Export Excel</span>
              </button>

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

              <button
                type="button"
                onClick={() => {
                  setImportFile(null);
                  setParsedRows([]);
                  setImportError(null);
                  setIsImportModalOpen(true);
                }}
                className="flex items-center gap-2 px-3.5 py-2.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 rounded-xl text-xs font-bold border border-emerald-200 transition-colors cursor-pointer"
                title="Unggah Data Excel Massal .xlsx"
              >
                <Upload className="w-4 h-4 text-emerald-600" />
                <span>Import Excel</span>
              </button>
            </div>

            {/* Filter Cepat Tab 1 & Pencarian */}
            <div className="flex flex-wrap items-center gap-2">
              {/* Filter Jenis */}
              <select
                value={tab1TypeFilter}
                onChange={(e) => setTab1TypeFilter(e.target.value)}
                className="px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              >
                <option value="Semua">Semua Jenis</option>
                <option value="Pemeriksaan Rutin">Pemeriksaan Rutin</option>
                <option value="Perbaikan Ringan">Perbaikan Ringan</option>
                <option value="Perbaikan Mayor">Perbaikan Mayor</option>
              </select>

              {/* Filter Status */}
              <select
                value={tab1StatusFilter}
                onChange={(e) => setTab1StatusFilter(e.target.value)}
                className="px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              >
                <option value="Semua">Semua Status</option>
                <option value="Dalam Proses">Dalam Proses</option>
                <option value="Selesai">Selesai</option>
                <option value="Dibatalkan">Dibatalkan</option>
              </select>

              {/* Search Box */}
              <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 aktivitas, teknisi, petugas..."
                  value={tab1SearchTerm}
                  onChange={(e) => setTab1SearchTerm(e.target.value)}
                  className="pl-9 pr-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 w-48 sm:w-64"
                />
                {tab1SearchTerm && (
                  <button
                    onClick={() => setTab1SearchTerm("")}
                    className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                  >
                    <X className="w-3 h-3" />
                  </button>
                )}
              </div>
            </div>
          </div>

          {/* Tabel Perbaikan & Pemeliharaan */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse text-xs">
                <thead>
                  <tr className="bg-slate-50/80 border-b border-slate-200 text-slate-600 font-bold uppercase tracking-wider text-[11px]">
                    <th className="py-3.5 px-3 text-center w-12">NO</th>
                    <th className="py-3.5 px-3">TGL MULAI</th>
                    <th className="py-3.5 px-3">JENIS AKTIVITAS</th>
                    <th className="py-3.5 px-4 min-w-[180px]">DESKRIPSI</th>
                    <th className="py-3.5 px-3">TEKNISI</th>
                    <th className="py-3.5 px-3 text-right">BIAYA</th>
                    <th className="py-3.5 px-3 text-center">STATUS</th>
                    <th className="py-3.5 px-3">TGL SELESAI</th>
                    <th className="py-3.5 px-3 text-center">FOTO SBLM/SSDH</th>
                    <th className="py-3.5 px-3 min-w-[140px]">CATATAN</th>
                    <th className="py-3.5 px-3">PETUGAS</th>
                    <th className="py-3.5 px-3 text-center w-28">AKSI</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 text-slate-700">
                  {isLoading ? (
                    <tr>
                      <td colSpan={12} 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 perbaikan & pemeliharaan...</span>
                        </div>
                      </td>
                    </tr>
                  ) : tab1PaginatedData.length === 0 ? (
                    <tr>
                      <td colSpan={12} className="py-16 text-center text-slate-400">
                        <div className="flex flex-col items-center justify-center gap-2">
                          <Wrench className="w-10 h-10 text-slate-300 stroke-[1.5]" />
                          <p className="font-semibold text-slate-600">
                            Belum ada catatan aktivitas perbaikan & pemeliharaan
                          </p>
                          <p className="text-[11px] text-slate-400 max-w-sm">
                            Gunakan tombol &quot;+ Tambah Aktivitas&quot; atau &quot;Import Excel&quot; untuk mulai mencatat riwayat pemeliharaan sarana sekolah.
                          </p>
                        </div>
                      </td>
                    </tr>
                  ) : (
                    tab1PaginatedData.map((item, idx) => {
                      const rowNum = (tab1CurrentPage - 1) * 10 + idx + 1;

                      // Badge Jenis Aktivitas
                      let typeBadgeColor = "bg-sky-50 text-sky-700 border-sky-200";
                      if (item.activity_type.toLowerCase().includes("ringan")) {
                        typeBadgeColor = "bg-amber-50 text-amber-700 border-amber-200";
                      } else if (item.activity_type.toLowerCase().includes("mayor")) {
                        typeBadgeColor = "bg-purple-50 text-purple-700 border-purple-200";
                      }

                      // Badge Status
                      let statusBadgeColor = "bg-amber-50 text-amber-700 border-amber-200";
                      if (item.status === "Selesai") {
                        statusBadgeColor = "bg-emerald-50 text-emerald-700 border-emerald-200";
                      } else if (item.status === "Dibatalkan") {
                        statusBadgeColor = "bg-rose-50 text-rose-700 border-rose-200";
                      }

                      return (
                        <tr
                          key={item.id}
                          className="hover:bg-slate-50/70 transition-colors"
                        >
                          <td className="py-3 px-3 text-center font-medium text-slate-500">
                            {rowNum}
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap font-medium text-slate-800">
                            {formatDateID(item.start_date)}
                            <div className="text-[10px] text-slate-400">
                              {item.activity_code}
                            </div>
                          </td>
                          <td className="py-3 px-3">
                            <span
                              className={`inline-block px-2.5 py-1 rounded-full text-[10px] font-bold border ${typeBadgeColor}`}
                            >
                              {item.activity_type}
                            </span>
                          </td>
                          <td className="py-3 px-4 font-semibold text-slate-800 max-w-xs">
                            <div className="line-clamp-2" title={item.description}>
                              {item.description}
                            </div>
                          </td>
                          <td className="py-3 px-3 font-medium text-slate-700 whitespace-nowrap">
                            {item.technician}
                          </td>
                          <td className="py-3 px-3 text-right font-bold text-slate-900 whitespace-nowrap">
                            {formatRupiah(item.cost)}
                          </td>
                          <td className="py-3 px-3 text-center whitespace-nowrap">
                            <span
                              className={`inline-block px-2.5 py-1 rounded-full text-[10px] font-bold border ${statusBadgeColor}`}
                            >
                              {item.status}
                            </span>
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap text-slate-600">
                            {formatDateID(item.end_date)}
                          </td>
                          {/* FOTO SBLM / SSDH */}
                          <td className="py-3 px-3 text-center whitespace-nowrap">
                            <div className="inline-flex items-center gap-1.5">
                              {/* Foto Sebelum */}
                              {item.photo_before ? (
                                <button
                                  type="button"
                                  onClick={() =>
                                    setLightboxImage({
                                      url: item.photo_before!,
                                      title: `Foto Sebelum - ${item.activity_code} (${item.description})`,
                                    })
                                  }
                                  className="group relative w-8 h-8 rounded-lg overflow-hidden border border-slate-200 hover:border-blue-500 cursor-pointer shadow-2xs"
                                  title="Lihat Foto Sebelum"
                                >
                                  {/* eslint-disable-next-line @next/next/no-img-element */}
                                  <img
                                    src={item.photo_before}
                                    alt="Foto Sebelum"
                                    className="w-full h-full object-cover group-hover:scale-110 transition-transform"
                                  />
                                  <span className="absolute bottom-0 inset-x-0 bg-slate-900/60 text-[8px] font-bold text-white text-center">
                                    Sblm
                                  </span>
                                </button>
                              ) : (
                                <span className="w-8 h-8 rounded-lg border border-dashed border-slate-200 flex flex-col items-center justify-center text-[8px] text-slate-400 bg-slate-50">
                                  -
                                </span>
                              )}

                              {/* Foto Sesudah */}
                              {item.photo_after ? (
                                <button
                                  type="button"
                                  onClick={() =>
                                    setLightboxImage({
                                      url: item.photo_after!,
                                      title: `Foto Sesudah - ${item.activity_code} (${item.description})`,
                                    })
                                  }
                                  className="group relative w-8 h-8 rounded-lg overflow-hidden border border-slate-200 hover:border-emerald-500 cursor-pointer shadow-2xs"
                                  title="Lihat Foto Sesudah"
                                >
                                  {/* eslint-disable-next-line @next/next/no-img-element */}
                                  <img
                                    src={item.photo_after}
                                    alt="Foto Sesudah"
                                    className="w-full h-full object-cover group-hover:scale-110 transition-transform"
                                  />
                                  <span className="absolute bottom-0 inset-x-0 bg-emerald-900/70 text-[8px] font-bold text-white text-center">
                                    Ssdh
                                  </span>
                                </button>
                              ) : (
                                <span className="w-8 h-8 rounded-lg border border-dashed border-slate-200 flex flex-col items-center justify-center text-[8px] text-slate-400 bg-slate-50">
                                  -
                                </span>
                              )}
                            </div>
                          </td>
                          <td className="py-3 px-3 text-slate-600 max-w-[180px]">
                            <div className="line-clamp-2" title={item.notes || "-"}>
                              {item.notes || "-"}
                            </div>
                          </td>
                          <td className="py-3 px-3 font-medium text-slate-700 whitespace-nowrap">
                            {item.officer_name}
                          </td>
                          {/* Aksi Baris */}
                          <td className="py-3 px-3 text-center whitespace-nowrap">
                            <div className="flex items-center justify-center gap-1">
                              <button
                                type="button"
                                onClick={() => handleOpenQuickStatusModal(item)}
                                className="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors cursor-pointer"
                                title="Update Status / Selesai"
                              >
                                <CheckCircle2 className="w-4 h-4" />
                              </button>
                              <button
                                type="button"
                                onClick={() => handleOpenEditModal(item)}
                                className="p-1.5 text-amber-600 hover:bg-amber-50 rounded-lg transition-colors cursor-pointer"
                                title="Edit Aktivitas"
                              >
                                <Pencil className="w-4 h-4" />
                              </button>
                              <button
                                type="button"
                                onClick={() => handleOpenDeleteModal(item)}
                                className="p-1.5 text-rose-600 hover:bg-rose-50 rounded-lg transition-colors cursor-pointer"
                                title="Hapus Catatan"
                              >
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Kontrol Tab 1 */}
            <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">
                  {tab1FilteredRecords.length > 0 ? (tab1CurrentPage - 1) * 10 + 1 : 0}
                </span>{" "}
                sampai{" "}
                <span className="font-bold text-slate-700">
                  {Math.min(tab1CurrentPage * 10, tab1FilteredRecords.length)}
                </span>{" "}
                dari{" "}
                <span className="font-bold text-slate-700">
                  {tab1FilteredRecords.length}
                </span>{" "}
                data
              </div>

              <div className="flex items-center gap-1.5">
                <button
                  type="button"
                  disabled={tab1CurrentPage <= 1}
                  onClick={() => setTab1CurrentPage((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: tab1TotalPages }, (_, i) => i + 1)
                  .filter((p) => {
                    return (
                      p === 1 ||
                      p === tab1TotalPages ||
                      (p >= tab1CurrentPage - 1 && p <= tab1CurrentPage + 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={() => setTab1CurrentPage(p)}
                          className={`w-7 h-7 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                            tab1CurrentPage === 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={tab1CurrentPage >= tab1TotalPages}
                  onClick={() =>
                    setTab1CurrentPage((p) => Math.min(p + 1, tab1TotalPages))
                  }
                  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 2: REKAPITULASI & STATISTIK                           */}
      {/* ========================================================= */}
      {activeTab === "rekapitulasi" && (
        <div className="space-y-6">
          {/* Multi-Filter Bar Tab 2 */}
          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-4">
            <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
                </h3>
              </div>
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={handleExportDataExcel}
                  className="flex items-center gap-2 px-3.5 py-2 bg-white hover:bg-emerald-50 text-emerald-700 rounded-xl text-xs font-bold border border-emerald-300 shadow-xs transition-colors cursor-pointer"
                  title="Ekspor Data Rekapitulasi Perbaikan ke Excel (.xlsx)"
                >
                  <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
                  <span>Export Excel</span>
                </button>
                <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>

            {/* Filter Dropdowns Grid */}
            <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={selectedYear}
                  onChange={(e) => setSelectedYear(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"
                >
                  {AVAILABLE_YEARS.map((yr) => (
                    <option key={yr} value={yr}>
                      {yr}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Bulan */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Filter Bulan
                </label>
                <select
                  value={selectedMonth}
                  onChange={(e) => setSelectedMonth(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"
                >
                  {AVAILABLE_MONTHS.map((mo) => (
                    <option key={mo} value={mo}>
                      {mo}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Jenis Aktivitas */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Jenis Aktivitas
                </label>
                <select
                  value={selectedTypeFilter}
                  onChange={(e) => setSelectedTypeFilter(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"
                >
                  {ACTIVITY_TYPES.map((type) => (
                    <option key={type} value={type}>
                      {type}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Status */}
              <div>
                <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                  Status Penyelesaian
                </label>
                <select
                  value={selectedStatusFilter}
                  onChange={(e) => setSelectedStatusFilter(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"
                >
                  {MAINTENANCE_STATUSES.map((st) => (
                    <option key={st} value={st}>
                      {st}
                    </option>
                  ))}
                </select>
              </div>

              {/* Filter Tahun Ajaran (threshold Juli) */}
              <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) */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <StatCard
              title="Total Aktivitas"
              value={isLoading ? "..." : `${rekapStats.total} Catatan`}
              subtitle="Sesuai filter kriteria"
              icon={Wrench}
              iconColor="blue"
            />
            <StatCard
              title="Dalam Proses"
              value={isLoading ? "..." : `${rekapStats.dalamProses} Aktivitas`}
              subtitle="Sedang berjalan"
              icon={Clock}
              iconColor="warning"
            />
            <StatCard
              title="Selesai"
              value={isLoading ? "..." : `${rekapStats.selesai} Tuntas`}
              subtitle="Telah diselesaikan"
              icon={CheckCircle2}
              iconColor="success"
            />
            <StatCard
              title="Total Biaya Pengeluaran"
              value={isLoading ? "..." : formatRupiah(rekapStats.totalBiaya)}
              subtitle="Akumulasi biaya perbaikan"
              icon={Coins}
              iconColor="purple"
            />
          </div>

          {/* Visualisasi Grafik Perbaikan & Pemeliharaan */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
            {/* Grafik Batang / Garis Tren Aktivitas */}
            <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 Aktivitas Perbaikan & Pemeliharaan
                      </h3>
                      <p className="text-[11px] text-slate-500">
                        Distribusi jumlah pekerjaan per bulan ({selectedYear})
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center bg-slate-100 p-0.5 rounded-xl border border-slate-200">
                    <button
                      type="button"
                      onClick={() => setTrendChartType("bar")}
                      className={`flex items-center gap-1 px-2.5 py-1 text-xs font-semibold rounded-lg transition-colors cursor-pointer ${
                        trendChartType === "bar"
                          ? "bg-white text-blue-600 shadow-xs"
                          : "text-slate-600 hover:text-slate-900"
                      }`}
                      title="Grafik Batang (Bar Chart)"
                    >
                      <BarChart3 className="w-3.5 h-3.5" />
                      <span>Batang</span>
                    </button>
                    <button
                      type="button"
                      onClick={() => setTrendChartType("line")}
                      className={`flex items-center gap-1 px-2.5 py-1 text-xs font-semibold rounded-lg transition-colors cursor-pointer ${
                        trendChartType === "line"
                          ? "bg-white text-blue-600 shadow-xs"
                          : "text-slate-600 hover:text-slate-900"
                      }`}
                      title="Grafik Garis (Line Chart)"
                    >
                      <TrendingUp className="w-3.5 h-3.5" />
                      <span>Garis</span>
                    </button>
                  </div>
                </div>

                <div className="relative mt-4 pt-2">
                  <svg
                    viewBox="0 0 520 180"
                    className="w-full h-44 overflow-visible select-none"
                  >
                    <defs>
                      <linearGradient id="mntBarGradient" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#2563eb" />
                        <stop offset="100%" stopColor="#3b82f6" />
                      </linearGradient>
                      <linearGradient id="mntLineAreaGradient" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.35" />
                        <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
                      </linearGradient>
                    </defs>

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

                    {trendChartType === "bar" ? (
                      monthlyTrendData.map((d, idx) => {
                        const x = 45 + idx * 39;
                        const barHeight = Math.max((d.pct / 100) * 115, d.count > 0 ? 6 : 0);
                        const y = 140 - barHeight;

                        return (
                          <g key={idx} className="group cursor-pointer">
                            <rect
                              x={x - 11}
                              y={y}
                              width="22"
                              height={barHeight}
                              rx="4"
                              fill="url(#mntBarGradient)"
                              className="transition-all duration-300 group-hover:opacity-80"
                            />
                            {d.count > 0 && (
                              <text
                                x={x}
                                y={y - 5}
                                textAnchor="middle"
                                className="text-[10px] fill-blue-700 font-bold"
                              >
                                {d.count}
                              </text>
                            )}
                            <text
                              x={x}
                              y={158}
                              textAnchor="middle"
                              className="text-[9px] fill-slate-500 font-semibold"
                            >
                              {d.month}
                            </text>
                          </g>
                        );
                      })
                    ) : (
                      <>
                        {(() => {
                          const points = monthlyTrendData.map((d, idx) => {
                            const x = 45 + idx * 39;
                            const y = 140 - (d.pct / 100) * 115;
                            return { x, y, count: d.count, month: d.month };
                          });

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

                          const areaD = `${pathD} L ${points[points.length - 1].x} 140 L ${points[0].x} 140 Z`;

                          return (
                            <>
                              <path d={areaD} fill="url(#mntLineAreaGradient)" />
                              <path
                                d={pathD}
                                fill="none"
                                stroke="#2563eb"
                                strokeWidth="2.5"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              {points.map((p, idx) => (
                                <g key={idx} className="group">
                                  <circle
                                    cx={p.x}
                                    cy={p.y}
                                    r={p.count > 0 ? "4" : "2"}
                                    fill={p.count > 0 ? "#1d4ed8" : "#94a3b8"}
                                    stroke="#ffffff"
                                    strokeWidth="2"
                                  />
                                  {p.count > 0 && (
                                    <text
                                      x={p.x}
                                      y={p.y - 8}
                                      textAnchor="middle"
                                      className="text-[10px] fill-blue-700 font-bold"
                                    >
                                      {p.count}
                                    </text>
                                  )}
                                  <text
                                    x={p.x}
                                    y={158}
                                    textAnchor="middle"
                                    className="text-[9px] fill-slate-500 font-semibold"
                                  >
                                    {p.month}
                                  </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 responsif & terhubung dengan filter periode aktif</span>
                <span className="font-semibold text-slate-700">
                  Total {rekapStats.total} Pekerjaan
                </span>
              </div>
            </div>

            {/* Grafik Lingkaran (Doughnut Chart) */}
            <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">
                      Proporsi Jenis & Status
                    </h3>
                    <p className="text-[11px] text-slate-500">
                      Perbandingan kategori aktivitas
                    </p>
                  </div>
                </div>

                {/* SVG Doughnut Chart */}
                <div className="relative flex items-center justify-center my-3">
                  {(() => {
                    const total = rekapStats.total;
                    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 pRutin = (rekapStats.rutin / total) * circ;
                    const pRingan = (rekapStats.ringan / total) * circ;
                    const pMayor = (rekapStats.mayor / total) * circ;

                    return (
                      <div className="relative w-36 h-36">
                        <svg viewBox="0 0 120 120" className="w-full h-full -rotate-90">
                          {/* Segmen Rutin (Sky) */}
                          <circle
                            cx="60"
                            cy="60"
                            r={r}
                            fill="none"
                            stroke="#0284c7"
                            strokeWidth="14"
                            strokeDasharray={`${pRutin} ${circ}`}
                            strokeDashoffset={0}
                          />
                          {/* Segmen Ringan (Amber) */}
                          <circle
                            cx="60"
                            cy="60"
                            r={r}
                            fill="none"
                            stroke="#f59e0b"
                            strokeWidth="14"
                            strokeDasharray={`${pRingan} ${circ}`}
                            strokeDashoffset={-pRutin}
                          />
                          {/* Segmen Mayor (Purple) */}
                          <circle
                            cx="60"
                            cy="60"
                            r={r}
                            fill="none"
                            stroke="#9333ea"
                            strokeWidth="14"
                            strokeDasharray={`${pMayor} ${circ}`}
                            strokeDashoffset={-(pRutin + pRingan)}
                          />
                        </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">
                            {total}
                          </span>
                          <span className="text-[9px] font-bold text-slate-400 uppercase">
                            Total
                          </span>
                        </div>
                      </div>
                    );
                  })()}
                </div>

                {/* Legend List */}
                <div className="space-y-1.5 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-sky-600" />
                      <span className="text-slate-600">Pemeriksaan Rutin</span>
                    </div>
                    <span className="font-bold text-slate-800">
                      {rekapStats.rutin} (
                      {rekapStats.total > 0
                        ? Math.round((rekapStats.rutin / rekapStats.total) * 100)
                        : 0}
                      %)
                    </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-amber-500" />
                      <span className="text-slate-600">Perbaikan Ringan</span>
                    </div>
                    <span className="font-bold text-slate-800">
                      {rekapStats.ringan} (
                      {rekapStats.total > 0
                        ? Math.round((rekapStats.ringan / rekapStats.total) * 100)
                        : 0}
                      %)
                    </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-purple-600" />
                      <span className="text-slate-600">Perbaikan Mayor</span>
                    </div>
                    <span className="font-bold text-slate-800">
                      {rekapStats.mayor} (
                      {rekapStats.total > 0
                        ? Math.round((rekapStats.mayor / rekapStats.total) * 100)
                        : 0}
                      %)
                    </span>
                  </div>
                </div>
              </div>

              <div className="pt-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
                <span>Penyelesaian Selesai:</span>
                <span className="font-bold text-emerald-600">
                  {rekapStats.selesai} Tuntas
                </span>
              </div>
            </div>
          </div>

          {/* Tabel Rekapitulasi Berpaginasi (10 Data per Halaman) */}
          <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 flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h3 className="text-sm font-bold text-slate-900">
                  Tabel Rincian Rekapitulasi Pekerjaan
                </h3>
                <p className="text-xs text-slate-500">
                  Daftar transaksi yang lolos filter periode ({tab2FilteredRecords.length} baris data)
                </p>
              </div>

              <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 dalam rekap..."
                  value={tab2SearchTerm}
                  onChange={(e) => setTab2SearchTerm(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-48 sm:w-60"
                />
                {tab2SearchTerm && (
                  <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 h-3" />
                  </button>
                )}
              </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">KODE</th>
                    <th className="py-3 px-3">TGL MULAI</th>
                    <th className="py-3 px-3">JENIS AKTIVITAS</th>
                    <th className="py-3 px-4 min-w-[200px]">DESKRIPSI</th>
                    <th className="py-3 px-3">TEKNISI</th>
                    <th className="py-3 px-3 text-right">BIAYA</th>
                    <th className="py-3 px-3 text-center">STATUS</th>
                    <th className="py-3 px-3">TGL SELESAI</th>
                    <th className="py-3 px-3">PETUGAS</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 text-slate-700">
                  {isLoading ? (
                    <tr>
                      <td colSpan={10} className="py-10 text-center text-slate-400">
                        Memuat data rekapitulasi...
                      </td>
                    </tr>
                  ) : tab2PaginatedData.length === 0 ? (
                    <tr>
                      <td colSpan={10} className="py-12 text-center text-slate-400">
                        Tidak ada catatan pekerjaan yang sesuai dengan kriteria filter.
                      </td>
                    </tr>
                  ) : (
                    tab2PaginatedData.map((item, idx) => {
                      const rowNum = (tab2CurrentPage - 1) * 10 + idx + 1;

                      let statusBadgeColor = "bg-amber-50 text-amber-700 border-amber-200";
                      if (item.status === "Selesai") {
                        statusBadgeColor = "bg-emerald-50 text-emerald-700 border-emerald-200";
                      } else if (item.status === "Dibatalkan") {
                        statusBadgeColor = "bg-rose-50 text-rose-700 border-rose-200";
                      }

                      return (
                        <tr key={item.id} className="hover:bg-slate-50/70 transition-colors">
                          <td className="py-3 px-3 text-center font-medium text-slate-500">
                            {rowNum}
                          </td>
                          <td className="py-3 px-3 font-semibold text-slate-800 whitespace-nowrap">
                            {item.activity_code}
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap">
                            {formatDateID(item.start_date)}
                          </td>
                          <td className="py-3 px-3">
                            <span className="inline-block px-2 py-0.5 rounded-full text-[10px] font-bold border bg-slate-100 border-slate-200 text-slate-700">
                              {item.activity_type}
                            </span>
                          </td>
                          <td className="py-3 px-4 font-medium text-slate-800">
                            {item.description}
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap text-slate-700">
                            {item.technician}
                          </td>
                          <td className="py-3 px-3 text-right font-bold text-slate-900 whitespace-nowrap">
                            {formatRupiah(item.cost)}
                          </td>
                          <td className="py-3 px-3 text-center whitespace-nowrap">
                            <span
                              className={`inline-block px-2.5 py-0.5 rounded-full text-[10px] font-bold border ${statusBadgeColor}`}
                            >
                              {item.status}
                            </span>
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap text-slate-600">
                            {formatDateID(item.end_date)}
                          </td>
                          <td className="py-3 px-3 font-medium text-slate-700 whitespace-nowrap">
                            {item.officer_name}
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Kontrol Tab 2 */}
            <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">
                  {tab2FilteredRecords.length > 0 ? (tab2CurrentPage - 1) * 10 + 1 : 0}
                </span>{" "}
                sampai{" "}
                <span className="font-bold text-slate-700">
                  {Math.min(tab2CurrentPage * 10, tab2FilteredRecords.length)}
                </span>{" "}
                dari{" "}
                <span className="font-bold text-slate-700">
                  {tab2FilteredRecords.length}
                </span>{" "}
                data
              </div>

              <div className="flex items-center gap-1.5">
                <button
                  type="button"
                  disabled={tab2CurrentPage <= 1}
                  onClick={() => setTab2CurrentPage((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: tab2TotalPages }, (_, i) => i + 1)
                  .filter((p) => {
                    return (
                      p === 1 ||
                      p === tab2TotalPages ||
                      (p >= tab2CurrentPage - 1 && p <= tab2CurrentPage + 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={() => setTab2CurrentPage(p)}
                          className={`w-7 h-7 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                            tab2CurrentPage === 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={tab2CurrentPage >= tab2TotalPages}
                  onClick={() =>
                    setTab2CurrentPage((p) => Math.min(p + 1, tab2TotalPages))
                  }
                  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 / EDIT AKTIVITAS                            */}
      {/* ========================================================= */}
      <Modal
        isOpen={isFormModalOpen}
        onClose={() => setIsFormModalOpen(false)}
        title={selectedRecord ? "Edit Catatan Aktivitas" : "Tambah Aktivitas Baru"}
        maxWidth="max-w-2xl"
      >
        <form onSubmit={handleSubmitForm} className="space-y-4">
          {formError && (
            <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-700 font-semibold flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0 text-rose-600" />
              <span>{formError}</span>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Tanggal Mulai <span className="text-rose-500">*</span>
              </label>
              <input
                type="date"
                required
                value={formData.start_date}
                onChange={(e) => setFormData({ ...formData, start_date: 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">
                Jenis Aktivitas <span className="text-rose-500">*</span>
              </label>
              <select
                value={formData.activity_type}
                onChange={(e) => setFormData({ ...formData, activity_type: 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="Pemeriksaan Rutin">Pemeriksaan Rutin</option>
                <option value="Perbaikan Ringan">Perbaikan Ringan</option>
                <option value="Perbaikan Mayor">Perbaikan Mayor</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Deskripsi Aktivitas / Sarana <span className="text-rose-500">*</span>
            </label>
            <input
              type="text"
              required
              placeholder="Contoh: Perbaikan AC Split Ruang Guru atau Pengecekan Panel Listrik"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: 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 className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Teknisi / Pelaksana <span className="text-rose-500">*</span>
              </label>
              <input
                type="text"
                required
                placeholder="Contoh: CV Sejuk Mandiri / Teknisi Listrik BPI"
                value={formData.technician}
                onChange={(e) => setFormData({ ...formData, technician: 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">
                Biaya / Anggaran (Rp)
              </label>
              <input
                type="number"
                min="0"
                step="5000"
                placeholder="Contoh: 150000"
                value={formData.cost}
                onChange={(e) => setFormData({ ...formData, cost: 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>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Status Aktivitas
              </label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: 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="Dalam Proses">Dalam Proses</option>
                <option value="Selesai">Selesai</option>
                <option value="Dibatalkan">Dibatalkan</option>
              </select>
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Tanggal Selesai (Opsional)
              </label>
              <input
                type="date"
                value={formData.end_date}
                onChange={(e) => setFormData({ ...formData, end_date: 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>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Petugas Penanggung Jawab <span className="text-rose-500">*</span>
              </label>
              <input
                type="text"
                required
                placeholder="Nama staf sarpras"
                value={formData.officer_name}
                onChange={(e) => setFormData({ ...formData, officer_name: 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">
                Kode Kustom (Opsional)
              </label>
              <input
                type="text"
                placeholder="Otomatis sistem jika kosong"
                value={formData.activity_code}
                onChange={(e) => setFormData({ ...formData, activity_code: 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>

          {/* Upload Foto Sebelum & Sesudah */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 p-3 bg-slate-50/80 rounded-xl border border-slate-200">
            {/* Foto Sebelum */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Dokumentasi Foto Sebelum
              </label>
              <div className="flex items-center gap-2">
                <label className="flex items-center gap-1.5 px-3 py-2 bg-white hover:bg-slate-100 border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 cursor-pointer transition-colors">
                  <Camera className="w-3.5 h-3.5 text-slate-600" />
                  <span>{formData.photo_before ? "Ganti Foto" : "Pilih Foto"}</span>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => handlePhotoUpload(e, "before")}
                    className="hidden"
                  />
                </label>
                {formData.photo_before && (
                  <div className="flex items-center gap-1.5">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={formData.photo_before}
                      alt="Preview Sebelum"
                      className="w-8 h-8 rounded-lg object-cover border border-slate-300"
                    />
                    <button
                      type="button"
                      onClick={() => setFormData({ ...formData, photo_before: null })}
                      className="p-1 text-rose-500 hover:text-rose-700"
                      title="Hapus foto"
                    >
                      <X className="w-3.5 h-3.5" />
                    </button>
                  </div>
                )}
              </div>
            </div>

            {/* Foto Sesudah */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Dokumentasi Foto Sesudah
              </label>
              <div className="flex items-center gap-2">
                <label className="flex items-center gap-1.5 px-3 py-2 bg-white hover:bg-slate-100 border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 cursor-pointer transition-colors">
                  <Camera className="w-3.5 h-3.5 text-slate-600" />
                  <span>{formData.photo_after ? "Ganti Foto" : "Pilih Foto"}</span>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => handlePhotoUpload(e, "after")}
                    className="hidden"
                  />
                </label>
                {formData.photo_after && (
                  <div className="flex items-center gap-1.5">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={formData.photo_after}
                      alt="Preview Sesudah"
                      className="w-8 h-8 rounded-lg object-cover border border-slate-300"
                    />
                    <button
                      type="button"
                      onClick={() => setFormData({ ...formData, photo_after: null })}
                      className="p-1 text-rose-500 hover:text-rose-700"
                      title="Hapus foto"
                    >
                      <X className="w-3.5 h-3.5" />
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Catatan / Hasil Pengecekan
            </label>
            <textarea
              rows={2}
              placeholder="Rincian hasil inspeksi teknis atau garansi perbaikan"
              value={formData.notes}
              onChange={(e) => setFormData({ ...formData, 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 items-center justify-end gap-2 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsFormModalOpen(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={isSubmitting}
              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"
            >
              {isSubmitting ? (
                <>
                  <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  <span>Menyimpan...</span>
                </>
              ) : (
                <>
                  <Check className="w-4 h-4" />
                  <span>Simpan Catatan</span>
                </>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* ========================================================= */}
      {/* MODAL: UPDATE STATUS CEPAT / SELESAI                      */}
      {/* ========================================================= */}
      <Modal
        isOpen={isQuickStatusModalOpen}
        onClose={() => setIsQuickStatusModalOpen(false)}
        title="Update Status / Selesai Pekerjaan"
        maxWidth="max-w-lg"
      >
        <form onSubmit={handleSubmitQuickStatus} className="space-y-4">
          {formError && (
            <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-700 font-semibold flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0 text-rose-600" />
              <span>{formError}</span>
            </div>
          )}

          {selectedRecord && (
            <div className="p-3 bg-blue-50/60 border border-blue-200/60 rounded-xl text-xs space-y-1">
              <div className="font-bold text-blue-900">
                {selectedRecord.activity_code} — {selectedRecord.description}
              </div>
              <div className="text-slate-600">
                Pelaksana: <span className="font-semibold">{selectedRecord.technician}</span> | Jenis:{" "}
                <span className="font-semibold">{selectedRecord.activity_type}</span>
              </div>
            </div>
          )}

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Pilih Status Terbaru <span className="text-rose-500">*</span>
            </label>
            <select
              value={quickStatusData.status}
              onChange={(e) => setQuickStatusData({ ...quickStatusData, status: 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 font-semibold"
            >
              <option value="Selesai">Selesai (Pekerjaan Tuntas)</option>
              <option value="Dalam Proses">Dalam Proses (Masih Dikerjakan)</option>
              <option value="Dibatalkan">Dibatalkan (Tidak Dilanjutkan)</option>
            </select>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Tanggal Selesai
              </label>
              <input
                type="date"
                value={quickStatusData.end_date}
                onChange={(e) =>
                  setQuickStatusData({ ...quickStatusData, end_date: 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">
                Biaya Aktual / Final (Rp)
              </label>
              <input
                type="number"
                min="0"
                step="5000"
                value={quickStatusData.cost}
                onChange={(e) =>
                  setQuickStatusData({ ...quickStatusData, cost: 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 font-bold"
              />
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Foto Bukti Sesudah Perbaikan (Opsional)
            </label>
            <div className="flex items-center gap-2">
              <label className="flex items-center gap-1.5 px-3 py-2 bg-slate-100 hover:bg-slate-200 border border-slate-300 rounded-xl text-xs font-semibold text-slate-700 cursor-pointer transition-colors">
                <Camera className="w-4 h-4 text-slate-600" />
                <span>Upload Foto Sesudah</span>
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleQuickPhotoAfterUpload}
                  className="hidden"
                />
              </label>
              {quickStatusData.photo_after && (
                <div className="flex items-center gap-2">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={quickStatusData.photo_after}
                    alt="Preview"
                    className="w-9 h-9 rounded-lg object-cover border border-slate-300"
                  />
                  <button
                    type="button"
                    onClick={() => setQuickStatusData({ ...quickStatusData, photo_after: null })}
                    className="text-xs text-rose-500 hover:text-rose-700"
                  >
                    Hapus
                  </button>
                </div>
              )}
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Catatan Penyelesaian
            </label>
            <textarea
              rows={2}
              placeholder="Uraian ringkas hasil serah terima perbaikan"
              value={quickStatusData.notes}
              onChange={(e) => setQuickStatusData({ ...quickStatusData, 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 items-center justify-end gap-2 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsQuickStatusModalOpen(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={isSubmitting}
              className="flex items-center gap-1.5 px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer disabled:opacity-50"
            >
              {isSubmitting ? (
                <>
                  <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  <span>Menyimpan...</span>
                </>
              ) : (
                <>
                  <Check className="w-4 h-4" />
                  <span>Perbarui Status</span>
                </>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* ========================================================= */}
      {/* MODAL: LIGHTBOX ZOOM FOTO                                 */}
      {/* ========================================================= */}
      {lightboxImage && (
        <div
          className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
          onClick={() => setLightboxImage(null)}
        >
          <div
            className="relative max-w-3xl max-h-[90vh] bg-slate-900 rounded-2xl overflow-hidden shadow-2xl p-2"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between px-3 py-2 text-white">
              <span className="text-xs font-semibold truncate pr-4">
                {lightboxImage.title}
              </span>
              <button
                type="button"
                onClick={() => setLightboxImage(null)}
                className="p-1 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors cursor-pointer"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="flex items-center justify-center p-2 bg-black/40 rounded-xl overflow-hidden max-h-[75vh]">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={lightboxImage.url}
                alt="Zoom Foto"
                className="max-w-full max-h-[75vh] object-contain rounded-lg"
              />
            </div>
          </div>
        </div>
      )}

      {/* ========================================================= */}
      {/* MODAL: IMPORT EXCEL                                       */}
      {/* ========================================================= */}
      <Modal
        isOpen={isImportModalOpen}
        onClose={() => setIsImportModalOpen(false)}
        title="Import Data Perbaikan & Pemeliharaan (Excel .xlsx)"
        maxWidth="max-w-xl"
      >
        <div className="space-y-4">
          <div className="p-3 bg-blue-50 border border-blue-200 rounded-xl text-xs text-blue-800 space-y-1">
            <div className="font-bold flex items-center gap-1.5">
              <Info className="w-4 h-4 text-blue-600 shrink-0" />
              <span>Petunjuk Import Data:</span>
            </div>
            <p>
              Pastikan file Excel menggunakan format template resmi dengan kolom:
              <strong> Kode Aktivitas, Tanggal Mulai, Jenis Aktivitas, Deskripsi, Teknisi, Biaya, Status, Tanggal Selesai, Catatan, Petugas</strong>.
            </p>
          </div>

          {importError && (
            <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-700 font-semibold flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0 text-rose-600" />
              <span>{importError}</span>
            </div>
          )}

          <div className="border-2 border-dashed border-slate-300 hover:border-blue-500 rounded-2xl p-6 text-center bg-slate-50/50 hover:bg-blue-50/30 transition-colors">
            <input
              type="file"
              ref={fileInputRef}
              accept=".xlsx, .xls"
              onChange={handleFileChange}
              className="hidden"
            />
            <FileSpreadsheet className="w-12 h-12 text-slate-400 mx-auto mb-2" />
            <p className="text-xs font-bold text-slate-700">
              {importFile ? importFile.name : "Pilih atau Seret File Excel (.xlsx) ke Sini"}
            </p>
            <p className="text-[11px] text-slate-400 mt-1">
              Maksimal ukuran file 5 MB
            </p>
            <button
              type="button"
              onClick={() => fileInputRef.current?.click()}
              className="mt-3 px-4 py-2 bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 rounded-xl text-xs font-bold shadow-2xs transition-colors cursor-pointer"
            >
              {importFile ? "Ganti File Excel" : "Pilih File dari Komputer"}
            </button>
          </div>

          {parsedRows.length > 0 && (
            <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-xl text-xs text-emerald-800 flex items-center justify-between">
              <span>
                Terdeteksi <strong>{parsedRows.length}</strong> baris data siap diimpor.
              </span>
              <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
            </div>
          )}

          <div className="flex items-center justify-between pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={handleDownloadTemplate}
              className="text-xs text-blue-600 hover:underline font-semibold flex items-center gap-1"
            >
              <Download className="w-3.5 h-3.5" />
              <span>Unduh Template Dulu</span>
            </button>

            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => setIsImportModalOpen(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="button"
                onClick={handleImportSubmit}
                disabled={isImporting || parsedRows.length === 0}
                className="flex items-center gap-1.5 px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer disabled:opacity-50"
              >
                {isImporting ? (
                  <>
                    <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    <span>Mengimpor...</span>
                  </>
                ) : (
                  <>
                    <Upload className="w-4 h-4" />
                    <span>Mulai Impor</span>
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      </Modal>

      {/* ========================================================= */}
      {/* MODAL: HAPUS KONFIRMASI                                   */}
      {/* ========================================================= */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => setIsDeleteModalOpen(false)}
        title="Hapus Catatan Aktivitas"
        maxWidth="max-w-md"
      >
        <div className="space-y-4">
          <p className="text-xs text-slate-600">
            Apakah Anda yakin ingin menghapus catatan aktivitas berikut? Tindakan ini tidak dapat dibatalkan.
          </p>

          {selectedRecord && (
            <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs space-y-1">
              <div className="font-bold text-rose-900">
                {selectedRecord.activity_code} — {selectedRecord.description}
              </div>
              <div className="text-slate-600">
                Teknisi: <span className="font-semibold">{selectedRecord.technician}</span> | Tanggal:{" "}
                <span className="font-semibold">{formatDateID(selectedRecord.start_date)}</span>
              </div>
            </div>
          )}

          <div className="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsDeleteModalOpen(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="button"
              onClick={handleDeleteRecord}
              disabled={isSubmitting}
              className="flex items-center gap-1.5 px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-xs font-bold shadow-xs transition-colors cursor-pointer disabled:opacity-50"
            >
              {isSubmitting ? (
                <>
                  <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  <span>Menghapus...</span>
                </>
              ) : (
                <>
                  <Trash2 className="w-4 h-4" />
                  <span>Hapus Sekarang</span>
                </>
              )}
            </button>
          </div>
        </div>
      </Modal>

      {/* ========================================================= */}
      {/* MODAL & PRATINJAU CETAK REKAPITULASI RESMI DINAS          */}
      {/* ========================================================= */}
      <Modal
        isOpen={isPrintModalOpen}
        onClose={() => setIsPrintModalOpen(false)}
        title="Pratinjau Cetak Laporan Rekapitulasi Perbaikan & Pemeliharaan"
        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>
              Menampilkan {tab2FilteredRecords.length} data yang sesuai dengan filter aktif.
            </span>
            <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 Sekarang (Ctrl + P)</span>
            </button>
          </div>

          {/* Area Dokumen Cetak Dinas */}
          <div
            id="print-maintenance-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 Perbaikan & Pemeliharaan
              </h2>
              <p className="text-xs text-slate-600 mt-1">
                Tahun Ajaran: <strong>{selectedAcademicYear}</strong> | Periode:{" "}
                <strong>
                  {selectedMonth !== "Semua Bulan" ? `${selectedMonth} ` : ""}
                  {selectedYear}
                </strong>
                {selectedTypeFilter !== "Semua" && ` | Jenis: ${selectedTypeFilter}`}
                {selectedStatusFilter !== "Semua" && ` | Status: ${selectedStatusFilter}`}
              </p>
            </div>

            {/* Ringkasan Angka Rekapitulasi */}
            <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 Pekerjaan</div>
                <div className="text-sm font-extrabold text-blue-700">{rekapStats.total}</div>
              </div>
              <div>
                <div className="text-[10px] text-slate-500 font-bold uppercase">Dalam Proses</div>
                <div className="text-sm font-extrabold text-amber-600">{rekapStats.dalamProses}</div>
              </div>
              <div>
                <div className="text-[10px] text-slate-500 font-bold uppercase">Selesai</div>
                <div className="text-sm font-extrabold text-emerald-600">{rekapStats.selesai}</div>
              </div>
              <div>
                <div className="text-[10px] text-slate-500 font-bold uppercase">Total Biaya</div>
                <div className="text-sm font-extrabold text-purple-700">{formatRupiah(rekapStats.totalBiaya)}</div>
              </div>
            </div>

            {/* Tabel Data Rekapitulasi untuk 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-2">KODE</th>
                  <th className="border border-slate-300 py-2 px-2">TGL MULAI</th>
                  <th className="border border-slate-300 py-2 px-2">JENIS AKTIVITAS</th>
                  <th className="border border-slate-300 py-2 px-3">DESKRIPSI AKTIVITAS</th>
                  <th className="border border-slate-300 py-2 px-2">TEKNISI</th>
                  <th className="border border-slate-300 py-2 px-2 text-right">BIAYA</th>
                  <th className="border border-slate-300 py-2 px-2 text-center">STATUS</th>
                  <th className="border border-slate-300 py-2 px-2">TGL SELESAI</th>
                  <th className="border border-slate-300 py-2 px-2">PETUGAS</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {tab2FilteredRecords.length === 0 ? (
                  <tr>
                    <td colSpan={10} className="py-6 text-center text-slate-400">
                      Tidak ada data pekerjaan untuk periode yang dipilih.
                    </td>
                  </tr>
                ) : (
                  tab2FilteredRecords.map((item, idx) => (
                    <tr key={item.id}>
                      <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-2 font-semibold">
                        {item.activity_code}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 whitespace-nowrap">
                        {formatDateID(item.start_date)}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2">
                        {item.activity_type}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-3">
                        {item.description}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2">
                        {item.technician}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-right font-semibold">
                        {formatRupiah(item.cost)}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 text-center font-bold">
                        {item.status}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2 whitespace-nowrap">
                        {formatDateID(item.end_date)}
                      </td>
                      <td className="border border-slate-300 py-1.5 px-2">
                        {item.officer_name}
                      </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 MaintenanceManagementView;