const { useState, useMemo, useEffect } = React;

window.AdminSubsidios = function({ globalUsers = [], settings = {}, refreshData }) {
    const [subsidies, setSubsidies] = useState([]);
    const [showModal, setShowModal] = useState(false);
    const [userId, setUserId] = useState('');
    const [startDate, setStartDate] = useState(window.getNICDate());
    const [endDate, setEndDate] = useState(window.getNICDate());
    const [diagnosis, setDiagnosis] = useState('');
    const [ticketNum, setTicketNum] = useState('');
    const [carenciaAction, setCarenciaAction] = useState('vacaciones'); // 'vacaciones', 'con_goce', 'sin_goce'
    const [isSaving, setIsSaving] = useState(false);

    const loadSubsidies = async () => {
        const res = await window.apiCall('get_subsidies', {});
        if (res && res.success) setSubsidies(res.subsidies || []);
    };

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

    const totalDays = useMemo(() => {
        return window.getDaysDiff(startDate, endDate);
    }, [startDate, endDate]);

    const carenciaDays = Math.min(3, totalDays);
    const inssCoveredDays = Math.max(0, totalDays - 3);

    const handleSaveSubsidy = async (e) => {
        e.preventDefault();
        if (!userId) return alert("Selecciona un colaborador.");
        setIsSaving(true);

        const res = await window.apiCall('save_subsidy', {
            user_id: userId,
            start_date: startDate,
            end_date: endDate,
            total_days: totalDays,
            diagnosis: diagnosis || 'Reposo Médico INSS',
            carencia_action: carenciaAction,
            inss_ticket_num: ticketNum
        });

        setIsSaving(false);
        if (res && res.success) {
            setShowModal(false);
            setDiagnosis('');
            setTicketNum('');
            loadSubsidies();
            if (refreshData) await refreshData();
        } else {
            alert("Error al registrar subsidio: " + (res?.error || ""));
        }
    };

    return (
        <div className="space-y-6 fade-in font-sans">
            {/* CABECERA */}
            <div className="bg-white p-6 rounded-2xl shadow-xs border border-slate-200/80 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h2 className="text-2xl font-black text-slate-900 tracking-tight">Control de Subsidios Médicos (INSS / MINSA)</h2>
                    <p className="text-slate-400 font-bold uppercase text-[10px] mt-0.5 tracking-widest">
                        Gestión de Carencia (Días 1-3) • Cobertura INSS (Día 4 en adelante) • Protección Salarial
                    </p>
                </div>
                <button 
                    onClick={() => setShowModal(true)} 
                    className="px-5 py-3.5 min-h-[44px] bg-slate-900 hover:bg-black text-white rounded-xl font-bold uppercase text-xs tracking-wider shadow-xs transition-all cursor-pointer flex items-center gap-2"
                >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4"/></svg>
                    <span>+ Registrar Subsidio</span>
                </button>
            </div>

            {/* TABLA DE HISTORIAL DE SUBSIDIOS */}
            <div className="bg-white rounded-2xl shadow-xs border border-slate-200/80 overflow-hidden">
                <table className="w-full text-left border-collapse">
                    <thead className="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                        <tr>
                            <th className="p-5 pl-6">Colaborador</th>
                            <th className="p-5">Período de Reposo</th>
                            <th className="p-5 text-center">Días Totales</th>
                            <th className="p-5">Tratamiento Legal</th>
                            <th className="p-5">Diagnóstico / No. Boleta</th>
                            <th className="p-5 pr-6 text-right">Acción</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 text-xs font-bold text-slate-700">
                        {subsidies.length === 0 ? (
                            <tr>
                                <td colSpan="6" className="p-8 text-center text-slate-400">
                                    No hay registros de subsidios activos ni históricos.
                                </td>
                            </tr>
                        ) : (
                            subsidies.map(s => (
                                <tr key={s.id} className="hover:bg-slate-50/60 transition-colors">
                                    <td className="p-5 pl-6 font-black text-slate-900">{s.user_name}</td>
                                    <td className="p-5">
                                        {window.formatDateToNIC(s.start_date)} al {window.formatDateToNIC(s.end_date)}
                                    </td>
                                    <td className="p-5 text-center">
                                        <span className="px-3 py-1 bg-slate-100 rounded-xl font-black text-slate-900 text-sm">
                                            {s.total_days} d
                                        </span>
                                    </td>
                                    <td className="p-5">
                                        <div className="space-y-1 text-[10px]">
                                            <span className="block text-amber-700 font-black">
                                                • Carencia (1-3 d): {s.carencia_days} d ({s.carencia_action.toUpperCase()})
                                            </span>
                                            {s.inss_covered_days > 0 ? (
                                                <span className="block text-slate-900 font-bold">
                                                    • INSS Cubre: {s.inss_covered_days} d (Subsidio Económico)
                                                </span>
                                            ) : (
                                                <span className="block text-slate-400 font-semibold">
                                                    • Sin cobertura INSS (&le; 3 días)
                                                </span>
                                            )}
                                        </div>
                                    </td>
                                    <td className="p-5">
                                        <span className="font-bold text-slate-800 block">{s.diagnosis}</span>
                                        {s.inss_ticket_num && <span className="text-[10px] text-slate-400 block font-mono">Boleta: {s.inss_ticket_num}</span>}
                                    </td>
                                    <td className="p-5 pr-6 text-right">
                                        <button 
                                            onClick={async () => {
                                                if (confirm("¿Eliminar este registro de subsidio?")) {
                                                    await window.apiCall('delete_subsidy', { id: s.id });
                                                    loadSubsidies();
                                                    if (refreshData) await refreshData();
                                                }
                                            }}
                                            className="p-2 text-slate-400 hover:text-red-600 rounded-xl hover:bg-red-50 transition-all cursor-pointer"
                                            title="Eliminar registro"
                                        >
                                            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
            </div>

            {/* MODAL REGISTRAR SUBSIDIO */}
            {showModal && (
                <div className="fixed inset-0 bg-slate-900/60 z-[140] flex items-center justify-center p-4 fade-in" onClick={() => setShowModal(false)}>
                    <div className="bg-white rounded-2xl p-6 sm:p-7 max-w-lg w-full shadow-xl border border-slate-200/80 space-y-4" onClick={e=>e.stopPropagation()}>
                        <div className="flex justify-between items-start border-b pb-3">
                            <div>
                                <h3 className="font-black text-lg text-slate-900">Registrar Orden de Subsidio / Reposo</h3>
                                <p className="text-[10px] text-slate-400 font-bold uppercase mt-0.5">Normativa de Seguridad Social de Nicaragua</p>
                            </div>
                            <button onClick={() => setShowModal(false)} className="p-2 bg-slate-50 text-slate-400 hover:text-slate-600 rounded-full cursor-pointer">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        <form onSubmit={handleSaveSubsidy} className="space-y-3.5">
                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Colaborador Asegurado</label>
                                <select value={userId} onChange={e => setUserId(e.target.value)} className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs outline-none" required>
                                    <option value="">Seleccionar colaborador...</option>
                                    {globalUsers.map(u => <option key={u.id} value={u.id}>{u.name} ({u.inssNumber ? `INSS: ${u.inssNumber}` : 'Sin No. INSS'})</option>)}
                                </select>
                            </div>

                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Fecha Inicio</label>
                                    <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs" required />
                                </div>
                                <div>
                                    <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Fecha Fin</label>
                                    <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs" required />
                                </div>
                            </div>

                            {/* TARJETA DINÁMICA DE REGLA INSS */}
                            <div className="p-4 bg-emerald-50/70 border border-emerald-200 rounded-xl space-y-2 text-xs">
                                <div className="flex justify-between font-bold text-emerald-950">
                                    <span>Duración Total: {totalDays} día(s)</span>
                                    <span>Carencia: {carenciaDays} d | INSS: {inssCoveredDays} d</span>
                                </div>
                                <p className="text-[10px] text-slate-600 leading-relaxed">
                                    {totalDays <= 3 ? (
                                        "Reposo menor o igual a 3 días: El INSS no emite pago de subsidio por período de carencia."
                                    ) : (
                                        `Los primeros 3 días son de carencia. A partir del 4.º día (${inssCoveredDays} días), el colaborador cobra el 60% de subsidio económico directamente en el INSS.`
                                    )}
                                </p>
                            </div>

                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Tratamiento para los 3 días de Carencia</label>
                                <select value={carenciaAction} onChange={e => setCarenciaAction(e.target.value)} className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs outline-none">
                                    <option value="vacaciones">Deducir de Vacaciones Acumuladas ({carenciaDays} días)</option>
                                    <option value="con_goce">Asumido por la Empresa (Permiso con goce de salario)</option>
                                    <option value="sin_goce">Permiso Sin Goce (Deducir de nómina ordinaria)</option>
                                </select>
                            </div>

                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Diagnóstico / Causa</label>
                                    <input type="text" value={diagnosis} onChange={e => setDiagnosis(e.target.value)} placeholder="Ej. Faringitis, Lumbalgia..." className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs" />
                                </div>
                                <div>
                                    <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">No. Boleta / Subsidio INSS</label>
                                    <input type="text" value={ticketNum} onChange={e => setTicketNum(e.target.value)} placeholder="Ej. SUB-84920" className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs" />
                                </div>
                            </div>

                            <div className="flex gap-2 pt-2 border-t">
                                <button type="button" onClick={() => setShowModal(false)} className="flex-1 py-3.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl font-black uppercase text-[10px] cursor-pointer">
                                    Cancelar
                                </button>
                                <button type="submit" disabled={isSaving} className="flex-1 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-black uppercase text-[10px] shadow-md transition-all cursor-pointer">
                                    {isSaving ? "Guardando..." : "Guardar Subsidio"}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
};