var RespaldoBD = {
    API_URL: '',
    sesion: null,
    _procesando: false,
    _guardTimer: null,
    _contentAreaObserver: null,

    init: function() {
        this.API_URL = (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
            ? 'http://localhost:3000/api'
            : 'https://api.sabha.pe/api';
        this.cargarSesion();
        this.mostrarVista();
        this._initContentAreaObserver();
        this._detectarRecarga();
    },

    _detectarRecarga: function() {
        var self = this;
        window.addEventListener('beforeunload', function() {
            var page = document.getElementById('pageRespaldo');
            var ca = document.getElementById('contentArea');
            sessionStorage.setItem('_respaldo_state', JSON.stringify({
                time: new Date().toISOString(),
                pageDisplay: page ? page.style.display : 'NO EXISTE',
                pageHTML: page ? (page.innerHTML.length > 0 ? 'CON CONTENIDO' : 'VACIO') : 'NO EXISTE',
                moduloActivo: ca ? ca.classList.contains('modulo-activo') : 'NO EXISTE'
            }));
        });
    },

    _initContentAreaObserver: function() {
        var self = this;
        if (self._contentAreaObserver) return;
        var ca = document.getElementById('contentArea');
        if (!ca) return;

        var page = document.getElementById('pageRespaldo');

        self._contentAreaObserver = new MutationObserver(function(mutations) {
            mutations.forEach(function(m) {
                if (m.attributeName === 'class') {
                    var page = document.getElementById('pageRespaldo');
                    if (!ca.classList.contains('modulo-activo') && page && page.innerHTML.trim() !== '') {
                        ca.classList.add('modulo-activo');
                        if (page.style.display === 'none') page.style.display = '';
                    }
                }
            });
        });
        self._contentAreaObserver.observe(ca, { attributes: true, attributeFilter: ['class'] });
    },

    _activarGuard: function() {
        var self = this;
        var page = document.getElementById('pageRespaldo');
        var contentArea = document.getElementById('contentArea');
        if (self._guardTimer) clearInterval(self._guardTimer);
        self._guardTimer = setInterval(function() {
            if (page && page.style.display === 'none' && page.innerHTML.trim() !== '') {
                page.style.display = '';
            }
            if (contentArea && !contentArea.classList.contains('modulo-activo') && page && page.innerHTML.trim() !== '') {
                contentArea.classList.add('modulo-activo');
            }
        }, 200);
    },

    _desactivarGuard: function() {
        var self = this;
        if (self._guardTimer) { clearInterval(self._guardTimer); self._guardTimer = null; }
    },

    cargarSesion: function() {
        var s = localStorage.getItem('erp_session') || sessionStorage.getItem('erp_session');
        if (s) { try { this.sesion = JSON.parse(s); } catch(e) {} }
    },

    mostrarVista: function() {
        var self = this;
        var page = document.getElementById('pageRespaldo');
        if (!page) return;
        self.cargarSesion();

        self.isWeb = window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1';
        var isWeb = self.isWeb;
        self.ext = isWeb ? '.sql' : '.bak';
        var defaultPath = isWeb ? (location.origin.includes('api.sabha.pe') ? '/home/pfsperu/backups' : './backups') : 'C:\\Backups\\NexusERP';
        var now = new Date();
        var defaultName = 'NexusERP_' + now.getFullYear() +
            String(now.getMonth() + 1).padStart(2, '0') +
            String(now.getDate()).padStart(2, '0') + '_' +
            String(now.getHours()).padStart(2, '0') +
            String(now.getMinutes()).padStart(2, '0');

        page.innerHTML = `
            <div style="display:flex;flex-direction:column;height:100%;font-family:'Plus Jakarta Sans',sans-serif">
                <div style="display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
                    <div style="display:flex;align-items:center;gap:10px">
                        <h2 style="margin:0;font-size:1.2rem;font-weight:700;color:#1e293b"><i class="fas fa-database" style="color:#1A4480;margin-right:8px"></i>Respaldo de Base de Datos</h2>
                    </div>
                </div>
                <div style="flex:1;padding:24px;overflow-y:auto">
                    <div style="max-width:750px;margin:0 auto">

                        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:28px;box-shadow:0 1px 3px rgba(0,0,0,0.06);margin-bottom:20px">
                            <div style="text-align:center;margin-bottom:20px">
                                <i class="fas fa-shield-alt" style="font-size:2rem;color:#1A4480;margin-bottom:8px;display:block"></i>
                                <h3 style="margin:0 0 6px;font-size:0.95rem;font-weight:600;color:#1e293b">Crear Respaldo</h3>
                                <p style="margin:0;font-size:0.78rem;color:#64748b">Seleccione la base de datos, carpeta y nombre del archivo.</p>
                            </div>

                            <div style="display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:20px">
                                <div>
                                    <label style="display:block;font-size:0.76rem;font-weight:600;color:#475569;margin-bottom:4px">Base de Datos <span style="color:#dc2626">*</span></label>
                                    <select id="respaldoDbSelect" style="width:100%;padding:8px 12px;font-size:0.82rem;border:1px solid #CBD5E1;border-radius:6px;background:#fff">
                                        <option value="">Cargando...</option>
                                    </select>
                                </div>
                                <div>
                                    <label style="display:block;font-size:0.76rem;font-weight:600;color:#475569;margin-bottom:4px">Carpeta de Destino <span style="color:#dc2626">*</span></label>
                                    <div style="display:flex;gap:6px;align-items:center">
                                        <input type="text" id="respaldoCarpeta" value="${defaultPath}" style="flex:1;padding:8px 12px;font-size:0.82rem;border:1px solid #CBD5E1;border-radius:6px;font-family:monospace" placeholder="Ej: C:\\Backups\\NexusERP">
                                        <button id="btnElegirCarpeta" style="padding:8px 12px;font-size:0.82rem;border:1px solid #CBD5E1;border-radius:6px;cursor:pointer;background:#f8fafc;white-space:nowrap" title="Seleccionar carpeta"><i class="fas fa-folder-open" style="color:#1A4480"></i></button>
                                    </div>
                                </div>
                                <div>
                                    <label style="display:block;font-size:0.76rem;font-weight:600;color:#475569;margin-bottom:4px">Nombre del Archivo <span style="color:#dc2626">*</span></label>
                                    <div style="display:flex;align-items:center;gap:0">
                                        <input type="text" id="respaldoNombre" value="${defaultName}" style="flex:1;padding:8px 12px;font-size:0.82rem;border:1px solid #CBD5E1;border-radius:6px 0 0 6px;font-family:monospace">
                                        <span style="padding:8px 12px;background:#f1f5f9;border:1px solid #CBD5E1;border-left:none;border-radius:0 6px 6px 0;font-size:0.82rem;color:#64748b;font-weight:600">${self.ext}</span>
                                    </div>
                                </div>
                            </div>

                            <div style="text-align:center;margin-bottom:16px">
                                <button id="btnGenerarRespaldo" style="padding:11px 28px;font-size:0.88rem;font-weight:600;border-radius:8px;cursor:pointer;background:#1A4480;color:#fff;border:none">
                                    <i class="fas fa-download" style="margin-right:8px"></i> Generar Respaldo
                                </button>
                            </div>

                            <div id="respaldoMensaje" style="display:none;text-align:center;padding:10px;border-radius:8px;font-size:0.8rem;margin-bottom:14px"></div>
                            <div id="respaldoResultado" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:14px;margin-bottom:16px">
                                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
                                    <i class="fas fa-check-circle" style="color:#16a34a;font-size:1.1rem"></i>
                                    <span style="font-weight:600;color:#166534;font-size:0.84rem">Respaldo generado exitosamente</span>
                                </div>
                                <div id="respaldoDetalle" style="font-size:0.76rem;color:#475569"></div>
                            </div>
                        </div>

                        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);margin-bottom:20px">
                            <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
                                <h4 style="margin:0;font-size:0.88rem;font-weight:600;color:#1e293b"><i class="fas fa-history" style="color:#1A4480;margin-right:6px"></i> Respaldos Anteriores</h4>
                                <input type="text" id="respaldoHistorialRuta" value="${defaultPath}" placeholder="Ruta..." style="flex:1;padding:5px 10px;font-size:0.74rem;border:1px solid #CBD5E1;border-radius:6px;font-family:monospace">
                                <button id="btnRecargarHistorial" style="padding:5px 10px;font-size:0.74rem;border:1px solid #CBD5E1;border-radius:6px;cursor:pointer;background:#f8fafc" title="Recargar"><i class="fas fa-sync-alt"></i></button>
                                <button id="btnRetencion" style="padding:5px 10px;font-size:0.74rem;border:1px solid #CBD5E1;border-radius:6px;cursor:pointer;background:#f8fafc;color:#dc2626" title="Eliminar respaldos viejos (mantener últimos 10)"><i class="fas fa-broom"></i></button>
                            </div>
                            <div id="respaldoHistorial" style="font-size:0.78rem;color:#64748b">Cargando...</div>
                        </div>

                        <div id="respaldoRestoreSection" style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);display:none">
                            <h4 style="margin:0 0 12px;font-size:0.88rem;font-weight:600;color:#1e293b"><i class="fas fa-undo" style="color:#dc2626;margin-right:6px"></i> Restaurar Base de Datos</h4>
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
                                <div>
                                    <label style="display:block;font-size:0.76rem;font-weight:600;color:#475569;margin-bottom:4px">Base de Datos a Restaurar</label>
                                    <select id="restoreDbSelect" style="width:100%;padding:8px 12px;font-size:0.82rem;border:1px solid #CBD5E1;border-radius:6px;background:#fff">
                                        <option value="">Seleccione...</option>
                                    </select>
                                </div>
                                <div>
                                    <label style="display:block;font-size:0.76rem;font-weight:600;color:#475569;margin-bottom:4px">Archivo ${self.ext.toUpperCase()}</label>
                                    <select id="restoreFileSelect" style="width:100%;padding:8px 12px;font-size:0.82rem;border:1px solid #CBD5E1;border-radius:6px;background:#fff">
                                        <option value="">Seleccione un respaldo primero...</option>
                                    </select>
                                </div>
                            </div>
                            <div style="text-align:center">
                                <button id="btnRestore" style="padding:10px 24px;font-size:0.85rem;font-weight:600;border-radius:8px;cursor:pointer;background:#dc2626;color:#fff;border:none">
                                    <i class="fas fa-undo" style="margin-right:6px"></i> Restaurar
                                </button>
                            </div>
                            <div id="restoreMensaje" style="display:none;text-align:center;padding:10px;border-radius:8px;font-size:0.8rem;margin-top:12px"></div>
                        </div>
                    </div>
                </div>
            </div>`;

        this.cargarDatabases();
        this.cargarHistorial(defaultPath);

        document.getElementById('btnGenerarRespaldo').addEventListener('click', function() { self.generarRespaldo(); });
        document.getElementById('btnRecargarHistorial').addEventListener('click', function() { self.cargarHistorial(document.getElementById('respaldoHistorialRuta').value); });
        document.getElementById('btnElegirCarpeta').addEventListener('click', function() { self.abrirSelectorCarpetas(); });
        document.getElementById('btnRetencion').addEventListener('click', function() { self.aplicarRetencion(); });
        document.getElementById('btnRestore').addEventListener('click', function() { self.restaurarBD(); });
        document.getElementById('respaldoHistorialRuta').addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); self.cargarHistorial(this.value); } });
    },

    cargarDatabases: function() {
        var self = this;
        var select = document.getElementById('respaldoDbSelect');
        var restoreSelect = document.getElementById('restoreDbSelect');
        if (!select) return;

        fetch(this.API_URL + '/respaldo/databases')
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (res.ok && res.data && res.data.length > 0) {
                var html = '<option value="">Seleccione una base de datos...</option>';
                res.data.forEach(function(db) {
                    var selected = db === (self.sesion ? self.sesion.db_name : '') ? ' selected' : '';
                    html += '<option value="' + db + '"' + selected + '>' + db + '</option>';
                });
                select.innerHTML = html;
                if (restoreSelect) restoreSelect.innerHTML = html;
            } else {
                select.innerHTML = '<option value="">No se encontraron bases de datos</option>';
            }
        })
        .catch(function() {
            select.innerHTML = '<option value="">Error al cargar</option>';
        });
    },

    generarRespaldo: function() {
        var self = this;
        if (self._procesando) return;

        var database = document.getElementById('respaldoDbSelect').value;
        var carpeta = document.getElementById('respaldoCarpeta').value.trim();
        var nombre = document.getElementById('respaldoNombre').value.trim();

        if (!database) { Mensaje.error({ titulo: 'Validación', texto: 'Seleccione una base de datos' }); return; }
        if (!carpeta) { Mensaje.error({ titulo: 'Validación', texto: 'Ingrese la ruta de destino' }); return; }
        if (!nombre) { Mensaje.error({ titulo: 'Validación', texto: 'Ingrese el nombre del archivo' }); return; }

        Mensaje.confirmacion({
            titulo: 'Confirmar Respaldo',
            texto: 'Se generará el respaldo de <strong>' + database + '</strong> en:<br><code style="font-size:0.75rem">' + carpeta + (self.isWeb ? '/' : '\\') + nombre + (self.ext || '.bak') + '</code><br><br>¿Continuar?',
            onAceptar: function() {
                self._iniciarBackup(database, carpeta, nombre);
            }
        });
    },

    _iniciarBackup: function(database, carpeta, nombre) {
        var self = this;
        if (self._procesando) return;
        var btn = document.getElementById('btnGenerarRespaldo');
        var msgDiv = document.getElementById('respaldoMensaje');
        var resDiv = document.getElementById('respaldoResultado');

        self._procesando = true;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin" style="margin-right:8px"></i> Generando respaldo...';
        msgDiv.style.display = 'none';
        resDiv.style.display = 'none';

        var loadingHtml = '<div id="backupLoadingOverlay" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:99999;display:flex;align-items:center;justify-content:center;pointer-events:all">' +
            '<div style="background:#fff;border-radius:12px;padding:32px 40px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2)">' +
            '<i class="fas fa-shield-alt" style="font-size:2rem;color:#1A4480;margin-bottom:12px;display:block"></i>' +
            '<div style="font-size:0.9rem;font-weight:600;color:#1e293b;margin-bottom:4px">Generando respaldo...</div>' +
            '<div style="font-size:0.78rem;color:#64748b">Espere a que termine el proceso. No cierre esta ventana.</div>' +
            '</div></div>';
        document.body.insertAdjacentHTML('beforeend', loadingHtml);

        self._activarGuard();

        fetch(self.API_URL + '/respaldo', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ database: database, carpeta: carpeta, nombre_archivo: nombre })
        })
        .then(function(r) { return r.json(); })
        .then(function(res) {
            self._procesando = false;
            var loadingEl = document.getElementById('backupLoadingOverlay');
            if (loadingEl) loadingEl.remove();
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-download" style="margin-right:8px"></i> Generar Respaldo';

            if (res.ok) {
                resDiv.style.display = 'block';
                document.getElementById('respaldoDetalle').innerHTML =
                    '<div style="display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin-top:4px">' +
                    '<strong>Base de datos:</strong><span>' + res.data.base_datos + '</span>' +
                    '<strong>Archivo:</strong><span style="font-family:monospace">' + res.data.archivo + '</span>' +
                    '<strong>Ruta:</strong><span style="font-family:monospace;font-size:0.72rem">' + res.data.ruta + '</span>' +
                    '<strong>Tamaño:</strong><span>' + res.data.tamano + '</span>' +
                    '<strong>Fecha:</strong><span>' + new Date(res.data.fecha).toLocaleString('es-PE') + '</span>' +
                    '</div>';
                document.getElementById('respaldoHistorialRuta').value = carpeta;
                self.cargarHistorial(carpeta, function() {
                    setTimeout(function() { self._desactivarGuard(); }, 1000);
                });
            } else {
                msgDiv.style.display = 'block';
                msgDiv.style.background = '#fef2f2';
                msgDiv.style.border = '1px solid #fecaca';
                msgDiv.style.color = '#991b1b';
                msgDiv.innerHTML = '<i class="fas fa-exclamation-circle" style="margin-right:6px"></i> ' + res.mensaje;
                setTimeout(function() { self._desactivarGuard(); }, 1000);
            }
        })
        .catch(function() {
            self._procesando = false;
            var loadingEl = document.getElementById('backupLoadingOverlay');
            if (loadingEl) loadingEl.remove();
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-download" style="margin-right:8px"></i> Generar Respaldo';
            msgDiv.style.display = 'block';
            msgDiv.style.background = '#fef2f2';
            msgDiv.style.border = '1px solid #fecaca';
            msgDiv.style.color = '#991b1b';
            msgDiv.innerHTML = '<i class="fas fa-exclamation-circle" style="margin-right:6px"></i> Error de conexión con el servidor';
            setTimeout(function() { self._desactivarGuard(); }, 1000);
        });
    },

    cargarHistorial: function(ruta, callback) {
        var self = this;
        var container = document.getElementById('respaldoHistorial');
        if (!container) { if (callback) callback(); return; }

        fetch(this.API_URL + '/respaldo/listar?ruta=' + encodeURIComponent(ruta || ''))
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (!res.ok || !res.data || res.data.length === 0) {
                container.innerHTML = '<div style="text-align:center;padding:16px;color:#94a3b8"><i class="fas fa-inbox" style="font-size:1.3rem;margin-bottom:6px;display:block"></i>No hay respaldos en esta carpeta</div>';
                self._respaldosData = [];
                self._cargarSelectorRestore();
                if (callback) callback();
                return;
            }
            self._respaldosData = res.data;
            self._cargarSelectorRestore();
            var html = '<table style="width:100%;border-collapse:collapse;font-size:0.76rem">';
            html += '<thead><tr style="border-bottom:2px solid #e2e8f0">';
            html += '<th style="text-align:left;padding:7px 8px;color:#475569;font-weight:600">Archivo</th>';
            html += '<th style="text-align:right;padding:7px 8px;color:#475569;font-weight:600">Tamaño</th>';
            html += '<th style="text-align:right;padding:7px 8px;color:#475569;font-weight:600">Fecha</th>';
            html += '<th style="text-align:center;padding:7px 8px;color:#475569;font-weight:600;width:80px">Acciones</th>';
            html += '</tr></thead><tbody>';
            res.data.forEach(function(item) {
                var fecha = new Date(item.fecha);
                var fechaStr = ('0' + fecha.getDate()).slice(-2) + '/' + ('0' + (fecha.getMonth()+1)).slice(-2) + '/' + fecha.getFullYear() + ' ' + ('0' + fecha.getHours()).slice(-2) + ':' + ('0' + fecha.getMinutes()).slice(-2);
                html += '<tr style="border-bottom:1px solid #f1f5f9">';
                html += '<td style="padding:7px 8px"><i class="fas fa-file-archive" style="color:#1A4480;margin-right:6px"></i>' + item.archivo + '</td>';
                html += '<td style="padding:7px 8px;text-align:right">' + item.tamano + '</td>';
                html += '<td style="padding:7px 8px;text-align:right;color:#64748b">' + fechaStr + '</td>';
                html += '<td style="padding:7px 8px;text-align:center">';
                html += '<button onclick="RespaldoBD.descargarBackup(\'' + item.archivo + '\')" title="Descargar" style="background:none;border:none;cursor:pointer;color:#1A4480;padding:2px 4px"><i class="fas fa-download"></i></button> ';
                html += '<button onclick="RespaldoBD.eliminarBackup(\'' + item.archivo + '\')" title="Eliminar" style="background:none;border:none;cursor:pointer;color:#dc2626;padding:2px 4px"><i class="fas fa-trash"></i></button>';
                html += '</td>';
                html += '</tr>';
            });
            html += '</tbody></table>';
            container.innerHTML = html;
            if (callback) callback();
        })
        .catch(function() {
            container.innerHTML = '<div style="text-align:center;padding:14px;color:#94a3b8">Error al cargar historial</div>';
            if (callback) callback();
        });
    },

    _cargarSelectorRestore: function() {
        var sel = document.getElementById('restoreFileSelect');
        if (!sel || !this._respaldosData) return;
        var carpeta = document.getElementById('respaldoHistorialRuta').value.trim();
        var sep = carpeta.startsWith('/') ? '/' : '\\';
        var html = '<option value="">Seleccione un respaldo...</option>';
        this._respaldosData.forEach(function(item) {
            html += '<option value="' + carpeta + sep + item.archivo + '">' + item.archivo + ' (' + item.tamano + ')</option>';
        });
        sel.innerHTML = html;
        if (this._respaldosData.length > 0) {
            document.getElementById('respaldoRestoreSection').style.display = 'block';
        }
    },

    eliminarBackup: function(archivo) {
        var self = this;
        var carpeta = document.getElementById('respaldoHistorialRuta').value;

        Mensaje.confirmacion({
            titulo: 'Eliminar Respaldo',
            texto: '¿Está seguro de eliminar <strong>' + archivo + '</strong>?<br><br>Esta acción no se puede deshacer.',
            onAceptar: function() {
                self._activarGuard();
                fetch(self.API_URL + '/respaldo/eliminar?archivo=' + encodeURIComponent(archivo) + '&carpeta=' + encodeURIComponent(carpeta), { method: 'DELETE' })
                .then(function(r) { return r.json(); })
                .then(function(res) {
                    if (res.ok) {
                        self.cargarHistorial(carpeta, function() {
                            setTimeout(function() {
                                Mensaje.exito({ titulo: 'Eliminado', texto: res.mensaje });
                                setTimeout(function() { self._desactivarGuard(); }, 1000);
                            }, 50);
                        });
                    } else {
                        Mensaje.error({ titulo: 'Error', texto: res.mensaje });
                        setTimeout(function() { self._desactivarGuard(); }, 1000);
                    }
                })
                .catch(function() {
                    Mensaje.error({ titulo: 'Error', texto: 'Error de conexión' });
                    setTimeout(function() { self._desactivarGuard(); }, 1000);
                });
            }
        });
    },

    descargarBackup: function(archivo) {
        var carpeta = document.getElementById('respaldoHistorialRuta').value;
        window.location.href = this.API_URL + '/respaldo/descargar?archivo=' + encodeURIComponent(archivo) + '&carpeta=' + encodeURIComponent(carpeta);
    },

    restaurarBD: function() {
        var self = this;
        var btn = document.getElementById('btnRestore');
        var msgDiv = document.getElementById('restoreMensaje');
        var database = document.getElementById('restoreDbSelect').value;
        var archivo = document.getElementById('restoreFileSelect').value;

        if (!database) { Mensaje.error({ titulo: 'Validación', texto: 'Seleccione una base de datos' }); return; }
        if (!archivo) { Mensaje.error({ titulo: 'Validación', texto: 'Seleccione un archivo de respaldo' }); return; }

        Mensaje.confirmacion({
            titulo: '⚠️ Confirmar Restauración',
            texto: 'Se restaurará <strong>' + database + '</strong> desde:<br><code style="font-size:0.73rem">' + archivo + '</code><br><br><span style="color:#dc2626;font-weight:600">ATENCIÓN: Los datos actuales de la base de datos serán reemplazados.</span><br><br>¿Está seguro de continuar?',
            onAceptar: function() {
                self._activarGuard();
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin" style="margin-right:6px"></i> Restaurando...';
                msgDiv.style.display = 'none';

                fetch(self.API_URL + '/respaldo/restore', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ database: database, archivo: archivo })
                })
                .then(function(r) { return r.json(); })
                .then(function(res) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-undo" style="margin-right:6px"></i> Restaurar';

                    msgDiv.style.display = 'block';
                    if (res.ok) {
                        msgDiv.style.background = '#f0fdf4';
                        msgDiv.style.border = '1px solid #bbf7d0';
                        msgDiv.style.color = '#166534';
                        msgDiv.innerHTML = '<i class="fas fa-check-circle" style="margin-right:6px"></i> ' + res.mensaje;
                    } else {
                        msgDiv.style.background = '#fef2f2';
                        msgDiv.style.border = '1px solid #fecaca';
                        msgDiv.style.color = '#991b1b';
                        msgDiv.innerHTML = '<i class="fas fa-exclamation-circle" style="margin-right:6px"></i> ' + res.mensaje;
                    }
                    setTimeout(function() { self._desactivarGuard(); }, 1000);
                })
                .catch(function() {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-undo" style="margin-right:6px"></i> Restaurar';
                    msgDiv.style.display = 'block';
                    msgDiv.style.background = '#fef2f2';
                    msgDiv.style.border = '1px solid #fecaca';
                    msgDiv.style.color = '#991b1b';
                    msgDiv.innerHTML = '<i class="fas fa-exclamation-circle" style="margin-right:6px"></i> Error de conexión';
                    setTimeout(function() { self._desactivarGuard(); }, 1000);
                });
            }
        });
    },

    aplicarRetencion: function() {
        var self = this;
        var carpeta = document.getElementById('respaldoHistorialRuta').value;

        Mensaje.confirmacion({
            titulo: 'Política de Retención',
            texto: 'Se eliminarán los respaldos más antiguos, manteniendo solo los <strong>últimos 10</strong>.<br><br>¿Continuar?',
            onAceptar: function() {
                self._activarGuard();
                fetch(self.API_URL + '/respaldo/retencion', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ carpeta: carpeta, mantener: 10 })
                })
                .then(function(r) { return r.json(); })
                .then(function(res) {
                    if (res.ok) {
                        self.cargarHistorial(carpeta, function() {
                            setTimeout(function() {
                                Mensaje.exito({ titulo: 'Retención', texto: res.mensaje });
                                setTimeout(function() { self._desactivarGuard(); }, 1000);
                            }, 50);
                        });
                    } else {
                        Mensaje.error({ titulo: 'Error', texto: res.mensaje });
                        setTimeout(function() { self._desactivarGuard(); }, 1000);
                    }
                })
                .catch(function() {
                    Mensaje.error({ titulo: 'Error', texto: 'Error de conexión' });
                    setTimeout(function() { self._desactivarGuard(); }, 1000);
                });
            }
        });
    },

    abrirSelectorCarpetas: function() {
        var self = this;
        var defaultRoot = self.isWeb ? '/' : 'C:\\';
        var rutaActual = document.getElementById('respaldoCarpeta').value || defaultRoot;

        var html = '<div style="font-family:\'Plus Jakarta Sans\',sans-serif">' +
            '<div style="display:flex;align-items:center;gap:6px;margin-bottom:10px">' +
            '<label style="font-size:0.76rem;font-weight:600;color:#475569;white-space:nowrap">Ruta:</label>' +
            '<input type="text" id="modalCarpetaRuta" value="' + rutaActual + '" style="flex:1;padding:6px 10px;font-size:0.8rem;border:1px solid #CBD5E1;border-radius:6px;font-family:monospace" onkeydown="if(event.key===\'Enter\')RespaldoBD.navegarCarpeta(this.value)">' +
            '<button onclick="RespaldoBD.navegarCarpeta(document.getElementById(\'modalCarpetaRuta\').value)" style="padding:6px 12px;font-size:0.76rem;border:1px solid #CBD5E1;border-radius:6px;cursor:pointer;background:#f8fafc"><i class="fas fa-arrow-right" style="color:#1A4480"></i></button>' +
            '</div>' +
            '<div id="modalCarpetaLista" style="max-height:360px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;padding:4px">' +
            '<div style="text-align:center;padding:16px;color:#94a3b8"><i class="fas fa-spinner fa-spin"></i> Cargando...</div>' +
            '</div>' +
            '<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:12px">' +
            '<button onclick="Modal.cerrar()" style="padding:7px 16px;font-size:0.76rem;border:1px solid #CBD5E1;border-radius:6px;cursor:pointer;background:#fff">Cancelar</button>' +
            '<button onclick="RespaldoBD.seleccionarCarpeta()" style="padding:7px 16px;font-size:0.76rem;border:none;border-radius:6px;cursor:pointer;background:#1A4480;color:#fff;font-weight:600">Seleccionar</button>' +
            '</div>' +
            '</div>';

        Modal.abrir({ titulo: 'Seleccionar Carpeta', ancho: '560px', contenido: html });
        this.navegarCarpeta(rutaActual);
    },

    navegarCarpeta: function(ruta) {
        var self = this;
        var container = document.getElementById('modalCarpetaLista');
        if (!container) return;
        var oldItems = container.querySelector('.modal-folder-list');
        if (oldItems) { oldItems.style.opacity = '0.4'; oldItems.style.pointerEvents = 'none'; }

        fetch(this.API_URL + '/respaldo/listar-carpetas?ruta=' + encodeURIComponent(ruta))
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (!res.ok) {
                container.innerHTML = '<div style="text-align:center;padding:16px;color:#dc2626"><i class="fas fa-exclamation-triangle" style="margin-right:6px"></i>' + res.mensaje + '</div>';
                return;
            }
            var isLinux = res.ruta.startsWith('/');
            var sep = isLinux ? '/' : '\\';
            var rutaLimpia = res.ruta.replace(new RegExp(sep + '+$'), '');
            document.getElementById('modalCarpetaRuta').value = rutaLimpia + sep;

            var frag = document.createDocumentFragment();
            var wrapper = document.createElement('div');
            wrapper.className = 'modal-folder-list';

            var unidades = res.unidades || [];
            var esRoot = res.esRoot || false;

            var isWeb = self.isWeb || isLinux;

            if (!isWeb && unidades.length > 0) {
                var ut = document.createElement('div');
                ut.style.cssText = 'padding:5px 10px;font-size:0.68rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #e2e8f0;margin-bottom:2px';
                ut.textContent = 'Unidades de Disco';
                wrapper.appendChild(ut);

                unidades.forEach(function(u) {
                    var drivePath = u + sep;
                    var activo = drivePath.toUpperCase() === (rutaLimpia + sep).toUpperCase() || rutaLimpia.toUpperCase().startsWith(u.toUpperCase());
                    var d = document.createElement('div');
                    d.className = 'modal-carpeta-item';
                    d.style.cssText = 'display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;border-radius:6px;font-size:0.78rem;' + (activo ? 'background:#eef2ff;color:#1A4480;font-weight:600' : 'color:#334155');
                    d.innerHTML = '<i class="fas fa-hdd" style="color:#1A4480;width:18px;text-align:center"></i><span style="font-weight:inherit">' + u + sep + '</span>';
                    d.addEventListener('click', function() { self.navegarCarpeta(drivePath); });
                    wrapper.appendChild(d);
                });
                var sepDiv = document.createElement('div');
                sepDiv.style.cssText = 'border-bottom:1px solid #e2e8f0;margin:4px 0 6px';
                wrapper.appendChild(sepDiv);
            }

            if (!esRoot) {
                var parts = rutaLimpia.split(sep);
                var parentDir = parts.slice(0, -1).join(sep) || (isLinux ? '/' : '');
                if (parentDir && parentDir !== rutaLimpia) {
                    var pd = document.createElement('div');
                    pd.className = 'modal-carpeta-item';
                    pd.style.cssText = 'display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;border-radius:6px;font-size:0.78rem;color:#475569';
                    pd.innerHTML = '<i class="fas fa-level-up-alt" style="color:#64748b;width:18px;text-align:center"></i><span style="font-weight:500">..</span>';
                    pd.addEventListener('click', function() { self.navegarCarpeta(parentDir); });
                    wrapper.appendChild(pd);
                }
            }

            var cd = document.createElement('div');
            cd.className = 'modal-carpeta-item';
            cd.style.cssText = 'display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;border-radius:6px;font-size:0.78rem;color:#1A4480;background:#eef2ff;margin-bottom:2px';
            cd.innerHTML = '<i class="fas fa-folder" style="width:18px;text-align:center"></i><span style="font-weight:600">' + rutaLimpia + '</span>';
            cd.addEventListener('click', function() { self.navegarCarpeta(rutaLimpia); });
            wrapper.appendChild(cd);

            if (res.data.length === 0) {
                var emp = document.createElement('div');
                emp.style.cssText = 'text-align:center;padding:14px;color:#94a3b8;font-size:0.76rem';
                emp.textContent = 'Carpeta vacía (sin subcarpetas)';
                wrapper.appendChild(emp);
            } else {
                res.data.forEach(function(carpet) {
                    var completa = rutaLimpia + sep + carpet;
                    var fd = document.createElement('div');
                    fd.className = 'modal-carpeta-item';
                    fd.style.cssText = 'display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;border-radius:6px;font-size:0.78rem;color:#334155';
                    fd.innerHTML = '<i class="fas fa-folder" style="color:#F59E0B;width:18px;text-align:center"></i><span>' + carpet + '</span>';
                    fd.addEventListener('click', function() { self.navegarCarpeta(completa); });
                    wrapper.appendChild(fd);
                });
            }

            frag.appendChild(wrapper);
            container.innerHTML = '';
            container.appendChild(frag);
        })
        .catch(function() {
            container.innerHTML = '<div style="text-align:center;padding:16px;color:#dc2626"><i class="fas fa-exclamation-triangle" style="margin-right:6px"></i>Error al conectar con el servidor</div>';
        });
    },

    seleccionarCarpeta: function() {
        var ruta = document.getElementById('modalCarpetaRuta').value;
        if (ruta) {
            document.getElementById('respaldoCarpeta').value = ruta;
            document.getElementById('respaldoHistorialRuta').value = ruta;
            this.cargarHistorial(ruta);
        }
        Modal.cerrar();
    },

};

var _respaldoObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
        if (m.type === 'attributes' && m.attributeName === 'style') {
            var el = document.getElementById('pageRespaldo');
            if (el && el.style.display !== 'none' && el.innerHTML.trim() === '') {
                RespaldoBD.init();
            }
        }
    });
});

document.addEventListener('DOMContentLoaded', function() {
    var pageEl = document.getElementById('pageRespaldo');
    if (pageEl) {
        _respaldoObserver.observe(pageEl, { attributes: true });
    }
});
