// Summary Table Component
const SummaryTable = ({ data }) => {
    const summary = useMemo(() => {
        const groups = {};
        let grandTotal = { sekolah: 0, siswa_l: 0, siswa_p: 0, putus_l: 0, putus_p: 0, tdk_lanjut_l: 0, tdk_lanjut_p: 0, total_siswa: 0, total_putus: 0, total_tdk: 0 };
        data.forEach(d => {
            const j = d.jenjang_group || 'Lainnya';
            if (!groups[j]) groups[j] = { name: j, sekolah: 0, siswa_l: 0, siswa_p: 0, putus_l: 0, putus_p: 0, tdk_lanjut_l: 0, tdk_lanjut_p: 0 };
            groups[j].sekolah++; groups[j].siswa_l += d.siswa_l; groups[j].siswa_p += d.siswa_p; groups[j].putus_l += d.putus_l; groups[j].putus_p += d.putus_p; groups[j].tdk_lanjut_l += d.tdk_lanjut_l; groups[j].tdk_lanjut_p += d.tdk_lanjut_p;
        });
        const rows = Object.values(groups).map(g => {
            const total_siswa = g.siswa_l + g.siswa_p + g.putus_l + g.putus_p + g.tdk_lanjut_l + g.tdk_lanjut_p;
            const total_putus = g.putus_l + g.putus_p;
            const total_tdk = g.tdk_lanjut_l + g.tdk_lanjut_p;
            const total_loss = total_putus + total_tdk;
            grandTotal.sekolah += g.sekolah; grandTotal.siswa_l += g.siswa_l; grandTotal.siswa_p += g.siswa_p; grandTotal.putus_l += g.putus_l; grandTotal.putus_p += g.putus_p; grandTotal.tdk_lanjut_l += g.tdk_lanjut_l; grandTotal.tdk_lanjut_p += g.tdk_lanjut_p; grandTotal.total_siswa += total_siswa; grandTotal.total_putus += total_putus; grandTotal.total_tdk += total_tdk;
            return {
                ...g, total_siswa, total_putus, total_tdk,
                persen_putus: total_siswa > 0 ? ((total_putus / total_siswa) * 100).toFixed(2) : '0.00',
                persen_tdk: total_siswa > 0 ? ((total_tdk / total_siswa) * 100).toFixed(2) : '0.00',
                persen_total_loss: total_siswa > 0 ? ((total_loss / total_siswa) * 100).toFixed(2) : '0.00'
            };
        });
        grandTotal.persen_putus = grandTotal.total_siswa > 0 ? ((grandTotal.total_putus / grandTotal.total_siswa) * 100).toFixed(2) : '0.00';
        grandTotal.persen_tdk = grandTotal.total_siswa > 0 ? ((grandTotal.total_tdk / grandTotal.total_siswa) * 100).toFixed(2) : '0.00';
        const grandTotalLoss = grandTotal.total_putus + grandTotal.total_tdk;
        grandTotal.persen_total_loss = grandTotal.total_siswa > 0 ? ((grandTotalLoss / grandTotal.total_siswa) * 100).toFixed(2) : '0.00';
        return { rows, grandTotal };
    }, [data]);

    if (data.length === 0) return null;

    return (
        <div className="glass rounded-3xl overflow-hidden shadow-sm mb-10">
            <div className="px-8 py-6 border-b border-slate-100 flex items-center gap-3">
                <div className="p-2 bg-blue-50 rounded-lg text-blue-600"><Icon name="TrendingUp" size={20} /></div>
                <h3 className="text-lg font-bold text-slate-800">Rekapitulasi Data Per Jenjang</h3>
            </div>
            <div className="overflow-x-auto">
                <table className="w-full text-sm text-left modern-table">
                    <thead className="bg-slate-50/50 text-slate-500">
                        <tr><th className="px-6 py-4 font-bold">Bentuk</th><th className="px-6 py-4 text-center">Sekolah</th><th className="px-6 py-4 text-center text-blue-600">Siswa L</th><th className="px-6 py-4 text-center text-pink-600">Siswa P</th><th className="px-6 py-4 text-center text-red-600">Putus L</th><th className="px-6 py-4 text-center text-red-600">Putus P</th><th className="px-6 py-4 text-center text-orange-600">Tdk Lanjut L</th><th className="px-6 py-4 text-center text-orange-600">Tdk Lanjut P</th><th className="px-6 py-4 text-center font-bold">Total Siswa</th><th className="px-6 py-4 text-center font-bold text-red-700">% Putus</th><th className="px-6 py-4 text-center font-bold text-orange-700">% Tdk Lanjut</th><th className="px-6 py-4 text-center font-bold text-purple-700">% Total (Putus + Tdk)</th></tr>
                    </thead>
                    <tbody className="divide-y divide-slate-50 bg-white/50">
                        {summary.rows.map((row, idx) => (<tr key={idx} className="hover:bg-white transition-colors"><td className="px-6 py-4 font-bold text-slate-700">{row.name}</td><td className="px-6 py-4 text-center text-slate-500">{row.sekolah}</td><td className="px-6 py-4 text-center text-blue-600 bg-blue-50/20 font-medium">{formatNumber(row.siswa_l)}</td><td className="px-6 py-4 text-center text-pink-600 bg-pink-50/20 font-medium">{formatNumber(row.siswa_p)}</td><td className="px-6 py-4 text-center text-slate-400">{row.putus_l || '-'}</td><td className="px-6 py-4 text-center text-slate-400">{row.putus_p || '-'}</td><td className="px-6 py-4 text-center text-slate-400">{row.tdk_lanjut_l || '-'}</td><td className="px-6 py-4 text-center text-slate-400">{row.tdk_lanjut_p || '-'}</td><td className="px-6 py-4 text-center font-bold text-slate-700">{formatNumber(row.total_siswa)}</td><td className="px-6 py-4 text-center font-bold text-red-600 bg-red-50/30">{row.persen_putus}%</td><td className="px-6 py-4 text-center font-bold text-orange-600 bg-orange-50/30">{row.persen_tdk}%</td><td className="px-6 py-4 text-center font-extrabold text-purple-600 bg-purple-50/30">{row.persen_total_loss}%</td></tr>))}
                        <tr className="bg-slate-50 font-bold border-t border-slate-200"><td className="px-6 py-5 text-slate-800">TOTAL</td><td className="px-6 py-5 text-center">{summary.grandTotal.sekolah}</td><td className="px-6 py-5 text-center">{formatNumber(summary.grandTotal.siswa_l)}</td><td className="px-6 py-5 text-center">{formatNumber(summary.grandTotal.siswa_p)}</td><td className="px-6 py-5 text-center text-red-600">{summary.grandTotal.putus_l}</td><td className="px-6 py-5 text-center text-red-600">{summary.grandTotal.putus_p}</td><td className="px-6 py-5 text-center text-orange-600">{summary.grandTotal.tdk_lanjut_l}</td><td className="px-6 py-5 text-center text-orange-600">{summary.grandTotal.tdk_lanjut_p}</td><td className="px-6 py-5 text-center">{formatNumber(summary.grandTotal.total_siswa)}</td><td className="px-6 py-5 text-center text-red-700">{summary.grandTotal.persen_putus}%</td><td className="px-6 py-5 text-center text-orange-700">{summary.grandTotal.persen_tdk}%</td><td className="px-6 py-5 text-center text-purple-700">{summary.grandTotal.persen_total_loss}%</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    );
};