// ============================================================
//  Enba Recycling — İnsan Kaynakları Modülü
// ============================================================

function HrModule() {
    // ── Eyaletler (State) ───────────────────────────────────
    const [personel, setPersonel] = React.useState([]);
    const [attendance, setAttendance] = React.useState([]);
    const [payments, setPayments] = React.useState([]);
    const [debts, setDebts] = React.useState([]);
    const [loading, setLoading] = React.useState(true);

    // ── Data Fetching ───────────────────────────────────────
    const fetchData = async () => {
        if (!window.DataService) return;
        setLoading(true);
        try {
            const [p, a, pay, d] = await Promise.all([
                window.DataService.getPersonnel(),
                window.DataService.getAttendance(),
                window.DataService.getPayments(),
                window.DataService.getDebts()
            ]);
            setPersonel(p.map(x => ({ ...x, sgkStatus: x.sgk_status, startDate: x.start_date })));
            setAttendance(a.map(x => ({ ...x, personId: x.person_id, workHours: x.work_hours, overtimeHours: x.overtime_hours })));
            setPayments(pay.map(x => ({ ...x, personId: x.person_id })));
            setDebts(d.map(x => ({ ...x, personId: x.person_id })));
        } catch (e) {
            console.error("İK verileri çekilemedi:", e);
        } finally {
            setLoading(false);
        }
    };

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

    // ── UI State ────────────────────────────────────────────
    const [activeTab, setActiveTab] = React.useState('personnel'); // personnel | attendance | payments | debts
    const [showModal, setShowModal] = React.useState(null); // 'person' | 'attendance' | 'payment' | 'debt'
    const [editingItem, setEditingItem] = React.useState(null);
    const [overtimeInputs, setOvertimeInputs] = React.useState({}); // { [personId]: string }

    // ── Handlers ────────────────────────────────────────────
    const savePerson = async (data) => {
        try {
            const result = await window.DataService.savePerson({ ...data, id: editingItem?.id });
            if (result) await fetchData();
            setShowModal(null);
            setEditingItem(null);
        } catch (e) { alert("Personel kaydedilemedi."); }
    };

    const deletePerson = async (id) => {
        if (confirm(window.t('common.delete') + '?')) {
            try {
                await window.DataService.deleteData('personnel', id);
                await fetchData();
            } catch (e) { alert("Personel silinemedi."); }
        }
    };

    const saveAttendance = async (data, closeModal = true) => {
        try {
            await window.DataService.saveAttendance(data);
            await fetchData();
            if (closeModal) setShowModal(null);
        } catch (e) { alert("Puantaj kaydedilemedi."); }
    };

    const savePayment = async (data) => {
        try {
            await window.DataService.savePayment(data);
            await fetchData();
            setShowModal(null);
        } catch (e) { alert("Ödeme kaydedilemedi."); }
    };

    const saveDebt = async (data) => {
        try {
            await window.DataService.saveDebt(data);
            await fetchData();
            setShowModal(null);
        } catch (e) { alert("Borç kaydedilemedi."); }
    };

    // ── Styles ──────────────────────────────────────────────
    const cardStyle = {
        background: 'var(--surface-container-lowest)',
        padding: '24px',
        borderRadius: '1.2rem',
        border: '1px solid var(--surface-container-highest)',
        boxShadow: 'var(--shadow-sm)',
        marginBottom: '24px'
    };

    const tabBtnStyle = (active) => ({
        padding: '10px 20px',
        borderRadius: '2rem',
        border: 'none',
        background: active ? 'var(--enba-dark)' : 'var(--surface-container-high)',
        color: active ? '#fff' : 'var(--on-surface-variant)',
        fontWeight: 700,
        fontSize: '14px',
        cursor: 'pointer',
        transition: 'all 0.2s',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
    });

    const tableHeaderStyle = {
        textAlign: 'left',
        padding: '12px 16px',
        fontSize: '11px',
        fontWeight: 700,
        color: 'var(--on-surface-variant)',
        textTransform: 'uppercase',
        letterSpacing: '0.5px',
        borderBottom: '2px solid var(--surface-container-highest)'
    };

    const tableCellStyle = {
        padding: '12px 16px',
        fontSize: '14px',
        color: 'var(--on-surface)',
        borderBottom: '1px solid var(--surface-container-highest)'
    };

    return (
        <div style={{ padding: '32px 40px', maxWidth: '1200px', margin: '0 auto', fontFamily: "'Inter', sans-serif" }}>
            
            {/* Header */}
            <div style={{ marginBottom: '32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                    <h1 style={{ fontFamily: "'Manrope', sans-serif", fontSize: '28px', color: 'var(--enba-dark)', margin: '0 0 4px' }}>
                        ⚡  {window.t('modules.hr')}
                    </h1>
                    <p style={{ margin: 0, color: 'var(--on-surface-variant)', fontSize: '14px' }}>
                        Personel yönetimi, puantaj, ödemeler ve finansal takip merkezi.
                    </p>
                </div>
                <button 
                    onClick={() => { setEditingItem(null); setShowModal('person'); }}
                    style={{ 
                        padding: '12px 24px', background: 'var(--enba-orange)', color: '#fff', 
                        border: 'none', borderRadius: '0.75rem', fontWeight: 700, cursor: 'pointer',
                        display: 'flex', alignItems: 'center', gap: '8px', boxShadow: '0 4px 12px rgba(39,174,96,0.3)'
                    }}
                >
                    <span>+</span> {window.t('hr.add_person')}
                </button>
            </div>

            {/* Tabs */}
            <div style={{ display: 'flex', gap: '8px', marginBottom: '24px', overflowX: 'auto', paddingBottom: '8px' }}>
                <button onClick={() => setActiveTab('personnel')} style={tabBtnStyle(activeTab === 'personnel')}>⚡  {window.t('hr.personnel')}</button>
                <button onClick={() => setActiveTab('attendance')} style={tabBtnStyle(activeTab === 'attendance')}>⏱️ {window.t('hr.attendance')}</button>
                <button onClick={() => setActiveTab('payments')} style={tabBtnStyle(activeTab === 'payments')}>⚡  {window.t('hr.payments')}</button>
                <button onClick={() => setActiveTab('debts')} style={tabBtnStyle(activeTab === 'debts')}>⚡ ️ {window.t('hr.debts')}</button>
            </div>

            {/* Content Area */}
            <div style={cardStyle}>
                {loading ? (
                    <div style={{ padding: '40px', textAlign: 'center', color: '#999' }}>Yükleniyor...</div>
                ) : (
                    <>
                        {activeTab === 'personnel' && (
                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                        <thead>
                            <tr>
                                <th style={tableHeaderStyle}>{window.t('hr.name')}</th>
                                <th style={tableHeaderStyle}>{window.t('hr.position')}</th>
                                <th style={tableHeaderStyle}>Departman</th>
                                <th style={tableHeaderStyle}>{window.t('hr.salary')}</th>
                                <th style={tableHeaderStyle}>{window.t('hr.sgk')}</th>
                                <th style={tableHeaderStyle}>{window.t('hr.start_date')}</th>
                                <th style={tableHeaderStyle}>Fazla Mesai (Bu Ay)</th>
                                <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>{window.t('common.actions')}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {personel.map(p => {
                                const otVal = overtimeInputs[p.id] || '';
                                const hasValue = otVal !== '' && Number(otVal) > 0;
                                return (
                                <tr key={p.id}>
                                    <td style={{ ...tableCellStyle, fontWeight: 600 }}>{p.name}</td>
                                    <td style={tableCellStyle}>{p.position}</td>
                                    <td style={tableCellStyle}>
                                        <span style={{ fontSize: '12px', color: 'var(--enba-dark)', fontWeight: 600, background: 'rgba(21,34,46,0.05)', padding: '2px 6px', borderRadius: '4px' }}>
                                            {p.department || 'Üretim'}
                                        </span>
                                    </td>
                                    <td style={{ ...tableCellStyle, color: 'var(--enba-dark)', fontWeight: 700 }}>{window.fmt(p.salary)} ₺</td>
                                    <td style={tableCellStyle}>
                                        <span style={{
                                            padding: '4px 10px', borderRadius: '1rem', fontSize: '11px', fontWeight: 800,
                                            background: p.sgkStatus === 'Aktif' ? 'rgba(39,174,96,0.1)' : 'rgba(0,0,0,0.05)',
                                            color: p.sgkStatus === 'Aktif' ? 'var(--enba-orange)' : '#999'
                                        }}>
                                            {p.sgkStatus}
                                        </span>
                                    </td>
                                    <td style={tableCellStyle}>{p.startDate}</td>
                                    <td style={{ ...tableCellStyle }}>
                                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                                            <input
                                                type="number"
                                                min="0"
                                                placeholder="Saat"
                                                value={otVal}
                                                onChange={e => setOvertimeInputs(prev => ({ ...prev, [p.id]: e.target.value }))}
                                                style={{
                                                    width: '72px', padding: '6px 8px', borderRadius: '0.4rem',
                                                    border: '1px solid ' + (hasValue ? '#27ae60' : '#ddd'),
                                                    fontSize: '13px', outline: 'none',
                                                    transition: 'border-color 0.2s'
                                                }}
                                                onFocus={window.selectOnFocus}
                                            />
                                            {hasValue && (
                                                <button
                                                    onClick={() => {
                                                        const now = new Date();
                                                        saveAttendance({
                                                            personId: p.id,
                                                            month: now.getMonth() + 1,
                                                            year: now.getFullYear(),
                                                            workHours: 225,
                                                            overtimeHours: Number(otVal),
                                                            notes: 'Hızlı mesai girişi'
                                                        }, false);
                                                        setOvertimeInputs(prev => ({ ...prev, [p.id]: '' }));
                                                    }}
                                                    title="Kaydet"
                                                    style={{
                                                        width: '30px', height: '30px', borderRadius: '50%',
                                                        border: 'none', background: '#27ae60', color: '#fff',
                                                        cursor: 'pointer', fontSize: '15px', display: 'flex',
                                                        alignItems: 'center', justifyContent: 'center',
                                                        boxShadow: '0 2px 6px rgba(39,174,96,0.4)',
                                                        flexShrink: 0
                                                    }}
                                                >
                                                    ✓
                                                </button>
                                            )}
                                        </div>
                                    </td>
                                    <td style={{ ...tableCellStyle, textAlign: 'right' }}>
                                        <button onClick={() => { setEditingItem(p); setShowModal('person'); }} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px', marginRight: '8px' }}>✏️</button>
                                        <button onClick={() => deletePerson(p.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px' }}>⚡ ️</button>
                                    </td>
                                </tr>
                                );
                            })}
                        </tbody>
                    </table>
                )}

                {activeTab === 'attendance' && (
                    <div>
                        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
                            <button onClick={() => setShowModal('attendance')} style={{ padding: '8px 16px', borderRadius: '0.5rem', border: '1px solid var(--enba-orange)', color: 'var(--enba-orange)', fontWeight: 700, cursor: 'pointer', background: 'transparent' }}>+ Kayıt Ekle</button>
                        </div>
                        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                            <thead>
                                <tr>
                                    <th style={tableHeaderStyle}>Personel</th>
                                    <th style={tableHeaderStyle}>Dönem</th>
                                    <th style={tableHeaderStyle}>{window.t('hr.work_hours')}</th>
                                    <th style={tableHeaderStyle}>{window.t('hr.overtime')}</th>
                                    <th style={tableHeaderStyle}>Notlar</th>
                                </tr>
                            </thead>
                            <tbody>
                                {attendance.length > 0 ? attendance.map(a => (
                                    <tr key={a.id}>
                                        <td style={tableCellStyle}>{personel.find(p => p.id === a.personId)?.name || '—'}</td>
                                        <td style={tableCellStyle}>{a.month}/{a.year}</td>
                                        <td style={tableCellStyle}>{a.workHours} Saat</td>
                                        <td style={{ ...tableCellStyle, color: 'var(--enba-orange)', fontWeight: 700 }}>+{a.overtimeHours} Saat</td>
                                        <td style={tableCellStyle}>{a.notes || '—'}</td>
                                    </tr>
                                )) : (
                                    <tr><td colSpan="5" style={{ padding: '40px', textAlign: 'center', color: '#999' }}>Henüz puantaj kaydı bulunmuyor.</td></tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                )}

                {activeTab === 'payments' && (
                    <div>
                         <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
                            <button onClick={() => setShowModal('payment')} style={{ padding: '8px 16px', borderRadius: '0.5rem', border: '1px solid var(--enba-dark)', color: 'var(--enba-dark)', fontWeight: 700, cursor: 'pointer', background: 'transparent' }}>+ Ödeme Girişşi</button>
                        </div>
                        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                            <thead>
                                <tr>
                                    <th style={tableHeaderStyle}>Personel</th>
                                    <th style={tableHeaderStyle}>{window.t('hr.payment_date')}</th>
                                    <th style={tableHeaderStyle}>{window.t('hr.amount')}</th>
                                    <th style={tableHeaderStyle}>{window.t('hr.status')}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {payments.length > 0 ? payments.map(p => (
                                    <tr key={p.id}>
                                        <td style={tableCellStyle}>{personel.find(pers => pers.id === p.personId)?.name || '—'}</td>
                                        <td style={tableCellStyle}>{p.date}</td>
                                        <td style={{ ...tableCellStyle, fontWeight: 700 }}>{window.fmt(p.amount)} ₺</td>
                                        <td style={tableCellStyle}>
                                            <span style={{ 
                                                padding: '4px 10px', borderRadius: '1rem', fontSize: '11px', fontWeight: 800,
                                                background: p.status === 'Ödendi' ? 'rgba(39,174,96,0.1)' : 'rgba(255,164,0,0.1)',
                                                color: p.status === 'Ödendi' ? 'var(--enba-orange)' : '#f39c12'
                                            }}>
                                                {p.status}
                                            </span>
                                        </td>
                                    </tr>
                                )) : (
                                    <tr><td colSpan="4" style={{ padding: '40px', textAlign: 'center', color: '#999' }}>Henüz ödeme kaydı bulunmuyor.</td></tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                )}

                {activeTab === 'debts' && (
                    <div>
                         <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
                            <button onClick={() => setShowModal('debt')} style={{ padding: '8px 16px', borderRadius: '0.5rem', border: '1px solid #e74c3c', color: '#e74c3c', fontWeight: 700, cursor: 'pointer', background: 'transparent' }}>+ Avans/Borç Kaydı</button>
                        </div>
                        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                            <thead>
                                <tr>
                                    <th style={tableHeaderStyle}>Personel</th>
                                    <th style={tableHeaderStyle}>Tarih</th>
                                    <th style={tableHeaderStyle}>Tür</th>
                                    <th style={tableHeaderStyle}>{window.t('hr.amount')}</th>
                                    <th style={tableHeaderStyle}>Açıklama</th>
                                </tr>
                            </thead>
                            <tbody>
                                {debts.length > 0 ? debts.map(d => (
                                    <tr key={d.id}>
                                        <td style={tableCellStyle}>{personel.find(p => p.id === d.personId)?.name || '—'}</td>
                                        <td style={tableCellStyle}>{d.date}</td>
                                        <td style={tableCellStyle}>
                                            <span style={{ color: d.type === 'Avans' ? '#e67e22' : '#3498db', fontWeight: 700 }}>{d.type}</span>
                                        </td>
                                        <td style={{ ...tableCellStyle, fontWeight: 700, color: '#c0392b' }}>{window.fmt(d.amount)} ₺</td>
                                        <td style={tableCellStyle}>{d.description || '—'}</td>
                                    </tr>
                                )) : (
                                    <tr><td colSpan="5" style={{ padding: '40px', textAlign: 'center', color: '#999' }}>Henüz borç/alacak kaydı bulunmuyor.</td></tr>
                                )}
                            </tbody>
                        </table>
                        )}
                    </>
                )}
            </div>

            {/* Modals */}
            {showModal === 'person' && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
                    <div style={{ background: '#fff', padding: '32px', borderRadius: '1.5rem', width: '400px', boxShadow: '0 20px 50px rgba(0,0,0,0.3)' }}>
                        <h3 style={{ margin: '0 0 24px', fontFamily: "'Manrope', sans-serif" }}>{editingItem ? window.t('hr.edit_person') : window.t('hr.add_person')}</h3>
                        <form onSubmit={(e) => {
                            e.preventDefault();
                            const formData = new FormData(e.target);
                            savePerson({
                                name: formData.get('name'),
                                position: formData.get('position'),
                                department: formData.get('department'),
                                salary: Number(formData.get('salary')),
                                sgkStatus: formData.get('sgkStatus'),
                                startDate: formData.get('startDate')
                            });
                        }}>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>{window.t('hr.name')}</label>
                                <input name="name" defaultValue={editingItem?.name} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} />
                            </div>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>{window.t('hr.position')}</label>
                                <input name="position" defaultValue={editingItem?.position} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} />
                            </div>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Departman</label>
                                <select name="department" defaultValue={editingItem?.department || 'Üretim'} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }}>
                                    <option value="Üretim">Üretim</option>
                                    <option value="Lojistik">Lojistik</option>
                                    <option value="İdari">İdari</option>
                                    <option value="Teknik">Teknik</option>
                                </select>
                            </div>
                            <div style={{ marginBottom: '16px', display: 'flex', gap: '12px' }}>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>{window.t('hr.salary')} (₺)</label>
                                    <input name="salary" type="number" defaultValue={editingItem?.salary} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} onFocus={window.selectOnFocus} />
                                </div>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>{window.t('hr.sgk')}</label>
                                    <select name="sgkStatus" defaultValue={editingItem?.sgkStatus || 'Aktif'} style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }}>
                                        <option value="Aktif">Aktif</option>
                                        <option value="Pasif">Pasif</option>
                                    </select>
                                </div>
                            </div>
                            <div style={{ marginBottom: '24px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>{window.t('hr.start_date')}</label>
                                <input name="startDate" type="date" defaultValue={editingItem?.startDate || new Date().toISOString().split('T')[0]} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} />
                            </div>
                            <div style={{ display: 'flex', gap: '8px' }}>
                                <button type="button" onClick={() => setShowModal(null)} style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: '#eee', fontWeight: 600, cursor: 'pointer' }}>{window.t('common.cancel')}</button>
                                <button type="submit" style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: 'var(--enba-dark)', color: '#fff', fontWeight: 600, cursor: 'pointer' }}>{window.t('common.save')}</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {showModal === 'attendance' && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
                    <div style={{ background: '#fff', padding: '32px', borderRadius: '1.5rem', width: '400px' }}>
                        <h3 style={{ margin: '0 0 24px' }}>Puantaj Girişşi</h3>
                        <form onSubmit={(e) => {
                            e.preventDefault();
                            const formData = new FormData(e.target);
                            saveAttendance({
                                personId: formData.get('personId'),
                                month: formData.get('month'),
                                year: formData.get('year'),
                                workHours: formData.get('workHours'),
                                overtimeHours: formData.get('overtimeHours'),
                                notes: formData.get('notes')
                            });
                        }}>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Personel Seçimi</label>
                                <select name="personId" required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }}>
                                    <option value="">Seçiniz...</option>
                                    {personel.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                                </select>
                            </div>
                            <div style={{ marginBottom: '16px', display: 'flex', gap: '12px' }}>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Ay</label>
                                    <input name="month" type="number" min="1" max="12" defaultValue={new Date().getMonth() + 1} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} onFocus={window.selectOnFocus} />
                                </div>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Yıl</label>
                                    <input name="year" type="number" defaultValue={new Date().getFullYear()} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} onFocus={window.selectOnFocus} />
                                </div>
                            </div>
                            <div style={{ marginBottom: '16px', display: 'flex', gap: '12px' }}>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Çalışma Saati</label>
                                    <input name="workHours" type="number" defaultValue={225} style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} onFocus={window.selectOnFocus} />
                                </div>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Mesai</label>
                                    <input name="overtimeHours" type="number" defaultValue={0} style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} onFocus={window.selectOnFocus} />
                                </div>
                            </div>
                            <div style={{ marginBottom: '24px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Notlar</label>
                                <input name="notes" placeholder="Ekstra bilgi..." style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} />
                            </div>
                            <div style={{ display: 'flex', gap: '8px' }}>
                                <button type="button" onClick={() => setShowModal(null)} style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: '#eee', fontWeight: 600 }}>Talebi Kapat</button>
                                <button type="submit" style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: 'var(--enba-dark)', color: '#fff', fontWeight: 600 }}>Kaydı Oluştur</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {showModal === 'payment' && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
                    <div style={{ background: '#fff', padding: '32px', borderRadius: '1.5rem', width: '400px' }}>
                        <h3 style={{ margin: '0 0 24px' }}>Maaş Ödeme Kaydı</h3>
                        <form onSubmit={(e) => {
                            e.preventDefault();
                            const formData = new FormData(e.target);
                            savePayment({
                                personId: formData.get('personId'),
                                date: formData.get('date'),
                                amount: formData.get('amount'),
                                status: formData.get('status')
                            });
                        }}>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Personel</label>
                                <select name="personId" required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }}>
                                    {personel.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                                </select>
                            </div>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Tarih</label>
                                <input name="date" type="date" defaultValue={new Date().toISOString().split('T')[0]} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} />
                            </div>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Miktar (₺)</label>
                                <input name="amount" type="number" required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} onFocus={window.selectOnFocus} />
                            </div>
                            <div style={{ marginBottom: '24px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Durum</label>
                                <select name="status" style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }}>
                                    <option value="Ödendi">Ödendi</option>
                                    <option value="Bekliyor">Bekliyor</option>
                                </select>
                            </div>
                            <div style={{ display: 'flex', gap: '8px' }}>
                                <button type="button" onClick={() => setShowModal(null)} style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: '#eee', fontWeight: 600 }}>İptal</button>
                                <button type="submit" style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: 'var(--enba-dark)', color: '#fff', fontWeight: 600 }}>Kaydet</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {showModal === 'debt' && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
                    <div style={{ background: '#fff', padding: '32px', borderRadius: '1.5rem', width: '400px' }}>
                        <h3 style={{ margin: '0 0 24px' }}>Avans / Borç Kaydı</h3>
                        <form onSubmit={(e) => {
                            e.preventDefault();
                            const formData = new FormData(e.target);
                            saveDebt({
                                personId: formData.get('personId'),
                                date: formData.get('date'),
                                amount: formData.get('amount'),
                                type: formData.get('type'),
                                description: formData.get('description')
                            });
                        }}>
                             <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Personel</label>
                                <select name="personId" required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }}>
                                    {personel.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                                </select>
                            </div>
                            <div style={{ marginBottom: '16px', display: 'flex', gap: '12px' }}>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Tür</label>
                                    <select name="type" style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }}>
                                        <option value="Avans">Avans</option>
                                        <option value="Borç (Kesinti)">Borç (Kesinti)</option>
                                    </select>
                                </div>
                                <div style={{ flex: 1 }}>
                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Tarih</label>
                                    <input name="date" type="date" defaultValue={new Date().toISOString().split('T')[0]} required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} />
                                </div>
                            </div>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Tutar (₺)</label>
                                <input name="amount" type="number" required style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd' }} onFocus={window.selectOnFocus} />
                            </div>
                            <div style={{ marginBottom: '24px' }}>
                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>Açıklama</label>
                                <textarea name="description" style={{ width: '100%', padding: '10px', borderRadius: '0.5rem', border: '1px solid #ddd', minHeight: '60px' }} />
                            </div>
                            <div style={{ display: 'flex', gap: '8px' }}>
                                <button type="button" onClick={() => setShowModal(null)} style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: '#eee', fontWeight: 600 }}>Kapat</button>
                                <button type="submit" style={{ flex: 1, padding: '12px', borderRadius: '0.5rem', border: 'none', background: '#e74c3c', color: '#fff', fontWeight: 600 }}>Kaydet</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

        </div>
    );
}

window.HrModule = HrModule;