// Gen Z mode — Swing & Position Trader (feed, live, share)
const { useState: useGZ } = React;

// ── Left icon nav ────────────────────────────────────────────────────────────
function SwingGenZNav({ gzState, setGzState, navTab, setNavTab, hasShare }) {
  const items = [
    { id: 'home',  icon: '⊟', label: 'Feed',    state: 'feed'  },
    { id: 'chart', icon: '📈', label: 'Live',    state: 'live'  },
    { id: 'share', icon: '⊕',  label: 'Share',   state: hasShare ? 'share' : null },
  ];
  return (
    <div className="genz-nav">
      {items.map(it => (
        <div key={it.id}
             className={`genz-nav-item${navTab === it.id ? ' active' : ''}`}
             title={it.label}
             onClick={() => {
               setNavTab(it.id);
               if (it.state) setGzState(it.state);
             }}
             style={{position:'relative'}}>
          <span style={{fontSize:18}}>{it.icon}</span>
          {it.id === 'share' && hasShare && (
            <span style={{position:'absolute', top:2, right:2, width:7, height:7, borderRadius:'50%', background:'var(--green)', boxShadow:'0 0 6px rgba(34,197,94,0.7)'}}></span>
          )}
        </div>
      ))}
      <div style={{marginTop:'auto', paddingBottom:8}}>
        <div className="genz-nav-item" title="Profile">
          <div style={{width:28, height:28, borderRadius:'50%', background:'linear-gradient(135deg,#F59E0B,#DC2626)', display:'grid', placeItems:'center', fontSize:11, fontWeight:700}}>A</div>
        </div>
      </div>
    </div>
  );
}

// ── Thesis feed (Gen Z home) ─────────────────────────────────────────────────
function ThesisFeed({ setGzState, setNavTab, livePrice }) {
  const [mirroredId, setMirroredId] = useGZ(null);
  const [executedChannel, setExecutedChannel] = useGZ(null);

  const handleMirror = (handle) => setMirroredId(handle);
  const handleExecute = (idx) => setExecutedChannel(idx);

  return (
    <div className="genz-feed">
      <div className="genz-feed-h">Swing & Position Feed</div>
      <div className="genz-feed-sub">Theses from traders holding days to weeks · Not noise</div>

      {/* Telegram channels inline */}
      <div className="genz-section-h">FOLLOWED CHANNELS</div>
      {SWING_CHANNELS.map((ch, i) => (
        <div key={i} className="tg-channel-card">
          <div className="tg-channel-head">
            <div className="tg-channel-icon" style={{background: ch.bg}}>📢</div>
            <div style={{flex:1, minWidth:0}}>
              <div className="tg-channel-name">{ch.name}</div>
              <div className="tg-channel-stats">
                <span className="win">{ch.winRate}%</span> win · avg hold {ch.avgHold} · {ch.subs.toLocaleString()} subs
              </div>
            </div>
            {executedChannel === i && (
              <div style={{fontSize:10, fontWeight:700, color:'var(--green)', padding:'2px 7px', borderRadius:4, background:'rgba(34,197,94,0.12)', border:'1px solid rgba(34,197,94,0.25)'}}>✓ Queued</div>
            )}
          </div>
          <div className="tg-signal-box">
            {ch.raw
              ? <><span className="buy">LONG</span> {ch.raw.replace('XAUUSD LONG ','')}</>
              : <span style={{color:'var(--text-3)'}}>{ch.note}</span>
            }
          </div>
          <div className="tg-channel-actions">
            {ch.action === 'execute' ? (
              <button
                className="tg-execute-btn"
                onClick={() => { handleExecute(i); setTimeout(() => setExecutedChannel(null), 2000); }}>
                {executedChannel === i ? '✓ Order queued at my risk settings' : '⚡ Execute at my risk'}
              </button>
            ) : (
              <button className="tg-execute-btn" style={{background:'rgba(255,255,255,0.04)', color:'var(--text-2)', borderColor:'var(--border)'}}>Read full analysis</button>
            )}
            <button className="tg-read-btn">History</button>
          </div>
        </div>
      ))}

      {/* Trader thesis cards */}
      <div className="genz-section-h">TRADER THESES</div>
      {SWING_TRADERS.map((t, i) => (
        <div key={i} className="thesis-feed-card">
          <div className="tfc-top">
            <div className="tfc-avatar" style={{background: t.avBg}}>{t.avatar}</div>
            <div className="tfc-info">
              <div className="tfc-handle">
                {t.handle}
                <span style={{fontSize:10, color:'var(--blue)'}}>✓</span>
                <span className="time">{t.time} ago</span>
              </div>
              <div className="tfc-meta">{t.winRate}% win · avg {t.avgHold} · {t.followers.toLocaleString()} followers</div>
            </div>
            <div>
              <span className={`tfc-sym-badge ${t.side}`}>{t.sym} {t.dir}</span>
            </div>
          </div>

          <div className="tfc-thesis">"{t.thesis}"</div>

          <div className="tfc-pl-row">
            <div>
              <div className="tfc-hold-badge">
                <span className="days">{t.daysHeld} days held</span>
                <span style={{color:'var(--text-3)'}}>· entered at {t.entryPx.toFixed(2)}</span>
              </div>
            </div>
            <div className="tfc-pl">{fmtMoney(t.currentPL)}</div>
          </div>

          <div className="tfc-actions">
            {mirroredId === t.handle
              ? <button className="mirror-btn" style={{background:'var(--green)', cursor:'default'}}>✓ Position mirrored</button>
              : <button className="mirror-btn" onClick={() => handleMirror(t.handle)}>Mirror Position</button>
            }
            <button className="follow-btn">Follow</button>
            <button className="follow-btn">Chart</button>
          </div>
        </div>
      ))}

      {/* Bottom spacer */}
      <div style={{height:40}}></div>
    </div>
  );
}

// ── Gen Z right — popular swing traders ──────────────────────────────────────
function SwingGenZRight({ livePrice }) {
  const popularTraders = [
    { handle: '@carlos_macro_gold', avatar: 'C', avBg: 'linear-gradient(135deg,#10B981,#059669)', followers: 2180, winRate: 71, avgHold: '23 days', drawdown: '4.2%', aum: '$284k copied' },
    { handle: '@rahul_gold_thesis', avatar: 'R', avBg: 'linear-gradient(135deg,#F59E0B,#DC2626)', followers: 1240, winRate: 68, avgHold: '11 days', drawdown: '5.8%', aum: '$142k copied' },
    { handle: '@priya_macro',       avatar: 'P', avBg: 'linear-gradient(135deg,#8B5CF6,#3B82F6)', followers: 840,  winRate: 62, avgHold: '18 days', drawdown: '6.1%', aum: '$98k copied'  },
  ];

  return (
    <div className="genz-right">
      <div style={{fontWeight:700, fontSize:13, marginBottom:4}}>Popular Swing Traders</div>
      <div style={{fontSize:11, color:'var(--text-3)', marginBottom:14}}>Sorted by avg hold + drawdown</div>

      {popularTraders.map((t, i) => (
        <div key={i} className="popular-trader-card">
          <div className="ptc-head">
            <div className="ptc-avatar" style={{background: t.avBg}}>{t.avatar}</div>
            <div style={{flex:1, minWidth:0}}>
              <div className="ptc-name">{t.handle}</div>
              <div style={{fontSize:10, color:'var(--text-3)'}}>{t.aum}</div>
            </div>
            <span className="ptc-verified">✓</span>
          </div>
          <div className="ptc-stats">
            <div><div style={{color:'var(--text-3)', fontSize:10}}>Win rate</div><div className="ptc-stat-val">{t.winRate}%</div></div>
            <div><div style={{color:'var(--text-3)', fontSize:10}}>Avg hold</div><div className="ptc-stat-val">{t.avgHold}</div></div>
            <div><div style={{color:'var(--text-3)', fontSize:10}}>Max DD</div><div className="ptc-stat-val" style={{color:'var(--red)'}}>{t.drawdown}</div></div>
            <div><div style={{color:'var(--text-3)', fontSize:10}}>Followers</div><div className="ptc-stat-val">{t.followers.toLocaleString()}</div></div>
          </div>
          <button className="ptc-copy-btn">Mirror this trader</button>
        </div>
      ))}

      {/* Live GOLD ticker */}
      <div style={{marginTop:14, padding:'12px', background:'var(--panel-2)', border:'1px solid var(--border)', borderRadius:12}}>
        <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.08em', color:'var(--text-3)', marginBottom:8, textTransform:'uppercase'}}>GOLD · Live</div>
        <div style={{fontFamily:'JetBrains Mono,monospace', fontSize:22, fontWeight:800, color:'var(--green)'}}>{livePrice.toFixed(2)}</div>
        <div style={{fontSize:11, color:'var(--text-2)', marginTop:2}}>▲ +1.14% today · Thesis: intact</div>
      </div>
    </div>
  );
}

// ── Gen Z live view (position open) ─────────────────────────────────────────
function SwingGenZLive({ livePrice, onClose }) {
  const entryPx = 2632, slPx = 2590, lots = 0.07;
  const unrealizedPL = (livePrice - entryPx) * lots * 100;
  const rCaptured = (unrealizedPL / ((entryPx - slPx) * lots * 100)).toFixed(2);

  return (
    <div className="genz-feed">
      <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
        <div style={{width:8, height:8, borderRadius:'50%', background:'var(--green)', animation:'pulse 1.5s infinite'}}></div>
        <div style={{fontWeight:800, fontSize:18, letterSpacing:'-0.01em'}}>GOLD LONG · Live</div>
        <div style={{marginLeft:'auto', fontSize:12, color:'var(--text-2)'}}>3 days held</div>
      </div>

      {/* Big P&L */}
      <div style={{background:'var(--panel)', border:'1px solid rgba(34,197,94,0.35)', borderRadius:16, padding:24, textAlign:'center', marginBottom:16}}>
        <div style={{fontSize:11, color:'var(--green)', fontWeight:700, letterSpacing:'0.08em', marginBottom:8}}>UNREALIZED P&L</div>
        <div style={{fontFamily:'JetBrains Mono,monospace', fontSize:44, fontWeight:800, color:'var(--green)', letterSpacing:'-0.02em'}}>{fmtMoney(unrealizedPL)}</div>
        <div style={{fontSize:14, color:'var(--green)', fontWeight:600, marginTop:4}}>+{rCaptured}R · Thesis intact</div>
        <div style={{fontSize:12, color:'var(--text-2)', marginTop:8}}>Entry 2632 · Current {livePrice.toFixed(2)} · TP 2720</div>
      </div>

      {/* Thesis box */}
      <div style={{background:'rgba(59,130,246,0.06)', border:'1px solid rgba(59,130,246,0.2)', borderRadius:12, padding:'12px 14px', marginBottom:16, fontSize:12, color:'var(--text-2)', lineHeight:1.6}}>
        <div style={{fontWeight:700, color:'#93C5FD', fontSize:10, letterSpacing:'0.08em', marginBottom:6}}>📌 YOUR THESIS</div>
        "DXY weakness + real yields falling → gold bid. Exit if US10Y &gt; 4.5%."
      </div>

      {/* Scale out */}
      <div style={{marginBottom:16}}>
        <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.08em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:8}}>SCALE OUT</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8}}>
          {['25%','50%','75%'].map(p => (
            <button key={p} style={{padding:'12px', borderRadius:10, background:'var(--panel)', border:'1px solid var(--border)', fontWeight:700, fontSize:13, cursor:'pointer'}}>Close {p}</button>
          ))}
        </div>
      </div>

      <button
        onClick={() => onClose(unrealizedPL)}
        style={{width:'100%', padding:14, background:'var(--red)', color:'white', borderRadius:10, fontWeight:700, fontSize:14, cursor:'pointer', marginBottom:8}}>
        Close Full Position
      </button>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
        <div style={{background:'var(--panel)', border:'1px solid var(--border)', borderRadius:10, padding:12, textAlign:'center'}}>
          <div style={{fontSize:10, color:'var(--text-3)', marginBottom:4}}>Financing accrued</div>
          <div style={{fontFamily:'JetBrains Mono,monospace', fontWeight:700, color:'var(--amber)'}}>-$5.04</div>
        </div>
        <div style={{background:'var(--panel)', border:'1px solid var(--border)', borderRadius:10, padding:12, textAlign:'center'}}>
          <div style={{fontSize:10, color:'var(--text-3)', marginBottom:4}}>Weekend gap risk</div>
          <div style={{fontWeight:700, color:'var(--amber)'}}>⚠️ Medium</div>
        </div>
      </div>
    </div>
  );
}

// ── Root Gen Z mode ──────────────────────────────────────────────────────────
function SwingGenZMode({ gzState, setGzState, livePrice, onCloseShare, sharePayload, onPositionClose }) {
  const [navTab, setNavTab] = useGZ('home');
  return (
    <div className="main genz-app" style={{display:'flex', flexDirection:'column'}}>
      <div className="genz-main" style={{flex:1, minHeight:0}}>
        <SwingGenZNav gzState={gzState} setGzState={setGzState} navTab={navTab} setNavTab={setNavTab} hasShare={!!sharePayload} />

        <div style={{flex:1, minWidth:0, overflow:'hidden', display:'flex', flexDirection:'column'}}>
          {gzState === 'feed' && (
            <ThesisFeed setGzState={setGzState} setNavTab={setNavTab} livePrice={livePrice} />
          )}
          {gzState === 'live' && (
            <SwingGenZLive livePrice={livePrice} onClose={onPositionClose} />
          )}
          {gzState === 'share' && !sharePayload && (
            <div style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', color:'var(--text-3)', gap:8}}>
              <div style={{fontSize:32}}>⊕</div>
              <div style={{fontSize:13}}>No closed trade yet</div>
              <div style={{fontSize:11}}>Close a position to generate your share card</div>
            </div>
          )}
        </div>

        <SwingGenZRight livePrice={livePrice} />
      </div>

      {/* Share modal */}
      {sharePayload && (
        <div className="modal-backdrop" onClick={onCloseShare}>
          <div className="share-card" onClick={e => e.stopPropagation()}>
            <div className="share-head">
              <div className="share-pill">● {sharePayload.sym || 'GOLD'} {sharePayload.dir || 'LONG'} · CLOSED ✓</div>
            </div>

            {/* Thesis framing — the key P3 differentiator */}
            <div className="share-thesis-box">
              "Called it. DXY weakness played out exactly as I expected. US10Y fell from 4.48% to 4.31% over 18 days."
            </div>

            <div className="share-meta">
              <div className="share-meta-row">
                <div className="lbl">Thesis</div>
                <div className="val">DXY Weakness</div>
              </div>
              <div className="share-meta-row">
                <div className="lbl">Entry</div>
                <div className="val">{(sharePayload.entry || 2632).toFixed(2)} · planned ✓</div>
              </div>
              <div className="share-meta-row">
                <div className="lbl">Exit</div>
                <div className="val">{(sharePayload.exit || 2641).toFixed(2)} · TP hit ✓</div>
              </div>
              <div className="share-meta-row">
                <div className="lbl">Held</div>
                <div className="val">{sharePayload.hold || '18 days'}</div>
              </div>
            </div>

            <div className="share-pl">+${(sharePayload.pl || 63).toFixed(2)}</div>
            <div className="share-pct">+{sharePayload.pct || '0.6'}% account · Thesis played out ✓</div>

            <div className="share-streak">
              🔥 <span style={{fontWeight:700}}>4 positions green</span>
              <span style={{color:'var(--text-3)', marginLeft:'auto', fontSize:11}}>personal best: 7</span>
            </div>

            <div className="share-actions">
              <button className="secondary">📓 Add to journal</button>
              <button className="primary">📤 Share to Feed</button>
            </div>
            <button className="share-close" onClick={onCloseShare}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
}

window.SwingGenZMode = SwingGenZMode;