// ---------------------------------------------------------------------------
// InboxHeader
//
// Compact working-surface header: the day/date, a live clock, and the
// two top-line counts ("N items need eyes" and "N done today") that
// anchor the operator's day. "Need eyes" is computed by the Inbox
// page (sum of actionable lanes) and passed in.
//
// SP14: payer_rejected (277CA) is now part of the actionable lanes —
// it's a working-surface rejection that needs operator follow-up.
// The Inbox page sums it into the needEyes count.
// ---------------------------------------------------------------------------

export function InboxHeader({
  needEyesCount,
  doneTodayCount,
}: {
  needEyesCount: number;
  doneTodayCount: number;
}) {
  const now = new Date();
  const day = now.toLocaleDateString("en-US", { weekday: "short" }).toUpperCase();
  const date = now.toLocaleDateString("en-US", {
    month: "short",
    day: "2-digit",
  });
  const time = now.toLocaleTimeString("en-US", {
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  });

  return (
    <header
      className="sticky top-0 z-10 px-6 pt-6 pb-4"
      style={{
        background: "var(--tt-bg)",
        borderBottom: "1px solid var(--tt-bg-elev)",
      }}
    >
      <div className="flex items-baseline justify-between gap-4">
        <div className="flex items-baseline gap-4">
          <h1
            className="display tracking-tight"
            style={{
              color: "var(--tt-ink)",
              fontSize: 30,
              lineHeight: 1,
            }}
          >
            Inbox
          </h1>
          <span
            className="mono uppercase"
            style={{
              color: "var(--tt-amber)",
              fontSize: 11,
              letterSpacing: "0.18em",
            }}
          >
            · {day} {date}
          </span>
        </div>
        <span
          className="mono tabular-nums"
          style={{
            color: "var(--tt-ink-dim)",
            fontSize: 12,
            letterSpacing: "0.05em",
          }}
        >
          {time}
        </span>
      </div>
      <p
        className="mono mt-2 flex items-center gap-2"
        style={{
          color: "var(--tt-ink-dim)",
          fontSize: 11,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
        }}
      >
        <span
          className="inline-block w-1.5 h-1.5 rounded-full animate-pulse-dot"
          style={{ background: "var(--tt-amber)" }}
          aria-hidden
        />
        <span style={{ color: "var(--tt-amber)", fontWeight: 600 }}>{needEyesCount}</span>
        items need eyes
        <span className="opacity-50">·</span>
        <span style={{ color: "var(--tt-ink)", fontWeight: 600 }}>{doneTodayCount}</span>
        done today
      </p>
    </header>
  );
}