/* ==========================================================================
   Become a Member — multi-step form logic + animated counters.
   No dependencies. Submission posts to a Google Form once wired (GOOGLE_FORM
   below); until then it logs the payload and still shows the success screen.
   ========================================================================== */
(function () {
    /* ---- animated counters ---- */
    var nums = [].slice.call(document.querySelectorAll('.mm-num-value[data-count]'));
    if (nums.length && 'IntersectionObserver' in window) {
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (en) {
                if (!en.isIntersecting) return;
                io.unobserve(en.target);
                var el = en.target, target = parseInt(el.getAttribute('data-count'), 10) || 0, suf = el.getAttribute('data-suffix') || '';
                var start = null, dur = 1400;
                function tick(ts) {
                    if (!start) start = ts;
                    var p = Math.min((ts - start) / dur, 1);
                    el.textContent = Math.floor(p * target).toLocaleString() + (p === 1 ? suf : '');
                    if (p < 1) requestAnimationFrame(tick);
                }
                requestAnimationFrame(tick);
            });
        }, { threshold: 0.4 });
        nums.forEach(function (n) { io.observe(n); });
    }

    /* ---- multi-step form ---- */
    var form = document.querySelector('.ms-form');
    if (!form) return;
    var section = form.closest('.ms-section');
    var success = section.querySelector('.ms-success');
    var progress = form.querySelector('.ms-progress');
    var bar = form.querySelector('.ms-progress-bar');
    var ptext = form.querySelector('.ms-progress-text');
    var alertBox = form.querySelector('.ms-alert');
    var back = form.querySelector('.ms-back');
    var next = form.querySelector('.ms-next');
    var submit = form.querySelector('.ms-submit');
    var STEP = progress.getAttribute('data-step'), OF = progress.getAttribute('data-of');

    var steps = {};
    [].slice.call(form.querySelectorAll('.ms-step')).forEach(function (s) { steps[s.getAttribute('data-step')] = s; });
    var FLOWS = {
        student: ['path', 's-basic', 's-status', 's-intention', 's-interests', 's-city', 's-personal', 's-consent'],
        supporter: ['path', 'p-basic', 'p-support', 'p-message', 'p-consent']
    };
    var state = { path: null, order: ['path'], idx: 0 };

    // single-select radio groups (status, city)
    [].slice.call(form.querySelectorAll('.ms-radios')).forEach(function (group) {
        [].slice.call(group.querySelectorAll('.ms-radio')).forEach(function (btn) {
            btn.addEventListener('click', function () {
                [].slice.call(group.querySelectorAll('.ms-radio')).forEach(function (b) { b.classList.remove('is-selected'); });
                btn.classList.add('is-selected');
                var step = group.closest('.ms-step'), val = btn.getAttribute('data-value');
                [].slice.call(step.querySelectorAll('.ms-cond')).forEach(function (c) { c.hidden = c.getAttribute('data-when') !== val; });
                [].slice.call(step.querySelectorAll('.ms-msg')).forEach(function (m) {
                    var w = m.getAttribute('data-when');
                    m.hidden = !(w === '*any' || w === val);
                });
            });
        });
    });

    // multi-select chip groups (intention, interests, support)
    [].slice.call(form.querySelectorAll('.ms-multi')).forEach(function (group) {
        [].slice.call(group.querySelectorAll('.ms-chip')).forEach(function (chip) {
            chip.addEventListener('click', function () {
                chip.classList.toggle('is-selected');
                var step = group.closest('.ms-step');
                [].slice.call(step.querySelectorAll('.ms-msg')).forEach(function (m) {
                    var sel = group.querySelector('.ms-chip[data-value="' + m.getAttribute('data-when') + '"]');
                    if (sel) m.hidden = !sel.classList.contains('is-selected');
                });
            });
        });
    });

    // path choice
    [].slice.call(form.querySelectorAll('.ms-path')).forEach(function (p) {
        p.addEventListener('click', function () {
            state.path = p.getAttribute('data-path');
            [].slice.call(form.querySelectorAll('.ms-path')).forEach(function (x) { x.classList.remove('is-selected'); });
            p.classList.add('is-selected');
            state.order = FLOWS[state.path];
            state.idx = 1;
            progress.hidden = false;
            render();
        });
    });

    function render() {
        Object.keys(steps).forEach(function (k) { steps[k].hidden = (k !== state.order[state.idx]); });
        var total = state.order.length;
        bar.style.width = ((state.idx + 1) / total * 100) + '%';
        ptext.textContent = STEP + ' ' + (state.idx + 1) + ' ' + OF + ' ' + total;
        back.hidden = state.idx === 0;
        var last = state.idx === total - 1;
        var onPath = state.order[state.idx] === 'path';
        next.hidden = last || onPath;
        submit.hidden = !last;
        if (last) submit.textContent = state.path === 'student' ? submit.getAttribute('data-student') : submit.getAttribute('data-supporter');
        alertBox.hidden = true;
    }

    function validate() {
        var step = steps[state.order[state.idx]], ok = true;
        [].slice.call(step.querySelectorAll('[data-required="1"]')).forEach(function (el) {
            if (el.closest('.ms-cond') && el.closest('.ms-cond').hidden) return;
            if (el.classList.contains('ms-radios')) { if (!el.querySelector('.ms-radio.is-selected')) ok = false; }
            else if (el.type === 'checkbox') { if (!el.checked) ok = false; }
            else if (el.type === 'email') { if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(el.value)) ok = false; }
            else { if (!el.value || !el.value.trim()) ok = false; }
        });
        return ok;
    }

    next.addEventListener('click', function () {
        if (!validate()) { alertBox.hidden = false; return; }
        if (state.idx < state.order.length - 1) { state.idx++; render(); form.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    });
    back.addEventListener('click', function () {
        if (state.idx > 0) { state.idx--; render(); }
    });

    function collect() {
        var d = { type: state.path };
        [].slice.call(form.querySelectorAll('[data-name]')).forEach(function (el) {
            if (el.closest('.ms-cond') && el.closest('.ms-cond').hidden) return;
            var name = el.getAttribute('data-name');
            if (el.classList.contains('ms-radios')) { var s = el.querySelector('.ms-radio.is-selected'); if (s) d[name] = s.getAttribute('data-value'); }
            else if (el.classList.contains('ms-multi')) { var sel = [].slice.call(el.querySelectorAll('.ms-chip.is-selected')).map(function (c) { return c.getAttribute('data-value'); }); if (sel.length) d[name] = sel.join(', '); }
            else if (el.type === 'checkbox') { d[name] = el.checked ? 'yes' : 'no'; }
            else if (el.value && el.value.trim()) { d[name] = el.value.trim(); }
        });
        return d;
    }

    // Wire to a Google Form: set action + entry IDs (see MEMBERSHIP_FORM_SETUP).
    var GOOGLE_FORM = { action: '', fields: {} };
    function sendToForm(d) {
        if (!GOOGLE_FORM.action) { console.log('[MSOS membership] not wired yet, payload:', d); return; }
        var params = new URLSearchParams();
        Object.keys(GOOGLE_FORM.fields).forEach(function (k) { if (d[k]) params.append(GOOGLE_FORM.fields[k], d[k]); });
        if (GOOGLE_FORM.fields.summary) {
            var lines = Object.keys(d).map(function (k) { return k + ': ' + d[k]; }).join('\n');
            params.set(GOOGLE_FORM.fields.summary, lines);
        }
        try { fetch(GOOGLE_FORM.action, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: params.toString() }); } catch (e) { }
    }

    submit.addEventListener('click', function () {
        if (!validate()) { alertBox.hidden = false; return; }
        var d = collect();
        sendToForm(d);
        form.hidden = true;
        var t = success.querySelector('.ms-success-title'), p = success.querySelector('.ms-success-text');
        t.textContent = d.type === 'student' ? t.getAttribute('data-student-title') : t.getAttribute('data-supporter-title');
        p.textContent = d.type === 'student' ? p.getAttribute('data-student-text') : p.getAttribute('data-supporter-text');
        success.hidden = false;
        success.scrollIntoView({ behavior: 'smooth', block: 'center' });
    });

    render();
})();