/* scn01 — Scenarios — v0.3.0 */
(function () {
    'use strict';

    var MAX_PINNED = 5;

    function init() {
        var dataEl = document.getElementById('scn01-data');
        if (!dataEl) return;

        var data;
        try {
            data = JSON.parse(dataEl.textContent);
        } catch (e) {
            return;
        }

        var scenarios = data.scenarios || [];
        if (!scenarios.length) return;

        var cardEl    = document.getElementById('scn01-card');
        var pinnedEl  = document.getElementById('scn01-pinned');
        var prevBtn   = document.getElementById('scn01-prev');
        var nextBtn   = document.getElementById('scn01-next');
        var fieldsEl  = document.getElementById('scn01-pinned-fields');

        var index = 0;
        var pinned = []; // array of scenario ids, in pin order

        function findScenario(id) {
            for (var i = 0; i < scenarios.length; i++) {
                if (scenarios[i].id === id) return scenarios[i];
            }
            return null;
        }

        function renderCard() {
            if (!cardEl) return;
            var s = scenarios[index];
            var isPinned = pinned.indexOf(s.id) !== -1;
            var atMax = pinned.length >= MAX_PINNED && !isPinned;

            cardEl.innerHTML = '';

            var category = document.createElement('div');
            category.className = 'scn01-category';
            category.textContent = s.category;
            cardEl.appendChild(category);

            var text = document.createElement('p');
            text.className = 'scn01-text';
            text.textContent = s.text;
            cardEl.appendChild(text);

            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-sm ' + (isPinned ? 'btn-secondary' : 'btn-outline-primary');
            btn.textContent = isPinned ? 'Selected — click to remove' : 'This is similar to my situation';
            btn.disabled = atMax;
            btn.addEventListener('click', function () {
                togglePin(s.id);
            });
            cardEl.appendChild(btn);

            var counter = document.createElement('div');
            counter.className = 'scn01-counter small text-muted';
            counter.textContent = (index + 1) + ' / ' + scenarios.length;
            cardEl.appendChild(counter);
        }

        function renderPinned() {
            if (!pinnedEl) return;
            pinnedEl.innerHTML = '';

            if (!pinned.length) {
                pinnedEl.style.display = 'none';
            } else {
                pinnedEl.style.display = '';
                var label = document.createElement('div');
                label.className = 'scn01-pinned-label small text-muted';
                label.textContent = 'Selected (' + pinned.length + '/' + MAX_PINNED + '):';
                pinnedEl.appendChild(label);

                pinned.forEach(function (id) {
                    var s = findScenario(id);
                    if (!s) return;
                    var chip = document.createElement('span');
                    chip.className = 'scn01-pin-chip';
                    chip.textContent = s.category;
                    chip.title = s.text;
                    chip.addEventListener('click', function () {
                        togglePin(id);
                    });
                    pinnedEl.appendChild(chip);
                });
            }
        }

        function renderFields() {
            if (!fieldsEl) return;
            fieldsEl.innerHTML = '';
            pinned.forEach(function (id) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'pinned_scenario_ids[]';
                input.value = id;
                fieldsEl.appendChild(input);
            });
        }

        function togglePin(id) {
            var pos = pinned.indexOf(id);
            if (pos !== -1) {
                pinned.splice(pos, 1);
            } else if (pinned.length < MAX_PINNED) {
                pinned.push(id);
            }
            renderPinned();
            renderFields();
            renderCard();
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', function () {
                index = (index - 1 + scenarios.length) % scenarios.length;
                renderCard();
            });
        }
        if (nextBtn) {
            nextBtn.addEventListener('click', function () {
                index = (index + 1) % scenarios.length;
                renderCard();
            });
        }

        renderCard();
        renderPinned();
        renderFields();
    }

    document.addEventListener('DOMContentLoaded', init);
})();