// Marketplace v2 — discovery grid + baked-in DEX panel

function PedbyMarketplace({ tokens, onNav, trades = [], onQuickTrade, onTrade, wallet, activityReady = true }) {
  const [filter, setFilter] = React.useState('all');
  const [q, setQ] = React.useState('');
  const [sort, setSort] = React.useState('trending');
  const [dexSel, setDexSel] = React.useState(null);

  let list = tokens.filter(t => {
    if (filter === 'graduated') return t.graduated;
    if (filter === 'graduating') return !t.graduated && PEDBY_CURVE.progress(t.curve) >= 0.5;
    if (filter === 'new') return !t.graduated && PEDBY_CURVE.progress(t.curve) < 0.1;
    return true;
  }).filter(t => (t.name + t.ticker).toLowerCase().includes(q.toLowerCase()));

  list = [...list].sort((a, b) => {
    if (sort === 'trending') return b.replies - a.replies;
    if (sort === 'mcap') return PEDBY_CURVE.marketCapUsd(b.curve) - PEDBY_CURVE.marketCapUsd(a.curve);
    if (sort === 'new') return a.createdAgo.localeCompare(b.createdAgo);
    return 0;
  });

  return (
    <div>
      <TradeTape tokens={tokens} />
      <div className="pedby-page-pad" style={{ maxWidth: 1240, margin: '0 auto', padding: '44px 32px 110px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: 2, color: '#1E8C45', textTransform: 'uppercase', marginBottom: 10 }}>Live curves · Base</div>
            <h1 style={{ margin: 0, fontSize: 34, fontWeight: 800, letterSpacing: '-0.025em' }}>
              Marketplace
            </h1>
          </div>
          <Btn kind="primary" icon={<SfIcon name="plus" size={15} stroke="#fff" />} onClick={() => onNav('create')}>Launch a token</Btn>
        </div>

        <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 26, flexWrap: 'wrap' }}>
          <div style={{ position: 'relative', flex: '0 1 280px' }}>
            <SfIcon name="search" size={15} stroke="#9AA39E" style={{ position: 'absolute', left: 13, top: 10.5 }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search tokens…" style={{
              width: '100%', height: 38, borderRadius: 999, border: '1px solid #E6EAE6', padding: '0 14px 0 36px',
              fontSize: 13, fontFamily: 'inherit', background: '#fff', outline: 'none',
            }} />
          </div>
          <div style={{ display: 'flex', gap: 8, flex: 1, flexWrap: 'wrap' }}>
            <Chip active={filter === 'all'} onClick={() => setFilter('all')}>All</Chip>
            <Chip active={filter === 'new'} onClick={() => setFilter('new')}>New</Chip>
            <Chip active={filter === 'graduating'} onClick={() => setFilter('graduating')}>Graduating soon</Chip>
            <Chip active={filter === 'graduated'} onClick={() => setFilter('graduated')}>Graduated</Chip>
          </div>
          <select value={sort} onChange={e => setSort(e.target.value)} style={{
            height: 38, borderRadius: 999, border: '1px solid #E6EAE6', padding: '0 14px', fontFamily: 'inherit', fontSize: 12.5, background: '#fff', color: '#3B453F', outline: 'none',
          }}>
            <option value="trending">Sort: Trending</option>
            <option value="mcap">Sort: Market cap</option>
            <option value="new">Sort: Newest</option>
          </select>
        </div>

        {list.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '80px 0', color: '#9AA39E', fontSize: 14 }}>No tokens match.</div>
        ) : (
          <div className="pedby-market-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 330px', gap: 24, alignItems: 'start' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(270px,1fr))', gap: 20 }}>
              {list.map(t => <TokenCard key={t.id} t={t} onClick={() => onNav('token', t.id)} onTrade={onTrade} />)}
            </div>
            <PedbyDexPanel tokens={tokens} wallet={wallet} onTrade={onTrade} trades={trades} selectedId={dexSel} onSelect={setDexSel} activityReady={activityReady} />
          </div>
        )}
      </div>
    </div>
  );
}

window.PedbyMarketplace = PedbyMarketplace;