// Gen Z Mode — feed-first, instrument cards with swipe, channel right rail, PnL share card
function GenZMode({ gzState, setGzState, livePrice, onCloseShare, sharePayload, onShowChart, navTab, setNavTab, chartOverlay, overlayStyle }) {
  // confirmCard: { sym, dir, entry, sl, tp, source }   source = 'swipe' | 'channel' | 'copy'
  const [confirmCard, setConfirmCard] = React.useState(null);

  // Default SL/TP based on direction (1% of entry, 2:1 R:R)
  const calcDefaults = (entry, dir) => {
    const slDist = entry * 0.01;
    const tpDist = slDist * 2;
    return dir === 'buy'
      ? { sl: +(entry - slDist).toFixed(2), tp: +(entry + tpDist).toFixed(2) }
      : { sl: +(entry + slDist).toFixed(2), tp: +(entry - tpDist).toFixed(2) };
  };

  const handleSwipe = (sym, dir, entry) => {
    const px = entry || (sym === 'GOLD' ? livePrice : sym === 'BTC/USD' ? 76496 : 105.38);
    const { sl, tp } = calcDefaults(px, dir);
    setConfirmCard({ sym, dir, entry: px, sl, tp, source: 'swipe' });
  };
  const handleChannelExecute = (channel) => {
    // Channel signals are pre-set buys with explicit SL/TP
    setConfirmCard({
      sym: 'GOLD', dir: 'buy', entry: channel.entry, sl: channel.sl, tp: channel.tp,
      source: 'channel', channelName: channel.name, raw: channel.raw,
    });
  };
  const handleCopyTrade = (trader) => {
    const sym = trader.sym === 'XAUUSD' ? 'GOLD' : trader.sym;
    const px = sym === 'GOLD' ? livePrice : sym === 'BTC/USD' ? 76496 : 105.38;
    const { sl, tp } = calcDefaults(px, trader.side);
    setConfirmCard({
      sym, dir: trader.side, entry: px, sl, tp,
      source: 'copy', traderHandle: trader.handle,
    });
  };
  const handleConfirmCard = () => {
    setConfirmCard(null);
    setGzState('live');
  };

  if (navTab === 'chart') {
    return <GenZChart livePrice={livePrice} onBack={() => setNavTab('home')} onFlatten={() => setGzState('share')} chartOverlay={chartOverlay} overlayStyle={overlayStyle} />;
  }
  if (navTab === 'copy') {
    return <CopyTradingView onBack={() => setNavTab('home')} />;
  }
  return (
    <div className="genz-main">
      <GenZNav navTab={navTab} setNavTab={setNavTab} />

      <div className="genz-feed">
        <div className="genz-feed-h">Good morning, Apurv 👋</div>
        <div className="genz-feed-sub">Markets opened 2 hours ago · 47 traders active in your network</div>

        <div className="genz-section-h">For you</div>

        <InstrumentCard
          sym="GOLD" subtitle="XAU/USD · Spot Gold"
          price={livePrice} pct={1.14} pctDir="up"
          tradersToday="47 traders long today"
          spark={genSpark('up', 30)}
          sparkColor="#22C55E"
          onSwipe={(dir) => handleSwipe('GOLD', dir, livePrice)}
          confirm={confirmCard && confirmCard.sym === 'GOLD' ? confirmCard : null}
          onConfirm={handleConfirmCard}
          onCancel={() => setConfirmCard(null)}
          onChart={() => setNavTab('chart')}
        />

        <InstrumentCard
          sym="BTC/USD" subtitle="Bitcoin · Spot"
          price={76496} pct={-0.32} pctDir="down"
          tradersToday="12 traders short today"
          spark={genSpark('down', 30)}
          sparkColor="#EF4444"
          onSwipe={(dir) => handleSwipe('BTC/USD', dir, 76496)}
          confirm={confirmCard && confirmCard.sym === 'BTC/USD' ? confirmCard : null}
          onConfirm={handleConfirmCard}
          onCancel={() => setConfirmCard(null)}
          onChart={() => setNavTab('chart')}
        />

        <div className="genz-section-h">What traders are doing</div>

        {TRADERS.map(t => (
          <div key={t.handle} className="trader-card">
            <div className="trader-avatar" style={{background: t.avBg}}>{t.avatar}</div>
            <div className="trader-body">
              <div className="trader-handle">{t.handle} <span className="time">· {t.time}</span></div>
              <div className="trader-trade">
                ${t.sym} <span className={t.pl >= 0 ? 'pl-pos' : 'pl-neg'}>{t.pl >= 0 ? '+' : '−'}${Math.abs(t.pl)}</span>
                {' · '}{t.hold} {t.dir === 'pos' ? '🟢' : '🔴'} {t.side === 'sell' ? 'SHORT' : 'LONG'}
              </div>
            </div>
            <button className="copy-trade-btn" onClick={() => handleCopyTrade(t)}>Copy Trade</button>
          </div>
        ))}
      </div>

      <GenZRight onChannelExecute={handleChannelExecute} />
    </div>
  );
}

function GenZNav({ navTab, setNavTab }) {
  const items = [
    { id: 'home', icon: '🏠', label: 'Home' },
    { id: 'chart', icon: '📈', label: 'Chart' },
    { id: 'copy', icon: '👥', label: 'Copy' },
  ];
  return (
    <div className="genz-nav">
      {items.map(it => (
        <div key={it.id} className={`genz-nav-item ${navTab === it.id ? 'active' : ''}`} onClick={() => setNavTab(it.id)} title={it.label}>
          <span style={{fontSize: 18, filter: navTab === it.id ? 'none' : 'grayscale(0.4)'}}>{it.icon}</span>
        </div>
      ))}
    </div>
  );
}

function InstrumentCard({ sym, subtitle, price, pct, pctDir, tradersToday, spark, sparkColor, onSwipe, confirm, onConfirm, onCancel, onChart }) {
  return (
    <div className="instrument-card">
      <div className="ic-top">
        <div>
          <div className="ic-sym">{sym}</div>
          <div className="ic-meta">{subtitle}</div>
        </div>
        <div className="ic-price">
          <div className="px">{typeof price === 'number' ? price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : price}</div>
          <div className={`pct ${pctDir}`}>{pctDir === 'up' ? '▲' : '▼'} {Math.abs(pct).toFixed(2)}%</div>
        </div>
      </div>
      <Sparkline data={spark} color={sparkColor} />
      <div className="ic-stats">
        <span>{tradersToday}</span>
        <span style={{color: 'var(--blue)', cursor: 'pointer'}} onClick={onChart}>View Chart →</span>
      </div>
      <div className="ic-actions">
        <button className="ic-swipe-btn sell" onClick={() => onSwipe('sell')}>← Sell</button>
        <div className="ic-swipe-hint">SWIPE</div>
        <button className="ic-swipe-btn buy" onClick={() => onSwipe('buy')}>Buy →</button>
      </div>

      {confirm && (
        <ConfirmOverlay
          key={`${confirm.source}-${confirm.entry}-${confirm.sl}-${confirm.dir}`}
          sym={sym}
          confirm={confirm}
          onConfirm={onConfirm}
          onCancel={onCancel}
        />
      )}
    </div>
  );
}

// Editable SL/TP confirm card — replaces the in-place "1% risk = $100" stub
function ConfirmOverlay({ sym, confirm, onConfirm, onCancel }) {
  const [sl, setSl] = React.useState(confirm.sl);
  const [tp, setTp] = React.useState(confirm.tp);
  const accountSize = 10000;
  const riskPct = 1;
  const riskDollars = accountSize * (riskPct / 100);

  const slNum = parseFloat(sl) || 0;
  const tpNum = parseFloat(tp) || 0;
  const slDistance = Math.abs(confirm.entry - slNum);
  const tpDistance = tpNum > 0 ? Math.abs(tpNum - confirm.entry) : 0;
  // simplified position size: $risk / SL distance — gives lots in a believable range for GOLD
  const positionSize = slDistance > 0 ? (riskDollars / (slDistance * 10)).toFixed(2) : '0.00';
  const rrRatio = slDistance > 0 && tpDistance > 0 ? (tpDistance / slDistance).toFixed(1) : null;

  const sourceLabel = confirm.source === 'channel'
    ? `📢 ${confirm.channelName} signal`
    : confirm.source === 'copy'
    ? `Copying ${confirm.traderHandle}`
    : null;

  return (
    <div className={`ic-confirm expanded ${confirm.dir}`}>
      <div className="ic-confirm-head">
        <h4>{confirm.dir === 'buy' ? 'BUY' : 'SELL'} {sym}</h4>
        {sourceLabel && <div className="ic-confirm-source">{sourceLabel}</div>}
      </div>

      <div className="ic-confirm-divider"></div>

      <div className="ic-confirm-row">
        <span className="lbl">Entry</span>
        <span className="val mono">Market (~{confirm.entry.toFixed(2)})</span>
      </div>

      <div className="ic-confirm-fields">
        <div className="ic-confirm-field">
          <label>Stop Loss</label>
          <input
            className={`ic-confirm-input mono ${confirm.source === 'channel' ? 'preset' : 'autofilled'}`}
            value={sl}
            onChange={(e) => setSl(e.target.value)}
            inputMode="decimal"
          />
        </div>

        <div className="ic-confirm-field">
          <label>Take Profit <span className="opt">(optional)</span></label>
          <input
            className={`ic-confirm-input mono ${confirm.source === 'channel' ? 'preset' : 'autofilled'}`}
            value={tp || ''}
            onChange={(e) => setTp(e.target.value)}
            inputMode="decimal"
            placeholder="—"
          />
        </div>
      </div>

      <div className="ic-confirm-meta">
        <div className="ic-confirm-row"><span className="lbl">Risk</span><span className="val">{riskPct}% of account = <span className="pct">${riskDollars}</span></span></div>
        <div className="ic-confirm-row"><span className="lbl">Position size</span><span className="val mono">{positionSize} lots</span></div>
        {rrRatio && <div className="ic-confirm-row"><span className="lbl">R : R</span><span className="val mono">1 : {rrRatio}</span></div>}
      </div>

      <div className="ic-confirm-actions">
        <button className="btn btn-secondary" onClick={onCancel}>Cancel</button>
        <button className={`btn ${confirm.dir === 'buy' ? 'btn-buy' : 'btn-sell'}`} onClick={onConfirm}>
          Confirm {confirm.dir === 'buy' ? 'BUY' : 'SELL'}
        </button>
      </div>
    </div>
  );
}

function GenZRight({ onChannelExecute }) {
  const channels = [
    { name: 'MMFX Commodities', entry: 4612, sl: 4595, tp: 4645, raw: 'XAUUSD buy 4612 SL 4595 TP 4645', time: '8m', icon: '📢', bg: 'linear-gradient(135deg,#3B82F6,#1E3A8A)' },
    { name: 'GoldSignals Pro',  entry: 4618, sl: 4602, tp: 4650, raw: 'Buy 4618 SL 4602 TP 4650',         time: '22m', icon: '📢', bg: 'linear-gradient(135deg,#F59E0B,#DC2626)' },
  ];
  return (
    <div className="genz-right">
      <div className="genz-section-h" style={{margin: '4px 0 12px'}}>Your channels</div>

      {channels.map(c => (
        <div key={c.name} className="channel-card">
          <div className="channel-head">
            <div className="channel-icon" style={{background: c.bg}}>{c.icon}</div>
            <div className="channel-name">{c.name}</div>
            <div className="channel-stats">{c.time}</div>
          </div>
          <div className="channel-signal">
            <span className="buy">{c.name === 'MMFX Commodities' ? `XAUUSD buy ${c.entry}` : `Buy ${c.entry}`}</span><br/>
            SL {c.sl} · TP {c.tp}
          </div>
          <button className="execute-btn" onClick={() => onChannelExecute && onChannelExecute(c)}>Execute →</button>
        </div>
      ))}

      <div className="channel-card">
        <div className="channel-head">
          <div className="channel-icon" style={{background: 'linear-gradient(135deg,#8B5CF6,#3B82F6)'}}>📢</div>
          <div className="channel-name">DXYWatch</div>
          <div className="channel-stats">1h</div>
        </div>
        <div className="channel-signal" style={{fontFamily:'Inter, sans-serif'}}>
          DXY at 103.8 — Gold bullish setup forming on H1.
        </div>
        <button className="execute-btn" style={{background:'rgba(255,255,255,0.04)', borderColor:'var(--border)', color:'var(--text-2)'}}>Read article</button>
      </div>

      <div className="daily-card">
        <div className="daily-card-h">Daily limit</div>
        <div style={{fontSize:11, color:'var(--text-2)', marginBottom:6}}><span style={{color:'#EF4444', fontWeight:600}}>−$47</span> of $200 · <span style={{color:'var(--text)'}}>23% used</span></div>
        <div className="daily-meter-bar"><div className="daily-meter-fill" style={{width:'23%'}}></div></div>
      </div>

      <div className="streak-card">
        <div className="streak-emoji">🔥</div>
        <div className="streak-text"><span className="num">4 sessions</span> green</div>
      </div>
    </div>
  );
}

function GenZChart({ livePrice, onBack, onFlatten, chartOverlay, overlayStyle }) {
  const ov = chartOverlay || { entry: 4612, sl: 4595, tp: 4645 };
  const entry = ov.entry != null ? ov.entry : 4612;
  return (
    <div style={{flex:1, display:'flex', flexDirection:'column', background:'var(--bg)'}}>
      <div style={{display:'flex', alignItems:'center', gap:12, padding:'12px 16px', borderBottom:'1px solid var(--border)'}}>
        <button className="back-link" onClick={onBack}>← Back to Feed</button>
        <div style={{fontWeight:700, fontSize:14}}>GOLD · M5</div>
        <div className="chart-quote mono" style={{marginLeft:'auto'}}>
          <span className="bid">{(livePrice - 0.05).toFixed(2)}</span>
          <span style={{color:'var(--text-3)'}}>/</span>
          <span className="ask">{(livePrice + 0.05).toFixed(2)}</span>
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 280px', flex:1, minHeight:0}}>
        <div style={{position:'relative', minHeight:0}}>
          <CandleChart timeframe="M5" currentPrice={livePrice} overlay={ov} overlayStyle={overlayStyle} width={900} height={560} />
        </div>
        <div style={{background:'var(--panel-2)', borderLeft:'1px solid var(--border)', padding:16}}>
          <div className="ticket-header" style={{padding:'0 0 12px', borderBottom:'1px solid var(--border)', marginBottom:12}}>
            <span style={{color:'var(--green)'}}>● GOLD · LONG · OPEN</span>
          </div>
          <div className="posmgmt-row"><span className="lbl">Entry</span><span className="val mono">{entry.toFixed(2)}</span></div>
          <div className="posmgmt-row"><span className="lbl">Current</span><span className="val mono">{livePrice.toFixed(2)}</span></div>
          {ov.sl != null && <div className="posmgmt-row"><span className="lbl" style={{color:'#EF4444'}}>Stop Loss</span><span className="val mono">{ov.sl.toFixed(2)}</span></div>}
          {ov.tp != null && <div className="posmgmt-row"><span className="lbl" style={{color:'var(--green)'}}>Take Profit</span><span className="val mono">{ov.tp.toFixed(2)}</span></div>}
          <div className="posmgmt-row"><span className="lbl">Lots</span><span className="val mono">0.59</span></div>
          <div className={`posmgmt-pl pos`}>+${((livePrice - entry) * 5.9).toFixed(2)}</div>
          <div className="posmgmt-actions">
            <button>Reverse</button>
            <button>Modify</button>
            <button className="flatten" onClick={onFlatten}>Flatten Position</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function CopyTradingView({ onBack }) {
  return (
    <div className="ct-view">
      <button className="back-link" onClick={onBack} style={{marginBottom: 12}}>← Back</button>
      <div className="ct-h">Signal Channels</div>
      <div className="ct-sub">Follow audited signal providers · Auto-execute or one-tap copy</div>
      <div className="ct-filters">
        <div className="ct-chip active">All</div>
        <div className="ct-chip">GOLD</div>
        <div className="ct-chip">Crypto</div>
        <div className="ct-chip">FX</div>
        <div className="ct-chip">Audited only ✓</div>
      </div>

      {[
        { name: 'MMFX Commodities', focus: 'GOLD · OIL', winRate: 64, avgHold: '18 min', month: 47, subs: 1240, audited: true, bg: 'linear-gradient(135deg,#3B82F6,#1E3A8A)' },
        { name: 'GoldSignals Pro', focus: 'GOLD', winRate: 58, avgHold: '31 min', month: 23, subs: 847, audited: true, bg: 'linear-gradient(135deg,#F59E0B,#DC2626)' },
        { name: 'DXYWatch', focus: 'FX · DXY', winRate: 51, avgHold: '42 min', month: 18, subs: 612, audited: false, bg: 'linear-gradient(135deg,#8B5CF6,#3B82F6)' },
        { name: 'CryptoMomentum', focus: 'BTC · ETH', winRate: 47, avgHold: '2h 4m', month: 31, subs: 489, audited: true, bg: 'linear-gradient(135deg,#10B981,#059669)' },
      ].map(c => (
        <div key={c.name} className="ct-channel-card">
          <div className="channel-icon" style={{background: c.bg, width:44, height:44, fontSize:18}}>📢</div>
          <div>
            <div className="ct-channel-name">{c.name} {c.audited && <span style={{fontSize:10, color:'var(--green)', marginLeft:6, fontWeight:600}}>✓ Audited</span>}</div>
            <div className="ct-channel-stats">
              Focus: <span>{c.focus}</span> · Win rate: <span>{c.winRate}%</span> · Avg hold: <span>{c.avgHold}</span> · This month: <span>+{c.month} signals</span> · <span>{c.subs}</span> subscribers
            </div>
          </div>
          <div className="ct-actions">
            <button className="view">View signals</button>
            <button className="follow">Follow</button>
          </div>
        </div>
      ))}
    </div>
  );
}

window.GenZMode = GenZMode;

function JournalView({ onBack }) {
  return (
    <div className="ct-view">
      <button className="back-link" onClick={onBack} style={{marginBottom: 12}}>← Back</button>
      <div className="ct-h">Journal</div>
      <div className="ct-sub">Auto-tagged with sessions, streaks, and emotional notes</div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, marginTop: 16}}>
        {[
          {d: 'Today',     t: 4, w: 3, l: 1, pl: 234},
          {d: 'Yesterday', t: 6, w: 4, l: 2, pl: 87},
          {d: 'Tue',       t: 8, w: 5, l: 3, pl: -42},
          {d: 'Mon',       t: 5, w: 4, l: 1, pl: 156},
          {d: 'Last Fri',  t: 7, w: 3, l: 4, pl: -89},
          {d: 'Last Thu',  t: 3, w: 3, l: 0, pl: 198},
        ].map(d => (
          <div key={d.d} style={{background:'var(--panel)', border:'1px solid var(--border)', borderRadius:14, padding:16}}>
            <div style={{fontSize:12, color:'var(--text-2)', marginBottom: 6}}>{d.d}</div>
            <div className="mono" style={{fontSize:22, fontWeight:700, color: d.pl >= 0 ? 'var(--green)' : '#EF4444'}}>{d.pl >= 0 ? '+' : '−'}${Math.abs(d.pl)}</div>
            <div style={{fontSize:11, color:'var(--text-3)', marginTop:6}}>{d.t} trades · {d.w}W / {d.l}L</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SettingsView({ onBack }) {
  const rows = [
    { icon: '👤', label: 'Account', sub: 'apurv@intract.buzz · KYC verified' },
    { icon: '🔔', label: 'Notifications', sub: 'Push, email, signal alerts' },
    { icon: '🛡️', label: 'Risk defaults', sub: 'Daily limit $200 · Risk per trade 1%' },
  ];
  return (
    <div className="ct-view">
      <button className="back-link" onClick={onBack} style={{marginBottom: 12}}>← Back</button>
      <div style={{display:'flex', alignItems:'center', gap:12, marginBottom: 8}}>
        <div style={{fontSize: 28}}>⚙️</div>
        <div className="ct-h" style={{margin:0}}>Settings</div>
      </div>
      <div className="ct-sub">Manage your account, alerts, and risk profile</div>
      <div style={{marginTop: 20, background:'var(--panel)', border:'1px solid var(--border)', borderRadius: 14, overflow:'hidden'}}>
        {rows.map((r, i) => (
          <div key={r.label} style={{
            display:'flex', alignItems:'center', gap: 14, padding: '16px 18px',
            borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none',
            cursor: 'pointer'
          }}>
            <div style={{fontSize: 20}}>{r.icon}</div>
            <div style={{flex:1}}>
              <div style={{fontSize: 14, fontWeight: 600}}>{r.label}</div>
              <div style={{fontSize: 11, color:'var(--text-3)', marginTop: 2}}>{r.sub}</div>
            </div>
            <div style={{color:'var(--text-3)', fontSize: 18}}>›</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.JournalView = JournalView;
window.SettingsView = SettingsView;