Header Document

"use client";

import { useId, useState } from "react";
import { Check, ChevronRight, Cloud, MoreHorizontal, Share2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderDocumentProps {
  breadcrumbs?: { label: string; href: string }[];
  title?: string;
  onTitleChange?: (title: string) => void;
  viewers?: { name: string; tone: number }[];
  savedLabel?: string;
  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"];

/** Document/recap editor header in glass: breadcrumbs, inline-editable title, saved indicator, live viewer avatars with presence rings, share and more buttons. */
export function HeaderDocument({
  breadcrumbs = [
    { label: "Lumen", href: "#ws" },
    { label: "Product", href: "#product" },
  ],
  title: initialTitle = "Q4 roadmap sync — recap",
  onTitleChange,
  viewers = [
    { name: "Amara Diallo", tone: 0 },
    { name: "Leo Park", tone: 1 },
    { name: "Sofia Rossi", tone: 2 },
  ],
  savedLabel = "Saved",
  className,
}: HeaderDocumentProps) {
  const id = useId();
  const [title, setTitle] = useState(initialTitle);
  const [saving, setSaving] = useState(false);

  return (
    <header className={cn("sticky top-0 z-30 px-4 pt-3 text-da-fg", className)}>
      <div className={cn("mx-auto flex max-w-6xl items-center gap-3 rounded-da-lg px-4 py-2.5 shadow-da-md", GLASS)}>
        <div className="min-w-0 flex-1">
          <nav aria-label="Breadcrumb">
            <ol className="flex items-center gap-1 text-xs text-da-muted-fg">
              {breadcrumbs.map((b) => (
                <li key={b.href} className="flex items-center gap-1">
                  <a href={b.href} className="da-focus rounded-da-sm hover:text-da-fg">
                    {b.label}
                  </a>
                  <ChevronRight aria-hidden className="size-3" />
                </li>
              ))}
            </ol>
          </nav>
          <label htmlFor={id} className="sr-only">
            Document title
          </label>
          <input
            id={id}
            value={title}
            onChange={(e) => {
              setTitle(e.target.value);
              setSaving(true);
            }}
            onBlur={() => {
              setSaving(false);
              onTitleChange?.(title);
            }}
            className="da-focus -ml-1 w-full truncate rounded-da-sm bg-transparent px-1 font-da-display text-lg font-semibold tracking-da-display hover:bg-da-surface-2"
          />
        </div>
        <p className="hidden items-center gap-1.5 text-xs text-da-muted-fg sm:flex" aria-live="polite">
          {saving ? <Cloud aria-hidden className="size-3.5 animate-pulse" /> : <Check aria-hidden className="size-3.5 text-da-success" />}
          {saving ? "Editing…" : savedLabel}
        </p>
        <ul className="hidden -space-x-2 md:flex" aria-label={`Viewing now: ${viewers.map((v) => v.name).join(", ")}`}>
          {viewers.map((v) => (
            <li
              key={v.name}
              aria-hidden
              title={v.name}
              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-success ring-offset-2 ring-offset-da-bg",
                TONES[v.tone % TONES.length],
              )}
            >
              {v.name
                .split(" ")
                .map((w) => w[0])
                .join("")}
            </li>
          ))}
        </ul>
        <a
          href="#share"
          className="da-focus da-transition inline-flex h-10 items-center gap-1.5 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-4 text-sm font-semibold text-da-primary-fg shadow-da-sm hover:-translate-y-0.5"
        >
          <Share2 aria-hidden className="size-4" />
          <span className="max-sm:sr-only">Share</span>
        </a>
        <button type="button" aria-label="More options" className="da-focus grid size-10 place-items-center rounded-full hover:bg-da-surface-2">
          <MoreHorizontal aria-hidden className="size-5" />
        </button>
      </div>
    </header>
  );
}

export default HeaderDocument;