import Link from 'next/link';
import type { ReactNode } from 'react';
import { LogoMark } from '@/components/brand/Logo';
import { NavLinks, SubmitButton, type NavItem } from './client';

/**
 * Compact app header for the back office (host dashboard and platform admin): brand mark, the
 * context (venue name or "Platform admin"), section nav and sign-out. No marketing chrome.
 */
export function AppHeader({
  homeHref,
  context,
  contextLabel,
  nav,
  navLabel,
  userLabel,
  signOutAction,
}: {
  homeHref: string;
  context: ReactNode;
  contextLabel: ReactNode;
  nav: readonly NavItem[];
  navLabel: string;
  userLabel: ReactNode;
  signOutAction: () => Promise<void>;
}) {
  return (
    <header className="glass sticky top-0 z-40 border-b border-line/80 print:hidden">
      <div className="container-page flex flex-col gap-2 py-3 lg:flex-row lg:items-center lg:gap-6">
        <div className="flex items-center justify-between gap-4">
          <Link href={homeHref} className="flex min-w-0 items-center gap-3 rounded-xl" aria-label={`${typeof context === 'string' ? context : 'Dashboard'} — dashboard home`}>
            <LogoMark className="size-9" />
            <span className="min-w-0 leading-tight">
              <span className="block text-[0.7rem] font-bold tracking-[0.18em] text-cyan uppercase">{contextLabel}</span>
              <span className="block truncate font-display text-base font-bold text-fg">{context}</span>
            </span>
          </Link>
          <form action={signOutAction} className="lg:hidden">
            <SubmitButton variant="ghost" size="sm" pendingLabel="Signing out…">
              Sign out
            </SubmitButton>
          </form>
        </div>
        <div className="min-w-0 flex-1">
          <NavLinks items={nav} label={navLabel} />
        </div>
        <div className="hidden items-center gap-3 lg:flex">
          <span className="hidden max-w-48 truncate text-sm text-subtle xl:inline">{userLabel}</span>
          <form action={signOutAction}>
            <SubmitButton variant="secondary" size="sm" pendingLabel="Signing out…">
              Sign out
            </SubmitButton>
          </form>
        </div>
      </div>
    </header>
  );
}