// Gen Z / Feed Mode — Day Trader planning feed, macro channels, swipe cards, one-tap copy
function GenZMode({ gzState, setGzState, livePrice, onCloseShare, sharePayload, navTab, setNavTab, chartOverlay, overlayStyle }) {
  // confirmCard: { sym, dir, entry, sl, tp, source }
  const [confirmCard, setConfirmCard] = React.useState(null);

  const calcDefaults = (entry, dir) => {
    const slDist = entry * 0.0053; // ~14 pts on 2641
    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 prices = { 'GOLD': livePrice, 'SILVER': 32.49, 'US30': 42385, 'EUR/USD': 1.0843 };
    const px = entry || prices[sym] || livePrice;
    const { sl, tp } = calcDefaults(px, dir);
    setConfirmCard({ sym, dir, entry: px, sl, tp, source: 'swipe' });
  };
  const handleChannelExecute = (channel) => {
    setConfirmCard({
      sym: 'GOLD', dir: 'buy', entry: channel.entry, sl: channel.sl, tp: channel.tp,
      source: 'channel', channelName: channel.name, raw: channel.raw,
    });
  };
  const handleCopyPlan = (trader) => {
    const sym = trader.sym;
    const prices = { 'GOLD': livePrice, 'SILVER': 32.49, 'US30': 42385, 'EUR/USD': 1.0843 };
    const px = prices[sym] || livePrice;
    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 <MacroChannelsView onBack={() => setNavTab('home')} onExecute={handleChannelExecute} />;
  }
  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">NFP day · Markets open 2h · 47 traders planning in your network</div>

        {/* Instrument cards — all 4 Day Trader instruments */}
        <div className="genz-section-h">Trade</div>
        {INSTRUMENTS.map(it => (
          <InstrumentCard
            key={it.sym}
            sym={it.sym}
            subtitle={it.sym === 'GOLD' ? 'XAU/USD · Spot Gold' : it.sym === 'SILVER' ? 'XAG/USD · Spot Silver' : it.sym === 'US30' ? 'Dow Jones · Index' : 'EUR/USD · Forex'}
            price={it.sym === 'GOLD' ? livePrice : it.ask}
            pct={it.pct} pctDir={it.pctDir}
            tradersToday={it.sym === 'GOLD' ? '47 traders watching · 32 long' : it.sym === 'SILVER' ? '18 traders watching' : it.sym === 'US30' ? '24 traders short' : '11 traders long'}
            spark={genSpark(it.trend === 'up' ? 'up' : 'down', 30)}
            sparkColor={it.pctDir === 'up' ? '#22C55E' : '#EF4444'}
            onSwipe={(dir) => handleSwipe(it.sym, dir)}
            confirm={confirmCard && confirmCard.sym === it.sym ? confirmCard : null}
            onConfirm={handleConfirmCard}
            onCancel={() => setConfirmCard(null)}
            onChart={() => setNavTab('chart')}
          />
        ))}

        {/* Day Trader planning narrative feed */}
        <div className="genz-section-h">Trader Plans</div>
        {TRADERS.map(t => (
          <div key={t.handle} className="plan-card">
            <div className="plan-card-top">
              <div className="trader-avatar" style={{background: t.avBg, width:36, height:36, borderRadius:'50%', display:'grid', placeItems:'center', fontSize:13, fontWeight:700, flexShrink:0}}>{t.avatar}</div>
              <div className="plan-card-body">
                <div className="plan-handle">
                  {t.handle}
                  <span className="time">· {t.time}</span>
                  <span className={`plan-sym-badge ${t.side}`}>{t.sym} {t.side.toUpperCase()}</span>
                </div>
              </div>
            </div>
            <div className="plan-text">{t.plan}</div>
            <div className="plan-actions">
              <button className="plan-copy-btn" onClick={() => handleCopyPlan(t)}>Copy Plan →</button>
              <span className="plan-sessions">🔥 {t.sessions} sessions</span>
            </div>
          </div>
        ))}
      </div>

      <DayTraderRight 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>
  );
}

// Day Trader right rail — macro channels (execute vs read) + daily meter + streak
function DayTraderRight({ onChannelExecute }) {
  return (
    <div className="genz-right">
      <div className="genz-section-h" style={{margin:'4px 0 12px'}}>Macro Channels</div>

      {CHANNELS.map(ch => (
        <div key={ch.name} className="macro-channel-card">
          <div className="macro-channel-head">
            <div className="macro-channel-icon" style={{background: ch.bg}}>📢</div>
            <div className="macro-channel-name">{ch.name}</div>
            <div className="macro-channel-stats">{ch.subs.toLocaleString()} subs</div>
          </div>

          {ch.action === 'plan' && ch.raw ? (
            <>
              <div className="macro-channel-signal">
                <span className="buy">{ch.raw}</span>
              </div>
              <button className="execute-btn" onClick={() => onChannelExecute && onChannelExecute(ch)}>
                Execute →
              </button>
            </>
          ) : (
            <>
              <div className="macro-channel-signal" style={{fontFamily:'Inter,sans-serif', fontSize:11}}>
                {ch.note}
              </div>
              <button className="macro-read-btn">Read →</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:'var(--text)', fontWeight:600}}>$0</span> of $200 used today
        </div>
        <div className="daily-meter-bar"><div className="daily-meter-fill" style={{width:'0%'}}></div></div>
      </div>

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

// Feed chart view — Day Trader uses H4+H1 split (consistent with Standard mode)
function GenZChart({ livePrice, onBack, onFlatten, chartOverlay, overlayStyle }) {
  const ov = chartOverlay || { entry: 2632, sl: 2618, tp: 2660 };
  const entry = ov.entry != null ? ov.entry : 2632;
  const pl = ((livePrice - entry) * 0.07 * 100);
  return (
    <div style={{flex:1, display:'flex', flexDirection:'column', background:'var(--bg)'}}>
      <div style={{display:'flex', alignItems:'center', gap:10, padding:'10px 16px', borderBottom:'1px solid var(--border)'}}>
        <button className="back-link" onClick={onBack}>← Feed</button>
        <div style={{fontWeight:700, fontSize:14}}>GOLD</div>
        <div style={{fontSize:11, color:'var(--text-3)', fontFamily:'JetBrains Mono,monospace', fontWeight:600}}>H4+H1</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 style={{display:'grid', gridTemplateColumns:'1fr 260px', flex:1, minHeight:0}}>
        <div style={{position:'relative', minHeight:0}}>
          <DayMultiTFChart overlay={ov} overlayStyle={overlayStyle} currentPrice={livePrice} totalWidth={900} height={500} />
        </div>
        <div style={{background:'var(--panel-2)', borderLeft:'1px solid var(--border)', padding:14, overflowY:'auto'}}>
          <div className="ticket-header" style={{padding:'0 0 10px', borderBottom:'1px solid var(--border)', marginBottom:10}}>
            <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'}}>SL</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)'}}>TP</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.07</span></div>
          <div className={`posmgmt-pl ${pl >= 0 ? 'pos' : 'neg'}`}>{pl >= 0 ? '+' : '−'}${Math.abs(pl).toFixed(2)}</div>
          <div className="posmgmt-actions">
            <button>Breakeven</button>
            <button>Trail SL</button>
            <button className="flatten" onClick={onFlatten}>Flatten</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Macro Channels full view (navTab === 'copy')
function MacroChannelsView({ onBack, onExecute }) {
  return (
    <div className="ct-view">
      <button className="back-link" onClick={onBack} style={{marginBottom:12}}>← Back</button>
      <div className="ct-h">Macro Channels</div>
      <div className="ct-sub">Follow analysts · One-tap execute or read analysis</div>
      <div className="ct-filters">
        <div className="ct-chip active">All</div>
        <div className="ct-chip">GOLD</div>
        <div className="ct-chip">FX</div>
        <div className="ct-chip">Execute only</div>
      </div>
      {CHANNELS.map(ch => (
        <div key={ch.name} className="ct-channel-card">
          <div className="channel-icon" style={{background: ch.bg, width:44, height:44, fontSize:18}}>📢</div>
          <div>
            <div className="ct-channel-name">{ch.name}</div>
            <div className="ct-channel-stats">
              Win rate: <span>{ch.winRate}%</span> · Avg hold: <span>{ch.avgHold}</span> · <span>{ch.subs.toLocaleString()}</span> subs
            </div>
          </div>
          <div className="ct-actions">
            {ch.action === 'plan'
              ? <button className="follow" onClick={() => onExecute && onExecute(ch)}>Execute →</button>
              : <button className="view">Read</button>
            }
          </div>
        </div>
      ))}
    </div>
  );
}

window.GenZMode = GenZMode;