const { useState, useMemo } = React;

window.AdminAusencias = function({ 
    globalUsers = [], 
    absences = [], 
    logs = [], 
    vacations = [], 
    settings = {}, 
    saveAbsence, 
    confirmAction, 
    isReadOnly = false, 
    showToast, 
    refreshData 
}) {
    const todayStr = window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0];
    const [curYear, curMonth, curDay] = todayStr.split('-').map(Number);

    // Filtros de período
    const [periodPreset, setPeriodPreset] = useState('current_fortnight');
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');
    const [filterUser, setFilterUser] = useState('');
    const [filterCategory, setFilterCategory] = useState('ALL'); // 'ALL', 'unresolved', 'injustificada', 'justificada'

    // Modal de justificación / resolución rápida de inasistencias
    const [targetAbsence, setTargetAbsence] = useState(null);
    const [selectedType, setSelectedType] = useState('injustificada');
    const [absenceNotes, setAbsenceNotes] = useState('');
    const [isProcessing, setIsProcessing] = useState(false);

    // Modal para registrar permiso anticipado manual
    const [showManualModal, setShowManualModal] = useState(false);
    const [manualUserId, setManualUserId] = useState('');
    const [manualDate, setManualDate] = useState(todayStr);
    const [manualType, setManualType] = useState('justificada');
    const [manualNotes, setManualNotes] = useState('');

    const applyPeriodPreset = (preset) => {
        setPeriodPreset(preset);
        const y = curYear;
        const m = curMonth;

        if (preset === 'today') {
            setStartDate(todayStr);
            setEndDate(todayStr);
        } else if (preset === 'this_week') {
            const curr = new Date();
            const dayOfWeek = curr.getDay();
            const diffToMon = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
            const mon = new Date(curr.getFullYear(), curr.getMonth(), curr.getDate() + diffToMon);
            const sun = new Date(mon.getFullYear(), mon.getMonth(), mon.getDate() + 6);
            const fmt = (dt) => `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2,'0')}-${String(dt.getDate()).padStart(2,'0')}`;
            setStartDate(fmt(mon));
            setEndDate(fmt(sun));
        } else if (preset === 'current_fortnight') {
            if (curDay <= 15) {
                setStartDate(`${y}-${String(m).padStart(2,'0')}-01`);
                setEndDate(`${y}-${String(m).padStart(2,'0')}-15`);
            } else {
                const lastDay = new Date(y, m, 0).getDate();
                setStartDate(`${y}-${String(m).padStart(2,'0')}-16`);
                setEndDate(`${y}-${String(m).padStart(2,'0')}-${lastDay}`);
            }
        } else if (preset === 'last_fortnight') {
            if (curDay <= 15) {
                const prevM = m === 1 ? 12 : m - 1;
                const prevY = m === 1 ? y - 1 : y;
                const lastDay = new Date(prevY, prevM, 0).getDate();
                setStartDate(`${prevY}-${String(prevM).padStart(2,'0')}-16`);
                setEndDate(`${prevY}-${String(prevM).padStart(2,'0')}-${lastDay}`);
            } else {
                setStartDate(`${y}-${String(m).padStart(2,'0')}-01`);
                setEndDate(`${y}-${String(m).padStart(2,'0')}-15`);
            }
        } else if (preset === 'current_month') {
            const lastDay = new Date(y, m, 0).getDate();
            setStartDate(`${y}-${String(m).padStart(2,'0')}-01`);
            setEndDate(`${y}-${String(m).padStart(2,'0')}-${lastDay}`);
        }
    };

    React.useEffect(() => {
        applyPeriodPreset('current_fortnight');
    }, []);

    // MOTOR AUTOMÁTICO DE DETECCIÓN DE INASISTENCIAS
    // Evalúa cada día del rango contra cada empleado activo
    const detectedInattendances = useMemo(() => {
        if (!startDate || !endDate) return [];
        const dateRange = window.getDatesInRange(startDate, endDate);
        const results = [];

        const activeWorkers = (globalUsers || []).filter(u => u.status === 'activo');

        dateRange.forEach(dateStr => {
            // No evaluar días que aún no han ocurrido
            if (dateStr > todayStr) return;

            // Exentar Días Feriados de la Empresa (Nicaragua)
            if (settings?.holidays && Array.isArray(settings.holidays)) {
                const isHoliday = settings.holidays.some(h => h.date === dateStr);
                if (isHoliday) return;
            }

            activeWorkers.forEach(user => {
                const isOffDay = window.isUserOffDay(user.scheduleDays, dateStr);
                // Si le tocaba descansar, no cuenta como falta
                if (isOffDay) return;

                // Si está en período de vacaciones aprobadas
                const onVacation = (vacations || []).some(v => 
                    Number(v.userId) === Number(user.id) && 
                    v.status === 'approved' && 
                    v.startDate <= dateStr && 
                    (v.endDate || v.startDate) >= dateStr && 
                    !(v.revokedDates || []).includes(dateStr)
                );
                if (onVacation) return;

                // Verificar si tuvo alguna marca real en shift_logs
                const userLogs = (logs || []).filter(l => Number(l.userId) === Number(user.id) && l.date === dateStr);
                const hasPunches = userLogs.length > 0;

                // Buscar si ya existe una resolución formal en shift_absences
                const formalAbsence = (absences || []).find(a => Number(a.userId) === Number(user.id) && a.date === dateStr);

                // Si no tuvo marcas, es una inasistencia detectada
                if (!hasPunches) {
                    results.push({
                        id: formalAbsence ? formalAbsence.id : `auto_${user.id}_${dateStr}`,
                        isFormal: Boolean(formalAbsence),
                        userId: user.id,
                        userName: user.name,
                        alias: user.alias,
                        avatarUrl: user.avatarUrl,
                        date: dateStr,
                        baseSalary: user.baseSalary || 0,
                        type: formalAbsence ? formalAbsence.type : 'pendiente',
                        notes: formalAbsence ? formalAbsence.notes : '',
                        isUnresolved: !formalAbsence
                    });
                }
            });
        });

        return results.sort((a,b) => b.date.localeCompare(a.date));
    }, [startDate, endDate, globalUsers, logs, absences, vacations, todayStr]);

    // Filtrado de la bandeja
    const filteredList = useMemo(() => {
        return detectedInattendances.filter(item => {
            if (filterUser && !item.userName.toLowerCase().includes(filterUser.toLowerCase())) return false;
            if (filterCategory === 'unresolved' && !item.isUnresolved) return false;
            if (filterCategory === 'injustificada' && item.type !== 'injustificada') return false;
            if (filterCategory === 'justificada' && (item.type !== 'justificada' && item.type !== 'sin_goce')) return false;
            return true;
        });
    }, [detectedInattendances, filterUser, filterCategory]);

    // Métricas para KPI Cards
    const kpiSummary = useMemo(() => {
        const total = detectedInattendances.length;
        const unresolved = detectedInattendances.filter(i => i.isUnresolved).length;
        const unexcused = detectedInattendances.filter(i => i.type === 'injustificada').length;
        const excused = detectedInattendances.filter(i => i.type === 'justificada' || i.type === 'sin_goce').length;
        return { total, unresolved, unexcused, excused };
    }, [detectedInattendances]);

    // Guardar resolución de inasistencia (conecta con Vacaciones y Planilla)
    const handleApplyResolution = async (e) => {
        e.preventDefault();
        if (!targetAbsence) return;
        setIsProcessing(true);

        try {
            const uId = Number(targetAbsence.userId);

            // 1. Si se eligió deducir de vacaciones acumuladas
            if (selectedType === 'vacaciones') {
                const resVac = await window.apiCall('deduct_vacation_from_audit', {
                    userId: uId,
                    days: 1.0,
                    date: targetAbsence.date,
                    reason: `Deducción por ausencia el ${window.formatDateToNIC(targetAbsence.date)} (${absenceNotes || 'Compensado con Vacaciones'})`
                });

                if (!resVac || !resVac.success) {
                    setIsProcessing(false);
                    alert("Error al deducir de vacaciones: " + (resVac?.error || ""));
                    return;
                }
            }

            // 2. Guardar en shift_absences
            const dbType = selectedType === 'vacaciones' ? 'justificada' : selectedType;
            const finalNote = selectedType === 'vacaciones' 
                ? `Compensado con 1 día de Vacaciones de Ley${absenceNotes ? ` • ${absenceNotes}` : ''}`
                : absenceNotes;

            const resAbs = await window.apiCall('save_absence', {
                userId: uId,
                user_id: uId,
                date: targetAbsence.date,
                type: dbType,
                notes: finalNote
            });

            if (resAbs && resAbs.success) {
                if (showToast) showToast("Inasistencia clasificada y guardada exitosamente.");
                setTargetAbsence(null);
                setAbsenceNotes('');
                if (refreshData) await refreshData();
            } else {
                alert("Error al guardar: " + (resAbs?.error || ""));
            }
        } catch (err) {
            alert("Error de conexión: " + err.message);
        } finally {
            setIsProcessing(false);
        }
    };

    // Crear permiso anticipado manual
    const handleCreateManualAbsence = async (e) => {
        e.preventDefault();
        if (!manualUserId) return alert("Selecciona un colaborador.");
        setIsProcessing(true);

        const uId = Number(manualUserId);

        const res = await window.apiCall('save_absence', {
            userId: uId,
            user_id: uId,
            date: manualDate,
            type: manualType,
            notes: manualNotes
        });

        setIsProcessing(false);
        if (res && res.success) {
            if (showToast) showToast("Permiso anticipado registrado con éxito.");
            setShowManualModal(false);
            setManualNotes('');
            if (refreshData) await refreshData();
        } else {
            alert("Error: " + (res?.error || "No se pudo registrar"));
        }
    };

    // Eliminar / Revertir ausencia formal
    const handleDeleteFormalAbsence = async (absenceId, userName) => {
        if (isReadOnly) return;
        confirmAction(`¿Revertir la resolución de inasistencia de ${userName}? Volverá a quedar pendiente de justificar.`, async () => {
            const res = await window.apiCall('delete_absence', { id: absenceId });
            if (res && res.success) {
                if (showToast) showToast("Resolución revertida.");
                if (refreshData) await refreshData();
            }
        });
    };

    return (
        <div className="space-y-6 fade-in font-sans">
            {/* CABECERA PRINCIPAL Y PRESETS */}
            <div className="bg-white p-6 rounded-2xl shadow-xs border border-slate-200/80 space-y-4">
                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
                    <div>
                        <h2 className="text-2xl font-black text-slate-900 tracking-tight">Bitácora y Control de Ausencias</h2>
                        <p className="text-slate-400 font-bold uppercase text-[10px] mt-0.5 tracking-widest">
                            Detección proactiva de inasistencias • Aplicación Art. 64 CT (Séptimo Día) • Deducción a Vacaciones
                        </p>
                    </div>

                    <div className="flex flex-wrap items-center gap-2">
                        <div className="flex bg-slate-100 p-1 rounded-xl border border-slate-200/80 gap-1">
                            <button onClick={()=>applyPeriodPreset('today')} className={`px-3 py-1.5 rounded-lg font-bold text-[10px] uppercase transition-all ${periodPreset==='today'?'bg-white text-slate-900 shadow-xs':'text-slate-600 hover:text-slate-900'}`}>Hoy</button>
                            <button onClick={()=>applyPeriodPreset('this_week')} className={`px-3 py-1.5 rounded-lg font-bold text-[10px] uppercase transition-all ${periodPreset==='this_week'?'bg-white text-slate-900 shadow-xs':'text-slate-600 hover:text-slate-900'}`}>Esta Semana</button>
                            <button onClick={()=>applyPeriodPreset('current_fortnight')} className={`px-3 py-1.5 rounded-lg font-bold text-[10px] uppercase transition-all ${periodPreset==='current_fortnight'?'bg-white text-slate-900 shadow-xs':'text-slate-600 hover:text-slate-900'}`}>Quincena Actual</button>
                            <button onClick={()=>applyPeriodPreset('last_fortnight')} className={`px-3 py-1.5 rounded-lg font-bold text-[10px] uppercase transition-all ${periodPreset==='last_fortnight'?'bg-white text-slate-900 shadow-xs':'text-slate-600 hover:text-slate-900'}`}>Quincena Pasada</button>
                            <button onClick={()=>applyPeriodPreset('current_month')} className={`px-3 py-1.5 rounded-lg font-bold text-[10px] uppercase transition-all ${periodPreset==='current_month'?'bg-white text-slate-900 shadow-xs':'text-slate-600 hover:text-slate-900'}`}>Este Mes</button>
                        </div>

                        {!isReadOnly && (
                            <button 
                                onClick={() => setShowManualModal(true)} 
                                className="px-5 py-3 min-h-[44px] bg-slate-900 hover:bg-black text-white rounded-xl font-bold uppercase text-[10px] tracking-wider shadow-xs active:scale-95 transition-all flex items-center gap-1.5 cursor-pointer"
                            >
                                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4"/></svg>
                                <span>+ Permiso Anticipado</span>
                            </button>
                        )}
                    </div>
                </div>

                {/* FILTROS SECUNDARIOS */}
                <div className="flex flex-col sm:flex-row items-center gap-3 pt-2 border-t border-slate-100">
                    <div className="flex-1 w-full sm:w-auto">
                        <input 
                            type="text" 
                            value={filterUser} 
                            onChange={e => setFilterUser(e.target.value)} 
                            placeholder="Buscar colaborador por nombre..." 
                            className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs outline-none focus:border-indigo-500" 
                        />
                    </div>
                    <div className="w-full sm:w-56">
                        <select 
                            value={filterCategory} 
                            onChange={e => setFilterCategory(e.target.value)} 
                            className="w-full p-3 bg-slate-50 border rounded-xl font-bold text-xs uppercase outline-none focus:border-indigo-500"
                        >
                            <option value="ALL">Todas las Condiciones</option>
                            <option value="unresolved">Pendientes de Resolver</option>
                            <option value="injustificada">Faltas Injustificadas</option>
                            <option value="justificada">Justificadas / Permisos</option>
                        </select>
                    </div>
                    <div className="flex items-center gap-2 text-xs font-bold text-slate-500 bg-slate-50 px-4 py-2.5 rounded-2xl border">
                        <span className="text-[10px] uppercase text-slate-400 font-black">Rango:</span>
                        <span>{window.formatDateToNIC(startDate)}</span>
                        <span>al</span>
                        <span>{window.formatDateToNIC(endDate)}</span>
                    </div>
                </div>
            </div>

            {/* KPI METRIC CARDS */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-2 h-full bg-slate-900"></div>
                    <span className="text-[9px] font-black uppercase text-slate-400 tracking-wider block">Inasistencias Totales</span>
                    <h4 className="text-3xl font-black text-slate-900 mt-1">{kpiSummary.total}</h4>
                    <p className="text-[9px] text-slate-400 font-bold mt-1">Días laborales sin marcaje</p>
                </div>

                <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm relative overflow-hidden bg-gradient-to-br from-amber-50/40 via-white to-white">
                    <div className="absolute top-0 right-0 w-2 h-full bg-amber-500"></div>
                    <span className="text-[9px] font-black uppercase text-amber-600 tracking-wider block">Por Justificar / Resolver</span>
                    <h4 className="text-3xl font-black text-amber-600 mt-1">{kpiSummary.unresolved}</h4>
                    <p className="text-[9px] text-amber-700/80 font-bold mt-1">Requieren acción administrativa</p>
                </div>

                <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-2 h-full bg-red-500"></div>
                    <span className="text-[9px] font-black uppercase text-red-600 tracking-wider block">Faltas Injustificadas</span>
                    <h4 className="text-3xl font-black text-red-600 mt-1">{kpiSummary.unexcused}</h4>
                    <p className="text-[9px] text-red-500/80 font-bold mt-1">Deducen doble día (Séptimo Día)</p>
                </div>

                <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-2 h-full bg-emerald-500"></div>
                    <span className="text-[9px] font-black uppercase text-emerald-600 tracking-wider block">Justificadas / Vacaciones</span>
                    <h4 className="text-3xl font-black text-emerald-600 mt-1">{kpiSummary.excused}</h4>
                    <p className="text-[9px] text-slate-400 font-bold mt-1">Con soporte o compensadas</p>
                </div>
            </div>

            {/* BANDEJA INTELIGENTE DE AUSENCIAS DETECTADAS */}
            <div className="bg-white rounded-2xl shadow-xs border border-slate-200/80 overflow-hidden">
                <div className="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                    <div className="flex items-center gap-2">
                        <span className="w-2.5 h-2.5 rounded-full bg-slate-900"></span>
                        <h3 className="font-black text-slate-900 text-sm uppercase tracking-wider">
                            Bitácora Operativa de Inasistencias ({filteredList.length})
                        </h3>
                    </div>
                    <span className="text-[10px] text-slate-400 font-bold uppercase">
                        Auditoría cruzada en tiempo real contra turnos de contrato
                    </span>
                </div>

                <div className="divide-y divide-slate-100">
                    {filteredList.length === 0 ? (
                        <div className="p-12 text-center text-slate-400 font-bold text-xs space-y-1">
                            <p className="text-base font-black text-slate-600">Asistencia Completa</p>
                            <p>No se detectaron inasistencias en el período y filtros seleccionados.</p>
                        </div>
                    ) : (
                        filteredList.map((item, idx) => {
                            const dailyCost = (parseFloat(item.baseSalary) / 30).toFixed(2);
                            const doubleCost = (parseFloat(dailyCost) * 2).toFixed(2);

                            return (
                                <div key={item.id || idx} className="p-5 sm:p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 hover:bg-slate-50/60 transition-colors">
                                    <div className="flex items-center gap-4 min-w-[260px]">
                                        {item.avatarUrl ? (
                                            <img src={item.avatarUrl} alt={item.userName} className="w-12 h-12 rounded-2xl object-cover border-2 border-white shadow-sm flex-shrink-0" />
                                        ) : (
                                            <div className="w-12 h-12 rounded-2xl bg-slate-900 text-white font-black text-base flex items-center justify-center shadow-xs flex-shrink-0">
                                                {item.userName ? item.userName[0].toUpperCase() : 'U'}
                                            </div>
                                        )}
                                        <div>
                                            <h4 className="font-bold text-slate-900 text-sm leading-snug">{item.userName}</h4>
                                            <p className="text-[10px] text-slate-400 uppercase font-bold mt-0.5">@{item.alias} • Base: C$ {parseFloat(item.baseSalary).toLocaleString('en-US', { minimumFractionDigits: 2 })}</p>
                                            <span className="text-[10px] text-slate-700 font-bold inline-block mt-0.5">
                                                Costo Día: C$ {dailyCost} | Séptimo Día (x2): C$ {doubleCost}
                                            </span>
                                        </div>
                                    </div>

                                    {/* FECHA Y ESTADO DETECTADO */}
                                    <div className="flex flex-col md:items-center text-left md:text-center">
                                        <span className="text-[9px] font-black uppercase text-slate-400 tracking-wider">Fecha de Inasistencia</span>
                                        <span className="text-xs font-black text-slate-900 mt-0.5">
                                            {window.formatDateToNIC(item.date)} ({window.getDayOfWeekCode(item.date).toUpperCase()})
                                        </span>
                                        <span className="text-[9px] text-red-500 font-bold mt-0.5">
                                            0 marcajes registrados en jornada regular
                                        </span>
                                    </div>

                                    {/* CONDICIÓN Y NOTA */}
                                    <div className="flex-1 max-w-md">
                                        <span className="text-[9px] font-black uppercase text-slate-400 tracking-wider block mb-1">Resolución Legal</span>
                                        {item.isUnresolved ? (
                                            <div className="flex items-center gap-2">
                                                <span className="px-3 py-1 bg-amber-100 text-amber-800 border border-amber-300 rounded-xl text-[10px] font-black uppercase tracking-wider flex items-center gap-1.5 animate-pulse">
                                                    <span className="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                                    Sin Resolver (Pendiente)
                                                </span>
                                            </div>
                                        ) : item.type === 'injustificada' ? (
                                            <div className="space-y-0.5">
                                                <span className="px-3 py-1 bg-red-50 text-red-700 border border-red-200 rounded-xl text-[10px] font-bold uppercase tracking-wider inline-flex items-center gap-1.5">
                                                    <span className="w-1.5 h-1.5 rounded-full bg-red-600"></span>
                                                    Falta Injustificada (-2 días Art. 64)
                                                </span>
                                                {item.notes && <p className="text-[10px] text-slate-500 font-medium italic mt-1">"{item.notes}"</p>}
                                            </div>
                                        ) : item.type === 'sin_goce' ? (
                                            <div className="space-y-0.5">
                                                <span className="px-3 py-1 bg-amber-50 text-amber-800 border border-amber-200 rounded-xl text-[10px] font-bold uppercase tracking-wider inline-flex items-center gap-1.5">
                                                    <span className="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                                    Permiso Sin Goce (-1 día salario)
                                                </span>
                                                {item.notes && <p className="text-[10px] text-slate-500 font-medium italic mt-1">"{item.notes}"</p>}
                                            </div>
                                        ) : (
                                            <div className="space-y-0.5">
                                                <span className="px-3 py-1 bg-emerald-50 text-emerald-800 border border-emerald-200 rounded-xl text-[10px] font-bold uppercase tracking-wider inline-flex items-center gap-1.5">
                                                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-600"></span>
                                                    Permiso Justificado / Compensado
                                                </span>
                                                {item.notes && <p className="text-[10px] text-slate-500 font-medium italic mt-1">"{item.notes}"</p>}
                                            </div>
                                        )}
                                    </div>

                                    {/* BOTÓN DE RESOLUCIÓN RÁPIDA */}
                                    {!isReadOnly && (
                                        <div className="flex items-center gap-2 w-full md:w-auto justify-end pt-2 md:pt-0">
                                            <button 
                                                onClick={() => {
                                                    setTargetAbsence(item);
                                                    setSelectedType(item.isUnresolved ? 'injustificada' : item.type);
                                                    setAbsenceNotes(item.notes || '');
                                                }}
                                                className={`px-4 py-2.5 rounded-2xl text-[10px] font-black uppercase tracking-wider transition-all shadow-sm active:scale-95 cursor-pointer ${
                                                    item.isUnresolved 
                                                        ? 'bg-amber-500 hover:bg-amber-600 text-white' 
                                                        : 'bg-slate-100 hover:bg-indigo-50 text-slate-600 hover:text-indigo-600 border border-slate-200'
                                                }`}
                                            >
                                                {item.isUnresolved ? "Resolver Inasistencia" : "Editar Resolución"}
                                            </button>

                                            {item.isFormal && (
                                                <button 
                                                    onClick={() => handleDeleteFormalAbsence(item.id, item.userName)}
                                                    className="p-2.5 bg-slate-50 hover:bg-red-50 text-slate-400 hover:text-red-600 border rounded-2xl transition-colors cursor-pointer"
                                                    title="Revertir y dejar pendiente"
                                                >
                                                    <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>
                                            )}
                                        </div>
                                    )}
                                </div>
                            );
                        })
                    )}
                </div>
            </div>

            {/* MODAL CLASIFICAR / RESOLVER INASISTENCIA */}
            {targetAbsence && (
                <div className="fixed inset-0 bg-slate-900/60 z-[140] flex items-center justify-center p-4 fade-in" onClick={() => setTargetAbsence(null)}>
                    <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">Resolución de Inasistencia</h3>
                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">
                                    {targetAbsence.userName} • Fecha: {window.formatDateToNIC(targetAbsence.date)}
                                </p>
                            </div>
                            <button onClick={() => setTargetAbsence(null)} 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={handleApplyResolution} className="space-y-4">
                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Tipo de Tratamiento Laboral</label>
                                <select 
                                    value={selectedType} 
                                    onChange={e => setSelectedType(e.target.value)} 
                                    className="w-full p-3.5 bg-slate-50 border rounded-xl font-bold text-xs outline-none focus:border-slate-900"
                                >
                                    <option value="injustificada">Falta Injustificada (Aplica Art. 64: Descuenta 1 día + Séptimo Día x2)</option>
                                    <option value="sin_goce">Permiso Sin Goce de Salario (Descuenta 1 día ordinario)</option>
                                    <option value="vacaciones">Deducir de Vacaciones Acumuladas (Descuenta 1 día del saldo)</option>
                                    <option value="justificada">Permiso Con Goce / Reposo Médico MINSA (Salario íntegro)</option>
                                </select>
                            </div>

                            {selectedType === 'injustificada' && (
                                <div className="p-3 bg-red-50 border border-red-200 rounded-xl text-[10px] text-red-800 leading-relaxed font-bold">
                                    <strong>Efecto en Nómina:</strong> Se aplicará la ley laboral nicaragüense. El colaborador sufrirá la deducción del día no laborado más el descanso proporcional (2 días en total).
                                </div>
                            )}

                            {selectedType === 'vacaciones' && (
                                <div className="p-3 bg-slate-100 border border-slate-200 rounded-xl text-[10px] text-slate-800 leading-relaxed font-medium">
                                    <strong>Efecto en Vacaciones:</strong> Se insertará un registro en el módulo de Vacaciones restando 1 día del acumulado. En nómina recibirá su salario quincenal completo.
                                </div>
                            )}

                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Motivo o Justificación Formal</label>
                                <textarea 
                                    value={absenceNotes} 
                                    onChange={e => setAbsenceNotes(e.target.value)} 
                                    placeholder="Ej. Notificó emergencia familiar autorizada por gerencia..." 
                                    className="w-full p-3.5 bg-slate-50 border rounded-xl font-bold text-xs outline-none h-24 resize-none focus:border-slate-900"
                                />
                            </div>

                            <div className="flex gap-2 pt-2 border-t">
                                <button type="button" onClick={() => setTargetAbsence(null)} className="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl font-bold uppercase text-[10px] cursor-pointer">
                                    Cancelar
                                </button>
                                <button type="submit" disabled={isProcessing} className="flex-1 py-3 bg-slate-900 hover:bg-black text-white rounded-xl font-bold uppercase text-[10px] shadow-xs active:scale-95 transition-all cursor-pointer">
                                    {isProcessing ? "Guardando..." : "Aplicar Resolución"}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* MODAL REGISTRAR PERMISO ANTICIPADO */}
            {showManualModal && (
                <div className="fixed inset-0 bg-slate-900/60 z-[140] flex items-center justify-center p-4 fade-in" onClick={() => setShowManualModal(false)}>
                    <div className="bg-white rounded-2xl p-6 sm:p-7 max-w-md 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 Permiso Anticipado</h3>
                                <p className="text-[10px] text-slate-400 font-bold uppercase mt-0.5">Programar ausencia o reposo antes del corte</p>
                            </div>
                            <button onClick={() => setShowManualModal(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={handleCreateManualAbsence} className="space-y-4">
                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Colaborador</label>
                                <select value={manualUserId} onChange={e => setManualUserId(e.target.value)} className="w-full p-3.5 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}</option>)}
                                </select>
                            </div>

                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Fecha del Permiso</label>
                                <input type="date" value={manualDate} onChange={e => setManualDate(e.target.value)} className="w-full p-3.5 bg-slate-50 border rounded-xl font-bold text-xs outline-none" required />
                            </div>

                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Tipo de Permiso</label>
                                <select value={manualType} onChange={e => setManualType(e.target.value)} className="w-full p-3.5 bg-slate-50 border rounded-xl font-bold text-xs outline-none">
                                    <option value="justificada">Con Goce de Salario / Reposo Médico MINSA</option>
                                    <option value="sin_goce">Sin Goce de Salario (Deduce día simple)</option>
                                    <option value="injustificada">Falta Injustificada Programada</option>
                                </select>
                            </div>

                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-500 block mb-1">Nota o Justificación</label>
                                <input type="text" value={manualNotes} onChange={e => setManualNotes(e.target.value)} placeholder="Ej. Cita médica dental o trámite personal..." className="w-full p-3.5 bg-slate-50 border rounded-xl font-bold text-xs outline-none" />
                            </div>

                            <div className="flex gap-2 pt-2 border-t">
                                <button type="button" onClick={() => setShowManualModal(false)} className="flex-1 py-3.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-2xl font-black uppercase text-[10px] cursor-pointer">
                                    Cancelar
                                </button>
                                <button type="submit" disabled={isProcessing} className="flex-1 py-3.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold uppercase text-[10px] shadow-xs active:scale-95 transition-all cursor-pointer">
                                    {isProcessing ? "Guardando..." : "Registrar Permiso"}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
};