/* shell.jsx — Avero Operator Console — topbar, tab bar, footer */

const TAB_IDS = ['monitor', 'charts', 'screeners', 'ai', 'trading', 'risk', 'system'];
const TAB_LABELS = { monitor: 'MONITOR', charts: 'CHARTS', screeners: 'SCREENS', ai: 'AI', trading: 'TRADE', risk: 'RISK', system: 'SYSTEM' };

function Topbar({ kpi, market, setMarket, botRunning, onStartStop, paper, setPaper, clock, onOpenAdmin, onNewBot }) {
  const tone = market === 'crash' ? 'amber' : market === 'boom' ? 'green' : 'cyan';
  const marketLabel = { neutral: 'NEUTRAL', boom: 'BOOM', crash: 'CRASH' }[market];
  const cycleMarket = () => setMarket(m => m === 'neutral' ? 'boom' : m === 'boom' ? 'crash' : 'neutral');
  return (
    <div className="topbar">
      <div className="tb-row-kpi">
        <div className="brand">
          <AveroMark size={28} />
          <div>
            <div className="brand-name">AVERO</div>
            <div className="brand-sub">The Console That Knows</div>
          </div>
        </div>
        <div className="topbar-strip">
          <div className="tb-stat"><div className="label">EQUITY</div><div className="v">${fmtNum(kpi.equity, 2)}</div></div>
          <div className="tb-stat"><div className="label">DAY P&amp;L</div><div className="v" style={{ color: kpi.dayPnL >= 0 ? 'var(--green)' : 'var(--red)' }}>{kpi.dayPnL >= 0 ? '+' : '−'}${fmtNum(Math.abs(kpi.dayPnL), 2)} <span style={{ fontSize: 9, opacity: .7 }}>{fmtPct(kpi.dayPnLPct)}</span></div></div>
          <div className="tb-stat"><div className="label">CONFIDENCE</div><div className="v">{kpi.confidence.toFixed(1)}%</div></div>
          <div className="tb-stat"><div className="label">POSITIONS</div><div className="v">{kpi.posCount} <span className="dim" style={{ fontSize: 10, marginLeft: 6, color: 'var(--text-faint)' }}>/ 8</span></div></div>
          <div className="tb-stat"><div className="label">FLOOR</div><div className="v">${fmtNum(kpi.floor, 2)}</div></div>
        </div>
      </div>
      <div className="tb-row-ctrls">
        <div className="market-pill" onClick={cycleMarket} style={{ cursor: 'pointer' }} title="Cycle market state"><LED tone={tone} /><span>MARKET ◆ {marketLabel}</span></div>
        <button className="btn btn-cyan" style={{ padding: '4px 12px' }} onClick={onNewBot} title="Deploy a new bot">+ NEW BOT</button>
        <button className="btn" style={{ padding: '4px 11px' }} onClick={onOpenAdmin} title="Algorithm control">⚙ ALGOS</button>
        <span className="bot-status-pill idle" style={{ cursor: 'pointer' }} onClick={() => setPaper(p => !p)} title="Toggle paper/live">{paper ? '◷ PAPER' : '● LIVE'}</span>
        {!botRunning
          ? <button className="btn-trading btn-start" onClick={onStartStop}>▶ START</button>
          : <button className="btn-trading btn-stop" onClick={onStartStop}>■ STOP</button>}
        <button className={`btn-trading btn-estop ${kpi.posCount > 0 ? 'estop-pulse' : 'btn-disabled'}`} disabled={kpi.posCount === 0}>✕ E-STOP</button>
        <div className="clock"><span className="label">UTC</span><span>{fmtTime(clock)}</span></div>
      </div>
    </div>
  );
}

function TabBar({ active, setActive, botRunning }) {
  return (
    <div className="tabs">
      {TAB_IDS.map(id => (
        <button key={id} className="tab" data-active={active === id} onClick={() => setActive(id)}>
          <span>{TAB_LABELS[id]}</span>
          {active === id && <div className="tab-active-line" />}
        </button>
      ))}
      <div className="tabs-right">
        <span className={`bot-status-pill ${botRunning ? 'live' : 'idle'}`}>{botRunning ? '●' : '◷'} {botRunning ? 'LIVE' : 'IDLE'}</span>
      </div>
    </div>
  );
}

const MISSION = 'AVERO · THE CONSOLE THAT KNOWS · 31 AI MODELS · ANTI-REPAINT GUARANTEE · SELF-AWARE CIRCUIT BREAKERS · VaR RISK MANAGEMENT · 6 ASSET CLASSES · ';
function Footer({ botRunning }) {
  return (
    <div className="footer">
      <div className="seg"><LED tone={botRunning ? 'green' : 'cyan'} /> {botRunning ? 'ENGINE LIVE' : 'ENGINE IDLE'}</div>
      <div className="seg">LAT 42ms</div>
      <div className="seg">v3.1.0</div>
      <div className="seg seg-mission"><div className="seg-mission-inner">{MISSION}{MISSION}</div></div>
      <div className="right"><div className="seg" style={{ color: 'var(--green)' }}><LED tone="green" /> WS CONNECTED</div></div>
    </div>
  );
}

/* ── Left sidebar — primary navigation (collapsible) ───────────────────────── */
const NAV = [
  { id: 'monitor', label: 'Overview', icon: '◫', tone: 'cyan' },
  { id: 'bots', label: 'Bots Library', icon: '⬡', tone: 'green' },
  { id: 'screeners', label: 'Market Data', icon: '≣', tone: 'cyan' },
  { id: 'charts', label: 'Performance', icon: '◔', tone: 'violet' },
  { id: 'risk', label: 'Risk & Settings', icon: '◈', tone: 'amber' },
  { id: 'system', label: 'Logs & Alerts', icon: '☰', tone: 'cyan' },
  { id: 'support', label: 'Support', icon: '?', tone: 'cyan' },
];

function Sidebar({ active, setActive, collapsed, setCollapsed, botCount }) {
  return (
    <aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
      <button className="sb-toggle" onClick={() => setCollapsed(c => !c)} title={collapsed ? 'Expand' : 'Collapse'}>{collapsed ? '»' : '«'}</button>
      <nav className="sb-nav">
        {NAV.map(n => (
          <button key={n.id} className="sb-item" data-active={active === n.id} onClick={() => setActive(n.id)} title={n.label}>
            <span className="sb-icon">{n.icon}</span>
            <span className="sb-label">{n.label}</span>
            {n.id === 'bots' && botCount != null && <span className="sb-badge">{botCount}</span>}
          </button>
        ))}
      </nav>
      <div className="sb-foot">
        <span className="sb-icon"><LED tone="green" /></span>
        <span className="sb-label">All systems nominal</span>
      </div>
    </aside>
  );
}

Object.assign(window, { TAB_IDS, TAB_LABELS, NAV, Sidebar, Topbar, TabBar, Footer });