Sidebar Inset

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { Activity, BellRing, CalendarClock, ChevronDown, FileText, Home, LifeBuoy, Menu, Radio, Settings, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarInsetSection {
  label: string;
  icon: LucideIcon;
  href?: string;
  /** Sub-links make the section collapsible. */
  children?: { label: string; href: string }[];
}

export interface SidebarInsetProps {
  workspace?: string;
  sections?: SidebarInsetSection[];
  activeHref?: string;
  user?: { name: string; email: string; initials: string };
  children?: ReactNode;
  className?: string;
}

const DEFAULT_SECTIONS: SidebarInsetSection[] = [
  { label: "Home", icon: Home, href: "#home" },
  {
    label: "Incidents",
    icon: Activity,
    children: [
      { label: "Active", href: "#incidents-active" },
      { label: "Resolved", href: "#incidents-resolved" },
      { label: "Postmortems", href: "#postmortems" },
    ],
  },
  {
    label: "On-call",
    icon: CalendarClock,
    children: [
      { label: "Schedules", href: "#schedules" },
      { label: "Escalation policies", href: "#policies" },
      { label: "Overrides", href: "#overrides" },
    ],
  },
  { label: "Alert rules", icon: BellRing, href: "#alerts" },
  { label: "Status pages", icon: Radio, href: "#status" },
  { label: "Reports", icon: FileText, href: "#reports" },
];

function Section({ s, activeHref, onNavigate }: { s: SidebarInsetSection; activeHref: string; onNavigate: () => void }) {
  const id = useId();
  const containsActive = s.children?.some((c) => c.href === activeHref) ?? false;
  const [open, setOpen] = useState(containsActive);
  const row = "da-focus da-transition flex h-8 w-full items-center gap-2.5 rounded-da-md px-2 text-[13px]";

  if (!s.children) {
    const active = s.href === activeHref;
    return (
      <a
        href={s.href}
        onClick={onNavigate}
        aria-current={active ? "page" : undefined}
        className={cn(row, active ? "bg-da-surface font-medium text-da-fg shadow-da-sm" : "text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg")}
      >
        <s.icon aria-hidden className="size-4" />
        {s.label}
      </a>
    );
  }
  return (
    <div>
      <button
        type="button"
        aria-expanded={open}
        aria-controls={id}
        onClick={() => setOpen((o) => !o)}
        className={cn(row, "text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg", containsActive && "text-da-fg")}
      >
        <s.icon aria-hidden className="size-4" />
        {s.label}
        <ChevronDown aria-hidden className={cn("da-transition ml-auto size-3.5", !open && "-rotate-90")} />
      </button>
      <ul id={id} hidden={!open} className="relative mt-0.5 mb-1 ml-4 border-l border-da-border pl-2">
        {s.children.map((c) => {
          const active = c.href === activeHref;
          return (
            <li key={c.href}>
              <a
                href={c.href}
                onClick={onNavigate}
                aria-current={active ? "page" : undefined}
                className={cn(
                  "da-focus da-transition block rounded-da-sm px-2 py-1.5 text-[13px]",
                  active ? "bg-da-surface font-medium text-da-fg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {c.label}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

/** Inset app shell: sidebar sits on the tinted page background, content is a raised rounded panel. Collapsible nested sections, user card, mobile drawer. */
export function SidebarInset({
  workspace = "Acme Inc.",
  sections = DEFAULT_SECTIONS,
  activeHref = "#incidents-active",
  user = { name: "Maya Chen", email: "maya@acme.io", initials: "MC" },
  children,
  className,
}: SidebarInsetProps) {
  const [open, setOpen] = useState(false);
  const navId = useId();

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <div className={cn("flex min-h-dvh bg-da-surface-2 text-da-fg", className)}>
      {open && <div aria-hidden className="fixed inset-0 z-40 bg-da-overlay lg:hidden" onClick={() => setOpen(false)} />}
      <aside
        id={navId}
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex w-60 flex-col bg-da-surface-2 p-3 transition-transform duration-(--da-duration-slow) ease-da lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0 motion-reduce:transition-none",
          open ? "translate-x-0 shadow-da-lg" : "-translate-x-full",
        )}
      >
        <div className="flex items-center gap-2 px-2 py-1.5">
          <span aria-hidden className="grid size-6 place-items-center rounded-da-sm bg-da-primary text-[11px] font-bold text-da-primary-fg">
            {workspace[0]}
          </span>
          <span className="text-[13px] font-semibold">{workspace}</span>
          <button
            type="button"
            onClick={() => setOpen(false)}
            aria-label="Close navigation"
            className="da-focus ml-auto grid size-7 place-items-center rounded-da-sm text-da-muted-fg lg:hidden"
          >
            <X aria-hidden className="size-4" />
          </button>
        </div>
        <nav aria-label="Main" className="mt-4 flex-1 space-y-0.5 overflow-y-auto">
          {sections.map((s) => (
            <Section key={s.label} s={s} activeHref={activeHref} onNavigate={() => setOpen(false)} />
          ))}
        </nav>
        <div className="space-y-0.5 border-t border-da-border pt-2">
          <a href="#support" className="da-focus da-transition flex h-8 items-center gap-2.5 rounded-da-md px-2 text-[13px] text-da-muted-fg hover:text-da-fg">
            <LifeBuoy aria-hidden className="size-4" /> Support
          </a>
          <a href="#settings" className="da-focus da-transition flex h-8 items-center gap-2.5 rounded-da-md px-2 text-[13px] text-da-muted-fg hover:text-da-fg">
            <Settings aria-hidden className="size-4" /> Settings
          </a>
          <div className="mt-2 flex items-center gap-2.5 rounded-da-md p-2">
            <span aria-hidden className="grid size-8 place-items-center rounded-full bg-da-accent text-[11px] font-medium text-da-accent-fg">
              {user.initials}
            </span>
            <span className="min-w-0 text-[12px] leading-tight">
              <span className="block truncate font-medium">{user.name}</span>
              <span className="block truncate text-da-muted-fg">{user.email}</span>
            </span>
          </div>
        </div>
      </aside>
      <div className="flex min-w-0 flex-1 flex-col lg:py-2 lg:pr-2">
        <div className="flex items-center gap-2 border-b border-da-border bg-da-bg px-4 py-2.5 lg:hidden">
          <button
            type="button"
            onClick={() => setOpen(true)}
            aria-expanded={open}
            aria-controls={navId}
            aria-label="Open navigation"
            className="da-focus grid size-8 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-muted"
          >
            <Menu aria-hidden className="size-4" />
          </button>
          <span className="text-[13px] font-semibold">{workspace}</span>
        </div>
        <main className="min-w-0 flex-1 bg-da-bg lg:da-stroke lg:rounded-da-lg lg:shadow-da-sm">{children}</main>
      </div>
    </div>
  );
}

export default SidebarInset;