function EmployeeForm({ employee, onSave, onCancel, year }) {
    const [formData, setFormData] = React.useState({
        nik: '',
        nama: '',
        jenis_kelamin: 'L',
        jabatan: '',
        tmt: '',
        satminkal: '',
        // status: 'Guru', // Removed from default, will be derived or ignored if user wants "only kategori"
        kategori: 'Guru', // Default to Guru as it was the first option of Status
        lembaga: '',
        is_active: true,
        tanggal_keluar: '',
        alasan_keluar: '',
        tahun: year || new Date().getFullYear() 
    });
    const [loading, setLoading] = React.useState(false);
    const [generatingNik, setGeneratingNik] = React.useState(false);
    const [error, setError] = React.useState(null);
    const [lembagaList, setLembagaList] = React.useState([]);

    React.useEffect(() => {
        const fetchLembaga = async () => {
            const client = window.SupabaseUtils.getClient();
            if (!client) return;

            const { data } = await client
                .from('institutions')
                .select('nama')
                .order('nama', { ascending: true });
            
            if (data && data.length > 0) {
                setLembagaList(data.map(i => i.nama));
            } else {
                setLembagaList([
                    "MAM 1 Paciran", "SMAM 6 Paciran", "SMKM 8 Paciran", "SMPM 14 Paciran", 
                    "MTs.M 2 Paciran", "MI 16 Paciran", "MI 20 Paciran", "TK Aisyiyah 1", 
                    "TK Aisyiyah 2", "TK Aisyiyah 3", "Pondok Pesantren"
                ]);
            }
        };

        fetchLembaga();

        if (employee) {
            setFormData(employee);
        }
    }, [employee]);
    
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const generateNIK = async () => {
        setGeneratingNik(true);
        try {
            const client = window.SupabaseUtils.getClient();
            
            // Format: YYYYMM#### (urut per prefix)
            const now = new Date();
            const yearStr = String(formData.tahun || now.getFullYear());
            const monthStr = String(now.getMonth() + 1).padStart(2, '0');
            const prefix = `${yearStr}${monthStr}`;

            const { data, error } = await client
                .from('employees')
                .select('nik')
                .ilike('nik', `${prefix}%`)
                .order('nik', { ascending: false })
                .limit(1);

            if (error) throw error;

            let nextSeq = 1;
            if (data && data.length > 0 && data[0].nik) {
                const lastNik = String(data[0].nik);
                const suffix = lastNik.slice(prefix.length);
                if (/^\d{4}$/.test(suffix)) {
                    nextSeq = parseInt(suffix, 10) + 1;
                }
            }
            const nextNik = `${prefix}${String(nextSeq).padStart(4, '0')}`;
            
            setFormData(prev => ({ ...prev, nik: nextNik }));
            
        } catch (err) {
            console.error("Auto NIK Error:", err);
            const now = new Date();
            const yearStr = String(formData.tahun || now.getFullYear());
            const monthStr = String(now.getMonth() + 1).padStart(2, '0');
            const random = String(Math.floor(1000 + Math.random() * 9000));
            const newNik = `${yearStr}${monthStr}${random}`;
            setFormData(prev => ({ ...prev, nik: newNik }));
        } finally {
            setGeneratingNik(false);
        }
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError(null);

        try {
            const client = window.SupabaseUtils.getClient();
            if (!client) throw new Error("Koneksi database terputus");
            
            // Sanitize payload
            const payload = {
                ...formData,
                // Ensure satminkal is null if empty
                satminkal: formData.satminkal || null,
                tmt: formData.tmt || null,
                tanggal_keluar: formData.is_active ? null : (formData.tanggal_keluar || null),
                alasan_keluar: formData.is_active ? null : formData.alasan_keluar,
                // Status is now derived from Kategori if needed, or we just save category.
                // User said "jadikan sebagai kategori saja". So we save to kategori.
                // We might want to clear 'status' or set it to same value?
                // For now, let's keep status synced with kategori to be safe for existing logic that uses status
                status: formData.kategori 
            };
            
            if (employee) {
                // Update
                const { error } = await client
                    .from('employees')
                    .update(payload)
                    .eq('id', employee.id);
                if (error) throw error;
            } else {
                // Insert
                const { error } = await client
                    .from('employees')
                    .insert([payload]);
                if (error) throw error;
            }

            onSave();
        } catch (err) {
            console.error("Submit Error:", err);
            let msg = window.SupabaseUtils.formatError(err);
            
            if (msg.includes('foreign key constraint')) {
                msg = "Nama Satminkal tidak valid (tidak ada di Master Lembaga).";
            } else if (msg.includes('invalid input syntax for type date')) {
                msg = "Format tanggal tidak valid. Pastikan kolom tanggal terisi dengan benar atau biarkan kosong.";
            }
            
            setError(msg);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" data-name="employee-form" data-file="components/EmployeeForm.js">
            <div className="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] flex flex-col animate-slide-in overflow-hidden">
                {/* Header Fixed */}
                <div className="flex justify-between items-center p-6 border-b bg-gray-50">
                    <div>
                        <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
                            <div className={`icon-${employee ? 'pencil' : 'user-plus'} text-[var(--primary-color)]`}></div>
                            {employee ? 'Edit Data Pegawai' : 'Tambah Pegawai Baru'}
                        </h2>
                        <div className="text-xs text-gray-500 mt-1 flex items-center gap-1">
                            <span>Tahun Data:</span>
                            <span className="font-bold text-[var(--primary-color)] bg-teal-50 px-2 py-0.5 rounded border border-teal-100">
                                {formData.tahun}
                            </span>
                        </div>
                    </div>
                    <button onClick={onCancel} className="text-gray-400 hover:text-gray-600 transition-colors">
                        <div className="icon-x text-2xl"></div>
                    </button>
                </div>

                {/* Body Scrollable */}
                <div className="flex-1 overflow-y-auto p-6 bg-white">
                    <form id="employeeForm" onSubmit={handleSubmit}>
                        {error && (
                            <div className="bg-red-50 text-red-600 p-4 rounded-lg mb-6 border border-red-200 flex items-start gap-3">
                                <div className="icon-triangle-alert text-xl mt-0.5"></div>
                                <div>
                                    <strong className="block font-bold">Gagal menyimpan data</strong>
                                    <span className="text-sm">{error}</span>
                                </div>
                            </div>
                        )}

                        <div className="space-y-6">
                            {/* Section 1: Identitas Utama */}
                            <div>
                                <h3 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                                    <div className="icon-id-card"></div> Identitas Pegawai
                                </h3>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                                    <div className="md:col-span-1">
                                        <label className="block text-sm font-bold text-gray-700 mb-1">
                                            NIK <span className="text-red-500">*</span>
                                        </label>
                                        <div className="flex gap-2">
                                            <input 
                                                type="text" 
                                                name="nik"
                                                required
                                                value={formData.nik || ''}
                                                onChange={handleChange}
                                                className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all font-mono"
                                                placeholder="Nomor Induk Kependudukan"
                                            />
                                            <button 
                                                type="button"
                                                onClick={generateNIK}
                                                disabled={generatingNik}
                                                className="px-3 py-2 bg-gray-100 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-200 transition-colors flex items-center gap-1 disabled:opacity-70 disabled:cursor-not-allowed"
                                                title="Generate NIK Otomatis (Max + 1)"
                                            >
                                                {generatingNik ? (
                                                    <div className="animate-spin w-4 h-4 border-2 border-gray-500 border-t-transparent rounded-full"></div>
                                                ) : (
                                                    <div className="icon-wand-sparkles text-lg"></div>
                                                )}
                                                <span className="text-xs font-bold hidden sm:inline">Auto</span>
                                            </button>
                                        </div>
                                        <p className="text-[10px] text-gray-400 mt-1">Digunakan sebagai ID unik parsel. Auto: format YYYYMM#### (urut +1).</p>
                                    </div>
                                    <div className="md:col-span-1">
                                        <label className="block text-sm font-bold text-gray-700 mb-1">
                                            Nama Lengkap <span className="text-red-500">*</span>
                                        </label>
                                        <input 
                                            type="text" 
                                            name="nama"
                                            required
                                            value={formData.nama || ''}
                                            onChange={handleChange}
                                            className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all"
                                            placeholder="Nama lengkap beserta gelar"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-bold text-gray-700 mb-1">Jenis Kelamin</label>
                                        <div className="flex gap-4 mt-1">
                                            <label className={`flex-1 cursor-pointer border rounded-lg p-2 flex items-center justify-center gap-2 transition-all ${formData.jenis_kelamin === 'L' ? 'bg-blue-50 border-blue-200 text-blue-700 font-bold' : 'border-gray-200 text-gray-500 hover:bg-gray-50'}`}>
                                                <input 
                                                    type="radio" 
                                                    name="jenis_kelamin" 
                                                    value="L" 
                                                    checked={formData.jenis_kelamin === 'L'} 
                                                    onChange={handleChange} 
                                                    className="hidden" 
                                                />
                                                <div className="icon-user"></div> Laki-laki
                                            </label>
                                            <label className={`flex-1 cursor-pointer border rounded-lg p-2 flex items-center justify-center gap-2 transition-all ${formData.jenis_kelamin === 'P' ? 'bg-pink-50 border-pink-200 text-pink-700 font-bold' : 'border-gray-200 text-gray-500 hover:bg-gray-50'}`}>
                                                <input 
                                                    type="radio" 
                                                    name="jenis_kelamin" 
                                                    value="P" 
                                                    checked={formData.jenis_kelamin === 'P'} 
                                                    onChange={handleChange} 
                                                    className="hidden" 
                                                />
                                                <div className="icon-user"></div> Perempuan
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <label className="block text-sm font-bold text-gray-700 mb-1">TMT (Tahun Mulai Tugas)</label>
                                        <input 
                                            type="date" 
                                            name="tmt"
                                            value={formData.tmt || ''}
                                            onChange={handleChange}
                                            className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none"
                                        />
                                    </div>
                                </div>
                            </div>

                            <hr className="border-gray-100" />

                            {/* Section 2: Kepegawaian */}
                            <div>
                                <h3 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                                    <div className="icon-briefcase"></div> Status Kepegawaian
                                </h3>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                                    <div>
                                        <label className="block text-sm font-bold text-gray-700 mb-1">Jabatan</label>
                                        <input 
                                            type="text" 
                                            name="jabatan"
                                            value={formData.jabatan || ''}
                                            onChange={handleChange}
                                            className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none"
                                            placeholder="Contoh: Guru Mapel, Kepala Sekolah"
                                        />
                                    </div>
                                    
                                    {/* KATEGORI - Replaces previous Status & Kategori inputs */}
                                    <div>
                                        <label className="block text-sm font-bold text-gray-700 mb-1">Kategori (Status)</label>
                                        <select 
                                            name="kategori"
                                            value={formData.kategori || 'Guru'}
                                            onChange={handleChange}
                                            className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none bg-white"
                                        >
                                            <option value="Guru">Guru</option>
                                            <option value="Tenaga Kependidikan">Tenaga Kependidikan</option>
                                            <option value="Pegawai">Pegawai</option>
                                            {/* Allow keeping existing value if it's not in the list (e.g. legacy data) */}
                                            {formData.kategori && !['Guru', 'Tenaga Kependidikan', 'Pegawai'].includes(formData.kategori) && (
                                                <option value={formData.kategori}>{formData.kategori}</option>
                                            )}
                                        </select>
                                    </div>

                                    <div>
                                        <label className="block text-sm font-bold text-gray-700 mb-1">Satminkal (Induk)</label>
                                        <select 
                                            name="satminkal"
                                            value={formData.satminkal || ''}
                                            onChange={handleChange}
                                            className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none bg-white"
                                        >
                                            <option value="">-- Non Satminkal / Tidak Ada --</option>
                                            {lembagaList.map(l => <option key={l} value={l}>{l}</option>)}
                                        </select>
                                        <p className="text-[10px] text-gray-400 mt-1">Tempat induk mengajar.</p>
                                    </div>
                                    
                                    {/* Lembaga Lain - Full Width */}
                                    <div className="md:col-span-2">
                                        <label className="block text-sm font-bold text-gray-700 mb-1">Unit / Tempat Mengajar Lain</label>
                                        <input 
                                            type="text"
                                            name="lembaga"
                                            value={formData.lembaga || ''}
                                            onChange={handleChange}
                                            className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none"
                                            placeholder="Jika mengajar di tempat lain, pisahkan dengan koma."
                                        />
                                    </div>
                                </div>
                            </div>

                            {/* Section 3: Status Aktif */}
                            <div className={`p-4 rounded-lg border transition-colors ${formData.is_active ? 'bg-gray-50 border-gray-200' : 'bg-red-50 border-red-200'}`}>
                                <div className="flex items-center gap-3 mb-4">
                                    <div className="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
                                        <input 
                                            type="checkbox" 
                                            name="is_active" 
                                            id="toggle_active" 
                                            checked={formData.is_active !== false}
                                            onChange={(e) => setFormData(prev => ({ ...prev, is_active: e.target.checked }))}
                                            className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 right-6"
                                            style={{right: formData.is_active ? '0' : '50%'}}
                                        />
                                        <label htmlFor="toggle_active" className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer ${formData.is_active ? 'bg-teal-500' : 'bg-gray-300'}`}></label>
                                    </div>
                                    <label htmlFor="toggle_active" className="font-bold text-gray-700">
                                        {formData.is_active ? 'Status: Pegawai Aktif' : 'Status: Non-Aktif / Keluar'}
                                    </label>
                                </div>

                                {formData.is_active === false && (
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-fade-in pl-2 border-l-4 border-red-300">
                                        <div>
                                            <label className="block text-sm font-bold text-red-700 mb-1">Tanggal Keluar</label>
                                            <input 
                                                type="date"
                                                name="tanggal_keluar"
                                                value={formData.tanggal_keluar || ''}
                                                onChange={handleChange}
                                                required={!formData.is_active}
                                                className="w-full p-2 border border-red-300 rounded bg-white outline-none focus:ring-1 focus:ring-red-500"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-bold text-red-700 mb-1">Alasan</label>
                                            <input 
                                                type="text"
                                                name="alasan_keluar"
                                                value={formData.alasan_keluar || ''}
                                                onChange={handleChange}
                                                required={!formData.is_active}
                                                className="w-full p-2 border border-red-300 rounded bg-white outline-none focus:ring-1 focus:ring-red-500"
                                                placeholder="Contoh: Pensiun, Pindah Tugas"
                                            />
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </form>
                </div>

                {/* Footer Fixed */}
                <div className="p-6 border-t bg-gray-50 flex justify-end gap-3">
                    <button 
                        type="button" 
                        onClick={onCancel}
                        className="px-5 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-white hover:shadow-sm transition-all font-medium"
                    >
                        Batal
                    </button>
                    <button 
                        type="submit" 
                        form="employeeForm"
                        disabled={loading}
                        className="px-6 py-2.5 bg-[var(--primary-color)] text-white rounded-lg hover:bg-[var(--primary-hover)] transition-all shadow-sm hover:shadow-md flex items-center gap-2 font-bold disabled:opacity-70 disabled:cursor-not-allowed"
                    >
                        {loading ? (
                            <>
                                <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full"></div>
                                Menyimpan...
                            </>
                        ) : (
                            <>
                                <div className="icon-save text-lg"></div>
                                Simpan Data
                            </>
                        )}
                    </button>
                </div>
            </div>
        </div>
    );
}