function ExcelImport({ onClose, onSuccess, currentYear }) {
    const [pasteContent, setPasteContent] = React.useState('');
    const [previewData, setPreviewData] = React.useState([]);
    const [importing, setImporting] = React.useState(false);
    const [progress, setProgress] = React.useState({ current: 0, total: 0, success: 0, failed: 0 });
    const [logs, setLogs] = React.useState([]);
    
    // Config Options
    const [useHeader, setUseHeader] = React.useState(false); // Default false: First row is NOT header (as requested)
    
    const [rawJson, setRawJson] = React.useState([]);
    const [targetYear, setTargetYear] = React.useState(currentYear || new Date().getFullYear());
    const [startSequence, setStartSequence] = React.useState(0);

    // Fetch max NIK for auto-generation
    React.useEffect(() => {
        const initData = async () => {
            const client = window.SupabaseUtils.getClient();
            const now = new Date();
            const yearStr = String(targetYear || now.getFullYear());
            const monthStr = String(now.getMonth() + 1).padStart(2, '0');
            const prefix = `${yearStr}${monthStr}`;
            
            let maxFound = 0;
            try {
                const { data: nikData } = await client
                    .from('employees')
                    .select('nik')
                    .ilike('nik', `${prefix}%`)
                    .order('nik', { ascending: false })
                    .limit(1);
                
                if (nikData && nikData.length > 0 && nikData[0].nik) {
                    const val = String(nikData[0].nik);
                    const suffix = val.slice(prefix.length);
                    if (/^\d{4}$/.test(suffix)) {
                        maxFound = parseInt(suffix, 10);
                    }
                }
            } catch (e) {
                console.warn("Failed to find max NIK", e);
            }
            setStartSequence(maxFound);
        };
        initData();
    }, [targetYear]);

    const parsePasteData = () => {
        if (!pasteContent.trim()) {
            Swal.fire("Area Kosong", "Silakan paste data dari Excel terlebih dahulu.", "warning");
            return;
        }

        try {
            const rows = pasteContent.trim().split(/\r\n|\n|\r/);
            
            // Basic validation
            if (useHeader && rows.length < 2) {
                Swal.fire("Data Kurang", "Minimal harus ada baris Header dan 1 baris Data.", "warning");
                return;
            }

            let jsonData = [];
            
            if (useHeader) {
                // Scenario A: First row is Header
                const headers = rows[0].split('\t').map(h => h.trim());
                
                for (let i = 1; i < rows.length; i++) {
                    const cells = rows[i].split('\t');
                    if (cells.length === 1 && !cells[0].trim()) continue; // Skip empty rows

                    const rowObj = {};
                    // Map by Header Name
                    headers.forEach((header, index) => {
                        rowObj[header] = cells[index] || ""; 
                    });
                    
                    // Also Map by Index (fallback)
                    // We store special keys _col0, _col1, etc. to use if header mapping fails
                    cells.forEach((cell, index) => {
                        rowObj[`_col${index}`] = cell || "";
                    });

                    jsonData.push(rowObj);
                }
            } else {
                // Scenario B: No Header (Pure Data)
                for (let i = 0; i < rows.length; i++) {
                    const cells = rows[i].split('\t');
                    if (cells.length === 1 && !cells[0].trim()) continue;

                    const rowObj = {};
                    cells.forEach((cell, index) => {
                        rowObj[`_col${index}`] = cell || "";
                    });
                    jsonData.push(rowObj);
                }
            }

            if (jsonData.length === 0) {
                Swal.fire("Data Kosong", "Tidak ada data yang terbaca.", "warning");
                return;
            }

            setRawJson(jsonData);
            
            // Feedback will be handled by useEffect based on result
        } catch (err) {
            console.error("Parse Error:", err);
            Swal.fire("Error Parsing", "Gagal memproses data. Pastikan format copy-paste valid.", "error");
        }
    };

    // Reactive processing whenever raw data changes
    React.useEffect(() => {
        if (rawJson.length === 0) {
            setPreviewData([]);
            return;
        }

        const mappedData = rawJson.map((row, index) => {
            // Helper to find value
            const findVal = (potentialKeys, colIndex) => {
                // 1. Try finding by Header Name (if keys exist)
                const rowKeys = Object.keys(row);
                for (const pk of potentialKeys) {
                    const exactKey = rowKeys.find(k => k.trim().toLowerCase() === pk.toLowerCase());
                    if (exactKey && row[exactKey]) return row[exactKey];
                }
                
                // 2. Fallback: Try finding by Index (_colX)
                if (colIndex !== undefined) {
                    const valByIndex = row[`_col${colIndex}`];
                    if (valByIndex) return valByIndex;
                }
                
                return "";
            };

            // MAPPING SCHEMA
            const nama = findVal(['NAMA GURU/KARYAWAN', 'NAMA LENGKAP', 'NAMA', 'NAMA PEGAWAI'], 2);
            const nikUser = findVal(['NIK', 'NO KTP', 'NOMOR INDUK'], 100); 
            const unitNameRaw = findVal(['NAMA UNIT/ LEMBAGA', 'NAMA UNIT', 'UNIT', 'LEMBAGA'], 0);
            const jk = findVal(['JENIS KELAMIN', 'L/P', 'SEX', 'GENDER'], 3);
            const jabatan = findVal(['JABATAN', 'POSISI'], 4);
            const tmtRaw = findVal(['TAHUN MULAI TUGAS (TMT)', 'TAHUN MULAI TUGAS', 'TMT', 'TAHUN MASUK'], 5);
            
            // The "SATMINKAL" column in user excel is actually a STATUS column (Satminkal vs Non Satminkal)
            const satminkalStatusCol = findVal(['SATMINKAL', 'STATUS SATMINKAL', 'LEMBAGA INDUK'], 6);
            
            const kategori = findVal(['KATEGORI', 'KATEGORI PEGAWAI'], 7);
            const statusUser = findVal(['STATUS', 'STATUS KEPEGAWAIAN'], 8);
            
            // Normalize Gender (L/P)
            let finalJk = jk ? String(jk).trim().toUpperCase() : '';
            if (finalJk.startsWith('L') || finalJk.includes('LAKI') || finalJk.includes('PRIA')) {
                finalJk = 'L';
            } else if (finalJk.startsWith('P') || finalJk.includes('PEREMPUAN') || finalJk.includes('WANITA')) {
                finalJk = 'P';
            } else if (finalJk.length > 1) {
                // If it's something else but long, maybe take first char if it matches L/P logic, otherwise leave as is or empty
                 finalJk = ''; 
            }

            // Format TMT
            let tmt = null;
            if (tmtRaw) {
                const strVal = String(tmtRaw).trim();
                if (strVal.match(/^\d{4}$/)) {
                    tmt = `${strVal}-01-01`;
                } else {
                    const d = new Date(strVal);
                    if (!isNaN(d.getTime())) {
                        tmt = d.toISOString().split('T')[0];
                    }
                }
            }

            // Format NIK
            let nik = nikUser ? String(nikUser).trim() : '';
            nik = nik.replace(/['"`]/g, ''); 
            if (!nik || nik === '-') {
                nik = "__AUTO_GENERATE__";
            }

            // --- LOGIC DISTINCTION: Satminkal vs Lembaga ---
            let finalSatminkal = null;
            let finalLembaga = "";

            const statusText = (satminkalStatusCol || "").trim().toLowerCase();
            const unitName = (unitNameRaw || "").trim();

            if (statusText.includes('non') && statusText.includes('satminkal')) {
                // Case 1: Non Satminkal
                // Unit Name goes to Lembaga (Other place)
                // Satminkal is NULL (Empty)
                finalLembaga = unitName;
                finalSatminkal = null; 
            } else if (statusText === 'satminkal' || statusText === 'induk') {
                // Case 2: Satminkal
                // Unit Name goes to Satminkal (Induk)
                finalSatminkal = unitName;
                finalLembaga = "";
            } else {
                // Case 3: Fallback Logic
                if (unitName && !satminkalStatusCol) {
                    finalSatminkal = unitName;
                } else if (satminkalStatusCol && satminkalStatusCol.length > 15 && !satminkalStatusCol.toLowerCase().includes('satminkal')) {
                     finalSatminkal = satminkalStatusCol;
                     if (unitName && unitName !== finalSatminkal) {
                         finalLembaga = unitName;
                     }
                } else {
                     finalSatminkal = unitName || null;
                }
            }
            
            return {
                _originalRow: index + (useHeader ? 2 : 1),
                nik: nik,
                nama: nama,
                jenis_kelamin: finalJk,
                jabatan: jabatan,
                tmt: tmt,
                satminkal: finalSatminkal || null, // Ensure strict null if empty/false
                kategori: kategori,
                lembaga: finalLembaga, 
                status: statusUser || 'Guru',
                tahun: targetYear
            };
        }).filter(r => r.nama && r.nama.trim().length > 0); 

        // Check result
        if (mappedData.length === 0 && rawJson.length > 0) {
            Swal.fire({
                title: "Gagal Membaca Kolom Nama",
                html: `
                    <div class="text-left text-sm">
                        <p class="mb-2">Sistem berhasil membaca <b>${rawJson.length} baris</b>, tapi tidak menemukan data <b>Nama</b> yang valid.</p>
                        <ul class="list-disc pl-4 mb-2">
                            <li>Pastikan ada kolom header "NAMA" atau "NAMA GURU/KARYAWAN".</li>
                            <li>Atau pastikan Nama ada di <b>Kolom ke-3</b> (Urutan C).</li>
                        </ul>
                    </div>
                `,
                icon: "error"
            });
            setPreviewData([]);
            return;
        }

        // Generate Auto NIKs
        const now = new Date();
        const yearStr = String(targetYear || now.getFullYear());
        const monthStr = String(now.getMonth() + 1).padStart(2, '0');
        const prefix = `${yearStr}${monthStr}`;

        let currentSeq = startSequence;
        const finalData = mappedData.map(row => {
            if (row.nik === "__AUTO_GENERATE__") {
                currentSeq++;
                const seqStr = String(currentSeq).padStart(4, '0');
                return { ...row, nik: `${prefix}${seqStr}` };
            }
            return row;
        });

        setPreviewData(finalData);
        
        // Show success toast
        if (finalData.length > 0) {
            const Toast = window.Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
            });
            Toast.fire({
                icon: 'success',
                title: `${finalData.length} data siap diimport`
            });
        }

    }, [rawJson, startSequence, targetYear, useHeader]);

    const handleImport = async () => {
        setImporting(true);
        const client = window.SupabaseUtils.getClient();
        let successCount = 0;
        let failCount = 0;
        const total = previewData.length;
        const newLogs = [];

        // Check if we need to auto-create institutions from Satminkal
        // Only if finalSatminkal is NOT null
        const uniqueSatminkals = [...new Set(previewData.map(r => r.satminkal).filter(Boolean))];
        if (uniqueSatminkals.length > 0) {
             try {
                 const { data: existing } = await client.from('institutions').select('nama');
                 const existingNames = new Set((existing || []).map(e => e.nama));
                 const toAdd = uniqueSatminkals.filter(name => !existingNames.has(name)).map(name => ({ nama: name }));
                 
                 if (toAdd.length > 0) {
                     await client.from('institutions').insert(toAdd);
                 }
             } catch (e) {
                 console.warn("Auto-create institutions failed", e);
             }
        }

        for (let i = 0; i < total; i++) {
            const row = previewData[i];
            setProgress({ current: i + 1, total, success: successCount, failed: failCount });
            
            try {
                const { _originalRow, ...dbRow } = row;
                let finalRow = { ...dbRow };
                let nikChanged = false;

                // Duplicate Check by NIK + Tahun
                if (finalRow.nik && finalRow.nik !== "__AUTO_GENERATE__") {
                    const { data: existingNik } = await client
                        .from('employees')
                        .select('id')
                        .eq('nik', finalRow.nik)
                        .eq('tahun', finalRow.tahun)
                        .maybeSingle();
                    
                    if (existingNik) {
                        const oldNik = finalRow.nik;
                        const randomSuffix = Math.floor(1000 + Math.random() * 9000);
                        finalRow.nik = `${oldNik}-DUP${randomSuffix}`; 
                        nikChanged = true;
                    }
                }

                // If Satminkal is null/empty, we ensure it's null in payload
                if (!finalRow.satminkal) {
                    finalRow.satminkal = null;
                }

                const { error } = await client.from('employees').insert([finalRow]);
                
                if (error) {
                    // Retry with unique NIK if error is constraint violation
                    if (error.code === '23505' || error.message.includes('employees_nik_key') || error.message.includes('unique')) {
                         finalRow.nik = `${finalRow.nik}-${Date.now()}`;
                         const { error: retryError } = await client.from('employees').insert([finalRow]);
                         if (retryError) throw retryError;
                         nikChanged = true;
                    } else {
                        throw error;
                    }
                }
                
                if (nikChanged) {
                     newLogs.push(`Row ${_originalRow}: NIK duplikat. Disimpan sbg: ${finalRow.nik}`);
                }
                
                successCount++;
            } catch (err) {
                let msg = err.message || JSON.stringify(err);
                if (msg.includes('foreign key constraint')) {
                    msg = `Lembaga "${row.satminkal}" tidak valid/terdaftar.`;
                }
                newLogs.push(`Row ${row._originalRow}: Gagal - ${msg}`);
                failCount++;
            }
        }

        setLogs(newLogs);
        setProgress({ current: total, total, success: successCount, failed: failCount });
        setImporting(false);
        
        if (successCount > 0) {
            setTimeout(() => {
                Swal.fire({
                    title: "Import Selesai!",
                    html: `<b>${successCount}</b> berhasil.<br/><b>${failCount}</b> gagal.`,
                    icon: failCount > 0 ? "warning" : "success"
                }).then(() => {
                    onSuccess();
                });
            }, 500);
        } else if (failCount > 0) {
             Swal.fire("Gagal", "Semua data gagal diimport. Cek log.", "error");
        }
    };

    const handleClear = () => {
        setPasteContent('');
        setRawJson([]);
        setPreviewData([]);
        setLogs([]);
    };

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" data-name="excel-import" data-file="components/ExcelImport.js">
            <div className="bg-white rounded-lg shadow-xl w-full max-w-6xl max-h-[95vh] flex flex-col animate-slide-in">
                <div className="flex justify-between items-center p-6 border-b">
                    <div>
                        <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
                            <div className="icon-clipboard-paste text-teal-600"></div>
                            Import Data Excel
                        </h2>
                        <p className="text-xs text-gray-500 mt-1">Copy-paste dari Excel (Unit, NIK, Nama, JK, Jabatan, TMT, Status Satminkal)</p>
                    </div>
                    {!importing && (
                        <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
                            <div className="icon-x text-2xl"></div>
                        </button>
                    )}
                </div>

                <div className="p-6 overflow-y-auto flex-1">
                    {/* Config Area */}
                    {!importing && (
                        <div className="mb-6 space-y-4">
                             <div className="bg-blue-50 p-4 rounded-lg border border-blue-100 flex flex-col md:flex-row justify-between items-center gap-4">
                                <div className="flex-1">
                                    <h3 className="font-bold text-blue-800 text-sm">Logika Import (Format Baru):</h3>
                                    <ul className="text-xs text-blue-700 mt-1 list-disc pl-4 space-y-1">
                                        <li>Kolom <b>NAMA UNIT</b> (Kolom A) akan dibaca sebagai lokasi kerja.</li>
                                        <li>Kolom <b>SATMINKAL</b> (Kolom G) akan dicek sebagai status:</li>
                                        <li>Jika "Non Satminkal": Nama Unit masuk ke kolom <i>Lembaga Lain</i>, dan Satminkal dikosongkan (agar tidak error).</li>
                                        <li>Jika "Satminkal": Nama Unit masuk sebagai <i>Induk</i>.</li>
                                    </ul>
                                </div>
                            </div>

                            <div className="flex flex-wrap items-end gap-4">
                                <div className="w-32">
                                    <label className="block text-xs font-bold text-gray-500 mb-1">
                                        Target Tahun
                                    </label>
                                    <input 
                                        type="number" 
                                        className="w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 font-bold"
                                        value={targetYear}
                                        onChange={(e) => setTargetYear(Number(e.target.value))}
                                    />
                                </div>
                                <div className="flex items-center gap-2 pb-2">
                                    <input 
                                        type="checkbox" 
                                        id="useHeader"
                                        className="w-4 h-4 text-teal-600 rounded"
                                        checked={useHeader}
                                        onChange={(e) => setUseHeader(e.target.checked)}
                                    />
                                    <label htmlFor="useHeader" className="text-sm text-gray-700 cursor-pointer select-none">
                                        Baris pertama adalah <strong>Judul Kolom</strong>
                                    </label>
                                </div>
                            </div>
                        </div>
                    )}

                    {previewData.length === 0 ? (
                        <div className="space-y-4">
                            <textarea
                                className="w-full h-64 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none font-mono text-xs whitespace-pre leading-relaxed"
                                placeholder={`Klik di sini, lalu tekan Ctrl+V (Paste) data dari Excel Anda...`}
                                value={pasteContent}
                                onChange={(e) => setPasteContent(e.target.value)}
                            ></textarea>
                            
                            <div className="flex justify-end">
                                <button
                                    onClick={parsePasteData}
                                    disabled={!pasteContent.trim()}
                                    className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2 rounded shadow flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-bold"
                                >
                                    <div className="icon-arrow-right text-lg"></div>
                                    Proses Data
                                </button>
                            </div>
                        </div>
                    ) : (
                        <div className="space-y-4">
                             {!importing && progress.total === 0 && (
                                <div className="flex justify-between items-center bg-green-50 p-3 rounded border border-green-200 animate-fade-in">
                                    <div className="flex items-center gap-3">
                                        <div className="icon-circle-check text-green-600 text-2xl"></div>
                                        <div>
                                            <div className="font-bold text-gray-800">Berhasil Membaca Data</div>
                                            <div className="text-xs text-gray-600">{previewData.length} baris siap diimport.</div>
                                        </div>
                                    </div>
                                    <button 
                                        onClick={handleClear}
                                        className="text-red-500 hover:text-red-700 text-sm font-medium border border-red-200 px-3 py-1 rounded hover:bg-red-50"
                                    >
                                        Batal / Ulangi
                                    </button>
                                </div>
                            )}

                            {!importing && (
                                <div className="border border-gray-200 rounded overflow-hidden max-h-80 overflow-y-auto shadow-inner bg-white">
                                    <table className="w-full text-xs text-left whitespace-nowrap">
                                        <thead className="bg-gray-100 text-gray-600 font-medium sticky top-0 z-10 shadow-sm">
                                            <tr>
                                                <th className="px-3 py-2 border-b w-10">No</th>
                                                <th className="px-3 py-2 border-b">Nama</th>
                                                <th className="px-3 py-2 border-b bg-green-50">Satminkal (Induk)</th>
                                                <th className="px-3 py-2 border-b bg-yellow-50">Lembaga Lain</th>
                                                <th className="px-3 py-2 border-b">Jabatan</th>
                                                <th className="px-3 py-2 border-b">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-gray-200 bg-white">
                                            {previewData.map((row, i) => (
                                                <tr key={i} className="hover:bg-gray-50">
                                                    <td className="px-3 py-2 text-gray-400 text-center">{i + 1}</td>
                                                    <td className="px-3 py-2 font-bold text-gray-800">{row.nama}</td>
                                                    <td className="px-3 py-2 bg-green-50 font-bold text-green-800">
                                                        {row.satminkal ? row.satminkal : <span className="text-gray-400 italic font-normal">Null (Non-Induk)</span>}
                                                    </td>
                                                    <td className="px-3 py-2 bg-yellow-50 text-gray-600">{row.lembaga || '-'}</td>
                                                    <td className="px-3 py-2 text-gray-500">{row.jabatan}</td>
                                                    <td className="px-3 py-2 text-gray-500">{row.status}</td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            )}

                            {importing && (
                                <div className="text-center py-8 bg-gray-50 rounded-lg border border-gray-200 animate-fade-in">
                                    <div className="mb-4 font-bold text-lg text-gray-700">Sedang Mengimport Data...</div>
                                    <div className="w-3/4 mx-auto bg-gray-200 rounded-full h-4 mb-2 overflow-hidden shadow-inner">
                                        <div 
                                            className="bg-teal-600 h-4 rounded-full transition-all duration-300"
                                            style={{ width: `${(progress.current / progress.total) * 100}%` }}
                                        ></div>
                                    </div>
                                    <div className="text-sm text-gray-600">
                                        Memproses {progress.current} / {progress.total}
                                    </div>
                                </div>
                            )}

                            {logs.length > 0 && (
                                <div className="bg-gray-900 text-gray-300 p-4 rounded text-xs font-mono max-h-40 overflow-y-auto">
                                    {logs.map((log, i) => <div key={i} className="border-b border-gray-800 last:border-0 py-0.5">{log}</div>)}
                                </div>
                            )}
                        </div>
                    )}
                </div>

                <div className="p-6 border-t bg-gray-50 flex justify-end gap-3 rounded-b-lg">
                    {!importing && (
                        <>
                            <button 
                                onClick={onClose}
                                className="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-white transition-colors"
                            >
                                Batal
                            </button>
                            {previewData.length > 0 && progress.total === 0 && (
                                <button 
                                    onClick={handleImport}
                                    className="px-6 py-2 bg-teal-600 text-white rounded hover:bg-teal-700 transition-colors flex items-center gap-2 shadow-md font-bold"
                                >
                                    <div className="icon-save text-lg"></div>
                                    Mulai Import
                                </button>
                            )}
                            {progress.total > 0 && (
                                <button 
                                    onClick={onClose}
                                    className="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900 transition-colors"
                                >
                                    Tutup
                                </button>
                            )}
                        </>
                    )}
                </div>
            </div>
        </div>
    );
}