// Modal Detail with Filters, Stats Cards, and Export
const ModalDetailWithFilters = ({ data = [], title, onDetailClick }) => {
    const [filters, setFilters] = useState({
        search: '',
        kec: 'Semua',
        jenjang: 'Semua',
        status: 'Semua'
    });
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 8;

    // Get unique values for filters
    const uniqueKec = useMemo(() => ['Semua', ...new Set(data.map(d => d.kecamatan).sort())], [data]);
    const uniqueJenjang = useMemo(() => {
        const jenjangSet = new Set(data.map(d => d.jenjang_group || d.jenjang));
        return ['Semua', ...Array.from(jenjangSet).sort()];
    }, [data]);

    // Apply filters
    const filteredData = useMemo(() => {
        return data.filter(d => {
            const matchS = d.sekolah.toLowerCase().includes(filters.search.toLowerCase()) || d.npsn.includes(filters.search);
            const matchK = filters.kec === 'Semua' || d.kecamatan === filters.kec;

            let matchJ = true;
            if (filters.jenjang === 'SD Sederajat') matchJ = d.jenjang_group === 'SD Sederajat';
            else if (filters.jenjang === 'SMP Sederajat') matchJ = d.jenjang_group === 'SMP Sederajat';
            else if (filters.jenjang !== 'Semua') matchJ = d.jenjang === filters.jenjang || d.jenjang_group === filters.jenjang;

            let matchSt = true;
            if (filters.status === 'Ada Putus') matchSt = (d.putus_l + d.putus_p) > 0;
            else if (filters.status === 'Ada Tdk Lanjut') matchSt = (d.tdk_lanjut_l + d.tdk_lanjut_p) > 0;
            else if (filters.status === 'Aman') matchSt = (d.putus_l + d.putus_p + d.tdk_lanjut_l + d.tdk_lanjut_p) === 0;

            return matchS && matchK && matchJ && matchSt;
        });
    }, [data, filters]);

    // Calculate statistics from filtered data
    const stats = useMemo(() => {
        const s = filteredData.reduce((acc, c) => ({
            sekolah: acc.sekolah + 1,
            sl: acc.sl + c.siswa_l,
            sp: acc.sp + c.siswa_p,
            pl: acc.pl + c.putus_l,
            pp: acc.pp + c.putus_p,
            tl: acc.tl + c.tdk_lanjut_l,
            tp: acc.tp + c.tdk_lanjut_p
        }), { sekolah: 0, sl: 0, sp: 0, pl: 0, pp: 0, tl: 0, tp: 0 });

        const total_siswa = s.sl + s.sp + s.pl + s.pp + s.tl + s.tp;
        const total_putus = s.pl + s.pp;
        const total_tdk = s.tl + s.tp;
        const total_l = s.sl + s.pl + s.tl;
        const total_p = s.sp + s.pp + s.tp;

        return {
            ...s,
            total_siswa,
            total_putus,
            total_tdk,
            pct_putus: total_siswa ? ((total_putus / total_siswa) * 100).toFixed(2) : 0,
            pct_tdk: total_siswa ? ((total_tdk / total_siswa) * 100).toFixed(2) : 0,
            rate_pl: total_l ? ((s.pl / total_l) * 100).toFixed(2) : 0,
            rate_pp: total_p ? ((s.pp / total_p) * 100).toFixed(2) : 0,
            rate_tl: total_l ? ((s.tl / total_l) * 100).toFixed(2) : 0,
            rate_tp: total_p ? ((s.tp / total_p) * 100).toFixed(2) : 0,
            share_sl: total_siswa ? ((s.sl / total_siswa) * 100).toFixed(1) : 0,
            share_sp: total_siswa ? ((s.sp / total_siswa) * 100).toFixed(1) : 0,
        };
    }, [filteredData]);

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

    useEffect(() => setCurrentPage(1), [filters]);

    const updateFilter = (key, val) => {
        setFilters(prev => ({ ...prev, [key]: val }));
    };

    const resetFilters = () => {
        setFilters({ search: '', kec: 'Semua', jenjang: 'Semua', status: 'Semua' });
    };

    const exportToExcel = () => {
        const ws = XLSX.utils.json_to_sheet(filteredData.map(d => ({
            Sekolah: d.sekolah,
            NPSN: d.npsn,
            Jenjang: d.jenjang,
            Kecamatan: d.kecamatan,
            'Siswa L': d.siswa_l,
            'Siswa P': d.siswa_p,
            'Putus L': d.putus_l,
            'Putus P': d.putus_p,
            'Tdk Lanjut L': d.tdk_lanjut_l,
            'Tdk Lanjut P': d.tdk_lanjut_p,
            '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");
        const fileName = `${title.replace(/\s+/g, '_')}_${new Date().toISOString().split('T')[0]}.xlsx`;
        XLSX.writeFile(wb, fileName);
    };

    return (
        <div className="space-y-6">
            {/* Statistics Cards */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-4 border border-blue-200">
                    <div className="flex items-center gap-2 mb-2">
                        <Icon name="School" size={20} className="text-blue-600" />
                        <span className="text-xs font-bold text-blue-600 uppercase">Total Sekolah</span>
                    </div>
                    <div className="text-3xl font-extrabold text-blue-900">{stats.sekolah}</div>
                </div>
                <div className="bg-gradient-to-br from-red-50 to-red-100 rounded-2xl p-4 border border-red-200">
                    <div className="flex items-center gap-2 mb-2">
                        <Icon name="AlertTriangle" size={20} className="text-red-600" />
                        <span className="text-xs font-bold text-red-600 uppercase">Putus Sekolah</span>
                    </div>
                    <div className="text-3xl font-extrabold text-red-900">{stats.total_putus}</div>
                    <div className="text-xs text-red-600 font-bold mt-1">{stats.pct_putus}%</div>
                </div>
                <div className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-4 border border-orange-200">
                    <div className="flex items-center gap-2 mb-2">
                        <Icon name="Users" size={20} className="text-orange-600" />
                        <span className="text-xs font-bold text-orange-600 uppercase">Tidak Lanjut</span>
                    </div>
                    <div className="text-3xl font-extrabold text-orange-900">{stats.total_tdk}</div>
                    <div className="text-xs text-orange-600 font-bold mt-1">{stats.pct_tdk}%</div>
                </div>
                <div className="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-2xl p-4 border border-emerald-200">
                    <div className="flex items-center gap-2 mb-2">
                        <Icon name="LayoutDashboard" size={20} className="text-emerald-600" />
                        <span className="text-xs font-bold text-emerald-600 uppercase">Siswa Aktif</span>
                    </div>
                    <div className="text-3xl font-extrabold text-emerald-900">{formatNumber(stats.total_siswa)}</div>
                </div>
            </div>

            {/* Additional Gender Statistics Cards */}
            <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
                <div className="bg-white rounded-xl p-3 border border-slate-200 shadow-sm">
                    <div className="flex items-center gap-1 mb-1">
                        <Icon name="Male" size={14} className="text-blue-500" />
                        <span className="text-xs font-bold text-slate-500">Aktif L</span>
                    </div>
                    <div className="text-xl font-bold text-blue-700">{formatNumber(stats.sl)}</div>
                    <div className="text-xs text-slate-500">{stats.share_sl}%</div>
                </div>
                <div className="bg-white rounded-xl p-3 border border-slate-200 shadow-sm">
                    <div className="flex items-center gap-1 mb-1">
                        <Icon name="Female" size={14} className="text-pink-500" />
                        <span className="text-xs font-bold text-slate-500">Aktif P</span>
                    </div>
                    <div className="text-xl font-bold text-pink-700">{formatNumber(stats.sp)}</div>
                    <div className="text-xs text-slate-500">{stats.share_sp}%</div>
                </div>
                <div className="bg-white rounded-xl p-3 border border-slate-200 shadow-sm">
                    <div className="flex items-center gap-1 mb-1">
                        <Icon name="AlertTriangle" size={14} className="text-red-500" />
                        <span className="text-xs font-bold text-slate-500">Putus L</span>
                    </div>
                    <div className="text-xl font-bold text-red-700">{stats.pl}</div>
                    <div className="text-xs text-slate-500">{stats.rate_pl}%</div>
                </div>
                <div className="bg-white rounded-xl p-3 border border-slate-200 shadow-sm">
                    <div className="flex items-center gap-1 mb-1">
                        <Icon name="AlertTriangle" size={14} className="text-red-400" />
                        <span className="text-xs font-bold text-slate-500">Putus P</span>
                    </div>
                    <div className="text-xl font-bold text-red-600">{stats.pp}</div>
                    <div className="text-xs text-slate-500">{stats.rate_pp}%</div>
                </div>
                <div className="bg-white rounded-xl p-3 border border-slate-200 shadow-sm">
                    <div className="flex items-center gap-1 mb-1">
                        <Icon name="Users" size={14} className="text-orange-600" />
                        <span className="text-xs font-bold text-slate-500">Tdk L</span>
                    </div>
                    <div className="text-xl font-bold text-orange-700">{stats.tl}</div>
                    <div className="text-xs text-slate-500">{stats.rate_tl}%</div>
                </div>
                <div className="bg-white rounded-xl p-3 border border-slate-200 shadow-sm">
                    <div className="flex items-center gap-1 mb-1">
                        <Icon name="Users" size={14} className="text-orange-500" />
                        <span className="text-xs font-bold text-slate-500">Tdk P</span>
                    </div>
                    <div className="text-xl font-bold text-orange-600">{stats.tp}</div>
                    <div className="text-xs text-slate-500">{stats.rate_tp}%</div>
                </div>
            </div>

            {/* Filters and Export */}
            <div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
                    <h3 className="text-lg font-bold text-slate-800">Filter & Export Data</h3>
                    <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-3 top-3 text-slate-400" size={16} />
                            <input
                                type="text"
                                placeholder="Cari sekolah..."
                                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 focus:ring-2 focus:ring-blue-100 text-sm outline-none"
                                value={filters.search}
                                onChange={(e) => updateFilter('search', e.target.value)}
                            />
                        </div>
                        <select
                            className="px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-sm font-medium text-slate-700 focus:ring-2 focus:ring-blue-100 outline-none"
                            value={filters.kec}
                            onChange={(e) => updateFilter('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-2.5 rounded-xl bg-slate-50 border border-slate-200 text-sm font-medium text-slate-700 focus:ring-2 focus:ring-blue-100 outline-none"
                            value={filters.jenjang}
                            onChange={(e) => updateFilter('jenjang', e.target.value)}
                        >
                            <option value="Semua">📚 Semua Jenjang</option>
                            {uniqueJenjang.filter(j => j !== 'Semua').map(j => (
                                <option key={j} value={j}>{j}</option>
                            ))}
                        </select>
                        <select
                            className="px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-sm font-medium text-slate-700 focus:ring-2 focus:ring-blue-100 outline-none"
                            value={filters.status}
                            onChange={(e) => updateFilter('status', e.target.value)}
                        >
                            <option value="Semua">📊 Semua Status</option>
                            <option value="Ada Putus">⚠️ Ada Putus</option>
                            <option value="Ada Tdk Lanjut">⚠️ Ada Tdk Lanjut</option>
                            <option value="Aman">✅ Aman</option>
                        </select>
                        <button
                            onClick={resetFilters}
                            className="px-4 py-2.5 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={16} /> Reset
                        </button>
                        <button
                            onClick={exportToExcel}
                            className="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white hover:from-emerald-600 hover:to-emerald-700 rounded-xl font-bold text-sm flex items-center gap-2 transition-all shadow-md hover:shadow-lg"
                        >
                            <Icon name="FileSpreadsheet" size={16} /> Unduh Excel
                        </button>
                    </div>
                </div>
            </div>

            {/* Data Table */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div className="overflow-x-auto">
                    <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-4">Sekolah</th>
                                <th className="p-4">Jenjang</th>
                                <th className="p-4">Wilayah</th>
                                <th className="p-4 text-center bg-blue-50">Status Input</th>
                                <th className="p-4 text-center text-blue-600">Siswa L</th>
                                <th className="p-4 text-center text-pink-600">Siswa P</th>
                                <th className="p-4 text-center text-red-600">Putus L</th>
                                <th className="p-4 text-center text-red-600">Putus P</th>
                                <th className="p-4 text-center text-orange-600">Tdk L</th>
                                <th className="p-4 text-center text-orange-600">Tdk P</th>
                                <th className="p-4 text-center bg-red-50 text-red-700">% Putus</th>
                                <th className="p-4 text-center bg-orange-50 text-orange-700">% Tdk</th>
                                <th className="p-4 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-4">
                                            <div className="font-bold text-slate-800 text-sm">{row.sekolah}</div>
                                            <div className="text-xs text-slate-400">{row.npsn}</div>
                                        </td>
                                        <td className="p-4">
                                            <span className="bg-slate-100 px-2 py-1 rounded font-bold text-xs">{row.jenjang}</span>
                                        </td>
                                        <td className="p-4 font-medium text-xs">{row.kecamatan}</td>
                                        <td className="p-4 text-center">
                                            {row.status_input === 'Sudah Input' ? (
                                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-green-50 text-green-700 border border-green-200">
                                                    ✓ Sudah
                                                </span>
                                            ) : (
                                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-yellow-50 text-yellow-700 border border-yellow-200">
                                                    ⚠ Belum
                                                </span>
                                            )}
                                        </td>
                                        <td className="p-4 text-center font-bold text-blue-600 bg-blue-50/20">{row.siswa_l}</td>
                                        <td className="p-4 text-center font-bold text-pink-600 bg-pink-50/20">{row.siswa_p}</td>
                                        <td className="p-4 text-center font-bold text-red-600 bg-red-50/30">{row.putus_l || '-'}</td>
                                        <td className="p-4 text-center font-bold text-red-600 bg-red-50/30">{row.putus_p || '-'}</td>
                                        <td className="p-4 text-center font-bold text-orange-600 bg-orange-50/30">{row.tdk_lanjut_l || '-'}</td>
                                        <td className="p-4 text-center font-bold text-orange-600 bg-orange-50/30">{row.tdk_lanjut_p || '-'}</td>
                                        <td className="p-4 text-center font-extrabold text-red-700 bg-red-100/50">{pctPutus}%</td>
                                        <td className="p-4 text-center font-extrabold text-orange-700 bg-orange-100/50">{pctTdk}%</td>
                                        <td className="p-4 text-center">
                                            <button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                                <Icon name="ExternalLink" size={16} />
                                            </button>
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>

                {/* Pagination */}
                <div className="p-4 bg-slate-50 border-t border-slate-100 flex flex-col sm:flex-row justify-between items-center gap-3">
                    <div className="text-sm text-slate-600">
                        Menampilkan <span className="font-bold">{(currentPage - 1) * itemsPerPage + 1}</span> - <span className="font-bold">{Math.min(currentPage * itemsPerPage, filteredData.length)}</span> dari <span className="font-bold">{filteredData.length}</span> data
                    </div>
                    <div className="flex gap-2">
                        <button
                            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                            disabled={currentPage === 1}
                            className="p-2 rounded-lg bg-white border border-slate-200 disabled:opacity-50 hover:bg-slate-50 transition-colors"
                        >
                            <Icon name="ChevronLeft" size={18} />
                        </button>
                        <span className="px-4 py-2 font-bold text-slate-600 text-sm">
                            Hal {currentPage} dari {pageCount || 1}
                        </span>
                        <button
                            onClick={() => setCurrentPage(p => Math.min(pageCount, p + 1))}
                            disabled={currentPage === pageCount || pageCount === 0}
                            className="p-2 rounded-lg bg-white border border-slate-200 disabled:opacity-50 hover:bg-slate-50 transition-colors"
                        >
                            <Icon name="ChevronRight" size={18} />
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};