(function () {
    var DESIGN_WIDTH = 375;
    var app = document.getElementById('appViewport');
    var page = app ? app.querySelector('.page') : null;
    var tabs = app
        ? Array.prototype.slice.call(app.querySelectorAll('[data-tab-target]'))
        : [];
    var panels = app
        ? Array.prototype.slice.call(app.querySelectorAll('[data-tab-panel]'))
        : [];
    var relationTabs = app
        ? Array.prototype.slice.call(
              app.querySelectorAll('[data-relation-target]')
          )
        : [];
    var rightsTable = app ? app.querySelector('.rights-table') : null;
    var backButton = app ? app.querySelector('.back-button') : null;

    function updateScale() {
        var available = Math.max(320, window.innerWidth || DESIGN_WIDTH);
        var scale = Math.min(1, available / DESIGN_WIDTH);
        document.documentElement.style.setProperty(
            '--app-scale',
            String(scale)
        );
        if (app) {
            document.body.style.minHeight = app.offsetHeight * scale + 'px';
        }
    }

    function setActiveTab(nextTab) {
        var tab = nextTab === 'rights' ? 'rights' : 'note';
        app.setAttribute('data-active-tab', tab);
        if (page) {
            page.classList.toggle('note-page', tab === 'note');
            page.classList.toggle('rights-page', tab === 'rights');
        }
        tabs.forEach(function (button) {
            var active = button.getAttribute('data-tab-target') === tab;
            button.setAttribute('aria-selected', active ? 'true' : 'false');
        });
        panels.forEach(function (panel) {
            panel.hidden = panel.getAttribute('data-tab-panel') !== tab;
        });
        window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
        updateScale();
    }

    function setActiveRelation(nextRelation) {
        var relation =
            nextRelation === 'brother' || nextRelation === 'sisters'
                ? nextRelation
                : 'cp';
        if (rightsTable) {
            rightsTable.setAttribute('data-active-relation', relation);
        }
        relationTabs.forEach(function (button) {
            var active =
                button.getAttribute('data-relation-target') === relation;
            button.classList.toggle('is-active', active);
            button.setAttribute('aria-selected', active ? 'true' : 'false');
        });
    }

    function closePage() {
        if (window.HyAppBridge && window.HyAppBridge.back) {
            window.HyAppBridge.back();
            return;
        }
        if (
            window.WebViewJavascriptBridge &&
            window.WebViewJavascriptBridge.callHandler
        ) {
            window.WebViewJavascriptBridge.callHandler('close');
            return;
        }
        if (window.history.length > 1) {
            window.history.back();
        }
    }

    function bindEvents() {
        tabs.forEach(function (button) {
            button.addEventListener('click', function () {
                setActiveTab(button.getAttribute('data-tab-target'));
            });
        });
        relationTabs.forEach(function (button) {
            button.addEventListener('click', function () {
                setActiveRelation(button.getAttribute('data-relation-target'));
            });
        });
        if (backButton) {
            backButton.addEventListener('click', closePage);
        }
        window.addEventListener('resize', updateScale);
        window.addEventListener('orientationchange', updateScale);
    }

    function init() {
        bindEvents();
        setActiveRelation('cp');
        setActiveTab('note');
        updateScale();
    }

    window.HyCpRules = {
        setActiveTab: setActiveTab,
        setActiveRelation: setActiveRelation,
    };

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