Chat Header

import { Monitor, Search, UserRound } from "lucide-react";
import { cn } from "@/lib/utils";

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

export interface ChatHeaderParticipant {
  name: string;
  initials: string;
  tone: ChatHeaderTone;
  active?: boolean;
}

export interface ChatHeaderProps {
  name?: string;
  model?: string;
  role?: string;
  participants?: ChatHeaderParticipant[];
  className?: string;
}

const TONES: Record<ChatHeaderTone, 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",
};

/** Conversation top bar: assistant face avatar, name, mono model chip and role; overlapping participant avatars (active one ringed) and search / profile / screen actions. */
export function ChatHeader({
  name = "Director",
  model = "nova-3 · memory",
  role = "Planning agent",
  participants = [
    { name: "Leo", initials: "L", tone: "success" },
    { name: "Maya", initials: "M", tone: "warning" },
    { name: "Éléonore", initials: "É", tone: "primary", active: true },
  ],
  className,
}: ChatHeaderProps) {
  const action = "da-focus da-transition grid size-9 place-items-center rounded-full text-da-muted-fg hover:bg-da-muted hover:text-da-fg";
  return (
    <header className={cn("flex h-16 items-center gap-3 border-b border-da-border bg-da-bg/85 px-4 backdrop-blur-da", className)}>
      <svg aria-hidden viewBox="0 0 32 32" className="size-9 shrink-0">
        <circle cx="16" cy="16" r="16" className="fill-da-primary" />
        <path d="M10.5 14.5l.8 3.2M18.5 14.5l.8 3.2" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" />
      </svg>
      <div className="min-w-0">
        <h1 className="truncate font-da-display text-[15px] leading-tight font-semibold">{name}</h1>
        <p className="mt-0.5 flex items-center gap-2 text-xs text-da-muted-fg">
          <span className="rounded-da-pill bg-da-secondary px-2 py-0.5 font-da-mono text-[11px] text-da-fg">{model}</span>
          <span className="hidden truncate sm:inline">{role}</span>
        </p>
      </div>

      <ul aria-label="Participants" className="ml-auto flex -space-x-2">
        {participants.map((p) => (
          <li key={p.name}>
            <span
              title={p.name}
              className={cn(
                "grid size-8 place-items-center rounded-full font-da-display text-xs font-semibold ring-2 ring-da-bg",
                TONES[p.tone],
                p.active && "ring-da-fg/80",
              )}
            >
              <span aria-hidden>{p.initials}</span>
              <span className="sr-only">
                {p.name}
                {p.active ? " (speaking)" : ""}
              </span>
            </span>
          </li>
        ))}
      </ul>
      <div className="hidden items-center gap-0.5 sm:flex">
        <button type="button" aria-label="Search in conversation" className={action}>
          <Search aria-hidden className="size-4" />
        </button>
        <button type="button" aria-label="Agent profile" className={action}>
          <UserRound aria-hidden className="size-4" />
        </button>
        <button type="button" aria-label="Open canvas" className={action}>
          <Monitor aria-hidden className="size-4" />
        </button>
      </div>
    </header>
  );
}

export default ChatHeader;