(function () {
    var root = document.getElementById('ssk-design-switch');
    if (!root) return;

    var summary = root.querySelector('summary');
    var options = Array.from(root.querySelectorAll('[data-design-option]'));
    var feedback = document.getElementById('ssk-design-feedback');
    var busy = false;

    function closeMenu(returnFocus) {
        root.open = false;
        summary.setAttribute('aria-expanded', 'false');
        if (returnFocus) summary.focus();
    }

    root.addEventListener('toggle', function () {
        summary.setAttribute('aria-expanded', String(root.open));
    });

    summary.addEventListener('click', function (event) {
        if (busy) event.preventDefault();
    });

    document.addEventListener('click', function (event) {
        if (!busy && !root.contains(event.target)) closeMenu(false);
    }, true);

    root.addEventListener('keydown', function (event) {
        if (busy) {
            event.preventDefault();
            return;
        }
        if (event.key === 'Enter') {
            event.stopPropagation();
        } else if (event.key === 'Escape') {
            event.preventDefault();
            closeMenu(true);
        } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Home' || event.key === 'End') {
            event.preventDefault();
            root.open = true;
            var index = options.indexOf(document.activeElement);
            if (event.key === 'Home') index = 0;
            else if (event.key === 'End') index = options.length - 1;
            else if (index < 0) index = options.findIndex(function (option) { return option.getAttribute('aria-checked') === 'true'; });
            else index = (index + (event.key === 'ArrowDown' ? 1 : -1) + options.length) % options.length;
            options[Math.max(0, index)].focus();
        } else if (event.key === 'Tab') {
            setTimeout(function () {
                if (!root.contains(document.activeElement)) closeMenu(false);
            }, 0);
        }
    });

    options.forEach(function (option) {
        option.addEventListener('click', function () {
            if (busy) return;
            var design = option.getAttribute('data-design-option');
            if (design === root.getAttribute('data-design')) {
                closeMenu(true);
                return;
            }
            if (design !== 'classic' && design !== 'new') return;

            try {
                var cookie = root.getAttribute('data-design-cookie');
                document.cookie = cookie + '=' + design + '; Max-Age=31536000; Path=/; SameSite=Lax' + (location.protocol === 'https:' ? '; Secure' : '');
                if (!document.cookie.split('; ').some(function (value) { return value === cookie + '=' + design; })) {
                    throw new Error('Выбор не сохранён');
                }
            } catch (error) {
                feedback.textContent = 'Браузер не сохранил выбор. Разрешите cookie для этого сайта и попробуйте ещё раз.';
                feedback.hidden = false;
                return;
            }

            busy = true;
            root.setAttribute('aria-busy', 'true');
            options.forEach(function (button) { button.disabled = true; });
            feedback.textContent = 'Переключаем оформление…';
            feedback.hidden = false;
            window.location.replace(window.location.pathname + window.location.search);
        });
    });
})();