// La Paguita - UI de Eventos

function mostrarEvento(evento) {
    const modal = document.getElementById('event-modal');
    const titulo = document.getElementById('event-title');
    const desc = document.getElementById('event-description');
    const opciones = document.getElementById('event-options');

    if (!modal || !titulo || !desc || !opciones) return;

    titulo.textContent = evento.titulo;
    desc.textContent = evento.descripcion;

    opciones.innerHTML = evento.opciones.map((opcion, index) => {
        // Check if option has phase requirement
        if (opcion.requiereFase && gameState.faseActual < opcion.requiereFase) {
            return `
                <button class="btn btn--evento btn--disabled" disabled>
                    <span class="opcion-texto">🔒 ${opcion.texto} (Fase ${opcion.requiereFase})</span>
                </button>
            `;
        }

        return `
            <button class="btn btn--evento" data-opcion-index="${index}">
                <span class="opcion-texto">${opcion.texto}</span>
            </button>
        `;
    }).join('');

    // Store current event
    modal._currentEvento = evento;
    modal.classList.add('show');

    if (typeof audioSystem !== 'undefined') audioSystem.playAlert();

    // Delay before accepting clicks to prevent accidental taps on mobile
    const btns = opciones.querySelectorAll('[data-opcion-index]');
    btns.forEach(btn => btn.style.opacity = '0.5');

    setTimeout(() => {
        btns.forEach(btn => {
            btn.style.opacity = '';
            btn.addEventListener('click', function handler() {
                btn.removeEventListener('click', handler);
                handleOpcionEvento(parseInt(btn.dataset.opcionIndex));
            });
        });
    }, 600);
}

function handleOpcionEvento(index) {
    const modal = document.getElementById('event-modal');
    if (!modal || !modal._currentEvento) return;

    const evento = modal._currentEvento;
    const opcion = evento.opciones[index];
    if (!opcion) return;

    // Apply effects
    aplicarEfectosEvento(opcion.efectos);

    // Hide event modal
    modal.classList.remove('show');

    // Show result
    mostrarResultadoEvento(opcion.resultado, opcion.efectos);

    // Save
    saveGame();

    // Update display
    updateDisplay();
}

function mostrarResultadoEvento(texto, efectos) {
    const modal = document.getElementById('result-modal');
    const resultTexto = document.getElementById('result-texto');
    const resultEfectos = document.getElementById('result-efectos');

    if (!modal || !resultTexto) return;

    resultTexto.textContent = texto;

    if (resultEfectos) {
        resultEfectos.innerHTML = formatEfectosDetallado(efectos);
    }

    modal.classList.add('show');

    // Close on click after a minimum read time, or auto-close after 6s
    const closeHandler = () => {
        modal.classList.remove('show');
        modal.removeEventListener('click', closeHandler);
    };

    setTimeout(() => {
        modal.addEventListener('click', closeHandler);
        setTimeout(closeHandler, 6000);
    }, 1500); // 1.5s minimum before closeable
}

function mostrarFraseFase(faseNum) {
    const personaje = getPersonajeActual();
    const esNativo = esPersonajeNativo(personaje);
    const frases = esNativo ? FRASES_TRANSICION_FASE_NATIVO : FRASES_TRANSICION_FASE;
    const frase = frases[faseNum] || '';
    if (!frase) return;

    const modal = document.getElementById('quote-modal');
    const text = document.getElementById('quote-text');
    const icon = document.getElementById('quote-icon');

    if (!modal || !text) return;

    if (icon) icon.textContent = personaje.icono;
    text.textContent = frase;

    modal.classList.add('show');

    setTimeout(() => {
        modal.classList.remove('show');
    }, 3000);
}

function mostrarFraseJugador() {
    const frase = getFraseJugador(gameState.faseActual);

    const modal = document.getElementById('quote-modal');
    const text = document.getElementById('quote-text');
    const icon = document.getElementById('quote-icon');

    if (!modal || !text) return;

    const personaje = getPersonajeActual();
    if (icon) icon.textContent = personaje.icono;
    text.textContent = frase;

    modal.classList.add('show');

    setTimeout(() => {
        modal.classList.remove('show');
    }, 2500);
}

function mostrarCasiDeportado() {
    const modal = document.getElementById('result-modal');
    const resultTexto = document.getElementById('result-texto');
    const resultEfectos = document.getElementById('result-efectos');

    if (!modal || !resultTexto) return;

    const personaje = getPersonajeActual();
    const esNativo = esPersonajeNativo(personaje);
    const escapeCount = gameState.stats.vecesDeportadoCasi;

    // Rotating satirical message
    const mensaje = getFraseEscapeDeportacion(esNativo, escapeCount - 1);
    resultTexto.textContent = mensaje;

    if (resultEfectos) {
        const parts = [];
        const alertaFloor = Math.floor(gameState.alertaMediatica);
        parts.push('<span class="efecto-neg">Alerta al ' + alertaFloor + '%</span>');

        if (esNativo || escapeCount >= 2) {
            parts.push('<span class="efecto-neg">Paguitas confiscadas</span>');
        }

        if (escapeCount >= 4) {
            parts.push('<span class="efecto-neg">-1 nivel de ayuda</span>');
        }

        if (escapeCount >= 3) {
            parts.push('<span class="efecto-riesgo">Vez ' + escapeCount + '... la suerte no dura siempre</span>');
        }

        resultEfectos.innerHTML = parts.join(' · ');
    }

    modal.classList.add('show');

    setTimeout(() => {
        const closeHandler = () => {
            modal.classList.remove('show');
            modal.removeEventListener('click', closeHandler);
        };
        modal.addEventListener('click', closeHandler);
        setTimeout(closeHandler, 6000);
    }, 1500);
}

// Toast queue system to prevent overlapping
let _toastQueue = [];
let _toastShowing = false;
const TOAST_DURATION = 3000;
const TOAST_GAP = 400;

function mostrarMiniNotificacion(texto, efectos) {
    _toastQueue.push({ texto, efectos });
    if (!_toastShowing) _processNextToast();
}

function _processNextToast() {
    if (_toastQueue.length === 0) { _toastShowing = false; return; }
    _toastShowing = true;

    const { texto, efectos } = _toastQueue.shift();
    const container = document.getElementById('game-container') || document.body;
    const toast = document.createElement('div');
    toast.className = 'mini-toast';

    toast.style.position = 'fixed';
    toast.style.bottom = '80px';
    toast.style.left = '50%';
    toast.style.transform = 'translateX(-50%)';
    toast.style.backgroundColor = 'var(--surface-color, rgba(31, 41, 55, 0.95))';
    toast.style.color = 'var(--text-color, #fff)';
    toast.style.padding = '10px 20px';
    toast.style.borderRadius = '20px';
    toast.style.boxShadow = '0 4px 6px rgba(0,0,0,0.3)';
    toast.style.zIndex = '9999';
    toast.style.fontSize = '14px';
    toast.style.pointerEvents = 'none';
    toast.style.transition = 'opacity 0.3s ease, bottom 0.3s ease';
    toast.style.display = 'flex';
    toast.style.flexDirection = 'column';
    toast.style.alignItems = 'center';
    toast.style.gap = '5px';
    toast.style.maxWidth = '90vw';
    toast.style.textAlign = 'center';

    toast.innerHTML = `<strong>${texto}</strong><span>${formatEfectos(efectos)}</span>`;
    container.appendChild(toast);

    // Animate in
    setTimeout(() => { toast.style.bottom = '90px'; }, 10);

    // Animate out, then process next
    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.bottom = '100px';
        setTimeout(() => {
            toast.remove();
            setTimeout(_processNextToast, TOAST_GAP);
        }, 300);
    }, TOAST_DURATION);
}

// === TRAMPAS (modal especial) ===
function mostrarTrampa(trampa) {
    const modal = document.getElementById('trampa-modal');
    const titulo = document.getElementById('trampa-titulo');
    const desc = document.getElementById('trampa-desc');
    const resultado = document.getElementById('trampa-resultado');
    const debuffEl = document.getElementById('trampa-debuff');

    if (!modal) return;

    if (titulo) titulo.textContent = trampa.titulo;
    if (desc) desc.textContent = trampa.descripcion;
    if (resultado) resultado.textContent = trampa.resultado;

    if (debuffEl) {
        if (trampa.debuff) {
            debuffEl.innerHTML = `
                <div class="debuff-badge">
                    <span class="debuff-emoji">${trampa.debuff.emoji}</span>
                    <div class="debuff-info">
                        <strong>${trampa.debuff.nombre}</strong>
                        <span>${trampa.debuff.descripcion}</span>
                    </div>
                </div>
            `;
        } else {
            debuffEl.innerHTML = '';
        }
    }

    modal.classList.add('show');

    // Delay before accepting click to prevent accidental taps on mobile
    const trampaBtn = modal.querySelector('.btn--warning');
    if (trampaBtn) {
        trampaBtn.style.opacity = '0.5';
        trampaBtn.style.pointerEvents = 'none';
        setTimeout(() => {
            trampaBtn.style.opacity = '';
            trampaBtn.style.pointerEvents = '';
        }, 600);
    }
}

function cerrarTrampa() {
    const modal = document.getElementById('trampa-modal');
    if (modal) modal.classList.remove('show');
}

// === HINTS (Onboarding) ===
// Hints queue to avoid overlap with each other
let _hintQueue = [];
let _hintShowing = false;

function mostrarHint(texto) {
    _hintQueue.push(texto);
    if (!_hintShowing) _processNextHint();
}

function _processNextHint() {
    if (_hintQueue.length === 0) { _hintShowing = false; return; }
    _hintShowing = true;

    const texto = _hintQueue.shift();
    const container = document.getElementById('game-container') || document.body;
    const hint = document.createElement('div');
    hint.className = 'hint-toast';
    hint.innerHTML = `<span class="hint-icon">💡</span><span class="hint-text">${texto}</span>`;
    container.appendChild(hint);

    requestAnimationFrame(() => { hint.classList.add('show'); });

    setTimeout(() => {
        hint.classList.remove('show');
        setTimeout(() => {
            hint.remove();
            setTimeout(_processNextHint, 300);
        }, 400);
    }, 5000);
}

// === CELEBRACIÓN DE FASE ===
function celebrarFase() {
    const emojis = ['💶', '📄', '🎉', '🎊', '👑', '🥳', '💰', '🏆'];
    const container = document.getElementById('game-container') || document.body;

    for (let i = 0; i < 12; i++) {
        const confetti = document.createElement('span');
        confetti.className = 'fase-confetti';
        confetti.textContent = emojis[Math.floor(Math.random() * emojis.length)];
        confetti.style.left = (10 + Math.random() * 80) + '%';
        confetti.style.animationDelay = (Math.random() * 0.5) + 's';
        confetti.style.fontSize = (1 + Math.random() * 1.5) + 'rem';
        container.appendChild(confetti);
        setTimeout(() => confetti.remove(), 2500);
    }
}

// === HELPERS ===
function formatEfectos(efectos) {
    if (!efectos) return '';
    const parts = [];
    if (efectos.paguitas > 0) parts.push(`+${efectos.paguitas}💶`);
    if (efectos.paguitas < 0) parts.push(`${efectos.paguitas}💶`);
    if (efectos.papeles > 0) parts.push(`+${efectos.papeles}📄`);
    if (efectos.papeles < 0) parts.push(`${efectos.papeles}📄`);
    if (efectos.alerta > 0) parts.push(`+${efectos.alerta}📺`);
    if (efectos.alerta < 0) parts.push(`${efectos.alerta}📺`);
    if (efectos.presupuesto) parts.push(`${efectos.presupuesto > 0 ? '+' : ''}${efectos.presupuesto}%🇪🇸`);
    if (efectos.poblacion) parts.push(`+${formatNumber(efectos.poblacion)}👥`);
    if (efectos.inmunidadPolitica) parts.push('🛡️ INMUNIDAD');
    return parts.join(' ');
}

function formatEfectosDetallado(efectos) {
    if (!efectos) return '';
    const parts = [];
    if (efectos.paguitas > 0) parts.push(`<span class="efecto-pos">+${efectos.paguitas} paguitas</span>`);
    if (efectos.paguitas < 0) parts.push(`<span class="efecto-neg">${efectos.paguitas} paguitas</span>`);
    if (efectos.papeles > 0) parts.push(`<span class="efecto-pos">+${efectos.papeles} papeles</span>`);
    if (efectos.alerta > 0) parts.push(`<span class="efecto-neg">+${efectos.alerta}% alerta</span>`);
    if (efectos.alerta < 0) parts.push(`<span class="efecto-pos">${efectos.alerta}% alerta</span>`);
    if (efectos.presupuesto) parts.push(`<span class="${efectos.presupuesto < 0 ? 'efecto-pos' : 'efecto-neg'}">${efectos.presupuesto}% presupuesto</span>`);
    if (efectos.poblacion) parts.push(`<span class="efecto-pos">+${formatNumber(efectos.poblacion)} inmigrantes</span>`);
    if (efectos.inmunidadPolitica) parts.push(`<span class="efecto-pos">🛡️ Inmunidad política</span>`);
    return parts.join(' · ');
}
