// School Data Table Component
const SchoolDataTable = ({ data = [], title, onDetailClick, onFiltersChange, enableFilters = true, globalFilters, onResetFilters }) => {
    const [search, setSearch] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 8;
    const uniqueKec = useMemo(() => ['Semua', ...new Set(data.map(d => d.kecamatan).sort())], [data]);

    // Use global filters if enabled, otherwise local search
    const activeSearch = globalFilters ? globalFilters.search : search;

    const handleSearchChange = (e) => {
        const val = e.target.value;
        if (globalFilters && onFiltersChange) onFiltersChange('search', val);
        else setSearch(val);
    };

    // If local filtering (modal), we filter 'data' based on local search
    // If global filtering (dashboard), 'data' is ALREADY filtered
    const filtered = useMemo(() => {
        if (globalFilters) return data; // Data already filtered by parent for main dashboard

        // Local filtering for modal
        return data.filter(d => {
            const matchS = d.sekolah.toLowerCase().includes(search.toLowerCase()) || d.npsn.includes(search);
            return matchS;
        });
    }, [data, search, globalFilters]);

    const pageCount = Math.ceil(filtered.length / itemsPerPage);
    const paginatedData = filtered.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

    useEffect(() => setCurrentPage(1), [data, search]);

    const exportToExcel = () => {
        const ws = XLSX.utils.json_to_sheet(filtered.map(d => ({ ...d, total_siswa: d.siswa_l + d.siswa_p + d.putus_l + d.putus_p + d.tdk_lanjut_l + d.tdk_lanjut_p })));
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Data");
        XLSX.writeFile(wb, "Data_Sekolah.xlsx");
    };

    return (
        <div className="bg-white rounded-3xl shadow-soft border border-slate-100 overflow-hidden h-full flex flex-col">
            <div className="p-8 border-b border-slate-100 bg-white flex flex-col lg:flex-row justify-between items-center gap-6">
                <h3 className="text-xl font-bold text-slate-800">{title || "Database Detail Sekolah"}</h3>
                {enableFilters && globalFilters && (
                    <div className="flex flex-wrap gap-3 w-full lg:w-auto">
                        <div className="relative flex-grow lg:flex-grow-0 lg:w-64">
                            <Icon name="Search" className="absolute left-4 top-3.5 text-slate-400" size={18} />
                            <input type="text" placeholder="Cari..." className="w-full pl-12 pr-4 py-3 rounded-xl bg-slate-50 border-none focus:ring-2 focus:ring-blue-100 text-sm" value={activeSearch} onChange={handleSearchChange} />
                        </div>
                        <select className="px-4 py-3 rounded-xl bg-slate-50 text-sm font-bold text-slate-600" value={globalFilters.kec} onChange={(e) => onFiltersChange('kec', e.target.value)}>
                            <option value="Semua">Semua Wilayah</option>
                            {uniqueKec.filter(k => k !== 'Semua').map(k => <option key={k} value={k}>{k}</option>)}
                        </select>
                        <select className="px-4 py-3 rounded-xl bg-slate-50 text-sm font-bold text-slate-600" value={globalFilters.jenjang} onChange={(e) => onFiltersChange('jenjang', e.target.value)}>
                            <option value="Semua">Semua Jenjang</option>
                            <option value="SD Sederajat">SD Sederajat</option>
                            <option value="SMP Sederajat">SMP Sederajat</option>
                        </select>
                        <select className="px-4 py-3 rounded-xl bg-slate-50 text-sm font-bold text-slate-600 border-none focus:ring-2 focus:ring-blue-100" value={globalFilters.status} onChange={(e) => onFiltersChange('status', e.target.value)}>
                            <option value="Semua">Semua Status</option>
                            <option value="Ada Putus">Ada Kasus Putus</option>
                            <option value="Ada Tdk Lanjut">Ada Kasus Tdk Lanjut</option>
                            <option value="Aman">Data Bersih (0 Kasus)</option>
                        </select>
                        <select className="px-4 py-3 rounded-xl bg-slate-50 text-sm font-bold text-slate-600 border-none focus:ring-2 focus:ring-blue-100" value={globalFilters.statusInput || 'Semua'} onChange={(e) => onFiltersChange('statusInput', e.target.value)}>
                            <option value="Semua">Semua Status Input</option>
                            <option value="Sudah Input">✓ Sudah Input</option>
                            <option value="Belum Input">⚠ Belum Input</option>
                        </select>
                        <button onClick={onResetFilters} className="px-4 py-3 bg-slate-100 text-slate-600 hover:bg-slate-200 rounded-xl font-bold text-sm flex items-center gap-2 transition-all" title="Reset Filter"><Icon name="RotateCcw" size={18} /></button>
                        <button onClick={exportToExcel} className="px-6 py-3 bg-emerald-50 text-emerald-600 hover:bg-emerald-100 rounded-xl font-bold text-sm flex items-center gap-2 transition-all"><Icon name="FileSpreadsheet" size={18} /> Export</button>
                    </div>
                )}
                {!enableFilters && (
                    <div className="flex gap-3"><button onClick={exportToExcel} className="px-6 py-3 bg-emerald-50 text-emerald-600 hover:bg-emerald-100 rounded-xl font-bold text-sm flex items-center gap-2 transition-all"><Icon name="FileSpreadsheet" size={18} /> Export Data Ini</button></div>
                )}
            </div>
            <div className="overflow-x-auto flex-1">
                <table className="w-full text-left border-collapse modern-table">
                    <thead className="bg-slate-50/80 text-slate-500 text-xs uppercase font-bold tracking-wider sticky top-0">
                        <tr>
                            <th className="p-6">Sekolah</th><th className="p-6">Jenjang</th><th className="p-6">Wilayah</th><th className="p-6 text-center bg-blue-50">Status Input</th>
                            <th className="p-6 text-center text-blue-600">Siswa L</th><th className="p-6 text-center text-pink-600">Siswa P</th>
                            <th className="p-6 text-center text-red-600">Putus L</th><th className="p-6 text-center text-red-600">Putus P</th>
                            <th className="p-6 text-center text-orange-600">Tdk Lanjut L</th><th className="p-6 text-center text-orange-600">Tdk Lanjut P</th>
                            <th className="p-6 text-center bg-red-50 text-red-700">% Putus</th><th className="p-6 text-center bg-orange-50 text-orange-700">% Tdk Lanjut</th>
                            <th className="p-6 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 text-sm text-slate-600">
                        {paginatedData.map(row => {
                            const totalSiswa = row.siswa_l + row.siswa_p + row.putus_l + row.putus_p + row.tdk_lanjut_l + row.tdk_lanjut_p;
                            const pctPutus = totalSiswa > 0 ? ((row.putus_l + row.putus_p) / totalSiswa * 100).toFixed(2) : '0.00';
                            const pctTdk = totalSiswa > 0 ? ((row.tdk_lanjut_l + row.tdk_lanjut_p) / totalSiswa * 100).toFixed(2) : '0.00';
                            return (
                                <tr key={row.id} className="group hover:bg-blue-50/30 transition-colors cursor-pointer" onClick={() => onDetailClick(row)}>
                                    <td className="p-6"><div className="font-bold text-slate-800 text-base">{row.sekolah}</div><div className="text-xs text-slate-400 mt-0.5">{row.npsn}</div></td>
                                    <td className="p-6"><span className="bg-slate-100 px-2 py-0.5 rounded font-bold text-xs">{row.jenjang}</span></td>
                                    <td className="p-6 font-medium">{row.kecamatan}</td>
                                    <td className="p-6 text-center">
                                        {row.status_input === 'Sudah Input' ? (
                                            <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-green-50 text-green-700 border border-green-200">
                                                ✓ Sudah Input
                                            </span>
                                        ) : (
                                            <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-yellow-50 text-yellow-700 border border-yellow-200">
                                                ⚠ Belum Input
                                            </span>
                                        )}
                                    </td>
                                    <td className="p-6 text-center font-bold text-blue-600 bg-blue-50/20">{row.siswa_l}</td>
                                    <td className="p-6 text-center font-bold text-pink-600 bg-pink-50/20">{row.siswa_p}</td>
                                    <td className="p-6 text-center font-bold text-red-600 bg-red-50/30">{row.putus_l || '-'}</td>
                                    <td className="p-6 text-center font-bold text-red-600 bg-red-50/30">{row.putus_p || '-'}</td>
                                    <td className="p-6 text-center font-bold text-orange-600 bg-orange-50/30">{row.tdk_lanjut_l || '-'}</td>
                                    <td className="p-6 text-center font-bold text-orange-600 bg-orange-50/30">{row.tdk_lanjut_p || '-'}</td>
                                    <td className="p-6 text-center font-extrabold text-red-700 bg-red-100/50">{pctPutus}%</td>
                                    <td className="p-6 text-center font-extrabold text-orange-700 bg-orange-100/50">{pctTdk}%</td>
                                    <td className="p-6 text-center"><button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg"><Icon name="ExternalLink" size={18} /></button></td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
            <div className="p-6 bg-slate-50 border-t border-slate-100 flex justify-center gap-2">
                <button onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="p-2 rounded-lg bg-white border disabled:opacity-50 hover:bg-slate-50"><Icon name="ChevronLeft" size={20} /></button>
                <span className="px-4 py-2 font-bold text-slate-600">Halaman {currentPage} dari {pageCount}</span>
                <button onClick={() => setCurrentPage(p => Math.min(pageCount, p + 1))} disabled={currentPage === pageCount} className="p-2 rounded-lg bg-white border disabled:opacity-50 hover:bg-slate-50"><Icon name="ChevronRight" size={20} /></button>
            </div>
        </div>
    );
};