document.body.classList.add('support-nav-light');

(function () {
  var bindTabs = function (containerSelector, tabSelector, panelSelector, activeClass) {
    var containers = Array.prototype.slice.call(document.querySelectorAll(containerSelector));

    containers.forEach(function (container) {
      var tabs = Array.prototype.slice.call(container.querySelectorAll(tabSelector));
      if (!tabs.length) return;

      var panelScope = container.parentElement || document;
      var panels = Array.prototype.slice.call(panelScope.querySelectorAll(panelSelector));

      tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
          var targetId = tab.getAttribute('data-target');
          tabs.forEach(function (item) {
            item.classList.remove(activeClass);
            if (item.hasAttribute('aria-selected')) {
              item.setAttribute('aria-selected', 'false');
            }
          });
          panels.forEach(function (panel) {
            var matched = panel.id === targetId;
            panel.classList.toggle(activeClass, matched);
            if (matched) {
              panel.removeAttribute('hidden');
            } else {
              panel.setAttribute('hidden', 'hidden');
            }
          });
          tab.classList.add(activeClass);
          if (tab.hasAttribute('aria-selected')) {
            tab.setAttribute('aria-selected', 'true');
          }
        });
      });
    });
  };

  bindTabs('.support-detail-main', '.support-detail-tab', '.support-detail-panel', 'is-active');

  Array.prototype.slice.call(document.querySelectorAll('.support-detail-panel')).forEach(function (panel) {
    var subtabWrap = panel.querySelector('.support-detail-subtabs');
    if (!subtabWrap) return;

    var subtabs = Array.prototype.slice.call(subtabWrap.querySelectorAll('.support-detail-subtab'));
    var subpanels = Array.prototype.slice.call(panel.querySelectorAll('.support-detail-subpanel'));

    subtabs.forEach(function (subtab) {
      subtab.addEventListener('click', function () {
        var targetId = subtab.getAttribute('data-target');
        subtabs.forEach(function (item) {
          item.classList.remove('is-active');
        });
        subpanels.forEach(function (subpanel) {
          var matched = subpanel.id === targetId;
          subpanel.classList.toggle('is-active', matched);
          if (matched) {
            subpanel.removeAttribute('hidden');
          } else {
            subpanel.setAttribute('hidden', 'hidden');
          }
        });
        subtab.classList.add('is-active');
      });
    });
  });

  var setupCollapsible = function (root) {
    if (!root) return;
    var groups = Array.prototype.slice.call(root.querySelectorAll('[data-collapsible]'));

    groups.forEach(function (group) {
      var visibleCount = parseInt(group.getAttribute('data-visible-count') || '0', 10);
      var items = Array.prototype.slice.call(group.children).filter(function (node) {
        return node.nodeType === 1;
      });
      var wrap = group.nextElementSibling;
      var button = wrap && wrap.classList.contains('support-more-wrap') ? wrap.querySelector('.support-more-btn') : null;

      items.forEach(function (item, index) {
        item.classList.toggle('support-collapsed-item', visibleCount > 0 && index >= visibleCount);
      });

      if (button && wrap) {
        var hasMore = visibleCount > 0 && items.length > visibleCount;
        var moreText = button.getAttribute('data-more-text') || '查看更多';
        var lessText = button.getAttribute('data-less-text') || '收起更多';
        wrap.hidden = !hasMore;
        button.textContent = moreText;
        button.onclick = function () {
          var expanded = group.classList.toggle('is-expanded');
          items.forEach(function (item, index) {
            if (visibleCount > 0 && index >= visibleCount) {
              item.classList.toggle('support-collapsed-item', !expanded);
            }
          });
          button.textContent = expanded ? lessText : moreText;
        };
      }
    });
  };

  Array.prototype.slice.call(document.querySelectorAll('.support-detail-panel')).forEach(function (panel) {
    setupCollapsible(panel);
  });
})();