frontend/src/components/layout/Header.tsx

import { CircleDot, Github, RotateCcw } from "lucide-react";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";

interface Props {
  model: string | null;
  apiKeyPresent: boolean | null;
  sessionId: string | null;
  onReset: () => void;
  busy: boolean;
}

export function Header({ model, apiKeyPresent, sessionId, onReset, busy }: Props) {
  return (
    <header className="glass-strong flex items-center justify-between gap-3 border-b border-white/5 px-4 py-2.5">
      <div className="flex min-w-0 items-center gap-3">
        <div className="flex size-9 items-center justify-center rounded-lg bg-gradient-to-br from-[color:var(--color-primary)] to-[color:var(--color-accent)] font-bold text-white">
          B
        </div>
        <div className="min-w-0">
          <div className="truncate text-[14px] font-semibold tracking-tight text-[color:var(--color-text)]">
            BayesScenParams Agent
          </div>
          <div className="truncate text-[11px] text-[color:var(--color-text-tertiary)]">
            贝叶斯情景参数智能量化 · powered by Claude Agent SDK
          </div>
        </div>
      </div>

      <div className="flex items-center gap-2">
        {apiKeyPresent === false && (
          <Badge tone="red">
            <CircleDot className="size-3" /> 未配置 API Key
          </Badge>
        )}
        {apiKeyPresent === true && (
          <Badge tone="green">
            <CircleDot className="size-3" /> 已连接
          </Badge>
        )}
        {model && <Badge tone="blue">{model}</Badge>}
        {sessionId && (
          <Badge tone="gray" className="hidden md:inline-flex">
            session {sessionId.slice(0, 8)}…
          </Badge>
        )}
        <Button
          variant="secondary"
          size="sm"
          onClick={onReset}
          disabled={busy}
          title="清空对话"
        >
          <RotateCcw className="size-3.5" />
          重置
        </Button>
        <a
          href="https://github.com/anthropics/claude-agent-sdk-python"
          target="_blank"
          rel="noreferrer"
          className="hidden md:block"
        >
          <Button variant="ghost" size="icon" title="Claude Agent SDK">
            <Github className="size-4" />
          </Button>
        </a>
      </div>
    </header>
  );
}