document.addEventListener("DOMContentLoaded", () => {
  const accordionLists = document.querySelectorAll("[data-accordion-list]");

  if (!accordionLists.length) return;

  const reduceMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)",
  ).matches;

  accordionLists.forEach((list, listIndex) => {
    const items = [...list.querySelectorAll(":scope > [data-accordion-item]")];

    if (!items.length) return;

    const getParts = (item) => {
      const header = item.querySelector("[data-accordion-header]");

      const panel = item.querySelector("[data-accordion-text-wrap]");

      return { header, panel };
    };

    const closeItem = (item, animate = true) => {
      const { header, panel } = getParts(item);

      if (!header || !panel) return;

      item.classList.remove("is-open");
      header.setAttribute("aria-expanded", "false");

      if (!animate || reduceMotion) {
        panel.hidden = true;
        panel.style.height = "0px";
        return;
      }

      panel.style.height = `${panel.scrollHeight}px`;

      requestAnimationFrame(() => {
        panel.style.height = "0px";
      });

      panel.addEventListener(
        "transitionend",
        (event) => {
          if (event.propertyName !== "height") return;

          if (header.getAttribute("aria-expanded") !== "false") {
            return;
          }

          panel.hidden = true;
        },
        { once: true },
      );
    };

    const openItem = (item) => {
      const { header, panel } = getParts(item);

      if (!header || !panel) return;

      item.classList.add("is-open");
      header.setAttribute("aria-expanded", "true");

      panel.hidden = false;

      if (reduceMotion) {
        panel.style.height = "auto";
        return;
      }

      panel.style.height = "0px";

      requestAnimationFrame(() => {
        panel.style.height = `${panel.scrollHeight}px`;
      });

      panel.addEventListener(
        "transitionend",
        (event) => {
          if (event.propertyName !== "height") return;

          if (header.getAttribute("aria-expanded") !== "true") {
            return;
          }

          panel.style.height = "auto";
        },
        { once: true },
      );
    };

    items.forEach((item, itemIndex) => {
      const accordionNumber = item.querySelector("[data-accordion-number]");

      if (accordionNumber) {
        accordionNumber.textContent = String(itemIndex + 1).padStart(2, "0");
      }

      const { header, panel } = getParts(item);

      if (!header || !panel) return;

      const uniquePrefix = `accordion-${listIndex + 1}-${itemIndex + 1}`;

      const headerId = header.id || `${uniquePrefix}-header`;

      const panelId = panel.id || `${uniquePrefix}-panel`;

      const isInitiallyOpen = item.classList.contains("is-open");

      // Header
      header.id = headerId;
      header.setAttribute("role", "button");
      header.setAttribute("tabindex", "0");
      header.setAttribute("aria-controls", panelId);
      header.setAttribute("aria-expanded", String(isInitiallyOpen));

      // Panel
      panel.id = panelId;
      panel.setAttribute("role", "region");
      panel.setAttribute("aria-labelledby", headerId);

      if (isInitiallyOpen) {
        panel.hidden = false;
        panel.style.height = "auto";
      } else {
        panel.hidden = true;
        panel.style.height = "0px";
      }

      const toggleItem = () => {
        const isOpen = header.getAttribute("aria-expanded") === "true";

        items.forEach((otherItem) => {
          if (otherItem !== item) {
            closeItem(otherItem);
          }
        });

        if (isOpen) {
          closeItem(item);
        } else {
          openItem(item);
        }
      };

      header.addEventListener("click", toggleItem);

      header.addEventListener("keydown", (event) => {
        const isActivationKey =
          event.key === "Enter" ||
          event.key === " " ||
          event.key === "Spacebar";

        if (!isActivationKey) return;

        event.preventDefault();
        toggleItem();
      });
    });
  });
});