/**
 * audace/expertise-showcase — front-end controller.
 *
 * Horizontal pin-stack: panels are absolutely stacked in the stage; the going-
 * away panel animates translateX 0→100% (forward) or 100%→0% (back), and the
 * incoming panel sits under or over it depending on direction.
 */
(function () {
    'use strict';

    function init(root) {
        var stage  = root.querySelector('.audace-expertise-stage');
        if (!stage) return;
        var panels = Array.prototype.slice.call(stage.querySelectorAll('.audace-expertise-panel'));
        if (panels.length < 1) return;
        var tabs   = Array.prototype.slice.call(root.querySelectorAll('.audace-expertise-tab'));
        var prev   = root.querySelector('.audace-expertise-arrow--prev');
        var next   = root.querySelector('.audace-expertise-arrow--next');
        var loop   = root.dataset.loop === '1';

        var active = 0;
        layout(active);

        function layout(to) {
            panels.forEach(function (p, i) {
                var on = i === to;
                p.classList.toggle('is-active', on);
                p.setAttribute('aria-hidden', on ? 'false' : 'true');
            });
            tabs.forEach(function (t) {
                var tgt = parseInt(t.getAttribute('data-target'), 10);
                var on  = tgt === to;
                t.classList.toggle('is-active', on);
                t.setAttribute('aria-selected', on ? 'true' : 'false');
            });
            root.dataset.active = String(to);
        }

        function go(toRaw) {
            var n = panels.length;
            var to;
            if (loop) {
                to = ((toRaw % n) + n) % n;
            } else {
                to = Math.max(0, Math.min(n - 1, toRaw));
            }
            if (to === active) return;
            active = to;
            layout(to);
        }

        tabs.forEach(function (t) {
            t.addEventListener('click', function () {
                var target = parseInt(t.getAttribute('data-target'), 10);
                if (!isNaN(target)) go(target);
            });
        });

        function flashPressed(b) {
            b.classList.add('is-pressed');
            setTimeout(function () { b.classList.remove('is-pressed'); }, 300);
        }

        if (prev) prev.addEventListener('click', function () { flashPressed(prev); go(active - 1); });
        if (next) next.addEventListener('click', function () { flashPressed(next); go(active + 1); });

        if (!loop) {
            // Clamp mode: reflect state on arrows.
            var updateArrows = function () {
                if (prev) prev.toggleAttribute('disabled', active === 0);
                if (next) next.toggleAttribute('disabled', active === panels.length - 1);
            };
            updateArrows();
            root.addEventListener('audace-expertise:change', updateArrows);
            // Also patch go to dispatch.
            var origGo = go;
            go = function (i) { origGo(i); updateArrows(); };
        }

        root.addEventListener('keydown', function (e) {
            if (e.target.closest('input, textarea, [contenteditable]')) return;
            if (e.key === 'ArrowRight') { e.preventDefault(); go(active + 1); }
            else if (e.key === 'ArrowLeft')  { e.preventDefault(); go(active - 1); }
        });

        function reflow() { layout(active); }
        window.addEventListener('resize', reflow);
        window.addEventListener('orientationchange', reflow);
    }

    function boot() {
        document.querySelectorAll('.audace-expertise-showcase').forEach(init);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', boot);
    } else {
        boot();
    }
})();
