import * as React from "react";
import { cn } from "@/lib/utils";
import { CopyRef } from "./copy-ref";
import { Breadcrumbs, type Crumb } from "./page-header";

/**
 * Universal entity header — the same premium composition on every major
 * detail screen: reference (copyable), title, status badges, meta line and the
 * important actions. Desktop: a hero band with an ambient wash. Phone: the
 * band stays compact and the actions move to a floating bar above the tab
 * bar so they are always reachable while scrolling the record.
 */
export function EntityHeader({ crumbs, reference, avatar, title, subtitle, badges, meta, actions, className, children }: { crumbs?: Crumb[]; reference: string; avatar?: React.ReactNode; title: React.ReactNode; subtitle?: React.ReactNode; badges?: React.ReactNode; meta?: { label: string; value: React.ReactNode }[]; actions?: React.ReactNode; className?: string; children?: React.ReactNode }) {
  return (
    <header className={cn("mb-5 flex flex-col gap-3", className)}>
      {crumbs?.length ? <Breadcrumbs crumbs={crumbs} /> : null}
      <div className="relative overflow-hidden rounded-2xl border border-border bg-surface shadow-sm hairline-top">
        <div className="pointer-events-none absolute inset-0" aria-hidden>
          <div className="absolute -left-20 -top-24 size-72 rounded-full bg-primary/10 blur-3xl" />
          <div className="absolute -right-10 -bottom-28 size-64 rounded-full bg-gold-500/10 blur-3xl" />
        </div>
        <div className="relative flex flex-col gap-4 p-4 sm:p-5 lg:flex-row lg:items-start lg:justify-between">
          <div className="flex min-w-0 items-start gap-3 sm:gap-4">
            {avatar ? <div className="shrink-0 [&>*]:ring-2 [&>*]:ring-surface [&>*]:shadow-md">{avatar}</div> : null}
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <CopyRef value={reference} />
              </div>
              <h1 className="mt-1.5 font-display text-2xl font-medium leading-tight tracking-tight text-fg sm:text-3xl">{title}</h1>
              {subtitle ? <p className="mt-1 text-sm text-fg-muted">{subtitle}</p> : null}
              {badges ? <div className="mt-2.5 flex flex-wrap items-center gap-1.5">{badges}</div> : null}
              {meta?.length ? (
                <dl className="mt-3 flex flex-wrap gap-x-5 gap-y-1.5 text-xs text-fg-muted">
                  {meta.map((m) => (
                    <div key={m.label} className="flex items-center gap-1.5">
                      <dt className="text-fg-subtle">{m.label}</dt>
                      <dd className="font-medium text-fg">{m.value}</dd>
                    </div>
                  ))}
                </dl>
              ) : null}
            </div>
          </div>
          {actions ? <div className="hidden flex-wrap items-center gap-2 md:flex lg:shrink-0 lg:justify-end">{actions}</div> : null}
        </div>
      </div>
      {actions ? (
        <div className="fixed inset-x-3 bottom-[calc(4.75rem+env(safe-area-inset-bottom))] z-20 md:hidden">
          <div className="glass flex items-center gap-2 overflow-x-auto rounded-2xl px-2 py-2 shadow-lg scrollbar-none [&>*]:shrink-0">{actions}</div>
        </div>
      ) : null}
      {children}
    </header>
  );
}