// Standard mode — Swing & Position Trader (6 screens)
const { useState: useStd, useEffect: useEffectStd } = React;

// ── Left nav + instrument sidebar ───────────────────────────────────────────
function SwingLeftNav({ stdState, setStdState, selectedSym, setSelectedSym, livePrice, hasOpenPosition }) {
  const navItems = [
    { id: 'watchlist', icon: '◧',  label: 'Watchlist' },
    { id: 'chart',     icon: '📈', label: 'Chart' },
    { id: 'macro',     icon: '🌍', label: 'Macro' },
    { id: 'journal',   icon: '📓', label: 'Journal' },
  ];

  return (
    <div className="sidebar-left">
      <div className="swing-nav">
        {navItems.map(n => (
          <div key={n.id} className={`swing-nav-item${stdState === n.id ? ' active' : ''}`}
               onClick={() => setStdState(n.id)}>
            <span className="nav-icon">{n.icon}</span>
            {n.label}
            {n.id === 'journal' && hasOpenPosition && <span className="nav-badge">1</span>}
          </div>
        ))}
      </div>

      <div className="section-h">WATCHLIST</div>
      <div className="mw-compact">
        {INSTRUMENTS.map(inst => {
          const price = inst.sym === 'GOLD' ? livePrice : inst.ask;
          const isUp  = inst.pctDir === 'up';
          return (
            <div key={inst.sym}
                 className={`mw-compact-row${selectedSym === inst.sym ? ' active' : ''}`}
                 onClick={() => { setSelectedSym(inst.sym); setStdState('chart'); }}>
              <div className="mw-compact-top">
                <div className="mw-sym">
                  {inst.sym}
                  {inst.sym === 'GOLD' && hasOpenPosition && (
                    <span style={{display:'inline-block',width:5,height:5,borderRadius:'50%',background:'#22C55E',marginLeft:5,verticalAlign:'middle',boxShadow:'0 0 6px rgba(34,197,94,0.6)'}}></span>
                  )}
                </div>
                <div className={`mw-price ${isUp ? 'up' : 'down'}`}>{price.toFixed(inst.sym === 'EUR/USD' ? 4 : 2)}</div>
              </div>
              <div className="mw-funding">
                <span>Fund/day</span>
                <span className={`cost${inst.fundingCostPerDay < 0 ? '' : ' credit'}`}>
                  {inst.fundingCostPerDay < 0 ? '-' : '+'}${Math.abs(inst.fundingCostPerDay).toFixed(2)}
                </span>
                {inst.alert && <span className="mw-alert-dot" style={{marginLeft:'auto'}}></span>}
              </div>
            </div>
          );
        })}
      </div>

      <div className="account">
        <div className="account-row"><span className="lbl">Balance</span><span className="val">$9,843.20</span></div>
        <div className="account-row"><span className="lbl">Equity</span><span className="val pos">$10,155.60</span></div>
        <div className="account-row"><span className="lbl">Floating</span><span className="val pos">+$312.40</span></div>
        <div className="account-row"><span className="lbl">Margin</span><span className="val">$184.24</span></div>
      </div>
    </div>
  );
}

// ── Watchlist center ─────────────────────────────────────────────────────────
function WatchlistCenter({ setStdState, setSelectedSym, livePrice }) {
  const sparks = {
    GOLD:    genSpark('up'),
    SILVER:  genSpark('up'),
    'US30':  genSpark('down'),
    'EUR/USD': genSpark('down'),
  };

  return (
    <div className="watchlist-center">
      <div className="watchlist-center-h">Good morning, Apurv</div>
      <div className="watchlist-center-sub">Your positions are intact · DXY weakness thesis holding</div>

      {/* Theme baskets */}
      <div className="wl-section-h">THEME BASKETS</div>
      <div className="baskets-grid">
        {THEME_BASKETS.map(b => (
          <div key={b.id} className={`basket-card ${b.aiStatus}`}>
            <div className="basket-card-top">
              <div className="basket-name">{b.emoji} {b.name}</div>
              <span className={`basket-status-pill ${b.aiStatus}`}>
                {b.aiStatus === 'intact' ? '✓ INTACT' : '● WATCHING'}
              </span>
            </div>
            <div className="basket-legs">
              {b.legs.map(l => `${l.sym} ${l.dir}`).join(' · ')}
            </div>
            {b.basketPL > 0
              ? <div className="basket-pl">+${b.basketPL.toFixed(2)}</div>
              : <div className="basket-pl zero">No position</div>
            }
            {b.daysHeld > 0
              ? <div className="basket-days">{b.daysHeld} days held · +{b.basketPLPct}%</div>
              : <div className="basket-days" style={{color:'var(--text-3)'}}>Monitoring setup</div>
            }
            <div className="basket-ai-note">
              <span className="ai-dot">🤖</span>
              {b.aiNote}
            </div>
            {b.weeklyReviewDue && (
              <div className="basket-review-chip">⚡ Weekly review due</div>
            )}
            <div className="basket-actions">
              {b.basketPL > 0
                ? <>
                    <button className="basket-btn primary" onClick={() => setStdState('live')}>Manage</button>
                    <button className="basket-btn secondary">Review thesis</button>
                  </>
                : <>
                    <button className="basket-btn blue" onClick={() => { setSelectedSym('GOLD'); setStdState('chart'); }}>Research</button>
                    <button className="basket-btn secondary">Set alert</button>
                  </>
              }
            </div>
          </div>
        ))}
      </div>

      {/* Watchlist table */}
      <div className="wl-section-h">INSTRUMENTS</div>
      <table className="wl-table">
        <thead>
          <tr>
            <th>Symbol</th>
            <th className="num">Price</th>
            <th className="num">Daily %</th>
            <th className="num">Fund/day</th>
            <th style={{textAlign:'center'}}>Alert</th>
            <th style={{textAlign:'right'}}>7D Trend</th>
          </tr>
        </thead>
        <tbody>
          {INSTRUMENTS.map(inst => {
            const price = inst.sym === 'GOLD' ? livePrice : inst.ask;
            const isUp = inst.pctDir === 'up';
            return (
              <tr key={inst.sym} onClick={() => { setSelectedSym(inst.sym); setStdState('chart'); }}>
                <td>
                  <div className="wl-sym">
                    {inst.sym}
                    {inst.sym === 'GOLD' && <span className="wl-pos-dot"></span>}
                  </div>
                </td>
                <td className="wl-price">{price.toFixed(inst.sym === 'EUR/USD' ? 4 : 2)}</td>
                <td><div className={`wl-pct ${isUp ? 'up' : 'down'}`}>{isUp ? '+' : ''}{inst.pct.toFixed(2)}%</div></td>
                <td className="wl-funding-cell">
                  <span className={`wl-funding-val${inst.fundingCostPerDay < 0 ? '' : ' credit'}`}>
                    {inst.fundingCostPerDay < 0 ? '-' : '+'}${Math.abs(inst.fundingCostPerDay).toFixed(2)}/day
                  </span>
                </td>
                <td className="wl-alert-cell">
                  {inst.alert
                    ? <span className="wl-alert-set">🔔 {inst.alert.toFixed(2)}</span>
                    : <span className="wl-alert-none">—</span>
                  }
                </td>
                <td className="wl-spark-cell" style={{textAlign:'right'}}>
                  <Sparkline data={sparks[inst.sym]} color={isUp ? '#22C55E' : '#EF4444'} width={80} height={28} />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ── Watchlist right panel ────────────────────────────────────────────────────
function WatchlistRight({ livePrice, hasOpenPosition, unrealizedPL, setStdState }) {
  return (
    <>
      <div className="ticket-header">OPEN POSITIONS</div>
      <div className="ticket-content" style={{padding:0}}>
        {hasOpenPosition ? (
          <div className="wl-right-section">
            <div className="open-pos-mini">
              <div className="open-pos-mini-top">
                <div className="open-pos-mini-sym">GOLD</div>
                <div className="open-pos-mini-dir">LONG</div>
              </div>
              <div className="open-pos-mini-pl">{fmtMoney(unrealizedPL)}</div>
              <div className="open-pos-mini-meta">0.07 lots · 3 days held</div>
              <div style={{marginTop:8}}>
                <button className="btn btn-secondary" style={{padding:'7px'}} onClick={() => setStdState('live')}>Manage position →</button>
              </div>
            </div>
          </div>
        ) : (
          <div className="wl-right-section">
            <div style={{textAlign:'center', padding:'20px 0', color:'var(--text-3)'}}>
              <div style={{fontSize:24, marginBottom:8}}>◎</div>
              <div style={{fontSize:12}}>No open positions</div>
              <div style={{fontSize:11, marginTop:4}}>Click an instrument to research a setup</div>
            </div>
          </div>
        )}

        {/* Weekend gap warning */}
        <div className="wl-right-section">
          <div className="wl-right-h">GAP RISK</div>
          <div className="gap-chip">
            <div className="gap-chip-icon">⚠️</div>
            <div className="gap-chip-body">
              <strong>Weekend gap alert</strong> · If GOLD opens below <strong>2,610</strong> Sunday, your SL at 2,590 may fill at a worse price.
            </div>
          </div>
        </div>

        {/* Alert overview */}
        <div className="wl-right-section">
          <div className="wl-right-h">ALERTS SET</div>
          <div className="alert-row">
            <span className="sym">SILVER</span>
            <span className="level">33.00</span>
            <span className="type">Price alert</span>
          </div>
          <div style={{marginTop:10}}>
            <button className="btn btn-secondary" style={{padding:'7px', fontSize:11}}>+ Add alert</button>
          </div>
        </div>

        {/* Macro digest teaser */}
        <div className="wl-right-section">
          <div className="wl-right-h">MACRO DIGEST</div>
          <div className="ai-card" style={{padding:12}}>
            <div className="ai-card-h" style={{marginBottom:8}}>🤖 Today's view</div>
            <div style={{fontSize:11, color:'var(--text-2)', lineHeight:1.5}}>DXY at 103.8, US10Y at 4.31%. Both support your GOLD long thesis.</div>
            <button className="back-link" style={{paddingLeft:0, marginTop:8, display:'block'}} onClick={() => setStdState('macro')}>Full macro dashboard →</button>
          </div>
        </div>
      </div>
    </>
  );
}

// ── Chart center ─────────────────────────────────────────────────────────────
function ChartCenter({ livePrice, overlay, overlayStyle, selectedSym, setStdState }) {
  const [tf, setTf] = useStd('1D');
  const gold = INSTRUMENTS.find(i => i.sym === 'GOLD');

  return (
    <>
      <div className="chart-header">
        <span className="chart-sym">{selectedSym}</span>
        <div className="tf-tabs">
          {['1W','1D','4H'].map(t => (
            <div key={t} className={`tf-tab${tf === t ? ' active' : ''}`} onClick={() => setTf(t)}>{t}</div>
          ))}
        </div>
        <div style={{marginLeft:8, display:'flex', gap:6}}>
          <span style={{background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:4, padding:'2px 7px', fontSize:9, color:'#9CA3AF', fontFamily:'JetBrains Mono,monospace', fontWeight:700}}>Swing · Thesis view</span>
        </div>
        <div className="chart-quote mono" style={{marginLeft:'auto'}}>
          <span className="bid">{(livePrice - 0.10).toFixed(2)}</span>
          <span style={{color:'var(--text-3)'}}>·</span>
          <span className="ask">{(livePrice + 0.10).toFixed(2)}</span>
        </div>
      </div>
      <div className="chart-body">
        <div className="chart-tools">
          {['✎','⊕','∿','⊞'].map((t,i) => <div key={i} className="chart-tool">{t}</div>)}
        </div>
        <div className="chart-svg-wrap">
          {tf === '1D' || tf === '1W'
            ? <SwingMultiTFChart overlay={overlay} overlayStyle={overlayStyle} currentPrice={livePrice} totalWidth={900} height={420} />
            : <CandleChart timeframe="4H" overlay={overlay} overlayStyle={overlayStyle} currentPrice={livePrice} width={900} height={420} />
          }
        </div>
      </div>
    </>
  );
}

// ── Chart/Order right panel ──────────────────────────────────────────────────
function ChartRight({ stdState, setStdState, livePrice, setHasOpenPosition, pastedSignal, setPastedSignal }) {
  const [orderType, setOrderType] = useStd('buy-limit');
  const [entryPx, setEntryPx] = useStd('2632');
  const [slPx, setSlPx] = useStd('2590');
  const [tpPx, setTpPx] = useStd('2720');
  const [signalPasted, setSignalPasted] = useStd(false);

  // Auto-fill when arriving via "Use signal" from Macro tab
  useEffectStd(() => {
    if (pastedSignal) {
      setEntryPx(pastedSignal.entry);
      setSlPx(pastedSignal.sl);
      setTpPx(pastedSignal.tp);
      setSignalPasted(true);
    }
  }, [pastedSignal]);

  const riskPct = 1.0;
  const lots = 0.07;
  const riskDollar = (Number(entryPx) - Number(slPx)) * lots * 100;
  const rewardDollar = (Number(tpPx) - Number(entryPx)) * lots * 100;
  const rr = (rewardDollar / riskDollar).toFixed(1);
  const financingPerDay = 1.68;

  const handlePasteSignal = () => {
    setSignalPasted(true);
    setEntryPx('2610');
    setSlPx('2550');
    setTpPx('2720');
    if (setPastedSignal) setPastedSignal({ entry: '2610', sl: '2550', tp: '2720', source: 'MacroGold Weekly', raw: 'XAUUSD LONG 2610 SL 2550 TP 2720' });
  };

  const handlePlaceOrder = () => {
    setHasOpenPosition(true);
    setStdState('live');
  };

  return (
    <>
      <div className="ticket-header">
        <span>LIMIT ORDER</span>
        <button className="paste-btn" onClick={handlePasteSignal}>
          📋 Paste signal<kbd>⌘V</kbd>
        </button>
      </div>
      <div className="ticket-content">
        {signalPasted && (
          <div className="signal-banner">
            <div className="ok">✓ Signal parsed from {pastedSignal ? pastedSignal.source : 'MacroGold Weekly'}</div>
            <div className="raw">{pastedSignal ? pastedSignal.raw : 'XAUUSD LONG 2610 SL 2550 TP 2720'}</div>
          </div>
        )}

        <div className="order-type-tabs">
          <button className={`order-type-tab${orderType === 'buy-limit' ? ' active buy' : ''}`}
                  onClick={() => setOrderType('buy-limit')}>▲ Buy Limit</button>
          <button className={`order-type-tab${orderType === 'sell-limit' ? ' active sell' : ''}`}
                  onClick={() => setOrderType('sell-limit')}>▼ Sell Limit</button>
        </div>

        <div className="field">
          <label className="field-label">Entry price (limit)</label>
          <input className={`field-input${signalPasted ? ' autofilled' : ''}`} value={entryPx} onChange={e => setEntryPx(e.target.value)} />
        </div>
        <div className="field">
          <label className="field-label">Stop Loss</label>
          <input className={`field-input${signalPasted ? ' autofilled' : ''}`} value={slPx} onChange={e => setSlPx(e.target.value)} />
        </div>
        <div className="field">
          <label className="field-label">Take Profit</label>
          <input className={`field-input${signalPasted ? ' autofilled' : ''}`} value={tpPx} onChange={e => setTpPx(e.target.value)} />
        </div>

        <div className="risk-display">
          <span className="pct">{riskPct}%</span> <span className="lbl">account risk · {lots} lots · ${Math.abs(riskDollar).toFixed(0)} at risk</span>
        </div>

        <div className="financing-preview">
          <div className="lbl">Projected financing</div>
          <div className="val">-${financingPerDay.toFixed(2)}/day · -${(financingPerDay * 7).toFixed(2)}/week</div>
          <div className="note">Aggregated from 3× 8h Hyperliquid funding payments</div>
        </div>

        <div className="rr-line"><span>R:R ratio</span><span className="v">1 : {rr}</span></div>
        <div className="rr-line"><span>Max reward at TP</span><span className="v">+${rewardDollar.toFixed(0)}</span></div>
        <div className="rr-line"><span>Size</span><span className="v">{lots} lots</span></div>

        <div style={{marginTop:14}}>
          <button className="btn btn-buy" onClick={handlePlaceOrder}>Place Buy Limit · {entryPx}</button>
        </div>
        <div style={{marginTop:6}}>
          <button className="btn btn-secondary" onClick={() => setStdState('watchlist')}>Cancel</button>
        </div>
      </div>
    </>
  );
}

// ── Live position right panel ────────────────────────────────────────────────
function LiveRight({ livePrice, unrealizedPL, daysHeld, financingAccrued, onPositionClose }) {
  const entryPx = 2632, tpPx = 2720, slPx = 2590, lots = 0.07;
  const netPL = unrealizedPL + financingAccrued;
  const rCaptured = (unrealizedPL / ((entryPx - slPx) * lots * 100)).toFixed(2);
  const isPos = netPL >= 0;

  return (
    <>
      <div className="pos-header">
        <div className="pos-sym-row">
          <span className="pos-sym">GOLD</span>
          <span className="pos-dir-pill">LONG</span>
          <span style={{marginLeft:'auto', fontSize:11, color:'var(--text-3)', fontFamily:'JetBrains Mono,monospace'}}>{lots} lots</span>
        </div>
        <div className={`pos-pl-live${isPos ? '' : ' neg'}`}>{fmtMoney(netPL)}</div>
        <div className="pos-r-label">+{rCaptured}R captured</div>
      </div>

      <div className="ticket-content" style={{padding:'10px 14px'}}>
        <div className="pos-stat-row">
          <span className="pos-stat-lbl">Entry</span>
          <span className="pos-stat-val">{entryPx.toFixed(2)}</span>
        </div>
        <div className="pos-stat-row">
          <span className="pos-stat-lbl">Current</span>
          <span className="pos-stat-val" style={{color:'var(--green)'}}>{livePrice.toFixed(2)}</span>
        </div>
        <div className="pos-stat-row">
          <span className="pos-stat-lbl">Stop Loss</span>
          <span className="pos-stat-val" style={{color:'var(--red)'}}>{slPx.toFixed(2)}</span>
        </div>
        <div className="pos-stat-row">
          <span className="pos-stat-lbl">Take Profit</span>
          <span className="pos-stat-val" style={{color:'var(--green)'}}>{tpPx.toFixed(2)}</span>
        </div>
        <div className="pos-stat-row">
          <span className="pos-stat-lbl">Days held</span>
          <span className="pos-stat-val">{daysHeld} days</span>
        </div>
        <div className="pos-stat-row">
          <span className="pos-stat-lbl">Financing accrued</span>
          <span className="pos-stat-val neg">${Math.abs(financingAccrued).toFixed(2)}</span>
        </div>

        <div className="scale-label">SCALE OUT</div>
        <div className="scale-btns">
          {['25%','50%','75%'].map(pct => (
            <button key={pct} className="scale-btn">{pct}</button>
          ))}
        </div>

        <button className="close-full-btn" onClick={() => onPositionClose({ pl: netPL, entry: entryPx, exit: livePrice, hold: `${daysHeld} days` })}>
          Close Full Position
        </button>

        {/* Thesis tracker */}
        <div className="thesis-tracker">
          <div className="thesis-tracker-h">📌 Thesis tracker</div>
          <div className="thesis-text">DXY weakness + real yields falling → gold bid. Holding until macro shifts.</div>
          <div className="thesis-invalidation">
            Exit if US10Y &gt; <span>4.50%</span> or DXY reclaims <span>105.0</span>
          </div>
        </div>

        {/* Gap warning */}
        <div className="gap-chip">
          <div className="gap-chip-icon">⚠️</div>
          <div className="gap-chip-body">
            <strong>Weekend gap</strong>: if GOLD opens below 2,610 Sunday, your SL at 2,590 may gap through.
          </div>
        </div>
      </div>
    </>
  );
}

// ── Live chart center (with position overlay card) ───────────────────────────
function LiveCenter({ livePrice, overlay, overlayStyle, unrealizedPL }) {
  return (
    <>
      <div className="chart-header">
        <span className="chart-sym">GOLD</span>
        <div className="tf-tabs">
          {['1W','1D','4H'].map(t => (
            <div key={t} className={`tf-tab${t === '1D' ? ' active' : ''}`}>{t}</div>
          ))}
        </div>
        <div className="chart-quote mono" style={{marginLeft:'auto'}}>
          <span className="bid">{(livePrice - 0.10).toFixed(2)}</span>
          <span style={{color:'var(--text-3)'}}>·</span>
          <span className="ask" style={{color:'var(--green)'}}>{(livePrice + 0.10).toFixed(2)}</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:6, marginLeft:8}}>
          <span style={{width:6,height:6,borderRadius:'50%',background:'#22C55E',display:'inline-block',animation:'pulse 1.5s infinite'}}></span>
          <span style={{fontSize:10, fontWeight:700, color:'var(--green)', letterSpacing:'0.08em'}}>LIVE</span>
        </div>
      </div>
      <div className="chart-body" style={{position:'relative'}}>
        <div className="chart-tools">
          {['✎','⊕','∿'].map((t,i) => <div key={i} className="chart-tool">{t}</div>)}
        </div>
        <div className="chart-svg-wrap">
          <SwingMultiTFChart overlay={overlay} overlayStyle={overlayStyle} currentPrice={livePrice} totalWidth={900} height={420} />
          {/* Floating position card */}
          <div className="live-pos-card">
            <div className="lpc-label">● GOLD LONG · OPEN</div>
            <div className="lpc-pl">{fmtMoney(unrealizedPL)}</div>
            <div className="lpc-meta">Entry 2632.00 · Current {livePrice.toFixed(2)}</div>
          </div>
        </div>
      </div>
    </>
  );
}

// ── Macro center ─────────────────────────────────────────────────────────────
function MacroCenter({ hasOpenPosition, unrealizedPL, setStdState, setPastedSignal, setSelectedSym }) {
  return (
    <div className="macro-center">
      <div className="macro-h">Macro Dashboard</div>
      <div className="macro-sub">Key drivers for your open thesis · Updated 15 min ago</div>

      <div className="macro-tiles-grid">
        {MACRO_TILES.map(tile => {
          const isUp = tile.dir === 'up';
          const changeColor = tile.good ? '#22C55E' : (isUp ? '#EF4444' : '#22C55E');
          return (
            <div key={tile.label} className={`macro-tile${tile.good ? ' good' : ''}`}>
              <div className="macro-tile-label">{tile.label}</div>
              <div className="macro-tile-value" style={{color: tile.good ? '#22C55E' : 'var(--text)'}}>
                {tile.value}{tile.unit}
              </div>
              <div className={`macro-tile-change ${tile.good ? 'green' : 'red'}`}>
                {isUp ? '▲' : '▼'} {Math.abs(tile.change)}{tile.unit} this week
              </div>
              <div className="macro-tile-note">{tile.note}</div>
            </div>
          );
        })}
      </div>

      {/* AI macro digest */}
      <div className="ai-card">
        <div className="ai-card-h">🤖 Macro digest · Your thesis</div>
        {AI_MACRO_BULLETS.map((b, i) => (
          <div key={i} className="ai-bullet">
            <span className="ai-icon">{b.icon}</span>
            <span>{b.text}</span>
          </div>
        ))}
      </div>

      {/* Telegram channels overview */}
      <div style={{marginTop:24}}>
        <div className="wl-section-h">FOLLOWED CHANNELS</div>
        {SWING_CHANNELS.map((ch, i) => (
          <div key={i} style={{background:'var(--panel)', border:'1px solid var(--border)', borderRadius:12, padding:'12px 14px', marginBottom:10, display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:32, height:32, borderRadius:8, background:ch.bg, display:'grid', placeItems:'center', fontSize:14, flexShrink:0}}>📢</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontWeight:600, fontSize:12}}>{ch.name}</div>
              <div style={{fontSize:10, color:'var(--text-3)', marginTop:2}}>{ch.winRate}% win · avg hold {ch.avgHold} · {ch.subs.toLocaleString()} subs</div>
              {ch.note && <div style={{fontSize:11, color:'var(--text-2)', marginTop:4}}>{ch.note}</div>}
              {ch.raw && <div style={{fontFamily:'JetBrains Mono,monospace', fontSize:10, color:'var(--text-2)', background:'rgba(0,0,0,0.3)', padding:'4px 6px', borderRadius:4, marginTop:4}}>{ch.raw}</div>}
            </div>
            <button
              onClick={() => {
                if (ch.action === 'execute') {
                  setPastedSignal({ entry: '2610', sl: '2550', tp: '2720', source: ch.name, raw: ch.raw });
                  setSelectedSym('GOLD');
                  setStdState('chart');
                }
              }}
              style={{padding:'6px 12px', borderRadius:7, background: ch.action === 'execute' ? 'rgba(34,197,94,0.12)' : 'rgba(59,130,246,0.1)', border: ch.action === 'execute' ? '1px solid rgba(34,197,94,0.3)' : '1px solid rgba(59,130,246,0.25)', color: ch.action === 'execute' ? 'var(--green)' : '#93C5FD', fontSize:11, fontWeight:600, flexShrink:0, cursor:'pointer'}}>
              {ch.action === 'execute' ? '📋 Use signal' : 'Read'}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Macro right panel ────────────────────────────────────────────────────────
function MacroRight({ hasOpenPosition, unrealizedPL }) {
  return (
    <>
      <div className="ticket-header">POSITION SUMMARY</div>
      <div className="ticket-content">
        {hasOpenPosition ? (
          <>
            <div className="open-pos-mini">
              <div className="open-pos-mini-top">
                <div className="open-pos-mini-sym">GOLD</div>
                <div className="open-pos-mini-dir">LONG</div>
              </div>
              <div className="open-pos-mini-pl">{fmtMoney(unrealizedPL)}</div>
              <div className="open-pos-mini-meta">0.07 lots · 3 days held</div>
            </div>
            <div className="thesis-tracker" style={{marginTop:10}}>
              <div className="thesis-tracker-h">📌 Thesis</div>
              <div className="thesis-text">DXY weakness + real yields falling</div>
              <div className="thesis-invalidation">Exit if US10Y &gt; <span>4.50%</span></div>
            </div>
          </>
        ) : (
          <div style={{textAlign:'center', padding:'20px 0', color:'var(--text-3)'}}>
            <div style={{fontSize:12}}>No open positions</div>
          </div>
        )}

        <div style={{marginTop:14}}>
          <div className="wl-right-h">QUICK STATS</div>
          {[
            ['DXY',      '103.8',  'var(--green)'],
            ['US 10Y',   '4.31%',  'var(--green)'],
            ['VIX',      '22.4',   'var(--amber)'],
            ['GOLD/OIL', '18.2x',  'var(--green)'],
          ].map(([lbl, val, col]) => (
            <div key={lbl} className="pos-stat-row">
              <span className="pos-stat-lbl">{lbl}</span>
              <span className="pos-stat-val" style={{color:col}}>{val}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ── Journal center ───────────────────────────────────────────────────────────
function JournalCenter({ closedPL, setStdState }) {
  const [thesisValid, setThesisValid] = useStd(null);
  const [notes, setNotes] = useStd('');
  // closedPL may be an object {pl, entry, exit, hold} or a number or null
  const plData = closedPL && typeof closedPL === 'object' ? closedPL : { pl: closedPL || 63.00, exit: null };
  const pl = Number(plData.pl) || 63.00;
  const exitPx = plData.exit ? Number(plData.exit).toFixed(2) : (2632 + pl / 7).toFixed(2);
  const rCaptured = (pl / ((2632 - 2590) * 0.07 * 100)).toFixed(2);

  return (
    <div className="journal-center">
      <div className="journal-trade-result">
        <div className="jtr-label">● GOLD LONG · CLOSED</div>
        <div className="jtr-pl">{fmtMoney(pl)}</div>
        <div className="jtr-r">+{rCaptured}R · 1% risk</div>
        <div className="jtr-meta">
          <div className="jtr-meta-row"><div className="lbl">Entry</div><div className="val">2632.00</div></div>
          <div className="jtr-meta-row"><div className="lbl">Exit</div><div className="val">{exitPx}</div></div>
          <div className="jtr-meta-row"><div className="lbl">Days held</div><div className="val">3 days</div></div>
          <div className="jtr-meta-row"><div className="lbl">Financing</div><div className="val" style={{color:'var(--amber)'}}>-$5.04</div></div>
        </div>
      </div>

      <div className="thesis-review">
        <div className="thesis-review-h">📌 Was your thesis right?</div>
        <div style={{fontSize:12, color:'var(--text-3)', marginBottom:10, padding:'8px 10px', background:'rgba(59,130,246,0.06)', border:'1px solid rgba(59,130,246,0.15)', borderRadius:8, lineHeight:1.5}}>
          <em>"DXY weakness + real yields falling → gold bid. Exit if US10Y &gt; 4.5%"</em>
        </div>
        <div className="thesis-valid-row">
          <button className={`thesis-valid-btn yes${thesisValid === 'yes' ? ' active' : ''}`} onClick={() => setThesisValid('yes')}>✓ Yes, thesis played out</button>
          <button className={`thesis-valid-btn no${thesisValid === 'no' ? ' active' : ''}`} onClick={() => setThesisValid('no')}>✗ Thesis broke early</button>
        </div>

        <div style={{marginBottom:8, fontSize:11, fontWeight:600, color:'var(--text-2)'}}>What did you learn?</div>
        <textarea
          className="journal-notes"
          placeholder="e.g. DXY held below 104 all week — thesis was valid. Exited a bit early before the bigger move, but followed the plan..."
          value={notes}
          onChange={e => setNotes(e.target.value)}
        />

        <button className="btn btn-blue" onClick={() => setStdState('watchlist')}>
          Save &amp; back to watchlist
        </button>
      </div>
    </div>
  );
}

// ── Journal right panel ──────────────────────────────────────────────────────
function JournalRight() {
  return (
    <>
      <div className="ticket-header">TRADE STREAK</div>
      <div className="ticket-content">
        <div className="streak-card">
          <div className="streak-big">🔥</div>
          <div className="streak-info">
            <div className="num">4</div>
            <div className="sub">profitable positions</div>
            <div style={{fontSize:10, color:'var(--text-3)', marginTop:4}}>Personal best: 7</div>
          </div>
        </div>

        <div style={{marginBottom:12}}>
          <div className="wl-right-h">RECENT TRADES</div>
          {[
            { sym: 'GOLD',   dir: 'LONG',  pl: +196.00, days: 5 },
            { sym: 'SILVER', dir: 'LONG',  pl: +84.20,  days: 9 },
            { sym: 'US30',   dir: 'SHORT', pl: -42.00,  days: 2 },
          ].map((t, i) => (
            <div key={i} className="alert-row">
              <span className="sym">{t.sym}</span>
              <span style={{fontSize:10, color:'var(--text-3)'}}>{t.days}d</span>
              <span style={{fontFamily:'JetBrains Mono,monospace', fontWeight:700, color: t.pl > 0 ? 'var(--green)' : 'var(--red)'}}>
                {fmtMoney(t.pl)}
              </span>
            </div>
          ))}
        </div>

        <div className="thesis-tracker">
          <div className="thesis-tracker-h">📊 Stats this month</div>
          {[['Win rate','67%'],['Avg hold','6.2 days'],['Avg R:R','1 : 2.1'],['Best trade','+$312']].map(([l,v]) => (
            <div key={l} className="pos-stat-row">
              <span className="pos-stat-lbl">{l}</span>
              <span className="pos-stat-val">{v}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ── Bottom positions bar ─────────────────────────────────────────────────────
function BottomPositions({ livePrice, unrealizedPL }) {
  return (
    <>
      <div className="bp-tabs">
        <div className="bp-tab active">Positions</div>
        <div className="bp-tab">Pending Orders</div>
        <div className="bp-tab">History</div>
        <div className="bp-summary">Floating P&L: <span className="pl" style={{color:'var(--green)'}}>{fmtMoney(unrealizedPL)}</span></div>
      </div>
      <div className="bp-table">
        <div className="bp-table-header">
          <span>Symbol</span><span>Dir</span><span>Lots</span>
          <span>Entry</span><span>Current</span><span>SL</span><span>TP</span>
          <span>Days</span><span>P&L</span><span></span>
        </div>
        <div className="bp-table-row">
          <span className="sym">GOLD</span>
          <span className="dir buy">LONG</span>
          <span>0.07</span>
          <span>2632.00</span>
          <span style={{color:'var(--green)'}}>{livePrice.toFixed(2)}</span>
          <span style={{color:'var(--red)'}}>2590.00</span>
          <span style={{color:'var(--green)'}}>2720.00</span>
          <span>3d</span>
          <span className="pl pos">{fmtMoney(unrealizedPL)}</span>
          <span><button className="close-x">✕</button></span>
        </div>
      </div>
    </>
  );
}

// ── Root standard mode component ─────────────────────────────────────────────
function SwingStandardMode({ stdState, setStdState, livePrice, onPositionClose, closedPL }) {
  const [selectedSym, setSelectedSym] = useStd('GOLD');
  const [hasOpenPosition, setHasOpenPosition] = useStd(true);
  const [pastedSignal, setPastedSignal] = useStd(null);
  const entryPx = 2632, slPx = 2590, lots = 0.07;
  const unrealizedPL = (livePrice - entryPx) * lots * 100;
  const financingAccrued = -5.04; // 3 days * $1.68

  return (
    <div className="main">
      <SwingLeftNav
        stdState={stdState}
        setStdState={setStdState}
        selectedSym={selectedSym}
        setSelectedSym={setSelectedSym}
        livePrice={livePrice}
        hasOpenPosition={hasOpenPosition}
      />

      <div className="center-wrap">
        <div className="center">
          {stdState === 'watchlist' && (
            <WatchlistCenter setStdState={setStdState} setSelectedSym={setSelectedSym} livePrice={livePrice} />
          )}
          {(stdState === 'chart' || stdState === 'order') && (
            <ChartCenter livePrice={livePrice} overlay={null} overlayStyle={null} selectedSym={selectedSym} setStdState={setStdState} />
          )}
          {stdState === 'live' && (
            <LiveCenter livePrice={livePrice} overlay={null} overlayStyle={null} unrealizedPL={unrealizedPL} />
          )}
          {stdState === 'macro' && (
            <MacroCenter hasOpenPosition={hasOpenPosition} unrealizedPL={unrealizedPL} setStdState={setStdState} setPastedSignal={setPastedSignal} setSelectedSym={setSelectedSym} />
          )}
          {stdState === 'journal' && (
            <JournalCenter closedPL={closedPL} setStdState={setStdState} />
          )}
        </div>

        {stdState === 'live' && (
          <div className="bottom-panel">
            <BottomPositions livePrice={livePrice} unrealizedPL={unrealizedPL} />
          </div>
        )}
      </div>

      <div className="sidebar-right">
        {stdState === 'watchlist' && (
          <WatchlistRight livePrice={livePrice} hasOpenPosition={hasOpenPosition} unrealizedPL={unrealizedPL} setStdState={setStdState} />
        )}
        {(stdState === 'chart' || stdState === 'order') && (
          <ChartRight stdState={stdState} setStdState={setStdState} livePrice={livePrice} setHasOpenPosition={setHasOpenPosition} pastedSignal={pastedSignal} setPastedSignal={setPastedSignal} />
        )}
        {stdState === 'live' && (
          <LiveRight livePrice={livePrice} unrealizedPL={unrealizedPL} daysHeld={3} financingAccrued={financingAccrued} onPositionClose={onPositionClose} />
        )}
        {stdState === 'macro' && (
          <MacroRight hasOpenPosition={hasOpenPosition} unrealizedPL={unrealizedPL} />
        )}
        {stdState === 'journal' && <JournalRight />}
      </div>
    </div>
  );
}

window.SwingStandardMode = SwingStandardMode;