// Resistiré - UI Display

function updateDisplay() {
    updateHeader();
    updateResourcesPanel();
    updateActionsPanel();
    updateGlobalsDisplay();
    updateAdvanceButton();
}

function updateHeader() {
    if (!gameState) return;

    const playerNameEl = document.getElementById('player-name');
    if (playerNameEl) playerNameEl.textContent = gameState.playerName;

    const ola = getDecadaActual();
    const playerAgeEl = document.getElementById('player-age');
    if (playerAgeEl) playerAgeEl.textContent = ola ? ola.playerAge : '';

    const decadeDisplay = document.getElementById('decade-display');
    if (decadeDisplay) {
        decadeDisplay.textContent = getRangoAñosActual();
    }

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

    const decadeBar = document.getElementById('decade-bar');
    if (decadeBar) {
        decadeBar.style.width = `${getProgresoDecada()}%`;
    }

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

    const olaTitleEl = document.getElementById('ola-title');
    if (olaTitleEl) {
        olaTitleEl.textContent = ola ? ola.name : 'Fin';
    }

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

function updateResourcesPanel() {
    if (!gameState) return;

    const recursos = ['popularidad', 'relato', 'enchufes', 'socios', 'ego'];
    recursos.forEach(r => {
        const el = document.getElementById(`${r}-value`);
        if (el) el.textContent = getTextoRecurso(r);

        const card = document.querySelector(`.resource-card[data-resource="${r}"]`);
        if (card) {
            card.classList.remove('high', 'medium', 'low');
            card.classList.add(getClaseRecurso(r));
        }
    });
}

function updateGlobalsDisplay() {
    if (!gameState) return;

    const mappings = [
        { id: 'sanidad', recurso: 'sanidadDisponible' },
        { id: 'economia', recurso: 'economia' },
        { id: 'libertades', recurso: 'libertades' },
        { id: 'contagios', recurso: 'saludPoblacional' },
        { id: 'vidas', recurso: 'vidasSalvadas' }
    ];

    mappings.forEach(({ id, recurso }) => {
        const valueEl = document.getElementById(`${id}-value`);
        if (valueEl) valueEl.textContent = getTextoRecursoGlobal(recurso);

        const card = document.querySelector(`.global-card[data-global="${id}"]`);
        if (card) {
            card.classList.remove('good', 'warn', 'bad');
            card.classList.add(getClaseRecursoGlobal(recurso));
        }
    });
}

function updateActionsPanel() {
    const actionsList = document.getElementById('actions-list');
    if (!actionsList || !gameState) return;

    const ola = getAnoActual();
    const acciones = getMejorasDisponibles(ola, gameState.playerResources, gameState.mejorasUsadas);

    actionsList.innerHTML = '';

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

    acciones.forEach(accion => {
        const item = document.createElement('div');
        item.className = 'action-item';
        const check = puedeRealizarMejora(accion.id);
        const disponible = quedanAcciones() && check.ok;
        if (!disponible) item.classList.add('disabled');

        const costeHtml = formatearCoste(accion.coste);
        const btnLabel = check.ok ? 'EJECUTAR' : check.razon.toUpperCase();

        item.innerHTML = `
            <div class="action-info">
                <div class="action-name">${accion.nombre}</div>
                <div class="action-desc">${accion.descripcion}</div>
                <div class="action-meta">
                    <span class="action-category">${categoriaLabel(accion.categoria)}</span>
                    ${costeHtml}
                </div>
            </div>
            <button class="btn action-btn" data-action="${accion.id}" ${!disponible ? 'disabled' : ''}>
                ${btnLabel}
            </button>
        `;

        const btn = item.querySelector('.action-btn');
        btn.addEventListener('click', () => handleAction(accion.id));

        actionsList.appendChild(item);
    });
}

function categoriaLabel(cat) {
    const labels = {
        negacionismo: '🤥 Negacionismo',
        teatro: '🎭 Teatro político',
        compras: '💸 Compras de pánico',
        absurdas: '🚫 Medidas absurdas',
        maniobras: '♟️ Maniobras políticas',
        medios: '📰 Medios y comunicación',
        diplomacia: '✈️ Diplomacia y escapadas',
        decretazos: '⚖️ Decretazos y favores',
        distractores: '🎪 Distractores',
        tramas: '💰 Tramas y comisiones'
    };
    return labels[cat] || cat;
}

function formatearCoste(coste) {
    if (!coste) return '';
    const items = [];
    const costMeta = {
        popularidad: { emoji: '📈', label: 'Pop' },
        relato:      { emoji: '📺', label: 'Relato' },
        enchufes:    { emoji: '💼', label: 'Enchufes' },
        socios:      { emoji: '🤝', label: 'Socios' },
        ego:         { emoji: '🥇', label: 'Ego' }
    };
    for (const [r, c] of Object.entries(coste)) {
        if (r === 'dinero' || c === 0) continue;
        const meta = costMeta[r];
        if (meta) items.push(`<span class="action-cost">${meta.emoji} -${c} ${meta.label}</span>`);
    }
    return items.join('');
}

// Helpers para mostrar efectos visualmente
const EFFECT_META = {
    // Personales (Moncloa) — subir es bueno para el jugador
    popularidad:       { emoji: '📈', label: 'Pop',       inverso: false },
    relato:            { emoji: '📺', label: 'Relato',    inverso: false },
    enchufes:          { emoji: '💼', label: 'Enchufes',  inverso: false },
    socios:            { emoji: '🤝', label: 'Socios',    inverso: false },
    ego:               { emoji: '🥇', label: 'Ego',       inverso: false },
    // Globales (España) — bajar es malo para España
    sanidadDisponible: { emoji: '🏥', label: 'Sanidad',   inverso: false },
    economia:          { emoji: '💶', label: 'Economía',  inverso: false },
    libertades:        { emoji: '📜', label: 'Libert.',   inverso: false },
    // Inversos: efecto en saludPoblacional → mostrar como contagios (signo invertido)
    saludPoblacional:  { emoji: '🦠', label: 'Contagios', inverso: true },
    vidasSalvadas:     { emoji: '💀', label: 'Muertes',   inverso: true }
};

function formatearEfectos(efecto) {
    if (!efecto) return '';
    const items = [];

    if (efecto.playerResources) {
        for (const [k, v] of Object.entries(efecto.playerResources)) {
            items.push(formatearImpacto(k, v, 'player'));
        }
    }
    if (efecto.recursosGlobales) {
        for (const [k, v] of Object.entries(efecto.recursosGlobales)) {
            items.push(formatearImpacto(k, v, 'global'));
        }
    }

    if (items.length === 0) return '<span class="effect-none">Sin efecto</span>';
    return items.join('');
}

function formatearImpacto(recurso, cambio, tipo) {
    const meta = EFFECT_META[recurso];
    if (!meta) return '';

    // Para recursos inversos (saludPoblacional, vidasSalvadas), invertimos el signo
    // así "-15 saludPoblacional" se muestra como "+15 contagios"
    const signo = meta.inverso ? -cambio : cambio;
    const isPositiveForPlayer = (tipo === 'player' && cambio > 0) ||
                                (tipo === 'global' && !meta.inverso && cambio > 0) ||
                                (tipo === 'global' && meta.inverso && cambio > 0);
    const cls = isPositiveForPlayer ? 'effect-up' : 'effect-down';
    const prefix = signo > 0 ? '+' : '';

    return `<span class="effect-pill ${cls}">${meta.emoji} ${prefix}${signo} ${meta.label}</span>`;
}

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 OLA →';
        advanceBtn.className = 'btn btn--lg btn--advance-decade';
    } else if (esFinAño) {
        advanceBtn.textContent = 'SIGUIENTE SEMANA →';
        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;
}

function handleAction(mejoraId) {
    if (!quedanAcciones()) return;

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

    if (realizarMejora(mejoraId)) {
        const frase = mejora.frase ? getFrase(mejora.frase) : '';
        const efectos = formatearEfectos(mejora.efecto);
        mostrarConsecuencias(frase, efectos);
        updateDisplay();
        saveGame();
    }
}

function mostrarConsecuencias(frase, efectosHtml) {
    const modal = document.getElementById('quote-modal');
    const textEl = document.getElementById('quote-text');
    if (!modal || !textEl) return;

    let html = '';
    if (frase) html += `<div class="quote-frase">"${frase}"</div>`;
    if (efectosHtml) html += `<div class="quote-efectos">${efectosHtml}</div>`;
    textEl.innerHTML = html;

    modal.classList.add('active');
    setTimeout(() => modal.classList.remove('active'), 2600);
}

function setupNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const sections = {
        'resources': document.getElementById('resources-panel'),
        'actions': document.getElementById('actions-panel'),
        'globals': document.getElementById('globals-panel'),
        'stats': document.getElementById('stats-panel')
    };

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

            navItems.forEach(nav => nav.classList.remove('active'));
            item.classList.add('active');

            if (tab === 'stats') {
                toggleStatsPanel();
                return;
            }

            const section = sections[tab];
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
}

function toggleStatsPanel() {
    const panel = document.getElementById('stats-panel');
    if (!panel) return;

    panel.classList.toggle('active');

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

function renderStatsPanel() {
    const content = document.getElementById('stats-content');
    if (!content || !gameState) return;

    const resumen = getResumenRecursos();

    content.innerHTML = `
        <div class="stats-section">
            <h5>📊 MONCLOA</h5>
            <div class="stat-row"><span>📈 Popularidad:</span><span>${resumen.player.popularidad}</span></div>
            <div class="stat-row"><span>📺 Relato:</span><span>${resumen.player.relato}</span></div>
            <div class="stat-row"><span>💼 Enchufes:</span><span>${resumen.player.enchufes}</span></div>
            <div class="stat-row"><span>🤝 Socios:</span><span>${resumen.player.socios}</span></div>
            <div class="stat-row"><span>🥇 Ego:</span><span>${resumen.player.ego}</span></div>
        </div>
        <div class="stats-section">
            <h5>🇪🇸 ESPAÑA</h5>
            <div class="stat-row"><span>🏥 Sanidad:</span><span class="${getClaseRecursoGlobal('sanidadDisponible')}">${resumen.global.sanidadDisponible}</span></div>
            <div class="stat-row"><span>💶 Economía:</span><span class="${getClaseRecursoGlobal('economia')}">${resumen.global.economia}</span></div>
            <div class="stat-row"><span>📜 Libertades:</span><span class="${getClaseRecursoGlobal('libertades')}">${resumen.global.libertades}</span></div>
            <div class="stat-row"><span>🦠 Contagios:</span><span class="${getClaseRecursoGlobal('saludPoblacional')}">${resumen.global.contagios}</span></div>
            <div class="stat-row"><span>💀 Muertes:</span><span class="${getClaseRecursoGlobal('vidasSalvadas')}">${resumen.global.vidasPerdidas}</span></div>
        </div>
        <div class="stats-section">
            <h5>📅 PARTIDA</h5>
            <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 Moncloa:</span><span class="positive">${gameState.puntuacionBienestar}</span></div>
            <div class="stat-row"><span>Caos nacional:</span><span class="negative">${Math.round(gameState.puntuacionMiseria)}%</span></div>
        </div>
    `;
}
