// Neurasea Exchange — Futures view (weekly lock contracts + positions)
// Exports to window: ExFutures

function FuturesCard({ f }) {
  const t = useTheme();
  const T = useT();
  const c = exColors(t);
  const pop = f.popular;
  return (
    <div style={{
      background: pop ? t.ink : t.panel, color: pop ? '#fff' : t.ink,
      border: `1px solid ${pop ? t.ink : t.line}`, borderRadius: 18, padding: 22,
      position: 'relative', display: 'flex', flexDirection: 'column',
      boxShadow: pop ? (t.dark ? '0 18px 50px rgba(0,0,0,0.5)' : '0 18px 50px rgba(0,0,0,0.15)') : 'none',
    }}>
      {pop && <div style={{ position: 'absolute', top: 16, right: 16, fontSize: 10, fontWeight: 650, fontFamily: t.mono, color: t.live, background: t.liveSoft, padding: '3px 8px', borderRadius: 999, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{T('Popular')}</div>}
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 16 }}>
        <Avatar label={f.model[0]} bg={f.bg} fg={f.fg} size={36} radius={10}/>
        <div>
          <div style={{ fontSize: 15, fontWeight: 680, letterSpacing: '-0.01em' }}>{f.model}</div>
          <div style={{ fontSize: 11, fontFamily: t.mono, color: pop ? 'rgba(255,255,255,0.55)' : t.ink3 }}>{f.tier}</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{ fontSize: 32, fontWeight: 720, letterSpacing: '-0.025em' }}>{f.lock.toFixed(2)}</span>
        <span style={{ fontSize: 12, color: pop ? 'rgba(255,255,255,0.55)' : t.ink3, fontFamily: t.mono }}>kWh/Mtok</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
        <span style={{ fontSize: 12, fontFamily: t.mono, color: pop ? 'rgba(255,255,255,0.5)' : t.ink3, textDecoration: 'line-through' }}>{f.spotAvg.toFixed(2)} {T('spot avg')}</span>
        <span style={{ fontSize: 11.5, fontWeight: 650, fontFamily: t.mono, color: t.live, background: t.liveSoft, padding: '2px 7px', borderRadius: 6 }}>−{f.save}%</span>
      </div>
      <div style={{ height: 1, background: pop ? 'rgba(255,255,255,0.12)' : t.line2, margin: '16px 0' }}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, flex: 1, fontSize: 12.5, fontFamily: t.mono }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ color: pop ? 'rgba(255,255,255,0.6)' : t.ink3 }}>{T('WEEKLY')}</span>
          <span style={{ fontWeight: 650 }}>{f.weekly} kWh</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ color: pop ? 'rgba(255,255,255,0.6)' : t.ink3 }}>{T('included / week')}</span>
          <span style={{ fontWeight: 650 }}>{f.included} Mtok</span>
        </div>
      </div>
      <div style={{ marginTop: 20 }}>
        <Btn kind={pop ? 'accent' : 'secondary'} color={pop ? t.live : undefined} full icon="battery">{T('Lock in contract')}</Btn>
      </div>
    </div>
  );
}

function PositionRow({ p }) {
  const t = useTheme();
  const T = useT();
  const c = exColors(t);
  const usedPct = Math.round(p.used / p.included * 100);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1.4fr 0.9fr 0.9fr', gap: 14, alignItems: 'center', padding: '15px 20px', borderBottom: `1px solid ${t.line2}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
        <Avatar label={p.model[0]} bg={p.bg} fg={p.fg} size={30} radius={8}/>
        <div>
          <div style={{ fontSize: 14, fontWeight: 650, color: t.ink }}>{p.model}</div>
          <div style={{ fontSize: 11, fontFamily: t.mono, color: t.live }}>{T('LOCKED')} {p.lock.toFixed(2)}</div>
        </div>
      </div>
      <div style={{ fontSize: 12.5, fontFamily: t.mono }}>
        <span style={{ color: t.ink3 }}>{T('vs spot')} </span>
        <span style={{ color: c.up, fontWeight: 650 }}>−{Math.round((1 - p.lock / p.spot) * 100)}%</span>
      </div>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: t.mono, color: t.ink3, marginBottom: 5 }}>
          <span>{p.used} / {p.included} Mtok</span><span>{usedPct}%</span>
        </div>
        <Meter value={usedPct} color={t.draw}/>
      </div>
      <div style={{ fontSize: 12.5, fontFamily: t.mono, color: t.ink2 }}>{p.expires}</div>
      <div style={{ fontSize: 13, fontFamily: t.mono, fontWeight: 650, color: t.live, textAlign: 'right' }}>+{p.save}</div>
    </div>
  );
}

function ExFutures() {
  const t = useTheme();
  const T = useT();
  return (
    <div style={{ padding: '40px 44px 64px', maxWidth: 1240, margin: '0 auto' }}>
      <ExHead kicker={T('Futures · weekly lock')} title={T('Lock a weekly rate')}
        sub={T('Futures contracts prepay a week of tokens at a fixed price below the spot average. Overflow falls back to spot.')} />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 40 }}>
        {EX_DATA.futures.map(f => <FuturesCard key={f.id} f={f}/>)}
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 680, letterSpacing: '-0.02em', color: t.ink }}>{T('Your positions')}</h2>
        <span style={{ fontSize: 12.5, color: t.ink3, fontFamily: t.mono }}>{EX_DATA.positions.length} {T('open futures contracts')}</span>
      </div>
      <div style={{ background: t.panel, border: `1px solid ${t.line}`, borderRadius: 16, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1.4fr 0.9fr 0.9fr', gap: 14, padding: '12px 20px', fontSize: 10.5, fontFamily: t.mono, color: t.ink3, textTransform: 'uppercase', letterSpacing: '0.05em', background: t.panel2, borderBottom: `1px solid ${t.line}` }}>
          <span>{T('Model')}</span><span>{T('vs spot')}</span><span>{T('USED')}</span><span>{T('EXPIRES')}</span><span style={{ textAlign: 'right' }}>{T('SAVED')}</span>
        </div>
        {EX_DATA.positions.map(p => <PositionRow key={p.id} p={p}/>)}
      </div>
    </div>
  );
}

Object.assign(window, { ExFutures });