// La Paguita - Overlays (Victoria, Derrota, Pausa)

// --- FOCUS TRAP SYSTEM (WCAG) ---
let lastFocusedElement = null;

function saveFocus() {
    lastFocusedElement = document.activeElement;
}

function restoreFocus() {
    if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
        lastFocusedElement.focus();
        lastFocusedElement = null;
    }
}

function getFocusableElements(container) {
    const focusableSelectors = [
        'button:not([disabled])',
        'a[href]:not([disabled])',
        'input:not([disabled])',
        'select:not([disabled])',
        'textarea:not([disabled])',
        '[tabindex]:not([tabindex="-1"]):not([disabled])',
        '[contenteditable]:not([disabled])'
    ];
    return Array.from(container.querySelectorAll(focusableSelectors.join(',')));
}

function focusFirstElement(container) {
    const focusable = getFocusableElements(container);
    if (focusable.length > 0) {
        focusable[0].focus();
    }
}

function handleTabKey(e, modal) {
    const focusable = getFocusableElements(modal);
    if (focusable.length === 0) return;
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
    }
}

function setupFocusTrap(modal, closeCallback) {
    const keyHandler = (e) => {
        if (e.key === 'Escape') {
            e.preventDefault();
            closeCallback();
        } else if (e.key === 'Tab') {
            handleTabKey(e, modal);
        }
    };
    modal.addEventListener('keydown', keyHandler);
    modal._focusTrapHandler = keyHandler;
    saveFocus();
    focusFirstElement(modal);
}

function removeFocusTrap(modal) {
    if (modal._focusTrapHandler) {
        modal.removeEventListener('keydown', modal._focusTrapHandler);
        delete modal._focusTrapHandler;
    }
    restoreFocus();
}

function mostrarFinJuego() {
    const modal = document.getElementById('endgame-modal');
    if (!modal) return;

    const score = calcularPuntuacion();
    const rating = getRating(score);
    const personaje = getPersonajeActual();

    const statsEl = document.getElementById('endgame-stats');
    const scoreEl = document.getElementById('final-score');
    const ratingEl = document.getElementById('endgame-rating');
    const tituloEl = document.getElementById('endgame-titulo');
    const subtituloEl = document.getElementById('endgame-subtitulo');

    const esNativo = esPersonajeNativo(personaje);

    if (tituloEl) {
        if (gameState.victoria) {
            tituloEl.textContent = '🎉 ¡VICTORIA!';
        } else if (gameState.alertaMediatica >= 100) {
            tituloEl.textContent = esNativo ? '🚔 PILLADO' : '✈️ DEPORTADO';
        } else {
            tituloEl.textContent = '⏰ FIN DEL TIEMPO';
        }
    }

    if (subtituloEl) {
        if (gameState.victoria) {
            const reason = gameState.presupuestoEspanol <= 0
                ? 'Has drenado todo el presupuesto español.'
                : 'Has superado a la población nativa.';
            subtituloEl.textContent = reason;
        } else if (gameState.alertaMediatica >= 100) {
            subtituloEl.textContent = esNativo
                ? 'Hacienda, la policía y los servicios sociales han llamado a tu puerta. Se acabó el chollo.'
                : 'La presión mediática fue demasiada. Te meten en un avión.';
        } else {
            subtituloEl.textContent = 'El tiempo se acabó. ¿Cuánto daño hiciste?';
        }
    }

    if (statsEl) {
        statsEl.innerHTML = `
            <div class="endgame-stat">
                <span>Personaje</span>
                <span>${personaje.icono} ${personaje.nombre} (${personaje.origen})</span>
            </div>
            <div class="endgame-stat">
                <span>Tiempo</span>
                <span>Mes ${gameState.mesActual} (${Math.floor(gameState.ticksTotales / TICKS_POR_SEGUNDO)}s)</span>
            </div>
            <div class="endgame-stat">
                <span>Paguitas totales</span>
                <span>${formatNumber(gameState.totalPaguitasGeneradas)} 💶</span>
            </div>
            <div class="endgame-stat">
                <span>Presupuesto drenado</span>
                <span>${(PRESUPUESTO_INICIAL - gameState.presupuestoEspanol).toFixed(1)}%</span>
            </div>
            <div class="endgame-stat">
                <span>Población traída</span>
                <span>${formatNumber(gameState.poblacionInmigrante)} 👥</span>
            </div>
            <div class="endgame-stat">
                <span>Nivel de vida tuyo</span>
                <span>${Math.floor(gameState.nivelVidaJugador)}/100</span>
            </div>
            <div class="endgame-stat">
                <span>Nivel de vida Españolito</span>
                <span>${Math.floor(gameState.nivelVidaEspanolito)}/100</span>
            </div>
            <div class="endgame-stat">
                <span>Logros</span>
                <span>${gameState.logrosObtenidos.length}/${LOGROS.length}</span>
            </div>
        `;
    }

    if (scoreEl) scoreEl.textContent = formatNumber(score);
    if (ratingEl) {
        ratingEl.innerHTML = `
            <span class="rating-emoji">${rating.emoji}</span>
            <span class="rating-title">${rating.title}</span>
            <span class="rating-desc">${rating.description}</span>
        `;
    }

    modal.classList.add('show');

    if (typeof audioSystem !== 'undefined') {
        if (gameState.victoria) audioSystem.playWin();
        else audioSystem.playError();
    }

    if (typeof enviarPuntuacionAlRanking === 'function') {
        enviarPuntuacionAlRanking(score);
    }
}

function mostrarMenuPausa() {
    const modal = document.getElementById('pause-modal');
    // Sync toggle state
    const toggle = document.getElementById('toggle-minijuegos');
    if (toggle && gameState) toggle.checked = gameState.minijuegosActivos;
    const toggleSonidoEl = document.getElementById('toggle-sonido');
    if (toggleSonidoEl && typeof audioSystem !== 'undefined') {
        toggleSonidoEl.checked = !audioSystem.muted;
    }
    if (modal) {
        modal.classList.add('show');
        setupFocusTrap(modal, cerrarPausa);
    }
}

function toggleMinijuegos(enabled) {
    if (gameState) gameState.minijuegosActivos = enabled;
}

function toggleSonido(enabled) {
    if (typeof audioSystem === 'undefined') return;
    audioSystem.resume();
    audioSystem.setMuted(!enabled);
    localStorage.setItem('lapaguitaPref_muted', enabled ? '0' : '1');
    if (enabled) audioSystem.playClick();
}

function cerrarPausa() {
    const modal = document.getElementById('pause-modal');
    if (modal) {
        modal.classList.remove('show');
        removeFocusTrap(modal);
    }
}

function confirmarNuevaPartida() {
    const modal = document.getElementById('confirm-modal');
    if (modal) modal.classList.add('show');

    const yesBtn = document.getElementById('confirm-yes');
    const noBtn = document.getElementById('confirm-no');

    if (yesBtn) {
        yesBtn.onclick = () => {
            modal.classList.remove('show');
            const pauseModal = document.getElementById('pause-modal');
            if (pauseModal) pauseModal.classList.remove('show');
            restartGame();
        };
    }
    if (noBtn) {
        noBtn.onclick = () => {
            modal.classList.remove('show');
        };
    }
}

function mostrarAyuda() {
    const modal = document.getElementById('help-modal');
    if (modal) {
        modal.classList.add('show');
        setupFocusTrap(modal, cerrarAyuda);
    }
}

function cerrarAyuda() {
    const modal = document.getElementById('help-modal');
    if (modal) {
        modal.classList.remove('show');
        removeFocusTrap(modal);
    }
}

function restartGame() {
    deleteSave();
    gameState = null;
    showStartScreen();
    renderSeleccionPersonaje();
}

// --- DATOS REALES (ficha informativa por arquetipo) ---

function mostrarEstadisticasReales(personajeId) {
    const modal = document.getElementById('datos-reales-modal');
    if (!modal) return;

    const personaje = getPersonajeById(personajeId);
    const datos = typeof getEstadisticasRealesById === 'function'
        ? getEstadisticasRealesById(personajeId)
        : null;
    if (!personaje || !datos) return;

    const iconEl = document.getElementById('datos-reales-icon');
    const tituloEl = document.getElementById('datos-reales-titulo');
    const subtituloEl = document.getElementById('datos-reales-subtitulo');
    const bodyEl = document.getElementById('datos-reales-body');

    if (iconEl) iconEl.textContent = personaje.icono;
    if (tituloEl) tituloEl.textContent = datos.arquetipo;
    if (subtituloEl) subtituloEl.textContent = `${personaje.bandera} ${personaje.nombre} — ${personaje.origen}`;

    if (bodyEl) {
        bodyEl.innerHTML = [
            renderSeccionConceptos('💸 Coste fiscal estimado', 'coste', datos.costeFiscal),
            renderSeccionConceptos('💼 Aportación al sistema', 'aportacion', datos.aportacion),
            renderSeccionDemografia(datos.demografia),
            renderSeccionFuentes(datos.fuentes),
            datos.coletilla ? `<p class="datos-reales-coletilla">${escapeHtml(datos.coletilla)}</p>` : ''
        ].join('');
    }

    modal.classList.add('show');
    setupFocusTrap(modal, cerrarEstadisticasReales);

    const overlayClose = (e) => {
        if (e.target === modal) {
            cerrarEstadisticasReales();
            modal.removeEventListener('click', overlayClose);
        }
    };
    modal.addEventListener('click', overlayClose);
    modal._datosRealesOverlayClose = overlayClose;
}

function cerrarEstadisticasReales() {
    const modal = document.getElementById('datos-reales-modal');
    if (!modal) return;
    modal.classList.remove('show');
    removeFocusTrap(modal);
    if (modal._datosRealesOverlayClose) {
        modal.removeEventListener('click', modal._datosRealesOverlayClose);
        delete modal._datosRealesOverlayClose;
    }
}

function renderSeccionConceptos(titulo, clase, bloque) {
    if (!bloque) return '';
    const conceptos = (bloque.conceptos || []).map(c => `
        <div class="datos-reales-concepto">
            <span class="datos-reales-concepto-label">${escapeHtml(c.label)}</span>
            <span class="datos-reales-concepto-valor">${escapeHtml(c.valor)}</span>
        </div>
    `).join('');

    const resumen = bloque.resumen
        ? `<p class="datos-reales-resumen">${escapeHtml(bloque.resumen)}</p>`
        : '';

    return `
        <section class="datos-reales-seccion datos-reales-seccion--${clase}">
            <h3 class="datos-reales-seccion-titulo">${titulo}</h3>
            ${resumen}
            <div class="datos-reales-conceptos">${conceptos}</div>
        </section>
    `;
}

function renderSeccionDemografia(demo) {
    if (!demo) return '';
    const filas = [];
    if (demo.natalidad) {
        filas.push(`
            <div class="datos-reales-concepto">
                <span class="datos-reales-concepto-label">Tasa de fecundidad</span>
                <span class="datos-reales-concepto-valor">${escapeHtml(demo.natalidad)}</span>
            </div>
        `);
    }
    if (demo.natalidadRef) {
        filas.push(`
            <div class="datos-reales-concepto datos-reales-concepto--ref">
                <span class="datos-reales-concepto-label">Referencia</span>
                <span class="datos-reales-concepto-valor">${escapeHtml(demo.natalidadRef)}</span>
            </div>
        `);
    }
    if (demo.reagrupacion) {
        filas.push(`
            <div class="datos-reales-concepto">
                <span class="datos-reales-concepto-label">Reagrupación familiar</span>
                <span class="datos-reales-concepto-valor">${escapeHtml(demo.reagrupacion)}</span>
            </div>
        `);
    }
    if (!filas.length) return '';

    return `
        <section class="datos-reales-seccion datos-reales-seccion--demografia">
            <h3 class="datos-reales-seccion-titulo">👥 Impacto demográfico</h3>
            <div class="datos-reales-conceptos">${filas.join('')}</div>
        </section>
    `;
}

function renderSeccionFuentes(fuentes) {
    if (!fuentes || !fuentes.length) return '';
    const items = fuentes.map(f => {
        const titulo = escapeHtml(`${f.organismo} — ${f.titulo}`);
        if (f.url) {
            return `<li><a href="${escapeHtml(f.url)}" target="_blank" rel="noopener noreferrer">${titulo}</a></li>`;
        }
        return `<li>${titulo}</li>`;
    }).join('');

    return `
        <section class="datos-reales-seccion datos-reales-seccion--fuentes">
            <h3 class="datos-reales-seccion-titulo">📚 Fuentes</h3>
            <ul class="datos-reales-fuentes">${items}</ul>
        </section>
    `;
}

function escapeHtml(str) {
    if (str == null) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}
