Sidebar Tree

"use client";

import { useId, useState, type ReactNode } from "react";
import { ChevronRight, Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarTreeNode {
  label: string;
  href?: string;
  children?: SidebarTreeNode[];
}

export interface SidebarTreeProps {
  title?: string;
  tree?: SidebarTreeNode[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_TREE: SidebarTreeNode[] = [
  {
    label: "Getting started",
    children: [
      { label: "Quickstart", href: "#quickstart" },
      { label: "Core concepts", href: "#concepts" },
      { label: "Migrate from PagerDuty", href: "#migrate" },
    ],
  },
  {
    label: "Alerting",
    children: [
      { label: "Integrations", href: "#integrations" },
      {
        label: "Routing rules",
        children: [
          { label: "Conditions", href: "#conditions" },
          { label: "Deduplication", href: "#dedup" },
          { label: "Grouping", href: "#grouping" },
        ],
      },
      { label: "Escalation policies", href: "#escalation" },
    ],
  },
  {
    label: "Incidents",
    children: [
      { label: "Declaring", href: "#declaring" },
      { label: "Roles", href: "#roles" },
      { label: "Postmortems", href: "#postmortems" },
    ],
  },
  { label: "API reference", href: "#api" },
  { label: "Changelog", href: "#changelog" },
];

function contains(n: SidebarTreeNode, href: string): boolean {
  return n.href === href || (n.children?.some((c) => contains(c, href)) ?? false);
}

function filter(nodes: SidebarTreeNode[], q: string): SidebarTreeNode[] {
  if (!q) return nodes;
  return nodes.flatMap((n) => {
    const kids = n.children ? filter(n.children, q) : [];
    if (n.label.toLowerCase().includes(q) || kids.length) return [{ ...n, children: n.children ? (kids.length ? kids : n.children) : undefined }];
    return [];
  });
}

function Node({ node, depth, activeHref, forceOpen }: { node: SidebarTreeNode; depth: number; activeHref: string; forceOpen: boolean }) {
  const [open, setOpen] = useState(contains(node, activeHref));
  const id = useId();
  const isOpen = open || forceOpen;
  const pad = { paddingLeft: `${0.5 + depth * 0.75}rem` };

  if (!node.children) {
    const active = node.href === activeHref;
    return (
      <li>
        <a
          aria-current={active ? "page" : undefined}
          href={node.href}
          style={pad}
          className={cn(
            "da-focus da-transition block rounded-da-sm py-1.5 pr-2 text-[13px]",
            active ? "bg-da-accent font-medium text-da-accent-fg" : "text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg",
          )}
        >
          {node.label}
        </a>
      </li>
    );
  }
  return (
    <li>
      <button
        type="button"
        aria-expanded={isOpen}
        aria-controls={id}
        onClick={() => setOpen((o) => !o)}
        style={pad}
        className={cn(
          "da-focus da-transition flex w-full items-center gap-1 rounded-da-sm py-1.5 pr-2 text-left text-[13px] hover:bg-da-fg/5",
          depth === 0 ? "font-medium text-da-fg" : "text-da-muted-fg hover:text-da-fg",
        )}
      >
        <ChevronRight aria-hidden className={cn("da-transition size-3.5 shrink-0 text-da-muted-fg", isOpen && "rotate-90")} />
        {node.label}
      </button>
      <ul id={id} hidden={!isOpen}>
        {node.children.map((c) => (
          <Node key={c.label} node={c} depth={depth + 1} activeHref={activeHref} forceOpen={forceOpen} />
        ))}
      </ul>
    </li>
  );
}

/** Docs/settings sidebar with a filter box and a nested, collapsible tree (auto-expanded to the active page). */
export function SidebarTree({ title = "Documentation", tree = DEFAULT_TREE, activeHref = "#dedup", children, className }: SidebarTreeProps) {
  const [q, setQ] = useState("");
  const id = useId();
  const shown = filter(tree, q.trim().toLowerCase());

  return (
    <div className={cn("flex min-h-dvh flex-col bg-da-bg text-da-fg md:flex-row", className)}>
      <aside className="border-b border-da-border md:sticky md:top-0 md:h-dvh md:w-64 md:shrink-0 md:overflow-y-auto md:border-r md:border-b-0">
        <div className="p-3">
          <p className="px-2 py-1.5 text-[13px] font-semibold">{title}</p>
          <div className="relative mt-2">
            <Search aria-hidden className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-da-muted-fg" />
            <label htmlFor={id} className="sr-only">
              Filter pages
            </label>
            <input
              id={id}
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Filter…"
              className="da-focus h-8 w-full rounded-da-md border border-da-border bg-da-input pr-2 pl-8 text-[13px] placeholder:text-da-muted-fg"
            />
          </div>
        </div>
        <nav aria-label={title} className="max-h-72 overflow-y-auto px-3 pb-4 md:max-h-none">
          <ul className="space-y-0.5">
            {shown.map((n) => (
              <Node key={n.label} node={n} depth={0} activeHref={activeHref} forceOpen={q.length > 0} />
            ))}
          </ul>
          {shown.length === 0 && <p className="px-2 py-4 text-[13px] text-da-muted-fg">No pages match.</p>}
        </nav>
      </aside>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarTree;