Header Detail

"use client";

import { useState, type ReactNode } from "react";
import { Check, ChevronRight, Copy, MoreHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderDetailProps {
  breadcrumbs?: { label: string; href: string }[];
  id?: string;
  title?: string;
  status?: { label: string; tone: "danger" | "warning" | "success" | "neutral" };
  meta?: { label: string; value: string }[];
  tabs?: { label: string; href: string; count?: number }[];
  activeTab?: string;
  actions?: ReactNode;
  className?: string;
}

const TONE = {
  danger: "bg-da-danger/10 text-da-danger",
  warning: "bg-da-warning/15 text-da-fg",
  success: "bg-da-success/10 text-da-success",
  neutral: "bg-da-muted text-da-muted-fg",
} as const;

/** Detail-page header: breadcrumbs, copyable id, title with status pill, key/value meta row, actions and underline tabs. */
export function HeaderDetail({
  breadcrumbs = [
    { label: "Incidents", href: "#incidents" },
    { label: "Active", href: "#active" },
  ],
  id = "INC-2481",
  title = "Elevated 5xx on checkout-api",
  status = { label: "Identified", tone: "warning" },
  meta = [
    { label: "Severity", value: "SEV1" },
    { label: "Commander", value: "Maya Chen" },
    { label: "Started", value: "14:02 UTC · 18m ago" },
    { label: "Services", value: "checkout-api, payments-db" },
  ],
  tabs = [
    { label: "Overview", href: "#overview" },
    { label: "Timeline", href: "#timeline", count: 24 },
    { label: "Responders", href: "#responders", count: 4 },
    { label: "Postmortem", href: "#postmortem" },
  ],
  activeTab = "#timeline",
  actions,
  className,
}: HeaderDetailProps) {
  const [copied, setCopied] = useState(false);
  const btn = "da-focus da-transition inline-flex h-8 items-center justify-center rounded-da-md px-3 text-[13px] font-medium";

  return (
    <header className={cn("border-b border-da-border bg-da-bg text-da-fg", className)}>
      <div className="px-4 pt-4 sm:px-6">
        <nav aria-label="Breadcrumb">
          <ol className="flex flex-wrap items-center gap-1 text-[13px] 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.5" />
              </li>
            ))}
            <li aria-current="page" className="flex items-center gap-1 font-da-mono text-[12px] text-da-fg">
              {id}
              <button
                type="button"
                onClick={async () => {
                  try {
                    await navigator.clipboard.writeText(id);
                    setCopied(true);
                    window.setTimeout(() => setCopied(false), 1400);
                  } catch {
                    /* clipboard unavailable */
                  }
                }}
                aria-label={copied ? "Copied" : `Copy ${id}`}
                className="da-focus grid size-6 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
              >
                {copied ? <Check aria-hidden className="size-3.5 text-da-success" /> : <Copy aria-hidden className="size-3.5" />}
              </button>
            </li>
          </ol>
        </nav>
        <div className="mt-3 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-3">
              <h1 className="text-xl font-semibold tracking-da-display">{title}</h1>
              <span className={cn("inline-flex items-center gap-1.5 rounded-da-pill px-2 py-0.5 text-[12px] font-medium", TONE[status.tone])}>
                <span aria-hidden className="size-1.5 rounded-full bg-current" />
                {status.label}
              </span>
            </div>
            <dl className="mt-3 flex flex-wrap gap-x-6 gap-y-2 text-[13px]">
              {meta.map((m) => (
                <div key={m.label} className="flex gap-1.5">
                  <dt className="text-da-muted-fg">{m.label}</dt>
                  <dd className="font-medium">{m.value}</dd>
                </div>
              ))}
            </dl>
          </div>
          <div className="flex shrink-0 items-center gap-2">
            {actions ?? (
              <>
                <button type="button" className={cn(btn, "da-stroke bg-da-surface hover:bg-da-muted")}>
                  Update status
                </button>
                <button type="button" className={cn(btn, "bg-da-success text-da-success-fg hover:bg-da-success/90")}>
                  Resolve
                </button>
                <button type="button" aria-label="More actions" className={cn(btn, "w-8 px-0 text-da-muted-fg hover:bg-da-muted")}>
                  <MoreHorizontal aria-hidden className="size-4" />
                </button>
              </>
            )}
          </div>
        </div>
      </div>
      <nav aria-label="Sections" className="mt-4 overflow-x-auto px-4 sm:px-6">
        <ul className="flex gap-5">
          {tabs.map((t) => {
            const active = t.href === activeTab;
            return (
              <li key={t.href}>
                <a
                  href={t.href}
                  aria-current={active ? "page" : undefined}
                  className={cn(
                    "da-focus da-transition -mb-px flex items-center gap-1.5 border-b-2 pb-2.5 text-[13px] whitespace-nowrap",
                    active ? "border-da-fg font-medium text-da-fg" : "border-transparent text-da-muted-fg hover:text-da-fg",
                  )}
                >
                  {t.label}
                  {t.count !== undefined && <span className="rounded-da-pill bg-da-muted px-1.5 font-da-mono text-[10px] text-da-muted-fg">{t.count}</span>}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
}

export default HeaderDetail;