;(function () {
/* TopMovers — five-row "rank + mark + name + spark + %" list of the
   user's watchlist, sorted by absolute % change. Same row layout as
   the discover page's MoverRow so the home and trade subapp read the
   same way. No gainers/losers tabs — the user explicitly wanted all
   five static (display only). */

const MoverRow = ({ sym, rank, isLast }) => {
  const up = sym.change >= 0;
  return (
    <div style={{ ...styles.row, borderBottom: isLast ? 'none' : `1px solid ${colors.line}` }}>
      <span style={styles.rank}>{rank}</span>
      <window.SymbolMark sym={sym} size={40} />
      <div style={styles.nameStack}>
        <span style={styles.symCode}>{sym.sym}</span>
        <span style={styles.symName}>{sym.name}</span>
      </div>
      <div style={styles.right}>
        <Sparkline up={up} data={sym.spark} color={up ? colors.green : colors.red} width={56} height={24} />
        <span style={{ ...styles.pct, color: up ? colors.green : colors.red }}>
          {(up ? '+' : '−') + Math.abs(sym.change).toFixed(2) + '%'}
        </span>
      </div>
    </div>
  );
};

const TopMovers = () => {
  const allSymbols = window.useAllSymbols ? window.useAllSymbols() : [];
  const watchlist = (window.WATCHLIST_IDS || [])
    .map((id) => allSymbols.find((s) => s.sym === id))
    .filter(Boolean);
  /* Display order is fixed by WATCHLIST_IDS — rows must NOT reshuffle
     when the live ticks change. The rank number reflects the watchlist
     slot, not the current % rank, so the user gets a stable read. */
  const movers = watchlist;

  return (
    <Card>
      <SectionHeader title="Top Movers" action="View more" />
      {movers.map((s, i) => (
        <MoverRow key={s.sym} sym={s} rank={i + 1} isLast={i === movers.length - 1} />
      ))}
    </Card>
  );
};

const styles = {
  row: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '10px',
    paddingTop: '10px',
    paddingBottom: '10px',
  },
  rank: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '11px',
    color: colors.muted2,
    width: '12px',
    textAlign: 'center',
    flexShrink: 0,
  },
  nameStack: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    minWidth: 0,
  },
  symCode: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '14px',
    color: colors.ink,
  },
  symName: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '12px',
    color: colors.muted,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  right: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-end',
    gap: '2px',
    flexShrink: 0,
  },
  pct: {
    fontFamily: 'Inter',
    fontWeight: 500,
    fontSize: '12px',
    fontVariantNumeric: 'tabular-nums',
  },
};

Object.assign(window, { TopMovers });
})();