"use client";

import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
import {
  ClipboardList,
  Search,
  Plus,
  Pencil,
  Trash2,
  Download,
  Upload,
  Printer,
  X,
  RefreshCw,
  CheckCircle2,
  AlertTriangle,
  FileSpreadsheet,
  Coins,
  Layers,
  Calendar,
  Building2,
} 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 NonInventoryItem {
  id: number;
  receipt_date: string;
  sender_name_address: string;
  proof_date?: string | null;
  proof_number?: string | null;
  item_name_spec: string;
  quantity: number;
  unit: string;
  unit_price: number;
  total_price: number;
  notes?: string | null;
  created_at?: string;
  updated_at?: string;
}

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

  // Search & Filters
  const [searchTerm, setSearchTerm] = useState<string>("");

  // 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);

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

  // Form State
  const [formData, setFormData] = useState<{
    receipt_date: string;
    sender_name_address: string;
    proof_date: string;
    proof_number: string;
    item_name_spec: string;
    quantity: number;
    unit: string;
    unit_price: number;
    notes: string;
  }>({
    receipt_date: new Date().toISOString().split("T")[0],
    sender_name_address: "",
    proof_date: new Date().toISOString().split("T")[0],
    proof_number: "",
    item_name_spec: "",
    quantity: 1,
    unit: "Pcs",
    unit_price: 0,
    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);
  };

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

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

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

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

  // Dynamic Year Range
  const availableYears = useMemo(() => {
    const currentYear = new Date().getFullYear();
    const defaultYears = ["2024", "2025", "2026", "2027", "2028"];
    const fromData = items
      .map((item) => (item.receipt_date ? item.receipt_date.split("-")[0] : 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 (Pencarian & Filter Periode Tanggal Terima)
  const filteredItems = useMemo(() => {
    return items.filter((item) => {
      let matchSearch = true;
      if (searchTerm.trim()) {
        const term = searchTerm.toLowerCase();
        matchSearch =
          item.item_name_spec.toLowerCase().includes(term) ||
          item.sender_name_address.toLowerCase().includes(term) ||
          (item.proof_number && item.proof_number.toLowerCase().includes(term)) ||
          (item.notes && item.notes.toLowerCase().includes(term)) ||
          item.receipt_date.includes(term);
      }

      let matchPeriod = true;
      if (item.receipt_date) {
        const [rYear, rMonth] = item.receipt_date.split("-");
        if (selectedYear !== "Semua" && rYear !== selectedYear) {
          matchPeriod = false;
        }
        if (selectedMonth !== "Semua" && rMonth !== selectedMonth) {
          matchPeriod = false;
        }
      } else {
        if (selectedYear !== "Semua" || selectedMonth !== "Semua") {
          matchPeriod = false;
        }
      }

      return matchSearch && matchPeriod;
    });
  }, [items, searchTerm, selectedMonth, selectedYear]);

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

  // Statistics (Wajib terhitung secara menyeluruh dari seluruh filteredItems)
  const stats = useMemo(() => {
    const totalItems = filteredItems.length;
    const totalVolume = filteredItems.reduce((acc, curr) => acc + (Number(curr.quantity) || 0), 0);
    const totalExpense = filteredItems.reduce((acc, curr) => acc + (Number(curr.total_price) || 0), 0);
    return { totalItems, totalVolume, totalExpense };
  }, [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 non-inventaris untuk diekspor", "error");
      return;
    }
    const exportData = filteredItems.map((item, idx) => ({
      No: idx + 1,
      "Tanggal Terima": item.receipt_date,
      "Nama & Alamat Pengirim": item.sender_name_address,
      "Tanggal Bukti": item.proof_date || "-",
      "Nomor Bukti": item.proof_number || "-",
      "Nama & Ukuran Barang": item.item_name_spec,
      "Banyaknya (Qty)": item.quantity,
      Satuan: item.unit,
      "Harga Satuan": item.unit_price,
      "Jumlah Total": item.total_price,
      "Sumber Dana": item.notes || "-",
    }));

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

  // Open Add Modal
  const handleOpenAddModal = () => {
    setFormData({
      receipt_date: new Date().toISOString().split("T")[0],
      sender_name_address: "",
      proof_date: new Date().toISOString().split("T")[0],
      proof_number: "",
      item_name_spec: "",
      quantity: 1,
      unit: "Pcs",
      unit_price: 0,
      notes: "BOS",
    });
    setFormError(null);
    setIsAddModalOpen(true);
  };

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

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch("/api/sarpras/non-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 barang");
      }
      showToast("Barang non-inventaris berhasil ditambahkan");
      setIsAddModalOpen(false);
      fetchNonInventory();
    } catch (err: any) {
      setFormError(err.message || "Terjadi kesalahan saat menyimpan data");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Open Edit Modal
  const handleOpenEditModal = (item: NonInventoryItem) => {
    setSelectedItem(item);
    setFormData({
      receipt_date: item.receipt_date || new Date().toISOString().split("T")[0],
      sender_name_address: item.sender_name_address || "",
      proof_date: item.proof_date || "",
      proof_number: item.proof_number || "",
      item_name_spec: item.item_name_spec || "",
      quantity: item.quantity || 0,
      unit: item.unit || "Pcs",
      unit_price: item.unit_price || 0,
      notes: item.notes || "",
    });
    setFormError(null);
    setIsEditModalOpen(true);
  };

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

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch(`/api/sarpras/non-inventory/${selectedItem.id}`, {
        method: "PUT",
        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 memperbarui barang");
      }
      showToast("Data barang non-inventaris berhasil diperbarui");
      setIsEditModalOpen(false);
      setSelectedItem(null);
      fetchNonInventory();
    } catch (err: any) {
      setFormError(err.message || "Terjadi kesalahan saat memperbarui data");
    } finally {
      setIsSubmitting(false);
    }
  };

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

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

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

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

    setImportFile(file);
    setImportError(null);

    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const data = new Uint8Array(event.target?.result as ArrayBuffer);
        const workbook = XLSX.read(data, { type: "array" });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonRows: any[] = XLSX.utils.sheet_to_json(sheet);

        if (!jsonRows || jsonRows.length === 0) {
          setImportError("File Excel kosong atau tidak memiliki baris data 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/non-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 barang");
      }

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

  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">
              <ClipboardList 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 Non Inventaris
            </h1>
            <p className="text-sm text-slate-500 mt-1">
              Pencatatan penerimaan barang operasional & habis pakai, bukti penerimaan, volume, dan harga satuan SMA BPI 1 Bandung.
            </p>
          </div>

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

      {/* Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 print:hidden">
        <StatCard
          title="Total Barang Tercatat"
          value={isLoading ? "..." : `${stats.totalItems} Barang`}
          icon={ClipboardList}
          description="Item penerimaan operasional"
          variant="primary"
        />
        <StatCard
          title="Akumulasi Volume Fisik"
          value={isLoading ? "..." : `${stats.totalVolume} Unit/Volume`}
          icon={Layers}
          description="Total kuantitas barang masuk"
          variant="blue"
        />
        <StatCard
          title="Total Biaya Pengeluaran"
          value={isLoading ? "..." : formatRupiah(stats.totalExpense)}
          icon={Coins}
          description="Akumulasi nilai pembelian"
          variant="purple"
        />
      </div>

      {/* Main Content: Actions Bar & Table */}
      <div className="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden print:hidden">
        {/* Actions Bar (Top of Table) */}
        <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>+ Tambahkan Barang</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={() => setIsPrintModalOpen(true)}
                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 Non Inventaris"
              >
                <Printer className="w-3.5 h-3.5 text-slate-600" />
                <span>Cetak</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 Non-Inventaris Terfilter ke File Excel (.xlsx)"
              >
                <FileSpreadsheet className="w-3.5 h-3.5 text-teal-600" />
                <span>Export (.xlsx)</span>
              </button>
            </div>

            {/* Total Data Count & Pagination Info */}
            <div className="text-xs text-slate-500 font-medium">
              Menampilkan{" "}
              <span className="font-bold 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-bold text-blue-600">{filteredItems.length}</span> item
            </div>
          </div>

          {/* Search Bar & 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 sm:col-span-2">
              <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                placeholder="Filter pencarian cepat (Nama, Pengirim, Nomor Bukti...)"
                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 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 barang non-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={() => fetchNonInventory()}
              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">
            <ClipboardList className="w-12 h-12 text-slate-300 mx-auto mb-3" />
            <p className="text-base font-semibold text-slate-700">
              Belum ada data barang non-inventaris
            </p>
            <p className="text-xs text-slate-500 mt-1 max-w-sm mx-auto">
              {searchTerm
                ? "Tidak ada data yang sesuai dengan kata kunci pencarian."
                : "Tabel masih kosong. Silakan gunakan tombol + Tambahkan Barang atau Import Excel untuk mengisi data."}
            </p>
            {searchTerm ? (
              <button
                onClick={() => setSearchTerm("")}
                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 Pencarian
              </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 Barang Baru
              </button>
            )}
          </div>
        ) : (
          <div className="overflow-x-auto">
            {/* Table matching user screenshot: media_1791282859134.png */}
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-200 text-slate-700 text-xs font-bold uppercase tracking-wider">
                  <th rowSpan={2} className="py-3 px-3 text-center border-r border-slate-200 w-12">
                    NO
                  </th>
                  <th rowSpan={2} className="py-3 px-3.5 border-r border-slate-200 w-32">
                    TANGGAL TERIMA BARANG
                  </th>
                  <th rowSpan={2} className="py-3 px-3.5 border-r border-slate-200 min-w-[180px]">
                    NAMA DAN ALAMAT PENGIRIM
                  </th>
                  <th colSpan={2} className="py-2 px-3 text-center border-r border-slate-200 bg-slate-100/70">
                    TANDA BUKTI PENERIMAAN BARANG
                  </th>
                  <th rowSpan={2} className="py-3 px-3.5 border-r border-slate-200 min-w-[200px]">
                    NAMA DAN UKURAN BARANG (MERK, UKURAN DSB)
                  </th>
                  <th colSpan={2} className="py-2 px-3 text-center border-r border-slate-200 bg-slate-100/70">
                    BANYAKNYA
                  </th>
                  <th rowSpan={2} className="py-3 px-3.5 text-right border-r border-slate-200 w-32">
                    HARGA SATUAN (RP)
                  </th>
                  <th rowSpan={2} className="py-3 px-3.5 text-right border-r border-slate-200 w-32">
                    JUMLAH (RP)
                  </th>
                  <th rowSpan={2} className="py-3 px-3 border-r border-slate-200 w-28">
                    SUMBER DANA
                  </th>
                  <th rowSpan={2} className="py-3 px-3 text-center w-24">
                    AKSI
                  </th>
                </tr>
                <tr className="bg-slate-50/80 border-b border-slate-200 text-slate-600 text-[11px] font-bold uppercase tracking-wider">
                  <th className="py-2 px-2.5 text-center border-r border-slate-200 w-28">TANGGAL</th>
                  <th className="py-2 px-2.5 text-center border-r border-slate-200 w-32">NOMER</th>
                  <th className="py-2 px-2.5 text-center border-r border-slate-200 w-20">VOLUME</th>
                  <th className="py-2 px-2.5 text-center border-r border-slate-200 w-20">SATUAN</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-xs text-slate-700">
                {paginatedItems.map((item, index) => {
                  const rowNum = (currentPage - 1) * ITEMS_PER_PAGE + index + 1;
                  return (
                    <tr key={item.id} className="hover:bg-slate-50/80 transition-colors">
                      <td className="py-3 px-3 text-center font-medium text-slate-500 border-r border-slate-100">
                        {rowNum}
                      </td>
                      <td className="py-3 px-3.5 font-medium border-r border-slate-100">
                        {item.receipt_date}
                      </td>
                      <td className="py-3 px-3.5 border-r border-slate-100 font-medium text-slate-900">
                        {item.sender_name_address}
                      </td>
                      <td className="py-3 px-2.5 text-center border-r border-slate-100 text-slate-600">
                        {item.proof_date || "-"}
                      </td>
                      <td className="py-3 px-2.5 text-center border-r border-slate-100 font-mono text-[11px] text-blue-600 font-semibold">
                        {item.proof_number || "-"}
                      </td>
                      <td className="py-3 px-3.5 border-r border-slate-100 font-semibold text-slate-900">
                        {item.item_name_spec}
                      </td>
                      <td className="py-3 px-2.5 text-center border-r border-slate-100 font-bold text-slate-800">
                        {item.quantity}
                      </td>
                      <td className="py-3 px-2.5 text-center border-r border-slate-100 text-slate-600">
                        {item.unit}
                      </td>
                      <td className="py-3 px-3.5 text-right border-r border-slate-100 font-mono">
                        {formatRupiah(item.unit_price)}
                      </td>
                      <td className="py-3 px-3.5 text-right border-r border-slate-100 font-mono font-bold text-slate-900">
                        {formatRupiah(item.total_price)}
                      </td>
                      <td className="py-3 px-3 border-r border-slate-100 text-slate-500 text-[11px]">
                        {item.notes || "-"}
                      </td>
                      <td className="py-3 px-3 text-center">
                        <div className="flex items-center justify-center gap-1.5">
                          <button
                            onClick={() => handleOpenEditModal(item)}
                            className="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors cursor-pointer"
                            title="Edit Barang"
                          >
                            <Pencil className="w-3.5 h-3.5" />
                          </button>
                          <button
                            onClick={() => handleOpenDeleteModal(item)}
                            className="p-1.5 text-rose-600 hover:bg-rose-50 rounded-lg transition-colors cursor-pointer"
                            title="Hapus Barang"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
              <tfoot>
                <tr className="bg-slate-100/80 font-bold text-xs text-slate-900 border-t-2 border-slate-300">
                  <td colSpan={6} className="py-3 px-3.5 text-right uppercase border-r border-slate-200">
                    Total Akumulasi:
                  </td>
                  <td className="py-3 px-2.5 text-center border-r border-slate-200">
                    {filteredItems.reduce((acc, curr) => acc + (Number(curr.quantity) || 0), 0)}
                  </td>
                  <td className="py-3 px-2.5 text-center border-r border-slate-200">-</td>
                  <td className="py-3 px-3.5 text-right border-r border-slate-200">-</td>
                  <td className="py-3 px-3.5 text-right border-r border-slate-200 font-mono text-emerald-700">
                    {formatRupiah(
                      filteredItems.reduce((acc, curr) => acc + (Number(curr.total_price) || 0), 0)
                    )}
                  </td>
                  <td colSpan={2} className="py-3 px-3"></td>
                </tr>
              </tfoot>
            </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 & Real-time Sync */}
        <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 Pencatatan Non-Inventaris Terintegrasi</span>
          <span>Data terhubung secara real-time ke Dashboard Sarana & Prasarana</span>
        </div>
      </div>

      {/* ==================================================== */}
      {/* MODAL: TAMBAH BARANG NON-INVENTARIS */}
      {/* ==================================================== */}
      <Modal
        isOpen={isAddModalOpen}
        onClose={() => setIsAddModalOpen(false)}
        title="Tambah Barang Non-Inventaris"
        description="Formulir pencatatan barang masuk operasional & habis pakai"
        maxWidth="max-w-2xl"
      >
        <form onSubmit={handleSubmitAdd} className="space-y-4 pt-1">
          {formError && (
            <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <span>{formError}</span>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Tanggal Terima Barang
              </label>
              <input
                type="date"
                value={formData.receipt_date}
                onChange={(e) => setFormData({ ...formData, receipt_date: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Nama dan Alamat Pengirim
              </label>
              <input
                type="text"
                placeholder="Contoh: CV. Jaya Abadi - Jl. Lengkong No. 45"
                value={formData.sender_name_address}
                onChange={(e) => setFormData({ ...formData, sender_name_address: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>
          </div>

          {/* Tanda Bukti Penerimaan */}
          <div className="p-3 rounded-xl bg-slate-50 border border-slate-200/80 space-y-3">
            <h4 className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
              <Calendar className="w-3.5 h-3.5 text-blue-600" />
              <span>Tanda Bukti Penerimaan Barang</span>
            </h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">
                  Tanggal Bukti (Surat Jalan/Kwitansi)
                </label>
                <input
                  type="date"
                  value={formData.proof_date}
                  onChange={(e) => setFormData({ ...formData, proof_date: e.target.value })}
                  className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">
                  Nomor Bukti (No. Surat Jalan / No. Kwitansi)
                </label>
                <input
                  type="text"
                  placeholder="Contoh: SJ/2026/10/012"
                  value={formData.proof_number}
                  onChange={(e) => setFormData({ ...formData, proof_number: e.target.value })}
                  className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
                />
              </div>
            </div>
          </div>

          {/* Nama dan Ukuran Barang */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Nama dan Ukuran Barang (Merk, Ukuran dsb)
            </label>
            <input
              type="text"
              placeholder="Contoh: Kertas HVS A4 80gr Sinar Dunia / Spidol Snowman Boardmarker"
              value={formData.item_name_spec}
              onChange={(e) => setFormData({ ...formData, item_name_spec: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          {/* Volume, Satuan, Harga Satuan */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Volume / Banyaknya
              </label>
              <input
                type="number"
                min="0"
                step="any"
                value={formData.quantity}
                onChange={(e) => setFormData({ ...formData, quantity: parseFloat(e.target.value) || 0 })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Satuan
              </label>
              <input
                type="text"
                placeholder="Rim, Box, Pcs, Lembar, Botol..."
                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:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

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

          {/* Total Calculation Display */}
          <div className="p-3 bg-blue-50/70 border border-blue-200/80 rounded-xl flex items-center justify-between text-xs">
            <span className="font-semibold text-slate-700">Estimasi Total Biaya:</span>
            <span className="font-mono font-bold text-sm text-blue-700">
              {formatRupiah((formData.quantity || 0) * (formData.unit_price || 0))}
            </span>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">Sumber Dana</label>
            <input
              type="text"
              list="sumber-dana-list-add"
              placeholder="Contoh: BOS, Yayasan, Komite..."
              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:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
            <datalist id="sumber-dana-list-add">
              <option value="BOS" />
              <option value="Yayasan" />
              <option value="Komite" />
              <option value="Bantuan" />
              <option value="Hibah" />
              <option value="Operasional Sekolah" />
              <option value="-" />
            </datalist>
          </div>

          <div className="flex items-center justify-end gap-2.5 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>Simpan Barang</span>
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: EDIT BARANG NON-INVENTARIS */}
      {/* ==================================================== */}
      <Modal
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        title="Edit Barang Non-Inventaris"
        description="Perbarui informasi data barang non-inventaris"
        maxWidth="max-w-2xl"
      >
        <form onSubmit={handleSubmitEdit} className="space-y-4 pt-1">
          {formError && (
            <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <span>{formError}</span>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Tanggal Terima Barang
              </label>
              <input
                type="date"
                value={formData.receipt_date}
                onChange={(e) => setFormData({ ...formData, receipt_date: e.target.value })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

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

          <div className="p-3 rounded-xl bg-slate-50 border border-slate-200/80 space-y-3">
            <h4 className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
              <Calendar className="w-3.5 h-3.5 text-blue-600" />
              <span>Tanda Bukti Penerimaan Barang</span>
            </h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">
                  Tanggal Bukti
                </label>
                <input
                  type="date"
                  value={formData.proof_date}
                  onChange={(e) => setFormData({ ...formData, proof_date: e.target.value })}
                  className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
                />
              </div>

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

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

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Volume / Banyaknya
              </label>
              <input
                type="number"
                min="0"
                step="any"
                value={formData.quantity}
                onChange={(e) => setFormData({ ...formData, quantity: parseFloat(e.target.value) || 0 })}
                className="w-full px-3 py-2 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                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:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

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

          <div className="p-3 bg-blue-50/70 border border-blue-200/80 rounded-xl flex items-center justify-between text-xs">
            <span className="font-semibold text-slate-700">Estimasi Total Biaya:</span>
            <span className="font-mono font-bold text-sm text-blue-700">
              {formatRupiah((formData.quantity || 0) * (formData.unit_price || 0))}
            </span>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">Sumber Dana</label>
            <input
              type="text"
              list="sumber-dana-list-edit"
              placeholder="Contoh: BOS, Yayasan, Komite..."
              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:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
            <datalist id="sumber-dana-list-edit">
              <option value="BOS" />
              <option value="Yayasan" />
              <option value="Komite" />
              <option value="Bantuan" />
              <option value="Hibah" />
              <option value="Operasional Sekolah" />
              <option value="-" />
            </datalist>
          </div>

          <div className="flex items-center justify-end gap-2.5 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>Simpan Perubahan</span>
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: HAPUS BARANG */}
      {/* ==================================================== */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => setIsDeleteModalOpen(false)}
        title="Hapus Barang Non-Inventaris"
        description="Konfirmasi penghapusan data barang"
        maxWidth="max-w-md"
      >
        <div className="space-y-4 pt-1">
          <p className="text-xs text-slate-600 leading-relaxed">
            Apakah Anda yakin ingin menghapus data penerimaan barang{" "}
            <span className="font-bold text-slate-900">{selectedItem?.item_name_spec}</span>?
            Tindakan ini tidak dapat dibatalkan.
          </p>

          <div className="flex items-center justify-end gap-2.5 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={handleExecuteDelete}
              disabled={isSubmitting}
              className="px-5 py-2 text-xs font-semibold text-white bg-rose-600 hover:bg-rose-700 active:bg-rose-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>Hapus Sekarang</span>
            </button>
          </div>
        </div>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: IMPORT DATA EXCEL (.XLSX) */}
      {/* ==================================================== */}
      <Modal
        isOpen={isImportModalOpen}
        onClose={() => setIsImportModalOpen(false)}
        title="Import Data Barang Non-Inventaris (.xlsx)"
        description="Unggah file spreadsheet Excel untuk memasukkan data barang secara massal"
        maxWidth="max-w-3xl"
      >
        <div className="space-y-4 pt-1">
          {importError && (
            <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <span>{importError}</span>
            </div>
          )}

          {/* Upload Area */}
          <div
            onClick={() => fileInputRef.current?.click()}
            className="border-2 border-dashed border-slate-300 hover:border-blue-500 rounded-2xl p-6 text-center cursor-pointer bg-slate-50 hover:bg-blue-50/50 transition-colors"
          >
            <FileSpreadsheet className="w-10 h-10 text-slate-400 mx-auto mb-2" />
            <p className="text-xs font-semibold text-slate-700">
              {importFile ? importFile.name : "Klik atau seret file .xlsx ke sini"}
            </p>
            <p className="text-[11px] text-slate-400 mt-1">
              Mendukung file Microsoft Excel (.xlsx atau .xls)
            </p>
            <input
              ref={fileInputRef}
              type="file"
              accept=".xlsx,.xls"
              onChange={handleFileChange}
              className="hidden"
            />
          </div>

          {/* Preview Parsed Rows */}
          {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 ({parsedRows.length} baris terdeteksi):</span>
              </div>
              <div className="max-h-48 overflow-y-auto border border-slate-200 rounded-xl overflow-x-auto text-[11px]">
                <table className="w-full border-collapse">
                  <thead className="bg-slate-100 text-slate-700 font-bold sticky top-0">
                    <tr>
                      <th className="p-2 border-b text-center">No</th>
                      <th className="p-2 border-b text-left">Nama Barang</th>
                      <th className="p-2 border-b text-left">Pengirim</th>
                      <th className="p-2 border-b text-center">Volume</th>
                      <th className="p-2 border-b text-right">Harga Satuan</th>
                    </tr>
                  </thead>
                  <tbody>
                    {parsedRows.slice(0, 10).map((row, idx) => (
                      <tr key={idx} className="border-b hover:bg-slate-50">
                        <td className="p-2 text-center text-slate-500">{idx + 1}</td>
                        <td className="p-2 font-medium">
                          {row["Nama dan Ukuran Barang"] || row["Nama Barang"] || row.item_name_spec || "-"}
                        </td>
                        <td className="p-2 text-slate-600">
                          {row["Nama dan Alamat Pengirim"] || row["Pengirim"] || "-"}
                        </td>
                        <td className="p-2 text-center font-bold">
                          {row["Volume"] || row["Banyaknya"] || row.quantity || 1} {row["Satuan"] || row.unit || ""}
                        </td>
                        <td className="p-2 text-right">
                          {formatRupiah(row["Harga Satuan"] || row["HARGA SATUAN (RP)"] || row.unit_price || 0)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          <div className="flex items-center justify-end gap-2.5 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...</span>
                </>
              ) : (
                <>
                  <Upload className="w-3.5 h-3.5" />
                  <span>Mulai Import ({parsedRows.length} Barang)</span>
                </>
              )}
            </button>
          </div>
        </div>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: PRATINJAU CETAK DOKUMEN DENGAN KOP RESMI BPI */}
      {/* ==================================================== */}
      <Modal
        isOpen={isPrintModalOpen}
        onClose={() => setIsPrintModalOpen(false)}
        title="Pratinjau Cetak Daftar Non-Inventaris BPI"
        description="Format resmi dokumen penerimaan barang operasional 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-non-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 (LEBAR SIMETRIS & 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 CATATAN / REKAPITULASI PENERIMAAN BARANG NON INVENTARIS
            </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-3 gap-2 text-[11px] bg-slate-50 p-2.5 rounded-lg border border-slate-200">
            <div>
              <span className="text-slate-500 block">Total Item Masuk:</span>
              <span className="font-bold text-slate-800">{filteredItems.length} Barang</span>
            </div>
            <div>
              <span className="text-slate-500 block">Akumulasi Volume Fisik:</span>
              <span className="font-bold text-slate-800">
                {filteredItems.reduce((acc, curr) => acc + (Number(curr.quantity) || 0), 0)} Unit/Volume
              </span>
            </div>
            <div>
              <span className="text-slate-500 block">Total Pengeluaran:</span>
              <span className="font-bold text-slate-800">
                {formatRupiah(
                  filteredItems.reduce((acc, curr) => acc + (Number(curr.total_price) || 0), 0)
                )}
              </span>
            </div>
          </div>

          {/* Printable Table (matching the user's uploaded structure) */}
          <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 rowSpan={2} className="py-2 px-1.5 text-center w-8 border border-slate-300">
                    NO
                  </th>
                  <th rowSpan={2} className="py-2 px-2 border border-slate-300 w-24">
                    TANGGAL TERIMA
                  </th>
                  <th rowSpan={2} className="py-2 px-2 border border-slate-300">
                    NAMA & ALAMAT PENGIRIM
                  </th>
                  <th colSpan={2} className="py-1 px-2 text-center border border-slate-300 bg-slate-200/60">
                    TANDA BUKTI PENERIMAAN
                  </th>
                  <th rowSpan={2} className="py-2 px-2 border border-slate-300">
                    NAMA & UKURAN BARANG
                  </th>
                  <th colSpan={2} className="py-1 px-2 text-center border border-slate-300 bg-slate-200/60">
                    BANYAKNYA
                  </th>
                  <th rowSpan={2} className="py-2 px-2 text-right border border-slate-300 w-24">
                    HARGA SATUAN
                  </th>
                  <th rowSpan={2} className="py-2 px-2 text-right border border-slate-300 w-24">
                    JUMLAH (RP)
                  </th>
                  <th rowSpan={2} className="py-2 px-2 border border-slate-300 w-24">
                    SUMBER DANA
                  </th>
                </tr>
                <tr className="bg-slate-100 text-slate-900 font-bold uppercase text-[9px] border-b border-slate-300">
                  <th className="py-1 px-1.5 text-center border border-slate-300">TANGGAL</th>
                  <th className="py-1 px-1.5 text-center border border-slate-300">NOMER</th>
                  <th className="py-1 px-1.5 text-center border border-slate-300">VOL</th>
                  <th className="py-1 px-1.5 text-center border border-slate-300">SATUAN</th>
                </tr>
              </thead>
              <tbody>
                {filteredItems.length === 0 ? (
                  <tr>
                    <td colSpan={11} className="py-8 text-center text-slate-400 italic border border-slate-300">
                      (Belum ada data barang non-inventaris yang terdaftar. Data masih kosong.)
                    </td>
                  </tr>
                ) : (
                  filteredItems.map((item, index) => (
                    <tr key={item.id} className="border-b border-slate-200">
                      <td className="py-1.5 px-1.5 text-center border border-slate-300">{index + 1}</td>
                      <td className="py-1.5 px-2 border border-slate-300">{item.receipt_date}</td>
                      <td className="py-1.5 px-2 border border-slate-300">{item.sender_name_address}</td>
                      <td className="py-1.5 px-1.5 text-center border border-slate-300">{item.proof_date || "-"}</td>
                      <td className="py-1.5 px-1.5 text-center font-mono border border-slate-300">{item.proof_number || "-"}</td>
                      <td className="py-1.5 px-2 font-medium border border-slate-300">{item.item_name_spec}</td>
                      <td className="py-1.5 px-1.5 text-center font-bold border border-slate-300">{item.quantity}</td>
                      <td className="py-1.5 px-1.5 text-center border border-slate-300">{item.unit}</td>
                      <td className="py-1.5 px-2 text-right border border-slate-300">{formatRupiah(item.unit_price)}</td>
                      <td className="py-1.5 px-2 text-right font-medium border border-slate-300">{formatRupiah(item.total_price)}</td>
                      <td className="py-1.5 px-2 border border-slate-300 text-[10px]">{item.notes || "-"}</td>
                    </tr>
                  ))
                )}
              </tbody>
              {filteredItems.length > 0 && (
                <tfoot>
                  <tr className="bg-slate-100 font-bold border-t-2 border-slate-400 text-[11px]">
                    <td colSpan={6} className="py-2 px-3 text-right border border-slate-300 uppercase">
                      Total Akumulasi:
                    </td>
                    <td className="py-2 px-1.5 text-center border border-slate-300">
                      {filteredItems.reduce((acc, curr) => acc + (Number(curr.quantity) || 0), 0)}
                    </td>
                    <td className="py-2 px-1.5 text-center border border-slate-300">-</td>
                    <td className="py-2 px-2 text-center border border-slate-300">-</td>
                    <td className="py-2 px-2 text-right border border-slate-300">
                      {formatRupiah(
                        filteredItems.reduce((acc, curr) => acc + (Number(curr.total_price) || 0), 0)
                      )}
                    </td>
                    <td className="py-2 px-2 border border-slate-300"></td>
                  </tr>
                </tfoot>
              )}
            </table>
          </div>

          {/* Official Signatures: Kiri Kepala Sekolah (Tatang, M.Pd), Kanan Wakasek Sarana (Muhammad Ridwanto, S.Pd) */}
          {/* Official Signatures: Kiri Kepala Sekolah (Tatang, M.Pd), Kanan Wakasek Sarana (Muhammad Ridwanto, S.Pd) */}
          <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 NonInventoryManagementView;