// Top bar: logo, mode toggle, instrument quote, daily loss meter, trust badge, user
const { useState, useEffect, useRef } = React;

function TopBar({ mode, setMode, instrument, onResetState }) {
  const stdRef = useRef(null);
  const gzRef = useRef(null);
  const [pillStyle, setPillStyle] = useState({});

  useEffect(() => {
    const el = mode === 'standard' ? stdRef.current : gzRef.current;
    if (el) {
      setPillStyle({ left: el.offsetLeft, width: el.offsetWidth });
    }
  }, [mode]);

  return (
    <div className="topbar">
      <div className="logo">
        <div className="logo-mark">i</div>
        <div className="logo-text">Investabl<span className="logo-dot"></span></div>
      </div>
      <div className="demo-badge">DEMO</div>

      <div className="mode-toggle">
        <div className="pill" style={pillStyle}></div>
        <button ref={stdRef} className={mode === 'standard' ? 'active' : ''} onClick={() => { setMode('standard'); onResetState && onResetState('standard'); }}>Standard</button>
        <button ref={gzRef} className={mode === 'genz' ? 'active' : ''} onClick={() => { setMode('genz'); onResetState && onResetState('genz'); }}>Feed</button>
      </div>

      <div className="tb-instrument mono">
        <span className="sym">{instrument.sym}</span>
        <span className="price">{instrument.ask.toFixed(2)}</span>
        <span style={{color: instrument.pctDir === 'up' ? '#22C55E' : '#EF4444', fontSize: 11}}>
          {instrument.pctDir === 'up' ? '▲' : '▼'} {Math.abs(instrument.pct).toFixed(2)}%
        </span>
      </div>

<div className="user-chip">
        <div className="user-avatar">A</div>
        <span>apurv@intract.buzz</span>
        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="#9CA3AF" strokeWidth="1.5" strokeLinecap="round"/></svg>
      </div>
    </div>
  );
}

window.TopBar = TopBar;