(function () {
  const tabButtons = document.querySelectorAll('[data-spread-tab]');
  const panels = document.querySelectorAll('[data-spread-panel]');

  function activateTab(tabId, pushHash) {
    tabButtons.forEach((btn) => {
      const active = btn.getAttribute('data-spread-tab') === tabId;
      btn.classList.toggle('active', active);
      btn.setAttribute('aria-selected', active ? 'true' : 'false');
    });
    panels.forEach((panel) => {
      const show = panel.getAttribute('data-spread-panel') === tabId;
      panel.hidden = !show;
      panel.classList.toggle('active', show);
    });
    if (pushHash !== false) {
      history.replaceState(null, '', '#' + tabId);
    }
    const sub = document.getElementById(window.location.hash.slice(1));
    if (sub && sub.closest('[data-spread-panel="' + tabId + '"]')) {
      window.setTimeout(() => sub.scrollIntoView({ behavior: 'smooth', block: 'start' }), 60);
    }
  }

  tabButtons.forEach((btn) => {
    btn.addEventListener('click', () => activateTab(btn.getAttribute('data-spread-tab')));
  });

  document.querySelectorAll('.wiki-nav a[href^="#"]').forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const id = link.getAttribute('href').slice(1);
      const panel = document.querySelector('[data-spread-panel="' + id + '"]');
      if (panel) {
        activateTab(id);
      } else {
        const el = document.getElementById(id);
        const tabId = el?.closest('[data-spread-panel]')?.getAttribute('data-spread-panel');
        if (tabId) activateTab(tabId);
        if (el) window.setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 80);
      }
    });
  });

  const hash = window.location.hash.slice(1);
  const tabFromHash =
    hash && document.querySelector('[data-spread-panel="' + hash + '"]')
      ? hash
      : hash && document.getElementById(hash)
        ? document.getElementById(hash).closest('[data-spread-panel]')?.getAttribute('data-spread-panel')
        : null;

  activateTab(tabFromHash || 'overview', false);

  if (hash && document.getElementById(hash)) {
    window.setTimeout(() => document.getElementById(hash).scrollIntoView({ behavior: 'smooth', block: 'start' }), 120);
  }
})();