// Standard Mode — 4 states with distinct narrative
function StandardMode({ stdState, setStdState, selectedSym, setSelectedSym, livePrice, onPositionClose, setHasOpenPosition, closedToast, onDismissToast, chartOverlay, overlayStyle }) {
  const [tf, setTf] = React.useState('M5');
  const [bpTab, setBpTab] = React.useState('positions');
  const [orderType, setOrderType] = React.useState('market');

  React.useEffect(() => {
    if (stdState === 'signal' || stdState === 'live' || stdState === 'watching') setTf('M5');
  }, [stdState]);

  const initialPosition = { sym: 'GOLD', dir: 'SELL', lots: 0.1, open: 4520.40, current: livePrice, sl: 4669.00, tp: null, pl: -((livePrice - 4520.40) * 10) };
  const newLivePosition = { sym: 'GOLD', dir: 'BUY', lots: 0.59, open: 4612.00, current: livePrice, sl: 4595.00, tp: 4645.00, pl: ((livePrice - 4612.00) * 5.9) };

  const positions = [initialPosition];
  if (stdState === 'live') positions.push(newLivePosition);
  const totalPL = positions.reduce((s, p) => s + p.pl, 0);

  const handleMWClick = (sym) => {
    setSelectedSym(sym);
    if (stdState === 'session' || stdState === 'watching') setStdState('watching');
  };
  const handlePasteSignal = () => setStdState('signal');
  const handleConfirm = () => { setStdState('live'); setHasOpenPosition(true); };
  const handleFlatten = () => onPositionClose && onPositionClose({ pl: 47.20, entry: 4612.00, exit: 4645.00, hold: '38 min', pct: 0.93 });

  const account = {
    balance: 10011.38,
    equity: 9062.38 + (stdState === 'live' ? newLivePosition.pl : 0),
    pl: -949.00 + (stdState === 'live' ? newLivePosition.pl : 0),
    margin: 2260.20,
    free: 6802.18,
  };

  const ctxLine = {
    session:  { text: 'Session open — scan for setup', color: 'var(--text-3)' },
    watching: { text: `👁 Watching ${selectedSym} on M5 — drop a signal or place manual order`, color: 'var(--blue)' },
    signal:   { text: '🎯 Signal received — review and confirm to enter the market', color: 'var(--blue)' },
    live:     { text: '● Position running — watching price action', color: 'var(--green)' },
  }[stdState];

  return (
    <div className="main">
      {/* LEFT SIDEBAR */}
      <div className="sidebar-left">
        <div className="section-h">Market Watch</div>
        <div className="market-watch">
          {INSTRUMENTS.filter(it => it.sym === 'GOLD').map(it => (
            <div key={it.sym} className={`mw-row ${selectedSym === it.sym ? 'active' : ''}`} onClick={() => handleMWClick(it.sym)}>
              <div className="mw-row-top">
                <div className="mw-sym">{it.sym}</div>
                <div className={`mw-pct ${it.pctDir}`}>{it.pctDir === 'up' ? '+' : ''}{it.pct.toFixed(2)}%</div>
              </div>
              <div className="mw-prices mono">
                <span className="bid">{it.bid.toFixed(2)}</span><span className="sep">/</span><span className="ask">{it.ask.toFixed(2)}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="section-h" style={{borderTop: '1px solid var(--border)'}}>Account</div>
        <div className="account">
          <div className="account-row"><span className="lbl">Balance</span><span className="val">${account.balance.toFixed(2)}</span></div>
          <div className="account-row"><span className="lbl">Equity</span><span className={`val ${account.equity < account.balance ? 'neg' : 'pos'}`}>${account.equity.toFixed(2)}</span></div>
          <div className="account-row"><span className="lbl">P&L</span><span className={`val ${account.pl < 0 ? 'neg' : 'pos'}`}>{account.pl < 0 ? '−' : '+'}${Math.abs(account.pl).toFixed(2)}</span></div>
          <div className="account-row"><span className="lbl">Margin</span><span className="val">${account.margin.toFixed(2)}</span></div>
          <div className="account-row"><span className="lbl">Free</span><span className="val">${account.free.toFixed(2)}</span></div>
        </div>
        <div className="leverage-row">
          <span style={{fontSize:11, color:'var(--text-2)'}}>Leverage</span>
          <select className="leverage-select"><option>1:20</option><option>1:50</option><option>1:100</option></select>
        </div>
        <div className="live-row"><span className="dot"></span> LIVE</div>
      </div>

      {/* CENTER + BOTTOM stacked vertically */}
      <div className="center-wrap">
      <div className="center">
        <div className="chart-header">
          <div className="chart-sym">{selectedSym}</div>
          <div className="tf-tabs">
            {['M1','M5','M15','M30','H1','H4','D1'].map(t => (
              <div key={t} className={`tf-tab ${tf === t ? 'active' : ''}`} onClick={() => setTf(t)}>{t}</div>
            ))}
          </div>
          <div className="ctx-line" style={{color: ctxLine.color}}>{ctxLine.text}</div>
          <div className="chart-quote">
            <span className="bid mono">{(livePrice - 0.05).toFixed(2)}</span>
            <span style={{color: 'var(--text-3)'}}>/</span>
            <span className="ask mono">{(livePrice + 0.05).toFixed(2)}</span>
          </div>
        </div>
        <div className="chart-body">
          <div className="chart-tools">
            <div className="chart-tool active"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 2l8 4-3.5 1.2L6.5 11 3 2z" stroke="currentColor" strokeWidth="1.4"/></svg></div>
            <div className="chart-tool"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.2"/></svg></div>
            <div className="chart-tool"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 11l10-8" stroke="currentColor" strokeWidth="1.4"/></svg></div>
            <div className="chart-tool"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="3" width="10" height="8" stroke="currentColor" strokeWidth="1.2"/></svg></div>
          </div>
          <div className="chart-svg-wrap">
            {tf === 'M5' ? (
              <MultiTFChart
                overlay={(stdState === 'signal' || stdState === 'live') ? (chartOverlay || { entry: 4612.00, sl: 4595.00, tp: 4645.00 }) : null}
                overlayStyle={overlayStyle}
                currentPrice={livePrice}
                totalWidth={900} height={420}
              />
            ) : (
              <CandleChart
                timeframe={tf}
                currentPrice={livePrice}
                overlay={(stdState === 'signal' || stdState === 'live') ? (chartOverlay || { entry: 4612.00, sl: 4595.00, tp: 4645.00 }) : null}
                overlayStyle={overlayStyle}
                width={900} height={420}
              />
            )}
            {/* State 4 overlay — closed toast on chart */}
            {closedToast && (
              <div className="chart-overlay-card">
                <div className="coc-h">✓ GOLD LONG · CLOSED</div>
                <div className="coc-pl">+${closedToast.pl.toFixed(2)} <span className="coc-pct">· +{closedToast.pct.toFixed(2)}%</span></div>
                <div className="coc-meta">{closedToast.entry.toFixed(2)} → {closedToast.exit.toFixed(2)} · held {closedToast.hold}</div>
                <div className="coc-limit-row">Daily limit: <span style={{color:'#EF4444', fontWeight:600}}>−$47</span> of $200 used</div>
                <button className="coc-back" onClick={onDismissToast}>← Back to watching</button>
              </div>
            )}
          </div>
        </div>
      </div>
      {/* close .center */}

      {/* BOTTOM PANEL inside center-wrap */}
      <div className="bottom-panel">
        <div className="bp-tabs">
          {[['positions','Positions'], ['pending','Pending Orders'], ['history','History'], ['news','News']].map(([id,lbl]) => (
            <div key={id} className={`bp-tab ${bpTab === id ? 'active' : ''}`} onClick={() => setBpTab(id)}>{lbl}</div>
          ))}
          <div className="bp-summary">
            <span style={{color:'var(--text-3)', marginRight:8}}>OPEN ({positions.length}) · P&L:</span>
            <span style={{color: totalPL < 0 ? '#EF4444' : 'var(--green)', fontFamily:'JetBrains Mono, monospace', fontWeight: 700}}>
              {totalPL < 0 ? '−' : '+'}${Math.abs(totalPL).toFixed(2)}
            </span>
          </div>
        </div>
        <div className="bp-table">
          {bpTab === 'positions' && (
            <>
              <div className="bp-table-header">
                <div>Symbol</div><div>Dir</div><div>Lots</div><div>Open</div><div>Current</div><div>P&L</div><div>SL</div><div>TP</div><div></div>
              </div>
              {positions.map((p, i) => (
                <div key={i} className="bp-table-row">
                  <div className="sym">{p.sym}</div>
                  <div className={`dir ${p.dir.toLowerCase()}`}>{p.dir}</div>
                  <div>{p.lots.toFixed(2)}</div>
                  <div>{p.open.toFixed(2)}</div>
                  <div>{p.current.toFixed(2)}</div>
                  <div className={`pl ${p.pl < 0 ? 'neg' : 'pos'}`}>{p.pl < 0 ? '−' : '+'}${Math.abs(p.pl).toFixed(2)}</div>
                  <div>{p.sl ? p.sl.toFixed(2) : '—'}</div>
                  <div>{p.tp ? p.tp.toFixed(2) : '—'}</div>
                  <div><button className="close-x" onClick={() => i === 1 && handleFlatten()}>×</button></div>
                </div>
              ))}
            </>
          )}
          {bpTab === 'pending' && <div style={{padding:24, color:'var(--text-3)', fontSize:12}}>No pending orders.</div>}
          {bpTab === 'history' && <div style={{padding:24, color:'var(--text-3)', fontSize:12}}>No closed positions today.</div>}
          {bpTab === 'news' && (
            <div style={{padding:'14px 16px'}}>
              <div style={{fontSize:12, marginBottom:8}}><b>USD weakens on softer CPI print</b> <span style={{color:'var(--text-3)', marginLeft:8}}>· 12 min ago</span></div>
              <div style={{fontSize:12, marginBottom:8}}><b>Gold breaks above $4,615</b> <span style={{color:'var(--text-3)', marginLeft:8}}>· 24 min ago</span></div>
              <div style={{fontSize:12}}><b>FOMC minutes due 14:00 GMT</b> <span style={{color:'var(--text-3)', marginLeft:8}}>· 1 hr ago</span></div>
            </div>
          )}
        </div>
      </div>
      {/* close center-wrap */}
      </div>

      {/* RIGHT SIDEBAR — fixed 240px, never expands */}
      <div className={`sidebar-right state-${stdState}`}>
        {/* Daily risk card — always visible at top of sidebar */}
        <div className="sidebar-daily-risk">
          <div className="sidebar-daily-risk-row">
            <span className="sidebar-daily-risk-label">Daily Risk Used</span>
            <span className="sidebar-daily-risk-val">−$47</span>
          </div>
          <div className="daily-meter-bar" style={{marginBottom:4}}>
            <div className="daily-meter-fill" style={{width:'24%'}}></div>
          </div>
          <div className="sidebar-daily-risk-pct">$47 of $200 · 24% consumed</div>
        </div>

        {/* SESSION (State 1) — empty / dimmed ticket with big paste CTA */}
        {stdState === 'session' && (
          <>
            <div className="ticket-header">
              <span style={{opacity: 0.6}}>{selectedSym} — NEW ORDER</span>
              <span className="ticket-status idle">IDLE</span>
            </div>
            <div className="ticket-content dimmed">
              <div className="bid-ask-row">
                <div className="bid-ask-cell sell">
                  <div className="lbl">SELL</div>
                  <div className="px mono">{(livePrice - 0.05).toFixed(2)}</div>
                </div>
                <div className="bid-ask-cell buy">
                  <div className="lbl">BUY</div>
                  <div className="px mono">{(livePrice + 0.05).toFixed(2)}</div>
                </div>
              </div>
              <div className="empty-prompt">
                <div className="empty-icon">📋</div>
                <div className="empty-text">Drop a Telegram signal here<br/>or click below to paste</div>
              </div>
              <button className="btn-paste-large pulsing" onClick={handlePasteSignal}>
                Paste Signal <kbd>⌘V</kbd>
              </button>
              <div className="empty-foot">
                <span style={{color:'var(--text-3)', fontSize:11}}>or</span>
                <button className="btn btn-secondary" style={{marginTop:8, fontSize:12}} onClick={() => setStdState('signal')}>
                  Place manual order
                </button>
              </div>
            </div>
          </>
        )}

        {/* WATCHING — spread banner + paste-primary ticket */}
        {stdState === 'watching' && (
          <>
            <div className="ticket-header">
              <span style={{color:'var(--blue)'}}>{selectedSym} — WATCHING</span>
              <span className="ticket-status watching">M5</span>
            </div>
            <div className="ticket-content">
              <div className="spread-banner">
                <div className="spread-banner-h">Spread <span className="mono" style={{color:'var(--green)'}}>0.10 pts ✓</span></div>
                <div className="spread-banner-row">
                  <span className="lbl">Bid</span>
                  <span className="bid mono">{(livePrice - 0.05).toFixed(2)}</span>
                </div>
                <div className="spread-banner-row">
                  <span className="lbl">Ask</span>
                  <span className="ask mono">{(livePrice + 0.05).toFixed(2)}</span>
                </div>
              </div>

              <button className="btn-paste-large pulsing" onClick={handlePasteSignal} style={{marginTop: 4}}>
                Paste Signal <kbd>⌘V</kbd>
              </button>

              <div className="empty-foot">
                <span style={{color:'var(--text-3)', fontSize:11}}>or</span>
                <button className="btn btn-secondary" style={{marginTop:8, fontSize:12}} onClick={() => setStdState('signal')}>
                  Place manual order
                </button>
              </div>

              <div style={{marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--border)', fontSize: 11, color: 'var(--text-3)', lineHeight: 1.5}}>
                <div style={{textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 6, color: 'var(--text-2)'}}>Why watch first</div>
                Confirm spread is tight, price action is clean, and you have a thesis before committing risk.
              </div>
            </div>
          </>
        )}

        {/* SIGNAL (State 2) — lit-up green border, parsed banner, pulsing confirm */}
        {stdState === 'signal' && (
          <>
            <div className="ticket-header">
              <span style={{color:'var(--green)'}}>{selectedSym} — SIGNAL READY</span>
              <span className="ticket-status active">PARSED</span>
            </div>
            <div className="ticket-content">
              <div className="signal-banner">
                <div className="ok">✓ Signal parsed</div>
                <div className="raw">"XAUUSD buy 4612 SL 4595 TP 4645"</div>
                <div className="from">via Telegram clipboard · 2s ago</div>
              </div>

              <div className="bid-ask-row">
                <div className="bid-ask-cell sell">
                  <div className="lbl">SELL</div>
                  <div className="px mono">{(livePrice - 0.05).toFixed(2)}</div>
                </div>
                <div className="bid-ask-cell buy">
                  <div className="lbl">BUY</div>
                  <div className="px mono">{(livePrice + 0.05).toFixed(2)}</div>
                </div>
              </div>

              <div className="order-tabs">
                {['Market','Limit','Stop','Stop Limit'].map(t => {
                  const id = t.toLowerCase().replace(' ','-');
                  return <button key={t} className={`order-tab ${orderType === id ? 'active' : ''}`} onClick={() => setOrderType(id)}>{t}</button>;
                })}
              </div>

              <div className="field">
                <label className="field-label">Entry</label>
                <input className="field-input autofilled mono" defaultValue="4,612.00" />
              </div>
              <div className="field">
                <label className="field-label">Stop Loss</label>
                <input className="field-input autofilled mono" defaultValue="4,595.00" />
              </div>
              <div className="field">
                <label className="field-label">Take Profit</label>
                <input className="field-input autofilled mono" defaultValue="4,645.00" />
              </div>

              <div className="risk-badge-chip">
                <span className="dot"></span>
                <span>1% risk · $100 · 0.59 lots</span>
              </div>

              <div className="rr-line"><span>R : R</span><span className="v">1 : 2.0</span></div>
              <div className="rr-line"><span>Spread</span><span className="v" style={{color:'var(--green)'}}>0.10 pts ✓</span></div>

              <button className="btn btn-buy pulsing" style={{marginTop: 14, fontSize:14}} onClick={handleConfirm}>
                CONFIRM BUY GOLD
              </button>
              <button className="btn-cancel-soft" onClick={() => setStdState('session')}>Cancel signal</button>
            </div>
          </>
        )}

        {/* LIVE (State 3) — position management */}
        {stdState === 'live' && (
          <>
            <div className="ticket-header">
              <span style={{color: 'var(--green)'}}>● {selectedSym} · LONG · OPEN</span>
              <span className="ticket-status running">RUNNING</span>
            </div>
            <div className="ticket-content">
              <div className={`posmgmt-pl ${newLivePosition.pl >= 0 ? 'pos' : 'neg'}`} style={{marginTop:4, marginBottom:6}}>
                {newLivePosition.pl >= 0 ? '+' : '−'}${Math.abs(newLivePosition.pl).toFixed(2)}
              </div>
              <div className="pos-r-chip">
                <span className="r-value">+0.7R</span>
                <span className="r-sep">·</span>
                <span className="r-time">18 min in trade</span>
              </div>
              <div className="risk-badge-chip" style={{marginBottom: 8}}>
                <span className="dot"></span>
                <span>Deployed: $100 (1%)</span>
              </div>
              <div className="posmgmt-row"><span className="lbl">Entry</span><span className="val mono">4,612.00</span></div>
              <div className="posmgmt-row"><span className="lbl">Current</span><span className="val mono">{livePrice.toFixed(2)}</span></div>
              <div className="posmgmt-row"><span className="lbl">Lots</span><span className="val mono">0.59</span></div>
              <div style={{borderTop:'1px solid var(--border)', paddingTop:10}}>
                <div className="posmgmt-row"><span className="lbl">Stop Loss</span><span className="val mono">4,595.00 ✎</span></div>
                <div className="posmgmt-row"><span className="lbl">Take Profit</span><span className="val mono">4,645.00 ✎</span></div>
                <div className="posmgmt-row"><span className="lbl">R : R</span><span className="val mono">1 : 2.0</span></div>
                <div className="posmgmt-row"><span className="lbl">Auto-close at</span><span className="val mono" style={{color:'var(--text-3)'}}>4,512.00</span></div>
              </div>
              <div className="posmgmt-actions">
                <button>Reverse</button>
                <button>Breakeven</button>
                <button>Trail SL</button>
                <button className="flatten" onClick={handleFlatten}>Flatten</button>
              </div>
            </div>
          </>
        )}
      </div>

    </div>
  );
}

window.StandardMode = StandardMode;