const { useState, useMemo, useEffect } = React;

window.AdminAuditoria = function({ logs = [], globalUsers = [], absences = [], actions = [], setMapLogs, setPreviewImage, refreshData, settings = {}, isMaster = false, isReadOnly = false }) {
    const isGlobalAdmin = Boolean(isMaster || (window.SHIFT_CONFIG && window.SHIFT_CONFIG.isMaster));
    const todayStr = window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0];

    const [searchName, setSearchName] = useState('');
    const [searchDate, setSearchDate] = useState(todayStr);
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');
    const [selectedActionType, setSelectedActionType] = useState('ENTRADA_SALIDA');
    const [activePreset, setActivePreset] = useState('today'); // 'today', 'this_week', 'this_quincena', 'this_month', 'custom'

    const [currentPage, setCurrentPage] = useState(1);
    const ITEMS_PER_PAGE = 50;

    const [editingLog, setEditingLog] = useState(null);
    const [showNewMarkModal, setShowNewMarkModal] = useState(false);
    
    const [formUser, setFormUser] = useState('');
    const [formType, setFormType] = useState('entrada');
    const [formDate, setFormDate] = useState(todayStr);
    const [formTime, setFormTime] = useState('08:00');
    const [formJustification, setFormJustification] = useState('');

    // Modal de edición rápida de justificación laboral
    const [justifyingLog, setJustifyingLog] = useState(null);
    const [selectedJustification, setSelectedJustification] = useState('');
    const [customNote, setCustomNote] = useState('');
    const [isSavingJustification, setIsSavingJustification] = useState(false);
    const [isAuditingClockouts, setIsAuditingClockouts] = useState(false);
    const [isSimulating, setIsSimulating] = useState(false);
    const [simulationReportModal, setSimulationReportModal] = useState(null);

    useEffect(() => {
        setCurrentPage(1);
    }, [searchName, searchDate, startDate, endDate, selectedActionType, activePreset]);

    const handleRun7DaySimulation = async () => {
        if (!confirm("¿Deseas ejecutar el Simulacro de Pruebas Automatizado de 7 Días?\n\nEste proceso simulará 7 días continuos de operación real para todos los colaboradores activos (Marcaciones GPS, tardanzas justificadas, horas extras autorizadas, permisos de tiempo compensado y turnos abiertos) para evaluar la estabilidad del sistema.")) {
            return;
        }
        setIsSimulating(true);
        try {
            const res = await window.apiCall('run_7day_simulation', {});
            if (res && res.success) {
                setSimulationReportModal(res);
                if (refreshData) await refreshData();
            } else {
                alert(res?.error || 'No se pudo completar el simulacro.');
            }
        } catch (e) {
            alert('Error de conexión al ejecutar el simulacro.');
        } finally {
            setIsSimulating(false);
        }
    };

    const handleAuditMissingClockOuts = async () => {
        setIsAuditingClockouts(true);
        try {
            const res = await window.apiCall('audit_missing_clockouts', {
                date: searchDate || todayStr,
                start_date: startDate || searchDate || todayStr,
                end_date: endDate || searchDate || todayStr
            });
            if (res && res.success) {
                const count = res.missing_clock_outs?.length || 0;
                if (count === 0) {
                    alert(`Auditoría completada: No se detectaron turnos abiertos o salidas olvidadas para el período ${res.target_date}.`);
                } else {
                    const names = res.missing_clock_outs.map(m => `• ${m.name} (Fecha: ${m.date || res.target_date}, Entrada: ${m.clock_in_time})`).join('\n');
                    alert(`Se detectaron ${count} turno(s) abierto(s) sin Salida:\n\n${names}\n\nSe enviaron ${res.alerts_dispatched} aviso(s) a los supervisores directos.`);
                }
            } else {
                alert(res?.error || 'No se pudo realizar la auditoría.');
            }
        } catch (e) {
            alert('Error de conexión al auditar turnos abiertos.');
        } finally {
            setIsAuditingClockouts(false);
        }
    };

    // Helpers de Filtros Rápidos
    const applyQuickFilter = (type) => {
        setActivePreset(type);
        const [y, m, d] = todayStr.split('-').map(Number);
        
        if (type === 'today') {
            setSearchDate(todayStr);
            setStartDate(''); 
            setEndDate('');
        } else if (type === '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')}`;
            setSearchDate('');
            setStartDate(fmt(mon));
            setEndDate(fmt(sun));
        } else if (type === 'this_quincena') {
            const startDay = d <= 15 ? '01' : '16';
            const lastDayOfMonth = new Date(y, m, 0).getDate();
            const endDay = d <= 15 ? '15' : String(lastDayOfMonth);
            const mm = String(m).padStart(2, '0');
            setSearchDate('');
            setStartDate(`${y}-${mm}-${startDay}`);
            setEndDate(`${y}-${mm}-${endDay}`);
        } else if (type === 'this_month') {
            const lastDayOfMonth = new Date(y, m, 0).getDate();
            const mm = String(m).padStart(2, '0');
            setSearchDate('');
            setStartDate(`${y}-${mm}-01`);
            setEndDate(`${y}-${mm}-${lastDayOfMonth}`);
        }
    };

    // Auditoría automática por registro (Puntualidad, Tardanza o Salida Temprana)
    const auditLogRecord = (log) => {
        if (log.justification) {
            const isExtra = log.justification.includes('Reingreso Extraordinario') || log.justification.includes('Día Libre') || log.justification.includes('Jornada en Día Libre');
            if (isExtra) {
                return { status: 'info', text: log.justification, isAnomaly: false, isExtraordinary: true };
            }
            return { status: 'justified', text: log.justification, isAnomaly: true };
        }

        // Detección de Feriado de Empresa
        if (settings?.holidays && Array.isArray(settings.holidays)) {
            const hMatch = settings.holidays.find(h => h.date === log.date);
            if (hMatch) {
                return { status: 'info', text: `Día Feriado: ${hMatch.name}`, isAnomaly: false, isHoliday: true };
            }
        }

        const user = (globalUsers || []).find(u => Number(u.id) === Number(log.userId));
        if (!user) return { status: 'normal', text: 'Registro Normal', isAnomaly: false };

        const dayCode = window.getDayOfWeekCode ? window.getDayOfWeekCode(log.date) : 'lun';
        const customSchedule = user.scheduleCustom && user.scheduleCustom[dayCode];

        const scheduledStart = customSchedule?.start || user.scheduleStart || '08:00';
        const scheduledEnd = customSchedule?.end || user.scheduleEnd || '17:00';

        const dateObj = new Date(Number(log.timestamp));
        const hours = String(dateObj.getHours()).padStart(2, '0');
        const minutes = String(dateObj.getMinutes()).padStart(2, '0');
        const logTime = `${hours}:${minutes}`;
        const logTypeStr = String(log.type || '').toLowerCase();

        // 1. Evaluación de Marcas de Almuerzo o Break (No son salidas de jornada laboral)
        if (logTypeStr.includes('almuerzo')) {
            if (logTypeStr.endsWith('_in') || logTypeStr.includes('inicio')) {
                return { status: 'normal', text: 'Inicio de Almuerzo', isAnomaly: false };
            }
            if (logTypeStr.endsWith('_out') || logTypeStr.includes('fin')) {
                const almuerzoInLog = (logs || []).find(l => 
                    Number(l.userId) === Number(log.userId) && 
                    l.date === log.date && 
                    String(l.type).toLowerCase().includes('almuerzo') && 
                    (String(l.type).endsWith('_in') || String(l.type).includes('inicio'))
                );
                if (almuerzoInLog) {
                    const durMin = Math.round((Number(log.timestamp) - Number(almuerzoInLog.timestamp)) / 60000);
                    const limitMin = settings?.lunchLimitMinutes || 60;
                    if (durMin > limitMin + 5) {
                        return { status: 'warning', text: `Exceso de Almuerzo (${durMin} min)`, isAnomaly: true, minutes: durMin - limitMin };
                    }
                }
                return { status: 'ok', text: 'Fin de Almuerzo (Puntual)', isAnomaly: false };
            }
            return { status: 'normal', text: 'Registro de Almuerzo', isAnomaly: false };
        }

        if (logTypeStr.includes('break') || logTypeStr.includes('descanso')) {
            if (logTypeStr.endsWith('_in') || logTypeStr.includes('inicio')) {
                return { status: 'normal', text: 'Inicio de Descanso', isAnomaly: false };
            }
            return { status: 'ok', text: 'Fin de Descanso', isAnomaly: false };
        }
        
        // 2. Evaluación de Entrada Trabajo
        if (log.type === 'entrada') {
            const [sh, sm] = scheduledStart.split(':').map(Number);
            const [lh, lm] = logTime.split(':').map(Number);
            const diffMin = (lh * 60 + lm) - (sh * 60 + sm);
            const grace = settings?.gracePeriodMinutes || 5;

            if (diffMin > grace) {
                return { status: 'warning', text: `Tardanza (+${diffMin} min)`, isAnomaly: true, anomalyType: 'tardanza', minutes: diffMin };
            }
            return { status: 'ok', text: 'Entrada puntual', isAnomaly: false };
        }

        // 3. Salida de Jornada Laboral
        const isWorkDeparture = log.type === 'salida' || log.type.startsWith('salida_') || log.type.includes('permiso_out');
        if (isWorkDeparture) {
            const logMinutes = dateObj.getHours() * 60 + dateObj.getMinutes();
            const [ehH, ehM] = scheduledEnd.split(':').map(Number);
            const scheduledEndMinutes = ehH * 60 + ehM;

            const minutesEarly = scheduledEndMinutes - logMinutes;

            if (minutesEarly > 5) {
                const hoursOut = (minutesEarly / 60).toFixed(1);
                
                if (minutesEarly >= 120 && minutesEarly <= 270) {
                    return { 
                        status: 'warning', 
                        text: `Salida Consulta (${hoursOut} hrs fuera)`, 
                        isAnomaly: true, 
                        isMedicalAlert: true,
                        minutes: minutesEarly 
                    };
                }
                
                if (minutesEarly > 270) {
                    return { 
                        status: 'danger', 
                        text: `Ausencia Crítica (${hoursOut} hrs fuera) - Evaluar Subsidio`, 
                        isAnomaly: true, 
                        isProlongedAbsence: true,
                        minutes: minutesEarly 
                    };
                }

                return { status: 'danger', text: `Salida anticipada (-${minutesEarly} min)`, isAnomaly: true, minutes: minutesEarly };
            }
            return { status: 'ok', text: 'Salida regular completa', isAnomaly: false };
        }

        return { status: 'normal', text: 'Normal', isAnomaly: false };
    };

    const formatLogType = (typeStr) => {
        if (!typeStr) return { label: 'MARCA', isStart: false, isEnd: false };
        if (typeStr === 'entrada') return { label: 'Entrada Trabajo', isStart: true, isEnd: false };
        if (typeStr === 'salida') return { label: 'Cierre de Día (Salida)', isStart: false, isEnd: true };

        const isStart = typeStr.endsWith('_in');
        const isEnd = typeStr.endsWith('_out') || typeStr.startsWith('vuelta_');

        let cleanId = typeStr.replace('_in', '').replace('_out', '').replace('vuelta_', '').toLowerCase();
        const matchedAction = (actions || []).find(a => (a.id || '').toLowerCase() === cleanId);

        let baseName = matchedAction ? matchedAction.label : cleanId.replace(/_\d+/g, '').replace(/_/g, ' ').toUpperCase();
        let finalLabel = baseName;
        if (isStart) finalLabel = `Inicio ${baseName}`;
        else if (isEnd) finalLabel = `Fin ${baseName}`;

        return { label: finalLabel, isStart, isEnd };
    };

    const combinedAuditList = useMemo(() => {
        const mappedLogs = (logs || []).map(l => ({ ...l, isAbsenceRecord: false }));
        const mappedAbsences = (absences || []).map(a => ({
            id: `abs_${a.id}`,
            realAbsenceId: a.id,
            userId: a.userId,
            userName: a.userName,
            type: a.type === 'injustificada' ? 'Falta Injustificada' : 'Falta Justificada',
            date: a.date,
            timestamp: a.createdAt || Date.now(),
            justification: a.notes ? `Observación: ${a.notes}` : 'Sin nota',
            isAbsenceRecord: true,
            absenceType: a.type
        }));
        return [...mappedLogs, ...mappedAbsences];
    }, [logs, absences]);

    const filteredLogs = useMemo(() => {
        const result = combinedAuditList.filter(l => {
            const matchName = (l.userName || '').toLowerCase().includes(searchName.toLowerCase());
            
            let matchDate = true;
            if (searchDate) { matchDate = l.date === searchDate; } 
            else if (startDate && endDate) { matchDate = l.date >= startDate && l.date <= endDate; }

            let matchType = true;
            if (selectedActionType === 'ENTRADA_SALIDA') {
                matchType = l.type === 'entrada' || l.type === 'salida';
            } else if (selectedActionType === 'ALMUERZO') {
                matchType = String(l.type).includes('almuerzo');
            } else if (selectedActionType === 'AUSENCIAS') {
                matchType = l.isAbsenceRecord;
            } else if (selectedActionType === 'ALERTAS') {
                matchType = (l.justification && l.justification.startsWith('ALERTA:')) || window.isUserOffDay(globalUsers.find(u=>u.id===l.userId)?.scheduleDays, l.date);
            } else if (selectedActionType !== 'ALL') {
                matchType = String(l.type).includes(selectedActionType);
            }

            return matchName && matchDate && matchType;
        });

        return result.sort((a,b) => {
            if (a.date !== b.date) return a.date > b.date ? -1 : 1;
            if (a.userName !== b.userName) return a.userName.localeCompare(b.userName);
            return a.timestamp - b.timestamp;
        });
    }, [combinedAuditList, searchName, searchDate, startDate, endDate, selectedActionType, globalUsers]);

    const totalPages = Math.ceil(filteredLogs.length / ITEMS_PER_PAGE) || 1;
    const paginatedLogs = useMemo(() => {
        const startIdx = (currentPage - 1) * ITEMS_PER_PAGE;
        return filteredLogs.slice(startIdx, startIdx + ITEMS_PER_PAGE);
    }, [filteredLogs, currentPage]);

    const handleOpenLiveTrackingMap = () => {
        const todayNIC = window.getNICDate();
        const activeTrackers = (globalUsers || []).filter(u => {
            if (!u.gpsTrackingEnabled || !u.lastLat || !u.lastLng || !u.lastGpsTime) return false;
            const signalDate = window.getNICDateFromObj(new Date(u.lastGpsTime));
            return signalDate === todayNIC;
        });

        if (activeTrackers.length === 0) {
            alert("No hay vendedores o colaboradores transmitiendo posición GPS en tiempo real en este momento.");
            return;
        }

        const mapItems = activeTrackers.map(u => ({
            id: `live_${u.id}`,
            userName: `${u.name} (@${u.alias})`,
            type: 'visita_in',
            timestamp: u.lastGpsTime,
            location: { lat: u.lastLat, lng: u.lastLng },
            justification: `Última transmisión en vivo: ${window.formatNICTimeFull(u.lastGpsTime)}`
        }));

        setMapLogs(mapItems);
    };

    const handleOpenEdit = (log) => {
        setEditingLog(log);
        setFormUser(log.userId);
        setFormType(log.type);
        setFormDate(log.date);
        
        const dateObj = new Date(log.timestamp);
        const hours = String(dateObj.getHours()).padStart(2, '0');
        const mins = String(dateObj.getMinutes()).padStart(2, '0');
        setFormTime(`${hours}:${mins}`);
        setFormJustification(log.justification || '');
    };

    const handleSaveLogAudit = async (e) => {
        e.preventDefault();
        const [h, m] = formTime.split(':').map(Number);
        const [y, mon, d] = formDate.split('-').map(Number);
        const targetTimestamp = new Date(y, mon - 1, d, h, m, 0).getTime();

        const userObj = globalUsers.find(u => Number(u.id) === Number(formUser));
        if (!userObj) return alert("Selecciona un colaborador.");

        const payload = {
            id: editingLog ? editingLog.id : null,
            userId: userObj.id,
            userName: userObj.name,
            type: formType,
            date: formDate,
            timestamp: targetTimestamp,
            justification: `${formJustification ? formJustification + ' | ' : ''}Ajuste Manual por Administrador (${new Date().toLocaleDateString()})`
        };

        const res = await window.apiCall(editingLog ? 'update_log' : 'save_log', payload);
        if (res && res.success) {
            setEditingLog(null);
            setShowNewMarkModal(false);
            if (refreshData) await refreshData();
        } else {
            alert("Error al procesar marca.");
        }
    };

    const handleSaveJustification = async () => {
        if (!justifyingLog) return;
        setIsSavingJustification(true);

        const fullNote = customNote ? `${selectedJustification} (${customNote})` : selectedJustification;
        const normChoice = selectedJustification.toLowerCase();

        // 1. Detección de descuento de vacaciones (Aplica para Tardanza y para Salida Temprana)
        if (normChoice.includes('vacacion') || normChoice.includes('medio')) {
            const isHalf = normChoice.includes('medio') || normChoice.includes('0.5');
            const daysCount = isHalf ? 0.5 : 1.0;
            const incidenceType = justifyingLog.type === 'entrada' ? 'Entrada Tarde' : 'Salida Anticipada';

            const resVac = await window.apiCall('deduct_vacation_from_audit', {
                userId: justifyingLog.userId,
                days: daysCount,
                date: justifyingLog.date,
                logId: justifyingLog.id, // <-- VÍNCULO DIRECTO
                reason: `Deducción por ${incidenceType} el ${window.formatDateToNIC(justifyingLog.date)}`
            });

            if (!resVac || !resVac.success) {
                setIsSavingJustification(false);
                alert("Atención: No se pudo descontar del saldo de vacaciones. Detalle: " + (resVac?.error || "Error en el servidor"));
                return;
            }
        }

        // 2. Actualizar la marca en la tabla de logs
        const resLog = await window.apiCall('update_log', {
            id: justifyingLog.id,
            userId: justifyingLog.userId,
            type: justifyingLog.type,
            date: justifyingLog.date,
            timestamp: justifyingLog.timestamp,
            justification: fullNote
        });

        setIsSavingJustification(false);

        if (resLog && resLog.success) {
            justifyingLog.justification = fullNote;
            setJustifyingLog(null);
            // Refrescar estado global del dashboard
            if (typeof refreshData === 'function') {
                await refreshData();
            }
        } else {
            alert("Error al actualizar la marca: " + (resLog?.error || "Error de conexión"));
        }
    };

    const handleDeleteLog = async (logId) => {
        if (!confirm("¿Eliminar este registro de marcaje de la auditoría?")) return;
        const res = await window.apiCall('delete_log', { id: logId });
        if (res && res.success && refreshData) await refreshData();
    };

    // Generador de PDF Multi-Página Estructurado (Impresión Continua sin Truncamiento)
    const handlePrintAuditoriaPDF = () => {
        const printIframe = document.createElement('iframe');
        printIframe.style.position = 'fixed';
        printIframe.style.right = '0';
        printIframe.style.bottom = '0';
        printIframe.style.width = '0';
        printIframe.style.height = '0';
        printIframe.style.border = '0';
        document.body.appendChild(printIframe);

        const companyTitle = settings?.companyName || window.SHIFT_CONFIG?.companyName || 'CLEANDENT';
        const rangeText = startDate && endDate 
            ? `${startDate} al ${endDate}` 
            : (searchDate || 'Todo el Historial');

        const rowsHtml = filteredLogs.map((log, idx) => {
            const audit = auditLogRecord(log);
            const dateFull = window.formatNICTimeFull ? window.formatNICTimeFull(log.timestamp) : log.date;
            const clientLoc = log.client ? ` • ${log.client}` : '';

            let actionName = log.type.toUpperCase();
            if (log.type === 'entrada') actionName = 'ENTRADA TRABAJO';
            else if (log.type === 'salida') actionName = 'CIERRE DE DÍA (SALIDA)';
            else if (log.type.includes('almuerzo')) actionName = log.type.includes('fin') ? 'FIN ALMUERZO' : 'INICIO ALMUERZO';
            else if (log.isAbsenceRecord) actionName = log.type.toUpperCase();

            const obsText = log.isAbsenceRecord 
                ? `${log.justification} ${log.absenceType === 'injustificada' ? '(Deduce Séptimo Día)' : ''}`
                : audit.text;

            return `
                <tr>
                    <td style="padding: 6px 8px; border-bottom: 1px solid #cbd5e1; font-size: 9.5px; text-align: center;">${idx + 1}</td>
                    <td style="padding: 6px 8px; border-bottom: 1px solid #cbd5e1; font-weight: bold; font-size: 10px; color: #0f172a;">${log.userName || 'Usuario'}${clientLoc}</td>
                    <td style="padding: 6px 8px; border-bottom: 1px solid #cbd5e1; font-size: 9.5px; font-weight: 700; text-transform: uppercase;">${actionName}</td>
                    <td style="padding: 6px 8px; border-bottom: 1px solid #cbd5e1; font-size: 9.5px; color: #334155;">${dateFull}</td>
                    <td style="padding: 6px 8px; border-bottom: 1px solid #cbd5e1; font-size: 9.5px; color: #0f172a;">${obsText}</td>
                </tr>
            `;
        }).join('');

        const doc = printIframe.contentWindow.document;
        doc.open();
        doc.write(`
            <!DOCTYPE html>
            <html lang="es">
            <head>
                <meta charset="utf-8">
                <title>REPORTE-AUDITORIA-${companyTitle}-${rangeText}</title>
                <style>
                    @page {
                        size: letter portrait;
                        margin: 12mm 12mm 14mm 12mm;
                    }
                    * {
                        box-sizing: border-box;
                        -webkit-print-color-adjust: exact !important;
                        print-color-adjust: exact !important;
                    }
                    body {
                        font-family: Arial, Helvetica, sans-serif;
                        color: #0f172a;
                        margin: 0;
                        padding: 0;
                        background: #ffffff;
                    }
                    .header {
                        text-align: center;
                        border-bottom: 2px solid #0f172a;
                        padding-bottom: 8px;
                        margin-bottom: 14px;
                    }
                    .header h1 {
                        margin: 0;
                        font-size: 16px;
                        font-weight: 900;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }
                    .header h2 {
                        margin: 3px 0;
                        font-size: 11px;
                        font-weight: 800;
                        text-transform: uppercase;
                        color: #334155;
                    }
                    .header p {
                        margin: 0;
                        font-size: 9px;
                        color: #64748b;
                        font-weight: 600;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        page-break-inside: auto;
                    }
                    tr {
                        page-break-inside: avoid;
                        page-break-after: auto;
                    }
                    thead {
                        display: table-header-group;
                    }
                    tfoot {
                        display: table-footer-group;
                    }
                    th {
                        background-color: #f1f5f9;
                        color: #0f172a;
                        font-size: 8.5px;
                        text-transform: uppercase;
                        font-weight: 900;
                        padding: 7px 8px;
                        border-top: 1px solid #0f172a;
                        border-bottom: 1.5px solid #0f172a;
                        text-align: left;
                    }
                </style>
            </head>
            <body>
                <div class="header">
                    <h1>${companyTitle}</h1>
                    <h2>REPORTE OFICIAL DE ASISTENCIA Y AUDITORÍA OPERATIVA</h2>
                    <p>Período Evaluado: <strong>${rangeText}</strong> • Filtro: <strong>${selectedActionType}</strong> • Total de Registros: <strong>${filteredLogs.length}</strong> • Generado el ${todayStr}</p>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th style="width: 25px; text-align: center;">#</th>
                            <th>Colaborador / Sede</th>
                            <th>Actividad Registrada</th>
                            <th>Fecha y Hora</th>
                            <th>Observación de Auditoría</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${rowsHtml || '<tr><td colspan="5" style="text-align:center; padding: 20px; font-size: 10px; color:#64748b;">No se encontraron registros en el período seleccionado.</td></tr>'}
                    </tbody>
                </table>
            </body>
            </html>
        `);
        doc.close();

        setTimeout(() => {
            printIframe.contentWindow.focus();
            printIframe.contentWindow.print();
            setTimeout(() => {
                if (document.body.contains(printIframe)) {
                    document.body.removeChild(printIframe);
                }
            }, 1000);
        }, 400);
    };

    return (
        <div className="space-y-6 fade-in">
            {/* MODAL CREAR / EDITAR MARCA MANUAL */}
            {(editingLog || showNewMarkModal) && (
                <div className="fixed inset-0 bg-slate-900/60 z-[120] flex items-center justify-center p-4 fade-in" onClick={() => { setEditingLog(null); setShowNewMarkModal(false); }}>
                    <div className="bg-white p-6 sm:p-7 rounded-2xl w-full max-w-lg shadow-xl space-y-4 border border-slate-200/80" onClick={e=>e.stopPropagation()}>
                        <h3 className="font-black text-xl text-slate-900">{editingLog ? 'Corregir Registro de Marcaje' : 'Registrar Marca Manual (Olvido)'}</h3>
                        <p className="text-slate-400 font-bold text-[10px] uppercase tracking-widest">Quedará asentado en auditoría quién realizó el ajuste</p>

                        <form onSubmit={handleSaveLogAudit} className="space-y-4 pt-2">
                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block">Colaborador</label>
                                <select value={formUser} onChange={e=>setFormUser(e.target.value)} className="w-full p-3.5 bg-slate-50 rounded-2xl font-bold text-xs outline-none border focus:ring-2 focus:ring-indigo-200" required>
                                    <option value="">Seleccionar...</option>
                                    {globalUsers.map(u => <option key={u.id} value={u.id}>{u.name} (@{u.alias})</option>)}
                                </select>
                            </div>

                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block">Tipo de Marca</label>
                                    <select value={formType} onChange={e=>setFormType(e.target.value)} className="w-full p-3.5 bg-slate-50 rounded-2xl font-bold text-xs outline-none border focus:ring-2 focus:ring-indigo-200">
                                        <option value="entrada">Entrada Trabajo</option>
                                        <option value="salida">Salida (Cierre de Día)</option>
                                        <option value="almuerzo_in">Inicio Almuerzo</option>
                                        <option value="almuerzo_out">Fin Almuerzo</option>
                                        {actions.map(a => (
                                            <React.Fragment key={a.id}>
                                                <option value={`${a.id}_in`}>Inicio {a.label}</option>
                                                <option value={`${a.id}_out`}>Fin {a.label}</option>
                                            </React.Fragment>
                                        ))}
                                    </select>
                                </div>
                                <div>
                                    <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block">Hora Exacta</label>
                                    <input type="time" value={formTime} onChange={e=>setFormTime(e.target.value)} className="w-full p-3.5 bg-slate-50 rounded-2xl font-bold text-xs outline-none border focus:ring-2 focus:ring-indigo-200" required />
                                </div>
                            </div>

                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block">Fecha</label>
                                <input type="date" value={formDate} onChange={e=>setFormDate(e.target.value)} className="w-full p-3.5 bg-slate-50 rounded-2xl font-bold text-xs outline-none border focus:ring-2 focus:ring-indigo-200" required />
                            </div>

                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block">Motivo / Justificación</label>
                                <input value={formJustification} onChange={e=>setFormJustification(e.target.value)} placeholder="Ej. Olvidó marcar entrada por corte de luz..." className="w-full p-3.5 bg-slate-50 rounded-2xl font-bold text-xs outline-none border focus:ring-2 focus:ring-indigo-200" required />
                            </div>

                            <div className="flex gap-3 pt-4">
                                <button type="button" onClick={() => { setEditingLog(null); setShowNewMarkModal(false); }} className="flex-1 py-4 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-2xl font-black uppercase text-[10px] transition-colors cursor-pointer">Cancelar</button>
                                <button type="submit" className="flex-1 py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-black uppercase text-[10px] shadow-lg transition-colors cursor-pointer">Guardar Ajuste</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* BARRA DE FILTROS SUPERIOR */}
            <div className="bg-white p-6 rounded-2xl shadow-xs border border-slate-200/80 flex flex-col space-y-4 print:hidden">
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pb-2 border-b border-slate-100">
                    <div>
                        <h3 className="text-xl font-black text-slate-900">Auditoría Operativa</h3>
                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Busca, filtra, exporta y corrige marcajes del personal</p>
                    </div>
                    
                    {/* BOTONES DE PRESET CON SOMBREADO CONDICIONAL */}
                    <div className="flex flex-wrap gap-2">
                        <button 
                            onClick={()=>applyQuickFilter('today')} 
                            className={`px-4 py-2 rounded-xl font-black text-[9px] uppercase tracking-widest transition-all border cursor-pointer ${
                                activePreset === 'today' 
                                    ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' 
                                    : 'bg-slate-50 hover:bg-indigo-50 text-slate-500 hover:text-indigo-600 border-slate-200'
                            }`}
                        >
                            Hoy
                        </button>
                        <button 
                            onClick={()=>applyQuickFilter('this_week')} 
                            className={`px-4 py-2 rounded-xl font-black text-[9px] uppercase tracking-widest transition-all border cursor-pointer ${
                                activePreset === 'this_week' 
                                    ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' 
                                    : 'bg-slate-50 hover:bg-indigo-50 text-slate-500 hover:text-indigo-600 border-slate-200'
                            }`}
                        >
                            Esta Semana
                        </button>
                        <button 
                            onClick={()=>applyQuickFilter('this_quincena')} 
                            className={`px-4 py-2 rounded-xl font-black text-[9px] uppercase tracking-widest transition-all border cursor-pointer ${
                                activePreset === 'this_quincena' 
                                    ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' 
                                    : 'bg-slate-50 hover:bg-indigo-50 text-slate-500 hover:text-indigo-600 border-slate-200'
                            }`}
                        >
                            Quincena Actual
                        </button>
                        <button 
                            onClick={()=>applyQuickFilter('this_month')} 
                            className={`px-4 py-2 rounded-xl font-black text-[9px] uppercase tracking-widest transition-all border cursor-pointer ${
                                activePreset === 'this_month' 
                                    ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' 
                                    : 'bg-slate-50 hover:bg-indigo-50 text-slate-500 hover:text-indigo-600 border-slate-200'
                            }`}
                        >
                            Este Mes
                        </button>
                    </div>
                </div>

                <div className="flex flex-col lg:flex-row items-end gap-4">
                    <div className="w-full lg:w-1/4">
                        <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block tracking-widest">Colaborador</label>
                        <input value={searchName} onChange={e=>setSearchName(e.target.value)} placeholder="Buscar nombre..." className="w-full p-4 bg-slate-50 border rounded-2xl font-bold outline-none focus:border-indigo-500 transition-colors text-xs" />
                    </div>

                    <div className="w-full lg:w-1/4">
                        <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block tracking-widest">Filtrar Marcas</label>
                        <select value={selectedActionType} onChange={e=>setSelectedActionType(e.target.value)} className="w-full p-4 bg-slate-50 border rounded-2xl font-bold outline-none focus:border-indigo-500 text-xs uppercase">
                            <option value="ALL">TODAS LAS MARCAS</option>
                            <option value="ENTRADA_SALIDA">SOLO ENTRADA Y SALIDA</option>
                            <option value="ALMUERZO">SOLO ALMUERZOS</option>
                            <option value="AUSENCIAS">SOLO AUSENCIAS (FALTAS)</option>
                            <option value="ALERTAS">SOLO EXCESOS / DÍAS LIBRES</option>
                        </select>
                    </div>

                    <div className="w-full lg:w-1/4">
                        <label className="text-[10px] font-black uppercase text-slate-400 ml-2 mb-1 block tracking-widest">Día Específico</label>
                        <input 
                            type="date" 
                            value={searchDate} 
                            onChange={e=>{
                                setSearchDate(e.target.value); 
                                setStartDate(''); 
                                setEndDate('');
                                setActivePreset(e.target.value === todayStr ? 'today' : 'custom');
                            }} 
                            className="w-full p-4 bg-slate-50 border rounded-2xl font-bold outline-none focus:border-indigo-500 transition-colors text-xs" 
                        />
                    </div>

                    <div className="w-full lg:w-1/4 bg-slate-50 p-2.5 rounded-2xl border relative">
                        <span className="text-[9px] font-black uppercase tracking-widest text-indigo-500 block mb-1">Rango Opcional</span>
                        <div className="flex gap-2">
                            <input 
                                type="date" 
                                value={startDate} 
                                onChange={e=>{
                                    setStartDate(e.target.value); 
                                    setSearchDate('');
                                    setActivePreset('custom');
                                }} 
                                className="w-1/2 p-2 bg-white rounded-xl font-bold outline-none border text-xs" 
                            />
                            <input 
                                type="date" 
                                value={endDate} 
                                onChange={e=>{
                                    setEndDate(e.target.value); 
                                    setSearchDate('');
                                    setActivePreset('custom');
                                }} 
                                className="w-1/2 p-2 bg-white rounded-xl font-bold outline-none border text-xs" 
                            />
                        </div>
                    </div>
                </div>

                <div className="flex flex-wrap justify-between items-center gap-3 pt-2">
                    <span className="text-xs font-bold text-slate-500">
                        Mostrando <strong>{paginatedLogs.length}</strong> de <strong>{filteredLogs.length}</strong> registro(s) auditado(s) {totalPages > 1 && `(Página ${currentPage} de ${totalPages})`}
                    </span>
                    <div className="flex flex-wrap gap-2">
                        {isGlobalAdmin && (
                            <button 
                                onClick={handleRun7DaySimulation} 
                                disabled={isSimulating}
                                className="px-4 py-3.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold uppercase text-[10px] tracking-wider shadow-xs flex items-center gap-2 transition-all cursor-pointer disabled:opacity-50"
                                title="Ejecutar simulacro completo de 7 días probando marcaciones, GPS, tardanzas, horas extras y permisos (Solo Admin Global)"
                            >
                                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                <span>{isSimulating ? 'Simulando 7 Días...' : 'Simulacro 7 Días'}</span>
                            </button>
                        )}
                        <button 
                            onClick={handleAuditMissingClockOuts} 
                            disabled={isAuditingClockouts}
                            className="px-4 py-3.5 bg-amber-500 hover:bg-amber-600 text-white rounded-xl font-bold uppercase text-[10px] tracking-wider shadow-xs flex items-center gap-2 transition-all cursor-pointer disabled:opacity-50"
                            title="Detectar colaboradores con Entrada pero sin Salida en la jornada y alertar a sus supervisores"
                        >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" 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>
                            <span>{isAuditingClockouts ? 'Auditando...' : 'Auditar Salidas Olvidadas'}</span>
                        </button>
                        <button onClick={handleOpenLiveTrackingMap} className="px-5 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold uppercase text-[10px] tracking-wider shadow-xs flex items-center gap-2 transition-all cursor-pointer">
                            <span className="w-2 h-2 rounded-full bg-emerald-200 animate-pulse"></span>
                            <span>Monitoreo en Vivo</span>
                        </button>
                        <button onClick={() => { setFormUser(''); setFormType('entrada'); setFormDate(todayStr); setFormTime('08:00'); setFormJustification(''); setShowNewMarkModal(true); }} className="px-5 py-3.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold uppercase text-[10px] tracking-wider shadow-xs flex items-center gap-2 transition-all cursor-pointer">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4"></path></svg>
                            <span>Marca Manual</span>
                        </button>
                        <button onClick={()=>setMapLogs(filteredLogs.filter(l=>!l.isAbsenceRecord))} className="px-5 py-3.5 bg-slate-100 text-slate-700 hover:bg-slate-200 rounded-xl font-bold uppercase text-[10px] tracking-wider shadow-xs flex items-center gap-2 transition-all border border-slate-200 cursor-pointer">
                            <span>Ruta Filtro</span>
                        </button>
                        <button onClick={handlePrintAuditoriaPDF} className="px-5 py-3.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold uppercase text-[10px] tracking-wider shadow-xs flex items-center gap-2 transition-all cursor-pointer">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                            <span>Imprimir / PDF Oficial</span>
                        </button>
                    </div>
                </div>
            </div>

            {/* TABLA DE AUDITORÍA */}
            <div className="bg-white rounded-2xl shadow-xs overflow-hidden border border-slate-200/80">
                <table className="w-full text-left border-collapse">
                    <thead className="bg-slate-50 text-[10px] font-black text-slate-500 uppercase border-b border-slate-100">
                        <tr>
                            <th className="p-5">Colaborador / Usuario</th>
                            <th className="p-5">Actividad Registrada</th>
                            <th className="p-5">Fecha y Hora</th>
                            <th className="p-5">Observación de Auditoría</th>
                            <th className="p-5 text-center">Pruebas Físicas</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-50">
                        {filteredLogs.length === 0 ? (
                            <tr>
                                <td colSpan="5" className="p-8 text-center text-sm font-bold text-slate-400">
                                    No se encontraron registros en el criterio seleccionado.
                                </td>
                            </tr>
                        ) : (
                            paginatedLogs.map((l) => {
                                if (l.isAbsenceRecord) {
                                    return (
                                        <tr key={l.id} className="bg-red-50/60 hover:bg-red-50 text-xs">
                                            <td className="p-5 font-black text-red-900">{l.userName}</td>
                                            <td className="p-5 uppercase font-bold text-[10px]">
                                                <span className={`inline-block px-3 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-wider ${l.absenceType === 'injustificada' ? 'bg-red-600 text-white' : 'bg-orange-500 text-white'}`}>
                                                    {l.type}
                                                </span>
                                            </td>
                                            <td className="p-5 font-bold text-slate-700">{window.formatDateToNIC(l.date)}</td>
                                            <td className="p-5">
                                                <span className="p-1.5 bg-white border border-red-200 rounded-lg text-[10px] font-black text-red-700">
                                                    {l.justification} {l.absenceType === 'injustificada' ? '(Deduce Séptimo Día en Nómina)' : ''}
                                                </span>
                                            </td>
                                            <td className="p-5 text-center"><span className="text-[10px] font-black uppercase text-red-400 tracking-widest">Ausencia</span></td>
                                        </tr>
                                    );
                                }

                                const { label: displayType, isStart, isEnd } = formatLogType(l.type);
                                const userObj = globalUsers.find(u => u.id === l.userId);
                                const isOffDay = userObj ? window.isUserOffDay(userObj.scheduleDays, l.date) : false;
                                const audit = auditLogRecord(l);

                                return (
                                    <tr key={l.id || l.timestamp} className="hover:bg-slate-50/50 transition-colors text-xs">
                                        <td className="p-5 font-black text-indigo-950">
                                            {l.userName || 'Usuario'}
                                            {l.client && <span className="block text-[10px] text-slate-500 font-bold mt-1">({l.client})</span>}
                                        </td>
                                        <td className="p-5 uppercase font-bold text-[10px]">
                                            <span className={`inline-block px-3 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-wider ${
                                                l.type === 'entrada' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' :
                                                l.type === 'salida' ? 'bg-red-50 text-red-700 border border-red-200' :
                                                isStart ? 'bg-orange-50 text-orange-700 border border-orange-200' :
                                                isEnd ? 'bg-blue-50 text-blue-700 border border-blue-200' :
                                                'bg-indigo-50 text-indigo-700 border border-indigo-200'
                                            }`}>
                                                {displayType}
                                            </span>
                                        </td>
                                        <td className="p-5 font-bold text-slate-700">
                                            {window.formatNICTimeFull ? window.formatNICTimeFull(l.timestamp) : new Date(l.timestamp).toLocaleString()}
                                        </td>
                                        <td className="p-5">
                                            {isOffDay && (
                                                <span className="px-2.5 py-1 bg-amber-50 text-amber-800 border border-amber-200 font-bold text-[9px] rounded-lg uppercase mr-2 inline-flex items-center gap-1 mb-1">
                                                    <span className="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                                    Marca en Día Libre
                                                </span>
                                            )}

                                            {/* REGLA: SÓLO ES EDITABLE SI TIENE ANOMALÍA O YA FUE JUSTIFICADO */}
                                            {audit.isAnomaly ? (
                                                <button 
                                                    type="button"
                                                    onClick={() => {
                                                        setJustifyingLog(l);
                                                        setSelectedJustification(l.justification || 'Permiso Autorizado (Con goce)');
                                                        setCustomNote('');
                                                    }}
                                                    className={`px-3 py-1.5 rounded-xl text-[10px] font-black text-left inline-flex items-center gap-1.5 cursor-pointer border transition-all ${
                                                        l.justification ? 'bg-emerald-50 border-emerald-200 text-emerald-800 hover:bg-emerald-100' :
                                                        audit.status === 'warning' ? 'bg-amber-50 border-amber-200 text-amber-800 hover:bg-amber-100' :
                                                        audit.status === 'danger' ? 'bg-red-50 border-red-200 text-red-800 hover:bg-red-100' :
                                                        'bg-slate-50 border-slate-200 text-slate-500 hover:bg-slate-100'
                                                    }`}
                                                    title="Haz clic para justificar o modificar esta incidencia"
                                                >
                                                    <span>{audit.text}</span>
                                                    <svg className="w-3 h-3 opacity-60 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                                                </button>
                                            ) : (
                                                <span className="text-slate-400 text-[10px] font-semibold">
                                                    {audit.text}
                                                </span>
                                            )}
                                        </td>
                                        <td className="p-5 text-center">
                                            <div className="flex items-center justify-center gap-2">
                                                <button onClick={()=>handleOpenEdit(l)} className="p-2 bg-slate-50 hover:bg-indigo-100 text-slate-500 hover:text-indigo-700 rounded-xl transition-colors shadow-sm cursor-pointer" title="Editar Marca">
                                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                                </button>
                                                {l.location && l.location.lat ? (
                                                    <button onClick={()=>setMapLogs([l])} className="px-3 py-1.5 bg-indigo-50 text-indigo-700 hover:bg-indigo-600 hover:text-white rounded-xl font-black text-[9px] uppercase tracking-widest transition-all shadow-sm cursor-pointer">
                                                        GPS
                                                    </button>
                                                ) : <span className="text-[9px] text-slate-300 font-bold uppercase w-10 text-center">N/A</span>}
                                                {l.photo ? (
                                                    <img src={l.photo} onClick={()=>setPreviewImage(l.photo)} onError={(e) => { e.target.style.display = 'none'; }} className="w-8 h-8 rounded-xl object-cover cursor-pointer hover:scale-110 transition-transform border border-slate-200 shadow-sm" />
                                                ) : <div className="w-8 h-8 rounded-xl border border-dashed border-slate-300 flex items-center justify-center text-slate-300 text-[8px] font-black">X</div>}
                                                <button onClick={()=>handleDeleteLog(l.id)} className="p-2 bg-slate-50 hover:bg-red-100 text-slate-400 hover:text-red-700 rounded-xl transition-colors shadow-sm cursor-pointer" title="Eliminar Registro">
                                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                );
                            })
                        )}
                    </tbody>
                </table>

                {/* CONTROLES DE PAGINACIÓN */}
                {totalPages > 1 && (
                    <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-6 py-4 bg-slate-50 border-t border-slate-100 print:hidden">
                        <span className="text-xs font-bold text-slate-500">
                            Página <strong>{currentPage}</strong> de <strong>{totalPages}</strong> ({filteredLogs.length} registros en total)
                        </span>
                        <div className="flex items-center gap-2">
                            <button
                                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                                disabled={currentPage === 1}
                                className="px-4 py-2 bg-white border border-slate-200 rounded-xl font-bold text-xs text-slate-700 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-white cursor-pointer transition-all shadow-xs"
                            >
                                ← Anterior
                            </button>
                            <span className="text-xs font-black text-slate-600 px-2">
                                {currentPage} / {totalPages}
                            </span>
                            <button
                                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                                disabled={currentPage === totalPages}
                                className="px-4 py-2 bg-white border border-slate-200 rounded-xl font-bold text-xs text-slate-700 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-white cursor-pointer transition-all shadow-xs"
                            >
                                Siguiente →
                            </button>
                        </div>
                    </div>
                )}
            </div>

            {/* MODAL DE JUSTIFICACIÓN LABORAL */}
            {justifyingLog && (
                <div className="fixed inset-0 bg-slate-900/60 z-[130] flex items-center justify-center p-4 fade-in" onClick={() => setJustifyingLog(null)}>
                    <div className="bg-white rounded-2xl w-full max-w-lg p-6 sm:p-7 shadow-xl space-y-4 border border-slate-200/80" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-center border-b pb-3">
                            <div>
                                <h3 className="font-black text-lg text-slate-900">Justificación Laboral de Asistencia</h3>
                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">
                                    {justifyingLog.userName} • {justifyingLog.date}
                                </p>
                            </div>
                            <button onClick={() => setJustifyingLog(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>

                        <div className="space-y-3">
                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-400 block mb-1">Causa o Tipo de Permiso</label>
                                <select 
                                    value={selectedJustification} 
                                    onChange={e => setSelectedJustification(e.target.value)} 
                                    className="w-full p-3.5 bg-slate-50 border rounded-2xl font-bold text-xs outline-none focus:border-indigo-600"
                                >
                                    <option value="Permiso Autorizado (Con goce)">Permiso Autorizado (No descontar de nómina)</option>
                                    <option value="Misión de Trabajo / Diligencia Oficial">Misión de Trabajo / Diligencia externa autorizada</option>
                                    <option value="Permiso Personal (Descontar minutos de nómina)">Permiso Personal (Descontar tiempo en dinero)</option>
                                    <option value="Descontar Medio Día Laboral">Descontar medio día (0.5) de Vacaciones</option>
                                    <option value="Deducir de Vacaciones Acumuladas">Deducir día completo (1.0) de Vacaciones</option>
                                    <option value="Constancia Médica / Cita MINSA">Constancia Médica / Consulta facultativa</option>
                                </select>
                            </div>

                            <div>
                                <label className="text-[9px] font-black uppercase text-slate-400 block mb-1">Nota Adicional / Detalle</label>
                                <textarea 
                                    value={customNote} 
                                    onChange={e => setCustomNote(e.target.value)} 
                                    placeholder="Detalle específico (ej. Cita médica dental autorizada por gerencia)..." 
                                    className="w-full p-3.5 bg-slate-50 border rounded-2xl font-bold text-xs outline-none h-24 resize-none"
                                />
                            </div>
                        </div>

                        <div className="flex gap-3 pt-3 border-t">
                            <button 
                                type="button" 
                                onClick={() => setJustifyingLog(null)} 
                                className="flex-1 py-3.5 bg-slate-100 text-slate-600 rounded-2xl font-black uppercase text-[10px] cursor-pointer"
                            >
                                Cancelar
                            </button>
                            <button 
                                type="button" 
                                onClick={handleSaveJustification} 
                                disabled={isSavingJustification} 
                                className="flex-1 py-3.5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl uppercase tracking-widest text-[10px] shadow-lg active:scale-95 transition-all cursor-pointer"
                            >
                                {isSavingJustification ? "Guardando..." : "Aplicar Justificación"}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL DE REPORTE DEL SIMULACRO DE 7 DÍAS */}
            {simulationReportModal && (
                <div className="fixed inset-0 bg-slate-900/70 z-[130] flex items-center justify-center p-4 fade-in" onClick={() => setSimulationReportModal(null)}>
                    <div className="bg-white rounded-3xl w-full max-w-3xl shadow-2xl overflow-hidden border border-slate-200 space-y-0" onClick={e => e.stopPropagation()}>
                        <div className="bg-slate-900 p-6 text-white flex items-center justify-between">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-2xl bg-indigo-600 flex items-center justify-center text-white shadow-md">
                                    <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 10V3L4 14h7v7l9-11h-7z"/></svg>
                                </div>
                                <div>
                                    <h3 className="font-black text-lg text-white leading-tight">Informe de Simulacro Automatizado (7 Días)</h3>
                                    <p className="text-slate-400 text-xs font-medium">Evaluación de estabilidad de datos real en tiempo real • Período: {simulationReportModal.summary?.period}</p>
                                </div>
                            </div>
                            <button onClick={() => setSimulationReportModal(null)} className="p-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl 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="p-6 space-y-6 max-h-[75vh] overflow-y-auto font-sans">
                            {/* HERO KPIS DE LA SIMULACIÓN */}
                            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                <div className="bg-slate-50 p-3.5 rounded-2xl border border-slate-200/80">
                                    <span className="text-[9px] font-black uppercase text-slate-400 block">Marcaciones Creadas</span>
                                    <h4 className="text-xl font-black text-slate-900 mt-0.5">{simulationReportModal.summary?.total_attendance_logs_created}</h4>
                                    <span className="text-[9px] text-slate-400 font-bold">GPS + Justificantes</span>
                                </div>
                                <div className="bg-amber-50 p-3.5 rounded-2xl border border-amber-200/80">
                                    <span className="text-[9px] font-black uppercase text-amber-600 block">Horas Extras Aprobadas</span>
                                    <h4 className="text-xl font-black text-amber-700 mt-0.5">+{simulationReportModal.summary?.total_overtime_hours_approved}h</h4>
                                    <span className="text-[9px] text-amber-600 font-bold">100% Recargo Doble</span>
                                </div>
                                <div className="bg-indigo-50 p-3.5 rounded-2xl border border-indigo-200/80">
                                    <span className="text-[9px] font-black uppercase text-indigo-600 block">Tiempo Compensado</span>
                                    <h4 className="text-xl font-black text-indigo-700 mt-0.5">{simulationReportModal.summary?.total_compensated_leave_granted}h</h4>
                                    <span className="text-[9px] text-indigo-600 font-bold">Descontadas de Saldo</span>
                                </div>
                                <div className={`p-3.5 rounded-2xl border ${simulationReportModal.summary?.detected_errors_count === 0 ? 'bg-emerald-50 border-emerald-200' : 'bg-red-50 border-red-200'}`}>
                                    <span className={`text-[9px] font-black uppercase block ${simulationReportModal.summary?.detected_errors_count === 0 ? 'text-emerald-600' : 'text-red-600'}`}>Fallas / Inconsistencias</span>
                                    <h4 className={`text-xl font-black mt-0.5 ${simulationReportModal.summary?.detected_errors_count === 0 ? 'text-emerald-700' : 'text-red-700'}`}>{simulationReportModal.summary?.detected_errors_count}</h4>
                                    <span className={`text-[9px] font-bold ${simulationReportModal.summary?.detected_errors_count === 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                                        {simulationReportModal.summary?.detected_errors_count === 0 ? '0 Errores Detectados' : 'Requiere Atención'}
                                    </span>
                                </div>
                            </div>

                            {/* CRONOGRAMA DE 7 DÍAS */}
                            <div>
                                <h4 className="text-xs font-black text-slate-900 uppercase tracking-wider mb-2.5">Cronograma de Escenarios Simulados por Día</h4>
                                <div className="space-y-2">
                                    {(simulationReportModal.simulation_report || []).map((rep, idx) => (
                                        <div key={idx} className="p-3 bg-slate-50 border border-slate-200/80 rounded-2xl flex items-center justify-between text-xs">
                                            <div className="flex items-center gap-3">
                                                <span className="px-2.5 py-1 bg-slate-900 text-white font-black text-[10px] rounded-xl">Día {rep.day}</span>
                                                <div>
                                                    <h5 className="font-bold text-slate-900">{rep.date} • {rep.scenario}</h5>
                                                    <span className="text-[10px] text-slate-400 font-medium">Marcaciones simuladas: {rep.logs_created}</span>
                                                </div>
                                            </div>
                                            <span className="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-lg text-[10px] font-bold">Procesado OK</span>
                                        </div>
                                    ))}
                                </div>
                            </div>

                            {/* DETECCION DE TURNOS ABIERTOS AUDITADOS */}
                            {simulationReportModal.missing_clockouts_found && simulationReportModal.missing_clockouts_found.length > 0 && (
                                <div className="p-4 bg-amber-50 border border-amber-200 rounded-2xl">
                                    <h4 className="text-xs font-black text-amber-900 uppercase tracking-wider mb-1">⚠️ Turnos Abiertos / Salidas Olvidadas Detectadas por el Auditor</h4>
                                    <p className="text-[11px] text-amber-800 font-medium mb-2">El motor de auditoría detectó correctamente marcaciones de entrada sin su correspondiente salida en el Día 6:</p>
                                    <ul className="text-[11px] font-bold text-amber-900 space-y-1 pl-4 list-disc">
                                        {simulationReportModal.missing_clockouts_found.map((m, idx) => (
                                            <li key={idx}>{m.name} — Entrada registrada a las {new Date(Number(m.timestamp)).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})} (Falta salida)</li>
                                        ))}
                                    </ul>
                                </div>
                            )}

                            {/* ERRORES DETECTADOS (SI LOS HAY) */}
                            {simulationReportModal.detected_errors && simulationReportModal.detected_errors.length > 0 ? (
                                <div className="p-4 bg-red-50 border border-red-200 rounded-2xl">
                                    <h4 className="text-xs font-black text-red-900 uppercase tracking-wider mb-1">❌ Inconsistencias Detectadas Durante la Simulación</h4>
                                    <ul className="text-[11px] font-semibold text-red-800 space-y-1 pl-4 list-disc">
                                        {simulationReportModal.detected_errors.map((err, idx) => (
                                            <li key={idx}>{err}</li>
                                        ))}
                                    </ul>
                                </div>
                            ) : (
                                <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-2xl text-emerald-950 text-xs font-semibold flex items-center gap-3">
                                    <svg className="w-6 h-6 text-emerald-600 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    <div>
                                        <strong>Auditoría Completa sin Fallas Tecnicas:</strong> Todas las marcaciones GPS, cálculo de tardanzas, horas extras con recargo, permisos de tiempo compensado y retenciones se ejecutaron limpiamente sin errores de base de datos ni incoherencias.
                                    </div>
                                </div>
                            )}
                        </div>

                        <div className="p-4 bg-slate-50 border-t flex justify-end">
                            <button onClick={() => setSimulationReportModal(null)} className="px-6 py-2.5 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs transition-all cursor-pointer">
                                Entendido / Cerrar Reporte
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};