// Generic option-card / scale-btn selection behavior + submit gating for outro forms.

document.querySelectorAll('.option-card, .scale-btn').forEach(el => {
    el.addEventListener('click', () => {
        const radio = el.querySelector('input[type="radio"]');
        if (!radio) return;
        document.querySelectorAll(`input[name="${radio.name}"]`).forEach(r => {
            r.closest('.option-card, .scale-btn').classList.remove('selected');
        });
        radio.checked = true;
        el.classList.add('selected');
        el.dispatchEvent(new CustomEvent('outro-select', {
            bubbles: true,
            detail: { name: radio.name, value: radio.value },
        }));
        checkReady();
    });
});

const submitButton = document.querySelector('.begin-btn');

function checkReady() {
    if (!submitButton) return;
    let ready = true;

    const radioNames = new Set();
    document.querySelectorAll('.option-card input[type="radio"][required], .scale-btn input[type="radio"][required]')
        .forEach(r => radioNames.add(r.name));
    radioNames.forEach(name => {
        if (!document.querySelector(`input[name="${name}"]:checked`)) ready = false;
    });

    document.querySelectorAll('.field-input[required]').forEach(el => {
        if (!el.value.trim()) ready = false;
    });

    submitButton.disabled = !ready;
}

document.querySelectorAll('.field-input').forEach(el => {
    el.addEventListener('input', checkReady);
});

document.addEventListener('DOMContentLoaded', checkReady);

// Conditional follow-up (Experience page): reveal the free-text "describe your
// difficulties" field only when the participant answered "Yes".
document.addEventListener('outro-select', (e) => {
    if (e.detail.name !== 'difficulties') return;
    const group = document.getElementById('difficulties-description-group');
    if (group) group.style.display = e.detail.value === '1' ? 'block' : 'none';
});