/**
 * FAQ Tabs module — tabbed FAQ sections, behaviour keyed on attributes
 * v1.0.0
 *
 * The FAQ section built for the pricing FAQ page (AW-20) is a tab bar over
 * panels of accordions. Its behaviour used to live in page-level custom code
 * and in class-keyed CSS, so every copy of the section broke: the tab script
 * stays behind in the source page's settings, and a pasted copy gets renamed
 * classes (`section_faq-accordion-arrow-2`) that the arrow rule no longer
 * matches (AW-109). This module replaces both, keyed on attributes only:
 *
 *   [js-release-tab]                  section wrapper (any number per page)
 *     [role="tab"]                    tab buttons, matched to panels by order
 *     [role="tabpanel"]               panels, only the active one is shown
 *       [fs-accordion-element=arrow]  accordion arrow: brand colour, flips open
 *
 * - First tab active on load, so only the first panel's first question shows
 *   open (Haufe's accordion.js opens question 1 of every panel).
 * - Clicking a tab scrolls to that panel's first question, below the sticky
 *   nav and the sticky tab menu.
 * - Arrow colour is `var(--brand)`, which the page's product theme sets
 *   (Content Collection red, default purple).
 * - The accordion itself stays with Haufe's accordion.js (site footer).
 *
 * Load once from the SITE footer with <script defer src>. Pages without the
 * section are untouched.
 *
 * Source: ~/Development/haufe/ds-faq-tabs · Vault: Dev/Modules/Digital-Suite/faq-tabs
 */
(function () {
  'use strict';
  var VERSION = '1.0.0';
  if (window.HaufeFaqTabs) return;

  var WRAPPER = '[js-release-tab]';
  var READY = 'data-faq-tabs-ready';
  var ARROW = WRAPPER + ' [fs-accordion-element="arrow"]';
  var CSS =
    ARROW + '{color:var(--brand);transition:transform .2s}' +
    ARROW + '.is-active-accordion{transform:rotate(180deg)}' +
    WRAPPER + ' [role="tab"]{cursor:pointer}';

  function injectStyles() {
    if (document.getElementById('faq-tabs-styles')) return;
    var style = document.createElement('style');
    style.id = 'faq-tabs-styles';
    style.textContent = CSS;
    document.head.appendChild(style);
  }

  /**
   * How far below the viewport top the target has to land so nothing pinned
   * covers it. Measured, not configured: the bar that covers the question
   * differs by breakpoint (desktop: the site nav only, the sticky tab column
   * sits BESIDE the questions; mobile: the taller nav with its "Menü"
   * dropdown, which --h-nav-height underestimates). Counts every fixed
   * element, and every sticky one whose container holds the target, that
   * overlaps the target's column.
   */
  function stickyOffset(target) {
    var t = target.getBoundingClientRect();
    var bottom = 0;
    Array.prototype.forEach.call(document.body.querySelectorAll('*'), function (el) {
      var cs = getComputedStyle(el);
      if (cs.position !== 'fixed' && cs.position !== 'sticky') return;
      if (cs.display === 'none' || cs.visibility === 'hidden') return;
      var r = el.getBoundingClientRect();
      if (!r.height || r.right <= t.left || r.left >= t.right) return;
      var pinnedBottom;
      if (cs.position === 'fixed') {
        if (r.top > 1) return;
        pinnedBottom = r.bottom;
      } else {
        if (!el.parentElement || !el.parentElement.contains(target)) return;
        pinnedBottom = (parseFloat(cs.top) || 0) + r.height;
      }
      if (pinnedBottom < window.innerHeight / 2) bottom = Math.max(bottom, pinnedBottom);
    });
    return bottom + 16;
  }

  function init(wrapper) {
    if (wrapper.hasAttribute(READY)) return;
    var tabs = Array.prototype.slice.call(wrapper.querySelectorAll('[role="tab"]'));
    var panels = Array.prototype.slice.call(wrapper.querySelectorAll('[role="tabpanel"]'));
    if (!tabs.length || !panels.length) return;
    wrapper.setAttribute(READY, VERSION);

    function activate(index) {
      tabs.forEach(function (tab, i) {
        var active = i === index;
        tab.classList.toggle('w--current', active);
        tab.setAttribute('aria-selected', active ? 'true' : 'false');
        tab.setAttribute('tabindex', active ? '0' : '-1');
      });
      panels.forEach(function (panel, i) {
        var active = i === index;
        panel.classList.toggle('is-active', active);
        panel.style.display = active ? 'block' : 'none';
        if (active) reopen(panel);
      });
    }

    /* accordion.js measures its open questions at load, while every panel but
       the first is display:none, so they are flagged open at max-height 0 —
       arrow flipped, answer invisible, first click closes it. Re-measure once
       the panel is visible. */
    function reopen(panel) {
      var items = panel.querySelectorAll('[fs-accordion-element="accordion"].is-active-accordion');
      Array.prototype.forEach.call(items, function (item) {
        var content = item.querySelector('[fs-accordion-element="content"]');
        if (content && content.getBoundingClientRect().height < 1) {
          content.style.maxHeight = content.scrollHeight + 'px';
        }
      });
    }

    function scrollToFirstQuestion(index) {
      var panel = panels[index];
      if (!panel) return;
      var target = panel.querySelector('[fs-accordion-element="accordion"]') || panel;
      var top = target.getBoundingClientRect().top + window.scrollY - stickyOffset(target);
      window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
    }

    /* Not every panel's accordion group opens its first question by itself
       (copies made in the Designer may lack fs-accordion-initial). Open it
       through accordion.js's own trigger, so its state stays consistent. */
    function openFirstQuestion(panel) {
      if (panel.querySelector('[fs-accordion-element="accordion"].is-active-accordion')) return;
      var trigger = panel.querySelector('[fs-accordion-element="trigger"]');
      if (trigger) trigger.click();
    }

    function select(index, focus) {
      activate(index);
      openFirstQuestion(panels[index]);
      scrollToFirstQuestion(index);
      if (focus) tabs[index].focus({ preventScroll: true });
    }

    tabs.forEach(function (tab, i) {
      tab.addEventListener('click', function (e) {
        e.preventDefault();
        select(i, false);
      });
      tab.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          select(i, false);
        } else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
          e.preventDefault();
          var next = (i + (e.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length;
          activate(next);
          tabs[next].focus();
        }
      });
    });

    activate(0);
  }

  function run() {
    injectStyles();
    Array.prototype.forEach.call(document.querySelectorAll(WRAPPER), init);
  }

  window.HaufeFaqTabs = { version: VERSION, init: run };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run);
  else run();
})();