/* src/v2/movers.jsx — MoversRow: gainers + losers from /market-movers. */

const { useState: _mvS, useEffect: _mvE } = React;

function MoversCard({ side, items, loading, err }) {
  const title = side === 'gainers' ? 'Top gainers' : 'Top losers';
  const toneClass = side === 'gainers' ? 'up' : 'down';
  return (
    <div className="card movers-card">
      <div className="card-hd">
        <span className="t">{title}</span>
        <span className={'tag ' + (side === 'gainers' ? 'warm' : 'cool')}>{side === 'gainers' ? 'S&P leaders' : 'S&P laggards'}</span>
        <span className="explain">Largest intraday moves · ranked by % change · volume × 30-day avg.</span>
      </div>
      <div className="card-bd rows">
        {loading && <div style={{ padding: 20, color: 'var(--ink-3)', fontStyle: 'italic', fontFamily: 'var(--serif)' }}>Loading {side}…</div>}
        {err && !loading && <div style={{ padding: 20, color: 'var(--ink-3)' }}>{err}</div>}
        {!loading && !err && items.length === 0 && <div style={{ padding: 20, color: 'var(--ink-3)' }}>No data.</div>}
        {items.map((it, i) => (
          <a key={it.symbol || i} className="mv-row" href={'/details.html?symbol=' + encodeURIComponent(it.symbol)} style={{ textDecoration: 'none' }}>
            <span className="rank">{String(i + 1).padStart(2, '0')}</span>
            <div className="left">
              <span className="sym">{it.symbol}</span>
              <span className="name">{it.name || ''}</span>
            </div>
            <span className="px">{fmtPx(it.price)}</span>
            <span className={'pct ' + toneClass}>{fmtPct(it.changePercent)}</span>
            <span className="vol">{fmtNumCompact(it.volume)}<span className="k">vol</span></span>
            <span className="spark" />
          </a>
        ))}
      </div>
    </div>
  );
}

function MoversRow() {
  const [gainers, setGainers] = _mvS([]);
  const [losers, setLosers] = _mvS([]);
  const [loading, setLoading] = _mvS(true);
  const [err, setErr] = _mvS(null);

  _mvE(() => {
    let alive = true;
    (async () => {
      try {
        const data = await window.TMT_API.getJSON('/market-movers?type=both&count=8');
        if (!alive) return;
        setGainers((data && data.gainers) || []);
        setLosers((data && data.losers) || []);
      } catch (e) {
        if (!alive) return;
        setErr('Movers unavailable');
      } finally { if (alive) setLoading(false); }
    })();
    return () => { alive = false; };
  }, []);

  return (
    <div className="movers-row">
      <MoversCard side="gainers" items={gainers} loading={loading} err={err} />
      <MoversCard side="losers"  items={losers}  loading={loading} err={err} />
    </div>
  );
}

Object.assign(window, { MoversRow, MoversCard });