Table of contents

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export type TocItem = {
  /** The id of the heading on the page. */
  id: string;
  label: string;
  /** Level 3 items indent under the level 2 above them. */
  level?: 2 | 3;
};

type TableOfContentsProps = Omit<React.ComponentProps<"nav">, "children" | "title"> & {
  /** The headings, in page order. */
  items: TocItem[];
  /** Small heading above the list. Pass null to hide it. */
  title?: string | null;
  /** Controlled active id. Omit to let the scroll spy decide. */
  activeId?: string;
  /** Pixels from the top of the scroll area before a heading counts as active, for example a sticky header. */
  offset?: number;
  /** A scrolling element to spy on and scroll, instead of the window. */
  root?: React.RefObject<HTMLElement | null>;
};

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

/**
 * An "On this page" list that follows the reader with IntersectionObserver.
 * The active item gets a 1px foreground bar on the left, nothing else is coloured.
 */
export function TableOfContents({
  items,
  title = "On this page",
  activeId,
  offset = 0,
  root,
  className,
  ...props
}: TableOfContentsProps) {
  const spied = useScrollSpy(items, root, offset, activeId === undefined);
  const active = activeId ?? spied;

  const jump = (event: React.MouseEvent<HTMLAnchorElement>, id: string) => {
    const scroller = root?.current;
    if (!scroller) return;
    const heading = scroller.querySelector<HTMLElement>(`#${CSS.escape(id)}`);
    if (!heading) return;
    event.preventDefault();
    const top =
      scroller.scrollTop + heading.getBoundingClientRect().top - scroller.getBoundingClientRect().top - offset;
    scroller.scrollTo({ top, behavior: reducedMotion() ? "auto" : "smooth" });
  };

  return (
    <nav
      data-slot="table-of-contents"
      aria-label={title || "On this page"}
      className={cn("text-sm", className)}
      {...props}
    >
      {title && <p className="m-0 mb-3 font-mono text-xs tracking-wide text-muted-foreground uppercase">{title}</p>}
      <ul className="m-0 list-none border-l p-0">
        {items.map((item) => {
          const isActive = item.id === active;
          return (
            <li key={item.id}>
              <a
                href={`#${item.id}`}
                aria-current={isActive ? "location" : undefined}
                onClick={(event) => jump(event, item.id)}
                className={cn(
                  "-ml-px block border-l border-transparent py-1 pl-3 transition-colors duration-100 ease-out outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50",
                  item.level === 3 && "pl-6",
                  isActive ? "border-foreground text-foreground" : "text-muted-foreground",
                )}
              >
                {item.label}
              </a>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

/** The first heading inside the top 40% of the scroll area wins. When none is there, the last winner stays. */
function useScrollSpy(items: TocItem[], root: TableOfContentsProps["root"], offset: number, enabled: boolean) {
  const [active, setActive] = React.useState<string | undefined>(undefined);
  const key = items.map((item) => item.id).join("\n");

  React.useEffect(() => {
    if (!enabled || !key) return;
    const ids = key.split("\n");
    const scope: ParentNode = root?.current ?? document;
    const headings = ids
      .map((id) => scope.querySelector<HTMLElement>(`#${CSS.escape(id)}`))
      .filter((el): el is HTMLElement => el !== null);
    if (headings.length === 0) return;

    const visible = new Set<string>();
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) visible.add(entry.target.id);
          else visible.delete(entry.target.id);
        }
        const first = ids.find((id) => visible.has(id));
        if (first) setActive(first);
      },
      { root: root?.current ?? null, rootMargin: `-${offset}px 0px -60% 0px`, threshold: 0 },
    );
    for (const heading of headings) observer.observe(heading);
    return () => observer.disconnect();
  }, [key, root, offset, enabled]);

  return active;
}