/* global React, CRYPTOLIVE_DATA, Coin, Sparkline, Icon, fmtPrice, fmtPct, fmtUSD, upDownClass, useT */

function MarketRow({ asset, onClick }) {
  const t = useT();
  const up = asset.change24h >= 0;
  const premUp = asset.premium > 0;
  return (
    <div className="row" onClick={onClick}>
      <Coin id={asset.id} symbol={asset.symbol} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 15, display: 'flex', alignItems: 'center', gap: 6 }}>
          {asset.symbol}
          <span className="t-meta" style={{ color: 'var(--fg-3)' }}>· {asset.name}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
          <span className="pill" style={{ height: 20, fontSize: 11, padding: '0 7px' }}>{asset.class}</span>
          <span className="t-meta">{asset.sector}</span>
        </div>
      </div>
      <div style={{ width: 90, height: 32 }} className="hide-mobile">
        <Sparkline data={asset.chart}
          color={up ? 'var(--up)' : 'var(--down)'}
          width={90} height={32} strokeWidth={1.5} />
      </div>
      <div style={{ minWidth: 100, textAlign: 'right' }}>
        <div className="t-num" style={{ fontWeight: 700, fontSize: 15 }}>${fmtPrice(asset.tokenPrice)}</div>
        <div className={`t-num ${up ? 'c-up' : 'c-down'}`} style={{ fontSize: 13, fontWeight: 600 }}>{fmtPct(asset.change24h)}</div>
      </div>
      <div style={{ minWidth: 96, textAlign: 'right' }} className="hide-mobile">
        <div className="t-meta">{t('vsUnderlying')}</div>
        <div className={`t-num ${premUp ? 'c-up' : asset.premium < 0 ? 'c-down' : 'c-fg2'}`} style={{ fontSize: 13, fontWeight: 600 }}>{fmtPct(asset.premium)}</div>
      </div>
      <div style={{ minWidth: 96, textAlign: 'right' }} className="hide-mobile">
        <div className="t-meta">{t('vol24h')}</div>
        <div className="t-num" style={{ fontSize: 13, fontWeight: 600 }}>{fmtUSD(asset.vol24h)}</div>
      </div>
    </div>
  );
}

function MarketScreen({ goto }) {
  const t = useT();
  const [cat, setCat] = React.useState('전체');
  const [sortBy, setSortBy] = React.useState('vol');
  const cats = [
    { id: '전체', label: t('catAll') },
    { id: '주식형', label: t('catStock') },
    { id: 'ETF형', label: t('catETF') },
    { id: '채권형', label: t('catBond') },
    { id: '수익형', label: t('catYield') },
    { id: '원자재형', label: t('catCommodity') },
  ];
  const sorts = [
    { id: 'vol', label: t('sortVol') },
    { id: 'gain', label: t('sortGain') },
    { id: 'loss', label: t('sortLoss') },
    { id: 'premHi', label: t('sortPremHi') },
    { id: 'premLo', label: t('sortPremLo') },
  ];

  const list = React.useMemo(() => {
    let l = CRYPTOLIVE_DATA.assets().filter(a => cat === '전체' || a.class === cat);
    if (sortBy === 'vol') l = [...l].sort((a, b) => b.vol24h - a.vol24h);
    if (sortBy === 'gain') l = [...l].sort((a, b) => b.change24h - a.change24h);
    if (sortBy === 'loss') l = [...l].sort((a, b) => a.change24h - b.change24h);
    if (sortBy === 'premHi') l = [...l].sort((a, b) => b.premium - a.premium);
    if (sortBy === 'premLo') l = [...l].sort((a, b) => a.premium - b.premium);
    return l;
  }, [cat, sortBy]);

  const activeCatLabel = cats.find(c => c.id === cat)?.label || cat;

  return (
    <div className="container page" data-screen-label="Market">
      <div style={{ marginBottom: 20 }}>
        <div className="t-h1">{t('marketTitle')}</div>
        <div className="t-meta" style={{ marginTop: 4 }}>{t('marketSub', CRYPTOLIVE_DATA.assets().length)}</div>
      </div>

      <div className="chips" style={{ marginBottom: 16 }}>
        {cats.map(c => (
          <button key={c.id} className={`chip ${cat === c.id ? 'chip--active' : ''}`} onClick={() => setCat(c.id)}>
            {c.label}
          </button>
        ))}
      </div>

      <div className="card">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4, flexWrap: 'wrap', gap: 8 }}>
          <div style={{ fontWeight: 700 }}>{activeCatLabel} · {t('countSuffix', list.length)}</div>
          <select
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value)}
            style={{
              border: '1px solid var(--line)',
              borderRadius: 8,
              padding: '6px 10px',
              fontFamily: 'inherit',
              fontSize: 13,
              fontWeight: 600,
              color: 'var(--fg-2)',
              background: 'white',
              cursor: 'pointer',
            }}>
            {sorts.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
          </select>
        </div>
        <div>
          {list.map(a => <MarketRow key={a.id} asset={a} onClick={() => goto({ tab: 'detail', assetId: a.id })} />)}
        </div>
      </div>
    </div>
  );
}

window.MarketScreen = MarketScreen;