Sidebar Conversations

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { ChevronDown, Menu, Palette, Plus, SquarePen, X } from "lucide-react";
import { cn } from "@/lib/utils";

export type SidebarTone = "primary" | "accent" | "success" | "warning";

export interface SidebarConversationsItem {
  label: string;
  href: string;
  /** Initials in a colored dot (agents, people). Omit for plain threads. */
  initials?: string;
  tone?: SidebarTone;
  unread?: boolean;
}

export interface SidebarConversationsSection {
  title: string;
  items: SidebarConversationsItem[];
  empty?: string;
  defaultOpen?: boolean;
}

export interface SidebarConversationsProps {
  brand?: string;
  studio?: { label: string; href: string };
  sections?: SidebarConversationsSection[];
  activeHref?: string;
  user?: { name: string; initials: string; plan: string };
  children?: ReactNode;
  className?: string;
}

const TONES: Record<SidebarTone, string> = {
  primary: "bg-da-primary text-da-primary-fg",
  accent: "bg-da-accent text-da-accent-fg",
  success: "bg-da-success text-da-success-fg",
  warning: "bg-da-warning text-da-warning-fg",
};

const DEFAULT_SECTIONS: SidebarConversationsSection[] = [
  { title: "Spaces", items: [], empty: "No spaces yet", defaultOpen: true },
  {
    title: "Direct",
    defaultOpen: true,
    items: [
      { label: "Director", href: "#director", initials: "D", tone: "accent" },
      { label: "Research", href: "#research", initials: "R", tone: "primary", unread: true },
      { label: "Copywriter", href: "#copy", initials: "C", tone: "success" },
    ],
  },
  {
    title: "Conversations",
    defaultOpen: false,
    items: [
      { label: "Onboarding redesign recap", href: "#c1" },
      { label: "Q4 pricing experiments", href: "#c2" },
      { label: "Release notes — v4.2", href: "#c3" },
    ],
  },
];

/** AI chat app shell: dark sidebar with brand + new-chat button, a studio link, collapsible sections (spaces, direct agents, conversations) with + actions, user footer; slides in as a drawer on mobile. */
export function SidebarConversations({
  brand = "Nova",
  studio = { label: "Agent Studio", href: "#studio" },
  sections = DEFAULT_SECTIONS,
  activeHref = "#director",
  user = { name: "Chloé Martin", initials: "CM", plan: "Pro plan" },
  children,
  className,
}: SidebarConversationsProps) {
  const [open, setOpen] = useState(false);
  const panelId = 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 iconButton = "da-focus da-transition grid size-8 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-muted hover:text-da-fg";

  return (
    <div className={cn("relative flex min-h-dvh", className)}>
      <div
        aria-hidden
        onClick={() => setOpen(false)}
        className={cn("da-transition fixed inset-0 z-30 bg-da-overlay lg:hidden", open ? "opacity-100" : "pointer-events-none opacity-0")}
      />
      <aside
        id={panelId}
        aria-label="Conversations"
        className={cn(
          "da-transition-slow fixed inset-y-0 left-0 z-40 flex w-64 flex-col border-r border-da-border bg-da-bg lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0",
          open ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <div className="flex h-14 items-center gap-2.5 px-4">
          <span aria-hidden className="grid size-7 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent">
            <span className="size-2.5 rounded-full bg-da-bg" />
          </span>
          <span className="flex-1 font-da-display text-[15px] font-semibold">{brand}</span>
          <a href="#new" aria-label="New chat" className={iconButton}>
            <SquarePen aria-hidden className="size-4" />
          </a>
          <button type="button" aria-label="Close sidebar" onClick={() => setOpen(false)} className={cn(iconButton, "lg:hidden")}>
            <X aria-hidden className="size-4" />
          </button>
        </div>

        <nav aria-label="Workspace" className="flex-1 overflow-y-auto px-2 pb-4">
          <a href={studio.href} className="da-focus da-transition flex items-center gap-2.5 rounded-da-sm px-2.5 py-2 text-sm text-da-fg hover:bg-da-muted">
            <Palette aria-hidden className="size-4 text-da-muted-fg" />
            {studio.label}
          </a>

          {sections.map((s) => (
            <details key={s.title} open={s.defaultOpen ?? true} className="group mt-5">
              <summary className="da-focus flex cursor-pointer list-none items-center gap-1 rounded-da-sm px-2 py-1 font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase hover:text-da-fg [&::-webkit-details-marker]:hidden">
                <ChevronDown aria-hidden className="da-transition size-3 -rotate-90 group-open:rotate-0" />
                <span className="flex-1">{s.title}</span>
                <span aria-hidden className="grid size-5 place-items-center rounded-da-sm hover:bg-da-muted">
                  <Plus className="size-3.5" />
                </span>
              </summary>
              {s.items.length === 0 ? (
                <p className="px-2.5 py-1.5 text-xs text-da-muted-fg">{s.empty ?? "Nothing here yet"}</p>
              ) : (
                <ul className="mt-1 space-y-0.5">
                  {s.items.map((it) => {
                    const active = it.href === activeHref;
                    return (
                      <li key={it.href}>
                        <a
                          href={it.href}
                          aria-current={active ? "page" : undefined}
                          onClick={() => setOpen(false)}
                          className={cn(
                            "da-focus da-transition flex items-center gap-2.5 rounded-da-pill px-2.5 py-1.5 text-sm",
                            active ? "bg-da-surface-2 text-da-fg" : "text-da-fg/80 hover:bg-da-muted hover:text-da-fg",
                          )}
                        >
                          {it.initials && (
                            <span aria-hidden className={cn("grid size-5 shrink-0 place-items-center rounded-full font-da-display text-[10px] font-semibold", TONES[it.tone ?? "primary"])}>
                              {it.initials}
                            </span>
                          )}
                          <span className="min-w-0 flex-1 truncate">{it.label}</span>
                          {it.unread && (
                            <span className="size-1.5 rounded-full bg-da-primary">
                              <span className="sr-only">unread</span>
                            </span>
                          )}
                        </a>
                      </li>
                    );
                  })}
                </ul>
              )}
            </details>
          ))}
        </nav>

        <div className="border-t border-da-border p-2">
          <a href="#account" className="da-focus da-transition flex items-center gap-2.5 rounded-da-md p-2 hover:bg-da-muted">
            <span aria-hidden className="grid size-8 place-items-center rounded-full bg-da-accent font-da-display text-xs font-semibold text-da-accent-fg">
              {user.initials}
            </span>
            <span className="min-w-0">
              <span className="block truncate text-sm font-medium">{user.name}</span>
              <span className="block text-xs text-da-muted-fg">{user.plan}</span>
            </span>
          </a>
        </div>
      </aside>

      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-14 items-center gap-2 border-b border-da-border px-3 lg:hidden">
          <button type="button" aria-label="Open sidebar" aria-expanded={open} aria-controls={panelId} onClick={() => setOpen(true)} className={iconButton}>
            <Menu aria-hidden className="size-5" />
          </button>
          <span className="font-da-display text-[15px] font-semibold">{brand}</span>
        </div>
        {children}
      </div>
    </div>
  );
}

export default SidebarConversations;