/* topbar.jsx — slim top nav with brand, breadcrumbs, clock, system status, tweaks hint */
function Topbar({ theme, onThemeChange }) {
  const [clock, setClock] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setClock(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hms = clock.toISOString().slice(11, 19);

  return (
    <header className="topbar">
      <style>{`
        .topbar {
          display: flex; align-items: center; gap: var(--pad-4);
          padding: 0 var(--pad-4);
          height: 44px;
          background: var(--bg-elev);
          border-bottom: 1px solid var(--border);
          flex-shrink: 0;
        }
        .brand { display: flex; align-items: center; gap: 10px; }
        .brand__mark {
          width: 22px; height: 22px;
          border-radius: 4px;
          background: linear-gradient(135deg, var(--accent), var(--accent-2));
          color: var(--accent-fg);
          font-family: var(--font-mono);
          font-weight: 800; font-size: 11px;
          display: grid; place-items: center;
          position: relative;
        }
        .brand__mark::after {
          content: ""; position: absolute; inset: -3px; border-radius: 6px;
          border: 1px solid var(--accent);
          opacity: .35;
        }
        .brand__name {
          font-family: var(--font-display);
          font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
          color: var(--fg);
        }
        .brand__tag {
          font-family: var(--font-mono); font-size: 9.5px;
          color: var(--accent); letter-spacing: 0.12em;
          padding: 1px 5px; border-radius: 2px;
          background: var(--accent-soft);
          border: 1px solid var(--accent-line);
        }
        .topbar__sep { width: 1px; height: 18px; background: var(--border); }
        .topbar__crumbs {
          display: flex; align-items: center; gap: 8px;
          font-family: var(--font-mono); font-size: var(--fs-xs);
          color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase;
        }
        .topbar__crumb-sep { color: var(--fg-faint); }
        .topbar__crumb--active { color: var(--accent); }
        .topbar__nav {
          display: flex; gap: 0; margin-left: 12px;
        }
        .topbar__nav button {
          appearance: none; background: transparent; border: 0;
          color: var(--fg-muted); cursor: pointer;
          font-family: var(--font-mono); font-size: var(--fs-xs);
          letter-spacing: 0.1em; text-transform: uppercase;
          padding: 6px 12px;
          border-bottom: 2px solid transparent;
          transition: color .12s, border-color .12s;
        }
        .topbar__nav button:hover { color: var(--fg); }
        .topbar__nav button[data-active="true"] {
          color: var(--accent);
          border-bottom-color: var(--accent);
        }
        .topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--pad-3); }
        .topbar__clock {
          font-family: var(--font-mono); font-size: 12px;
          color: var(--fg-2); letter-spacing: 0.06em;
          display: flex; align-items: center; gap: 6px;
        }
        .topbar__clock-tz {
          font-size: 9.5px; color: var(--fg-dim); letter-spacing: 0.1em;
        }
        .topbar__status {
          display: flex; align-items: center; gap: 6px;
          padding: 3px 9px;
          border: 1px solid var(--border);
          border-radius: 4px;
          background: var(--bg-panel);
          font-family: var(--font-mono); font-size: 10px;
          color: var(--gain); letter-spacing: 0.1em; text-transform: uppercase;
        }
        .theme-switch {
          display: inline-flex;
          background: var(--bg-panel);
          border: 1px solid var(--border);
          border-radius: 4px;
          padding: 2px;
          gap: 2px;
        }
        .theme-switch button {
          appearance: none; background: transparent; border: 0;
          font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--fg-muted);
          padding: 3px 8px; border-radius: 3px;
          cursor: pointer;
        }
        .theme-switch button[data-active="true"] {
          background: var(--bg-hover);
          color: var(--accent);
        }
        .avatar {
          width: 26px; height: 26px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--accent), var(--accent-2));
          color: var(--accent-fg);
          font-family: var(--font-mono); font-size: 10px; font-weight: 700;
          display: grid; place-items: center;
          border: 1px solid var(--border-strong);
        }
      `}</style>

      <div className="brand">
        <div className="brand__mark">N</div>
        <span className="brand__name">NeoTrade</span>
        <span className="brand__tag">v2 · OPS</span>
      </div>

      <div className="topbar__sep"></div>

      <div className="topbar__nav">
        <button data-active="true">Command</button>
        <button>Signals</button>
        <button>Markets</button>
        <button>Agents</button>
        <button>Exchanges</button>
        <button>Risk</button>
        <button>History</button>
      </div>

      <div className="topbar__right">
        <span className="topbar__status">
          <span className="live-dot"></span>
          All systems nominal
        </span>
        <div className="topbar__clock">
          <span className="topbar__clock-tz">UTC</span>
          <span>{hms}</span>
        </div>
        <div className="theme-switch">
          {["dark", "cyber", "light"].map(t => (
            <button key={t} data-active={theme === t} onClick={() => onThemeChange(t)}>{t}</button>
          ))}
        </div>
        <div className="avatar">JM</div>
      </div>
    </header>
  );
}

window.Topbar = Topbar;