<?php
require_once("../app/functions.php");
if (comprobar_override(str_replace($_SERVER['DOCUMENT_ROOT'], '', __FILE__))) exit;
$pag = basename($_SERVER['PHP_SELF']);

gen_plantilla(true, $pag, true, true, 'Actualizaciones', true, true);

// Solo admin puede acceder
if ($_SESSION['tipo_usuario'] != 'admin') {
    header("Location: " . SITIO_CARPETA . "/views/tables/fichajes?tipo=error&mensaje=No tienes permisos para acceder a esta página");
    exit;
}



// Obtener versión actual
include_once("../app/version.php");
$version_actual = $version ?? 'Desconocida';
?>
<aside id="showdialog"></aside>
<section class="cristal" <?= (!get_config_usuario($_SESSION['id_usuario'], 'reducir_efectos_movimiento')) ? 'style="view-transition-name: cristal;"' : '' ?>>
    <h1 class="resaltado flex row supercentrado"><span class="animacion-izq-drch">🔄</span> Actualizaciones</h1>
    
    <article class="flex column gap1 supercentrado" style="margin-top: 2rem;">
        <section class="cristal" style="padding: 2rem; text-align: center; min-width: 300px;">
            <h2 style="margin-bottom: 1rem;">Versión actual</h2>
            <p style="font-size: 3rem; font-weight: bold; color: var(--principal); margin: 1rem 0; text-decoration: underline; cursor: pointer;" id="version-actual"><?= $version_actual ?></p>
            
            <button class="btn-p" id="btn-comprobar" onclick="comprobarActualizaciones()" style="margin: 1rem 0;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em" style="margin-right: 0.5rem;">
                    <path fill="currentColor" d="M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z"/>
                </svg>
                Comprobar actualizaciones
            </button>
            
            <section id="estado-actualizacion" style="margin: 1.5rem 0; min-height: 60px;">
                <p style="color: var(--gris);">Pulsa el botón para comprobar si hay actualizaciones disponibles.</p>
            </section>
            
            <section id="seccion-backups" style="display: none; text-align: left; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde, rgba(0,0,0,0.1));">
                <button class="btn-t" id="btn-restaurar" onclick="mostrarDialogoRestaurar()" style="font-size: 0.8rem;">
                    Revertir versión
                </button>
            </section>
        </section>
    </article>
</section>

<script>
    window.onload = function() {
        document.getElementById('version-actual').addEventListener('click', function() {
            ajax('bienvenida','showdialog','actualizaciones=1',['cargar_dialog()']);
        });
        
        // Comprobar si hay backups al cargar
        comprobarBackups();
    }
    
    function comprobarBackups() {
        fetch('../app/ajax/aplicar_actualizacion.php?action=list_backups')
            .then(r => r.json())
            .then(data => {
                if (data.success && data.backups && data.backups.length > 0) {
                    window.ultimoBackup = data.backups[0]; // El más reciente
                    
                    // Solo mostrar botón de revertir si la versión del backup es diferente a la actual
                    const backupVersion = window.ultimoBackup.version || '';
                    const currentVersion = data.current_version || '';
                    
                    if (backupVersion && currentVersion && backupVersion === currentVersion) {
                        // Misma versión, no mostrar botón de revertir
                        document.getElementById('seccion-backups').style.display = 'none';
                    } else {
                        document.getElementById('seccion-backups').style.display = 'block';
                    }
                }
            })
            .catch(() => {});
    }
    
    function mostrarDialogoRestaurar() {
        if (!window.ultimoBackup) {
            crear_notificacion('error', 'No hay copias de seguridad disponibles');
            return;
        }
        
        // Cargar diálogo via ajax
        ajax('dialogs/dialog_confirmar_restaurar', 'showdialog', '', ['cargar_dialog()', 'actualizarFechaBackup()']);
    }
    
    // Función para actualizar la fecha en el diálogo después de cargarlo
    window.actualizarFechaBackup = function() {
        const fechaElem = document.getElementById('backup-fecha');
        if (fechaElem && window.ultimoBackup) {
            fechaElem.textContent = window.ultimoBackup.date + ' ' + window.ultimoBackup.time;
        }
    }
    
    function ejecutarRestauracion() {
        // Mostrar overlay de restauración
        const overlay = document.createElement('div');
        overlay.id = 'update-overlay';
        overlay.innerHTML = `
            <div class="update-modal">
                <h2 style="margin-bottom: 1rem; color: var(--principal);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1.2em" height="1.2em" style="vertical-align: middle; margin-right: 0.5rem; animation: spin 1s linear infinite; fill: currentColor;"><path d="M129.9 292.5C143.2 199.5 223.3 128 320 128C373 128 421 149.5 455.8 184.2C456 184.4 456.2 184.6 456.4 184.8L464 192L416.1 192C398.4 192 384.1 206.3 384.1 224C384.1 241.7 398.4 256 416.1 256L544.1 256C561.8 256 576.1 241.7 576.1 224L576.1 96C576.1 78.3 561.8 64 544.1 64C526.4 64 512.1 78.3 512.1 96L512.1 149.4L500.8 138.7C454.5 92.6 390.5 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6zM573.4 356.5C575.9 339 563.7 322.8 546.3 320.3C528.9 317.8 512.6 330 510.1 347.4C496.8 440.4 416.7 511.9 320 511.9C267 511.9 219 490.4 184.2 455.7C184 455.5 183.8 455.3 183.6 455.1L176 447.9L223.9 447.9C241.6 447.9 255.9 433.6 255.9 415.9C255.9 398.2 241.6 383.9 223.9 383.9L96 384C87.5 384 79.3 387.4 73.3 393.5C67.3 399.6 63.9 407.7 64 416.3L65 543.3C65.1 561 79.6 575.2 97.3 575C115 574.8 129.2 560.4 129 542.7L128.6 491.2L139.3 501.3C185.6 547.4 249.5 576 320 576C449 576 555.7 480.6 573.4 356.5z"/></svg>
                    Restaurando...
                </h2>
                <p style="margin-bottom: 1rem;">Por favor espera mientras se restaura la copia de seguridad.</p>
                <pre id="restore-log" style="background: var(--fondo-secundario, rgba(0,0,0,0.1)); padding: 1rem; border-radius: 8px; max-height: 200px; overflow-y: auto; font-size: 0.8rem; text-align: left;"></pre>
            </div>
        `;
        document.body.appendChild(overlay);
        
        const logPre = document.getElementById('restore-log');
        logPre.textContent = 'Iniciando restauración...\n';
        
        const formData = new FormData();
        formData.append('action', 'restore_backup');
        formData.append('backup_name', window.ultimoBackup.name);
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        if(csrfMeta) formData.append('csrf_token', csrfMeta.content);
        
        fetch('../app/ajax/aplicar_actualizacion.php', { 
            method: 'POST', 
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
            .then(r => r.json())
            .then(data => {
                if (data.log) {
                    data.log.forEach(msg => logPre.textContent += msg + '\n');
                }
                
                if (data.success) {
                    logPre.textContent += '\n✅ Restauración completada. Recargando...';
                    setTimeout(() => location.reload(), 2000);
                } else {
                    logPre.textContent += '\n❌ Error: ' + (data.error || 'Error desconocido');
                    const modal = overlay.querySelector('.update-modal');
                    const closeBtn = document.createElement('button');
                    closeBtn.className = 'btn-p';
                    closeBtn.textContent = 'Cerrar';
                    closeBtn.style.marginTop = '1rem';
                    closeBtn.onclick = () => overlay.remove();
                    modal.appendChild(closeBtn);
                }
            })
            .catch(err => {
                logPre.textContent += '\n❌ Error: ' + err.message;
            });
    }
    const API_URL = 'https://update.tufichaje.app/api.php';
    const API_KEY = '9933832ef5b36c154a1f0108e0700d71';
    const VERSION_ACTUAL = '<?= str_replace("v", "", $version_actual) ?>';

    function comprobarActualizaciones() {
        const btn = document.getElementById('btn-comprobar');
        const estado = document.getElementById('estado-actualizacion');
        
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner"></span> Comprobando...';
        
        estado.innerHTML = '<p style="color: var(--azul);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1.5em" height="1.5em" style="animation: spin 1s linear infinite;"><path fill="currentColor" d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/></svg> Conectando con el servidor...</p>';
        
        fetch(`${API_URL}?api_key=${API_KEY}&current_version=${VERSION_ACTUAL}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Error de conexión');
                }
                return response.json();
            })
            .then(data => {
                btn.disabled = false;
                btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em" style="margin-right: 0.5rem;"><path fill="currentColor" d="M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z"/></svg> Comprobar actualizaciones';
                
                if (data.success && data.update_available) {
                    // Hay actualización disponible
                    const updateInfo = data.update_info;
                    const pendingUpdate = data.pending_updates && data.pending_updates[0];
                    
                    // Buscar URLs de descarga
                    let zipUrl = '';
                    let sqlUrl = '';
                    
                    // Primero intentar obtener de pending_updates.files
                    if (pendingUpdate && pendingUpdate.files && pendingUpdate.files.length > 0) {
                        pendingUpdate.files.forEach(file => {
                            if (file.type === 'application' || (file.filename && file.filename.endsWith('.zip'))) {
                                zipUrl = file.download_url;
                            }
                            if (file.type === 'database' || (file.filename && file.filename.endsWith('.sql'))) {
                                sqlUrl = file.download_url;
                            }
                        });
                    }
                    
                    // Si no hay ZIP URL, usar la download_url de update_info + version.zip
                    if (!zipUrl && updateInfo.download_url) {
                        // El ZIP se llama igual que la versión, ej: v2.1.1.zip
                        zipUrl = updateInfo.download_url + '/' + updateInfo.new_version + '.zip';
                    }
                    
                    console.log('Update URLs:', { zipUrl, sqlUrl, updateInfo });
                    
                    // Guardar datos para aplicar actualización
                    window.updateData = {
                        zipUrl: zipUrl,
                        sqlUrl: sqlUrl,
                        newVersion: updateInfo.new_version,
                        size: updateInfo.size || ''
                    };
                    
                    // Buscar changelog en diferentes ubicaciones posibles
                    let changelog = updateInfo.changelog || 
                                   (pendingUpdate && pendingUpdate.changelog) ||
                                   (data.updates && data.updates[0] && data.updates[0].changelog) || 
                                   null;
                    let changelogHtml = '';
                    if (changelog) {
                        changelogHtml = `
                            <section class="changelog-container" style="margin-top: 1.5rem; padding: 1rem; background: var(--fondo-secundario, rgba(0,0,0,0.1)); border-radius: 8px; text-align: left; max-height: 300px; overflow-y: auto;">
                                <h3 style="margin-bottom: 0.5rem; color: var(--principal);">📋 Novedades</h3>
                                <article class="changelog-content" style="font-size: 0.9rem; line-height: 1.5;">
                                    ${changelog}
                                </article>
                            </section>
                        `;
                    }
                    estado.innerHTML = `
                        <p style="color: var(--rojo); font-size: 1.2rem; font-weight: bold;">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1.2em" height="1.2em" style="vertical-align: middle; margin-right: 0.3rem;">
                                <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
                            </svg>
                            ¡Nueva versión disponible!
                        </p>
                        <p style="color: var(--texto); margin-top: 0.5rem;">
                            Versión <strong>${updateInfo.new_version}</strong> (${updateInfo.size})
                        </p>
                        <div class="flex row anchocompleto supercentrado">
                            <button class="btn-p" style="margin-top: 1rem;" onclick="aplicarActualizacion()">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" style="margin-right: 0.5rem;">
                                    <path fill="currentColor" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
                                </svg>
                                Aplicar actualización
                            </button>
                        </div>
                        <section id="update-progress" style="display: none; margin-top: 1.5rem; text-align: left;">
                            <h4 style="margin-bottom: 0.5rem;">Progreso de la actualización:</h4>
                            <pre id="update-log" style="background: var(--fondo-secundario, rgba(0,0,0,0.1)); padding: 1rem; border-radius: 8px; max-height: 200px; overflow-y: auto; font-size: 0.85rem;"></pre>
                        </section>
                        ${changelogHtml}
                    `;
                } else if (data.success) {
                    // Está actualizado
                    estado.innerHTML = `
                        <p style="color: var(--verde); font-size: 1.2rem; font-weight: bold;">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1.2em" height="1.2em" style="vertical-align: middle; margin-right: 0.3rem;">
                                <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
                            </svg>
                            ¡Estás actualizado!
                        </p>
                        <p style="color: var(--gris); margin-top: 0.5rem;">¡Enhorabuena, tienes la última versión disponible!</p>
                    `;
                    // ¡Lanzar confeti! 🎉
                    lanzarConfeti();
                } else {
                    throw new Error(data.error || 'Error desconocido');
                }
            })
            .catch(error => {
                btn.disabled = false;
                btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em" style="margin-right: 0.5rem;"><path fill="currentColor" d="M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z"/></svg> Comprobar actualizaciones';
                
                estado.innerHTML = `
                    <p style="color: var(--rojo); font-size: 1.2rem; font-weight: bold;">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1.2em" height="1.2em" style="vertical-align: middle; margin-right: 0.3rem;">
                            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/>
                        </svg>
                        Error al comprobar
                    </p>
                    <p style="color: var(--gris); margin-top: 0.5rem;">${error.message}</p>
                `;
            });
    }
    
    function aplicarActualizacion() {
        if (!window.updateData) {
            alert('No hay datos de actualización disponibles');
            return;
        }
        
        // Mostrar diálogo de confirmación personalizado
        ajax('dialogs/dialog_confirmar_actualizacion', 'showdialog', 
            'version=' + encodeURIComponent(window.updateData.newVersion) + '&size=' + encodeURIComponent(window.updateData.size || ''), 
            ['cargar_dialog()']);
    }
    
    // Delegación de eventos para el diálogo de confirmación (el JS dentro del dialog AJAX no se ejecuta)
    document.addEventListener('click', function(e) {
        // Botón cancelar (cierra cualquier diálogo)
        if (e.target.closest('#cancelar')) {
            animacion_y_cierre_dialog();
        }
        
        // Botón confirmar actualización
        if (e.target.closest('#confirmar-update')) {
            animacion_y_cierre_dialog();
            setTimeout(function() {
                if (typeof window.ejecutarActualizacion === 'function') {
                    window.ejecutarActualizacion();
                }
            }, 300);
        }
        
        // Botón confirmar restaurar (doble click)
        if (e.target.closest('#confirmar-restaurar')) {
            const btn = e.target.closest('#confirmar-restaurar');
            
            // Si ya está en modo confirmación (rojo), ejecutar
            if (btn.dataset.confirmar === 'true') {
                animacion_y_cierre_dialog();
                setTimeout(function() {
                    ejecutarRestauracion();
                }, 300);
            } else {
                // Primer click: cambiar a rojo y pedir confirmación
                btn.dataset.confirmar = 'true';
                btn.style.background = 'var(--rojo, #e74c3c)';
                btn.style.color = 'white';
            }
        }
    });
    
    // Función que se ejecuta cuando se confirma la actualización desde el diálogo
    window.ejecutarActualizacion = function() {
        
        // Crear overlay para bloquear la interfaz
        const overlay = document.createElement('div');
        overlay.id = 'update-overlay';
        overlay.innerHTML = `
            <div class="update-modal">
                <h2 style="margin-bottom: 1rem; color: var(--principal);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1.2em" height="1.2em" style="vertical-align: middle; margin-right: 0.5rem; animation: spin 1s linear infinite; fill: currentColor;"><path d="M129.9 292.5C143.2 199.5 223.3 128 320 128C373 128 421 149.5 455.8 184.2C456 184.4 456.2 184.6 456.4 184.8L464 192L416.1 192C398.4 192 384.1 206.3 384.1 224C384.1 241.7 398.4 256 416.1 256L544.1 256C561.8 256 576.1 241.7 576.1 224L576.1 96C576.1 78.3 561.8 64 544.1 64C526.4 64 512.1 78.3 512.1 96L512.1 149.4L500.8 138.7C454.5 92.6 390.5 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6zM573.4 356.5C575.9 339 563.7 322.8 546.3 320.3C528.9 317.8 512.6 330 510.1 347.4C496.8 440.4 416.7 511.9 320 511.9C267 511.9 219 490.4 184.2 455.7C184 455.5 183.8 455.3 183.6 455.1L176 447.9L223.9 447.9C241.6 447.9 255.9 433.6 255.9 415.9C255.9 398.2 241.6 383.9 223.9 383.9L96 384C87.5 384 79.3 387.4 73.3 393.5C67.3 399.6 63.9 407.7 64 416.3L65 543.3C65.1 561 79.6 575.2 97.3 575C115 574.8 129.2 560.4 129 542.7L128.6 491.2L139.3 501.3C185.6 547.4 249.5 576 320 576C449 576 555.7 480.6 573.4 356.5z"/></svg>
                    Actualizando...
                </h2>
                <p class="warning-message" style="color: #e74c3c; font-weight: bold; margin-bottom: 1rem; padding: 0.5rem; background: rgba(231,76,60,0.1); border-radius: 8px;">
                    ⚠️ NO recargues la página ni cambies de sección hasta que finalice la actualización
                </p>
                <div class="progress-container" style="width: 100%; background: var(--fondo-secundario, rgba(0,0,0,0.1)); border-radius: 10px; overflow: hidden; margin-bottom: 1rem;">
                    <div id="progress-bar" style="width: 0%; height: 25px; background: linear-gradient(90deg, var(--principal), var(--azul, #3498db)); transition: width 0.3s ease; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 0.85rem;">0%</div>
                </div>
                <p id="progress-status" style="margin-bottom: 1rem; font-size: 0.9rem;">Iniciando actualización...</p>
                <pre id="update-log-modal" style="background: var(--fondo-secundario, rgba(0,0,0,0.1)); padding: 1rem; border-radius: 8px; max-height: 200px; overflow-y: auto; font-size: 0.8rem; text-align: left; width: 100%;"></pre>
            </div>
        `;
        document.body.appendChild(overlay);
        
        // Ocultar sidebar
        const sidebar = document.querySelector('nav, .sidebar, aside:not(#showdialog)');
        if (sidebar) {
            sidebar.style.opacity = '0.3';
            sidebar.style.pointerEvents = 'none';
        }
        
        // Prevenir navegación
        window.onbeforeunload = function() {
            return '¡La actualización está en curso! Si sales ahora, podrían corromperse los archivos.';
        };
        
        const progressBar = document.getElementById('progress-bar');
        const progressStatus = document.getElementById('progress-status');
        const logPre = document.getElementById('update-log-modal');
        
        const steps = ['download', 'extract', 'backup', 'apply', 'database', 'version', 'cleanup'];
        let currentStep = 0;
        
        function updateProgress(percent, status) {
            if (progressBar) {
                progressBar.style.width = percent + '%';
                progressBar.textContent = percent + '%';
            }
            if (progressStatus) {
                progressStatus.textContent = status;
            }
        }
        
        function addLog(message) {
            if (logPre) {
                logPre.textContent += message + '\n';
                logPre.scrollTop = logPre.scrollHeight;
            }
        }
        
        addLog('Iniciando actualización...');
        updateProgress(5, 'Preparando descarga...');
        
        const formData = new FormData();
        formData.append('action', 'full_update');
        formData.append('zip_url', window.updateData.zipUrl);
        formData.append('sql_url', window.updateData.sqlUrl);
        formData.append('new_version', window.updateData.newVersion);
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        if(csrfMeta) formData.append('csrf_token', csrfMeta.content);
        
        fetch('../app/ajax/aplicar_actualizacion.php', {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(text => {
            try {
                return JSON.parse(text);
            } catch (e) {
                // Si no es JSON, mostrar el error completo
                throw new Error('Error del servidor: ' + text);
            }
        })
        .then(data => {
            if (data.log) {
                data.log.forEach((msg, index) => {
                    setTimeout(() => {
                        addLog(msg);
                        // Calcular progreso basado en los pasos
                        if (msg.includes('PASO 1')) updateProgress(10, 'Descargando archivos...');
                        else if (msg.includes('PASO 2')) updateProgress(25, 'Extrayendo archivos...');
                        else if (msg.includes('PASO 3')) updateProgress(40, 'Creando backup...');
                        else if (msg.includes('PASO 4')) updateProgress(55, 'Aplicando archivos...');
                        else if (msg.includes('PASO 5')) updateProgress(70, 'Actualizando base de datos...');
                        else if (msg.includes('PASO 6')) updateProgress(85, 'Actualizando versión...');
                        else if (msg.includes('PASO 7')) updateProgress(95, 'Limpiando...');
                        else if (msg.includes('COMPLETADA')) updateProgress(100, '¡Actualización completada!');
                    }, index * 100);
                });
            }
            
            setTimeout(() => {
                if (data.success) {
                    addLog('');
                    addLog('✅ ' + data.message);
                    updateProgress(100, '¡Actualización completada con éxito!');
                    
                    // Cambiar estilo del modal
                    const modal = document.querySelector('.update-modal');
                    if (modal) {
                        modal.querySelector('h2').innerHTML = '✅ ¡Actualización completada!';
                        modal.querySelector('.warning-message').innerHTML = '✅ La actualización se ha completado correctamente. Recargando página...';
                        modal.querySelector('.warning-message').style.color = 'var(--verde, #27ae60)';
                        modal.querySelector('.warning-message').style.background = 'rgba(39,174,96,0.1)';
                    }
                    
                    // Permitir navegación de nuevo
                    window.onbeforeunload = null;
                    
                    // Recargar automáticamente después de 2 segundos
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                    
                } else {
                    addLog('');
                    addLog('❌ Error: ' + (data.error || 'Error desconocido'));
                    updateProgress(0, 'Error en la actualización');
                    
                    // Permitir navegación de nuevo
                    window.onbeforeunload = null;
                    
                    // Restaurar sidebar
                    if (sidebar) {
                        sidebar.style.opacity = '1';
                        sidebar.style.pointerEvents = 'auto';
                    }
                    
                    // Agregar botón de cerrar
                    const modal = document.querySelector('.update-modal');
                    if (modal) {
                        modal.querySelector('h2').innerHTML = '❌ Error en la actualización';
                        modal.querySelector('.warning-message').innerHTML = 'Ha ocurrido un error. Puedes intentar de nuevo.';
                        modal.querySelector('.warning-message').style.color = '#e74c3c';
                        
                        const closeBtn = document.createElement('button');
                        closeBtn.className = 'btn-p';
                        closeBtn.textContent = 'Cerrar';
                        closeBtn.style.marginTop = '1rem';
                        closeBtn.onclick = () => overlay.remove();
                        modal.appendChild(closeBtn);
                    }
                }
            }, data.log ? data.log.length * 100 + 500 : 500);
        })
        .catch(error => {
            addLog('❌ Error de conexión: ' + error.message);
            updateProgress(0, 'Error de conexión');
            
            // Permitir navegación de nuevo
            window.onbeforeunload = null;
            
            // Restaurar sidebar
            if (sidebar) {
                sidebar.style.opacity = '1';
                sidebar.style.pointerEvents = 'auto';
            }
        });
    }
    
    // Función para lanzar confeti 🎉
    function lanzarConfeti() {
        const colores = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590', '#9b5de5', '#00bbf9'];
        const contenedor = document.createElement('div');
        contenedor.id = 'confeti-container';
        contenedor.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden;';
        document.body.appendChild(contenedor);
        
        for (let i = 0; i < 150; i++) {
            const confeti = document.createElement('div');
            confeti.className = 'confeti';
            confeti.style.cssText = `
                position: absolute;
                width: ${Math.random() * 10 + 5}px;
                height: ${Math.random() * 10 + 5}px;
                background: ${colores[Math.floor(Math.random() * colores.length)]};
                left: ${Math.random() * 100}%;
                top: -20px;
                opacity: ${Math.random() * 0.5 + 0.5};
                border-radius: ${Math.random() > 0.5 ? '50%' : '0'};
                transform: rotate(${Math.random() * 360}deg);
                animation: confetiFall ${Math.random() * 3 + 2}s linear forwards;
                animation-delay: ${Math.random() * 0.5}s;
            `;
            contenedor.appendChild(confeti);
        }
        
        // Limpiar después de la animación
        setTimeout(() => {
            contenedor.remove();
        }, 5500);
    }
</script>

<style>
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .spinner {
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin 0.75s linear infinite;
        margin-right: 0.5rem;
    }
    
    /* Overlay de actualización */
    #update-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .update-modal {
        background: var(--fondo, #fff);
        padding: 2rem;
        border-radius: 16px;
        max-width: 600px;
        width: 90%;
        text-align: center;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        animation: modalIn 0.3s ease;
    }
    
    @keyframes modalIn {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(-20px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    
    .progress-container {
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    }
    
    
    #progress-bar {
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    
    /* Animación de confeti */
    @keyframes confetiFall {
        0% {
            top: -20px;
            transform: rotate(0deg) translateX(0);
        }
        100% {
            top: 100vh;
            transform: rotate(720deg) translateX(calc(var(--random, 1) * 100px - 50px));
        }
    }
    
    .confeti {
        --random: 1;
    }
</style>

<?php
footer(true);
?>
