const encuentroUICtx = {
    overlay: null,
    sprite: null,
    titulo: null,
    frase: null,
    prompt: null,
    progressFill: null,
    actionBtn: null,
    handlerActive: false
};

function initEncuentroUI() {
    encuentroUICtx.overlay = document.getElementById('overlay-encuentro');
    encuentroUICtx.sprite = document.getElementById('encuentro-sprite');
    encuentroUICtx.titulo = document.getElementById('encuentro-titulo');
    encuentroUICtx.frase = document.getElementById('encuentro-frase');
    encuentroUICtx.prompt = document.getElementById('encuentro-prompt');
    encuentroUICtx.progressFill = document.getElementById('encuentro-progress');
    encuentroUICtx.actionBtn = document.getElementById('encuentro-action');

    encuentroUICtx.actionBtn.addEventListener('pointerdown', (e) => {
        e.preventDefault();
        const enc = getEncuentroActivo();
        if (!enc) return;
        if (enc.tipo === 'hold') {
            setHoldEncuentro(true);
        } else {
            registrarClickEncuentro();
        }
    });
    encuentroUICtx.actionBtn.addEventListener('pointerup', (e) => {
        e.preventDefault();
        const enc = getEncuentroActivo();
        if (!enc) return;
        if (enc.tipo === 'hold') setHoldEncuentro(false);
    });
    encuentroUICtx.actionBtn.addEventListener('pointercancel', () => {
        setHoldEncuentro(false);
    });

    document.addEventListener('keydown', (e) => {
        const enc = getEncuentroActivo();
        if (!enc) return;
        if (e.key === ' ' || e.key === 'Enter') {
            e.preventDefault();
            if (enc.tipo === 'hold') setHoldEncuentro(true);
            else if (!e.repeat) registrarClickEncuentro();
        }
    });
    document.addEventListener('keyup', (e) => {
        const enc = getEncuentroActivo();
        if (!enc) return;
        if (e.key === ' ' || e.key === 'Enter') {
            if (enc.tipo === 'hold') setHoldEncuentro(false);
        }
    });
}

function showEncuentroUI(enc) {
    if (!encuentroUICtx.overlay) return;
    encuentroUICtx.titulo.textContent = enc.arquetipo.nombre;
    encuentroUICtx.sprite.textContent = enc.arquetipo.emoji;
    encuentroUICtx.sprite.style.background = enc.arquetipo.colorBase + 'aa';
    encuentroUICtx.frase.textContent = '«' + enc.frase + '»';
    encuentroUICtx.prompt.textContent = enc.config.promptTexto;
    if (enc.tipo === 'tap') {
        encuentroUICtx.actionBtn.textContent = '¡PULSA!';
    } else if (enc.tipo === 'hold') {
        encuentroUICtx.actionBtn.textContent = 'MANTÉN PULSADO';
    } else {
        encuentroUICtx.actionBtn.textContent = 'AGUANTA (no pulses)';
    }
    encuentroUICtx.progressFill.style.width = '100%';
    encuentroUICtx.overlay.hidden = false;
    encuentroUICtx.overlay.classList.add('overlay-active');
}

function updateEncuentroUI(enc) {
    if (!encuentroUICtx.progressFill) return;
    const pct = Math.max(0, Math.min(1, enc.progresoBar)) * 100;
    encuentroUICtx.progressFill.style.width = pct + '%';
    if (enc.tipo === 'tap') {
        encuentroUICtx.actionBtn.textContent = `¡PULSA! ${enc.clicks}/${enc.targetClicks}`;
    }
}

function hideEncuentroUI() {
    if (!encuentroUICtx.overlay) return;
    encuentroUICtx.overlay.hidden = true;
    encuentroUICtx.overlay.classList.remove('overlay-active');
    setHoldEncuentro(false);
}
