Header Meeting

"use client";

import { useEffect, useState } from "react";
import { Grid2x2, Languages, PhoneOff, Presentation, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderMeetingProps {
  title?: string;
  participants?: string[];
  /** Seconds already elapsed when mounted. */
  startedAgo?: number;
  onLeave?: () => void;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const TONES = ["from-da-primary to-da-accent", "from-da-accent to-da-success", "from-da-danger to-da-primary", "from-da-warning to-da-danger"];

function fmt(s: number) {
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const ss = s % 60;
  return `${h ? `${h}:` : ""}${String(m).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
}

/** In-call header bar: REC dot + running timer, meeting title, participant avatars, layout toggle, live-translate toggle, AI notes chip and a red Leave button. */
export function HeaderMeeting({
  title = "Q4 roadmap sync",
  participants = ["Amara Diallo", "Leo Park", "Sofia Rossi", "Noah Klein", "Jin Park"],
  startedAgo = 1930,
  onLeave,
  className,
}: HeaderMeetingProps) {
  const [secs, setSecs] = useState(startedAgo);
  const [layout, setLayout] = useState<"grid" | "speaker">("grid");
  const [translate, setTranslate] = useState(false);

  useEffect(() => {
    const t = window.setInterval(() => setSecs((s) => s + 1), 1000);
    return () => window.clearInterval(t);
  }, []);

  return (
    <header className={cn("px-4 pt-4 text-da-fg", className)}>
      <div className={cn("mx-auto flex max-w-6xl flex-wrap items-center gap-3 rounded-da-lg py-2 pr-2 pl-4 shadow-da-md sm:rounded-da-pill", GLASS)}>
        <p className="inline-flex items-center gap-2 rounded-da-pill bg-da-danger/15 px-2.5 py-1 font-da-mono text-xs font-semibold text-da-danger">
          <span aria-hidden className="relative flex size-2">
            <span className="absolute inset-0 animate-ping rounded-full bg-da-danger opacity-60 motion-reduce:hidden" />
            <span className="relative size-2 rounded-full bg-da-danger" />
          </span>
          <span className="sr-only">Recording, </span>
          <span className="tabular-nums">{fmt(secs)}</span>
        </p>
        <h1 className="min-w-0 truncate font-da-display font-semibold">{title}</h1>
        <p className="hidden items-center gap-1.5 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-2.5 py-1 text-xs font-semibold text-da-primary-fg sm:inline-flex">
          <Sparkles aria-hidden className="size-3.5" /> Halo is taking notes
        </p>
        <div className="ml-auto flex items-center gap-2">
          <span className="hidden -space-x-2 md:flex" role="img" aria-label={`${participants.length} participants`}>
            {participants.slice(0, 4).map((p, i) => (
              <span
                key={p}
                className={cn(
                  "grid size-8 place-items-center rounded-full bg-gradient-to-br text-[10px] font-semibold text-da-primary-fg ring-2 ring-da-bg",
                  TONES[i % TONES.length],
                )}
              >
                {p
                  .split(" ")
                  .map((w) => w[0])
                  .join("")}
              </span>
            ))}
            {participants.length > 4 && (
              <span className="grid size-8 place-items-center rounded-full bg-da-fg text-[10px] font-semibold text-da-bg ring-2 ring-da-bg">
                +{participants.length - 4}
              </span>
            )}
          </span>
          <div role="group" aria-label="Layout" className="flex rounded-da-pill bg-da-surface-2 p-1">
            {(
              [
                { v: "grid", Icon: Grid2x2, l: "Grid layout" },
                { v: "speaker", Icon: Presentation, l: "Speaker layout" },
              ] as const
            ).map(({ v, Icon, l }) => (
              <button
                key={v}
                type="button"
                aria-label={l}
                aria-pressed={layout === v}
                onClick={() => setLayout(v)}
                className={cn("da-focus grid size-8 place-items-center rounded-full", layout === v ? "bg-da-surface shadow-da-sm" : "text-da-muted-fg")}
              >
                <Icon aria-hidden className="size-4" />
              </button>
            ))}
          </div>
          <button
            type="button"
            aria-pressed={translate}
            onClick={() => setTranslate((t) => !t)}
            className={cn(
              "da-focus da-transition inline-flex h-10 items-center gap-1.5 rounded-da-pill px-3 text-sm font-medium",
              translate ? "bg-da-fg text-da-bg" : "bg-da-surface-2 hover:bg-da-surface",
            )}
          >
            <Languages aria-hidden className="size-4" />
            <span className="max-sm:sr-only">Translate</span>
          </button>
          <button
            type="button"
            onClick={onLeave}
            className="da-focus da-transition inline-flex h-10 items-center gap-1.5 rounded-da-pill bg-da-danger px-4 text-sm font-semibold text-da-danger-fg hover:brightness-110"
          >
            <PhoneOff aria-hidden className="size-4" />
            <span className="max-sm:sr-only">Leave</span>
          </button>
        </div>
      </div>
    </header>
  );
}

export default HeaderMeeting;