import { STATUS_COLORS, STATUS_LABELS } from "@/lib/constants";
import { useOfficeStore } from "@/store/office-store";
import { getDirector, setMode } from "@/sim/runtime";
import type { AgentStatus } from "@/lib/types";

const LEGEND: AgentStatus[] = ["idle", "thinking", "tool_calling", "speaking", "spawning", "error"];

export function HeaderBar() {
  const paused = useOfficeStore((s) => s.paused);
  const setPaused = useOfficeStore((s) => s.setPaused);
  const speed = useOfficeStore((s) => s.speed);
  const setSpeed = useOfficeStore((s) => s.setSpeed);
  const theme = useOfficeStore((s) => s.theme);
  const setTheme = useOfficeStore((s) => s.setTheme);
  const mode = useOfficeStore((s) => s.mode);
  const agentCount = useOfficeStore((s) => s.agents.size);
  const panelOpen = useOfficeStore((s) => s.panelOpen);

  const isLive = mode === "live";

  return (
    <header className="header">
      <div className="header-brand">
        <span className="header-mark">✳</span>
        <div>
          <h1>Claude Office</h1>
          <p>multi-agent 虛擬辦公室 · {isLive ? "實況模式" : "模擬模式"}</p>
        </div>
      </div>

      <div className="header-legend">
        {LEGEND.map((s) => (
          <span key={s} className="legend-chip">
            <span className="legend-dot" style={{ backgroundColor: STATUS_COLORS[s] }} />
            {STATUS_LABELS[s]}
          </span>
        ))}
      </div>

      <div className="header-controls">
        <span className="agent-count">{agentCount} agents</span>
        <button
          className={`btn mode-btn ${isLive ? "live-on" : ""}`}
          onClick={() => setMode(isLive ? "sim" : "live")}
          title={isLive ? "切回劇本模擬" : "連上真實 Claude Code 活動 (需 npm run watch)"}
        >
          {isLive ? "● LIVE" : "▶ 模擬"}
        </button>
        {!isLive && (
          <>
            <button className="btn" onClick={() => getDirector().hireAgent()} title="招募一位 agent">
              + Agent
            </button>
            <button
              className="btn"
              onClick={() => setSpeed(speed >= 4 ? 1 : speed * 2)}
              title="模擬速度"
            >
              {speed}×
            </button>
          </>
        )}
        <button className="btn" onClick={() => setPaused(!paused)} title={paused ? "繼續" : "暫停"}>
          {paused ? "▶" : "⏸"}
        </button>
        <button className="btn" onClick={() => setTheme(theme === "light" ? "dark" : "light")} title="切換主題">
          {theme === "light" ? "🌙" : "☀️"}
        </button>
        <button
          className="btn"
          onClick={() => useOfficeStore.getState().togglePanel()}
          title={panelOpen ? "收合面板,放大辦公室" : "展開面板"}
        >
          {panelOpen ? "⊞" : "⊟"}
        </button>
      </div>
    </header>
  );
}