// screens-wall.jsx — The Traders' Wall: neighbor pulls feed, trade board, leaderboard

function Avatar({ name, size = 36 }) {
  const init = name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
  // deterministic hue from name
  const hue = [...name].reduce((a, c) => a + c.charCodeAt(0), 0) % 360;
  return (
    <div style={{ width: size, height: size, borderRadius: 9999, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: `oklch(0.55 0.12 ${hue})`, color: '#fff', fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: size * 0.36 }}>
      {init}
    </div>
  );
}

function LikeBtn({ id, base }) {
  const [on, setOn] = React.useState(false);
  const n = base + (on ? 1 : 0);
  return (
    <button onClick={(e) => { e.stopPropagation(); setOn(!on); }} style={{ display: 'flex', alignItems: 'center', gap: 6, border: 'none', background: 'none', cursor: 'pointer', color: on ? 'var(--accent)' : 'var(--ink-3)', fontFamily: 'var(--ff-ui)', fontWeight: 700, fontSize: 13, padding: 0, WebkitTapHighlightColor: 'transparent' }}>
      <Icon name="heart" size={18} fill={on} color={on ? 'var(--accent)' : 'var(--ink-3)'} sw={2} />{n}
    </button>
  );
}

/* ───────────── WALL ───────────── */
function WallScreen({ t, pulls, trades, viewCard, onOffer }) {
  const [tab, setTab] = React.useState('pulls');

  return (
    <div className="fade-up" style={{ paddingBottom: 18 }}>
      <div style={{ padding: 'var(--top-pad) 20px 10px' }}>
        <div className="kicker" style={{ marginBottom: 8 }}>Fort Leavenworth · this week</div>
        <div className="t-display" style={{ fontSize: 32 }}>The Wall</div>
      </div>

      <div style={{ padding: '10px 20px 14px' }}>
        <div className="subtabs">
          {[['pulls', 'Pulls'], ['trades', 'Trades'], ['ranks', 'Ranks']].map(([id, label]) => (
            <button key={id} className={'subtab' + (tab === id ? ' on' : '')} onClick={() => setTab(id)}>{label}</button>
          ))}
        </div>
      </div>

      {/* ── PULLS FEED ── */}
      {tab === 'pulls' && (
        <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {pulls.map(p => {
            const set = setById(p.setId);
            const card = makeCard(p.setId, p.idx);
            const r = RARITY[card.rarity];
            return (
              <div key={p.id} className="card hairline" style={{ padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 12 }}>
                  <Avatar name={p.who} />
                  <div style={{ flex: 1, minWidth: 0, lineHeight: 1.25 }}>
                    <div style={{ fontWeight: 700, fontSize: 14.5 }}>{p.who}{p.you && <span style={{ color: 'var(--accent)' }}> · you</span>}</div>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10.5, color: 'var(--ink-3)' }}>{p.zone} · {p.when} ago</div>
                  </div>
                  {p.fire && <span className="badge badge-accent"><Icon name="flame" size={11} fill color="var(--accent)" />on fire</span>}
                </div>
                <button onClick={() => viewCard(card)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 13, border: 'none', cursor: 'pointer', textAlign: 'left', background: 'var(--surface-2)', borderRadius: 16, padding: 11, boxShadow: 'inset 0 0 0 1px var(--line)' }}>
                  <div style={{ filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.18))' }}><CardFace card={card} w={62} /></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10.5, color: r.color, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 3 }}>Pulled a {r.label}</div>
                    <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 18, letterSpacing: '-0.01em' }}>{card.name}</div>
                    <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{set.name}</div>
                  </div>
                  <Icon name="chevR" size={18} color="var(--ink-3)" />
                </button>
                <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 12 }}>
                  <LikeBtn id={p.id} base={p.likes} />
                  <button onClick={() => onOffer({ who: p.who, want: [p.setId, p.idx] })} style={{ display: 'flex', alignItems: 'center', gap: 6, border: 'none', background: 'none', cursor: 'pointer', color: 'var(--ink-3)', fontFamily: 'var(--ff-ui)', fontWeight: 700, fontSize: 13, padding: 0 }}>
                    <Icon name="swap" size={18} color="var(--ink-3)" sw={2} />Trade
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* ── TRADE BOARD ── */}
      {tab === 'trades' && (
        <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ padding: '12px 14px', borderRadius: 14, background: 'color-mix(in oklab, var(--accent) 9%, var(--surface))', display: 'flex', gap: 10, alignItems: 'center' }}>
            <Icon name="swap" size={20} color="var(--accent)" />
            <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.35 }}>Swap dupes with neighbors. Meet at the next drop or on post — <b style={{ color: 'var(--ink)' }}>no cash, just cards.</b></div>
          </div>
          {trades.map(tr => {
            const have = makeCard(tr.have[0], tr.have[1]);
            const want = makeCard(tr.want[0], tr.want[1]);
            return (
              <div key={tr.id} className="card hairline" style={{ padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 12 }}>
                  <Avatar name={tr.who} size={32} />
                  <div style={{ flex: 1, lineHeight: 1.2 }}>
                    <div style={{ fontWeight: 700, fontSize: 14 }}>{tr.who}</div>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ink-3)' }}>{tr.zone} · {tr.when} ago</div>
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <TradeSlot label="Has" card={have} onClick={() => viewCard(have)} />
                  <div style={{ flexShrink: 0, width: 32, height: 32, borderRadius: 9999, background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="swap" size={17} color="var(--paper)" sw={2.2} />
                  </div>
                  <TradeSlot label="Wants" card={want} onClick={() => viewCard(want)} />
                </div>
                <button className="btn btn-soft btn-block" style={{ marginTop: 12, padding: 12 }} onClick={() => onOffer({ who: tr.who, want: tr.want })}>
                  <Icon name="swap" size={17} /> Offer a trade
                </button>
              </div>
            );
          })}
        </div>
      )}

      {/* ── LEADERBOARD ── */}
      {tab === 'ranks' && (
        <div style={{ padding: '0 20px' }}>
          <div className="kicker" style={{ marginBottom: 12 }}>Most packs ripped · this drop cycle</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {LEADERBOARD.map((row, i) => {
              const medal = ['#C2912F', '#9AA0A6', '#B07A46'][i];
              return (
                <div key={i} className={'card' + (row.you ? '' : ' hairline')} style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 13, boxShadow: row.you ? 'inset 0 0 0 2px var(--accent)' : undefined, background: row.you ? 'color-mix(in oklab, var(--accent) 7%, var(--surface))' : undefined }}>
                  <div style={{ width: 26, textAlign: 'center', fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 18, color: medal || 'var(--ink-3)' }}>{i + 1}</div>
                  <Avatar name={row.who} size={36} />
                  <div style={{ flex: 1, lineHeight: 1.2 }}>
                    <div style={{ fontWeight: 700, fontSize: 14.5 }}>{row.who}</div>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10.5, color: 'var(--ink-3)' }}>{row.zone}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="t-display" style={{ fontSize: 18 }}>{row.packs}</div>
                    <div className="kicker" style={{ fontSize: 8.5, marginTop: 1 }}>{row.hits} HITS</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

function TradeSlot({ label, card, onClick }) {
  const r = RARITY[card.rarity];
  return (
    <button onClick={onClick} style={{ flex: 1, minWidth: 0, border: 'none', cursor: 'pointer', background: 'var(--surface-2)', borderRadius: 14, padding: '10px 8px', boxShadow: 'inset 0 0 0 1px var(--line)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <div className="kicker" style={{ fontSize: 8.5 }}>{label}</div>
      <CardFace card={card} w={52} />
      <div style={{ textAlign: 'center', minWidth: 0, width: '100%' }}>
        <div style={{ fontWeight: 700, fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{card.name}</div>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: r.color, fontWeight: 700 }}>{r.label}</div>
      </div>
    </button>
  );
}

Object.assign(window, { WallScreen, Avatar });