// Activity — live sales feed + leaderboards + trending.

function SaleRow({ event, isNew }) {
  return (
    <div className={'row-item ' + (isNew ? 'anim-slide-top' : '')}
         style={{ padding: '10px 12px', borderRadius: 14, background: 'var(--bg-input)', gap: 12 }}>
      <Gift kind={event.kind} num={event.num}/>
      <div className="flex1 col" style={{ minWidth: 0 }}>
        <div className="row aic gap-6">
          <div style={{ fontSize: 14, fontWeight: 600 }}>{event.name}</div>
          <div className="mono small t-mute">#{event.num}</div>
        </div>
        <div className="small t-soft" style={{ marginTop: 2 }}>
          {event.buyer} ← {event.seller} · {fmtRel(event.when)}
        </div>
      </div>
      <div className="col" style={{ alignItems: 'flex-end' }}>
        <div className="mono" style={{ fontSize: 14, fontWeight: 650 }}>{fmtRub(event.rub)}</div>
      </div>
    </div>
  );
}

function TrendingRow({ kind, count, change }) {
  const g = GIFT_KINDS[kind];
  return (
    <div className="row aic gap-12" style={{ padding: '12px 14px' }}>
      <Gift kind={kind}/>
      <div className="flex1">
        <div style={{ fontSize: 14, fontWeight: 600 }}>{g.name}</div>
        <div className="small t-mute">{count} продаж за 24ч</div>
      </div>
      <div className={'chip ' + (change >= 0 ? 'chip-green' : 'chip-red')}>
        {change >= 0 ? <Icons.arrowUp size={11}/> : <Icons.arrowDown size={11}/>}
        {change >= 0 ? '+' : ''}{change}%
      </div>
    </div>
  );
}

function LeaderRow({ user, gifts, spent, rank }) {
  const colors = ['#f59e0b', '#9aa3ad', '#b87333'];
  const c = rank <= 3 ? colors[rank - 1] : 'var(--text-mute)';
  return (
    <div className="row aic gap-12" style={{ padding: '12px 14px' }}>
      <div style={{
        width: 28, height: 28, borderRadius: '50%',
        background: rank <= 3 ? c + '33' : 'var(--bg-input)',
        color: c,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontWeight: 700, fontSize: 13,
      }}>{rank}</div>
      <div className="flex1">
        <div style={{ fontSize: 14, fontWeight: 600 }}>{user}</div>
        <div className="small t-mute">{gifts} подарков · {fmtRubShort(spent)}</div>
      </div>
      {rank <= 3 && <Icons.crown size={18} style={{ color: c }}/>}
    </div>
  );
}

function ActivityScreen({ live }) {
  const events = useTicker(live);
  const [tab, setTab] = React.useState('feed');
  const newest = events[0]?.id;

  const trending = [
    { kind: 'HeartLocket',   count: 248, change: 18 },
    { kind: 'DurovsCap',     count: 42,  change: 24 },
    { kind: 'EternalRose',   count: 186, change: 12 },
    { kind: 'DiamondRing',   count: 94,  change: -6 },
    { kind: 'PartySparkler', count: 71,  change: 8 },
  ];

  const leaders = [
    { user: '@maximus_88', gifts: 47, spent: 184200 },
    { user: '@sofiakaty',  gifts: 38, spent: 142500 },
    { user: '@arsen_d',    gifts: 31, spent: 96800 },
    { user: '@vera_velv',  gifts: 22, spent: 71400 },
    { user: '@yago_p',     gifts: 18, spent: 52100 },
  ];

  return (
    <ScreenWrap>
      <GlassCard strong style={{ padding: 16, position: 'relative', overflow: 'hidden' }}>
        <div className="row aic jcsb">
          <div>
            <div className="lbl" style={{ marginBottom: 4 }}>Объём за 24 часа</div>
            <div className="mono" style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.015em' }}>
              <AnimatedNumber value={3284100} fmt={fmtRubShort}/>
            </div>
            <div className="chip chip-green" style={{ marginTop: 6 }}>
              <Icons.arrowUp size={11}/> +24% к вчера
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="lbl" style={{ marginBottom: 4 }}>Сделок</div>
            <div className="mono" style={{ fontSize: 24, fontWeight: 700 }}>
              <AnimatedNumber value={1842} fmt={(v) => Math.round(v).toLocaleString('ru-RU')}/>
            </div>
            <div className="row aic gap-4" style={{ marginTop: 6, justifyContent: 'flex-end' }}>
              <div className="dot"/>
              <div className="small t-soft">live</div>
            </div>
          </div>
        </div>
      </GlassCard>

      <div className="seg" style={{ alignSelf: 'stretch' }}>
        {[['feed','Лента'],['trend','Тренды'],['top','Лидеры']].map(([k, l]) => (
          <button key={k} className={tab === k ? 'on' : ''} onClick={() => setTab(k)} style={{ flex: 1 }}>{l}</button>
        ))}
      </div>

      <div key={tab} className="anim-fade-up col gap-8">
        {tab === 'feed' && events.slice(0, 14).map((e, i) => (
          <SaleRow key={e.id} event={e} isNew={e.id === newest && i === 0}/>
        ))}

        {tab === 'trend' && (
          <GlassCard style={{ padding: 0 }}>
            {trending.map((t, i) => (
              <React.Fragment key={t.kind}>
                <TrendingRow {...t}/>
                {i < trending.length - 1 && <div style={{ height: 0.5, background: 'var(--border)', margin: '0 14px' }}/>}
              </React.Fragment>
            ))}
          </GlassCard>
        )}

        {tab === 'top' && (
          <>
            <GlassCard style={{ padding: 0 }}>
              {leaders.map((l, i) => (
                <React.Fragment key={l.user}>
                  <LeaderRow {...l} rank={i + 1}/>
                  {i < leaders.length - 1 && <div style={{ height: 0.5, background: 'var(--border)', margin: '0 14px' }}/>}
                </React.Fragment>
              ))}
            </GlassCard>
            <div className="glass" style={{
              padding: 14, borderRadius: 16,
              border: '1px dashed var(--accent)',
              background: 'var(--accent-soft)',
            }}>
              <div className="row aic gap-10">
                <div className="tile" style={{ background: 'transparent', color: 'var(--accent)' }}>
                  <Icons.user size={18}/>
                </div>
                <div className="flex1">
                  <div className="row aic gap-6">
                    <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: 'var(--accent)' }}>#48</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>Твоё место</div>
                  </div>
                  <div className="small t-soft">осталось 4 подарка до топ-10</div>
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    </ScreenWrap>
  );
}

window.ActivityScreen = ActivityScreen;