// Boomermania - UI Display

// Actualizar toda la pantalla
function updateDisplay() {
    updateHeader();
    updateResourcesPanel();
    updateActionsPanel();
    updateGenerationsDisplay();
    updateAdvanceButton();
}

// Actualizar header
function updateHeader() {
    const decada = getDecadaActual();
    if (!decada) return;

    // Nombre y edad
    const playerNameEl = document.getElementById('player-name');
    const playerAgeEl = document.getElementById('player-age');
    if (playerNameEl) playerNameEl.textContent = gameState.playerName;
    if (playerAgeEl) playerAgeEl.textContent = `${getEdadJugador()} años`;

    // Década y año
    const decadeDisplay = document.getElementById('decade-display');
    if (decadeDisplay) {
        const rangoAños = getRangoAñosActual();
        decadeDisplay.textContent = `${rangoAños}`;
    }

    // Nombre del periodo
    const periodDisplay = document.getElementById('period-display');
    if (periodDisplay) {
        periodDisplay.textContent = getNombrePeriodoActual();
    }

    // Barra de progreso de década
    const decadeBar = document.getElementById('decade-bar');
    if (decadeBar) {
        decadeBar.style.width = `${getProgresoDecada()}%`;
    }

    // Barra de progreso de año
    const yearBar = document.getElementById('year-bar');
    if (yearBar) {
        yearBar.style.width = `${getProgresoAño()}%`;
    }

    // Dinero
    const dineroDisplay = document.getElementById('dinero-display');
    if (dineroDisplay && typeof formatearDinero === 'function') {
        dineroDisplay.textContent = formatearDinero(gameState.playerResources.dinero);
    }

    // Puntuación
    const scoreDisplay = document.getElementById('score-display');
    if (scoreDisplay) {
        scoreDisplay.textContent = `${gameState.puntuacionTotal} pts`;
    }
}

// Actualizar panel de recursos
function updateResourcesPanel() {
    if (!gameState) return;

    // Vivienda
    const viviendaValue = document.getElementById('vivienda-value');
    if (viviendaValue) {
        viviendaValue.textContent = getTextoRecurso('vivienda');
    }

    // Empleo
    const empleoValue = document.getElementById('empleo-value');
    if (empleoValue) {
        empleoValue.textContent = getTextoRecurso('empleo');
    }

    // Pensión
    const pensionValue = document.getElementById('pension-value');
    if (pensionValue) {
        pensionValue.textContent = getTextoRecurso('pension');
    }

    // Ambiente (mostrar lo que queda del planeta)
    const ambienteValue = document.getElementById('ambiente-value');
    if (ambienteValue) {
        ambienteValue.textContent = `${gameState.recursosGlobales.saludPlaneta}% vivo`;
    }

    // Educación
    const educacionValue = document.getElementById('educacion-value');
    if (educacionValue) {
        educacionValue.textContent = getTextoRecurso('educacion');
    }

    // Actualizar botones de recursos
    updateResourceButtons();
}

// Actualizar botones de acción rápida en recursos
function updateResourceButtons() {
    const buttons = document.querySelectorAll('.btn--resource');
    buttons.forEach(btn => {
        const action = btn.dataset.action;
        // Deshabilitar si no quedan acciones
        btn.disabled = !quedanAcciones();
    });
}

// Actualizar panel de acciones
function updateActionsPanel() {
    const actionsList = document.getElementById('actions-list');
    if (!actionsList) return;

    const decada = getAnoActual();
    const mejoras = getMejorasDisponibles(decada, gameState.playerResources, gameState.mejorasUsadas);

    actionsList.innerHTML = '';

    if (mejoras.length === 0) {
        actionsList.innerHTML = '<p class="no-actions">No hay acciones disponibles este periodo</p>';
        return;
    }

    mejoras.forEach(mejora => {
        // Calcular coste con inflación
        const coste = typeof calcularCosteMejora === 'function'
            ? calcularCosteMejora(mejora.id)
            : (mejora.coste?.dinero || 0);

        const puedeComprar = coste === 0 || (gameState.playerResources.dinero >= coste);
        const costeFormateado = coste > 0 && typeof formatearDinero === 'function'
            ? formatearDinero(coste)
            : '';

        const item = document.createElement('div');
        item.className = `action-item ${!puedeComprar ? 'disabled' : ''}`;
        item.innerHTML = `
            <div class="action-info">
                <div class="action-name">${mejora.nombre}</div>
                <div class="action-desc">${mejora.descripcion}</div>
                <div class="action-meta">
                    ${costeFormateado ? `<span class="action-cost ${!puedeComprar ? 'insufficient' : ''}">${costeFormateado}</span>` : ''}
                    <span class="action-points">+${mejora.puntos || 0} pts</span>
                </div>
            </div>
            <button class="btn action-btn" data-action="${mejora.id}" ${!quedanAcciones() || !puedeComprar ? 'disabled' : ''}>
                ${puedeComprar ? 'HACER' : 'SIN FONDOS'}
            </button>
        `;

        // Evento de click
        const btn = item.querySelector('.action-btn');
        btn.addEventListener('click', () => handleAction(mejora.id));

        actionsList.appendChild(item);
    });
}

// Actualizar panel de generaciones
function updateGenerationsDisplay() {
    const estados = getEstadoGeneraciones();

    for (const [genId, estado] of Object.entries(estados)) {
        const statusEl = document.getElementById(`${genId}-status`);
        if (statusEl) {
            statusEl.textContent = estado.texto;
            statusEl.className = `gen-status ${estado.clase}`;
        }

        // Actualizar emoji
        const genEl = document.querySelector(`.generation[data-gen="${genId}"] .gen-icon`);
        if (genEl) {
            genEl.textContent = getEmojiGeneracion(genId);
        }
    }
}

// Actualizar botón de avanzar (año o década)
function updateAdvanceButton() {
    const advanceBtn = document.getElementById('advance-btn');
    if (!advanceBtn) return;

    const esUltimo = esUltimaDecada() && esUltimoAñoDecada();
    const esFinAño = !quedanAcciones();
    const esFinDecada = esUltimoAñoDecada() && esFinAño;

    if (esUltimo && esFinAño) {
        advanceBtn.textContent = 'VER RESULTADOS';
        advanceBtn.className = 'btn btn--lg btn--finish';
    } else if (esFinDecada) {
        advanceBtn.textContent = 'SIGUIENTE DÉCADA →';
        advanceBtn.className = 'btn btn--lg btn--advance-decade';
    } else if (esFinAño) {
        advanceBtn.textContent = 'SIGUIENTE PERIODO →';
        advanceBtn.className = 'btn btn--lg btn--advance';
    } else {
        const restantes = getAccionesRestantes();
        advanceBtn.textContent = `AVANZAR (${restantes} acción${restantes !== 1 ? 'es' : ''})`;
        advanceBtn.className = 'btn btn--lg btn--advance';
    }

    advanceBtn.disabled = false;
}

// Manejar acción del jugador
function handleAction(mejoraId) {
    if (!quedanAcciones()) return;

    const mejora = mejorasData[mejoraId];
    if (!mejora) return;

    // Realizar la mejora
    if (realizarMejora(mejoraId)) {
        if (typeof audioSystem !== 'undefined') audioSystem.playBuy();

        // Mostrar frase del boomer
        if (mejora.frase) {
            const frase = getFrase(mejora.frase);
            mostrarFraseBoomer(frase);
        }

        // Actualizar UI
        updateDisplay();

        // Guardar
        saveGame();
    } else if (typeof audioSystem !== 'undefined') {
        audioSystem.playError();
    }
}

// Manejar click en botón de recurso
function handleResourceAction(action) {
    // Mapear acciones rápidas a mejoras
    const mapping = {
        'vivienda': 'comprarPiso',
        'empleo': 'buscarTrabajo',
        'pension': 'cotizar',
        'ambiente': 'comprarCocheDiesel',
        'educacion': 'votarSubirTasas'
    };

    const mejoraId = mapping[action];
    if (!mejoraId) return;

    // Verificar si no quedan acciones
    if (!quedanAcciones()) {
        if (typeof audioSystem !== 'undefined') audioSystem.playError();
        mostrarFraseBoomer('Ya has hecho suficiente este periodo');
        return;
    }

    // Verificar si la mejora está disponible
    if (!isMejoraDisponible(mejoraId)) {
        if (typeof audioSystem !== 'undefined') audioSystem.playError();
        // Mostrar feedback de por qué no está disponible
        const razon = typeof getRazonNoDisponible === 'function'
            ? getRazonNoDisponible(mejoraId)
            : 'No disponible';
        mostrarFraseBoomer(razon);
        return;
    }

    handleAction(mejoraId);
}

// Setup de event listeners para botones de recursos
function setupResourceButtons() {
    const buttons = document.querySelectorAll('.btn--resource');
    buttons.forEach(btn => {
        btn.addEventListener('click', () => {
            const action = btn.dataset.action;
            handleResourceAction(action);
        });
    });
}

// Setup navegación por tabs (móvil)
function setupNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const sections = {
        'resources': document.getElementById('resources-panel'),
        'actions': document.getElementById('actions-panel'),
        'generations': document.getElementById('generations-panel'),
        'stats': document.getElementById('stats-panel')
    };

    navItems.forEach(item => {
        item.addEventListener('click', () => {
            const tab = item.dataset.tab;

            // Actualizar navegación activa
            navItems.forEach(nav => nav.classList.remove('active'));
            item.classList.add('active');

            // Para stats, toggle el panel
            if (tab === 'stats') {
                toggleStatsPanel();
                return;
            }

            // Scroll a la sección
            const section = sections[tab];
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
}

// Toggle panel de estadísticas
function toggleStatsPanel() {
    const panel = document.getElementById('stats-panel');
    if (!panel) return;

    const isOpening = !panel.classList.contains('active');
    panel.classList.toggle('active');

    if (panel.classList.contains('active')) {
        renderStatsPanel();
        setupFocusTrap(panel, toggleStatsPanel);
    } else {
        removeFocusTrap(panel);
    }
}

// Renderizar contenido del panel de estadísticas
function renderStatsPanel() {
    const content = document.getElementById('stats-content');
    if (!content || !gameState) return;

    const resumen = getResumenRecursos();
    const resumenEco = typeof getResumenEconomico === 'function' ? getResumenEconomico() : null;

    let html = '';

    // Sección económica (nueva)
    if (resumenEco) {
        html += `
        <div class="stats-section">
            <h5>💰 ECONOMÍA</h5>
            <div class="stat-row">
                <span>Dinero disponible:</span>
                <span class="positive">${resumenEco.dinero}</span>
            </div>
            <div class="stat-row">
                <span>Sueldo:</span>
                <span>${resumenEco.sueldo}</span>
            </div>
            <div class="stat-row">
                <span>Patrimonio total:</span>
                <span class="positive">${resumenEco.patrimonio}</span>
            </div>
            <div class="stat-row">
                <span>Estado:</span>
                <span>${resumenEco.estado}</span>
            </div>
        </div>
        `;
    }

    html += `
        <div class="stats-section">
            <h5>TUS RECURSOS</h5>
            <div class="stat-row">
                <span>🏠 Pisos:</span>
                <span>${resumen.player.pisos}</span>
            </div>
            <div class="stat-row">
                <span>💼 Empleo:</span>
                <span>${resumen.player.empleo}</span>
            </div>
            <div class="stat-row">
                <span>🏦 Pensión:</span>
                <span>${resumen.player.pension}</span>
            </div>
        </div>
        <div class="stats-section">
            <h5>RECURSOS GLOBALES</h5>
            <div class="stat-row">
                <span>🏠 Vivienda accesible:</span>
                <span class="${getClaseRecursoGlobal('viviendaDisponible')}">${resumen.global.viviendaDisponible}</span>
            </div>
            <div class="stat-row">
                <span>💼 Empleo estable:</span>
                <span class="${getClaseRecursoGlobal('empleoEstable')}">${resumen.global.empleoEstable}</span>
            </div>
            <div class="stat-row">
                <span>🏦 Hucha pensiones:</span>
                <span class="${getClaseRecursoGlobal('huchaPensiones')}">${resumen.global.huchaPensiones}</span>
            </div>
            <div class="stat-row">
                <span>🌍 Salud planeta:</span>
                <span class="${getClaseRecursoGlobal('saludPlaneta')}">${resumen.global.saludPlaneta}</span>
            </div>
            <div class="stat-row">
                <span>🎓 Educación accesible:</span>
                <span class="${getClaseRecursoGlobal('educacionAccesible')}">${resumen.global.educacionAccesible}</span>
            </div>
        </div>
        <div class="stats-section">
            <h5>ESTADÍSTICAS</h5>
            <div class="stat-row">
                <span>Periodos jugados:</span>
                <span>${gameState.stats.añosJugados || 0}</span>
            </div>
            <div class="stat-row">
                <span>Acciones totales:</span>
                <span>${gameState.stats.accionesTotales}</span>
            </div>
            <div class="stat-row">
                <span>Eventos resueltos:</span>
                <span>${gameState.stats.eventosResueltos}</span>
            </div>
            <div class="stat-row">
                <span>Bienestar personal:</span>
                <span class="positive">${gameState.puntuacionBienestar}</span>
            </div>
            <div class="stat-row">
                <span>Miseria generacional:</span>
                <span class="negative">${Math.round(gameState.puntuacionMiseria)}%</span>
            </div>
        </div>
    `;

    content.innerHTML = html;
}
