window.AdminOvertime = function({ globalUsers = [], isReadOnly = false, showToast, refreshData, currentUser }) {
    const [subTab, setSubTab] = React.useState('reentries'); // 'reentries' | 'balances' | 'history'
    const [loading, setLoading] = React.useState(true);
    const [overtimeLogs, setOvertimeLogs] = React.useState([]);
    const [userBalances, setUserBalances] = React.useState([]);
    const [usagesHistory, setUsagesHistory] = React.useState([]);

    // Filtros
    const [statusFilter, setStatusFilter] = React.useState('pending'); // 'pending' | 'approved' | 'rejected' | 'all'
    const [userFilter, setUserFilter] = React.useState('all');

    // Modales
    const [reviewingLog, setReviewingLog] = React.useState(null);
    const [reviewHours, setReviewHours] = React.useState('');
    const [reviewDestination, setReviewDestination] = React.useState('payroll'); // 'payroll' | 'compensated_time' | 'mixed' | 'rejected'
    const [reviewPayrollHours, setReviewPayrollHours] = React.useState('');
    const [reviewCompensatedHours, setReviewCompensatedHours] = React.useState('');
    const [adminNotes, setAdminNotes] = React.useState('');
    const [isSavingReview, setIsSavingReview] = React.useState(false);

    // Modal Otorgar Permiso por Tiempo Compensado
    const [grantingUser, setGrantingUser] = React.useState(null);
    const [grantDate, setGrantDate] = React.useState(window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0]);
    const [grantHours, setGrantHours] = React.useState('8');
    const [grantReason, setGrantReason] = React.useState('Permiso Remunerado por Tiempo Compensado');
    const [isSavingGrant, setIsSavingGrant] = React.useState(false);

    // Modal Ajuste Manual de Saldo
    const [adjustingUser, setAdjustingUser] = React.useState(null);
    const [newBalanceInput, setNewBalanceInput] = React.useState('');
    const [adjustNoteInput, setAdjustNoteInput] = React.useState('');
    const [isSavingAdjust, setIsSavingAdjust] = React.useState(false);

    const showToastRef = React.useRef(showToast);
    React.useEffect(() => {
        showToastRef.current = showToast;
    }, [showToast]);

    const loadOvertimeData = React.useCallback(async () => {
        setLoading(true);
        try {
            const res = await window.apiCall('get_overtime_logs', {});
            if (res && res.success) {
                setOvertimeLogs(res.overtimeLogs || []);
                setUserBalances(res.userBalances || []);
                setUsagesHistory(res.usagesHistory || []);
            } else {
                if (showToastRef.current) showToastRef.current(res?.error || "Error al cargar datos de horas extras.");
            }
        } catch (e) {
            if (showToastRef.current) showToastRef.current("Error de conexión al obtener horas extras.");
        } finally {
            setLoading(false);
        }
    }, []);

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

    // Calcular Estadísticas KPIs
    const stats = React.useMemo(() => {
        const pendingCount = overtimeLogs.filter(o => o.status === 'pending').length;
        const pendingHours = overtimeLogs.filter(o => o.status === 'pending').reduce((sum, o) => sum + Number(o.raw_hours || 0), 0);
        const approvedPayrollHours = overtimeLogs.filter(o => o.status === 'approved').reduce((sum, o) => sum + Number(o.payroll_hours || 0), 0);
        const totalCompensatedBalance = userBalances.reduce((sum, u) => sum + Number(u.compensated_time_hours || 0), 0);
        const totalUsagesHours = usagesHistory.reduce((sum, u) => sum + Number(u.hours_used || 0), 0);

        // Detectar si hay logs con más de 3 horas diarias para alerta legal Art. 62
        const excessLogs = overtimeLogs.filter(o => Number(o.raw_hours || o.approved_hours || 0) > 3);

        return {
            pendingCount,
            pendingHours,
            approvedPayrollHours,
            totalCompensatedBalance,
            totalUsagesHours,
            hasExcess: excessLogs.length > 0,
            excessLogs
        };
    }, [overtimeLogs, userBalances, usagesHistory]);

    // Filtrar logs de horas extras
    const filteredLogs = React.useMemo(() => {
        return overtimeLogs.filter(log => {
            if (statusFilter !== 'all' && log.status !== statusFilter) return false;
            if (userFilter !== 'all' && Number(log.user_id) !== Number(userFilter)) return false;
            return true;
        });
    }, [overtimeLogs, statusFilter, userFilter]);

    // Abrir Modal de Revisión
    const handleOpenReview = (log) => {
        setReviewingLog(log);
        const initialApproved = Number(log.approved_hours || log.raw_hours || 0);
        setReviewHours(initialApproved.toString());
        const dest = log.destination !== 'pending' ? log.destination : 'payroll';
        setReviewDestination(dest);
        setReviewPayrollHours(log.payroll_hours ? log.payroll_hours.toString() : (dest === 'payroll' ? initialApproved.toString() : '0'));
        setReviewCompensatedHours(log.compensated_hours ? log.compensated_hours.toString() : (dest === 'compensated_time' ? initialApproved.toString() : '0'));
        setAdminNotes(log.admin_notes || '');
    };

    // Cambiar horas aprobadas y auto-ajustar destinación
    const handleHoursChange = (val) => {
        setReviewHours(val);
        const h = parseFloat(val) || 0;
        if (reviewDestination === 'payroll') {
            setReviewPayrollHours(h.toString());
            setReviewCompensatedHours('0');
        } else if (reviewDestination === 'compensated_time') {
            setReviewCompensatedHours(h.toString());
            setReviewPayrollHours('0');
        } else if (reviewDestination === 'mixed') {
            setReviewPayrollHours((h / 2).toString());
            setReviewCompensatedHours((h / 2).toString());
        }
    };

    const handleDestinationChange = (dest) => {
        setReviewDestination(dest);
        const h = parseFloat(reviewHours) || 0;
        if (dest === 'payroll') {
            setReviewPayrollHours(h.toString());
            setReviewCompensatedHours('0');
        } else if (dest === 'compensated_time') {
            setReviewCompensatedHours(h.toString());
            setReviewPayrollHours('0');
        } else if (dest === 'mixed') {
            setReviewPayrollHours((h / 2).toString());
            setReviewCompensatedHours((h / 2).toString());
        } else if (dest === 'rejected') {
            setReviewPayrollHours('0');
            setReviewCompensatedHours('0');
        }
    };

    // Guardar Aprobación
    const handleSaveReview = async (isReject = false) => {
        if (isReadOnly) return alert("Modo supervisión: no tienes permisos para realizar esta acción.");
        if (!reviewingLog) return;

        setIsSavingReview(true);
        try {
            const finalStatus = isReject ? 'rejected' : 'approved';
            const finalDest = isReject ? 'rejected' : reviewDestination;
            const finalApprHours = isReject ? 0 : (parseFloat(reviewHours) || 0);
            const finalPayHours = isReject ? 0 : (parseFloat(reviewPayrollHours) || 0);
            const finalCompHours = isReject ? 0 : (parseFloat(reviewCompensatedHours) || 0);

            const res = await window.apiCall('approve_overtime_log', {
                id: reviewingLog.id,
                status: finalStatus,
                approved_hours: finalApprHours,
                destination: finalDest,
                payroll_hours: finalPayHours,
                compensated_hours: finalCompHours,
                admin_notes: adminNotes,
                admin_user_id: currentUser?.id
            });

            if (res && res.success) {
                if (res.is_rolled_over) {
                    alert(`ℹ️ Arrastre a Quincena Abierta:\n\n${res.message || 'Las horas extras aprobadas correspondían a un período oficialmente pagado. Se asignaron automáticamente a la quincena abierta actual.'}`);
                    if (showToast) showToast("ℹ️ Horas extras asignadas como arrastre a la quincena actual");
                } else if (showToast) {
                    showToast(isReject ? "Registro de horas extras rechazado." : "¡Horas extras aprobadas y distribuidas exitosamente!");
                }
                setReviewingLog(null);
                await loadOvertimeData();
                if (refreshData) await refreshData();
            } else {
                alert("Error al guardar revisión: " + (res?.error || "Error desconocido"));
            }
        } catch (e) {
            alert("Error de conexión al guardar revisión.");
        } finally {
            setIsSavingReview(false);
        }
    };

    // Guardar Permiso por Tiempo Compensado
    const handleSaveGrantLeave = async () => {
        if (isReadOnly) return alert("Modo supervisión: no tienes permisos.");
        if (!grantingUser) return;

        const hrs = parseFloat(grantHours) || 0;
        if (hrs <= 0) return alert("Ingresa un número de horas válido.");

        setIsSavingGrant(true);
        try {
            const res = await window.apiCall('grant_compensated_time_leave', {
                user_id: grantingUser.id,
                date: grantDate,
                hours_used: hrs,
                reason: grantReason,
                admin_user_id: currentUser?.id
            });

            if (res && res.success) {
                if (showToast) showToast(`¡Permiso concedido! Se descontaron ${hrs} hrs del saldo de ${grantingUser.name}.`);
                setGrantingUser(null);
                await loadOvertimeData();
                if (refreshData) await refreshData();
            } else {
                alert("Error al otorgar permiso: " + (res?.error || "Error desconocido"));
            }
        } catch (e) {
            alert("Error de conexión al registrar permiso.");
        } finally {
            setIsSavingGrant(false);
        }
    };

    // Guardar Ajuste Manual de Saldo
    const handleSaveAdjustBalance = async () => {
        if (isReadOnly) return alert("Modo supervisión: no tienes permisos.");
        if (!adjustingUser) return;

        const val = parseFloat(newBalanceInput);
        if (isNaN(val) || val < 0) return alert("Ingresa un saldo en horas válido (mínimo 0).");

        setIsSavingAdjust(true);
        try {
            const res = await window.apiCall('adjust_user_compensated_time', {
                user_id: adjustingUser.id,
                new_balance: val,
                note: adjustNoteInput || 'Ajuste Manual por Administración',
                admin_user_id: currentUser?.id
            });

            if (res && res.success) {
                if (showToast) showToast(`Saldo de tiempo compensado actualizado a ${val} hrs.`);
                setAdjustingUser(null);
                await loadOvertimeData();
                if (refreshData) await refreshData();
            } else {
                alert("Error al ajustar saldo: " + (res?.error || "Error desconocido"));
            }
        } catch (e) {
            alert("Error de conexión al ajustar saldo.");
        } finally {
            setIsSavingAdjust(false);
        }
    };

    return (
        <div className="space-y-6 fade-in font-sans">
            {/* ENCABEZADO Y KPI CARDS */}
            <div className="bg-white p-5 sm: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>
                    <div className="flex items-center gap-2">
                        <h2 className="text-xl font-bold text-slate-900 tracking-tight">Horas Extras & Tiempo Compensado</h2>
                        <span className="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold uppercase bg-amber-100 text-amber-900 border border-amber-300">
                            Código del Trabajo Art. 62
                        </span>
                    </div>
                    <p className="text-slate-500 font-medium text-xs mt-0.5">
                        Auditoría de reingresos, aprobación flexible a planilla o bolsa de descansos remunerados.
                    </p>
                </div>

                <div className="flex items-center gap-2">
                    <button 
                        onClick={loadOvertimeData} 
                        className="px-3.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl text-xs transition-all shadow-xs flex items-center gap-1.5 cursor-pointer"
                    >
                        <svg className="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        <span>Actualizar</span>
                    </button>
                </div>
            </div>

            {/* HERO KPIS */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                <div className="bg-white p-4 sm:p-5 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-1.5 h-full bg-amber-500"></div>
                    <span className="text-[9px] font-black uppercase text-amber-600 tracking-wider block">Pendientes de Revisión</span>
                    <h4 className="text-xl sm:text-2xl font-black text-slate-900 mt-1 truncate">
                        {stats.pendingCount} <span className="text-xs font-bold text-slate-400">({stats.pendingHours.toFixed(1)} hrs)</span>
                    </h4>
                    <p className="text-[9px] text-slate-400 font-bold mt-1">Reingresos pendientes de aprobación</p>
                </div>

                <div className="bg-white p-4 sm:p-5 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-1.5 h-full bg-emerald-500"></div>
                    <span className="text-[9px] font-black uppercase text-emerald-600 tracking-wider block">Aprobadas a Planilla (Efectivo)</span>
                    <h4 className="text-xl sm:text-2xl font-black text-emerald-600 mt-1 truncate">
                        {stats.approvedPayrollHours.toFixed(1)} <span className="text-xs font-bold text-emerald-700">hrs</span>
                    </h4>
                    <p className="text-[9px] text-slate-400 font-bold mt-1">Liquidables a tarifa doble (100% recargo)</p>
                </div>

                <div className="bg-white p-4 sm:p-5 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-1.5 h-full bg-indigo-500"></div>
                    <span className="text-[9px] font-black uppercase text-indigo-600 tracking-wider block">Bolsa Tiempo Compensado Acumulada</span>
                    <h4 className="text-xl sm:text-2xl font-black text-indigo-600 mt-1 truncate">
                        {stats.totalCompensatedBalance.toFixed(1)} <span className="text-xs font-bold text-indigo-700">hrs</span>
                    </h4>
                    <p className="text-[9px] text-slate-400 font-bold mt-1">~{(stats.totalCompensatedBalance / 8).toFixed(1)} días libres para personal</p>
                </div>

                <div className="bg-white p-4 sm:p-5 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-1.5 h-full bg-purple-500"></div>
                    <span className="text-[9px] font-black uppercase text-purple-600 tracking-wider block">Descansos Disfrutados</span>
                    <h4 className="text-xl sm:text-2xl font-black text-purple-600 mt-1 truncate">
                        {stats.totalUsagesHours.toFixed(1)} <span className="text-xs font-bold text-purple-700">hrs</span>
                    </h4>
                    <p className="text-[9px] text-slate-400 font-bold mt-1">Otorgados sin afectar vacaciones ni salario</p>
                </div>
            </div>

            {/* BANNER AVISO LEGAL ART. 62 */}
            {stats.hasExcess && (
                <div className="p-4 sm:p-5 bg-amber-50 border border-amber-200 text-amber-950 rounded-2xl flex items-start gap-3.5 shadow-xs">
                    <div className="w-9 h-9 rounded-xl bg-amber-500 text-white flex items-center justify-center flex-shrink-0 mt-0.5">
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    </div>
                    <div>
                        <h4 className="text-sm font-bold text-amber-900 leading-snug">
                            ⚠️ Alerta Legal sobre Límite de Horas Extras (Código del Trabajo Art. 62)
                        </h4>
                        <p className="text-xs text-amber-800 font-medium mt-1 leading-relaxed">
                            Se detectaron {stats.excessLogs.length} registro(s) con más de 3 horas extraordinarias en una jornada diaria. El estándar legal de Nicaragua establece un máximo de 3 horas por día (máx. 9 semanales), <strong>salvo acuerdo mutuo voluntario entre el empleador y el colaborador</strong> o emergencias operativas. El sistema permite aprobar y pagar la totalidad de las horas registradas si existe dicho acuerdo.
                        </p>
                    </div>
                </div>
            )}

            {/* BARRA NAVEGACIÓN SUB-TABS */}
            <div className="flex border-b border-slate-200 gap-6 overflow-x-auto">
                <button
                    onClick={() => setSubTab('reentries')}
                    className={`pb-3 text-xs font-bold transition-all relative flex items-center gap-2 cursor-pointer ${
                        subTab === 'reentries' ? 'text-slate-900 border-b-2 border-slate-900' : 'text-slate-400 hover:text-slate-700'
                    }`}
                >
                    <span>Auditoría de Reingresos ({overtimeLogs.length})</span>
                    {stats.pendingCount > 0 && (
                        <span className="px-1.5 py-0.5 bg-amber-500 text-white rounded-full text-[9px] font-black">{stats.pendingCount}</span>
                    )}
                </button>

                <button
                    onClick={() => setSubTab('balances')}
                    className={`pb-3 text-xs font-bold transition-all relative flex items-center gap-2 cursor-pointer ${
                        subTab === 'balances' ? 'text-slate-900 border-b-2 border-slate-900' : 'text-slate-400 hover:text-slate-700'
                    }`}
                >
                    <span>Saldos & Permisos por Tiempo Compensado ({userBalances.length})</span>
                </button>

                <button
                    onClick={() => setSubTab('history')}
                    className={`pb-3 text-xs font-bold transition-all relative flex items-center gap-2 cursor-pointer ${
                        subTab === 'history' ? 'text-slate-900 border-b-2 border-slate-900' : 'text-slate-400 hover:text-slate-700'
                    }`}
                >
                    <span>Bitácora de Descansos Otorgados ({usagesHistory.length})</span>
                </button>
            </div>

            {/* CONTENIDO TAB 1: REINGRESOS Y HORAS EXTRAS */}
            {subTab === 'reentries' && (
                <div className="space-y-4">
                    {/* FILTROS */}
                    <div className="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs flex flex-wrap items-center justify-between gap-3">
                        <div className="flex items-center gap-2 flex-wrap">
                            <span className="text-xs font-bold text-slate-500 uppercase">Estado:</span>
                            {['pending', 'approved', 'rejected', 'all'].map(st => (
                                <button
                                    key={st}
                                    onClick={() => setStatusFilter(st)}
                                    className={`px-3 py-1.5 rounded-xl text-xs font-bold capitalize transition-all cursor-pointer ${
                                        statusFilter === st 
                                            ? (st === 'pending' ? 'bg-amber-100 text-amber-900 border border-amber-300' : (st === 'approved' ? 'bg-emerald-100 text-emerald-900 border border-emerald-300' : (st === 'rejected' ? 'bg-red-100 text-red-900 border border-red-300' : 'bg-slate-900 text-white')))
                                            : 'bg-slate-50 hover:bg-slate-100 text-slate-600 border border-slate-200'
                                    }`}
                                >
                                    {st === 'pending' ? 'Pendientes' : (st === 'approved' ? 'Aprobadas' : (st === 'rejected' ? 'Rechazadas' : 'Todas'))}
                                </button>
                            ))}
                        </div>

                        <div className="flex items-center gap-2 min-w-[200px]">
                            <select
                                value={userFilter}
                                onChange={e => setUserFilter(e.target.value)}
                                className="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800"
                            >
                                <option value="all">Todos los colaboradores</option>
                                {globalUsers.map(u => (
                                    <option key={u.id} value={u.id}>{u.name}</option>
                                ))}
                            </select>
                        </div>
                    </div>

                    {/* TABLA DE REINGRESOS */}
                    {loading ? (
                        <div className="bg-white p-12 rounded-2xl text-center border border-slate-200/80 shadow-xs text-slate-400 font-medium text-xs">
                            Cargando registros de horas extras...
                        </div>
                    ) : filteredLogs.length === 0 ? (
                        <div className="bg-white p-12 rounded-2xl text-center border border-slate-200/80 shadow-xs text-slate-500 font-medium text-xs space-y-2">
                            <div className="w-12 h-12 rounded-2xl bg-slate-100 text-slate-400 flex items-center justify-center mx-auto mb-2">
                                <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <p className="font-bold text-slate-800 text-sm">No hay registros de horas extras en esta categoría.</p>
                            <p className="text-slate-400 text-xs">Los reingresos extraordinarios y jornadas en días libres aparecerán aquí automáticamente.</p>
                        </div>
                    ) : (
                        <div className="space-y-3">
                            {filteredLogs.map(log => {
                                const rawH = Number(log.raw_hours || 0);
                                const isExcess = rawH > 3;

                                return (
                                    <div
                                        key={log.id}
                                        className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs hover:border-slate-300 transition-all flex flex-col md:flex-row justify-between items-start md:items-center gap-4 relative overflow-hidden"
                                    >
                                        <div className="flex items-center gap-4">
                                            {log.avatar_url ? (
                                                <img src={log.avatar_url} alt={log.user_name} className="w-12 h-12 rounded-xl object-cover border border-slate-200 shadow-xs flex-shrink-0" />
                                            ) : (
                                                <div className="w-12 h-12 rounded-xl bg-slate-100 text-slate-700 font-bold text-base flex items-center justify-center border border-slate-200 shadow-xs flex-shrink-0">
                                                    {(log.user_name || 'U')[0].toUpperCase()}
                                                </div>
                                            )}

                                            <div>
                                                <div className="flex items-center gap-2 flex-wrap">
                                                    <h4 className="font-bold text-slate-900 text-sm">{log.user_name}</h4>
                                                    <span className="text-[10px] font-extrabold uppercase px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 border border-slate-200">
                                                        {window.formatDateToNIC ? window.formatDateToNIC(log.date_str) : log.date_str}
                                                    </span>
                                                    {isExcess && (
                                                        <span className="text-[10px] font-extrabold uppercase px-2 py-0.5 rounded-full bg-amber-100 text-amber-900 border border-amber-300" title="Excede 3 horas diarias del Art. 62 CT">
                                                            ⚠️ &gt; 3 hrs
                                                        </span>
                                                    )}
                                                </div>
                                                <p className="text-xs text-slate-500 font-medium mt-1">
                                                    Entrada: <strong className="text-slate-800">{log.entry_time || '---'}</strong> • Salida: <strong className="text-slate-800">{log.exit_time || 'En curso...'}</strong>
                                                </p>
                                                <p className="text-[11px] text-slate-400 font-medium mt-0.5 truncate max-w-md">
                                                    Motivo: {log.justification || 'Reingreso Extraordinario'}
                                                </p>
                                            </div>
                                        </div>

                                        {/* DETALLE Y BOTÓN DE ACCIÓN */}
                                        <div className="flex items-center gap-4 self-stretch md:self-auto justify-between border-t md:border-t-0 pt-3 md:pt-0">
                                            <div className="text-left md:text-right">
                                                <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider block">Horas Calculadas</span>
                                                <span className="text-lg font-black text-slate-900 block">{rawH.toFixed(2)} hrs</span>
                                                {log.status === 'approved' && (
                                                    <span className="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200 block mt-0.5">
                                                        Aprobadas: {log.approved_hours}h ({log.destination === 'payroll' ? 'Planilla' : (log.destination === 'compensated_time' ? 'Tiempo Comp.' : 'Mixto')})
                                                    </span>
                                                )}
                                                {log.status === 'rejected' && (
                                                    <span className="text-[10px] font-bold text-red-700 bg-red-50 px-2 py-0.5 rounded-md border border-red-200 block mt-0.5">
                                                        Rechazada
                                                    </span>
                                                )}
                                            </div>

                                            <button
                                                onClick={() => handleOpenReview(log)}
                                                className={`px-4 py-2.5 rounded-xl text-xs font-bold transition-all shadow-xs flex items-center gap-1.5 cursor-pointer ${
                                                    log.status === 'pending'
                                                        ? 'bg-amber-500 hover:bg-amber-600 text-white'
                                                        : 'bg-slate-100 hover:bg-slate-200 text-slate-800'
                                                }`}
                                            >
                                                <span>{log.status === 'pending' ? 'Revisar & Aprobar' : 'Editar Aprobación'}</span>
                                            </button>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    )}
                </div>
            )}

            {/* CONTENIDO TAB 2: SALDOS Y OTORGAR PERMISOS */}
            {subTab === 'balances' && (
                <div className="space-y-4">
                    <div className="bg-indigo-50 border border-indigo-200 p-4 rounded-2xl flex items-start gap-3">
                        <div className="w-8 h-8 rounded-xl bg-indigo-600 text-white flex items-center justify-center flex-shrink-0 mt-0.5">
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div className="text-xs font-medium text-indigo-950 leading-relaxed">
                            <strong>Bolsa de Tiempo Compensado (Permisos Remunerados):</strong> Las horas acumuladas aquí corresponden a trabajo extraordinario acordado para descanso libre. Al otorgar un permiso con este saldo, el colaborador disfrutará su día descansado <strong>sin ningún descuento en su salario de planilla ni en sus vacaciones de ley (Art. 76 CT)</strong>.
                        </div>
                    </div>

                    <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
                        <table className="w-full text-left border-collapse">
                            <thead>
                                <tr className="bg-slate-50 border-b border-slate-200 text-[10px] font-black uppercase tracking-wider text-slate-400">
                                    <th className="p-4">Colaborador</th>
                                    <th className="p-4">Cargo</th>
                                    <th className="p-4 text-center">Saldo Acumulado (Horas)</th>
                                    <th className="p-4 text-center">Equivalente Días Libres</th>
                                    <th className="p-4 text-right">Acción</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100 text-xs">
                                {userBalances.map(u => {
                                    const hrs = Number(u.compensated_time_hours || 0);
                                    const days = (hrs / 8).toFixed(1);

                                    return (
                                        <tr key={u.id} className="hover:bg-slate-50/80 transition-all">
                                            <td className="p-4 font-bold text-slate-900">
                                                <div className="flex items-center gap-3">
                                                    {u.avatar_url ? (
                                                        <img src={u.avatar_url} alt={u.name} className="w-9 h-9 rounded-xl object-cover border border-slate-200 shadow-xs" />
                                                    ) : (
                                                        <div className="w-9 h-9 rounded-xl bg-slate-100 text-slate-700 font-bold text-xs flex items-center justify-center border border-slate-200 shadow-xs">
                                                            {(u.name || 'U')[0].toUpperCase()}
                                                        </div>
                                                    )}
                                                    <div>
                                                        <span>{u.name}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td className="p-4 text-slate-500 font-semibold">{u.position_title || 'Colaborador'}</td>
                                            <td className="p-4 text-center">
                                                <span className={`inline-block font-black px-3 py-1 rounded-xl text-sm ${hrs > 0 ? 'bg-indigo-50 text-indigo-700 border border-indigo-200' : 'bg-slate-100 text-slate-400'}`}>
                                                    {hrs.toFixed(1)} hrs
                                                </span>
                                            </td>
                                            <td className="p-4 text-center font-bold text-slate-600">
                                                {days} días
                                            </td>
                                            <td className="p-4 text-right space-x-2">
                                                <button
                                                    onClick={() => setGrantingUser(u)}
                                                    disabled={hrs <= 0}
                                                    className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:text-slate-400 text-white font-bold rounded-xl text-xs transition-all shadow-xs cursor-pointer inline-flex items-center gap-1"
                                                >
                                                    <span>Otorgar Permiso</span>
                                                </button>

                                                <button
                                                    onClick={() => {
                                                        setAdjustingUser(u);
                                                        setNewBalanceInput(hrs.toString());
                                                        setAdjustNoteInput('');
                                                    }}
                                                    className="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl text-xs transition-all shadow-xs cursor-pointer inline-flex items-center gap-1"
                                                >
                                                    <span>Ajustar Saldo</span>
                                                </button>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}

            {/* CONTENIDO TAB 3: BITÁCORA DE DESCANSOS OTORGADOS */}
            {subTab === 'history' && (
                <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
                    <table className="w-full text-left border-collapse">
                        <thead>
                            <tr className="bg-slate-50 border-b border-slate-200 text-[10px] font-black uppercase tracking-wider text-slate-400">
                                <th className="p-4">Fecha Descanso</th>
                                <th className="p-4">Colaborador</th>
                                <th className="p-4 text-center">Horas Descontadas</th>
                                <th className="p-4">Motivo / Justificación</th>
                                <th className="p-4">Autorizado por</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100 text-xs">
                            {usagesHistory.length === 0 ? (
                                <tr>
                                    <td colSpan="5" className="p-8 text-center text-slate-400 font-medium">
                                        No hay registro de descansos compensados otorgados aún.
                                    </td>
                                </tr>
                            ) : (
                                usagesHistory.map(u => (
                                    <tr key={u.id} className="hover:bg-slate-50/80 transition-all">
                                        <td className="p-4 font-bold text-slate-900">{window.formatDateToNIC ? window.formatDateToNIC(u.date_str) : u.date_str}</td>
                                        <td className="p-4 font-bold text-slate-800">{u.user_name}</td>
                                        <td className="p-4 text-center font-black text-purple-700">
                                            -{u.hours_used} hrs
                                        </td>
                                        <td className="p-4 text-slate-600 font-medium">{u.reason}</td>
                                        <td className="p-4 text-slate-500 font-semibold">{u.approved_by_name || 'Administración'}</td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                </div>
            )}

            {/* MODAL DE REVISIÓN Y DISTRIBUCIÓN DE HORAS EXTRAS */}
            {reviewingLog && (
                <div className="fixed inset-0 bg-slate-900/60 z-[150] flex items-center justify-center p-4 fade-in" onClick={() => setReviewingLog(null)}>
                    <div className="bg-white w-full max-w-lg rounded-2xl shadow-2xl p-6 space-y-5" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-start border-b border-slate-100 pb-3">
                            <div>
                                <h3 className="font-bold text-lg text-slate-900">Revisión de Horas Extras</h3>
                                <p className="text-xs text-slate-500 font-medium">{reviewingLog.user_name} • {reviewingLog.date_str}</p>
                            </div>
                            <button onClick={() => setReviewingLog(null)} className="p-1 text-slate-400 hover:text-slate-700 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>

                        {/* DETALLES DE MARCACIÓN */}
                        <div className="bg-slate-50 p-4 rounded-xl space-y-2 text-xs border border-slate-200/60">
                            <div className="flex justify-between">
                                <span className="text-slate-500 font-medium">Marcación Entrada:</span>
                                <strong className="text-slate-900">{reviewingLog.entry_time || '---'}</strong>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-slate-500 font-medium">Marcación Salida:</span>
                                <strong className="text-slate-900">{reviewingLog.exit_time || 'En curso...'}</strong>
                            </div>
                            <div className="flex justify-between border-t border-slate-200/80 pt-2 font-bold">
                                <span className="text-slate-700">Horas Presenciales Brutas:</span>
                                <span className="text-amber-700 text-sm">{Number(reviewingLog.raw_hours || 0).toFixed(2)} hrs</span>
                            </div>
                        </div>

                        {/* EDICIÓN DE HORAS APROBADAS */}
                        <div>
                            <label className="text-[10px] font-black uppercase text-slate-400 block mb-1">Horas Extras Aprobadas a Reconocer</label>
                            <input
                                type="number"
                                step="0.5"
                                min="0"
                                value={reviewHours}
                                onChange={e => handleHoursChange(e.target.value)}
                                className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-bold text-base text-slate-900"
                            />
                            {parseFloat(reviewHours) > 3 && (
                                <span className="text-[10px] text-amber-700 font-bold block mt-1">
                                    ⚠️ Excede las 3 horas legales estándar (Art. 62 CT). Permitido bajo acuerdo voluntario de las partes.
                                </span>
                            )}
                        </div>

                        {/* SELECCIÓN DE DESTINO / DISTRIBUCIÓN */}
                        <div>
                            <label className="text-[10px] font-black uppercase text-slate-400 block mb-2">Destinación de las Horas Aprobadas</label>
                            <div className="grid grid-cols-2 gap-2.5">
                                <button
                                    type="button"
                                    onClick={() => handleDestinationChange('payroll')}
                                    className={`p-3 rounded-xl border text-left text-xs font-bold transition-all cursor-pointer ${
                                        reviewDestination === 'payroll'
                                            ? 'bg-emerald-50 border-emerald-500 text-emerald-950 ring-2 ring-emerald-500/20'
                                            : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
                                    }`}
                                >
                                    <div className="flex items-center justify-between">
                                        <span>Pago en Planilla</span>
                                        {reviewDestination === 'payroll' && <span className="text-emerald-600 font-bold">✓</span>}
                                    </div>
                                    <span className="text-[9.5px] font-normal text-slate-500 block mt-1">Tarifa doble (100% recargo en efectivo)</span>
                                </button>

                                <button
                                    type="button"
                                    onClick={() => handleDestinationChange('compensated_time')}
                                    className={`p-3 rounded-xl border text-left text-xs font-bold transition-all cursor-pointer ${
                                        reviewDestination === 'compensated_time'
                                            ? 'bg-slate-100 border-slate-900 text-slate-900 ring-2 ring-slate-900/20'
                                            : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
                                    }`}
                                >
                                    <div className="flex items-center justify-between">
                                        <span>Tiempo Compensado</span>
                                        {reviewDestination === 'compensated_time' && <span className="text-slate-900 font-bold">✓</span>}
                                    </div>
                                    <span className="text-[9.5px] font-normal text-slate-500 block mt-1">Bolsa de horas para descansos libres</span>
                                </button>
                            </div>
                        </div>

                        {/* OBSERVACIONES ADMIN */}
                        <div>
                            <label className="text-[10px] font-bold uppercase text-slate-400 block mb-1">Notas de Administración / Acuerdo</label>
                            <textarea
                                value={adminNotes}
                                onChange={e => setAdminNotes(e.target.value)}
                                placeholder="Ej: Acordado pago de 3 hrs en planilla y 1.5 hrs a tiempo compensado..."
                                rows="2"
                                className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium"
                            ></textarea>
                        </div>

                        {/* ACCIONES */}
                        <div className="flex items-center justify-between gap-3 border-t border-slate-100 pt-4">
                            <button
                                type="button"
                                onClick={() => handleSaveReview(true)}
                                disabled={isSavingReview}
                                className="px-4 py-2.5 bg-red-50 hover:bg-red-100 text-red-700 rounded-xl font-bold text-xs transition-all cursor-pointer"
                            >
                                Rechazar Registro
                            </button>

                            <div className="flex items-center gap-2">
                                <button
                                    type="button"
                                    onClick={() => setReviewingLog(null)}
                                    className="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer"
                                >
                                    Cancelar
                                </button>

                                <button
                                    type="button"
                                    onClick={() => handleSaveReview(false)}
                                    disabled={isSavingReview}
                                    className="px-5 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold text-xs shadow-xs cursor-pointer disabled:opacity-50"
                                >
                                    {isSavingReview ? 'Guardando...' : 'Confirmar Aprobación'}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL OTORGAR PERMISO POR TIEMPO COMPENSADO */}
            {grantingUser && (
                <div className="fixed inset-0 bg-slate-900/60 z-[150] flex items-center justify-center p-4 fade-in" onClick={() => setGrantingUser(null)}>
                    <div className="bg-white w-full max-w-md rounded-2xl shadow-2xl p-6 space-y-5" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-start border-b border-slate-100 pb-3">
                            <div>
                                <h3 className="font-bold text-lg text-slate-900">Otorgar Permiso por Tiempo Compensado</h3>
                                <p className="text-xs text-slate-500 font-medium">{grantingUser.name}</p>
                            </div>
                            <button onClick={() => setGrantingUser(null)} className="p-1 text-slate-400 hover:text-slate-700 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>

                        <div className="bg-slate-50 border border-slate-200 p-3.5 rounded-xl text-xs text-slate-900 font-medium space-y-1">
                            <div className="flex justify-between font-bold">
                                <span>Saldo Disponible Actual:</span>
                                <span className="text-slate-900">{Number(grantingUser.compensated_time_hours || 0).toFixed(1)} hrs</span>
                            </div>
                            <p className="text-[10.5px] text-slate-600">
                                Este permiso otorgado descontará del saldo de tiempo compensado. <strong>NO tocará el salario de planilla ni restará del saldo de vacaciones acumuladas.</strong>
                            </p>
                        </div>

                        <div className="space-y-3">
                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 block mb-1">Fecha del Descanso Remunerado</label>
                                <input
                                    type="date"
                                    value={grantDate}
                                    onChange={e => setGrantDate(e.target.value)}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold"
                                />
                            </div>

                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 block mb-1">Horas a Descontar del Saldo</label>
                                <select
                                    value={grantHours}
                                    onChange={e => setGrantHours(e.target.value)}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800"
                                >
                                    <option value="8">8 horas (Día Completo Libre)</option>
                                    <option value="4">4 horas (Medio Día Libre)</option>
                                    <option value="2">2 horas (Salida Temprana / Permiso Corto)</option>
                                    <option value="1">1 hora</option>
                                </select>
                            </div>

                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 block mb-1">Motivo / Justificación</label>
                                <input
                                    type="text"
                                    value={grantReason}
                                    onChange={e => setGrantReason(e.target.value)}
                                    placeholder="Ej: Trámite personal / Descanso acordado por horas extras"
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium"
                                />
                            </div>
                        </div>

                        <div className="flex items-center justify-end gap-2 border-t border-slate-100 pt-4">
                            <button
                                type="button"
                                onClick={() => setGrantingUser(null)}
                                className="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer"
                            >
                                Cancelar
                            </button>

                            <button
                                type="button"
                                onClick={handleSaveGrantLeave}
                                disabled={isSavingGrant}
                                className="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold text-xs shadow-xs cursor-pointer disabled:opacity-50"
                            >
                                {isSavingGrant ? 'Procesando...' : 'Confirmar & Otorgar Permiso'}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL AJUSTE MANUAL DE SALDO */}
            {adjustingUser && (
                <div className="fixed inset-0 bg-slate-900/60 z-[150] flex items-center justify-center p-4 fade-in" onClick={() => setAdjustingUser(null)}>
                    <div className="bg-white w-full max-w-md rounded-2xl shadow-2xl p-6 space-y-5" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-start border-b border-slate-100 pb-3">
                            <div>
                                <h3 className="font-bold text-lg text-slate-900">Ajuste Manual de Saldo Compensatorio</h3>
                                <p className="text-xs text-slate-500 font-medium">{adjustingUser.name}</p>
                            </div>
                            <button onClick={() => setAdjustingUser(null)} className="p-1 text-slate-400 hover:text-slate-700 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>

                        <div className="space-y-3">
                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 block mb-1">Nuevo Saldo de Horas Compensatorias</label>
                                <input
                                    type="number"
                                    step="0.5"
                                    min="0"
                                    value={newBalanceInput}
                                    onChange={e => setNewBalanceInput(e.target.value)}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-bold text-base text-slate-900"
                                />
                            </div>

                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 block mb-1">Motivo del Ajuste Manual</label>
                                <input
                                    type="text"
                                    value={adjustNoteInput}
                                    onChange={e => setAdjustNoteInput(e.target.value)}
                                    placeholder="Ej: Carga inicial de horas previas / Corrección de saldo"
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium"
                                />
                            </div>
                        </div>

                        <div className="flex items-center justify-end gap-2 border-t border-slate-100 pt-4">
                            <button
                                type="button"
                                onClick={() => setAdjustingUser(null)}
                                className="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer"
                            >
                                Cancelar
                            </button>

                            <button
                                type="button"
                                onClick={handleSaveAdjustBalance}
                                disabled={isSavingAdjust}
                                className="px-5 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold text-xs shadow-xs cursor-pointer disabled:opacity-50"
                            >
                                {isSavingAdjust ? 'Guardando...' : 'Guardar Nuevo Saldo'}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};