"use client";

import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
import Link from "next/link";
import {
  Package,
  Building2,
  Search,
  Plus,
  Pencil,
  Trash2,
  Download,
  Upload,
  Printer,
  X,
  RefreshCw,
  CheckCircle2,
  AlertTriangle,
  FileSpreadsheet,
  Coins,
  Layers,
  Check,
  Image as ImageIcon,
  Calendar,
  ExternalLink,
  ChevronDown,
  Info,
  DollarSign,
  Maximize2,
} 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";

export interface InventoryItem {
  id: number;
  item_code: string;
  item_name: string;
  brand?: string | null;
  category: string;
  location: string;
  purchase_date?: string | null;
  quantity: number;
  unit: string;
  price?: number | null;
  funding_source?: string | null;
  photo_url?: string | null;
  condition: string;
  status: string;
  notes?: string | null;
  created_at?: string;
  updated_at?: string;
}

export const InventoryManagementView: React.FC = () => {
  // Data State
  const [items, setItems] = useState<InventoryItem[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // Search & Filters
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string>("Semua");
  const [selectedFunding, setSelectedFunding] = useState<string>("Semua");
  const [selectedCondition, setSelectedCondition] = useState<string>("Semua");

  // Filter Periode (Bulan & Tahun)
  const [selectedMonth, setSelectedMonth] = useState<string>("Semua");
  const [selectedYear, setSelectedYear] = useState<string>("Semua");

  // Paginasi Tabel (Maksimal 10 Baris per Halaman)
  const [currentPage, setCurrentPage] = useState<number>(1);
  const ITEMS_PER_PAGE = 10;

  // Modals
  const [isAddModalOpen, setIsAddModalOpen] = useState<boolean>(false);
  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
  const [isImportModalOpen, setIsImportModalOpen] = useState<boolean>(false);
  const [isPrintModalOpen, setIsPrintModalOpen] = useState<boolean>(false);
  const [previewPhoto, setPreviewPhoto] = useState<{ url: string; title: string } | null>(null);

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

  // Selected item
  const [selectedItem, setSelectedItem] = useState<InventoryItem | null>(null);

  // Form State
  const [formData, setFormData] = useState<{
    item_code: string;
    item_name: string;
    brand: string;
    category: string;
    location: string;
    purchase_date: string;
    quantity: number;
    unit: string;
    price: number;
    funding_source: string;
    photo_url: string;
    condition: string;
    status: string;
    notes: string;
  }>({
    item_code: "",
    item_name: "",
    brand: "",
    category: "Elektronik",
    location: "Lab Komputer 1",
    purchase_date: new Date().toISOString().split("T")[0],
    quantity: 1,
    unit: "Unit",
    price: 0,
    funding_source: "BOS",
    photo_url: "",
    condition: "Baik",
    status: "Siap Digunakan",
    notes: "",
  });
  const [formError, setFormError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  // Import State
  const [importFile, setImportFile] = useState<File | null>(null);
  const [parsedRows, setParsedRows] = useState<any[]>([]);
  const [isImporting, setIsImporting] = useState<boolean>(false);
  const [importError, setImportError] = useState<string | null>(null);
  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);
  };

  // Helper: Format Rupiah
  const formatRupiah = (val: number | null | undefined): string => {
    if (!val || isNaN(val)) return "Rp 0";
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR",
      maximumFractionDigits: 0,
    }).format(val);
  };

  // Broadcast Real-time event
  const dispatchRealtimeMutation = () => {
    if (typeof window !== "undefined") {
      window.dispatchEvent(new CustomEvent("sarpras-room-updated"));
      try {
        const bc = new BroadcastChannel("smartschool-events");
        bc.postMessage({ type: "SARPRAS_INVENTORY_MUTATION" });
        bc.close();
      } catch {}
    }
  };

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

  // Helper Sub-Judul Periode
  const getPeriodSubtitle = (month: string, year: string) => {
    const foundMonth = MONTHS_LIST.find((m) => m.value === month);
    const mLabel = foundMonth ? foundMonth.label : month;
    if (month !== "Semua" && year !== "Semua") {
      return `Periode: ${mLabel} ${year}`;
    }
    if (year !== "Semua") {
      return `Periode: Tahun ${year}`;
    }
    if (month !== "Semua") {
      return `Periode: Bulan ${mLabel}`;
    }
    return "Periode: Semua Waktu / Keseluruhan";
  };

  // Fetch Inventory List with optional month and year query params
  const fetchInventory = useCallback(async () => {
    try {
      setIsLoading(true);
      setError(null);
      const params = new URLSearchParams();
      if (selectedMonth !== "Semua") params.append("month", selectedMonth);
      if (selectedYear !== "Semua") params.append("year", selectedYear);
      const q = params.toString() ? `?${params.toString()}` : "";
      const res = await fetch(`/api/sarpras/inventory${q}`, { cache: "no-store" });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal memuat data inventaris");
      }
      setItems(json.data || []);
    } catch (err: any) {
      console.error("fetchInventory error:", err);
      setError(err.message || "Terjadi kesalahan saat memuat data");
    } finally {
      setIsLoading(false);
    }
  }, [selectedMonth, selectedYear]);

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

  // Unique categories & funding sources for dropdowns
  const availableCategories = useMemo(() => {
    const defaultCats = [
      "Elektronik",
      "Meubel",
      "Media Belajar",
      "Alat Olahraga",
      "Alat Laboratorium",
      "Audio & Multimedia",
      "Pendingin Ruangan",
      "Fasilitas Terbuka",
      "Umum",
    ];
    const fromData = Array.from(new Set(items.map((i) => i.category).filter(Boolean)));
    return Array.from(new Set([...defaultCats, ...fromData]));
  }, [items]);

  const availableFundingSources = useMemo(() => {
    const defaultSources = ["BOS", "Yayasan", "Komite", "Bantuan", "Hibah"];
    const fromData = Array.from(
      new Set(items.map((i) => i.funding_source).filter(Boolean) as string[])
    );
    return Array.from(new Set([...defaultSources, ...fromData]));
  }, [items]);

  // Dynamic Year Range
  const availableYears = useMemo(() => {
    const currentYear = new Date().getFullYear();
    const defaultYears = ["2024", "2025", "2026", "2027", "2028"];
    const fromData = items
      .map((item) => {
        if (!item.purchase_date) return null;
        const d = String(item.purchase_date).trim();
        const num = Number(d);
        if (!isNaN(num) && num > 20000 && num < 70000) {
          const jsDate = new Date(Math.round((num - 25569) * 86400 * 1000));
          return String(jsDate.getFullYear());
        }
        if (d.includes("-")) {
          const p = d.split("-");
          return p[0].length === 4 ? p[0] : (p[2]?.length === 4 ? p[2] : null);
        }
        if (d.includes("/")) {
          const p = d.split("/");
          return p[0].length === 4 ? p[0] : (p[2]?.length === 4 ? p[2] : null);
        }
        return null;
      })
      .filter(Boolean) as string[];
    const allYears = Array.from(new Set([...defaultYears, ...fromData, String(currentYear)])).sort(
      (a, b) => Number(b) - Number(a)
    );
    return ["Semua", ...allYears];
  }, [items]);

  // Filtered Items (Periode, Pencarian, Kategori, Sumber Dana, Kondisi)
  const filteredItems = useMemo(() => {
    return items.filter((item) => {
      const matchSearch =
        searchTerm === "" ||
        item.item_code.toLowerCase().includes(searchTerm.toLowerCase()) ||
        item.item_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (item.brand && item.brand.toLowerCase().includes(searchTerm.toLowerCase())) ||
        item.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (item.notes && item.notes.toLowerCase().includes(searchTerm.toLowerCase()));

      const matchCategory =
        selectedCategory === "Semua" ||
        item.category.toLowerCase() === selectedCategory.toLowerCase();

      const matchFunding =
        selectedFunding === "Semua" ||
        (item.funding_source &&
          item.funding_source.toLowerCase() === selectedFunding.toLowerCase());

      const matchCondition =
        selectedCondition === "Semua" ||
        item.condition.toLowerCase() === selectedCondition.toLowerCase();

      let matchPeriod = true;
      if (item.purchase_date) {
        let pYear = "";
        let pMonth = "";
        const rawDate = String(item.purchase_date).trim();
        const num = Number(rawDate);
        if (!isNaN(num) && num > 20000 && num < 70000) {
          const d = new Date(Math.round((num - 25569) * 86400 * 1000));
          pYear = String(d.getFullYear());
          pMonth = String(d.getMonth() + 1).padStart(2, "0");
        } else if (rawDate.includes("-")) {
          const parts = rawDate.split("-");
          if (parts[0].length === 4) {
            pYear = parts[0];
            pMonth = parts[1]?.padStart(2, "0");
          } else if (parts[2]?.length === 4) {
            pYear = parts[2];
            pMonth = parts[1]?.padStart(2, "0");
          }
        } else if (rawDate.includes("/")) {
          const parts = rawDate.split("/");
          if (parts[0].length === 4) {
            pYear = parts[0];
            pMonth = parts[1]?.padStart(2, "0");
          } else if (parts[2]?.length === 4) {
            pYear = parts[2];
            pMonth = parts[1]?.padStart(2, "0");
          }
        }

        if (selectedYear !== "Semua" && pYear && pYear !== selectedYear) {
          matchPeriod = false;
        }
        if (selectedMonth !== "Semua" && pMonth && pMonth !== selectedMonth) {
          matchPeriod = false;
        }
      } else {
        if (selectedYear !== "Semua" || selectedMonth !== "Semua") {
          matchPeriod = false;
        }
      }

      return matchSearch && matchCategory && matchFunding && matchCondition && matchPeriod;
    });
  }, [items, searchTerm, selectedCategory, selectedFunding, selectedCondition, selectedMonth, selectedYear]);

  // Reset pagination ke halaman 1 saat filter atau pencarian berubah
  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm, selectedCategory, selectedFunding, selectedCondition, selectedMonth, selectedYear]);

  // Statistics (Wajib terhitung secara menyeluruh dari seluruh filteredItems)
  const stats = useMemo(() => {
    const totalItems = filteredItems.length;
    const totalUnits = filteredItems.reduce((acc, curr) => acc + (Number(curr.quantity) || 0), 0);
    const totalEstimatedValue = filteredItems.reduce(
      (acc, curr) => acc + (Number(curr.quantity) || 0) * (Number(curr.price) || 0),
      0
    );
    const goodConditionCount = filteredItems.filter(
      (i) => i.condition.toLowerCase() === "baik"
    ).length;
    const kelayakanPercentage =
      totalItems > 0 ? ((goodConditionCount / totalItems) * 100).toFixed(1) : "100";

    return {
      totalItems,
      totalUnits,
      totalEstimatedValue,
      goodConditionCount,
      kelayakanPercentage,
    };
  }, [filteredItems]);

  // Paginasi Data (Maksimal 10 Baris per Halaman)
  const totalPages = Math.max(1, Math.ceil(filteredItems.length / ITEMS_PER_PAGE));
  const paginatedItems = useMemo(() => {
    const start = (currentPage - 1) * ITEMS_PER_PAGE;
    return filteredItems.slice(start, start + ITEMS_PER_PAGE);
  }, [filteredItems, currentPage]);

  // Export Filtered Items ke Excel (.xlsx)
  const handleExportExcel = () => {
    if (filteredItems.length === 0) {
      showToast("Tidak ada data inventaris untuk diekspor", "error");
      return;
    }
    const exportData = filteredItems.map((item, idx) => ({
      No: idx + 1,
      "Kode Barang": item.item_code,
      "Nama Barang": item.item_name,
      Merk: item.brand || "-",
      Kategori: item.category,
      "Lokasi / Ruang": item.location,
      "Tanggal Beli": item.purchase_date || "-",
      Jumlah: item.quantity,
      Satuan: item.unit,
      "Harga Satuan": item.price || 0,
      "Total Nilai": (item.quantity || 0) * (item.price || 0),
      "Sumber Dana": item.funding_source || "-",
      Kondisi: item.condition,
      Status: item.status,
      Catatan: item.notes || "-",
    }));

    const ws = XLSX.utils.json_to_sheet(exportData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Rekap Inventaris");
    const filename = `Rekap_Inventaris_BPI_${selectedYear}_${selectedMonth}_${new Date().toISOString().split("T")[0]}.xlsx`;
    XLSX.writeFile(wb, filename);
    showToast(`Berhasil mengekspor ${filteredItems.length} data inventaris`);
  };

  // Open Add Modal
  const handleOpenAddModal = () => {
    const nextNum = items.length + 1;
    const currentYear = new Date().getFullYear();
    const autoCode = `INV/BPI/${currentYear}/${String(nextNum).padStart(3, "0")}`;

    setFormData({
      item_code: autoCode,
      item_name: "",
      brand: "",
      category: "Elektronik",
      location: "Lab Komputer 1",
      purchase_date: new Date().toISOString().split("T")[0],
      quantity: 1,
      unit: "Unit",
      price: 0,
      funding_source: "BOS",
      photo_url: "",
      condition: "Baik",
      status: "Siap Digunakan",
      notes: "",
    });
    setFormError(null);
    setIsAddModalOpen(true);
  };

  // Open Edit Modal
  const handleOpenEditModal = (item: InventoryItem) => {
    setSelectedItem(item);
    setFormData({
      item_code: item.item_code,
      item_name: item.item_name,
      brand: item.brand || "",
      category: item.category,
      location: item.location,
      purchase_date: item.purchase_date || new Date().toISOString().split("T")[0],
      quantity: item.quantity,
      unit: item.unit,
      price: item.price || 0,
      funding_source: item.funding_source || "BOS",
      photo_url: item.photo_url || "",
      condition: item.condition,
      status: item.status,
      notes: item.notes || "",
    });
    setFormError(null);
    setIsEditModalOpen(true);
  };

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

  // Submit Add
  const handleSubmitAdd = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch("/api/sarpras/inventory", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal menambahkan inventaris");
      }

      showToast(json.message || "Inventaris berhasil ditambahkan");
      setIsAddModalOpen(false);
      fetchInventory();
      dispatchRealtimeMutation();
    } catch (err: any) {
      setFormError(err.message || "Gagal menambahkan inventaris");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Submit Edit
  const handleSubmitEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedItem) return;

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch("/api/sarpras/inventory", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: selectedItem.id,
          ...formData,
        }),
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal memperbarui inventaris");
      }

      showToast(json.message || "Inventaris berhasil diperbarui");
      setIsEditModalOpen(false);
      setSelectedItem(null);
      fetchInventory();
      dispatchRealtimeMutation();
    } catch (err: any) {
      setFormError(err.message || "Gagal memperbarui inventaris");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Submit Delete
  const handleSubmitDelete = async () => {
    if (!selectedItem) return;

    try {
      setIsSubmitting(true);
      const res = await fetch(`/api/sarpras/inventory?id=${selectedItem.id}`, {
        method: "DELETE",
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal menghapus inventaris");
      }

      showToast(json.message || "Inventaris berhasil dihapus");
      setIsDeleteModalOpen(false);
      setSelectedItem(null);
      fetchInventory();
      dispatchRealtimeMutation();
    } catch (err: any) {
      showToast(err.message || "Gagal menghapus inventaris", "error");
    } finally {
      setIsSubmitting(false);
    }
  };

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

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

    const reader = new FileReader();
    reader.onloadend = () => {
      setFormData((prev) => ({
        ...prev,
        photo_url: reader.result as string,
      }));
    };
    reader.readAsDataURL(file);
  };

  // Handle Excel File Pick for Bulk 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 yang terbaca.");
          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/inventory/import", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items: parsedRows }),
      });
      const json = await res.json();

      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal mengimpor data inventaris");
      }

      showToast(json.message || "Import data inventaris berhasil diselesaikan");
      setIsImportModalOpen(false);
      setImportFile(null);
      setParsedRows([]);
      setSelectedYear("Semua");
      setSelectedMonth("Semua");
      fetchInventory();
      dispatchRealtimeMutation();
    } catch (err: any) {
      setImportError(err.message || "Terjadi kesalahan saat import data");
    } finally {
      setIsImporting(false);
    }
  };

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

  // Print Table
  const handlePrint = () => {
    setIsPrintModalOpen(true);
  };

  // Helper Badge Colors for Funding Source
  const renderFundingBadge = (funding?: string | null) => {
    const val = (funding || "BOS").toUpperCase();
    if (val.includes("BOS")) {
      return (
        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200">
          {funding}
        </span>
      );
    }
    if (val.includes("YAYASAN")) {
      return (
        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-200">
          {funding}
        </span>
      );
    }
    if (val.includes("KOMITE")) {
      return (
        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
          {funding}
        </span>
      );
    }
    return (
      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200">
        {funding || "Lainnya"}
      </span>
    );
  };

  // Helper Badge Colors for Condition
  const renderConditionBadge = (condition: string) => {
    const lower = condition.toLowerCase();
    if (lower === "baik") {
      return (
        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
          Baik
        </span>
      );
    }
    if (lower.includes("perlu perbaikan") || lower.includes("rusak ringan")) {
      return (
        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200">
          <span className="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
          Perlu Perbaikan
        </span>
      );
    }
    return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold bg-rose-50 text-rose-700 border border-rose-200">
        <span className="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
        Rusak Berat
      </span>
    );
  };

  return (
    <div className="space-y-6">
      {/* Toast Feedback */}
      {toast && (
        <div
          className={`fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 rounded-xl shadow-lg border text-sm font-medium transition-all transform animate-in slide-in-from-bottom-5 ${
            toast.type === "success"
              ? "bg-emerald-900/90 text-white border-emerald-700"
              : "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 Banner */}
      <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm print:hidden">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-blue-600 mb-1">
              <Package className="w-4 h-4" />
              <span>Sarana & Prasarana • SMA BPI 1 Bandung</span>
            </div>
            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
              Daftar Inventaris & Aset Sarana
            </h1>
            <p className="text-sm text-slate-500 mt-1">
              Pencatatan aset fisik, peralatan belajar, merk, tanggal pembelian, dan sumber pendanaan SMA BPI 1 Bandung.
            </p>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={handleOpenAddModal}
              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-sm hover:shadow transition-all cursor-pointer"
            >
              <Plus className="w-4 h-4" />
              <span>+ Tambah Inventaris</span>
            </button>
          </div>
        </div>
      </div>

      {/* Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 print:hidden">
        <StatCard
          title="Total Barang Terdaftar"
          value={isLoading ? "..." : `${stats.totalItems} Barang`}
          icon={Package}
          description="Item aset sarpras"
          variant="primary"
        />
        <StatCard
          title="Total Unit Fisik"
          value={isLoading ? "..." : `${stats.totalUnits} Unit`}
          icon={Layers}
          description="Akumulasi kuantitas fisik"
          variant="blue"
        />
        <StatCard
          title="Estimasi Nilai Aset"
          value={isLoading ? "..." : formatRupiah(stats.totalEstimatedValue)}
          icon={Coins}
          description="Total valuasi inventaris"
          variant="purple"
        />
        <StatCard
          title="Kelayakan Fasilitas"
          value={isLoading ? "..." : `${stats.kelayakanPercentage}%`}
          icon={CheckCircle2}
          description={`${stats.goodConditionCount} dari ${stats.totalItems} berstatus baik`}
          variant="success"
        />
      </div>

      {/* Main Content: Actions Bar, Search, and Table */}
      <div className="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden print:hidden">
        {/* Actions Bar (Bagian Atas Tabel) */}
        <div className="p-4 sm:p-5 border-b border-slate-100 space-y-3 bg-slate-50/50 print:hidden">
          <div className="flex flex-wrap items-center justify-between gap-3">
            {/* Action Buttons: Add, Download Template, Import, Print */}
            <div className="flex flex-wrap items-center gap-2.5">
              <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-sm transition-all cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                <span>+ Tambah Inventaris</span>
              </button>

              <button
                onClick={handleDownloadTemplate}
                className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200/80 rounded-xl transition-colors cursor-pointer"
                title="Download Template Format Excel (.xlsx)"
              >
                <Download className="w-3.5 h-3.5 text-emerald-600" />
                <span>Download Template (.xlsx)</span>
              </button>

              <button
                onClick={() => {
                  setImportFile(null);
                  setParsedRows([]);
                  setImportError(null);
                  setIsImportModalOpen(true);
                }}
                className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-indigo-700 bg-indigo-50 hover:bg-indigo-100 border border-indigo-200/80 rounded-xl transition-colors cursor-pointer"
                title="Import Data Masal dari File Excel"
              >
                <Upload className="w-3.5 h-3.5 text-indigo-600" />
                <span>Import (.xlsx)</span>
              </button>

              <button
                onClick={handlePrint}
                className="inline-flex items-center gap-1.5 px-3.5 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="Cetak Rekap Inventaris / Simpan PDF"
              >
                <Printer className="w-3.5 h-3.5 text-slate-600" />
                <span>Cetak Rekap</span>
              </button>

              <button
                onClick={handleExportExcel}
                className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-teal-700 bg-teal-50 hover:bg-teal-100 border border-teal-200/80 rounded-xl transition-colors cursor-pointer"
                title="Export Data Inventaris Terfilter ke File Excel (.xlsx)"
              >
                <FileSpreadsheet className="w-3.5 h-3.5 text-teal-600" />
                <span>Export (.xlsx)</span>
              </button>
            </div>

            <div className="text-xs text-slate-500">
              Menampilkan{" "}
              <span className="font-semibold text-slate-900">
                {filteredItems.length === 0
                  ? 0
                  : `${(currentPage - 1) * ITEMS_PER_PAGE + 1}-${Math.min(
                      currentPage * ITEMS_PER_PAGE,
                      filteredItems.length
                    )}`}
              </span>{" "}
              dari <span className="font-semibold text-slate-900">{filteredItems.length}</span> data
            </div>
          </div>

          {/* Search & Filter Controls (Termasuk Filter Periode Bulan & Tahun) */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2.5 pt-2 border-t border-slate-200/60">
            {/* Search Input */}
            <div className="relative">
              <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                placeholder="Cari kode, nama, merk..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-9 pr-8 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all placeholder:text-slate-400"
              />
              {searchTerm && (
                <button
                  onClick={() => setSearchTerm("")}
                  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>

            {/* Filter Kondisi */}
            <div>
              <select
                value={selectedCondition}
                onChange={(e) => setSelectedCondition(e.target.value)}
                className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
              >
                <option value="Semua">Semua Kondisi</option>
                <option value="Baik">Kondisi: Baik</option>
                <option value="Perlu Perbaikan">Kondisi: Perlu Perbaikan</option>
                <option value="Rusak">Kondisi: Rusak</option>
              </select>
            </div>

            {/* Filter Bulan */}
            <div>
              <select
                value={selectedMonth}
                onChange={(e) => setSelectedMonth(e.target.value)}
                className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
              >
                {MONTHS_LIST.map((m) => (
                  <option key={m.value} value={m.value}>
                    {m.value === "Semua" ? "Semua Bulan" : `Bulan: ${m.label}`}
                  </option>
                ))}
              </select>
            </div>

            {/* Filter Tahun */}
            <div>
              <select
                value={selectedYear}
                onChange={(e) => setSelectedYear(e.target.value)}
                className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
              >
                {availableYears.map((yr) => (
                  <option key={yr} value={yr}>
                    {yr === "Semua" ? "Semua Tahun" : `Tahun: ${yr}`}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

        {/* Table Content */}
        {isLoading ? (
          <div className="py-20 flex flex-col items-center justify-center text-slate-400">
            <RefreshCw className="w-8 h-8 animate-spin text-blue-600 mb-3" />
            <p className="text-sm font-medium">Memuat data inventaris...</p>
          </div>
        ) : error ? (
          <div className="py-16 text-center">
            <AlertTriangle className="w-10 h-10 text-rose-500 mx-auto mb-3" />
            <p className="text-sm font-semibold text-slate-800">{error}</p>
            <button
              onClick={() => fetchInventory()}
              className="mt-3 px-4 py-2 bg-blue-600 text-white text-xs font-semibold rounded-lg hover:bg-blue-700"
            >
              Coba Lagi
            </button>
          </div>
        ) : filteredItems.length === 0 ? (
          <div className="py-16 text-center">
            <Package className="w-12 h-12 text-slate-300 mx-auto mb-3" />
            <p className="text-base font-semibold text-slate-700">Data inventaris tidak ditemukan</p>
            <p className="text-xs text-slate-500 mt-1 max-w-sm mx-auto">
              {searchTerm || selectedCondition !== "Semua" || selectedMonth !== "Semua" || selectedYear !== "Semua"
                ? "Coba sesuaikan kata kunci pencarian atau filter yang dipilih."
                : "Belum ada inventaris yang terdaftar. Klik Tambah Inventaris atau Import Excel untuk memulai."}
            </p>
            {searchTerm || selectedCondition !== "Semua" || selectedMonth !== "Semua" || selectedYear !== "Semua" ? (
              <button
                onClick={() => {
                  setSearchTerm("");
                  setSelectedCondition("Semua");
                  setSelectedMonth("Semua");
                  setSelectedYear("Semua");
                }}
                className="mt-4 px-4 py-2 text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors cursor-pointer"
              >
                Reset Filter
              </button>
            ) : (
              <button
                onClick={handleOpenAddModal}
                className="mt-4 inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                Tambah Inventaris Baru
              </button>
            )}
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-200 text-slate-600 text-xs font-bold uppercase tracking-wider">
                  <th className="py-3 px-3.5 w-12 text-center">No</th>
                  <th className="py-3 px-3.5 w-36">Kode Barang</th>
                  <th className="py-3 px-3.5 w-20 text-center">Foto</th>
                  <th className="py-3 px-3.5 min-w-[200px]">Nama Barang</th>
                  <th className="py-3 px-3.5 w-32">Merk</th>
                  <th className="py-3 px-3.5 w-36">Kategori</th>
                  <th className="py-3 px-3.5 w-28">Tanggal Beli</th>
                  <th className="py-3 px-3.5 w-24 text-center">Jumlah</th>
                  <th className="py-3 px-3.5 w-36 text-right">Harga Satuan</th>
                  <th className="py-3 px-3.5 w-28 text-center">Sumber Dana</th>
                  <th className="py-3 px-3.5 w-28 text-center print:hidden">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-sm">
                {paginatedItems.map((item, idx) => {
                  const rowNum = (currentPage - 1) * ITEMS_PER_PAGE + idx + 1;
                  return (
                    <tr
                      key={item.id}
                      className="hover:bg-slate-50/80 transition-colors group"
                    >
                      {/* 1. No */}
                      <td className="py-3.5 px-3.5 text-center font-medium text-slate-400 text-xs">
                        {rowNum}
                      </td>

                    {/* 2. Kode Barang */}
                    <td className="py-3.5 px-3.5">
                      <span className="font-mono text-xs font-bold text-slate-800 bg-slate-100 px-2 py-0.5 rounded border border-slate-200/70 inline-block">
                        {item.item_code}
                      </span>
                    </td>

                    {/* 3. Foto Barang */}
                    <td className="py-3.5 px-3.5 text-center">
                      {item.photo_url ? (
                        <div
                          onClick={() =>
                            setPreviewPhoto({
                              url: item.photo_url!,
                              title: `${item.item_code} - ${item.item_name}`,
                            })
                          }
                          className="relative w-10 h-10 mx-auto rounded-lg overflow-hidden border border-slate-200 cursor-pointer hover:ring-2 hover:ring-blue-500 transition-all group/photo"
                          title="Klik untuk memperbesar foto"
                        >
                          <img
                            src={item.photo_url}
                            alt={item.item_name}
                            className="w-full h-full object-cover"
                          />
                          <div className="absolute inset-0 bg-black/30 opacity-0 group-hover/photo:opacity-100 flex items-center justify-center transition-opacity">
                            <Maximize2 className="w-3.5 h-3.5 text-white" />
                          </div>
                        </div>
                      ) : (
                        <div className="w-10 h-10 mx-auto rounded-lg bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-400">
                          <ImageIcon className="w-4 h-4" />
                        </div>
                      )}
                    </td>

                    {/* 4. Nama Barang */}
                    <td className="py-3.5 px-3.5">
                      <div className="font-semibold text-slate-900 leading-snug">
                        {item.item_name}
                      </div>
                      <div className="text-xs text-slate-500 flex items-center gap-1.5 mt-0.5">
                        <Building2 className="w-3 h-3 text-slate-400" />
                        <span>{item.location}</span>
                        {item.notes && (
                          <>
                            <span>•</span>
                            <span className="line-clamp-1 italic text-slate-400" title={item.notes}>
                              {item.notes}
                            </span>
                          </>
                        )}
                      </div>
                    </td>

                    {/* 5. Merk Barang */}
                    <td className="py-3.5 px-3.5 font-medium text-slate-700 text-xs">
                      <span className="inline-block px-2 py-0.5 bg-slate-100 rounded text-slate-800 border border-slate-200/60 font-medium">
                        {item.brand || "-"}
                      </span>
                    </td>

                    {/* 6. Kategori */}
                    <td className="py-3.5 px-3.5 text-xs text-slate-600">
                      <span className="font-medium text-slate-800">{item.category}</span>
                    </td>

                    {/* 7. Tanggal Beli */}
                    <td className="py-3.5 px-3.5 text-xs text-slate-600 font-mono">
                      {item.purchase_date || "-"}
                    </td>

                    {/* 8. Jumlah */}
                    <td className="py-3.5 px-3.5 text-center">
                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate-800 border border-slate-200">
                        {item.quantity} {item.unit}
                      </span>
                    </td>

                    {/* 9. Harga */}
                    <td className="py-3.5 px-3.5 text-right">
                      <div className="font-semibold text-slate-900 text-xs">
                        {formatRupiah(item.price)}
                      </div>
                      {item.quantity > 1 && item.price && item.price > 0 && (
                        <div className="text-[10px] text-slate-400">
                          Total: {formatRupiah(item.quantity * item.price)}
                        </div>
                      )}
                    </td>

                    {/* 10. Sumber Dana */}
                    <td className="py-3.5 px-3.5 text-center">
                      {renderFundingBadge(item.funding_source)}
                    </td>

                    {/* 11. Aksi (Edit & Hapus) */}
                    <td className="py-3.5 px-3.5 text-center print:hidden">
                      <div className="flex items-center justify-center gap-1.5">
                        <button
                          onClick={() => handleOpenEditModal(item)}
                          className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold text-blue-700 bg-blue-50 hover:bg-blue-100 border border-blue-200/80 transition-colors cursor-pointer"
                          title="Edit Inventaris"
                        >
                          <Pencil className="w-3 h-3" />
                          <span>Edit</span>
                        </button>
                        <button
                          onClick={() => handleOpenDeleteModal(item)}
                          className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold text-rose-700 bg-rose-50 hover:bg-rose-100 border border-rose-200/80 transition-colors cursor-pointer"
                          title="Hapus Inventaris"
                        >
                          <Trash2 className="w-3 h-3" />
                          <span>Hapus</span>
                        </button>
                      </div>
                    </td>
                  </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {/* Pagination Controls (Maksimal 10 Baris per Halaman) */}
        {filteredItems.length > 0 && (
          <div className="p-4 border-t border-slate-100 bg-white flex flex-col sm:flex-row items-center justify-between gap-3 text-xs print:hidden">
            <div className="text-slate-600">
              Menampilkan{" "}
              <span className="font-semibold text-slate-900">
                {(currentPage - 1) * ITEMS_PER_PAGE + 1}-
                {Math.min(currentPage * ITEMS_PER_PAGE, filteredItems.length)}
              </span>{" "}
              dari <span className="font-semibold text-slate-900">{filteredItems.length}</span> data
            </div>

            <div className="flex items-center gap-1.5">
              <button
                onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
                disabled={currentPage <= 1}
                className="px-3 py-1.5 rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed font-medium transition-colors cursor-pointer"
              >
                Sebelumnya
              </button>

              <div className="flex items-center gap-1">
                {Array.from({ length: totalPages }, (_, i) => i + 1)
                  .filter((page) => {
                    if (totalPages <= 7) return true;
                    return (
                      page === 1 ||
                      page === totalPages ||
                      Math.abs(page - currentPage) <= 1
                    );
                  })
                  .map((page, pIdx, pArr) => {
                    const prevP = pArr[pIdx - 1];
                    const hasGap = prevP && page - prevP > 1;

                    return (
                      <React.Fragment key={page}>
                        {hasGap && <span className="px-1 text-slate-400">...</span>}
                        <button
                          onClick={() => setCurrentPage(page)}
                          className={`min-w-[32px] h-8 px-2 rounded-lg font-semibold text-xs transition-colors cursor-pointer ${
                            currentPage === page
                              ? "bg-blue-600 text-white shadow-sm"
                              : "border border-slate-200 text-slate-700 hover:bg-slate-50"
                          }`}
                        >
                          {page}
                        </button>
                      </React.Fragment>
                    );
                  })}
              </div>

              <button
                onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
                disabled={currentPage >= totalPages}
                className="px-3 py-1.5 rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed font-medium transition-colors cursor-pointer"
              >
                Selanjutnya
              </button>
            </div>
          </div>
        )}

        {/* Footer info & Print Signatures */}
        <div className="p-4 border-t border-slate-100 bg-slate-50/40 text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-2 print:hidden">
          <span>SMA BPI 1 Bandung • Sistem Inventarisasi Sarpras Terintegrasi</span>
          <span>Data terhubung secara real-time ke Dashboard Sarana & Prasarana</span>
        </div>

        {/* Printable Official Signatures */}
        <div className="hidden print:grid grid-cols-2 gap-8 p-8 border-t border-slate-300 text-xs text-center mt-6">
          <div>
            <p className="text-slate-600">Mengetahui,</p>
            <p className="font-bold text-slate-900 mt-0.5">
              {kepalaSekolah.title || "Kepala SMA BPI 1 Bandung"}
            </p>
            <div className="h-20 flex items-center justify-center">
              {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"
                />
              ) : null}
            </div>
            <p className="font-bold text-slate-900 underline">
              {kepalaSekolah.name && kepalaSekolah.name !== "-" ? kepalaSekolah.name : "Tatang, M.Pd."}
            </p>
            <p className="text-slate-600">
              {kepalaSekolah.nip && kepalaSekolah.nip !== "-"
                ? kepalaSekolah.nip.startsWith("NIP")
                  ? kepalaSekolah.nip
                  : `NIPY. ${kepalaSekolah.nip}`
                : "NIPY. 10079"}
            </p>
          </div>
          <div>
            <p className="text-slate-600">
              Bandung,{" "}
              {new Date().toLocaleDateString("id-ID", {
                day: "numeric",
                month: "long",
                year: "numeric",
              })}
            </p>
            <p className="font-bold text-slate-900 mt-0.5">
              {wakasekSarana.title || "Wakasek Sarana & Prasarana"}
            </p>
            <div className="h-20 flex items-center justify-center">
              {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"
                />
              ) : null}
            </div>
            <p className="font-bold text-slate-900 underline">
              {wakasekSarana.name &&
              wakasekSarana.name !== "-" &&
              wakasekSarana.name !== "Drs. Budi Santoso"
                ? wakasekSarana.name
                : "Muhammad Ridwanto, S.Pd"}
            </p>
            <p className="text-slate-600">
              {wakasekSarana.nip && wakasekSarana.nip !== "-"
                ? wakasekSarana.nip.startsWith("NIP")
                  ? wakasekSarana.nip
                  : `NIPY. ${wakasekSarana.nip}`
                : "NIPY. 10064"}
            </p>
          </div>
        </div>
      </div>

      {/* ==================================================== */}
      {/* MODAL: TAMBAH INVENTARIS */}
      {/* ==================================================== */}
      <Modal
        isOpen={isAddModalOpen}
        onClose={() => setIsAddModalOpen(false)}
        title="Tambah Inventaris Barang Baru"
        description="Masukkan identitas barang, merk, kategori, tanggal beli, kuantitas, harga, dan sumber dana."
        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 font-medium 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-3 gap-3.5">
            {/* Kode Barang */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kode Barang
              </label>
              <input
                type="text"
                placeholder="INV/BPI/2026/001"
                value={formData.item_code}
                onChange={(e) => setFormData({ ...formData, item_code: e.target.value.toUpperCase() })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-mono font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Nama Barang */}
            <div className="sm:col-span-2">
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Nama Barang
              </label>
              <input
                type="text"
                placeholder="Contoh: Laptop Asus ExpertBook Core i7"
                value={formData.item_name}
                onChange={(e) => setFormData({ ...formData, item_name: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs 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-3 gap-3.5">
            {/* Merk */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Merk / Brand
              </label>
              <input
                type="text"
                placeholder="Contoh: Asus / Epson / Informa"
                value={formData.brand}
                onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Kategori */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kategori
              </label>
              <select
                value={formData.category}
                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                {availableCategories.map((cat) => (
                  <option key={cat} value={cat}>
                    {cat}
                  </option>
                ))}
              </select>
            </div>

            {/* Lokasi / Ruang */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Lokasi / Penempatan
              </label>
              <input
                type="text"
                placeholder="Contoh: Lab Komputer 1"
                value={formData.location}
                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs 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-4 gap-3.5">
            {/* Tanggal Beli */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Tanggal Beli
              </label>
              <input
                type="date"
                value={formData.purchase_date}
                onChange={(e) => setFormData({ ...formData, purchase_date: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Jumlah */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Jumlah (Qty)
              </label>
              <input
                type="number"
                min={0}
                value={formData.quantity}
                onChange={(e) => setFormData({ ...formData, quantity: parseInt(e.target.value, 10) || 0 })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Satuan */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Satuan
              </label>
              <input
                type="text"
                placeholder="Unit / Set / Buah"
                value={formData.unit}
                onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Harga Satuan */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Harga Satuan (Rp)
              </label>
              <input
                type="text"
                inputMode="numeric"
                placeholder="0"
                value={formData.price === 0 ? "" : formData.price}
                onChange={(e) => {
                  const raw = e.target.value.replace(/[^0-9]/g, "");
                  setFormData({ ...formData, price: raw === "" ? 0 : Number(raw) });
                }}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
              {formData.price > 0 && (
                <span className="text-[10px] text-slate-500 font-mono mt-1 block">
                  {formatRupiah(formData.price)}
                </span>
              )}
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
            {/* Sumber Dana */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Sumber Dana
              </label>
              <select
                value={formData.funding_source}
                onChange={(e) => setFormData({ ...formData, funding_source: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                {availableFundingSources.map((src) => (
                  <option key={src} value={src}>
                    {src}
                  </option>
                ))}
              </select>
            </div>

            {/* Kondisi */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kondisi Fisik
              </label>
              <select
                value={formData.condition}
                onChange={(e) => setFormData({ ...formData, condition: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value="Baik">Baik (100% Normal)</option>
                <option value="Perlu Perbaikan">Perlu Perbaikan</option>
                <option value="Rusak">Rusak / Tidak Layak</option>
              </select>
            </div>

            {/* Status */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Status Pemakaian
              </label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value="Siap Digunakan">Siap Digunakan</option>
                <option value="Dalam Pemeliharaan">Dalam Pemeliharaan</option>
                <option value="Disimpan di Gudang">Disimpan di Gudang</option>
              </select>
            </div>
          </div>

          {/* Upload Foto Barang */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Foto Barang (Opsional)
            </label>
            <div className="flex items-center gap-3">
              <input
                type="file"
                accept="image/*"
                onChange={handlePhotoUpload}
                className="text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer"
              />
              {formData.photo_url && (
                <div className="flex items-center gap-2">
                  <img
                    src={formData.photo_url}
                    alt="Preview"
                    className="w-8 h-8 rounded object-cover border border-slate-200"
                  />
                  <button
                    type="button"
                    onClick={() => setFormData({ ...formData, photo_url: "" })}
                    className="text-xs text-rose-600 hover:underline"
                  >
                    Hapus Foto
                  </button>
                </div>
              )}
            </div>
          </div>

          {/* Keterangan */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Keterangan / Catatan Inventaris
            </label>
            <textarea
              rows={2}
              placeholder="Spesifikasi tambahan, nomor seri pabrik, atau catatan pemakaian..."
              value={formData.notes}
              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          {/* Modal Actions */}
          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsAddModalOpen(false)}
              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="px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-sm transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
            >
              {isSubmitting ? (
                <>
                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                  <span>Menyimpan...</span>
                </>
              ) : (
                <>
                  <Check className="w-3.5 h-3.5" />
                  <span>Simpan Inventaris</span>
                </>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: EDIT INVENTARIS */}
      {/* ==================================================== */}
      <Modal
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        title="Edit Data Inventaris"
        description={`Perbarui informasi aset ${selectedItem?.item_code} - ${selectedItem?.item_name}.`}
        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 font-medium 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-3 gap-3.5">
            {/* Kode Barang */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kode Barang
              </label>
              <input
                type="text"
                value={formData.item_code}
                onChange={(e) => setFormData({ ...formData, item_code: e.target.value.toUpperCase() })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-mono font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Nama Barang */}
            <div className="sm:col-span-2">
              <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 border border-slate-200 rounded-xl text-xs 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-3 gap-3.5">
            {/* Merk */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Merk / Brand
              </label>
              <input
                type="text"
                value={formData.brand}
                onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Kategori */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kategori
              </label>
              <select
                value={formData.category}
                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                {availableCategories.map((cat) => (
                  <option key={cat} value={cat}>
                    {cat}
                  </option>
                ))}
              </select>
            </div>

            {/* Lokasi / Ruang */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Lokasi / Penempatan
              </label>
              <input
                type="text"
                value={formData.location}
                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs 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-4 gap-3.5">
            {/* Tanggal Beli */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Tanggal Beli
              </label>
              <input
                type="date"
                value={formData.purchase_date}
                onChange={(e) => setFormData({ ...formData, purchase_date: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Jumlah */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Jumlah (Qty)
              </label>
              <input
                type="number"
                min={0}
                value={formData.quantity}
                onChange={(e) => setFormData({ ...formData, quantity: parseInt(e.target.value, 10) || 0 })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Satuan */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Satuan
              </label>
              <input
                type="text"
                value={formData.unit}
                onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Harga Satuan */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Harga Satuan (Rp)
              </label>
              <input
                type="text"
                inputMode="numeric"
                placeholder="0"
                value={formData.price === 0 ? "" : formData.price}
                onChange={(e) => {
                  const raw = e.target.value.replace(/[^0-9]/g, "");
                  setFormData({ ...formData, price: raw === "" ? 0 : Number(raw) });
                }}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
              {formData.price > 0 && (
                <span className="text-[10px] text-slate-500 font-mono mt-1 block">
                  {formatRupiah(formData.price)}
                </span>
              )}
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
            {/* Sumber Dana */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Sumber Dana
              </label>
              <select
                value={formData.funding_source}
                onChange={(e) => setFormData({ ...formData, funding_source: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                {availableFundingSources.map((src) => (
                  <option key={src} value={src}>
                    {src}
                  </option>
                ))}
              </select>
            </div>

            {/* Kondisi */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kondisi Fisik
              </label>
              <select
                value={formData.condition}
                onChange={(e) => setFormData({ ...formData, condition: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value="Baik">Baik (100% Normal)</option>
                <option value="Perlu Perbaikan">Perlu Perbaikan</option>
                <option value="Rusak">Rusak / Tidak Layak</option>
              </select>
            </div>

            {/* Status */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Status Pemakaian
              </label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value="Siap Digunakan">Siap Digunakan</option>
                <option value="Dalam Pemeliharaan">Dalam Pemeliharaan</option>
                <option value="Disimpan di Gudang">Disimpan di Gudang</option>
              </select>
            </div>
          </div>

          {/* Upload Foto Barang */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Foto Barang (Opsional)
            </label>
            <div className="flex items-center gap-3">
              <input
                type="file"
                accept="image/*"
                onChange={handlePhotoUpload}
                className="text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer"
              />
              {formData.photo_url && (
                <div className="flex items-center gap-2">
                  <img
                    src={formData.photo_url}
                    alt="Preview"
                    className="w-8 h-8 rounded object-cover border border-slate-200"
                  />
                  <button
                    type="button"
                    onClick={() => setFormData({ ...formData, photo_url: "" })}
                    className="text-xs text-rose-600 hover:underline"
                  >
                    Hapus Foto
                  </button>
                </div>
              )}
            </div>
          </div>

          {/* Keterangan */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Keterangan / Catatan Inventaris
            </label>
            <textarea
              rows={2}
              value={formData.notes}
              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          {/* Modal Actions */}
          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              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="px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-sm transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
            >
              {isSubmitting ? (
                <>
                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                  <span>Memperbarui...</span>
                </>
              ) : (
                <>
                  <Check className="w-3.5 h-3.5" />
                  <span>Simpan Perubahan</span>
                </>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: KONFIRMASI HAPUS INVENTARIS */}
      {/* ==================================================== */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => setIsDeleteModalOpen(false)}
        title="Hapus Data Inventaris"
        description="Konfirmasi penghapusan data aset inventaris dari sistem Sarana & Prasarana."
        maxWidth="md"
      >
        <div className="space-y-4 pt-2">
          <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-sm flex items-start gap-3">
            <AlertTriangle className="w-5 h-5 text-rose-600 shrink-0 mt-0.5" />
            <div>
              <p className="font-semibold text-rose-900">
                Peringatan: Tindakan ini tidak dapat dibatalkan!
              </p>
              <p className="text-xs text-rose-700 mt-1">
                Apakah Anda yakin ingin menghapus barang{" "}
                <span className="font-bold underline">
                  {selectedItem?.item_code} — {selectedItem?.item_name}
                </span>{" "}
                dari daftar inventaris?
              </p>
            </div>
          </div>

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

      {/* ==================================================== */}
      {/* MODAL: BULK IMPORT (.XLSX) */}
      {/* ==================================================== */}
      <Modal
        isOpen={isImportModalOpen}
        onClose={() => setIsImportModalOpen(false)}
        title="Import Data Inventaris Masal (.xlsx)"
        description="Unggah file spreadsheet Excel berisi data inventaris barang. Sistem akan memproses dan memasukkan seluruh baris secara otomatis."
        maxWidth="2xl"
      >
        <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>
          )}

          {/* Panduan & Download Link */}
          <div className="p-3.5 rounded-xl bg-blue-50 border border-blue-200 text-blue-800 text-xs flex items-start gap-2.5">
            <Info className="w-4 h-4 text-blue-600 shrink-0 mt-0.5" />
            <div className="flex-1">
              <p className="font-semibold text-blue-900">Format Kolom Template Excel:</p>
              <p className="mt-0.5 text-blue-700">
                Gunakan header: <strong>Kode Barang, Nama Barang, Merk, Kategori, Tanggal Beli, Jumlah, Satuan, Harga, Sumber Dana, Lokasi / Ruang, Kondisi, Keterangan</strong>.
              </p>
              <button
                type="button"
                onClick={handleDownloadTemplate}
                className="mt-2 inline-flex items-center gap-1.5 font-bold text-blue-700 hover:text-blue-900 underline"
              >
                <Download className="w-3 h-3" />
                Unduh Template Excel Resmi (.xlsx)
              </button>
            </div>
          </div>

          {/* File Dropzone / Picker */}
          <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 atau Tarik File Excel (.xlsx / .xls) ke Sini"}
            </p>
            <p className="text-xs text-slate-500 mt-1">
              {importFile
                ? `${(importFile.size / 1024).toFixed(1)} KB • ${parsedRows.length} baris data 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>

          {/* Pratinjau Tabel Import */}
          {parsedRows.length > 0 && (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-xs font-semibold text-slate-700">
                <span>Pratinjau Data Impor (Maksimal 5 Baris Pertama):</span>
                <span className="text-emerald-700 font-bold bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200">
                  {parsedRows.length} Baris Siap Diimpor
                </span>
              </div>
              <div className="max-h-52 overflow-y-auto border border-slate-200 rounded-xl">
                <table className="w-full text-left text-xs border-collapse">
                  <thead className="bg-slate-100 sticky top-0 text-slate-700 font-bold">
                    <tr>
                      <th className="p-2">Kode</th>
                      <th className="p-2">Nama Barang</th>
                      <th className="p-2">Merk</th>
                      <th className="p-2">Kategori</th>
                      <th className="p-2 text-center">Qty</th>
                      <th className="p-2 text-right">Harga</th>
                      <th className="p-2 text-center">Sumber</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {parsedRows.slice(0, 5).map((row, i) => (
                      <tr key={i} className="hover:bg-slate-50">
                        <td className="p-2 font-mono font-semibold text-slate-800">
                          {row["Kode Barang"] || row.item_code || "-"}
                        </td>
                        <td className="p-2 font-medium text-slate-900">
                          {row["Nama Barang"] || row.item_name || "-"}
                        </td>
                        <td className="p-2 text-slate-600">
                          {row["Merk"] || row.brand || "-"}
                        </td>
                        <td className="p-2 text-slate-600">
                          {row["Kategori"] || row.category || "-"}
                        </td>
                        <td className="p-2 text-center font-bold">
                          {row["Jumlah"] || row.quantity || 1}
                        </td>
                        <td className="p-2 text-right text-slate-800">
                          {formatRupiah(row["Harga"] || row.price || 0)}
                        </td>
                        <td className="p-2 text-center font-semibold text-blue-700">
                          {row["Sumber Dana"] || row.funding_source || "BOS"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* Modal Actions */}
          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsImportModalOpen(false)}
              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="px-5 py-2 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 rounded-xl shadow-sm transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
            >
              {isImporting ? (
                <>
                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                  <span>Mengimpor Data...</span>
                </>
              ) : (
                <>
                  <Upload className="w-3.5 h-3.5" />
                  <span>Mulai Import ({parsedRows.length} Barang)</span>
                </>
              )}
            </button>
          </div>
        </div>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: PREVIEW FOTO BARANG ZOOM */}
      {/* ==================================================== */}
      {previewPhoto && (
        <Modal
          isOpen={!!previewPhoto}
          onClose={() => setPreviewPhoto(null)}
          title={previewPhoto.title}
          description="Foto fisik aset inventaris SMA BPI 1 Bandung"
          maxWidth="lg"
        >
          <div className="pt-2 text-center space-y-3">
            <div className="w-full max-h-[70vh] flex items-center justify-center overflow-hidden rounded-xl bg-slate-900 border border-slate-200">
              <img
                src={previewPhoto.url}
                alt={previewPhoto.title}
                className="max-h-[65vh] w-auto object-contain mx-auto"
              />
            </div>
            <div className="flex justify-end">
              <button
                onClick={() => setPreviewPhoto(null)}
                className="px-4 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-lg"
              >
                Tutup Pratinjau
              </button>
            </div>
          </div>
        </Modal>
      )}

      {/* ==================================================== */}
      {/* MODAL: PRATINJAU CETAK DOKUMEN REKAPITULASI INVENTARIS DENGAN KOP BPI */}
      {/* ==================================================== */}
      <Modal
        isOpen={isPrintModalOpen}
        onClose={() => setIsPrintModalOpen(false)}
        title="Pratinjau Cetak Rekapitulasi Inventaris BPI"
        description="Format resmi dokumen inventaris sarana & prasarana SMA BPI 1 Bandung"
        maxWidth="max-w-5xl"
        hideOnPrint={false}
        footer={
          <div className="flex items-center justify-between w-full">
            <div className="text-xs text-slate-500">
              * Dokumen dicetak dengan Kop Surat 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-sm transition-all cursor-pointer"
              >
                <Printer className="w-3.5 h-3.5" />
                <span>Cetak Sekarang (Print / PDF)</span>
              </button>
            </div>
          </div>
        }
      >
        <div id="print-inventory-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 (UKURAN SIMETRIS DENGAN ISI & SATU GARIS PEMISAH) */}
          <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>

          {/* JUDUL DOKUMEN REKAPITULASI (TANPA GARIS BAWAH TAMBAHAN) */}
          <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">
              BUKU INDUK REKAPITULASI INVENTARIS SARANA & PRASARANA SEKOLAH
            </h2>
            <p className="text-xs font-semibold text-slate-700">
              SMA BPI 1 BANDUNG • TAHUN AJARAN 2026/2027
            </p>
            <p className="text-xs font-bold text-blue-900">
              {getPeriodSubtitle(selectedMonth, selectedYear)}
            </p>
            <p className="text-[11px] text-slate-500">
              Dicetak pada: {new Date().toLocaleDateString("id-ID", { dateStyle: "full" })}
            </p>
          </div>

          {/* Document Summary Info */}
          <div className="mb-4 grid grid-cols-2 sm: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 Jenis Aset:</span>
              <span className="font-bold text-slate-800">{filteredItems.length} Barang</span>
            </div>
            <div>
              <span className="text-slate-500 block">Akumulasi Fisik:</span>
              <span className="font-bold text-slate-800">
                {filteredItems.reduce((acc, curr) => acc + (Number(curr.quantity) || 0), 0)} Unit
              </span>
            </div>
            <div>
              <span className="text-slate-500 block">Estimasi Nilai Aset:</span>
              <span className="font-bold text-slate-800">
                {formatRupiah(
                  filteredItems.reduce(
                    (acc, curr) => acc + (Number(curr.quantity) || 0) * (Number(curr.price) || 0),
                    0
                  )
                )}
              </span>
            </div>
            <div>
              <span className="text-slate-500 block">Filter Sumber Dana:</span>
              <span className="font-bold text-slate-800">{selectedFunding}</span>
            </div>
          </div>

          {/* Printable Table */}
          <div className="overflow-x-auto">
            <table className="w-full text-left text-[11px] border-collapse border border-slate-300">
              <thead>
                <tr className="bg-slate-100 text-slate-900 font-bold uppercase text-[10px] tracking-wider border-b border-slate-300">
                  <th className="py-2 px-2 text-center w-8 border border-slate-300">No</th>
                  <th className="py-2 px-2.5 border border-slate-300">Kode Barang</th>
                  <th className="py-2 px-2.5 border border-slate-300">Nama Barang</th>
                  <th className="py-2 px-2 border border-slate-300">Merk</th>
                  <th className="py-2 px-2 border border-slate-300">Kategori</th>
                  <th className="py-2 px-2.5 border border-slate-300">Lokasi / Ruang</th>
                  <th className="py-2 px-2 text-center border border-slate-300">Tgl Beli</th>
                  <th className="py-2 px-2 text-center border border-slate-300">Jumlah</th>
                  <th className="py-2 px-2.5 text-right border border-slate-300">Harga Satuan</th>
                  <th className="py-2 px-2.5 text-right border border-slate-300">Total Harga</th>
                  <th className="py-2 px-2 text-center border border-slate-300">Sumber Dana</th>
                  <th className="py-2 px-2 text-center border border-slate-300">Kondisi</th>
                </tr>
              </thead>
              <tbody>
                {filteredItems.length === 0 ? (
                  <tr>
                    <td colSpan={12} className="py-8 text-center text-slate-400 italic border border-slate-300">
                      (Belum ada data inventaris yang terdaftar. Data masih kosong.)
                    </td>
                  </tr>
                ) : (
                  filteredItems.map((item, index) => {
                    const totalItemVal = (Number(item.quantity) || 0) * (Number(item.price) || 0);
                    return (
                      <tr key={item.id} className="border-b border-slate-200">
                        <td className="py-1.5 px-2 text-center border border-slate-300">{index + 1}</td>
                        <td className="py-1.5 px-2.5 font-mono text-[10px] border border-slate-300">{item.item_code}</td>
                        <td className="py-1.5 px-2.5 font-medium border border-slate-300">{item.item_name}</td>
                        <td className="py-1.5 px-2 border border-slate-300">{item.brand || "-"}</td>
                        <td className="py-1.5 px-2 border border-slate-300">{item.category}</td>
                        <td className="py-1.5 px-2.5 border border-slate-300">{item.location}</td>
                        <td className="py-1.5 px-2 text-center border border-slate-300">{item.purchase_date || "-"}</td>
                        <td className="py-1.5 px-2 text-center font-bold border border-slate-300">
                          {item.quantity} {item.unit}
                        </td>
                        <td className="py-1.5 px-2.5 text-right border border-slate-300">
                          {formatRupiah(item.price)}
                        </td>
                        <td className="py-1.5 px-2.5 text-right font-medium border border-slate-300">
                          {formatRupiah(totalItemVal)}
                        </td>
                        <td className="py-1.5 px-2 text-center font-medium border border-slate-300">
                          {item.funding_source || "BOS"}
                        </td>
                        <td className="py-1.5 px-2 text-center border border-slate-300">
                          {item.condition}
                        </td>
                      </tr>
                    );
                  })
                )}
              </tbody>
              {filteredItems.length > 0 && (
                <tfoot>
                  <tr className="bg-slate-100 font-bold border-t-2 border-slate-400 text-[11px]">
                    <td colSpan={7} className="py-2 px-3 text-right border border-slate-300 uppercase">
                      Total Akumulasi:
                    </td>
                    <td className="py-2 px-2 text-center border border-slate-300">
                      {filteredItems.reduce((acc, curr) => acc + (Number(curr.quantity) || 0), 0)} Unit
                    </td>
                    <td className="py-2 px-2 text-center border border-slate-300">-</td>
                    <td className="py-2 px-2.5 text-right border border-slate-300">
                      {formatRupiah(
                        filteredItems.reduce(
                          (acc, curr) =>
                            acc + (Number(curr.quantity) || 0) * (Number(curr.price) || 0),
                          0
                        )
                      )}
                    </td>
                    <td colSpan={2} className="py-2 px-2 border border-slate-300"></td>
                  </tr>
                </tfoot>
              )}
            </table>
          </div>

          {/* Official Signatures (Diambil dari Pengaturan & Master Pejabat Sekolah) */}
          <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 !== "Drs. Budi Santoso"
                  ? 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 InventoryManagementView;