"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,
} 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 STATUS_OPTIONS = [
  "Semua Status",
  "Dipinjam",
  "Sudah Kembali",
  "Terlambat",
];

export interface BorrowingRecord {
  id: number;
  borrow_code: string;
  item_name: string;
  quantity: number;
  borrower_name: string;
  borrow_date: string;
  expected_return_date: string;
  actual_return_date: string | null;
  status: "Dipinjam" | "Sudah Kembali" | "Terlambat";
  officer_name: string | null;
  notes: string | null;
  academic_year: string;
  created_at?: string;
  updated_at?: string;
}

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

export const BorrowingManagementView: React.FC = () => {
  // Active Tab State (Tab 1: Daftar Peminjaman, Tab 2: Rekapitulasi & Statistik)
  const [activeTab, setActiveTab] = useState<PeminjamanTabType>("daftar");

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

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

  // Tab 2 (Rekapitulasi & Statistik) Specific Multi-Filters
  const currentYearStr = useMemo(() => new Date().getFullYear().toString(), []);
  const [selectedYear, setSelectedYear] = useState<string>(() =>
    AVAILABLE_YEARS.includes(currentYearStr) ? currentYearStr : "2026"
  );
  const [selectedMonth, setSelectedMonth] = useState<string>("Semua Bulan");
  const [selectedStatus, setSelectedStatus] = useState<string>("Semua Status");
  const [rekapSearchTerm, setRekapSearchTerm] = useState<string>("");
  const [tab2CurrentPage, setTab2CurrentPage] = useState<number>(1);

  // Chart Controls for Tab 2
  const [trendChartType, setTrendChartType] = useState<"bar" | "line">("bar");
  const [hoveredTrendIdx, setHoveredTrendIdx] = useState<number | null>(null);

  // Data State
  const [borrowings, setBorrowings] = useState<BorrowingRecord[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const itemsPerPage = 10;

  // Modals
  const [isAddModalOpen, setIsAddModalOpen] = useState<boolean>(false);
  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
  const [isStatusModalOpen, setIsStatusModalOpen] = useState<boolean>(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
  const [isImportModalOpen, setIsImportModalOpen] = useState<boolean>(false);
  const [isPrintModalOpen, setIsPrintModalOpen] = useState<boolean>(false);

  // Active Item for Edit / Status / Delete
  const [activeItem, setActiveItem] = useState<BorrowingRecord | null>(null);

  // Form State
  const [formData, setFormData] = useState<{
    borrow_code: string;
    item_name: string;
    quantity: string;
    borrower_name: string;
    borrow_date: string;
    expected_return_date: string;
    actual_return_date: string;
    status: "Dipinjam" | "Sudah Kembali" | "Terlambat";
    officer_name: string;
    notes: string;
  }>({
    borrow_code: "",
    item_name: "",
    quantity: "1",
    borrower_name: "",
    borrow_date: new Date().toISOString().split("T")[0],
    expected_return_date: new Date().toISOString().split("T")[0],
    actual_return_date: "",
    status: "Dipinjam",
    officer_name: "",
    notes: "",
  });

  // Status Quick Update Form State
  const [quickStatusData, setQuickStatusData] = useState<{
    status: "Dipinjam" | "Sudah Kembali" | "Terlambat";
    actual_return_date: string;
  }>({
    status: "Sudah Kembali",
    actual_return_date: "",
  });

  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 Borrowings
  const fetchBorrowings = useCallback(
    async (academicYear: string = selectedAcademicYear) => {
      try {
        setIsLoading(true);
        setError(null);
        const res = await fetch(
          `/api/sarpras/borrowings?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 peminjaman");
        }
        setBorrowings(json.data || []);
      } catch (err: any) {
        console.error("fetchBorrowings error:", err);
        setError(err.message || "Terjadi kesalahan saat memuat data");
      } finally {
        setIsLoading(false);
      }
    },
    [selectedAcademicYear]
  );

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

  // Today Date for auto-overdue checking
  const todayStr = useMemo(() => new Date().toISOString().split("T")[0], []);

  // ==========================================
  // TAB 1: DAFTAR PEMINJAMAN FILTERED DATA
  // ==========================================
  const tab1FilteredBorrowings = useMemo(() => {
    let result = [...borrowings];

    if (tab1StatusFilter !== "Semua") {
      result = result.filter((item) => item.status === tab1StatusFilter);
    }

    if (tab1SearchTerm.trim()) {
      const term = tab1SearchTerm.toLowerCase();
      result = result.filter(
        (item) =>
          item.borrow_code.toLowerCase().includes(term) ||
          item.item_name.toLowerCase().includes(term) ||
          item.borrower_name.toLowerCase().includes(term) ||
          (item.officer_name && item.officer_name.toLowerCase().includes(term)) ||
          (item.notes && item.notes.toLowerCase().includes(term))
      );
    }

    return result;
  }, [borrowings, tab1StatusFilter, tab1SearchTerm]);

  useEffect(() => {
    setTab1CurrentPage(1);
  }, [tab1SearchTerm, tab1StatusFilter, selectedAcademicYear]);

  const tab1TotalItems = tab1FilteredBorrowings.length;
  const tab1TotalPages = Math.max(1, Math.ceil(tab1TotalItems / itemsPerPage));
  const tab1StartIndex = (tab1CurrentPage - 1) * itemsPerPage;
  const tab1EndIndex = Math.min(tab1StartIndex + itemsPerPage, tab1TotalItems);
  const tab1PaginatedItems = useMemo(() => {
    return tab1FilteredBorrowings.slice(tab1StartIndex, tab1EndIndex);
  }, [tab1FilteredBorrowings, tab1StartIndex, tab1EndIndex]);

  // ==========================================
  // TAB 2: REKAPITULASI & STATISTIK FILTERED DATA
  // ==========================================
  const tab2FilteredBorrowings = useMemo(() => {
    let result = [...borrowings];

    // Filter Tahun
    if (selectedYear !== "Semua Tahun") {
      result = result.filter((item) => item.borrow_date?.startsWith(selectedYear));
    }

    // Filter Bulan
    if (selectedMonth !== "Semua Bulan") {
      const monthIndex = AVAILABLE_MONTHS.indexOf(selectedMonth);
      if (monthIndex > 0) {
        const monthStr = String(monthIndex).padStart(2, "0");
        result = result.filter((item) => {
          const parts = item.borrow_date ? item.borrow_date.split("-") : [];
          return parts[1] === monthStr;
        });
      }
    }

    // Filter Status Pengembalian
    if (selectedStatus !== "Semua Status") {
      result = result.filter((item) => item.status === selectedStatus);
    }

    // Search keyword
    if (rekapSearchTerm.trim()) {
      const term = rekapSearchTerm.toLowerCase();
      result = result.filter(
        (item) =>
          item.borrow_code.toLowerCase().includes(term) ||
          item.item_name.toLowerCase().includes(term) ||
          item.borrower_name.toLowerCase().includes(term) ||
          (item.officer_name && item.officer_name.toLowerCase().includes(term)) ||
          (item.notes && item.notes.toLowerCase().includes(term))
      );
    }

    return result;
  }, [borrowings, selectedYear, selectedMonth, selectedStatus, rekapSearchTerm]);

  useEffect(() => {
    setTab2CurrentPage(1);
  }, [rekapSearchTerm, selectedStatus, selectedYear, selectedMonth, selectedAcademicYear]);

  const tab2TotalItems = tab2FilteredBorrowings.length;
  const tab2TotalPages = Math.max(1, Math.ceil(tab2TotalItems / itemsPerPage));
  const tab2StartIndex = (tab2CurrentPage - 1) * itemsPerPage;
  const tab2EndIndex = Math.min(tab2StartIndex + itemsPerPage, tab2TotalItems);
  const tab2PaginatedItems = useMemo(() => {
    return tab2FilteredBorrowings.slice(tab2StartIndex, tab2EndIndex);
  }, [tab2FilteredBorrowings, tab2StartIndex, tab2EndIndex]);

  // Tab 2 Metric Cards Stats
  const rekapStats = useMemo(() => {
    const total = tab2FilteredBorrowings.length;
    const dipinjam = tab2FilteredBorrowings.filter((i) => i.status === "Dipinjam").length;
    const kembali = tab2FilteredBorrowings.filter((i) => i.status === "Sudah Kembali").length;
    const terlambat = tab2FilteredBorrowings.filter((i) => i.status === "Terlambat").length;
    return { total, dipinjam, kembali, terlambat };
  }, [tab2FilteredBorrowings]);

  // Trend Chart Data (Monthly or Weekly)
  const trendData = useMemo(() => {
    if (selectedMonth === "Semua Bulan") {
      const shortLabels = [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "Mei",
        "Jun",
        "Jul",
        "Agu",
        "Sep",
        "Okt",
        "Nov",
        "Des",
      ];
      return shortLabels.map((lbl, idx) => {
        const monthStr = String(idx + 1).padStart(2, "0");
        const matched = tab2FilteredBorrowings.filter((item) => {
          const parts = item.borrow_date ? item.borrow_date.split("-") : [];
          return parts[1] === monthStr;
        });
        return {
          label: lbl,
          fullLabel: AVAILABLE_MONTHS[idx + 1],
          count: matched.length,
          dipinjam: matched.filter((i) => i.status === "Dipinjam").length,
          kembali: matched.filter((i) => i.status === "Sudah Kembali").length,
          terlambat: matched.filter((i) => i.status === "Terlambat").length,
        };
      });
    } else {
      const weeks = [
        { label: "Mg 1", fullLabel: `Minggu 1 (Tgl 1-7 ${selectedMonth})`, start: 1, end: 7 },
        { label: "Mg 2", fullLabel: `Minggu 2 (Tgl 8-14 ${selectedMonth})`, start: 8, end: 14 },
        { label: "Mg 3", fullLabel: `Minggu 3 (Tgl 15-21 ${selectedMonth})`, start: 15, end: 21 },
        { label: "Mg 4", fullLabel: `Minggu 4 (Tgl 22-28 ${selectedMonth})`, start: 22, end: 28 },
        { label: "Mg 5", fullLabel: `Minggu 5 (Tgl 29-31 ${selectedMonth})`, start: 29, end: 31 },
      ];
      return weeks.map((w) => {
        const matched = tab2FilteredBorrowings.filter((item) => {
          const parts = item.borrow_date ? item.borrow_date.split("-") : [];
          const dayNum = parseInt(parts[2] || "0", 10);
          return dayNum >= w.start && dayNum <= w.end;
        });
        return {
          label: w.label,
          fullLabel: w.fullLabel,
          count: matched.length,
          dipinjam: matched.filter((i) => i.status === "Dipinjam").length,
          kembali: matched.filter((i) => i.status === "Sudah Kembali").length,
          terlambat: matched.filter((i) => i.status === "Terlambat").length,
        };
      });
    }
  }, [tab2FilteredBorrowings, selectedMonth]);

  const maxTrendCount = useMemo(() => {
    const maxVal = Math.max(...trendData.map((d) => d.count), 0);
    return Math.max(maxVal, 4);
  }, [trendData]);

  // Doughnut Chart Data for Tab 2
  const donutData = useMemo(() => {
    const { total, dipinjam, kembali, terlambat } = rekapStats;
    const R = 54;
    const C = 2 * Math.PI * R;

    if (total === 0) {
      return {
        total: 0,
        circumference: C,
        dipinjam: { count: 0, percent: "0.0%", len: 0, offset: 0 },
        kembali: { count: 0, percent: "0.0%", len: 0, offset: 0 },
        terlambat: { count: 0, percent: "0.0%", len: 0, offset: 0 },
      };
    }

    const dipinjamRatio = dipinjam / total;
    const kembaliRatio = kembali / total;
    const terlambatRatio = terlambat / total;

    const dipinjamLen = dipinjamRatio * C;
    const kembaliLen = kembaliRatio * C;
    const terlambatLen = terlambatRatio * C;

    return {
      total,
      circumference: C,
      dipinjam: {
        count: dipinjam,
        percent: `${(dipinjamRatio * 100).toFixed(1)}%`,
        len: dipinjamLen,
        offset: 0,
      },
      kembali: {
        count: kembali,
        percent: `${(kembaliRatio * 100).toFixed(1)}%`,
        len: kembaliLen,
        offset: -dipinjamLen,
      },
      terlambat: {
        count: terlambat,
        percent: `${(terlambatRatio * 100).toFixed(1)}%`,
        len: terlambatLen,
        offset: -(dipinjamLen + kembaliLen),
      },
    };
  }, [rekapStats]);

  // Reset filters for Tab 2
  const handleResetRekapFilters = () => {
    setSelectedYear(AVAILABLE_YEARS.includes(currentYearStr) ? currentYearStr : "2026");
    setSelectedMonth("Semua Bulan");
    setSelectedStatus("Semua Status");
    setRekapSearchTerm("");
  };

  // Open Add Modal
  const handleOpenAddModal = () => {
    const now = new Date();
    const today = now.toISOString().split("T")[0];

    setFormData({
      borrow_code: "",
      item_name: "",
      quantity: "1",
      borrower_name: "",
      borrow_date: today,
      expected_return_date: today,
      actual_return_date: "",
      status: "Dipinjam",
      officer_name:
        wakasekSarana.name && wakasekSarana.name !== "-"
          ? wakasekSarana.name
          : "Muhammad Ridwanto, S.Pd",
      notes: "",
    });
    setFormError(null);
    setIsAddModalOpen(true);
  };

  // Submit Add
  const handleSubmitAdd = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.item_name.trim()) {
      setFormError("Nama barang wajib diisi");
      return;
    }
    if (!formData.borrower_name.trim()) {
      setFormError("Nama peminjam wajib diisi");
      return;
    }

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch("/api/sarpras/borrowings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          borrow_code: formData.borrow_code.trim() || undefined,
          item_name: formData.item_name.trim(),
          quantity: parseInt(formData.quantity, 10) || 1,
          borrower_name: formData.borrower_name.trim(),
          borrow_date: formData.borrow_date,
          expected_return_date: formData.expected_return_date,
          actual_return_date: formData.actual_return_date.trim() || null,
          status: formData.status,
          officer_name: formData.officer_name.trim() || null,
          notes: formData.notes.trim() || null,
          academic_year: selectedAcademicYear,
        }),
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal mencatat peminjaman");
      }
      showToast(`Peminjaman barang "${formData.item_name}" berhasil dicatat`);
      setIsAddModalOpen(false);
      fetchBorrowings(selectedAcademicYear);
    } catch (err: any) {
      setFormError(err.message || "Terjadi kesalahan saat menyimpan");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Open Edit Modal
  const handleOpenEditModal = (item: BorrowingRecord) => {
    setActiveItem(item);
    setFormData({
      borrow_code: item.borrow_code,
      item_name: item.item_name,
      quantity: String(item.quantity || 1),
      borrower_name: item.borrower_name,
      borrow_date: item.borrow_date,
      expected_return_date: item.expected_return_date,
      actual_return_date: item.actual_return_date || "",
      status: item.status,
      officer_name: item.officer_name || "",
      notes: item.notes || "",
    });
    setFormError(null);
    setIsEditModalOpen(true);
  };

  // Submit Edit
  const handleSubmitEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!activeItem) return;
    if (!formData.item_name.trim()) {
      setFormError("Nama barang wajib diisi");
      return;
    }
    if (!formData.borrower_name.trim()) {
      setFormError("Nama peminjam wajib diisi");
      return;
    }

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch(`/api/sarpras/borrowings/${activeItem.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          borrow_code: formData.borrow_code.trim(),
          item_name: formData.item_name.trim(),
          quantity: parseInt(formData.quantity, 10) || 1,
          borrower_name: formData.borrower_name.trim(),
          borrow_date: formData.borrow_date,
          expected_return_date: formData.expected_return_date,
          actual_return_date: formData.actual_return_date.trim() || null,
          status: formData.status,
          officer_name: formData.officer_name.trim() || null,
          notes: formData.notes.trim() || null,
          academic_year: selectedAcademicYear,
        }),
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal memperbarui peminjaman");
      }
      showToast("Data peminjaman berhasil diperbarui");
      setIsEditModalOpen(false);
      setActiveItem(null);
      fetchBorrowings(selectedAcademicYear);
    } catch (err: any) {
      setFormError(err.message || "Terjadi kesalahan saat menyimpan");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Open Quick Return / Update Status Modal
  const handleOpenStatusModal = (item: BorrowingRecord) => {
    setActiveItem(item);
    const now = new Date();
    const formattedNow = `${now.toISOString().split("T")[0]} ${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;

    setQuickStatusData({
      status: item.status === "Dipinjam" ? "Sudah Kembali" : item.status,
      actual_return_date: item.actual_return_date || formattedNow,
    });
    setIsStatusModalOpen(true);
  };

  // Submit Quick Status Update
  const handleSubmitStatusUpdate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!activeItem) return;

    try {
      setIsSubmitting(true);
      const res = await fetch(`/api/sarpras/borrowings/${activeItem.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          status: quickStatusData.status,
          actual_return_date:
            quickStatusData.status === "Sudah Kembali"
              ? quickStatusData.actual_return_date || new Date().toISOString().split("T")[0]
              : null,
        }),
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal memperbarui status pengembalian");
      }
      showToast(`Status peminjaman "${activeItem.item_name}" berhasil diperbarui`);
      setIsStatusModalOpen(false);
      setActiveItem(null);
      fetchBorrowings(selectedAcademicYear);
    } catch (err: any) {
      showToast(err.message || "Gagal memperbarui status", "error");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Open Delete Modal
  const handleOpenDeleteModal = (item: BorrowingRecord) => {
    setActiveItem(item);
    setIsDeleteModalOpen(true);
  };

  // Execute Delete
  const handleExecuteDelete = async () => {
    if (!activeItem) return;
    try {
      setIsSubmitting(true);
      const res = await fetch(`/api/sarpras/borrowings/${activeItem.id}`, {
        method: "DELETE",
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal menghapus data");
      }
      showToast("Data peminjaman berhasil dihapus");
      setIsDeleteModalOpen(false);
      setActiveItem(null);
      fetchBorrowings(selectedAcademicYear);
    } catch (err: any) {
      showToast(err.message || "Terjadi kesalahan saat menghapus", "error");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Download Template Excel (.xlsx)
  const handleDownloadTemplate = () => {
    window.open("/api/sarpras/borrowings/template", "_blank");
  };

  // Handler Export Excel (.xlsx) Tab 1 Peminjaman
  const handleExportBorrowingsXLSX = () => {
    if (tab1FilteredBorrowings.length === 0) {
      showToast("Tidak ada data peminjaman untuk diekspor", "error");
      return;
    }

    const rows = tab1FilteredBorrowings.map((item, idx) => ({
      No: idx + 1,
      "Kode Peminjaman": item.borrow_code,
      "Nama Barang": item.item_name,
      "Jumlah": item.quantity,
      "Nama Peminjam": item.borrower_name,
      "Tanggal Pinjam": item.borrow_date || "-",
      "Rencana Kembali": item.expected_return_date || "-",
      "Waktu Pengembalian": item.actual_return_date || "-",
      "Status Pengembalian": item.status,
      "Petugas": item.officer_name || "-",
      "Keterangan": item.notes || "-",
      "Tahun Ajaran": item.academic_year || selectedAcademicYear,
    }));

    const ws = XLSX.utils.json_to_sheet(rows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Data Peminjaman");

    const tglExport = new Date().toISOString().split("T")[0];
    const fileName = `Daftar_Peminjaman_Barang_SMA_BPI_1_${selectedAcademicYear.replace(/[\/\s]/g, "-")}_${tglExport}.xlsx`;
    XLSX.writeFile(wb, fileName);
    showToast("Data peminjaman berhasil diekspor ke Excel");
  };

  // Handler Export Excel (.xlsx) Tab 2 Rekapitulasi
  const handleExportBorrowingRekapXLSX = () => {
    if (tab2FilteredBorrowings.length === 0) {
      showToast("Tidak ada data rekapitulasi untuk diekspor", "error");
      return;
    }

    const rows = tab2FilteredBorrowings.map((item, idx) => ({
      No: idx + 1,
      "Kode Peminjaman": item.borrow_code,
      "Nama Barang": item.item_name,
      "Jumlah": item.quantity,
      "Nama Peminjam": item.borrower_name,
      "Tanggal Pinjam": item.borrow_date || "-",
      "Rencana Kembali": item.expected_return_date || "-",
      "Waktu Pengembalian": item.actual_return_date || "-",
      "Status Pengembalian": item.status,
      "Petugas": item.officer_name || "-",
      "Keterangan": item.notes || "-",
      "Tahun Ajaran": item.academic_year || selectedAcademicYear,
    }));

    const ws = XLSX.utils.json_to_sheet(rows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Rekap Peminjaman");

    const tglExport = new Date().toISOString().split("T")[0];
    const fileName = `Rekap_Peminjaman_Barang_SMA_BPI_1_${selectedAcademicYear.replace(/[\/\s]/g, "-")}_${tglExport}.xlsx`;
    XLSX.writeFile(wb, fileName);
    showToast("Data rekapitulasi berhasil diekspor ke Excel");
  };

  // Handle Excel File Pick for Import
  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 = (event) => {
      try {
        const data = new Uint8Array(event.target?.result as ArrayBuffer);
        const workbook = XLSX.read(data, { type: "array" });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonRows: any[] = XLSX.utils.sheet_to_json(sheet);

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

        setParsedRows(jsonRows);
      } catch (err: any) {
        console.error("Excel parse error:", err);
        setImportError("Gagal membaca file Excel. Pastikan format file adalah .xlsx atau .xls.");
      }
    };
    reader.readAsArrayBuffer(file);
  };

  // Execute Bulk Import
  const handleExecuteImport = async () => {
    if (!parsedRows || parsedRows.length === 0) {
      setImportError("Tidak ada data untuk diimpor");
      return;
    }

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

      const res = await fetch("/api/sarpras/borrowings/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 data peminjaman");
      }

      showToast(json.message || "Import data peminjaman berhasil diselesaikan");
      setIsImportModalOpen(false);
      setImportFile(null);
      setParsedRows([]);
      fetchBorrowings(selectedAcademicYear);
    } catch (err: any) {
      setImportError(err.message || "Terjadi kesalahan saat import data");
    } finally {
      setIsImporting(false);
    }
  };

  // Render Status Badge
  const renderStatusBadge = (status: "Dipinjam" | "Sudah Kembali" | "Terlambat", expectedDate?: string) => {
    if (status === "Sudah Kembali") {
      return (
        <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
          <CheckCircle2 className="w-3.5 h-3.5" />
          <span>Sudah Kembali</span>
        </span>
      );
    }

    if (status === "Terlambat") {
      return (
        <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-rose-50 text-rose-700 border border-rose-200">
          <AlertTriangle className="w-3.5 h-3.5" />
          <span>Terlambat</span>
        </span>
      );
    }

    const isOverdue = expectedDate && expectedDate < todayStr;
    return (
      <span
        className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold ${
          isOverdue
            ? "bg-amber-100 text-amber-900 border border-amber-300"
            : "bg-amber-50 text-amber-700 border border-amber-200"
        }`}
        title={isOverdue ? "Melewati batas tanggal rencana kembali" : "Sedang dipinjam"}
      >
        <Clock className="w-3.5 h-3.5" />
        <span>Dipinjam</span>
        {isOverdue && <span className="w-1.5 h-1.5 rounded-full bg-rose-500 animate-ping ml-0.5" />}
      </span>
    );
  };

  // Dynamic Print Period Subtitle
  const printPeriodSubtitle = useMemo(() => {
    const monthText = selectedMonth === "Semua Bulan" ? "Seluruh Bulan" : selectedMonth;
    const yearText = selectedYear === "Semua Tahun" ? "Semua Tahun" : selectedYear;
    return `Periode: ${monthText} ${yearText} | Status: ${selectedStatus} | Tahun Ajaran: ${selectedAcademicYear}`;
  }, [selectedMonth, selectedYear, selectedStatus, selectedAcademicYear]);

  return (
    <div className="space-y-6">
      {/* Toast Feedback */}
      {toast && (
        <div
          className={`fixed bottom-5 right-5 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl shadow-lg border text-sm font-medium transition-all ${
            toast.type === "success"
              ? "bg-slate-900 text-white border-slate-800"
              : "bg-rose-900/90 text-white border-rose-700"
          }`}
        >
          {toast.type === "success" ? (
            <CheckCircle2 className="w-5 h-5 text-emerald-300" />
          ) : (
            <AlertTriangle className="w-5 h-5 text-rose-300" />
          )}
          <span>{toast.message}</span>
          <button onClick={() => setToast(null)} className="ml-2 text-white/70 hover:text-white">
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* Header Utama & Pemilihan Tahun Ajaran */}
      <div className="bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-xs 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-bold uppercase tracking-wider text-blue-600 mb-1">
              <Package className="w-4 h-4" />
              <span>Modul Sarana & Prasarana • BPI SmartSchool</span>
            </div>
            <h1 className="text-xl sm:text-2xl font-bold text-slate-900">
              Peminjaman Barang
            </h1>
            <p className="text-xs sm:text-sm text-slate-500 mt-1">
              Pencatatan sirkulasi barang inventaris, pemantauan status pengembalian, analisis statistik visual, dan rekapitulasi dinas SMA BPI 1 Bandung.
            </p>
          </div>

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

      {/* ==================================================== */}
      {/* 1. STRUKTUR TAB NAVIGATION (TOP BAR) */}
      {/* ==================================================== */}
      <div className="bg-white rounded-2xl border border-slate-200/80 p-1.5 shadow-xs print:hidden">
        <div className="flex items-center gap-1.5 sm:gap-2">
          {/* Tab 1: [ 📋 Daftar Peminjaman ] */}
          <button
            onClick={() => setActiveTab("daftar")}
            className={`flex-1 flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl text-xs sm:text-sm font-bold transition-all cursor-pointer ${
              activeTab === "daftar"
                ? "bg-blue-600 text-white shadow-xs"
                : "text-slate-600 hover:text-slate-900 hover:bg-slate-100"
            }`}
          >
            <ClipboardList className="w-4 h-4" />
            <span>Daftar Peminjaman</span>
            <span
              className={`ml-1 px-2 py-0.5 rounded-full text-[11px] font-extrabold ${
                activeTab === "daftar"
                  ? "bg-blue-500/80 text-white"
                  : "bg-slate-200 text-slate-700"
              }`}
            >
              {borrowings.length}
            </span>
          </button>

          {/* Tab 2: [ 📊 Rekapitulasi & Statistik ] */}
          <button
            onClick={() => setActiveTab("rekapitulasi")}
            className={`flex-1 flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl text-xs sm:text-sm font-bold transition-all cursor-pointer ${
              activeTab === "rekapitulasi"
                ? "bg-blue-600 text-white shadow-xs"
                : "text-slate-600 hover:text-slate-900 hover:bg-slate-100"
            }`}
          >
            <BarChart3 className="w-4 h-4" />
            <span>Rekapitulasi & Statistik</span>
          </button>
        </div>
      </div>

      {/* Error State */}
      {error && (
        <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-center justify-between print:hidden">
          <div className="flex items-center gap-2">
            <AlertTriangle className="w-4 h-4 shrink-0" />
            <span>{error}</span>
          </div>
          <button
            onClick={() => fetchBorrowings(selectedAcademicYear)}
            className="font-bold underline hover:text-rose-900 cursor-pointer"
          >
            Coba Lagi
          </button>
        </div>
      )}

      {/* ==================================================== */}
      {/* 2. KONTEN TAB 1: DAFTAR PEMINJAMAN */}
      {/* ==================================================== */}
      {activeTab === "daftar" && (
        <div className="space-y-4 print:hidden animate-fadeIn">
          {/* Action Bar Atas Tab 1 */}
          <div className="bg-white rounded-2xl border border-slate-200/80 p-4 sm:p-5 shadow-xs">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
              {/* Filter Cepat & Search Input */}
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2.5 flex-1 max-w-xl">
                <div className="relative flex-1">
                  <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                  <input
                    type="text"
                    value={tab1SearchTerm}
                    onChange={(e) => setTab1SearchTerm(e.target.value)}
                    placeholder="Cari kode, barang, peminjam, petugas..."
                    className="w-full pl-9 pr-8 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 transition-all"
                  />
                  {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.5 h-3.5" />
                    </button>
                  )}
                </div>

                <div className="flex items-center gap-1.5 overflow-x-auto pb-1 sm:pb-0">
                  {["Semua", "Dipinjam", "Sudah Kembali", "Terlambat"].map((status) => (
                    <button
                      key={status}
                      onClick={() => setTab1StatusFilter(status)}
                      className={`px-3 py-1.5 rounded-lg text-xs font-semibold whitespace-nowrap transition-all cursor-pointer ${
                        tab1StatusFilter === status
                          ? "bg-slate-900 text-white shadow-xs"
                          : "bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-900"
                      }`}
                    >
                      {status}
                    </button>
                  ))}
                </div>
              </div>

              {/* Action Buttons Tab 1 */}
              <div className="flex flex-wrap items-center gap-2">
                {/* [ + Tambah Peminjaman ] */}
                <button
                  onClick={handleOpenAddModal}
                  className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-xs transition-all cursor-pointer"
                  title="Form Catat Peminjaman Sarana Baru"
                >
                  <Plus className="w-3.5 h-3.5" />
                  <span>Tambah Peminjaman</span>
                </button>

                {/* [ 📊 Export Excel ] */}
                <button
                  onClick={handleExportBorrowingsXLSX}
                  className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-emerald-700 bg-white hover:bg-emerald-50 border border-emerald-300 rounded-xl shadow-xs transition-all cursor-pointer"
                  title="Ekspor Data Peminjaman Barang ke Excel (.xlsx)"
                >
                  <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-600" />
                  <span>Export Excel</span>
                </button>

                {/* [ 📥 Download Template Excel ] */}
                <button
                  onClick={handleDownloadTemplate}
                  className="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 border border-slate-200 rounded-xl transition-colors cursor-pointer"
                  title="Unduh Template Excel Resmi (.xlsx)"
                >
                  <Download className="w-3.5 h-3.5 text-slate-600" />
                  <span className="hidden sm:inline">Download Template</span>
                  <span className="sm:hidden">Template</span>
                </button>

                {/* [ 📤 Import Excel ] */}
                <button
                  onClick={() => setIsImportModalOpen(true)}
                  className="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 border border-slate-200 rounded-xl transition-colors cursor-pointer"
                  title="Upload & Parse File Excel Masal (.xlsx)"
                >
                  <Upload className="w-3.5 h-3.5 text-slate-600" />
                  <span>Import Excel</span>
                </button>
              </div>
            </div>
          </div>

          {/* Tabel Transaksi Peminjaman (Pagination 10 data/halaman) */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden print:hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs border-collapse">
                <thead>
                  <tr className="bg-slate-50 text-slate-600 font-bold uppercase text-[11px] tracking-wider border-b border-slate-200">
                    <th className="py-3 px-3 text-center w-12">NO</th>
                    <th className="py-3 px-3 w-28">KODE</th>
                    <th className="py-3 px-4 min-w-[180px]">NAMA BARANG</th>
                    <th className="py-3 px-2 text-center w-14">JML</th>
                    <th className="py-3 px-4 min-w-[150px]">NAMA PEMINJAM</th>
                    <th className="py-3 px-3 whitespace-nowrap">TGL PINJAM</th>
                    <th className="py-3 px-3 whitespace-nowrap">RENCANA KEMBALI</th>
                    <th className="py-3 px-3 whitespace-nowrap">WAKTU PENGEMBALIAN</th>
                    <th className="py-3 px-3 text-center min-w-[140px]">STATUS PENGEMBALIAN</th>
                    <th className="py-3 px-3 min-w-[130px]">PETUGAS</th>
                    <th className="py-3 px-3 text-center w-36">AKSI</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {isLoading ? (
                    <tr>
                      <td colSpan={11} className="py-12 text-center text-slate-400">
                        <div className="flex flex-col items-center justify-center">
                          <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mb-3" />
                          <p className="font-medium text-slate-600">Memuat data transaksi peminjaman...</p>
                        </div>
                      </td>
                    </tr>
                  ) : tab1PaginatedItems.length === 0 ? (
                    <tr>
                      <td colSpan={11} className="py-12 text-center text-slate-400">
                        <Package className="w-10 h-10 mx-auto mb-2 text-slate-300" />
                        <p className="text-sm font-semibold text-slate-600">
                          Tidak ada catatan peminjaman
                        </p>
                        <p className="text-xs text-slate-400 mt-1">
                          {tab1SearchTerm || tab1StatusFilter !== "Semua"
                            ? "Coba sesuaikan kata kunci pencarian atau filter status."
                            : `Belum ada data untuk Tahun Ajaran ${selectedAcademicYear}. Klik [+ Tambah Peminjaman] untuk memulai.`}
                        </p>
                      </td>
                    </tr>
                  ) : (
                    tab1PaginatedItems.map((item, index) => {
                      const absoluteIndex = tab1StartIndex + index + 1;
                      return (
                        <tr
                          key={item.id}
                          className="hover:bg-slate-50/70 transition-colors group text-slate-700"
                        >
                          <td className="py-3 px-3 text-center font-medium text-slate-400 text-xs">
                            {absoluteIndex}
                          </td>
                          <td className="py-3 px-3">
                            <span className="font-mono font-bold text-slate-800 bg-slate-100 px-2 py-0.5 rounded text-[11px]">
                              {item.borrow_code}
                            </span>
                          </td>
                          <td className="py-3 px-4">
                            <div className="font-semibold text-slate-900">{item.item_name}</div>
                            {item.notes && (
                              <div className="text-[11px] text-slate-500 italic mt-0.5 line-clamp-1" title={item.notes}>
                                {item.notes}
                              </div>
                            )}
                          </td>
                          <td className="py-3 px-2 text-center font-bold text-slate-800">
                            {item.quantity}
                          </td>
                          <td className="py-3 px-4">
                            <div className="font-medium text-slate-900 flex items-center gap-1.5">
                              <User className="w-3.5 h-3.5 text-blue-500 shrink-0" />
                              <span>{item.borrower_name}</span>
                            </div>
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap text-slate-600 font-mono text-[11px]">
                            {item.borrow_date}
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap font-mono text-[11px]">
                            <span
                              className={
                                item.status === "Dipinjam" && item.expected_return_date < todayStr
                                  ? "text-rose-600 font-bold"
                                  : "text-slate-600"
                              }
                            >
                              {item.expected_return_date}
                            </span>
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap font-mono text-[11px] text-slate-600">
                            {item.actual_return_date || "-"}
                          </td>
                          <td className="py-3 px-3 text-center whitespace-nowrap">
                            {renderStatusBadge(item.status, item.expected_return_date)}
                          </td>
                          <td className="py-3 px-3 text-slate-600 text-[11px]">
                            {item.officer_name || "-"}
                          </td>
                          <td className="py-3 px-3 text-center">
                            <div className="flex items-center justify-center gap-1">
                              {/* Aksi: Update Status / Kembalikan */}
                              <button
                                onClick={() => handleOpenStatusModal(item)}
                                className="p-1.5 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors cursor-pointer"
                                title="Update Status / Kembalikan Barang"
                              >
                                <RotateCcw className="w-3.5 h-3.5" />
                              </button>
                              {/* Aksi: Edit */}
                              <button
                                onClick={() => handleOpenEditModal(item)}
                                className="p-1.5 text-amber-600 hover:text-amber-800 hover:bg-amber-50 rounded-lg transition-colors cursor-pointer"
                                title="Edit Peminjaman"
                              >
                                <Pencil className="w-3.5 h-3.5" />
                              </button>
                              {/* Aksi: Hapus */}
                              <button
                                onClick={() => handleOpenDeleteModal(item)}
                                className="p-1.5 text-rose-600 hover:text-rose-800 hover:bg-rose-50 rounded-lg transition-colors cursor-pointer"
                                title="Hapus Peminjaman"
                              >
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Kontrol Tab 1 */}
            <div className="p-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500">
              <div>
                Menampilkan{" "}
                <span className="font-semibold text-slate-900">
                  {tab1TotalItems === 0 ? 0 : tab1StartIndex + 1}
                </span>{" "}
                - <span className="font-semibold text-slate-900">{tab1EndIndex}</span> dari{" "}
                <span className="font-semibold text-slate-900">{tab1TotalItems}</span> data
              </div>

              <div className="flex items-center gap-1">
                <button
                  onClick={() => setTab1CurrentPage((prev) => Math.max(prev - 1, 1))}
                  disabled={tab1CurrentPage === 1 || tab1TotalItems === 0}
                  className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
                >
                  <ChevronLeft className="w-3.5 h-3.5" />
                  <span>Sebelumnya</span>
                </button>

                {Array.from({ length: tab1TotalPages }, (_, i) => i + 1).map((page) => {
                  if (
                    tab1TotalPages > 7 &&
                    page !== 1 &&
                    page !== tab1TotalPages &&
                    Math.abs(page - tab1CurrentPage) > 1
                  ) {
                    if (page === 2 || page === tab1TotalPages - 1) {
                      return (
                        <span key={page} className="px-1.5 text-slate-400">
                          ...
                        </span>
                      );
                    }
                    return null;
                  }

                  return (
                    <button
                      key={page}
                      onClick={() => setTab1CurrentPage(page)}
                      className={`w-8 h-8 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                        tab1CurrentPage === page
                          ? "bg-blue-600 text-white shadow-xs"
                          : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
                      }`}
                    >
                      {page}
                    </button>
                  );
                })}

                <button
                  onClick={() => setTab1CurrentPage((prev) => Math.min(prev + 1, tab1TotalPages))}
                  disabled={tab1CurrentPage === tab1TotalPages || tab1TotalItems === 0}
                  className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
                >
                  <span>Selanjutnya</span>
                  <ChevronRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ==================================================== */}
      {/* 3. KONTEN TAB 2: REKAPITULASI & STATISTIK */}
      {/* ==================================================== */}
      {activeTab === "rekapitulasi" && (
        <div className="space-y-6 print:hidden animate-fadeIn">
          {/* Action Bar Atas Tab 2 */}
          <div className="bg-white rounded-2xl border border-slate-200/80 p-4 sm:p-5 shadow-xs">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h3 className="text-sm sm:text-base font-bold text-slate-900">
                  Rekapitulasi & Statistik Peminjaman
                </h3>
                <p className="text-xs text-slate-500">
                  Analisis pergerakan sarana prasarana, proporsi status, dan ekspor laporan resmi
                </p>
              </div>

              <div className="flex flex-wrap items-center gap-2 self-start sm:self-auto">
                {/* [ 📊 Export Excel ] */}
                <button
                  onClick={handleExportBorrowingRekapXLSX}
                  className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-emerald-700 bg-white hover:bg-emerald-50 border border-emerald-300 rounded-xl shadow-xs transition-all cursor-pointer"
                  title="Ekspor Data Rekapitulasi Peminjaman ke Excel (.xlsx)"
                >
                  <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-600" />
                  <span>Export Excel</span>
                </button>

                {/* [ 🖨️ Cetak Rekap PDF ] */}
                <button
                  onClick={() => setIsPrintModalOpen(true)}
                  className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-xs transition-all cursor-pointer"
                  title="Cetak Laporan Rekapitulasi PDF Resmi"
                >
                  <Printer className="w-3.5 h-3.5" />
                  <span>Cetak Rekap PDF</span>
                </button>
              </div>
            </div>
          </div>

          {/* Multi-Filter Bar Tab 2 */}
          <div className="bg-white rounded-2xl border border-slate-200/80 p-4 sm:p-5 shadow-xs space-y-3.5">
            <div className="flex items-center justify-between pb-2.5 border-b border-slate-100">
              <div className="flex items-center gap-2 text-xs font-bold text-slate-800">
                <Filter className="w-4 h-4 text-blue-600" />
                <span>Filter Multi-Kriteria Statistik</span>
              </div>
              <button
                onClick={handleResetRekapFilters}
                className="text-[11px] font-semibold text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1 cursor-pointer"
                title="Reset semua filter statistik ke default"
              >
                <RotateCcw className="w-3 h-3" />
                <span>Reset Filter</span>
              </button>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
              {/* 1. Filter Tahun Ajaran */}
              <div className="space-y-1">
                <label className="block text-[11px] font-bold uppercase tracking-wider text-slate-500">
                  Tahun Ajaran (T.A.)
                </label>
                <div className="relative">
                  <Calendar className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
                  <select
                    value={selectedAcademicYear}
                    onChange={(e) => setSelectedAcademicYear(e.target.value)}
                    className="w-full pl-8 pr-3 py-2 text-xs font-semibold 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 cursor-pointer"
                  >
                    {ACADEMIC_YEARS.map((ay) => (
                      <option key={ay} value={ay}>
                        {ay} {ay === activeAcademicYear ? "(Aktif)" : ""}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* 2. Filter Tahun */}
              <div className="space-y-1">
                <label className="block text-[11px] font-bold uppercase tracking-wider text-slate-500">
                  Tahun Kalender
                </label>
                <div className="relative">
                  <CalendarDays className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
                  <select
                    value={selectedYear}
                    onChange={(e) => setSelectedYear(e.target.value)}
                    className="w-full pl-8 pr-3 py-2 text-xs font-semibold 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 cursor-pointer"
                  >
                    {AVAILABLE_YEARS.map((y) => (
                      <option key={y} value={y}>
                        {y === currentYearStr ? `${y} (Tahun Aktif)` : y}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* 3. Filter Bulan */}
              <div className="space-y-1">
                <label className="block text-[11px] font-bold uppercase tracking-wider text-slate-500">
                  Bulan Transaksi
                </label>
                <div className="relative">
                  <Clock className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
                  <select
                    value={selectedMonth}
                    onChange={(e) => setSelectedMonth(e.target.value)}
                    className="w-full pl-8 pr-3 py-2 text-xs font-semibold 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 cursor-pointer"
                  >
                    {AVAILABLE_MONTHS.map((m) => (
                      <option key={m} value={m}>
                        {m}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* 4. Filter Status PENGEMBALIAN */}
              <div className="space-y-1">
                <label className="block text-[11px] font-bold uppercase tracking-wider text-slate-500">
                  Status Pengembalian
                </label>
                <div className="relative">
                  <CheckCircle2 className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
                  <select
                    value={selectedStatus}
                    onChange={(e) => setSelectedStatus(e.target.value)}
                    className="w-full pl-8 pr-3 py-2 text-xs font-semibold 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 cursor-pointer"
                  >
                    {STATUS_OPTIONS.map((st) => (
                      <option key={st} value={st}>
                        {st}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            </div>

            {/* Search Input Tab 2 */}
            <div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-2">
              <div className="relative w-full sm:w-80">
                <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type="text"
                  value={rekapSearchTerm}
                  onChange={(e) => setRekapSearchTerm(e.target.value)}
                  placeholder="Cari kode, nama barang, peminjam..."
                  className="w-full pl-9 pr-8 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 transition-all"
                />
                {rekapSearchTerm && (
                  <button
                    onClick={() => setRekapSearchTerm("")}
                    className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                  >
                    <X className="w-3.5 h-3.5" />
                  </button>
                )}
              </div>

              <div className="text-xs text-slate-500 flex items-center gap-2 self-start sm:self-center">
                <span className="font-medium">Filter Aktif:</span>
                <span className="px-2 py-0.5 rounded-md bg-blue-50 text-blue-700 font-semibold text-[11px] border border-blue-100">
                  {selectedAcademicYear}
                </span>
                <span className="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 font-medium text-[11px]">
                  {selectedYear}
                </span>
                <span className="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 font-medium text-[11px]">
                  {selectedMonth}
                </span>
                {selectedStatus !== "Semua Status" && (
                  <span className="px-2 py-0.5 rounded-md bg-amber-50 text-amber-700 font-semibold text-[11px] border border-amber-200">
                    {selectedStatus}
                  </span>
                )}
              </div>
            </div>
          </div>

          {/* Metric Cards Ringkasan */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <StatCard
              title="Total Peminjaman"
              value={isLoading ? "..." : `${rekapStats.total} Transaksi`}
              subtitle="Sesuai filter statistik"
              icon={Package}
              iconColor="blue"
            />
            <StatCard
              title="Sedang Dipinjam"
              value={isLoading ? "..." : `${rekapStats.dipinjam} Item`}
              subtitle="Belum dikembalikan"
              icon={Clock}
              iconColor="warning"
            />
            <StatCard
              title="Sudah Kembali"
              value={isLoading ? "..." : `${rekapStats.kembali} Item`}
              subtitle="Tuntas diserahterimakan"
              icon={CheckCircle2}
              iconColor="success"
            />
            <StatCard
              title="Terlambat"
              value={isLoading ? "..." : `${rekapStats.terlambat} Item`}
              subtitle="Lewat batas rencana kembali"
              icon={AlertTriangle}
              iconColor="danger"
            />
          </div>

          {/* Visualisasi Grafik: Trend Chart & Doughnut Chart */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
            {/* Tren Bar / Line Chart */}
            <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">
                        Grafik Tren Peminjaman Sarana
                      </h3>
                      <p className="text-[11px] text-slate-500">
                        {selectedMonth === "Semua Bulan"
                          ? `Distribusi transaksi per bulan (${selectedYear})`
                          : `Distribusi transaksi mingguan (${selectedMonth} ${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="barGradient" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#2563eb" />
                        <stop offset="100%" stopColor="#3b82f6" />
                      </linearGradient>
                      <linearGradient id="lineAreaGradient" 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 = 145 - pct * 115;
                      const val = Math.round(pct * maxTrendCount);
                      return (
                        <g key={idx}>
                          <line
                            x1="35"
                            y1={y}
                            x2="505"
                            y2={y}
                            stroke="#e2e8f0"
                            strokeDasharray={pct === 0 ? "none" : "3,3"}
                            strokeWidth="1"
                          />
                          <text
                            x="30"
                            y={y + 3}
                            textAnchor="end"
                            fontSize="9"
                            fill="#94a3b8"
                            fontFamily="monospace"
                          >
                            {val}
                          </text>
                        </g>
                      );
                    })}

                    {trendChartType === "bar" &&
                      trendData.map((d, i) => {
                        const totalBars = trendData.length;
                        const slotWidth = 470 / totalBars;
                        const barWidth = Math.min(slotWidth * 0.58, 28);
                        const x = 35 + i * slotWidth + (slotWidth - barWidth) / 2;
                        const barHeight = (d.count / maxTrendCount) * 115;
                        const y = 145 - barHeight;
                        const isHovered = hoveredTrendIdx === i;

                        return (
                          <g
                            key={i}
                            onMouseEnter={() => setHoveredTrendIdx(i)}
                            onMouseLeave={() => setHoveredTrendIdx(null)}
                            className="cursor-pointer group"
                          >
                            <rect
                              x={x}
                              y={d.count > 0 ? y : 144}
                              width={barWidth}
                              height={d.count > 0 ? barHeight : 1}
                              rx={4}
                              fill={isHovered ? "#1d4ed8" : "url(#barGradient)"}
                              className="transition-all duration-200"
                            />
                            {d.count > 0 && (
                              <text
                                x={x + barWidth / 2}
                                y={y - 5}
                                textAnchor="middle"
                                fontSize="10"
                                fontWeight="bold"
                                fill={isHovered ? "#1d4ed8" : "#475569"}
                              >
                                {d.count}
                              </text>
                            )}
                            <text
                              x={x + barWidth / 2}
                              y="162"
                              textAnchor="middle"
                              fontSize="9.5"
                              fontWeight={isHovered ? "bold" : "500"}
                              fill={isHovered ? "#0f172a" : "#64748b"}
                            >
                              {d.label}
                            </text>
                          </g>
                        );
                      })}

                    {trendChartType === "line" && (() => {
                      const totalPoints = trendData.length;
                      const points = trendData.map((d, i) => {
                        const x = 45 + i * (450 / (totalPoints > 1 ? totalPoints - 1 : 1));
                        const y = 145 - (d.count / maxTrendCount) * 115;
                        return { x, y, data: d };
                      });

                      const linePath = points.reduce(
                        (acc, p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `${acc} L ${p.x} ${p.y}`),
                        ""
                      );
                      const areaPath = `${linePath} L ${points[points.length - 1].x} 145 L ${points[0].x} 145 Z`;

                      return (
                        <g>
                          <path d={areaPath} fill="url(#lineAreaGradient)" />
                          <path
                            d={linePath}
                            fill="none"
                            stroke="#2563eb"
                            strokeWidth="2.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          {points.map((p, i) => {
                            const isHovered = hoveredTrendIdx === i;
                            return (
                              <g
                                key={i}
                                onMouseEnter={() => setHoveredTrendIdx(i)}
                                onMouseLeave={() => setHoveredTrendIdx(null)}
                                className="cursor-pointer"
                              >
                                <circle
                                  cx={p.x}
                                  cy={p.y}
                                  r={isHovered ? 6 : 4}
                                  fill={isHovered ? "#1d4ed8" : "#ffffff"}
                                  stroke="#2563eb"
                                  strokeWidth={isHovered ? 3 : 2}
                                  className="transition-all"
                                />
                                {p.data.count > 0 && (
                                  <text
                                    x={p.x}
                                    y={p.y - 8}
                                    textAnchor="middle"
                                    fontSize="10"
                                    fontWeight="bold"
                                    fill="#1e293b"
                                  >
                                    {p.data.count}
                                  </text>
                                )}
                                <text
                                  x={p.x}
                                  y="162"
                                  textAnchor="middle"
                                  fontSize="9.5"
                                  fill="#64748b"
                                >
                                  {p.data.label}
                                </text>
                              </g>
                            );
                          })}
                        </g>
                      );
                    })()}
                  </svg>
                </div>
              </div>

              <div className="mt-2 pt-2 border-t border-slate-100 flex items-center justify-between text-xs">
                {hoveredTrendIdx !== null ? (
                  <div className="flex items-center gap-3 text-slate-700">
                    <span className="font-bold text-slate-900">
                      {trendData[hoveredTrendIdx].fullLabel}:
                    </span>
                    <span>
                      Total: <strong className="text-blue-600">{trendData[hoveredTrendIdx].count}</strong>
                    </span>
                    <span className="text-amber-700">
                      Dipinjam: <strong>{trendData[hoveredTrendIdx].dipinjam}</strong>
                    </span>
                    <span className="text-emerald-700">
                      Kembali: <strong>{trendData[hoveredTrendIdx].kembali}</strong>
                    </span>
                    <span className="text-rose-700">
                      Terlambat: <strong>{trendData[hoveredTrendIdx].terlambat}</strong>
                    </span>
                  </div>
                ) : (
                  <div className="text-slate-400 text-[11px] flex items-center gap-1">
                    <Info className="w-3.5 h-3.5" />
                    <span>Arahkan kursor ke batang/titik grafik untuk melihat rincian status.</span>
                  </div>
                )}
                <span className="text-[11px] text-slate-500 font-medium">
                  {selectedMonth} • {selectedYear}
                </span>
              </div>
            </div>

            {/* Doughnut Chart Proporsi Status */}
            <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-2">
                  <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 Status Pengembalian
                    </h3>
                    <p className="text-[11px] text-slate-500">
                      Distribusi status peminjaman sarana
                    </p>
                  </div>
                </div>

                <div className="flex flex-col items-center justify-center my-3">
                  <div className="relative w-36 h-36">
                    <svg
                      viewBox="0 0 130 130"
                      className="w-full h-full -rotate-90 transform"
                    >
                      <circle
                        cx="65"
                        cy="65"
                        r="54"
                        fill="none"
                        stroke="#f1f5f9"
                        strokeWidth="16"
                      />

                      {donutData.total > 0 && (
                        <>
                          {donutData.dipinjam.count > 0 && (
                            <circle
                              cx="65"
                              cy="65"
                              r="54"
                              fill="none"
                              stroke="#f59e0b"
                              strokeWidth="16"
                              strokeDasharray={`${donutData.dipinjam.len} ${donutData.circumference}`}
                              strokeDashoffset={donutData.dipinjam.offset}
                              className="transition-all duration-500"
                            />
                          )}

                          {donutData.kembali.count > 0 && (
                            <circle
                              cx="65"
                              cy="65"
                              r="54"
                              fill="none"
                              stroke="#10b981"
                              strokeWidth="16"
                              strokeDasharray={`${donutData.kembali.len} ${donutData.circumference}`}
                              strokeDashoffset={donutData.kembali.offset}
                              className="transition-all duration-500"
                            />
                          )}

                          {donutData.terlambat.count > 0 && (
                            <circle
                              cx="65"
                              cy="65"
                              r="54"
                              fill="none"
                              stroke="#f43f5e"
                              strokeWidth="16"
                              strokeDasharray={`${donutData.terlambat.len} ${donutData.circumference}`}
                              strokeDashoffset={donutData.terlambat.offset}
                              className="transition-all duration-500"
                            />
                          )}
                        </>
                      )}
                    </svg>

                    <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                      <span className="text-xl font-extrabold text-slate-800">
                        {donutData.total}
                      </span>
                      <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider">
                        Transaksi
                      </span>
                    </div>
                  </div>
                </div>

                <div className="space-y-2 pt-1 text-xs">
                  <div className="flex items-center justify-between p-2 rounded-xl bg-amber-50/70 border border-amber-200/60">
                    <div className="flex items-center gap-2">
                      <span className="w-2.5 h-2.5 rounded-full bg-amber-500" />
                      <span className="font-semibold text-amber-900">Dipinjam</span>
                    </div>
                    <div className="text-right">
                      <span className="font-bold text-amber-900">{donutData.dipinjam.count} Item</span>
                      <span className="text-[11px] text-amber-700 ml-1.5 font-mono">
                        ({donutData.dipinjam.percent})
                      </span>
                    </div>
                  </div>

                  <div className="flex items-center justify-between p-2 rounded-xl bg-emerald-50/70 border border-emerald-200/60">
                    <div className="flex items-center gap-2">
                      <span className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
                      <span className="font-semibold text-emerald-900">Sudah Kembali</span>
                    </div>
                    <div className="text-right">
                      <span className="font-bold text-emerald-900">{donutData.kembali.count} Item</span>
                      <span className="text-[11px] text-emerald-700 ml-1.5 font-mono">
                        ({donutData.kembali.percent})
                      </span>
                    </div>
                  </div>

                  <div className="flex items-center justify-between p-2 rounded-xl bg-rose-50/70 border border-rose-200/60">
                    <div className="flex items-center gap-2">
                      <span className="w-2.5 h-2.5 rounded-full bg-rose-500" />
                      <span className="font-semibold text-rose-900">Terlambat</span>
                    </div>
                    <div className="text-right">
                      <span className="font-bold text-rose-900">{donutData.terlambat.count} Item</span>
                      <span className="text-[11px] text-rose-700 ml-1.5 font-mono">
                        ({donutData.terlambat.percent})
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="pt-2 text-[10px] text-slate-400 text-center">
                * Dihitung secara dinamis sesuai filter yang dipilih
              </div>
            </div>
          </div>

          {/* Tabel Rekapitulasi Berpaginasi Tab 2 */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden print:hidden">
            <div className="p-4 bg-slate-50/70 border-b border-slate-200/80 flex items-center justify-between">
              <div>
                <h4 className="text-xs font-bold uppercase tracking-wider text-slate-700">
                  Data Rekapitulasi Peminjaman Sarana
                </h4>
                <p className="text-[11px] text-slate-500">
                  Menampilkan data peminjaman maksimal 10 baris per halaman
                </p>
              </div>
              <div className="text-xs font-semibold text-slate-600 bg-white px-3 py-1 rounded-lg border border-slate-200">
                Total: <span className="text-blue-600 font-bold">{tab2TotalItems}</span> Data
              </div>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs border-collapse">
                <thead>
                  <tr className="bg-slate-50 text-slate-600 font-bold uppercase text-[11px] tracking-wider border-b border-slate-200">
                    <th className="py-3 px-3 text-center w-12">NO</th>
                    <th className="py-3 px-3 w-28">KODE</th>
                    <th className="py-3 px-4 min-w-[180px]">NAMA BARANG</th>
                    <th className="py-3 px-2 text-center w-14">JML</th>
                    <th className="py-3 px-4 min-w-[150px]">NAMA PEMINJAM</th>
                    <th className="py-3 px-3 whitespace-nowrap">TGL PINJAM</th>
                    <th className="py-3 px-3 whitespace-nowrap">RENCANA KEMBALI</th>
                    <th className="py-3 px-3 whitespace-nowrap">WAKTU PENGEMBALIAN</th>
                    <th className="py-3 px-3 text-center min-w-[140px]">STATUS PENGEMBALIAN</th>
                    <th className="py-3 px-3 min-w-[130px]">PETUGAS</th>
                    <th className="py-3 px-3 text-center w-36">AKSI</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {isLoading ? (
                    <tr>
                      <td colSpan={11} className="py-12 text-center text-slate-400">
                        <div className="flex flex-col items-center justify-center">
                          <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mb-3" />
                          <p className="font-medium text-slate-600">Memuat data rekapitulasi...</p>
                        </div>
                      </td>
                    </tr>
                  ) : tab2PaginatedItems.length === 0 ? (
                    <tr>
                      <td colSpan={11} className="py-12 text-center text-slate-400">
                        <Package className="w-10 h-10 mx-auto mb-2 text-slate-300" />
                        <p className="text-sm font-semibold text-slate-600">
                          Tidak ada data peminjaman yang sesuai kriteria filter
                        </p>
                        <p className="text-xs text-slate-400 mt-1">
                          Silakan sesuaikan pilihan tahun, bulan, atau status pengembalian.
                        </p>
                      </td>
                    </tr>
                  ) : (
                    tab2PaginatedItems.map((item, index) => {
                      const absoluteIndex = tab2StartIndex + index + 1;
                      return (
                        <tr
                          key={item.id}
                          className="hover:bg-slate-50/70 transition-colors group text-slate-700"
                        >
                          <td className="py-3 px-3 text-center font-medium text-slate-400 text-xs">
                            {absoluteIndex}
                          </td>
                          <td className="py-3 px-3">
                            <span className="font-mono font-bold text-slate-800 bg-slate-100 px-2 py-0.5 rounded text-[11px]">
                              {item.borrow_code}
                            </span>
                          </td>
                          <td className="py-3 px-4">
                            <div className="font-semibold text-slate-900">{item.item_name}</div>
                            {item.notes && (
                              <div className="text-[11px] text-slate-500 italic mt-0.5 line-clamp-1" title={item.notes}>
                                {item.notes}
                              </div>
                            )}
                          </td>
                          <td className="py-3 px-2 text-center font-bold text-slate-800">
                            {item.quantity}
                          </td>
                          <td className="py-3 px-4">
                            <div className="font-medium text-slate-900 flex items-center gap-1.5">
                              <User className="w-3.5 h-3.5 text-blue-500 shrink-0" />
                              <span>{item.borrower_name}</span>
                            </div>
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap text-slate-600 font-mono text-[11px]">
                            {item.borrow_date}
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap font-mono text-[11px]">
                            <span
                              className={
                                item.status === "Dipinjam" && item.expected_return_date < todayStr
                                  ? "text-rose-600 font-bold"
                                  : "text-slate-600"
                              }
                            >
                              {item.expected_return_date}
                            </span>
                          </td>
                          <td className="py-3 px-3 whitespace-nowrap font-mono text-[11px] text-slate-600">
                            {item.actual_return_date || "-"}
                          </td>
                          <td className="py-3 px-3 text-center whitespace-nowrap">
                            {renderStatusBadge(item.status, item.expected_return_date)}
                          </td>
                          <td className="py-3 px-3 text-slate-600 text-[11px]">
                            {item.officer_name || "-"}
                          </td>
                          <td className="py-3 px-3 text-center">
                            <div className="flex items-center justify-center gap-1">
                              <button
                                onClick={() => handleOpenStatusModal(item)}
                                className="p-1.5 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors cursor-pointer"
                                title="Detail / Update Status Pengembalian"
                              >
                                <RotateCcw className="w-3.5 h-3.5" />
                              </button>
                              <button
                                onClick={() => handleOpenEditModal(item)}
                                className="p-1.5 text-amber-600 hover:text-amber-800 hover:bg-amber-50 rounded-lg transition-colors cursor-pointer"
                                title="Edit Data Peminjaman"
                              >
                                <Pencil className="w-3.5 h-3.5" />
                              </button>
                              <button
                                onClick={() => handleOpenDeleteModal(item)}
                                className="p-1.5 text-rose-600 hover:text-rose-800 hover:bg-rose-50 rounded-lg transition-colors cursor-pointer"
                                title="Hapus Data Peminjaman"
                              >
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Kontrol Tab 2 */}
            <div className="p-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500">
              <div>
                Menampilkan{" "}
                <span className="font-semibold text-slate-900">
                  {tab2TotalItems === 0 ? 0 : tab2StartIndex + 1}
                </span>{" "}
                - <span className="font-semibold text-slate-900">{tab2EndIndex}</span> dari{" "}
                <span className="font-semibold text-slate-900">{tab2TotalItems}</span> data
              </div>

              <div className="flex items-center gap-1">
                <button
                  onClick={() => setTab2CurrentPage((prev) => Math.max(prev - 1, 1))}
                  disabled={tab2CurrentPage === 1 || tab2TotalItems === 0}
                  className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
                >
                  <ChevronLeft className="w-3.5 h-3.5" />
                  <span>Sebelumnya</span>
                </button>

                {Array.from({ length: tab2TotalPages }, (_, i) => i + 1).map((page) => {
                  if (
                    tab2TotalPages > 7 &&
                    page !== 1 &&
                    page !== tab2TotalPages &&
                    Math.abs(page - tab2CurrentPage) > 1
                  ) {
                    if (page === 2 || page === tab2TotalPages - 1) {
                      return (
                        <span key={page} className="px-1.5 text-slate-400">
                          ...
                        </span>
                      );
                    }
                    return null;
                  }

                  return (
                    <button
                      key={page}
                      onClick={() => setTab2CurrentPage(page)}
                      className={`w-8 h-8 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                        tab2CurrentPage === page
                          ? "bg-blue-600 text-white shadow-xs"
                          : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
                      }`}
                    >
                      {page}
                    </button>
                  );
                })}

                <button
                  onClick={() => setTab2CurrentPage((prev) => Math.min(prev + 1, tab2TotalPages))}
                  disabled={tab2CurrentPage === tab2TotalPages || tab2TotalItems === 0}
                  className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
                >
                  <span>Selanjutnya</span>
                  <ChevronRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ==================================================== */}
      {/* MODAL: TAMBAH PEMINJAMAN BARU */}
      {/* ==================================================== */}
      <Modal
        isOpen={isAddModalOpen}
        onClose={() => !isSubmitting && setIsAddModalOpen(false)}
        title="Tambah Catatan Peminjaman Sarana"
        description={`Pencatatan peminjaman fasilitas sekolah untuk Tahun Ajaran ${selectedAcademicYear}`}
        maxWidth="xl"
      >
        <form onSubmit={handleSubmitAdd} className="space-y-4 pt-2">
          {formError && (
            <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <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">
                Kode Peminjaman (Opsional)
              </label>
              <input
                type="text"
                value={formData.borrow_code}
                onChange={(e) => setFormData({ ...formData, borrow_code: e.target.value })}
                placeholder="Otomatis jika kosong (ex: PJ-2026-007)"
                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">
                Jumlah Barang (Jml)
              </label>
              <input
                type="number"
                min="1"
                value={formData.quantity}
                onChange={(e) => setFormData({ ...formData, quantity: 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>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Nama Barang
            </label>
            <input
              type="text"
              value={formData.item_name}
              onChange={(e) => setFormData({ ...formData, item_name: e.target.value })}
              placeholder="Contoh: Proyektor Epson EB-X51 HD / Mic Wireless"
              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">
                Nama Peminjam
              </label>
              <input
                type="text"
                value={formData.borrower_name}
                onChange={(e) => setFormData({ ...formData, borrower_name: e.target.value })}
                placeholder="Contoh: Ahmad Fauzi, S.Pd / Siswa XI-4"
                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">
                Petugas Layanan Sarpras
              </label>
              <input
                type="text"
                value={formData.officer_name}
                onChange={(e) => setFormData({ ...formData, officer_name: e.target.value })}
                placeholder="Nama staf petugas"
                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">
                Tanggal Pinjam
              </label>
              <input
                type="date"
                value={formData.borrow_date}
                onChange={(e) => setFormData({ ...formData, borrow_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">
                Rencana Tanggal Kembali
              </label>
              <input
                type="date"
                value={formData.expected_return_date}
                onChange={(e) => setFormData({ ...formData, expected_return_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">
                Status Pengembalian Awal
              </label>
              <select
                value={formData.status}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    status: e.target.value as "Dipinjam" | "Sudah Kembali" | "Terlambat",
                  })
                }
                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="Dipinjam">Dipinjam (Sedang berlangsung)</option>
                <option value="Sudah Kembali">Sudah Kembali</option>
                <option value="Terlambat">Terlambat</option>
              </select>
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Waktu Pengembalian (Jika Sudah Kembali)
              </label>
              <input
                type="text"
                value={formData.actual_return_date}
                onChange={(e) => setFormData({ ...formData, actual_return_date: e.target.value })}
                placeholder="Contoh: 2026-10-07 14:00 (Opsional)"
                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>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Catatan / Keperluan Peminjaman
            </label>
            <textarea
              rows={2}
              value={formData.notes}
              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
              placeholder="Contoh: Digunakan untuk presentasi Asesmen Tengah Semester di Ruang Multimedia"
              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={() => setIsAddModalOpen(false)}
              disabled={isSubmitting}
              className="px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="inline-flex items-center gap-1.5 px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-xs transition-all 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" />
              ) : (
                <Plus className="w-3.5 h-3.5" />
              )}
              <span>Simpan Catatan</span>
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: EDIT DATA PEMINJAMAN */}
      {/* ==================================================== */}
      <Modal
        isOpen={isEditModalOpen}
        onClose={() => !isSubmitting && setIsEditModalOpen(false)}
        title="Edit Data Peminjaman Sarana"
        description="Perbarui informasi peminjaman, kuantitas, atau tanggal rencana pengembalian"
        maxWidth="xl"
      >
        <form onSubmit={handleSubmitEdit} className="space-y-4 pt-2">
          {formError && (
            <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <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">
                Kode Peminjaman
              </label>
              <input
                type="text"
                value={formData.borrow_code}
                onChange={(e) => setFormData({ ...formData, borrow_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 font-mono"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Jumlah Barang (Jml)
              </label>
              <input
                type="number"
                min="1"
                value={formData.quantity}
                onChange={(e) => setFormData({ ...formData, quantity: 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>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Nama Barang
            </label>
            <input
              type="text"
              value={formData.item_name}
              onChange={(e) => setFormData({ ...formData, item_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 className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Nama Peminjam
              </label>
              <input
                type="text"
                value={formData.borrower_name}
                onChange={(e) => setFormData({ ...formData, borrower_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">
                Petugas Layanan Sarpras
              </label>
              <input
                type="text"
                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>

          <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 Pinjam
              </label>
              <input
                type="date"
                value={formData.borrow_date}
                onChange={(e) => setFormData({ ...formData, borrow_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">
                Rencana Tanggal Kembali
              </label>
              <input
                type="date"
                value={formData.expected_return_date}
                onChange={(e) => setFormData({ ...formData, expected_return_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">
                Status Pengembalian
              </label>
              <select
                value={formData.status}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    status: e.target.value as "Dipinjam" | "Sudah Kembali" | "Terlambat",
                  })
                }
                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="Dipinjam">Dipinjam</option>
                <option value="Sudah Kembali">Sudah Kembali</option>
                <option value="Terlambat">Terlambat</option>
              </select>
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Waktu Pengembalian Aktual
              </label>
              <input
                type="text"
                value={formData.actual_return_date}
                onChange={(e) => setFormData({ ...formData, actual_return_date: e.target.value })}
                placeholder="Contoh: 2026-10-07 15:30 (Opsional)"
                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>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Catatan / Keterangan
            </label>
            <textarea
              rows={2}
              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={() => setIsEditModalOpen(false)}
              disabled={isSubmitting}
              className="px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="inline-flex items-center gap-1.5 px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-xs transition-all 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" />
              ) : (
                <Check className="w-3.5 h-3.5" />
              )}
              <span>Simpan Perubahan</span>
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: DETAIL & UPDATE STATUS PENGEMBALIAN */}
      {/* ==================================================== */}
      <Modal
        isOpen={isStatusModalOpen}
        onClose={() => !isSubmitting && setIsStatusModalOpen(false)}
        title="Detail & Update Status Pengembalian"
        description="Rincian informasi barang peminjaman dan perbarui status serah terima pengembalian"
        maxWidth="lg"
      >
        <form onSubmit={handleSubmitStatusUpdate} className="space-y-4 pt-2">
          {activeItem && (
            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 space-y-2.5 text-xs">
              <div className="flex items-center justify-between pb-2 border-b border-slate-200/80">
                <span className="font-mono font-bold text-slate-800 text-xs bg-white px-2 py-0.5 rounded border border-slate-200">
                  {activeItem.borrow_code}
                </span>
                <div>{renderStatusBadge(activeItem.status, activeItem.expected_return_date)}</div>
              </div>

              <div className="grid grid-cols-2 gap-2 text-slate-700">
                <div>
                  <span className="text-slate-400 block text-[10px] uppercase font-semibold">
                    Nama Barang:
                  </span>
                  <span className="font-bold text-slate-900">{activeItem.item_name}</span>
                </div>
                <div>
                  <span className="text-slate-400 block text-[10px] uppercase font-semibold">
                    Jumlah Unit:
                  </span>
                  <span className="font-bold text-slate-900">{activeItem.quantity} Unit</span>
                </div>
                <div>
                  <span className="text-slate-400 block text-[10px] uppercase font-semibold">
                    Nama Peminjam:
                  </span>
                  <span className="font-semibold text-slate-900">{activeItem.borrower_name}</span>
                </div>
                <div>
                  <span className="text-slate-400 block text-[10px] uppercase font-semibold">
                    Petugas Layanan:
                  </span>
                  <span className="text-slate-900">{activeItem.officer_name || "-"}</span>
                </div>
                <div>
                  <span className="text-slate-400 block text-[10px] uppercase font-semibold">
                    Tanggal Pinjam:
                  </span>
                  <span className="font-mono text-slate-800">{activeItem.borrow_date}</span>
                </div>
                <div>
                  <span className="text-slate-400 block text-[10px] uppercase font-semibold">
                    Batas Rencana Kembali:
                  </span>
                  <span
                    className={`font-mono font-bold ${
                      activeItem.status === "Dipinjam" && activeItem.expected_return_date < todayStr
                        ? "text-rose-600"
                        : "text-slate-800"
                    }`}
                  >
                    {activeItem.expected_return_date}
                  </span>
                </div>
              </div>

              {activeItem.notes && (
                <div className="pt-1 text-[11px] text-slate-600 italic border-t border-slate-200/60">
                  Catatan: {activeItem.notes}
                </div>
              )}
            </div>
          )}

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1.5">
              Pilih Status Pengembalian Baru:
            </label>
            <div className="grid grid-cols-3 gap-2">
              {(["Dipinjam", "Sudah Kembali", "Terlambat"] as const).map((st) => (
                <button
                  type="button"
                  key={st}
                  onClick={() =>
                    setQuickStatusData({
                      ...quickStatusData,
                      status: st,
                    })
                  }
                  className={`py-2 px-3 rounded-xl text-xs font-bold border transition-all cursor-pointer ${
                    quickStatusData.status === st
                      ? st === "Sudah Kembali"
                        ? "bg-emerald-600 text-white border-emerald-600 shadow-xs"
                        : st === "Terlambat"
                        ? "bg-rose-600 text-white border-rose-600 shadow-xs"
                        : "bg-amber-600 text-white border-amber-600 shadow-xs"
                      : "bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100"
                  }`}
                >
                  {st}
                </button>
              ))}
            </div>
          </div>

          {quickStatusData.status === "Sudah Kembali" && (
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Waktu Pengembalian Diterima
              </label>
              <input
                type="text"
                value={quickStatusData.actual_return_date}
                onChange={(e) =>
                  setQuickStatusData({ ...quickStatusData, actual_return_date: e.target.value })
                }
                placeholder="Contoh: 2026-10-07 15:30"
                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"
              />
              <p className="text-[10px] text-slate-400 mt-1">
                Waktu barang fisik diserahkan kembali ke bagian sarpras.
              </p>
            </div>
          )}

          <div className="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsStatusModalOpen(false)}
              disabled={isSubmitting}
              className="px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="inline-flex items-center gap-1.5 px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-xs transition-all 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" />
              ) : (
                <CheckCircle2 className="w-3.5 h-3.5" />
              )}
              <span>Simpan Status</span>
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: HAPUS PEMINJAMAN */}
      {/* ==================================================== */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => !isSubmitting && setIsDeleteModalOpen(false)}
        title="Hapus Data Peminjaman"
        description="Apakah Anda yakin ingin menghapus data peminjaman ini secara permanen?"
        maxWidth="md"
      >
        <div className="space-y-4 pt-2">
          {activeItem && (
            <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200 text-xs space-y-1.5">
              <div className="flex justify-between">
                <span className="text-slate-500">Kode Peminjaman:</span>
                <span className="font-mono font-bold text-slate-900">{activeItem.borrow_code}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Nama Barang:</span>
                <span className="font-bold text-slate-900">{activeItem.item_name}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Peminjam:</span>
                <span className="font-semibold text-slate-900">{activeItem.borrower_name}</span>
              </div>
            </div>
          )}

          <div className="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsDeleteModalOpen(false)}
              disabled={isSubmitting}
              className="px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="button"
              onClick={handleExecuteDelete}
              disabled={isSubmitting}
              className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-rose-600 hover:bg-rose-700 active:bg-rose-800 rounded-xl shadow-xs transition-all 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" />
              ) : (
                <Trash2 className="w-3.5 h-3.5" />
              )}
              <span>Ya, Hapus Data</span>
            </button>
          </div>
        </div>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: IMPORT EXCEL (.XLSX) */}
      {/* ==================================================== */}
      <Modal
        isOpen={isImportModalOpen}
        onClose={() => !isImporting && setIsImportModalOpen(false)}
        title="Import Data Peminjaman dari Excel (.xlsx)"
        description="Unggah file spreadsheet Excel berisi rekaman peminjaman sarana. Sistem akan membaca baris dan menyimpannya secara otomatis."
        maxWidth="lg"
      >
        <div className="space-y-4 pt-2">
          {importError && (
            <div className="p-3.5 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs font-medium flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <span>{importError}</span>
            </div>
          )}

          <div className="p-3 bg-blue-50/70 border border-blue-200/60 rounded-xl text-xs text-blue-900 flex items-start justify-between gap-3">
            <div>
              <p className="font-semibold">Petunjuk Import:</p>
              <p className="text-blue-700 mt-0.5 text-[11px]">
                Gunakan template resmi agar nama kolom sesuai dengan sistem. Kolom wajib adalah Nama Barang dan Nama Peminjam.
              </p>
            </div>
            <button
              type="button"
              onClick={handleDownloadTemplate}
              className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-blue-600 text-white font-bold text-[11px] hover:bg-blue-700 shrink-0 cursor-pointer"
            >
              <Download className="w-3 h-3" />
              <span>Unduh Template</span>
            </button>
          </div>

          <div className="border-2 border-dashed border-slate-300 hover:border-blue-500 rounded-2xl p-6 text-center transition-colors bg-slate-50/50">
            <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-sm font-semibold text-slate-700">
              {importFile ? importFile.name : "Pilih File Excel (.xlsx / .xls)"}
            </p>
            <p className="text-xs text-slate-500 mt-1">
              {importFile
                ? `${(importFile.size / 1024).toFixed(1)} KB • ${parsedRows.length} baris terbaca`
                : "Mendukung format Microsoft Excel .xlsx dan .xls"}
            </p>
            <button
              type="button"
              onClick={() => fileInputRef.current?.click()}
              className="mt-3 px-4 py-2 text-xs font-semibold text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-xl transition-colors cursor-pointer"
            >
              {importFile ? "Ganti File Excel" : "Pilih File dari Komputer"}
            </button>
          </div>

          <div className="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsImportModalOpen(false)}
              disabled={isImporting}
              className="px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="button"
              onClick={handleExecuteImport}
              disabled={isImporting || parsedRows.length === 0}
              className="inline-flex items-center gap-2 px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-xs transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isImporting ? (
                <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
              ) : (
                <Upload className="w-3.5 h-3.5" />
              )}
              <span>Proses Import ({parsedRows.length} Baris)</span>
            </button>
          </div>
        </div>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: CETAK REKAP LAPORAN (PDF PREVIEW & DOKUMEN DINAS) */}
      {/* ==================================================== */}
      <Modal
        isOpen={isPrintModalOpen}
        onClose={() => setIsPrintModalOpen(false)}
        title="Laporan Rekapitulasi Peminjaman Barang Sarana"
        description={`Pratinjau cetak resmi rekapitulasi peminjaman SMA BPI 1 Bandung • ${printPeriodSubtitle}`}
        maxWidth="max-w-5xl"
        hideOnPrint={false}
        footer={
          <div className="flex items-center justify-between w-full">
            <div className="text-xs text-slate-500">
              * Dokumen dinas dicetak dengan format resmi Yayasan BPI - SMA BPI 1 Bandung
            </div>
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => setIsPrintModalOpen(false)}
                className="px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer"
              >
                Tutup
              </button>
              <button
                type="button"
                onClick={() => {
                  if (typeof document !== "undefined") {
                    document.body.style.overflow = "visible";
                  }
                  window.print();
                }}
                className="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-xs transition-all cursor-pointer"
              >
                <Printer className="w-3.5 h-3.5" />
                <span>Cetak Sekarang (Print / PDF)</span>
              </button>
            </div>
          </div>
        }
      >
        <div id="print-borrowing-document" className="printable-document printable-area bg-white p-2 sm:p-4 text-slate-900 font-sans print-landscape">
          {/* Kop Surat Resmi SMA BPI 1 Bandung */}
          <div className="w-full mb-3">
            {/* 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>

          {/* Header Cetak PDF */}
          <div className="text-center space-y-1 mb-5 pt-1">
            <h2 className="text-sm sm:text-base font-bold uppercase tracking-wider text-slate-900">
              LAPORAN REKAPITULASI PEMINJAMAN BARANG SARANA
            </h2>
            <p className="text-xs font-semibold text-slate-700">
              {printPeriodSubtitle}
            </p>
            <p className="text-[11px] text-slate-500">
              Dicetak pada: {new Date().toLocaleDateString("id-ID", { dateStyle: "full" })}
            </p>
          </div>

          {/* Ringkasan Status Rekapitulasi */}
          <div className="mb-4 grid grid-cols-4 gap-2 text-[11px] bg-slate-50 p-2.5 rounded-lg border border-slate-200">
            <div>
              <span className="text-slate-500 block">Total Peminjaman:</span>
              <span className="font-bold text-slate-800">{rekapStats.total} Transaksi</span>
            </div>
            <div>
              <span className="text-slate-500 block">Sedang Dipinjam:</span>
              <span className="font-bold text-amber-700">{rekapStats.dipinjam} Item</span>
            </div>
            <div>
              <span className="text-slate-500 block">Sudah Kembali:</span>
              <span className="font-bold text-emerald-700">{rekapStats.kembali} Item</span>
            </div>
            <div>
              <span className="text-slate-500 block">Terlambat:</span>
              <span className="font-bold text-rose-700">{rekapStats.terlambat} Item</span>
            </div>
          </div>

          {/* Tabel Rekap Peminjaman */}
          <div className="overflow-x-auto">
            <table className="w-full text-left text-[10px] border-collapse border border-slate-300">
              <thead>
                <tr className="bg-slate-100 text-slate-900 font-bold uppercase text-[9px] tracking-wider border-b border-slate-300">
                  <th className="py-2 px-1 text-center w-8 border border-slate-300">NO</th>
                  <th className="py-2 px-2 border border-slate-300 w-24">KODE</th>
                  <th className="py-2 px-2.5 border border-slate-300 min-w-[140px]">NAMA BARANG</th>
                  <th className="py-2 px-1 text-center border border-slate-300 w-10">JML</th>
                  <th className="py-2 px-2.5 border border-slate-300 min-w-[120px]">PEMINJAM</th>
                  <th className="py-2 px-2 text-center border border-slate-300 w-20">TGL PINJAM</th>
                  <th className="py-2 px-2 text-center border border-slate-300 w-20">RENCANA KEMBALI</th>
                  <th className="py-2 px-2 text-center border border-slate-300 w-24">PENGEMBALIAN</th>
                  <th className="py-2 px-2 text-center border border-slate-300 w-24">STATUS</th>
                  <th className="py-2 px-2 border border-slate-300 w-24">PETUGAS</th>
                </tr>
              </thead>
              <tbody>
                {tab2FilteredBorrowings.length === 0 ? (
                  <tr>
                    <td colSpan={10} className="py-6 text-center text-slate-500 italic">
                      Tidak ada data peminjaman yang sesuai kriteria filter.
                    </td>
                  </tr>
                ) : (
                  tab2FilteredBorrowings.map((item, index) => (
                    <tr key={item.id} className="border-b border-slate-200">
                      <td className="py-1.5 px-1 text-center border border-slate-300">{index + 1}</td>
                      <td className="py-1.5 px-2 font-mono font-bold border border-slate-300">{item.borrow_code}</td>
                      <td className="py-1.5 px-2.5 font-semibold border border-slate-300">
                        <div>{item.item_name}</div>
                        {item.notes && <div className="text-[9px] text-slate-500 italic">{item.notes}</div>}
                      </td>
                      <td className="py-1.5 px-1 text-center font-bold border border-slate-300">{item.quantity}</td>
                      <td className="py-1.5 px-2.5 border border-slate-300">{item.borrower_name}</td>
                      <td className="py-1.5 px-2 text-center font-mono border border-slate-300">{item.borrow_date}</td>
                      <td className="py-1.5 px-2 text-center font-mono border border-slate-300">{item.expected_return_date}</td>
                      <td className="py-1.5 px-2 text-center font-mono border border-slate-300">{item.actual_return_date || "-"}</td>
                      <td className="py-1.5 px-2 text-center font-bold border border-slate-300">
                        {item.status}
                      </td>
                      <td className="py-1.5 px-2 border border-slate-300">{item.officer_name || "-"}</td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>

          {/* Form Tanda Tangan 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">
            <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>

            <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>
      </Modal>

    </div>
  );
};

export default BorrowingManagementView;