// Dashboard Component
const Dashboard = ({ user, onLogout }) => {
    const [rawData, setRawData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [showCards, setShowCards] = useState(true);
    const [showCharts, setShowCharts] = useState(true);
    const [activeFilter, setActiveFilter] = useState(null);

    const [activeModal, setActiveModal] = useState(null);
    const [modalConfig, setModalConfig] = useState({ title: '', data: [] });
    const [detailSchool, setDetailSchool] = useState(null);
    const [previewDoc, setPreviewDoc] = useState(null);

    // Global Filters State
    const [filters, setFilters] = useState({ search: '', kec: 'Semua', jenjang: 'Semua', status: 'Semua', statusInput: 'Semua' });

    const fetchData = useCallback(() => {
        setLoading(true);

        // Fetch both data in parallel
        Promise.all([
            // Fetch input data
            new Promise((resolve) => {
                Papa.parse(CSV_URL_DATA, {
                    download: true, header: false,
                    complete: (res) => {
                        const inputData = res.data.slice(1).map((r) => {
                            if (!r[0]) return null;
                            return {
                                timestamp: r[0], email: r[1], kepsek: r[2], wa_kepsek: r[3],
                                npsn: r[4], sekolah: r[5], kecamatan: r[6], jenjang: r[7],
                                putus_l: safeParseInt(r[10]), tdk_lanjut_l: safeParseInt(r[11]),
                                putus_p: safeParseInt(r[12]), tdk_lanjut_p: safeParseInt(r[13]),
                                alasan_putus_l: r[14], alasan_tdk_l: r[15],
                                alasan_putus_p: r[16], alasan_tdk_p: r[17], upload: r[18]
                            };
                        }).filter(Boolean);
                        resolve(inputData);
                    },
                    error: (err) => { console.error('Error fetching input data:', err); resolve([]); }
                });
            }),
            // Fetch dapo data
            new Promise((resolve) => {
                Papa.parse(CSV_URL_DAPO, {
                    download: true, header: false,
                    complete: (res) => {
                        const dapoData = res.data.slice(1).map((r) => {
                            if (!r[0]) return null;
                            return {
                                npsn: r[0], // Kolom A
                                sekolah: r[1], // Kolom B
                                jenjang: r[2], // Kolom C
                                status_sekolah: r[3], // Kolom D
                                desa: r[4], // Kolom E
                                kecamatan: r[5], // Kolom F
                                pd_l: safeParseInt(r[6]), // Kolom G - PD_L
                                pd_p: safeParseInt(r[7]), // Kolom H - PD_P
                                pd_total: safeParseInt(r[8]), // Kolom I - PD_Total
                                status_input: r[10] || 'Belum Input' // Kolom K - Status Input
                            };
                        }).filter(Boolean);
                        console.log('Dapo data loaded:', dapoData.length, 'schools');
                        resolve(dapoData);
                    },
                    error: (err) => { console.error('Error fetching dapo data:', err); resolve([]); }
                });
            })
        ]).then(([inputData, dapoData]) => {
            // Create map of input data by NPSN
            const inputMap = {};
            inputData.forEach(item => {
                inputMap[item.npsn] = item;
            });

            // Merge dapo with input data
            const merged = dapoData.map((dapo, i) => {
                const input = inputMap[dapo.npsn] || {};
                const schoolName = dapo.sekolah ? dapo.sekolah.toUpperCase() : '';
                let jenjangGroup = dapo.jenjang;

                if (schoolName.startsWith('SD') || schoolName.startsWith('MI')) jenjangGroup = 'SD Sederajat';
                else if (schoolName.startsWith('SMP') || schoolName.startsWith('MTS')) jenjangGroup = 'SMP Sederajat';

                return {
                    id: i,
                    // Data from dapo (master)
                    npsn: dapo.npsn,
                    sekolah: dapo.sekolah,
                    jenjang: dapo.jenjang,
                    jenjang_group: jenjangGroup,
                    kecamatan: dapo.kecamatan,
                    desa: dapo.desa,
                    status_sekolah: dapo.status_sekolah,
                    // Siswa aktif from dapo (PD_L and PD_P)
                    siswa_l: dapo.pd_l,
                    siswa_p: dapo.pd_p,
                    // Data from input (or default to 0)
                    timestamp: input.timestamp || null,
                    email: input.email || null,
                    kepsek: input.kepsek || '-',
                    wa_kepsek: input.wa_kepsek || '-',
                    putus_l: input.putus_l || 0,
                    putus_p: input.putus_p || 0,
                    tdk_lanjut_l: input.tdk_lanjut_l || 0,
                    tdk_lanjut_p: input.tdk_lanjut_p || 0,
                    alasan_putus_l: input.alasan_putus_l || null,
                    alasan_tdk_l: input.alasan_tdk_l || null,
                    alasan_putus_p: input.alasan_putus_p || null,
                    alasan_tdk_p: input.alasan_tdk_p || null,
                    upload: input.upload || null,
                    // Status
                    status_input: input.npsn ? 'Sudah Input' : 'Belum Input',
                    has_input_data: !!input.npsn
                };
            });

            console.log('Merged data:', merged.length, 'schools');
            console.log('Schools with input:', merged.filter(s => s.has_input_data).length);
            console.log('Schools without input:', merged.filter(s => !s.has_input_data).length);

            setRawData(merged);
            setFilteredData(merged);
            setLoading(false);
        }).catch(err => {
            console.error('Error in data fetching:', err);
            setLoading(false);
        });
    }, []);

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

    const handleRefresh = useCallback(() => {
        fetchData();
    }, [fetchData]);

    // Main Filter Logic
    const applyFilters = useCallback(() => {
        if (!rawData) return;
        const result = rawData.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;

            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;

            let matchStatusInput = true;
            if (filters.statusInput === 'Sudah Input') matchStatusInput = d.status_input === 'Sudah Input';
            else if (filters.statusInput === 'Belum Input') matchStatusInput = d.status_input === 'Belum Input';

            return matchS && matchK && matchJ && matchSt && matchStatusInput;
        });
        setFilteredData(result);
    }, [rawData, filters]);

    useEffect(() => { applyFilters(); }, [filters, rawData, applyFilters]);

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

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

    // Stats
    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,
            sudah_input: acc.sudah_input + (c.status_input === 'Sudah Input' ? 1 : 0),
            belum_input: acc.belum_input + (c.status_input === 'Belum Input' ? 1 : 0)
        }), { sekolah: 0, sl: 0, sp: 0, pl: 0, pp: 0, tl: 0, tp: 0, sudah_input: 0, belum_input: 0 });

        // Siswa Aktif = hanya dari data Dapodik (PD_L + PD_P), tidak termasuk putus/LTM
        const total_siswa_aktif = s.sl + s.sp;
        const total_putus = s.pl + s.pp;
        const total_tdk = s.tl + s.tp;
        const total_combined = total_putus + total_tdk;

        // Total populasi = aktif + putus + LTM (untuk perhitungan persentase)
        const total_populasi = total_siswa_aktif + total_putus + total_tdk;

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

        return {
            ...s,
            total_siswa: total_siswa_aktif, // Card "Siswa Aktif" menampilkan siswa aktif saja
            total_populasi, // Total keseluruhan untuk perhitungan persentase
            total_putus,
            total_tdk,
            total_combined,
            pct_putus: total_populasi ? ((total_putus / total_populasi) * 100).toFixed(2) : 0,
            pct_tdk: total_populasi ? ((total_tdk / total_populasi) * 100).toFixed(2) : 0,
            pct_combined: total_populasi ? ((total_combined / total_populasi) * 100).toFixed(2) : 0,
            pct_input: s.sekolah ? ((s.sudah_input / s.sekolah) * 100).toFixed(1) : 0,

            // Rates relative to gender population
            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_populasi ? ((s.sl / total_populasi) * 100).toFixed(1) : 0,
            share_sp: total_populasi ? ((s.sp / total_populasi) * 100).toFixed(1) : 0,
        };
    }, [filteredData]);

    const chartData = useMemo(() => {
        const m = {};
        filteredData.forEach(d => {
            if (!m[d.jenjang]) m[d.jenjang] = { name: d.jenjang, putus: 0, tdk: 0, total_populasi: 0 };
            const p = d.putus_l + d.putus_p;
            const t = d.tdk_lanjut_l + d.tdk_lanjut_p;
            const s = d.siswa_l + d.siswa_p + p + t;
            m[d.jenjang].putus += p; m[d.jenjang].tdk += t; m[d.jenjang].total_populasi += s;
        });
        return Object.values(m).map(item => ({
            ...item,
            putusLabel: item.total_populasi > 0 ? `${item.putus} (${((item.putus / item.total_populasi) * 100).toFixed(1)}%)` : item.putus,
            tdkLabel: item.total_populasi > 0 ? `${item.tdk} (${((item.tdk / item.total_populasi) * 100).toFixed(1)}%)` : item.tdk
        }));
    }, [filteredData]);

    const chartDataKecamatan = useMemo(() => {
        const m = {};
        filteredData.forEach(d => {
            if (!m[d.kecamatan]) m[d.kecamatan] = { name: d.kecamatan, putus: 0, tdk: 0, total_populasi: 0 };
            const p = d.putus_l + d.putus_p;
            const t = d.tdk_lanjut_l + d.tdk_lanjut_p;
            const s = d.siswa_l + d.siswa_p + p + t;
            m[d.kecamatan].putus += p; m[d.kecamatan].tdk += t; m[d.kecamatan].total_populasi += s;
        });
        return Object.values(m).sort((a, b) => b.putus - a.putus).map(item => ({
            ...item,
            putusLabel: item.total_populasi > 0 && item.putus > 0 ? `${item.putus} (${((item.putus / item.total_populasi) * 100).toFixed(1)}%)` : (item.putus > 0 ? item.putus : ''),
            tdkLabel: item.total_populasi > 0 && item.tdk > 0 ? `${item.tdk} (${((item.tdk / item.total_populasi) * 100).toFixed(1)}%)` : (item.tdk > 0 ? item.tdk : '')
        }));
    }, [filteredData]);

    const chartTopSchools = useMemo(() => {
        // Hitung total masalah (putus + tdk lanjut) dan persentasenya
        const sorted = [...filteredData].map(d => {
            const total_masalah = d.putus_l + d.putus_p + d.tdk_lanjut_l + d.tdk_lanjut_p;
            const total_populasi = d.siswa_l + d.siswa_p + total_masalah;
            return {
                ...d,
                total_masalah,
                pct_masalah: total_populasi > 0 ? (total_masalah / total_populasi) * 100 : 0
            };
        })
            // Filter hanya yg ada masalah > 0
            .filter(d => d.total_masalah > 0)
            // Sort descending by percentage
            .sort((a, b) => b.pct_masalah - a.pct_masalah)
            // Ambil top 10
            .slice(0, 10);

        return sorted.map(d => ({
            name: d.sekolah,
            persen: parseFloat(d.pct_masalah.toFixed(1)),
            detail: d
        }));
    }, [filteredData]);

    const handleCardClick = (type) => {
        let d = [], t = '';
        const base = filteredData;

        if (type === 'total_sekolah') { t = 'Detail Total Sekolah'; d = base; }
        else if (type === 'putus') { t = 'Detail Putus Sekolah'; d = base.filter(x => x.putus_l + x.putus_p > 0); }
        else if (type === 'tdk') { t = 'Detail Tidak Lanjut'; d = base.filter(x => x.tdk_lanjut_l + x.tdk_lanjut_p > 0); }
        else if (type === 'combined') { t = 'Detail Putus dan Tidak Melanjutkan'; d = base.filter(x => (x.putus_l + x.putus_p + x.tdk_lanjut_l + x.tdk_lanjut_p) > 0); }
        else if (type === 'aktif') { t = 'Detail Siswa Aktif'; d = base; }
        else if (type === 'putus_l') { t = 'Detail Putus Laki-laki'; d = base.filter(x => x.putus_l > 0); }
        else if (type === 'putus_p') { t = 'Detail Putus Perempuan'; d = base.filter(x => x.putus_p > 0); }
        else if (type === 'tdk_l') { t = 'Detail Tdk Lanjut Laki-laki'; d = base.filter(x => x.tdk_lanjut_l > 0); }
        else if (type === 'tdk_p') { t = 'Detail Tdk Lanjut Perempuan'; d = base.filter(x => x.tdk_lanjut_p > 0); }
        else if (type === 'aktif_l') { t = 'Detail Aktif Laki-laki'; d = base.filter(x => x.siswa_l > 0); }
        else if (type === 'aktif_p') { t = 'Detail Aktif Perempuan'; d = base.filter(x => x.siswa_p > 0); }
        else if (type === 'sudah_input') { t = 'Sekolah Sudah Input'; d = base.filter(x => x.status_input === 'Sudah Input'); }
        else if (type === 'belum_input') { t = 'Sekolah Belum Input'; d = base.filter(x => x.status_input === 'Belum Input'); }

        setModalConfig({ title: t, data: d });
        setActiveModal('stats');
    };

    if (loading) return <div className="h-screen flex flex-col items-center justify-center bg-[#0f172a] text-white"><div className="animate-spin rounded-full h-12 w-12 border-t-4 border-blue-500"></div><p className="mt-4 animate-pulse">Memuat Dashboard...</p></div>;

    return (
        <div className="pb-20">
            <div className="relative bg-[#0f172a] text-white overflow-hidden pb-32 pt-8 px-6 lg:px-12 shadow-2xl">
                <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-30"><div className="absolute -top-24 -right-24 w-96 h-96 bg-blue-600 rounded-full blur-3xl animate-float"></div></div>
                <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 max-w-[1920px] mx-auto">
                    <div className="flex items-center gap-4">
                        <img src={LOGO_URL} alt="Logo" className="h-14 w-auto bg-white/10 p-2 rounded-xl backdrop-blur-sm" />
                        <div>
                            <h1 className="text-2xl md:text-3xl font-extrabold tracking-tight">Sistem Monitoring <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">Putus Sekolah</span></h1>
                            <p className="text-slate-400 text-sm">Halo, <span className="font-bold text-white">{user.username}</span> ({user.role})</p>
                        </div>
                    </div>
                    <div className="flex gap-3">
                        <button onClick={onLogout} className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-red-600/80 hover:bg-red-500/90 backdrop-blur text-sm font-bold transition-all border border-red-500/50"><Icon name="LogOut" size={16} /> Logout</button>
                    </div>
                </div>
                <div className="relative z-10 flex justify-end gap-3 mt-4 max-w-[1920px] mx-auto">
                    <button onClick={() => setShowCards(!showCards)} className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 backdrop-blur border border-white/10 text-xs font-medium transition-all"><Icon name={showCards ? "EyeOff" : "Eye"} size={14} /> Kartu</button>
                    <button onClick={() => setShowCharts(!showCharts)} className="flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-600/80 hover:bg-purple-500/80 backdrop-blur text-xs font-medium transition-all"><Icon name={showCharts ? "EyeOff" : "BarChart2"} size={14} /> Grafik</button>
                    <button onClick={handleRefresh} className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-xs font-bold transition-all"><Icon name="RefreshCw" size={14} /> Refresh</button>
                </div>
            </div>

            <div className="px-6 lg:px-12 -mt-16 relative z-20 max-w-[1920px] mx-auto space-y-10">
                <div className={`transition-all duration-700 ${showCards ? 'opacity-100 max-h-[3000px]' : 'opacity-0 max-h-0 overflow-hidden'}`}>
                    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-6 mb-8">
                        <StatCard title="Total Sekolah" value={stats.sekolah} iconName="School" color="text-blue-600" isClickable onClick={() => handleCardClick('total_sekolah')} />
                        <StatCard title="Putus Sekolah" value={stats.total_putus} percentage={stats.pct_putus} iconName="AlertTriangle" color="text-red-600" isClickable onClick={() => handleCardClick('putus')} />
                        <StatCard title="Tidak Lanjut" value={stats.total_tdk} percentage={stats.pct_tdk} iconName="Users" color="text-orange-500" isClickable onClick={() => handleCardClick('tdk')} />
                        <StatCard title="Total Putus dan Tidak Melanjutkan" value={stats.total_combined} percentage={stats.pct_combined} iconName="AlertCircle" color="text-purple-600" isClickable onClick={() => handleCardClick('combined')} />
                        <StatCard title="Siswa Aktif" value={formatNumber(stats.total_siswa)} iconName="LayoutDashboard" color="text-emerald-600" isClickable onClick={() => handleCardClick('aktif')} />
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <StatCard title="Sudah Input" value={stats.sudah_input} percentage={stats.pct_input} iconName="FileText" color="text-green-600" isClickable onClick={() => handleCardClick('sudah_input')} />
                        <StatCard title="Belum Input" value={stats.belum_input} iconName="AlertTriangle" color="text-yellow-600" isClickable onClick={() => handleCardClick('belum_input')} />
                    </div>
                    <div className="grid grid-cols-2 md:grid-cols-6 gap-4 mb-8">
                        <StatCard title="Aktif L" value={formatNumber(stats.sl)} percentage={stats.share_sl} iconName="Male" color="text-blue-600" size="small" isClickable onClick={() => handleCardClick('aktif_l')} />
                        <StatCard title="Aktif P" value={formatNumber(stats.sp)} percentage={stats.share_sp} iconName="Female" color="text-pink-500" size="small" isClickable onClick={() => handleCardClick('aktif_p')} />
                        <StatCard title="Putus L" value={stats.pl} percentage={stats.rate_pl} iconName="AlertTriangle" color="text-red-600" size="small" isClickable onClick={() => handleCardClick('putus_l')} />
                        <StatCard title="Putus P" value={stats.pp} percentage={stats.rate_pp} iconName="AlertTriangle" color="text-red-500" size="small" isClickable onClick={() => handleCardClick('putus_p')} />
                        <StatCard title="Tdk Lanjut L" value={stats.tl} percentage={stats.rate_tl} iconName="User" color="text-orange-600" size="small" isClickable onClick={() => handleCardClick('tdk_l')} />
                        <StatCard title="Tdk Lanjut P" value={stats.tp} percentage={stats.rate_tp} iconName="User" color="text-orange-500" size="small" isClickable onClick={() => handleCardClick('tdk_p')} />
                    </div>
                </div>

                <div className={`transition-all duration-700 ${showCharts ? 'opacity-100 max-h-[3000px]' : 'opacity-0 max-h-0 overflow-hidden'}`}>
                    <div className="mb-10">
                        <Card className="h-96">
                            <h3 className="text-lg font-bold text-slate-800 mb-6">Top 10 Sekolah (Putus + Tdk Lanjut) Tertinggi</h3>
                            <ResponsiveContainer width="100%" height="85%">
                                <BarChart data={chartTopSchools} layout="vertical" margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                                    <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#f1f5f9" />
                                    <XAxis type="number" tick={{ fill: '#94a3b8' }} domain={[0, 'auto']} />
                                    <YAxis dataKey="name" type="category" width={200} tick={{ fill: '#64748b', fontSize: 11 }} interval={0} />
                                    <Tooltip content={({ active, payload }) => { if (active && payload && payload.length) { const d = payload[0].payload.detail; return (<div className="bg-white p-3 rounded-lg shadow-xl border border-slate-100 text-xs"><p className="font-bold mb-1">{d.sekolah}</p><p>Putus: {d.putus_l + d.putus_p}</p><p>Tdk Lanjut: {d.tdk_lanjut_l + d.tdk_lanjut_p}</p><p>Total Siswa: {d.siswa_l + d.siswa_p + d.putus_l + d.putus_p + d.tdk_lanjut_l + d.tdk_lanjut_p}</p></div>); } return null; }} />
                                    <Bar dataKey="persen" name="% Masalah" fill="url(#colorTop)" radius={[0, 4, 4, 0]} barSize={20} onClick={(data) => setDetailSchool(data.detail)} cursor="pointer"><LabelList dataKey="persen" position="right" fill="#ef4444" fontSize={10} fontWeight="bold" formatter={(val) => `${val}%`} /></Bar>
                                    <defs><linearGradient id="colorTop" x1="0" y1="0" x2="1" y2="0"><stop offset="5%" stopColor="#ef4444" stopOpacity={0.8} /><stop offset="95%" stopColor="#f97316" stopOpacity={0.8} /></linearGradient></defs>
                                </BarChart>
                            </ResponsiveContainer>
                        </Card>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
                        <Card className="h-96 lg:col-span-1">
                            <h3 className="text-lg font-bold text-slate-800 mb-6">Statistik Per Jenjang</h3>
                            <ResponsiveContainer width="100%" height="85%">
                                <BarChart data={chartData} margin={{ top: 20, right: 0, left: 0, bottom: 0 }}>
                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#94a3b8' }} />
                                    <YAxis axisLine={false} tickLine={false} tick={{ fill: '#94a3b8' }} />
                                    <Tooltip content={<CustomTooltip />} />
                                    <Legend />
                                    <Bar dataKey="putus" name="Putus" fill="url(#colorPutus)" radius={[6, 6, 0, 0]}><LabelList dataKey="putusLabel" position="top" fill="#ef4444" fontSize={10} fontWeight="bold" /></Bar>
                                    <Bar dataKey="tdk" name="Tdk Lanjut" fill="url(#colorTdk)" radius={[6, 6, 0, 0]}><LabelList dataKey="tdkLabel" position="top" fill="#f97316" fontSize={10} fontWeight="bold" /></Bar>
                                    <defs>
                                        <linearGradient id="colorPutus" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#ef4444" stopOpacity={0.8} /><stop offset="95%" stopColor="#ef4444" stopOpacity={0.4} /></linearGradient>
                                        <linearGradient id="colorTdk" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#f97316" stopOpacity={0.8} /><stop offset="95%" stopColor="#f97316" stopOpacity={0.4} /></linearGradient>
                                    </defs>
                                </BarChart>
                            </ResponsiveContainer>
                        </Card>
                        <Card className="h-96 lg:col-span-2">
                            <h3 className="text-lg font-bold text-slate-800 mb-6">Analisa Per Kecamatan</h3>
                            <ResponsiveContainer width="100%" height="85%">
                                <BarChart data={chartDataKecamatan} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10 }} interval={0} angle={-15} textAnchor="end" />
                                    <YAxis axisLine={false} tickLine={false} tick={{ fill: '#94a3b8' }} />
                                    <Tooltip content={<CustomTooltip />} />
                                    <Legend />
                                    <Bar dataKey="putus" name="Putus Sekolah" fill="#ec4899" radius={[4, 4, 0, 0]} barSize={30}><LabelList dataKey="putusLabel" position="top" fill="#ec4899" fontSize={9} fontWeight="bold" angle={-45} offset={10} /></Bar>
                                    <Bar dataKey="tdk" name="Tidak Lanjut" fill="#8b5cf6" radius={[4, 4, 0, 0]} barSize={30}><LabelList dataKey="tdkLabel" position="top" fill="#8b5cf6" fontSize={9} fontWeight="bold" angle={-45} offset={10} /></Bar>
                                </BarChart>
                            </ResponsiveContainer>
                        </Card>
                    </div>
                </div>

                <SummaryTable data={filteredData} />

                <SchoolDataTable
                    data={filteredData}
                    title="Database Detail Sekolah"
                    onDetailClick={setDetailSchool}
                    onFiltersChange={updateGlobalFilter}
                    onResetFilters={resetFilters}
                    globalFilters={filters}
                    enableFilters={true}
                    rawData={rawData}
                />

                <RekapDataTable />

                <RangkumanTable />
            </div>

            <Modal isOpen={activeModal === 'stats'} onClose={() => setActiveModal(null)} title={modalConfig.title} maxWidth="max-w-7xl">
                <ModalDetailWithFilters
                    data={modalConfig.data}
                    title={modalConfig.title}
                    onDetailClick={(row) => { setActiveModal(null); setDetailSchool(row); }}
                />
            </Modal>

            <Modal isOpen={!!detailSchool} onClose={() => setDetailSchool(null)} title="Profil Detail Sekolah" maxWidth="max-w-4xl">
                {detailSchool && (
                    <div className="space-y-8">
                        <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div><h2 className="text-2xl font-bold text-slate-800">{detailSchool.sekolah}</h2><div className="flex gap-2 mt-2"><Badge color="blue">{detailSchool.jenjang}</Badge><Badge color="slate">NPSN: {detailSchool.npsn}</Badge></div></div>
                            <div className="flex flex-col items-start md:items-end justify-center"><div className="text-sm text-slate-500">Kepala Sekolah</div><div className="font-bold text-slate-700">{detailSchool.kepsek}</div><div className="text-xs text-emerald-600 bg-emerald-50 px-2 py-1 rounded mt-1">WA: {detailSchool.wa_kepsek}</div></div>
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div className="p-4 bg-blue-50 rounded-2xl border border-blue-100 text-center"><div className="text-xs uppercase font-bold text-blue-400 mb-1">Total Siswa Aktif</div><div className="text-3xl font-extrabold text-blue-700">{detailSchool.siswa_l + detailSchool.siswa_p}</div><div className="text-xs text-blue-500 mt-1">L: {detailSchool.siswa_l} | P: {detailSchool.siswa_p}</div></div>
                            <div className="p-4 bg-red-50 rounded-2xl border border-red-100 text-center"><div className="text-xs uppercase font-bold text-red-400 mb-1">Total Putus Sekolah</div><div className="text-3xl font-extrabold text-red-700">{detailSchool.putus_l + detailSchool.putus_p}</div><div className="text-xs text-red-500 mt-1">L: {detailSchool.putus_l} | P: {detailSchool.putus_p}</div></div>
                            <div className="p-4 bg-orange-50 rounded-2xl border border-orange-100 text-center"><div className="text-xs uppercase font-bold text-orange-400 mb-1">Total Tidak Lanjut</div><div className="text-3xl font-extrabold text-orange-700">{detailSchool.tdk_lanjut_l + detailSchool.tdk_lanjut_p}</div><div className="text-xs text-orange-500 mt-1">L: {detailSchool.tdk_lanjut_l} | P: {detailSchool.tdk_lanjut_p}</div></div>
                        </div>
                        <div>
                            <h4 className="font-bold text-slate-800 mb-4 border-b pb-2">Analisa & Alasan</h4>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div className="bg-white p-4 rounded-xl border border-slate-200"><div className="text-xs font-bold text-red-500 uppercase mb-2">Alasan Putus Sekolah</div><div className="text-sm mb-2"><span className="font-bold text-slate-700">Laki-laki:</span> {detailSchool.alasan_putus_l || '-'}</div><div className="text-sm"><span className="font-bold text-slate-700">Perempuan:</span> {detailSchool.alasan_putus_p || '-'}</div></div>
                                <div className="bg-white p-4 rounded-xl border border-slate-200"><div className="text-xs font-bold text-orange-500 uppercase mb-2">Alasan Tidak Melanjutkan</div><div className="text-sm mb-2"><span className="font-bold text-slate-700">Laki-laki:</span> {detailSchool.alasan_tdk_l || '-'}</div><div className="text-sm"><span className="font-bold text-slate-700">Perempuan:</span> {detailSchool.alasan_tdk_p || '-'}</div></div>
                            </div>
                        </div>
                        <div className="md:col-span-2 border-t border-blue-200 pt-3 mt-2">
                            <p className="text-xs text-slate-500 uppercase font-bold tracking-wider mb-2">Dokumen Pendukung</p>
                            {detailSchool.upload && detailSchool.upload.length > 5 ? (
                                <button onClick={() => setPreviewDoc(detailSchool.upload)} className="flex items-center gap-2 text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-bold text-sm transition-all shadow-sm hover:shadow-md"><Icon name="FileText" size={16} /> Lihat Data Dukung</button>
                            ) : (
                                <span className="text-slate-400 text-sm italic bg-slate-100 px-3 py-1 rounded-md">Tidak ada data dukung.</span>
                            )}
                        </div>
                    </div>
                )}
            </Modal>

            <Modal isOpen={!!previewDoc} onClose={() => setPreviewDoc(null)} title="Dokumen Pendukung" maxWidth="max-w-5xl" zIndex="z-[60]">
                <div className="h-[70vh] flex flex-col">
                    <div className="flex justify-between items-center mb-4 p-3 bg-blue-50 rounded-lg border border-blue-100">
                        <div className="text-sm text-blue-800 flex items-center gap-2"><Icon name="AlertTriangle" size={16} /><span className="font-bold">Info:</span> Jika preview tidak muncul, akses file langsung.</div>
                        <a href={previewDoc} target="_blank" className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-xs font-bold"><Icon name="ExternalLink" size={16} /> Buka Tab Baru</a>
                    </div>
                    <iframe src={getEmbedUrl(previewDoc)} className="w-full flex-1 rounded-xl bg-slate-200" frameBorder="0"></iframe>
                </div>
            </Modal>
        </div>
    );
};