document.addEventListener('DOMContentLoaded', function () {
  const groups = document.querySelectorAll('[data-tabs]');

  groups.forEach(group => {
    const tablist = group.querySelector('[data-tablist]');
    const panelsRoot = group.querySelector('[data-panels]');
    if (!tablist || !panelsRoot) return;

    const tabs = Array.from(tablist.querySelectorAll('[role="tab"][data-tab]'));
    const panels = Array.from(panelsRoot.querySelectorAll('[role="tabpanel"][data-panel]'));
    if (!tabs.length || !panels.length) return;

    const panelMap = new Map(panels.map(p => [p.getAttribute('data-panel'), p]));

    function activate(target, pushHash = true, focusTab = true) {
      if (!panelMap.has(target)) return;
      panelsRoot.setAttribute('aria-busy', 'true');

      // Tabs
      tabs.forEach(tab => {
        const isActive = tab.getAttribute('data-tab') === target;
        tab.setAttribute('aria-selected', String(isActive));
        tab.tabIndex = isActive ? 0 : -1;
      });

      // Panels (both hidden attr + class, for robustness)
      panels.forEach(panel => {
        const match = panel.getAttribute('data-panel') === target;
        panel.classList.toggle('is-active', match);
        if (match) panel.removeAttribute('hidden');
        else panel.setAttribute('hidden', 'hidden');
      });

      // Scoped hash: #groupId=target
      if (pushHash && group.id) {
        const url = new URL(location.href);
        url.hash = `${group.id}=${target}`;
        history.replaceState(null, '', url);
      }

      if (focusTab) {
        const activeTab = tabs.find(t => t.getAttribute('data-tab') === target);
        if (activeTab) activeTab.focus({ preventScroll: true });
      }

      panelsRoot.removeAttribute('aria-busy');
    }

    // Clicks
    tablist.addEventListener('click', e => {
      const btn = e.target.closest('[role="tab"][data-tab]');
      if (!btn) return;
      e.preventDefault();
      activate(btn.getAttribute('data-tab'));
    });

    // Keyboard Left/Right/Home/End
    tablist.addEventListener('keydown', e => {
      const idx = tabs.findIndex(t => t.getAttribute('aria-selected') === 'true');
      if (idx < 0) return;
      let next = null;
      switch (e.key) {
        case 'ArrowLeft': next = (idx - 1 + tabs.length) % tabs.length; break;
        case 'ArrowRight': next = (idx + 1) % tabs.length; break;
        case 'Home': next = 0; break;
        case 'End': next = tabs.length - 1; break;
        default: return;
      }
      e.preventDefault();
      activate(tabs[next].getAttribute('data-tab'));
    });

    // Initial: #groupId=target → else first tab
    let initial = null;
    if (group.id && location.hash.includes(group.id + '=')) {
      const pair = location.hash.replace('#', '').split('&')
        .find(x => x.startsWith(group.id + '='));
      if (pair) initial = pair.split('=')[1];
    }
    if (!initial) initial = tabs[0].getAttribute('data-tab');

    // Prime state
    tabs.forEach(t => {
      const selected = t.getAttribute('data-tab') === initial;
      t.setAttribute('aria-selected', String(selected));
      t.tabIndex = selected ? 0 : -1;
    });
    panels.forEach(p => {
      const match = p.getAttribute('data-panel') === initial;
      p.classList.toggle('is-active', match);
      if (match) p.removeAttribute('hidden');
      else p.setAttribute('hidden', 'hidden');
    });
  });
});