const navLinks = [...document.querySelectorAll(".nav-links a")];
const nav = document.querySelector(".nav");
const navToggle = document.querySelector(".nav-toggle");
const mobileCards = [...document.querySelectorAll(".mobile-collapsible")];
const sections = navLinks
  .map((link) => document.querySelector(link.getAttribute("href")))
  .filter(Boolean);

const observer = new IntersectionObserver(
  (entries) => {
    const visible = entries
      .filter((entry) => entry.isIntersecting)
      .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];

    if (!visible) {
      return;
    }

    navLinks.forEach((link) => {
      const isCurrent = link.getAttribute("href") === `#${visible.target.id}`;
      if (isCurrent) {
        link.setAttribute("aria-current", "true");
      } else {
        link.removeAttribute("aria-current");
      }
    });
  },
  {
    rootMargin: "-25% 0px -55% 0px",
    threshold: [0.2, 0.45, 0.7]
  }
);

sections.forEach((section) => observer.observe(section));

const mobileMedia = window.matchMedia("(max-width: 720px)");

const applyMobileCardState = () => {
  mobileCards.forEach((card) => {
    const toggle = card.querySelector(".card-toggle");
    const collapsed = mobileMedia.matches && card.dataset.collapsedMobile === "true";

    if (!toggle) {
      return;
    }

    card.dataset.collapsed = collapsed ? "true" : "false";
    toggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
  });
};

if (nav && navToggle) {
  navToggle.addEventListener("click", () => {
    const expanded = navToggle.getAttribute("aria-expanded") === "true";
    navToggle.setAttribute("aria-expanded", String(!expanded));
    nav.dataset.open = expanded ? "false" : "true";
  });

  navLinks.forEach((link) => {
    link.addEventListener("click", () => {
      if (window.matchMedia("(max-width: 720px)").matches) {
        nav.dataset.open = "false";
        navToggle.setAttribute("aria-expanded", "false");
      }
    });
  });
}

mobileCards.forEach((card) => {
  const toggle = card.querySelector(".card-toggle");

  if (!toggle) {
    return;
  }

  toggle.addEventListener("click", () => {
    if (!mobileMedia.matches) {
      return;
    }

    const collapsed = card.dataset.collapsed !== "true";
    card.dataset.collapsed = collapsed ? "true" : "false";
    toggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
  });
});

applyMobileCardState();
mobileMedia.addEventListener("change", applyMobileCardState);

document.querySelectorAll("[data-copy-target]").forEach((button) => {
  button.addEventListener("click", async () => {
    const target = document.getElementById(button.dataset.copyTarget);

    if (!target) {
      return;
    }

    try {
      await navigator.clipboard.writeText(target.textContent);
      const original = button.textContent;
      button.textContent = "Copied";
      window.setTimeout(() => {
        button.textContent = original;
      }, 1400);
    } catch {
      button.textContent = "Copy Failed";
      window.setTimeout(() => {
        button.textContent = "Copy";
      }, 1400);
    }
  });
});