// Topbar — breadcrumb, command, theme toggle
function Topbar({ active, theme, setTheme, onNewTask }) {
  const labels = {
    dashboard: "Dashboard",
    agents: "Agents",
    org: "Organization",
    tasks: "Tasks",
    trading: "Trading",
    terminal: "Terminal",
    settings: "Settings",
  };
  return (
    <header style={{
      height: 56, flex: "none",
      borderBottom: "1px solid var(--line-1)",
      display: "flex", alignItems: "center",
      padding: "0 24px",
      gap: 16,
      position: "relative",
      backdropFilter: "blur(18px)",
      background: "linear-gradient(180deg, rgba(255,255,255,0.015), transparent)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-3)", fontSize: 12.5 }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>Gastronaut.ai</span>
        <span style={{ opacity: 0.4 }}>/</span>
        <span style={{ color: "var(--ink-1)" }}>{labels[active]}</span>
      </div>

      <div style={{ flex: 1 }}/>

      {/* Command search */}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "6px 10px",
        width: 300,
        border: "1px solid var(--line-2)",
        borderRadius: 999,
        background: "rgba(255,255,255,0.025)",
        color: "var(--ink-3)",
        fontSize: 12.5,
      }}>
        <Icon.Search size={14}/>
        <span style={{ flex: 1 }}>Search anything — agents, tasks, files, trades…</span>
        <span className="kbd">⌘ K</span>
      </div>

      {/* Theme toggle */}
      <button
        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        title="Toggle theme"
        style={{
          width: 32, height: 32, borderRadius: 8,
          border: "1px solid var(--line-2)",
          background: "rgba(255,255,255,0.025)",
          color: "var(--ink-2)",
          display: "grid", placeItems: "center",
          cursor: "pointer",
        }}>
        {theme === "dark" ? <Icon.Sun size={15}/> : <Icon.Moon size={15}/>}
      </button>

      <button className="btn primary" onClick={onNewTask}>
        <Icon.Plus size={14}/>
        <span>New task</span>
      </button>
    </header>
  );
}

window.Topbar = Topbar;