// <Header> — the agent page's identity strip: icon, glyphic title, the
// "swarm / hive" label row, and a slot for the status row
// (`<StatusChips>` — ../status-chips/, kept separate so this component
// has no opinion on what badges exist). Structurally the same
// three-row shape as the old `#agent-header` markup in index.html
// (icon · main · pills) — see `docs/web-ui.md::Per-agent page` — this
// is a like-for-like layout port, the redesign work is in the children.
// Reuses `agent.css`'s existing `.agent-header*`/`.agent-icon` rules
// (loaded globally by index.html) rather than a component-scoped
// stylesheet — no new visual language needed for the chrome itself.
import type { ComponentChildren } from 'preact';

// Icon 404s when the agent has no `hyperhive.icon` override (no
// bundled server-side default any more — see
// `hive_agent::web_ui::screen::serve_icon`). Ports app.js's
// `bindHeaderIconFallback` exactly: fire-and-forget load, swap to
// `/favicon.svg` on failure, `dataset.fallback` guards against a
// 404-on-the-fallback-itself loop.
function handleIconError(e: Event) {
  const img = e.currentTarget as HTMLImageElement;
  if (img.dataset.fallback) return;
  img.dataset.fallback = '1';
  img.src = '/favicon.svg';
}

export interface HeaderProps {
  label: string;
  hiveLabel?: string | null;
  children?: ComponentChildren;
  /** Right-cluster flyout triggers (inbox/todos/links pills, the
   * overflow menu button) — mirrors the old markup's
   * `.agent-header-pills` third column. Meta-nav (`<MetaNav>`) lives
   * here too, as a fixed-size trigger — NOT in the title row the old
   * markup put it in (`<nav id="meta-links">`, docs/web-ui/agent.md).
   * A variable-width inline link list there grows the title row's
   * actual height past the fixed `--agent-header-h` the rest of the
   * page's `position: fixed` header + `position: absolute` content
   * below it are offset against, so on a narrow viewport the header
   * silently overlaps the login-recovery card underneath it (mara,
   * live: "the login card looks like it is behind the header"). A
   * fixed-size trigger button can't do that regardless of how many
   * links the backend sends. */
  pills?: ComponentChildren;
}

export function Header({ label, hiveLabel, children, pills }: HeaderProps) {
  return (
    <header class="agent-header">
      <img class="agent-icon" src="icon" alt="" onError={handleIconError} />
      <div class="agent-header-main">
        <div class="agent-header-row agent-header-title-row">
          <h2 class="agent-header-title">◆ {label} ◆</h2>
        </div>
        {hiveLabel ? <div class="agent-header-row agent-hive-row">{hiveLabel}</div> : null}
        <div class="agent-header-row">{children}</div>
      </div>
      {pills ? <div class="agent-header-pills">{pills}</div> : null}
    </header>
  );
}