(() => {
  "use strict";

  const toggle = document.querySelector(".nav-toggle");
  const navigation = document.querySelector("#primary-nav");

  if (toggle instanceof HTMLButtonElement && navigation instanceof HTMLElement) {
    toggle.addEventListener("click", () => {
      const isOpen = toggle.getAttribute("aria-expanded") === "true";
      toggle.setAttribute("aria-expanded", String(!isOpen));
      navigation.dataset.open = String(!isOpen);
      const label = toggle.querySelector(".sr-only");
      if (label instanceof HTMLElement) {
        label.textContent = isOpen ? "Open navigation" : "Close navigation";
      }
    });

    navigation.addEventListener("click", (event) => {
      if (event.target instanceof HTMLAnchorElement) {
        toggle.setAttribute("aria-expanded", "false");
        navigation.dataset.open = "false";
      }
    });
  }

  const workflow = document.querySelector("[data-workflow]");
  if (!(workflow instanceof HTMLElement)) {
    return;
  }

  const tabs = Array.from(workflow.querySelectorAll("[data-workflow-tab]"));
  const panels = Array.from(workflow.querySelectorAll("[data-workflow-panel]"));

  const selectTab = (tab) => {
    if (!(tab instanceof HTMLButtonElement)) {
      return;
    }
    const step = tab.dataset.workflowTab;
    tabs.forEach((candidate) => {
      if (candidate instanceof HTMLButtonElement) {
        const selected = candidate === tab;
        candidate.setAttribute("aria-selected", String(selected));
        candidate.tabIndex = selected ? 0 : -1;
      }
    });
    panels.forEach((panel) => {
      if (panel instanceof HTMLElement) {
        panel.hidden = panel.dataset.workflowPanel !== step;
      }
    });
  };

  tabs.forEach((tab, index) => {
    if (!(tab instanceof HTMLButtonElement)) {
      return;
    }
    tab.addEventListener("click", () => selectTab(tab));
    tab.addEventListener("keydown", (event) => {
      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
        return;
      }
      event.preventDefault();
      let targetIndex = index;
      if (event.key === "ArrowLeft") targetIndex = (index - 1 + tabs.length) % tabs.length;
      if (event.key === "ArrowRight") targetIndex = (index + 1) % tabs.length;
      if (event.key === "Home") targetIndex = 0;
      if (event.key === "End") targetIndex = tabs.length - 1;
      const target = tabs[targetIndex];
      selectTab(target);
      if (target instanceof HTMLButtonElement) target.focus();
    });
  });
})();