"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

export function ClientInit() {
  const pathname = usePathname();

  useEffect(() => {
    const header = document.querySelector<HTMLElement>(".site-header");
    if (!header) return;
    const main = document.querySelector<HTMLElement>("main[data-transparent-header]");
    const hasTransparentHero = main?.dataset.transparentHeader === "true";
    const update = () => {
      const scrolled = window.scrollY > 40;
      if (!hasTransparentHero) header.classList.add("is-solid");
      else header.classList.toggle("is-solid", scrolled);
    };
    update();
    window.addEventListener("scroll", update, { passive: true });
    return () => window.removeEventListener("scroll", update);
  }, [pathname]);

  useEffect(() => {
    const toggle = document.querySelector<HTMLElement>(".menu-toggle");
    const menu = document.querySelector<HTMLElement>(".mobile-menu");
    if (!toggle || !menu) return;
    const open = () => {
      // Anchor the circular clip-path reveal at the toggle button's centre,
      // so the menu visibly bursts out from where the user tapped.
      const rect = toggle.getBoundingClientRect();
      const ox = ((rect.left + rect.width / 2) / window.innerWidth) * 100;
      const oy = ((rect.top + rect.height / 2) / window.innerHeight) * 100;
      menu.style.setProperty("--menu-ox", `${ox}%`);
      menu.style.setProperty("--menu-oy", `${oy}%`);
      menu.classList.add("is-open");
      menu.setAttribute("aria-hidden", "false");
      document.body.style.overflow = "hidden";
    };
    const close = () => {
      menu.classList.remove("is-open");
      menu.setAttribute("aria-hidden", "true");
      document.body.style.overflow = "";
    };
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape" && menu.classList.contains("is-open")) close();
    };
    toggle.addEventListener("click", open);
    const closeBtn = menu.querySelector(".close");
    closeBtn?.addEventListener("click", close);
    const links = Array.from(menu.querySelectorAll("a"));
    links.forEach((a) => a.addEventListener("click", close));
    document.addEventListener("keydown", onKey);
    return () => {
      toggle.removeEventListener("click", open);
      closeBtn?.removeEventListener("click", close);
      links.forEach((a) => a.removeEventListener("click", close));
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [pathname]);

  useEffect(() => {
    const normalize = (s: string) => s.replace(/\/$/, "") || "/";
    const here = normalize(pathname);
    document.querySelectorAll<HTMLAnchorElement>("[data-nav]").forEach((a) => {
      const href = normalize(a.getAttribute("href") || "");
      a.classList.toggle("is-active", href === here);
    });
  }, [pathname]);

  return null;
}