// trade.jsx — Trade flow re-imagined as a bottom-sheet modal
// Shows 3 stages of the modal side-by-side (composite slide), like a wizard
// but visualized as a single sheet that morphs.

function TradeFlow({ dark }) {
  const t = useTheme(dark);
  // We render the "stock page underneath" once and then show three sheet states
  // as a composite — here just the most informative one.
  return (
    <div style={{ background: t.bg, color: t.text, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: SW_FONT, position: 'relative' }}>
      {/* Backdrop: subtle stock detail */}
      <div style={{ filter: 'blur(0.5px)', opacity: 0.55, transform: 'scale(1.0)', height: '100%', overflow: 'hidden',
        background: t.bg, position: 'absolute', inset: 0 }}>
        <div style={{ padding: '54px 16px 6px', display: 'flex', alignItems: 'center', gap: 12 }}>
          {Icon.back(t.text, 22)}
          <Ticker symbol="AMZN" size={26} />
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Amazon.com</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim }}>AMZN</div>
          </div>
        </div>
        <div style={{ padding: '10px 20px' }}>
          <div style={{ fontFamily: SW_MONO, fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em' }}>€227.35</div>
        </div>
        <div style={{ padding: '0 8px' }}>
          <MiniChart data={SAMPLE.amzn} w={370} h={130} color={t.up} stroke={2} fillOpacity={0.1} />
        </div>
      </div>

      {/* Dimmer */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)',
        backdropFilter: 'blur(2px)', WebkitBackdropFilter: 'blur(2px)' }} />

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: t.surface,
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '12px 20px 100px',
        boxShadow: '0 -20px 60px rgba(0,0,0,0.25)',
        maxHeight: '85%',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* drag handle */}
        <div style={{ width: 38, height: 4, borderRadius: 2, background: t.borderStrong,
          alignSelf: 'center', marginBottom: 12 }} />

        {/* Header: ticker + step indicator */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <Ticker symbol="AMZN" size={36} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em' }}>Trade Amazon.com</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 11, color: t.textDim, marginTop: 1 }}>AMZN · €227.35 · −1.50%</div>
          </div>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: t.chip,
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: t.textMuted, fontWeight: 600 }}>×</div>
        </div>

        {/* Step dots */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
          {['Side', 'Amount', 'Limits', 'Confirm'].map((s, i) => (
            <div key={s} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' }}>
              <div style={{ height: 3, width: '100%', borderRadius: 2,
                background: i <= 2 ? t.up : t.border }} />
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.02em',
                color: i <= 2 ? t.text : t.textDim }}>
                {i + 1}. {s}
              </span>
            </div>
          ))}
        </div>

        {/* Step 3 active: Limits */}
        <div style={{ flex: 1, overflow: 'auto' }}>
          {/* Side recap */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            <div style={{ flex: 1, padding: '12px 14px', borderRadius: 12, background: t.upSoft,
              border: `1px solid ${t.up}`, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 24, height: 24, borderRadius: 12, background: t.up,
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {Icon.check('#fff', 14)}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>Buying</div>
                <div style={{ fontFamily: SW_MONO, fontSize: 14, fontWeight: 700, color: t.up }}>10 shares</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 10, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>≈</div>
                <div style={{ fontFamily: SW_MONO, fontSize: 14, fontWeight: 700 }}>€2,273.50</div>
              </div>
            </div>
          </div>

          {/* Order type */}
          <div style={{ marginBottom: 14 }}>
            <div style={{ fontSize: 11.5, fontWeight: 600, color: t.textMuted, marginBottom: 8, letterSpacing: '0.02em' }}>
              ORDER TYPE
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
              {[
                { id: 'market', label: 'Market', sub: 'Now @ €227.35' },
                { id: 'limit', label: 'Limit', sub: 'Set price', active: true },
                { id: 'stop', label: 'Stop', sub: 'Trigger' },
              ].map(o => (
                <div key={o.id} style={{
                  padding: '10px 10px', borderRadius: 10,
                  background: o.active ? t.text : t.surface,
                  color: o.active ? t.bg : t.text,
                  border: `0.5px solid ${o.active ? t.text : t.border}`,
                  textAlign: 'center',
                }}>
                  <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '-0.005em' }}>{o.label}</div>
                  <div style={{ fontSize: 10, opacity: 0.65, marginTop: 2, fontFamily: SW_MONO }}>{o.sub}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Limit price input */}
          <div style={{ marginBottom: 14 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontSize: 11.5, fontWeight: 600, color: t.textMuted, letterSpacing: '0.02em' }}>LIMIT PRICE</span>
              <span style={{ fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim }}>Day H €228.50 · L €224.45</span>
            </div>
            <div style={{ padding: '14px 16px', borderRadius: 12, background: t.bgSubtle,
              border: `0.5px solid ${t.border}`,
              display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: SW_MONO, fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: t.text }}>
                € 225.00
              </span>
              <Chip t={t} color={t.up} bg={t.upSoft} size="xs" style={{ marginLeft: 'auto' }}>−1.0% vs spot</Chip>
            </div>
            {/* Quick % buttons */}
            <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
              {['−5%','−2%','−1%','Spot','+1%','+2%'].map((p, i) => (
                <div key={p} style={{
                  flex: 1, padding: '6px 0', borderRadius: 7,
                  background: i === 3 ? t.chip : 'transparent',
                  border: `0.5px solid ${t.border}`,
                  textAlign: 'center', fontFamily: SW_MONO, fontSize: 11, fontWeight: 600,
                  color: i === 3 ? t.text : t.textMuted,
                }}>{p}</div>
              ))}
            </div>
          </div>

          {/* Valid till */}
          <div style={{ marginBottom: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: t.textMuted, marginBottom: 6, letterSpacing: '0.02em' }}>VALID TILL</div>
              <div style={{ padding: '10px 12px', borderRadius: 10, background: t.bgSubtle,
                border: `0.5px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 13, fontWeight: 600 }}>21 May 2026</span>
                <span style={{ color: t.textDim, fontSize: 14 }}>›</span>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: t.textMuted, marginBottom: 6, letterSpacing: '0.02em' }}>STOP LOSS</div>
              <div style={{ padding: '10px 12px', borderRadius: 10, background: t.bgSubtle,
                border: `0.5px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 12, color: t.textDim, fontWeight: 500 }}>＋ Add</span>
              </div>
            </div>
          </div>

          {/* Crowd inline */}
          <div style={{
            padding: '12px 14px', borderRadius: 12,
            background: t.upSoft,
            display: 'flex', alignItems: 'center', gap: 10,
            marginBottom: 8,
          }}>
            <div style={{ width: 32, height: 32, borderRadius: 16, background: t.up,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {Icon.users('#fff', 16)}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: t.text, letterSpacing: '-0.005em' }}>
                97% of crowd agrees with Buy
              </div>
              <div style={{ fontSize: 11, color: t.textMuted, marginTop: 1 }}>Median target €253.48 · +11.3% upside</div>
            </div>
          </div>
        </div>

        {/* CTAs */}
        <div style={{ display: 'flex', gap: 8, paddingTop: 14, marginTop: 'auto' }}>
          <div style={{
            padding: '14px 18px', borderRadius: 14,
            background: t.bgSubtle, color: t.text,
            border: `0.5px solid ${t.border}`,
            fontWeight: 600, fontSize: 14,
          }}>← Back</div>
          <div style={{
            flex: 1, padding: '14px 0', borderRadius: 14,
            background: t.up, color: '#fff',
            textAlign: 'center', fontWeight: 700, fontSize: 14, letterSpacing: '0.01em',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            boxShadow: `0 8px 24px ${t.up}55`,
          }}>
            Review order
            <span style={{ fontFamily: SW_MONO, opacity: 0.7, fontSize: 12 }}>€2,250.00</span>
          </div>
        </div>
      </div>

      {/* Home indicator zone */}
    </div>
  );
}

Object.assign(window, { TradeFlow });