{{--
    Tutorial panel — CSS + JS only.
    Shows/hides the Tutorial Guide nav item; clicking opens the middle-bar with
    the tutorial iframe (same mechanism as the Notifications panel).
--}}
<style>
/* ── Tutorial content inside the middle-bar ──────────────────────────── */
.tut-mp-wrap {
    /* bleed out of .middle-bar .content padding (10px 20px 20px 20px) */
    margin: -10px -20px -20px -20px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
}

.tut-mp-langbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid #e8e9ea;
    flex-shrink: 0;
    background: #fff;
}
.tut-mp-langbar-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9a9ea6;
    margin-right: 4px;
}

.tut-lang-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #e0e1e3;
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #6f7782;
    cursor: pointer;
    transition: background .1s, color .1s, border-color .1s;
}
.tut-lang-pill:hover { background: rgba(55,53,47,.06); color: #2c2e35; }
.tut-lang-pill.active {
    background: rgba(13,110,253,.1);
    border-color: rgba(13,110,253,.3);
    color: #0d6efd;
}

.tut-mp-iframe {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 0;
    display: block;
}

/* Dark mode */
.mode-dark .tut-mp-langbar { background: var(--bs-body-bg); border-bottom-color: rgba(255,255,255,.1); }
.mode-dark .tut-lang-pill  { border-color: rgba(255,255,255,.15); color: #8b8f99; }
.mode-dark .tut-lang-pill:hover { background: rgba(255,255,255,.07); color: #d0d2d9; }
</style>

<script>
(function () {
    var LS_LOCALE = 'tut_locale';
    var currentLocale = 'en';
    var baseIframeUrl  = null;

    function getLocale() {
        try { return localStorage.getItem(LS_LOCALE) || 'en'; } catch(e) { return 'en'; }
    }

    function buildUrl(locale) {
        if (!baseIframeUrl) return null;
        try {
            var u = new URL(baseIframeUrl, location.origin);
            u.searchParams.set('locale', locale);
            return u.toString();
        } catch(e) { return baseIframeUrl; }
    }

    function setLocale(locale) {
        currentLocale = locale;
        try { localStorage.setItem(LS_LOCALE, locale); } catch(e) {}
        var iframe = document.getElementById('tutMpIframe');
        if (iframe) iframe.src = buildUrl(locale);
        updatePills();
    }

    function updatePills() {
        document.querySelectorAll('.tut-lang-pill[data-tut-locale]').forEach(function(btn) {
            btn.classList.toggle('active', btn.dataset.tutLocale === currentLocale);
        });
    }

    function pill(locale, label) {
        var active = currentLocale === locale ? ' active' : '';
        return '<button class="tut-lang-pill' + active + '" data-tut-locale="' + locale + '">' + label + '</button>';
    }

    function buildPanelHtml() {
        var url = buildUrl(currentLocale) || 'about:blank';
        return '<div class="tut-mp-wrap">'
            + '<div class="tut-mp-langbar">'
            + '<span class="tut-mp-langbar-label">Language</span>'
            + pill('en', 'EN — English')
            + pill('ja', 'JA — 日本語')
            + '</div>'
            + '<iframe id="tutMpIframe" class="tut-mp-iframe" src="' + url + '"></iframe>'
            + '</div>';
    }

    /* ── tutorial-specific panel state ──────────────────────────────────── */
    function enterTutorialMode() {
        document.body.classList.add('tut-guide-open');
        /* prevent click-outside-to-close by marking page-container as "inside" */
        var main = document.querySelector('main.page-container');
        if (main) main.setAttribute('middle-bar-control', 'element');
    }

    function exitTutorialMode() {
        document.body.classList.remove('tut-guide-open');
        var main = document.querySelector('main.page-container');
        if (main) main.removeAttribute('middle-bar-control');
    }

    /* delegate lang-pill clicks (works even after sidebar.loadHtml replaces content) */
    document.addEventListener('click', function(e) {
        var p = e.target.closest('.tut-lang-pill[data-tut-locale]');
        if (p) setLocale(p.dataset.tutLocale);
    });

    document.addEventListener('DOMContentLoaded', function() {
        currentLocale = getLocale();

        /* show the nav item only when this page has a tutorial */
        var panelContent = document.getElementById('tutPanelContent');
        var navItem      = document.getElementById('tutGuideNavItem');
        if (!panelContent || !navItem) return;

        navItem.style.display = '';
        baseIframeUrl = panelContent.dataset.iframeUrl;

        $(function() {
            /* open/close tutorial panel */
            $('.tutorial-guide-menu-item').on('click', function() {
                var sidebar = new Sidebar();
                if (sidebar.showed()) {
                    exitTutorialMode();
                    sidebar.hide();
                } else {
                    sidebar.loadHtml(buildPanelHtml());
                    enterTutorialMode();
                }
            });

            /* X close button → exit tutorial mode */
            $(document).on('click', '[middle-bar-control="close"]', function() {
                exitTutorialMode();
            });

            /* Notifications opens → exit tutorial mode (it replaces the panel) */
            $(document).on('click', '.notifications-menu-item', function() {
                exitTutorialMode();
            });
        });
    });
})();
</script>