App Sidebar

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { BarChart3, CalendarDays, Clapperboard, FileText, Home, Menu, Plug, Settings, Sparkles, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppSidebarItem {
  label: string;
  href: string;
  icon: LucideIcon;
  badge?: string;
}

export interface AppSidebarProps {
  brand?: string;
  items?: AppSidebarItem[];
  secondary?: AppSidebarItem[];
  activeHref?: string;
  user?: { name: string; email: string };
  /** Promo card at the bottom. Pass null to hide. */
  promo?: { title: string; text: string; cta: { label: string; href: string } } | null;
  children?: ReactNode;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150 shadow-da-lg";

const DEFAULT_ITEMS: AppSidebarItem[] = [
  { label: "Home", href: "#home", icon: Home },
  { label: "Meetings", href: "#meetings", icon: CalendarDays, badge: "3" },
  { label: "Recaps", href: "#recaps", icon: FileText },
  { label: "Async updates", href: "#updates", icon: Clapperboard, badge: "New" },
  { label: "Insights", href: "#insights", icon: BarChart3 },
];

const DEFAULT_SECONDARY: AppSidebarItem[] = [
  { label: "Integrations", href: "#integrations", icon: Plug },
  { label: "Settings", href: "#settings", icon: Settings },
];

export function AppSidebar({
  brand = "Halo",
  items = DEFAULT_ITEMS,
  secondary = DEFAULT_SECONDARY,
  activeHref = "#meetings",
  user = { name: "Amara Diallo", email: "amara@fieldnote.io" },
  promo = { title: "Ask your meetings", text: "Search 6 months of calls in plain English.", cta: { label: "Try it", href: "#ask" } },
  children,
  className,
}: AppSidebarProps) {
  const [open, setOpen] = useState(false);
  const drawerId = useId();

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

  const navList = (list: AppSidebarItem[]) => (
    <ul className="flex flex-col gap-1">
      {list.map((item) => {
        const Icon = item.icon;
        const active = item.href === activeHref;
        return (
          <li key={item.href}>
            <a
              href={item.href}
              aria-current={active ? "page" : undefined}
              onClick={() => setOpen(false)}
              className={cn(
                "da-focus da-transition relative flex h-10 items-center gap-3 rounded-da-pill px-3.5 text-sm font-medium",
                active ? "bg-da-fg text-da-bg shadow-da-md" : "text-da-muted-fg hover:bg-da-fg/[0.06] hover:text-da-fg",
              )}
            >
              <Icon aria-hidden className="size-4 shrink-0" />
              <span className="flex-1 truncate">{item.label}</span>
              {item.badge && (
                <span
                  className={cn(
                    "rounded-da-pill px-2 py-0.5 text-[11px] font-semibold",
                    active ? "bg-da-bg/20" : "bg-gradient-to-r from-da-primary to-da-accent text-da-primary-fg",
                  )}
                >
                  {item.badge}
                </span>
              )}
            </a>
          </li>
        );
      })}
    </ul>
  );

  const panel = (
    <div className="flex h-full flex-col gap-6 p-4">
      <p className="flex items-center gap-2.5 px-2 pt-1 font-da-display text-lg font-semibold tracking-da-display">
        <span aria-hidden className="grid size-8 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent shadow-da-md">
          <span className="size-3.5 rounded-full bg-da-bg/90" />
        </span>
        {brand}
      </p>
      <nav aria-label="Sidebar" className="flex flex-1 flex-col gap-6 overflow-y-auto">
        {navList(items)}
        <div>
          <p className="px-3.5 pb-2 text-xs font-semibold text-da-muted-fg">Workspace</p>
          {navList(secondary)}
        </div>
      </nav>
      {promo && (
        <div className="relative overflow-hidden rounded-da-md p-4">
          <span aria-hidden className="absolute inset-0 -z-10 bg-gradient-to-br from-da-primary/25 to-da-accent/25" />
          <Sparkles aria-hidden className="size-4 text-da-primary" />
          <p className="mt-2 text-sm font-semibold">{promo.title}</p>
          <p className="mt-1 text-xs text-da-muted-fg">{promo.text}</p>
          <a href={promo.cta.href} className="da-focus mt-3 inline-flex rounded-da-pill bg-da-fg px-3 py-1.5 text-xs font-semibold text-da-bg">
            {promo.cta.label}
          </a>
        </div>
      )}
      <div className="flex items-center gap-3 rounded-da-pill bg-da-fg/[0.04] p-1.5 pr-3">
        <span aria-hidden className="grid size-9 place-items-center rounded-full bg-gradient-to-br from-da-accent to-da-primary text-xs font-semibold text-white">
          {user.name
            .split(" ")
            .map((w) => w[0])
            .join("")}
        </span>
        <span className="min-w-0 text-sm">
          <span className="block truncate font-semibold">{user.name}</span>
          <span className="block truncate text-xs text-da-muted-fg">{user.email}</span>
        </span>
      </div>
    </div>
  );

  return (
    <div className={cn("flex min-h-full gap-4 p-3 text-da-fg lg:p-4", className)}>
      <aside className={cn("sticky top-4 hidden h-[calc(100dvh-2rem)] w-64 shrink-0 rounded-da-lg lg:block", GLASS)}>{panel}</aside>

      {open && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <button type="button" aria-label="Close menu" onClick={() => setOpen(false)} className="absolute inset-0 bg-da-overlay backdrop-blur-sm" />
          <aside
            id={drawerId}
            className={cn(
              "relative m-3 h-[calc(100%-1.5rem)] w-72 max-w-[85vw] rounded-da-lg",
              GLASS,
              "transition-[opacity,translate] duration-(--da-duration-slow) ease-da-emphasized starting:-translate-x-8 starting:opacity-0 motion-reduce:transition-none",
            )}
          >
            <button type="button" aria-label="Close menu" onClick={() => setOpen(false)} className="da-focus absolute top-4 right-4 grid size-8 place-items-center rounded-full bg-da-fg/[0.06]">
              <X aria-hidden className="size-4" />
            </button>
            {panel}
          </aside>
        </div>
      )}

      <div className="flex min-w-0 flex-1 flex-col gap-3">
        <div className={cn("flex h-12 items-center gap-2 rounded-da-pill px-1.5 lg:hidden", GLASS)}>
          <button
            type="button"
            aria-label="Open menu"
            aria-expanded={open}
            aria-controls={drawerId}
            onClick={() => setOpen(true)}
            className="da-focus grid size-9 place-items-center rounded-full hover:bg-da-fg/[0.06]"
          >
            <Menu aria-hidden className="size-4" />
          </button>
          <span className="font-da-display font-semibold">{brand}</span>
        </div>
        <main className="min-w-0 flex-1">{children}</main>
      </div>
    </div>
  );
}

export default AppSidebar;