// Rekap Data Table Component
const RekapDataTable = () => {
    const [rekapData, setRekapData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [filters, setFilters] = useState({
        search: '',
        kecamatan: 'Semua',
        jenjang: 'Semua',
        status: 'Semua',
        jenisKelamin: 'Semua'
    });
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 20;

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

    const fetchRekapData = () => {
        setLoading(true);
        Papa.parse(CSV_URL_REKAP, {
            download: true,
            header: false,
            complete: (res) => {
                const data = res.data.slice(1).map((row, idx) => {
                    if (!row[0]) return null;
                    return {
                        id: idx,
                        no: row[0],
                        kecamatan: row[1],
                        npsn: row[2],
                        namaSekolah: row[3],
                        jenjang: row[4],
                        namaSiswa: row[5],
                        nik: row[6],
                        nisn: row[7],
                        jenisKelamin: row[8],
                        kelas: row[9],
                        alasan: row[10],
                        status: row[11],
                        namaOrangTua: row[12],
                        noKontak: row[13]
                    };
                }).filter(Boolean);

                console.log('Rekap data loaded:', data.length, 'records');
                setRekapData(data);
                setFilteredData(data);
                setLoading(false);
            },
            error: (err) => {
                console.error('Error loading rekap data:', err);
                setLoading(false);
            }
        });
    };

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

    const applyFilters = () => {
        let result = [...rekapData];

        if (filters.search) {
            result = result.filter(d =>
                d.namaSiswa?.toLowerCase().includes(filters.search.toLowerCase()) ||
                d.namaSekolah?.toLowerCase().includes(filters.search.toLowerCase()) ||
                d.npsn?.includes(filters.search) ||
                d.nisn?.includes(filters.search)
            );
        }

        if (filters.kecamatan !== 'Semua') {
            result = result.filter(d => d.kecamatan === filters.kecamatan);
        }

        if (filters.jenjang !== 'Semua') {
            result = result.filter(d => d.jenjang === filters.jenjang);
        }

        if (filters.status !== 'Semua') {
            result = result.filter(d => d.status === filters.status);
        }

        if (filters.jenisKelamin !== 'Semua') {
            result = result.filter(d => d.jenisKelamin === filters.jenisKelamin);
        }

        setFilteredData(result);
        setCurrentPage(1);
    };

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

    // Get unique values for filters
    const kecamatanList = ['Semua', ...new Set(rekapData.map(d => d.kecamatan).filter(Boolean))];
    const jenjangList = ['Semua', ...new Set(rekapData.map(d => d.jenjang).filter(Boolean))];
    const statusList = ['Semua', ...new Set(rekapData.map(d => d.status).filter(Boolean))];

    // Pagination
    const totalPages = Math.ceil(filteredData.length / itemsPerPage);
    const startIdx = (currentPage - 1) * itemsPerPage;
    const endIdx = startIdx + itemsPerPage;
    const currentData = filteredData.slice(startIdx, endIdx);

    const handleExportExcel = () => {
        const exportData = filteredData.map(d => ({
            'No': d.no,
            'Kecamatan': d.kecamatan,
            'NPSN': d.npsn,
            'Nama Sekolah': d.namaSekolah,
            'Jenjang': d.jenjang,
            'Nama Siswa': d.namaSiswa,
            'NIK': d.nik,
            'NISN': d.nisn,
            'Jenis Kelamin': d.jenisKelamin,
            'Kelas': d.kelas,
            'Alasan': d.alasan,
            'Status': d.status,
            'Nama Orang Tua': d.namaOrangTua,
            'No Kontak': d.noKontak
        }));

        const ws = XLSX.utils.json_to_sheet(exportData);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Rekap Data');
        XLSX.writeFile(wb, `Rekap_Data_Putus_${new Date().toISOString().split('T')[0]}.xlsx`);
    };

    if (loading) {
        return (
            <Card className="p-8">
                <div className="flex items-center justify-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-blue-500"></div>
                    <p className="ml-4 text-slate-600">Memuat data rekap...</p>
                </div>
            </Card>
        );
    }

    return (
        <Card className="overflow-hidden">
            <div className="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-blue-50 to-purple-50">
                <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    <div>
                        <h2 className="text-2xl font-bold text-slate-800">Rekap Data Detail Siswa</h2>
                        <p className="text-sm text-slate-500 mt-1">
                            Total: <span className="font-bold text-blue-600">{filteredData.length}</span> siswa
                        </p>
                    </div>
                    <div className="flex gap-2">
                        <button
                            onClick={resetFilters}
                            className="flex items-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 rounded-lg text-sm font-medium transition-all"
                        >
                            <Icon name="RefreshCw" size={16} />
                            Reset
                        </button>
                        <button
                            onClick={handleExportExcel}
                            className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-bold transition-all"
                        >
                            <Icon name="Download" size={16} />
                            Export Excel
                        </button>
                    </div>
                </div>

                {/* Filters */}
                <div className="grid grid-cols-1 md:grid-cols-5 gap-3 mt-4">
                    <input
                        type="text"
                        placeholder="Cari nama siswa, sekolah, NPSN, NISN..."
                        value={filters.search}
                        onChange={(e) => setFilters({ ...filters, search: e.target.value })}
                        className="px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                    <select
                        value={filters.kecamatan}
                        onChange={(e) => setFilters({ ...filters, kecamatan: e.target.value })}
                        className="px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    >
                        {kecamatanList.map(k => <option key={k} value={k}>{k}</option>)}
                    </select>
                    <select
                        value={filters.jenjang}
                        onChange={(e) => setFilters({ ...filters, jenjang: e.target.value })}
                        className="px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    >
                        {jenjangList.map(j => <option key={j} value={j}>{j}</option>)}
                    </select>
                    <select
                        value={filters.status}
                        onChange={(e) => setFilters({ ...filters, status: e.target.value })}
                        className="px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    >
                        {statusList.map(s => <option key={s} value={s}>{s}</option>)}
                    </select>
                    <select
                        value={filters.jenisKelamin}
                        onChange={(e) => setFilters({ ...filters, jenisKelamin: e.target.value })}
                        className="px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    >
                        <option value="Semua">Semua Jenis Kelamin</option>
                        <option value="Laki-Laki">Laki-Laki</option>
                        <option value="Perempuan">Perempuan</option>
                    </select>
                </div>
            </div>

            <div className="overflow-x-auto">
                <table className="w-full">
                    <thead className="bg-slate-50 border-b border-slate-200">
                        <tr>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">No</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Kecamatan</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Sekolah</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Jenjang</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Nama Siswa</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">NISN</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">JK</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Kelas</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Alasan</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Status</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Orang Tua</th>
                            <th className="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Kontak</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                        {currentData.length === 0 ? (
                            <tr>
                                <td colSpan="12" className="px-4 py-8 text-center text-slate-500">
                                    Tidak ada data yang sesuai dengan filter
                                </td>
                            </tr>
                        ) : (
                            currentData.map((row, idx) => (
                                <tr key={row.id} className="hover:bg-slate-50 transition-colors">
                                    <td className="px-4 py-3 text-sm text-slate-600">{startIdx + idx + 1}</td>
                                    <td className="px-4 py-3 text-sm text-slate-700">{row.kecamatan}</td>
                                    <td className="px-4 py-3 text-sm text-slate-700">
                                        <div className="font-medium">{row.namaSekolah}</div>
                                        <div className="text-xs text-slate-500">{row.npsn}</div>
                                    </td>
                                    <td className="px-4 py-3">
                                        <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            {row.jenjang}
                                        </span>
                                    </td>
                                    <td className="px-4 py-3 text-sm font-medium text-slate-800">{row.namaSiswa}</td>
                                    <td className="px-4 py-3 text-sm text-slate-600 font-mono">{row.nisn}</td>
                                    <td className="px-4 py-3">
                                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${row.jenisKelamin === 'Laki-Laki' || row.jenisKelamin === 'laki-laki' || row.jenisKelamin === 'L'
                                                ? 'bg-blue-100 text-blue-800'
                                                : 'bg-pink-100 text-pink-800'
                                            }`}>
                                            {row.jenisKelamin === 'L' ? 'L' : row.jenisKelamin === 'P' ? 'P' : row.jenisKelamin}
                                        </span>
                                    </td>
                                    <td className="px-4 py-3 text-sm text-slate-600 text-center">{row.kelas || '-'}</td>
                                    <td className="px-4 py-3 text-sm text-slate-700 max-w-xs">
                                        <div className="truncate" title={row.alasan}>{row.alasan}</div>
                                    </td>
                                    <td className="px-4 py-3">
                                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${row.status?.includes('Putus') ? 'bg-red-100 text-red-800' : 'bg-orange-100 text-orange-800'
                                            }`}>
                                            {row.status}
                                        </span>
                                    </td>
                                    <td className="px-4 py-3 text-sm text-slate-700">{row.namaOrangTua}</td>
                                    <td className="px-4 py-3 text-sm text-slate-600 font-mono">{row.noKontak || '-'}</td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
            </div>

            {/* Pagination */}
            {totalPages > 1 && (
                <div className="px-6 py-4 border-t border-slate-100 flex items-center justify-between">
                    <div className="text-sm text-slate-600">
                        Menampilkan {startIdx + 1} - {Math.min(endIdx, filteredData.length)} dari {filteredData.length} data
                    </div>
                    <div className="flex gap-2">
                        <button
                            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                            disabled={currentPage === 1}
                            className="px-3 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium transition-all"
                        >
                            Prev
                        </button>
                        <div className="flex items-center gap-1">
                            {[...Array(totalPages)].map((_, i) => {
                                const page = i + 1;
                                if (
                                    page === 1 ||
                                    page === totalPages ||
                                    (page >= currentPage - 1 && page <= currentPage + 1)
                                ) {
                                    return (
                                        <button
                                            key={page}
                                            onClick={() => setCurrentPage(page)}
                                            className={`px-3 py-1 rounded-lg text-sm font-medium transition-all ${currentPage === page
                                                    ? 'bg-blue-600 text-white'
                                                    : 'bg-slate-100 hover:bg-slate-200 text-slate-700'
                                                }`}
                                        >
                                            {page}
                                        </button>
                                    );
                                } else if (page === currentPage - 2 || page === currentPage + 2) {
                                    return <span key={page} className="px-2 text-slate-400">...</span>;
                                }
                                return null;
                            })}
                        </div>
                        <button
                            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                            disabled={currentPage === totalPages}
                            className="px-3 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium transition-all"
                        >
                            Next
                        </button>
                    </div>
                </div>
            )}
        </Card>
    );
};