"use client";
import * as React from "react";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

interface TocItem {
  id: string;
  text: string;
  level: 2 | 3;
}

/**
 * "On this page" table of contents. Reads h2/h3 headings from the rendered
 * `[data-docs-article]` element and highlights the section currently in view.
 */
export function DocsToc({ className }: { className?: string }) {
  const pathname = usePathname();
  const [items, setItems] = React.useState<TocItem[]>([]);
  const [active, setActive] = React.useState<string | null>(null);

  React.useEffect(() => {
    // The article is rendered by a sibling server component; scan it once the frame has painted
    // so the DOM is complete, and subscribe to scroll position through an IntersectionObserver.
    let observer: IntersectionObserver | null = null;
    const frame = window.requestAnimationFrame(() => {
      const article = document.querySelector<HTMLElement>("[data-docs-article]");
      const headings = article ? Array.from(article.querySelectorAll<HTMLHeadingElement>("h2[id], h3[id]")) : [];
      const next: TocItem[] = headings.map((h) => ({
        id: h.id,
        text: (h.textContent ?? "").replace(/#\s*$/, "").trim(),
        level: h.tagName === "H2" ? 2 : 3,
      }));
      setItems(next);
      setActive(next[0]?.id ?? null);
      if (!headings.length) return;

      const visible = new Map<string, number>();
      observer = new IntersectionObserver(
        (entries) => {
          for (const e of entries) {
            if (e.isIntersecting) visible.set(e.target.id, e.boundingClientRect.top);
            else visible.delete(e.target.id);
          }
          if (visible.size) {
            const top = [...visible.entries()].sort((a, b) => a[1] - b[1])[0]![0];
            setActive(top);
          } else {
            // Nothing intersecting: pick the last heading above the viewport.
            const above = headings.filter((h) => h.getBoundingClientRect().top < 120);
            if (above.length) setActive(above[above.length - 1]!.id);
          }
        },
        { rootMargin: "-80px 0px -60% 0px", threshold: [0, 1] },
      );
      headings.forEach((h) => observer!.observe(h));
    });
    return () => {
      window.cancelAnimationFrame(frame);
      observer?.disconnect();
    };
  }, [pathname]);

  if (items.length < 2) return null;

  return (
    <nav aria-label="On this page" className={cn("text-[12.5px]", className)}>
      <div className="mb-2 text-[11.5px] font-semibold uppercase tracking-wide text-fg-subtle">On this page</div>
      <ul className="space-y-px border-l border-border">
        {items.map((it) => (
          <li key={it.id}>
            <a
              href={`#${it.id}`}
              onClick={() => setActive(it.id)}
              className={cn(
                "-ml-px block border-l py-1 pr-2 leading-snug transition-colors",
                it.level === 3 ? "pl-6" : "pl-3",
                active === it.id ? "border-accent font-medium text-fg" : "border-transparent text-fg-muted hover:border-border-strong hover:text-fg",
              )}
            >
              {it.text}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}