frontend/src/components/Header.tsx

import type { ConnectionStatus } from "../types";

type Props = {
  status: ConnectionStatus;
  sessionId: string | null;
  onOpenScenarios(): void;
  onReset(): void;
  currentPath?: string;
  onNavigate?(path: string): void;
};

const STATUS_LABEL: Record<ConnectionStatus, string> = {
  connecting: "Connecting…",
  open: "Connected",
  closed: "Disconnected",
  error: "Connection error",
};

const STATUS_DOT: Record<ConnectionStatus, string> = {
  connecting: "dot",
  open: "dot dot--ok",
  closed: "dot dot--warn",
  error: "dot dot--err",
};

export function Header({ status, sessionId, onOpenScenarios, onReset, currentPath, onNavigate }: Props) {
  const onComparison = currentPath === "/comparison";
  return (
    <header className="header">
      <div className="header__brand">
        <span className="header__logo">ramco-chat</span>
        <span className="header__tag">· Procure-to-Pay copilot</span>
        {onNavigate && (
          <nav className="header__nav">
            <button
              className={"header__nav-link" + (!onComparison ? " header__nav-link--active" : "")}
              onClick={() => onNavigate("/")}
            >
              Chat
            </button>
            <button
              className={"header__nav-link" + (onComparison ? " header__nav-link--active" : "")}
              onClick={() => onNavigate("/comparison")}
            >
              Team comparison
            </button>
          </nav>
        )}
      </div>
      <div className="header__right">
        {!onComparison && (
          <>
            <span className="conn">
              <span className={STATUS_DOT[status]} />
              {STATUS_LABEL[status]}
              {sessionId && <span className="faint mono" style={{ marginLeft: 6 }}>· {sessionId.slice(0, 8)}</span>}
            </span>
            <button className="pill" onClick={onOpenScenarios}>
              <span>Scenarios</span>
            </button>
            <button className="pill pill--ghost" onClick={onReset} title="Wipe current session and start fresh">
              Reset
            </button>
          </>
        )}
      </div>
    </header>
  );
}