function ParcelReport({ year }) {
    const [rawList, setRawList] = React.useState([]);
    const [fullRawData, setFullRawData] = React.useState([]); 
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
    
    // Filters State
    const [filters, setFilters] = React.useState({
        search: '',
        satminkal: '',
        gender: '',
        status: '',
        collectionStatus: '' // New filter
    });
    const [showFilters, setShowFilters] = React.useState(false);
    
    // Selection / Merge Mode State
    const [isSelectionMode, setIsSelectionMode] = React.useState(false);
    const [selectedIds, setSelectedIds] = React.useState([]);
    
    // UI State
    const [showRecap, setShowRecap] = React.useState(true);
    
    // Coupon State
    const [showCouponModal, setShowCouponModal] = React.useState(false);
    const [couponData, setCouponData] = React.useState([]);

    // Master Data for Filters
    const [institutionList, setInstitutionList] = React.useState([]);

    const fetchData = async () => {
        setLoading(true);
        setError(null);
        try {
            const client = window.SupabaseUtils.getClient();
            if (!client) throw new Error("Koneksi database terputus");

            const { data: empData, error: empError } = await client
                .from('employees')
                .select('*')
                .eq('is_active', true)
                .eq('tahun', year); // Filter by year
            
            if (empError) {
                if (empError.code === '42P01') {
                     throw new Error("Tabel 'employees' belum dibuat.");
                }
                throw empError;
            }

            setFullRawData(empData || []);

            const { data: instData } = await client
                .from('institutions')
                .select('nama')
                .order('nama', { ascending: true });
            
            if (instData) {
                setInstitutionList(instData.map(i => i.nama));
            }

            const uniqueEmployees = {};
            (empData || []).forEach(emp => {
                const key = emp.nik ? emp.nik.trim() : `NO-NIK-${emp.id}`;
                if (!uniqueEmployees[key]) {
                    uniqueEmployees[key] = emp;
                }
            });

            const processedList = Object.values(uniqueEmployees).sort((a, b) => {
                // Primary Sort: Effective Institution Name (Satminkal OR Lembaga) ASC
                const unitA = (a.satminkal || a.lembaga || '').trim().toLowerCase();
                const unitB = (b.satminkal || b.lembaga || '').trim().toLowerCase();
                
                if (unitA < unitB) return -1;
                if (unitA > unitB) return 1;
                
                // Secondary Sort: Nama Pegawai ASC
                return (a.nama || '').localeCompare(b.nama || '');
            });
            setRawList(processedList);

        } catch (err) {
            console.error("Report Error:", err);
            setError(window.SupabaseUtils.formatError(err));
        } finally {
            setLoading(false);
        }
    };

    React.useEffect(() => {
        fetchData();
    }, [year]);

    const filteredData = React.useMemo(() => {
        const filtered = rawList.filter(emp => {
            const searchMatch = !filters.search || 
                (emp.nama || '').toLowerCase().includes(filters.search.toLowerCase()) || 
                (emp.nik || '').includes(filters.search);
            
            const satminkalMatch = !filters.satminkal || emp.satminkal === filters.satminkal;
            const genderMatch = !filters.gender || emp.jenis_kelamin === filters.gender;
            const statusMatch = !filters.status || emp.status === filters.status;
            
            // New Collection Status Filter
            let collectionMatch = true;
            if (filters.collectionStatus === 'collected') {
                collectionMatch = emp.is_parcel_collected === true;
            } else if (filters.collectionStatus === 'uncollected') {
                collectionMatch = !emp.is_parcel_collected;
            }

            return searchMatch && satminkalMatch && genderMatch && statusMatch && collectionMatch;
        });

        // Enforce Sort: Effective Institution Name ASC -> Nama ASC
        return filtered.sort((a, b) => {
            const unitA = (a.satminkal || a.lembaga || '').trim().toLowerCase();
            const unitB = (b.satminkal || b.lembaga || '').trim().toLowerCase();
            
            if (unitA < unitB) return -1;
            if (unitA > unitB) return 1;
            
            return (a.nama || '').localeCompare(b.nama || '');
        });
    }, [rawList, filters]);

    const recapData = React.useMemo(() => {
        const stats = {};
        filteredData.forEach(emp => {
            // Group by Satminkal (Induk), if empty use Lembaga (Unit Lain), otherwise fallback
            const key = emp.satminkal || emp.lembaga || 'Lain-lain / Tidak Ada';
            if (!stats[key]) {
                stats[key] = { 
                    name: key, 
                    L: 0, P: 0, 
                    Guru: 0, Tendik: 0, Pegawai: 0,
                    total: 0 
                };
            }
            stats[key].total += 1;
            if (emp.jenis_kelamin === 'L') stats[key].L += 1;
            if (emp.jenis_kelamin === 'P') stats[key].P += 1;
            const st = (emp.status || '').toLowerCase();
            if (st.includes('guru')) stats[key].Guru += 1;
            else if (st.includes('tenaga') || st.includes('tendik')) stats[key].Tendik += 1;
            else stats[key].Pegawai += 1;
        });
        return Object.values(stats).sort((a, b) => b.total - a.total); 
    }, [filteredData]);

    const globalStats = React.useMemo(() => {
        const stats = {
            total: filteredData.length,
            L: 0, P: 0,
            Guru: 0, Tendik: 0, Pegawai: 0
        };
        filteredData.forEach(emp => {
            if (emp.jenis_kelamin === 'L') stats.L++;
            if (emp.jenis_kelamin === 'P') stats.P++;
            const st = (emp.status || '').toLowerCase();
            if (st.includes('guru')) stats.Guru++;
            else if (st.includes('tenaga') || st.includes('tendik')) stats.Tendik++;
            else stats.Pegawai++;
        });
        return stats;
    }, [filteredData]);

    const handlePrint = () => {
        window.print();
    };

    const handleResetFilter = () => {
        setFilters({ search: '', satminkal: '', gender: '', status: '', collectionStatus: '' });
    };

    const toggleSelection = (id) => {
        setSelectedIds(prev => 
            prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
        );
    };

    const handleManualMerge = async () => {
        if (selectedIds.length < 2) {
            Swal.fire("Pilih Minimal 2 Data", "Silakan pilih setidaknya dua data pegawai untuk digabungkan.", "info");
            return;
        }

        const selectedEmployees = rawList.filter(e => selectedIds.includes(e.id));
        const inputOptions = {};
        selectedEmployees.forEach(emp => {
            inputOptions[emp.id] = `${emp.nama} (${emp.satminkal}) - ${emp.nik || 'No NIK'}`;
        });

        const { value: masterId } = await Swal.fire({
            title: 'Pilih Data Utama (Master)',
            text: 'Data ini akan dipertahankan, data lainnya akan digabungkan ke sini.',
            input: 'radio',
            inputOptions: inputOptions,
            inputValue: selectedEmployees[0].id,
            showCancelButton: true,
            confirmButtonText: 'Gabungkan',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#0f766e',
            customClass: { input: 'text-sm text-left mx-auto' }
        });

        if (!masterId) return;

        const master = selectedEmployees.find(e => e.id === masterId);
        const secondaries = selectedEmployees.filter(e => e.id !== masterId);

        try {
            setLoading(true);
            const client = window.SupabaseUtils.getClient();
            let allLocations = new Set();
            
            if (master.lembaga) master.lembaga.split(',').forEach(l => allLocations.add(l.trim()));
            if (master.satminkal) allLocations.add(master.satminkal.trim());

            secondaries.forEach(sec => {
                if (sec.satminkal) allLocations.add(sec.satminkal.trim());
                if (sec.lembaga) sec.lembaga.split(',').forEach(l => allLocations.add(l.trim()));
            });

            if (master.satminkal) allLocations.delete(master.satminkal.trim());

            const mergedLembagaStr = Array.from(allLocations).filter(Boolean).join(', ');

            const { error: updateError } = await client
                .from('employees')
                .update({ lembaga: mergedLembagaStr, is_verified_unique: true })
                .eq('id', master.id);
            if (updateError) throw updateError;

            const secondaryIds = secondaries.map(s => s.id);
            const { error: deleteError } = await client
                .from('employees')
                .delete()
                .in('id', secondaryIds);
            if (deleteError) throw deleteError;

            Swal.fire({
                icon: 'success',
                title: 'Berhasil Digabungkan',
                text: `${secondaries.length} data telah digabungkan ke "${master.nama}".`,
                timer: 1500,
                showConfirmButton: false
            });
            setSelectedIds([]);
            fetchData(); 
        } catch (err) {
            Swal.fire("Error", window.SupabaseUtils.formatError(err), "error");
            setLoading(false);
        }
    };

    const handleExportExcel = () => {
        try {
            const wb = XLSX.utils.book_new();
            const rekapHeader = ["No", "Satminkal / Unit Kerja", "Guru", "Tendik", "Pegawai", "Laki-laki", "Perempuan", "Total"];
            const rekapRows = recapData.map((row, i) => [
                i + 1, row.name, row.Guru, row.Tendik, row.Pegawai, row.L, row.P, row.total
            ]);
            rekapRows.push(["", "TOTAL KESELURUHAN", globalStats.Guru, globalStats.Tendik, globalStats.Pegawai, globalStats.L, globalStats.P, globalStats.total]);
            
            const wsRekap = XLSX.utils.aoa_to_sheet([rekapHeader, ...rekapRows]);
            wsRekap['!cols'] = [{wch: 5}, {wch: 35}, {wch: 8}, {wch: 8}, {wch: 8}, {wch: 8}, {wch: 8}, {wch: 10}];
            XLSX.utils.book_append_sheet(wb, wsRekap, "Rekapitulasi");

            const detailHeader = ["No", "Satminkal / Unit", "Nama Lengkap", "NIK", "Jenis Kelamin", "Jabatan", "Status", "Status Ambil", "Waktu Ambil"];
            const detailRows = filteredData.map((emp, i) => [
                i + 1, 
                emp.satminkal || emp.lembaga || '-',
                emp.nama, 
                emp.nik, 
                emp.jenis_kelamin, 
                emp.jabatan, 
                emp.status,
                emp.is_parcel_collected ? "SUDAH" : "BELUM",
                emp.collected_at ? new Date(emp.collected_at).toLocaleString('id-ID') : "-"
            ]);
            const wsDetail = XLSX.utils.aoa_to_sheet([detailHeader, ...detailRows]);
            wsDetail['!cols'] = [{wch: 5}, {wch: 30}, {wch: 30}, {wch: 20}, {wch: 10}, {wch: 20}, {wch: 15}, {wch: 15}, {wch: 25}];
            XLSX.utils.book_append_sheet(wb, wsDetail, "Data Detail");

            const dateStr = new Date().toISOString().split('T')[0];
            XLSX.writeFile(wb, `Laporan_Parsel_PP_Karangasem_${dateStr}.xlsx`);
            
            Swal.fire({ icon: 'success', title: 'Export Berhasil', text: 'File Excel telah diunduh.', timer: 1500, showConfirmButton: false });
        } catch (error) {
            console.error(error);
            Swal.fire("Gagal Export", "Terjadi kesalahan saat membuat file Excel.", "error");
        }
    };

    const handleExportPDF = () => {
        try {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();
            
            doc.setFontSize(14);
            doc.text("LAPORAN PENERIMA PARSEL TAHUNAN", 105, 15, { align: "center" });
            doc.setFontSize(12);
            doc.text("PONDOK PESANTREN KARANGASEM PACIRAN", 105, 22, { align: "center" });
            
            doc.setFontSize(10);
            doc.setFont("helvetica", "italic");
            const dateStr = new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
            doc.text(`Dicetak pada: ${dateStr}`, 105, 28, { align: "center" });

            // -- Rekapitulasi Removed from PDF --

            doc.setFont("helvetica", "bold");
            doc.text("Daftar Detail Penerima", 14, 40);

            doc.autoTable({
                startY: 45,
                head: [['No', 'Satminkal / Unit', 'Nama Penerima', 'NIK', 'L/P', 'Tanda Tangan']],
                body: filteredData.map((emp, i) => [
                    i + 1, 
                    emp.satminkal || emp.lembaga || '-',
                    emp.nama + (emp.jabatan ? `\n(${emp.jabatan})` : ''), 
                    emp.nik || '-', 
                    emp.jenis_kelamin, 
                    ''
                ]),
                theme: 'grid',
                styles: { fontSize: 8, cellPadding: 2, valign: 'middle' },
                headStyles: { fillColor: [15, 118, 110] },
                columnStyles: { 
                    0: { halign: 'center', cellWidth: 10 },
                    1: { cellWidth: 40 }, // Satminkal
                    3: { halign: 'center', cellWidth: 25 }, // NIK
                    4: { halign: 'center', cellWidth: 10 }, // L/P
                    5: { cellWidth: 30 } // TTD
                },
            });

            let lastY = doc.lastAutoTable.finalY;
            const pageHeight = doc.internal.pageSize.height;
            if (lastY + 40 > pageHeight) {
                doc.addPage();
                lastY = 20;
            } else {
                lastY += 20;
            }

            doc.setFont("helvetica", "normal");
            doc.text("Paciran, " + new Date().toLocaleDateString('id-ID', { month: 'long', year: 'numeric' }), 140, lastY);
            doc.text("Ketua Panitia,", 140, lastY + 6);
            doc.text("( ........................................... )", 140, lastY + 30);

            doc.save(`Laporan_Parsel_${new Date().toISOString().split('T')[0]}.pdf`);
        } catch (error) {
            Swal.fire("Gagal Export PDF", "Pastikan library jsPDF termuat dengan benar.", "error");
        }
    };

    const handlePrintCouponsClick = () => {
        let dataToPrint = [];

        if (selectedIds.length > 0) {
            // Priority: Use rawList to find selected items even if they are currently filtered out
            dataToPrint = rawList.filter(d => selectedIds.includes(d.id));
        } else {
            // Fallback: Use currently filtered visible data
            dataToPrint = filteredData;
        }

        if (dataToPrint.length === 0) {
            Swal.fire("Data Kosong", "Tidak ada data untuk dicetak.", "warning");
            return;
        }
        
        setCouponData(dataToPrint);
        setShowCouponModal(true);
    };


    if (error) {
        return (
            <div className="p-8">
                <div className="bg-red-50 text-red-600 p-4 rounded border border-red-200">
                    <h3 className="font-bold">Gagal Memuat Laporan</h3>
                    <p>{error}</p>
                </div>
            </div>
        );
    }

    return (
        <div className="p-4 md:p-8" data-name="parcel-report" data-file="components/ParcelReport.js">
            <div className="flex flex-col xl:flex-row justify-between items-start xl:items-end mb-4 print:hidden gap-4">
                <div>
                    <h2 className="text-2xl font-bold text-gray-800">Laporan Penerima Parsel</h2>
                    <p className="text-gray-500 mt-1">Laporan otomatis 1 NIK = 1 Parsel. Gunakan filter untuk melihat data spesifik.</p>
                </div>
                
                <div className="flex flex-wrap gap-2 items-center">
                    <button
                        onClick={() => {
                            setIsSelectionMode(!isSelectionMode);
                            setSelectedIds([]); 
                        }}
                        className={`px-4 py-2 rounded flex items-center gap-2 transition-colors shadow text-sm border ${
                            isSelectionMode 
                            ? 'bg-teal-100 text-teal-800 border-teal-300 font-bold' 
                            : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'
                        }`}
                    >
                        <div className={`icon-${isSelectionMode ? 'check-square' : 'check-square'} text-lg`}></div>
                        <span className="hidden sm:inline">{isSelectionMode ? 'Batal Pilih' : 'Pilih Manual'}</span>
                    </button>

                    <div className="h-6 w-px bg-gray-300 mx-1 hidden sm:block"></div>

                    <button 
                        onClick={handlePrintCouponsClick}
                        className="bg-indigo-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-indigo-700 transition-colors shadow relative"
                    >
                        <div className="icon-ticket text-lg"></div>
                        <span className="hidden sm:inline">
                            {selectedIds.length > 0 ? `Cetak (${selectedIds.length})` : 'Cetak Semua Kupon'}
                        </span>
                        {selectedIds.length > 0 && (
                            <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold w-5 h-5 flex items-center justify-center rounded-full border-2 border-white">
                                {selectedIds.length}
                            </span>
                        )}
                    </button>

                    <button onClick={handleExportExcel} className="bg-green-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-green-700 transition-colors shadow">
                        <div className="icon-file-spreadsheet text-lg"></div>
                        <span className="hidden sm:inline">Excel</span>
                    </button>
                    <button onClick={handleExportPDF} className="bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-red-700 transition-colors shadow">
                        <div className="icon-file-text text-lg"></div>
                        <span className="hidden sm:inline">PDF</span>
                    </button>
                    <button onClick={handlePrint} className="bg-gray-800 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-gray-900 transition-colors shadow">
                        <div className="icon-printer text-lg"></div>
                        <span className="hidden sm:inline">Cetak</span>
                    </button>
                </div>
            </div>

            {/* Coupon Modal - Replaced Inline with Component */}
            <CouponPrintModal 
                isOpen={showCouponModal} 
                onClose={() => setShowCouponModal(false)}
                data={couponData}
            />

            {isSelectionMode && selectedIds.length > 0 && (
                <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 bg-gray-900 text-white px-6 py-3 rounded-full shadow-2xl flex items-center gap-4 animate-slide-up print:hidden">
                    <div className="text-sm font-medium">
                        <span className="text-teal-400 font-bold">{selectedIds.length}</span> data dipilih
                    </div>
                    <div className="h-4 w-px bg-gray-700"></div>
                    
                    {/* Action: Merge (Only show if multiple selected) */}
                    <button 
                        onClick={handleManualMerge}
                        disabled={selectedIds.length < 2}
                        className={`flex items-center gap-2 px-3 py-1.5 rounded transition-colors ${
                            selectedIds.length < 2 
                            ? 'bg-gray-800 text-gray-500' 
                            : 'bg-orange-600 hover:bg-orange-700 text-white font-bold'
                        }`}
                        title="Gabungkan data duplikat"
                    >
                        <div className="icon-git-merge text-sm"></div>
                        <span className="hidden sm:inline">Gabungkan</span>
                    </button>

                    <button 
                        onClick={handlePrintCouponsClick}
                        className="flex items-center gap-2 px-3 py-1.5 rounded transition-colors bg-indigo-600 hover:bg-indigo-700 text-white font-bold"
                    >
                        <div className="icon-ticket text-sm"></div>
                        Cetak Kupon
                    </button>
                    
                    <button 
                        onClick={() => setSelectedIds([])}
                        className="text-gray-400 hover:text-white border-l border-gray-700 pl-3"
                        title="Batalkan Pilihan"
                    >
                        <div className="icon-x text-lg"></div>
                    </button>
                </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 print:hidden">
                <div className="bg-white p-4 rounded-lg shadow border-l-4 border-teal-500 flex items-center justify-between">
                    <div>
                        <div className="text-gray-500 text-xs font-bold uppercase">Total Parsel</div>
                        <div className="text-2xl font-bold text-gray-800">{globalStats.total}</div>
                    </div>
                    <div className="bg-teal-50 p-2 rounded-full">
                        <div className="icon-gift text-teal-600 text-xl"></div>
                    </div>
                </div>
                <div className="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500 flex items-center justify-between">
                    <div>
                        <div className="text-gray-500 text-xs font-bold uppercase">Laki-laki</div>
                        <div className="text-2xl font-bold text-gray-800">{globalStats.L}</div>
                    </div>
                    <div className="bg-blue-50 p-2 rounded-full">
                        <div className="icon-user text-blue-600 text-xl"></div>
                    </div>
                </div>
                <div className="bg-white p-4 rounded-lg shadow border-l-4 border-pink-500 flex items-center justify-between">
                    <div>
                        <div className="text-gray-500 text-xs font-bold uppercase">Perempuan</div>
                        <div className="text-2xl font-bold text-gray-800">{globalStats.P}</div>
                    </div>
                    <div className="bg-pink-50 p-2 rounded-full">
                        <div className="icon-user text-pink-600 text-xl"></div>
                    </div>
                </div>
            </div>

            <div className="bg-white rounded-lg shadow border border-gray-200 mb-6 print:hidden">
                <div 
                    className="p-4 flex justify-between items-center cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-200"
                    onClick={() => setShowFilters(!showFilters)}
                >
                    <div className="flex items-center gap-2 font-bold text-gray-700">
                        <div className="icon-filter text-lg"></div>
                        Filter Data Laporan
                        {(filters.search || filters.satminkal || filters.gender || filters.status || filters.collectionStatus) && (
                            <span className="bg-teal-100 text-teal-800 text-xs px-2 py-0.5 rounded-full">Aktif</span>
                        )}
                    </div>
                    <div className={`icon-chevron-${showFilters ? 'up' : 'down'} text-gray-400`}></div>
                </div>
                
                {showFilters && (
                    <div className="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 animate-fade-in">
                        <div>
                            <label className="block text-xs font-bold text-gray-500 mb-1">Satminkal</label>
                            <select 
                                className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none"
                                value={filters.satminkal}
                                onChange={e => setFilters({...filters, satminkal: e.target.value})}
                            >
                                <option value="">Semua Lembaga</option>
                                {institutionList.map(inst => (
                                    <option key={inst} value={inst}>{inst}</option>
                                ))}
                            </select>
                        </div>
                        <div>
                            <label className="block text-xs font-bold text-gray-500 mb-1">Jenis Kelamin</label>
                            <select 
                                className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none"
                                value={filters.gender}
                                onChange={e => setFilters({...filters, gender: e.target.value})}
                            >
                                <option value="">Semua</option>
                                <option value="L">Laki-laki</option>
                                <option value="P">Perempuan</option>
                            </select>
                        </div>
                        <div>
                            <label className="block text-xs font-bold text-gray-500 mb-1">Status Kepegawaian</label>
                            <select 
                                className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none"
                                value={filters.status}
                                onChange={e => setFilters({...filters, status: e.target.value})}
                            >
                                <option value="">Semua</option>
                                <option value="Guru">Guru</option>
                                <option value="Tenaga Kependidikan">Tenaga Kependidikan</option>
                                <option value="Pegawai">Pegawai</option>
                            </select>
                        </div>
                        <div>
                            <label className="block text-xs font-bold text-gray-500 mb-1">Status Pengambilan</label>
                            <select 
                                className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none font-medium"
                                value={filters.collectionStatus}
                                onChange={e => setFilters({...filters, collectionStatus: e.target.value})}
                            >
                                <option value="">Semua</option>
                                <option value="collected">✅ Sudah Diambil</option>
                                <option value="uncollected">⏳ Belum Diambil</option>
                            </select>
                        </div>
                        
                        <div className="lg:col-span-3 flex justify-end items-end">
                            <button onClick={handleResetFilter} className="text-sm text-red-600 hover:text-red-800 flex items-center gap-1 mb-1">
                                <div className="icon-x-circle text-base"></div>
                                Reset Filter
                            </button>
                        </div>
                    </div>
                )}
            </div>

            <div className="bg-white shadow-sm rounded-lg overflow-hidden border border-gray-200 print:shadow-none print:border-none print:overflow-visible">
                <div className="hidden print:flex flex-col items-center text-center border-b-2 border-black pb-4 mb-6 pt-4 relative">
                    <img 
                        src={window.AppAssets.logo} 
                        alt="Logo" 
                        className="w-20 h-20 object-contain absolute left-0 top-2" 
                    />
                    <h1 className="text-xl font-bold uppercase tracking-wide">LAPORAN PENERIMA PARSEL TAHUN {year}</h1>
                    <h2 className="text-lg font-bold uppercase text-gray-800">PONDOK PESANTREN KARANGASEM PACIRAN</h2>
                    <p className="text-sm mt-2 text-gray-600 italic">
                        Dicetak pada: {new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                    </p>
                </div>

                {loading ? (
                    <div className="p-12 text-center text-gray-500">
                        <div className="inline-block animate-spin w-8 h-8 border-4 border-teal-500 border-t-transparent rounded-full mb-3"></div>
                        <div>Memproses data...</div>
                    </div>
                ) : (
                    <>
                        <div className="p-6 pb-2 print:hidden">
                            <div className="flex justify-between items-center mb-3 border-b border-gray-200 pb-2">
                                <h3 className="text-lg font-bold text-gray-800">
                                    A. Rekapitulasi Penerima {filters.satminkal ? `(${filters.satminkal})` : ''}
                                </h3>
                                <button 
                                    onClick={() => setShowRecap(!showRecap)}
                                    className="text-gray-500 hover:text-teal-600 transition-colors flex items-center gap-1 text-sm bg-gray-100 px-2 py-1 rounded"
                                >
                                    <span className="text-xs">{showRecap ? 'Sembunyikan' : 'Tampilkan'}</span>
                                    <div className={`icon-chevron-${showRecap ? 'up' : 'down'} text-lg`}></div>
                                </button>
                            </div>
                            
                            {showRecap && (
                                <div className="overflow-x-auto animate-fade-in">
                                    <table className="w-full text-sm text-left border-collapse border border-gray-300 mb-6">
                                    <thead className="bg-gray-100 print:bg-gray-100 font-bold text-gray-700 text-xs uppercase">
                                        <tr>
                                            <th rowSpan="2" className="border border-gray-300 print:border-black px-2 py-2 w-10 text-center align-middle">No</th>
                                            <th rowSpan="2" className="border border-gray-300 print:border-black px-4 py-2 align-middle">Satminkal / Unit Kerja</th>
                                            <th colSpan="3" className="border border-gray-300 print:border-black px-2 py-1 text-center bg-gray-200 print:bg-gray-200">Status</th>
                                            <th colSpan="2" className="border border-gray-300 print:border-black px-2 py-1 text-center bg-gray-200 print:bg-gray-200">Jenis Kelamin</th>
                                            <th rowSpan="2" className="border border-gray-300 print:border-black px-4 py-2 text-center align-middle w-24 bg-gray-100 print:bg-gray-100">Total</th>
                                        </tr>
                                        <tr>
                                            <th className="border border-gray-300 print:border-black px-2 py-1 text-center w-16">Guru</th>
                                            <th className="border border-gray-300 print:border-black px-2 py-1 text-center w-16">Tendik</th>
                                            <th className="border border-gray-300 print:border-black px-2 py-1 text-center w-16">Pegawai</th>
                                            <th className="border border-gray-300 print:border-black px-2 py-1 text-center w-16">L</th>
                                            <th className="border border-gray-300 print:border-black px-2 py-1 text-center w-16">P</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {recapData.map((row, idx) => (
                                            <tr key={idx} className="hover:bg-gray-50 print:hover:bg-white text-xs sm:text-sm">
                                                <td className="border border-gray-300 print:border-black px-2 py-2 text-center">{idx + 1}</td>
                                                <td className="border border-gray-300 print:border-black px-4 py-2 font-medium truncate max-w-[200px]">{row.name}</td>
                                                <td className="border border-gray-300 print:border-black px-2 py-2 text-center">{row.Guru}</td>
                                                <td className="border border-gray-300 print:border-black px-2 py-2 text-center">{row.Tendik}</td>
                                                <td className="border border-gray-300 print:border-black px-2 py-2 text-center">{row.Pegawai}</td>
                                                <td className="border border-gray-300 print:border-black px-2 py-2 text-center font-medium text-blue-800 print:text-black">{row.L}</td>
                                                <td className="border border-gray-300 print:border-black px-2 py-2 text-center font-medium text-pink-800 print:text-black">{row.P}</td>
                                                <td className="border border-gray-300 print:border-black px-4 py-2 text-center font-bold bg-gray-50 print:bg-white">{row.total}</td>
                                            </tr>
                                        ))}
                                        <tr className="bg-gray-800 text-white print:bg-gray-300 print:text-black font-bold text-xs sm:text-sm">
                                            <td colSpan="2" className="border border-gray-700 print:border-black px-4 py-2 text-right uppercase tracking-wider">Total Keseluruhan</td>
                                            <td className="border border-gray-700 print:border-black px-2 py-2 text-center">{globalStats.Guru}</td>
                                            <td className="border border-gray-700 print:border-black px-2 py-2 text-center">{globalStats.Tendik}</td>
                                            <td className="border border-gray-700 print:border-black px-2 py-2 text-center">{globalStats.Pegawai}</td>
                                            <td className="border border-gray-700 print:border-black px-2 py-2 text-center">{globalStats.L}</td>
                                            <td className="border border-gray-700 print:border-black px-2 py-2 text-center">{globalStats.P}</td>
                                            <td className="border border-gray-700 print:border-black px-4 py-2 text-center text-base">{globalStats.total}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            )}
                        </div>
                        
                        <div className="p-6 pt-0 print:px-0">
                            <h3 className="text-lg font-bold text-gray-800 mb-3 border-b border-gray-200 pb-2 print:border-black flex justify-between items-center">
                                <span><span className="print:hidden">B. </span>Daftar Detail Penerima</span>
                            </h3>

                            {/* Main Search Bar - Moved Here */}
                            <div className="mb-4 print:hidden">
                                <div className="relative max-w-md">
                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <div className="icon-search text-gray-400 text-lg"></div>
                                    </div>
                                    <input
                                        type="text"
                                        className="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 shadow-sm transition-shadow text-sm"
                                        placeholder="Cari nama pegawai atau NIK..."
                                        value={filters.search}
                                        onChange={e => setFilters({...filters, search: e.target.value})}
                                    />
                                    {filters.search && (
                                        <button 
                                            onClick={() => setFilters({...filters, search: ''})}
                                            className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-red-500 transition-colors"
                                        >
                                            <div className="icon-x-circle text-lg"></div>
                                        </button>
                                    )}
                                </div>
                            </div>

                            {/* Desktop Table View */}
                            <div className="hidden md:block overflow-x-auto">
                                <table className="w-full text-sm text-left border-collapse border border-gray-300 print:border-black">
                                    <thead className="bg-gray-100 print:bg-gray-100 font-bold text-gray-700">
                                        <tr>
                                            {isSelectionMode && (
                                                <th className="border border-gray-300 px-2 py-2 w-10 text-center print:hidden bg-teal-50 text-teal-800 cursor-pointer hover:bg-teal-100" onClick={() => {
                                                    if (selectedIds.length === filteredData.length) setSelectedIds([]);
                                                    else setSelectedIds(filteredData.map(d => d.id));
                                                }}>
                                                    <div className={`icon-${selectedIds.length === filteredData.length && filteredData.length > 0 ? 'check-square' : 'square'}`}></div>
                                                </th>
                                            )}
                                            <th className="border border-gray-300 print:border-black px-4 py-2 w-12 text-center">No</th>
                                            <th className="border border-gray-300 print:border-black px-4 py-2">Nama Penerima</th>
                                            <th className="border border-gray-300 print:border-black px-4 py-2 w-20 text-center">L/P</th>
                                            <th className="border border-gray-300 print:border-black px-4 py-2">Satminkal</th>
                                            <th className="border border-gray-300 px-4 py-2 w-32 text-center print:hidden">Status Ambil</th>
                                            <th className="border border-gray-300 print:border-black px-4 py-2 w-32 text-center">Tanda Tangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {filteredData.length === 0 ? (
                                            <tr>
                                                <td colSpan={isSelectionMode ? 7 : 6} className="border border-gray-300 print:border-black px-6 py-8 text-center text-gray-500 italic">
                                                    Tidak ada data yang sesuai filter.
                                                </td>
                                            </tr>
                                        ) : (
                                            filteredData.map((emp, index) => (
                                                <tr 
                                                    key={emp.id} 
                                                    className={`hover:bg-gray-50 print:hover:bg-white break-inside-avoid ${
                                                        selectedIds.includes(emp.id) ? 'bg-teal-50' : ''
                                                    }`}
                                                    onClick={() => isSelectionMode && toggleSelection(emp.id)}
                                                    style={{cursor: isSelectionMode ? 'pointer' : 'default'}}
                                                >
                                                    {isSelectionMode && (
                                                        <td className="border border-gray-300 px-2 py-2 text-center print:hidden relative">
                                                            <div className={`w-5 h-5 border-2 rounded mx-auto flex items-center justify-center transition-all ${
                                                                selectedIds.includes(emp.id) 
                                                                ? 'bg-teal-600 border-teal-600' 
                                                                : 'border-gray-300 bg-white'
                                                            }`}>
                                                                {selectedIds.includes(emp.id) && (
                                                                    <div className="icon-check text-white text-xs"></div>
                                                                )}
                                                            </div>
                                                        </td>
                                                    )}

                                                    <td className="border border-gray-300 print:border-black px-4 py-2 text-center text-gray-500">{index + 1}</td>
                                                    <td className="border border-gray-300 print:border-black px-4 py-2">
                                                        <div className="font-bold text-gray-900">{emp.nama}</div>
                                                        <div className="text-xs text-gray-500 print:text-gray-600">
                                                            {emp.jabatan} 
                                                            <span className="font-mono ml-1 opacity-75">
                                                                ({emp.nik ? emp.nik : <span className="text-red-400 italic">Tanpa NIK</span>})
                                                            </span>
                                                        </div>
                                                    </td>
                                                    <td className="border border-gray-300 print:border-black px-4 py-2 text-center">{emp.jenis_kelamin}</td>
                                                    <td className="border border-gray-300 print:border-black px-4 py-2 text-gray-600 print:text-black">{emp.satminkal}</td>
                                                    <td className="border border-gray-300 px-4 py-2 text-center print:hidden">
                                                        {emp.is_parcel_collected ? (
                                                            <div className="flex flex-col items-center">
                                                                <span className="bg-green-100 text-green-800 text-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
                                                                    <div className="icon-check text-xs"></div> Sudah
                                                                </span>
                                                                {emp.collected_at && (
                                                                    <span className="text-[10px] text-gray-500 mt-1">
                                                                        {new Date(emp.collected_at).toLocaleDateString('id-ID', {day: 'numeric', month: 'numeric'})}
                                                                        {' '}
                                                                        {new Date(emp.collected_at).toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'})}
                                                                    </span>
                                                                )}
                                                            </div>
                                                        ) : (
                                                            <span className="bg-gray-100 text-gray-500 text-xs font-bold px-2 py-0.5 rounded-full">
                                                                Belum
                                                            </span>
                                                        )}
                                                    </td>
                                                    <td className="border border-gray-300 print:border-black px-4 py-2 text-gray-300 print:text-black text-left align-bottom h-12 text-xs">
                                                        {index % 2 === 0 ? (
                                                            <span>{index + 1}. .........</span>
                                                        ) : (
                                                            <div className="text-right">......... .{index + 1}</div>
                                                        )}
                                                    </td>
                                                </tr>
                                            ))
                                        )}
                                    </tbody>
                                </table>
                            </div>

                            {/* Mobile Card View */}
                            <div className="md:hidden space-y-3 print:hidden">
                                {isSelectionMode && filteredData.length > 0 && (
                                     <div 
                                        onClick={() => {
                                            if (selectedIds.length === filteredData.length) setSelectedIds([]);
                                            else setSelectedIds(filteredData.map(d => d.id));
                                        }}
                                        className="bg-teal-50 border border-teal-200 p-3 rounded-lg flex items-center gap-3 cursor-pointer mb-2"
                                     >
                                         <div className={`w-5 h-5 border-2 rounded flex items-center justify-center transition-all ${
                                            selectedIds.length === filteredData.length && filteredData.length > 0
                                            ? 'bg-teal-600 border-teal-600' 
                                            : 'border-gray-400 bg-white'
                                        }`}>
                                            {selectedIds.length === filteredData.length && filteredData.length > 0 && (
                                                <div className="icon-check text-white text-xs"></div>
                                            )}
                                        </div>
                                        <span className="text-sm font-bold text-teal-800">
                                            {selectedIds.length === filteredData.length ? 'Batalkan Semua' : 'Pilih Semua'}
                                        </span>
                                     </div>
                                )}

                                {filteredData.length === 0 ? (
                                    <div className="p-8 text-center text-gray-500 border border-dashed border-gray-300 rounded-lg">
                                        Tidak ada data yang sesuai filter.
                                    </div>
                                ) : (
                                    filteredData.map((emp, index) => (
                                        <div 
                                            key={emp.id} 
                                            className={`bg-white rounded-lg shadow-sm border p-4 ${selectedIds.includes(emp.id) ? 'border-teal-500 ring-1 ring-teal-500 bg-teal-50/50' : 'border-gray-200'}`}
                                            onClick={() => isSelectionMode && toggleSelection(emp.id)}
                                        >
                                            <div className="flex justify-between items-start mb-2">
                                                <div className="flex items-start gap-3">
                                                    <span className="bg-gray-100 text-gray-500 w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold shrink-0 mt-0.5">{index + 1}</span>
                                                    <div>
                                                        <div className="font-bold text-gray-800 leading-tight">{emp.nama}</div>
                                                        <div className="text-xs text-gray-500 font-mono mt-0.5">{emp.nik || 'Tanpa NIK'}</div>
                                                    </div>
                                                </div>
                                                
                                                {isSelectionMode ? (
                                                     <div className={`w-6 h-6 border-2 rounded-full flex items-center justify-center transition-all shrink-0 ${
                                                        selectedIds.includes(emp.id) 
                                                        ? 'bg-teal-600 border-teal-600' 
                                                        : 'border-gray-300 bg-white'
                                                    }`}>
                                                        {selectedIds.includes(emp.id) && (
                                                            <div className="icon-check text-white text-xs"></div>
                                                        )}
                                                    </div>
                                                ) : (
                                                    <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
                                                        emp.jenis_kelamin === 'L' ? 'bg-blue-50 text-blue-700' : 'bg-pink-50 text-pink-700'
                                                    }`}>
                                                        {emp.jenis_kelamin}
                                                    </span>
                                                )}
                                            </div>

                                            <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
                                                <div className="bg-gray-50 p-2 rounded border border-gray-100">
                                                    <span className="block text-gray-400 text-[10px] uppercase font-bold mb-0.5">Satminkal</span>
                                                    <span className="font-medium text-gray-700 block truncate">{emp.satminkal || '-'}</span>
                                                </div>
                                                <div className={`p-2 rounded border ${emp.is_parcel_collected ? 'bg-green-50 border-green-100' : 'bg-gray-50 border-gray-100'}`}>
                                                    <span className="block text-gray-400 text-[10px] uppercase font-bold mb-0.5">Status</span>
                                                    {emp.is_parcel_collected ? (
                                                         <span className="text-green-700 font-bold flex items-center gap-1">
                                                            <div className="icon-check text-[10px]"></div> Diambil
                                                         </span>
                                                    ) : (
                                                        <span className="text-gray-500 font-medium">Belum</span>
                                                    )}
                                                </div>
                                            </div>
                                            
                                            {emp.is_parcel_collected && emp.collected_at && (
                                                <div className="mt-2 text-[10px] text-gray-400 text-right">
                                                    {new Date(emp.collected_at).toLocaleDateString('id-ID', {day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit'})}
                                                </div>
                                            )}
                                        </div>
                                    ))
                                )}
                            </div>
                        </div>

                        <div className="hidden print:block mt-12 px-8 break-inside-avoid">
                            <div className="flex justify-end">
                                <div className="text-center w-64">
                                    <div className="mb-20">
                                        Paciran, {new Date().toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}
                                        <br/>
                                        Ketua Panitia,
                                    </div>
                                    <div className="border-b border-black w-full mx-auto"></div>
                                    <div className="mt-1 font-bold">( ........................................... )</div>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
}