// VibraMatch — Group Detail screen (leaderboard-led)
// Real route: /groups/[id] — header (back/share/more), invite banner if alone, leaderboard, then group-scoped recent matches.

function GroupDetail() {
  const g = GROUPS[0]; // Tuesday crew

  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)', paddingBottom: 110 }}>
      {/* Header */}
      <div style={{ padding: '12px 12px 8px', display: 'flex', alignItems: 'center', gap: 4 }}>
        <IconButton icon={<I.back size={20}/>} variant="ghost" size={44}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="vm-h3" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{g.name}</div>
          <div className="vm-sm" style={{ fontSize: 12, marginTop: -1 }}>{g.memberCount} members · private</div>
        </div>
        <IconButton icon={<I.share size={18}/>} variant="ghost" size={44}/>
        <IconButton icon={<I.more size={18}/>} variant="ghost" size={44}/>
      </div>

      {/* Your standing card */}
      <div style={{ padding: '8px 20px 14px' }}>
        <div style={{
          background: 'var(--ink)', color: '#fff', borderRadius: 'var(--r-lg)', padding: 16,
          display: 'flex', alignItems: 'center', gap: 14, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -30, right: -30, width: 120, height: 120, borderRadius: 999, background: 'var(--lime)', opacity: 0.18 }}/>
          <Avatar name={ME.username} size={48}/>
          <div style={{ flex: 1, position: 'relative' }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, opacity: 0.6, letterSpacing: '0.06em' }}>YOUR STANDING</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
              <div className="vm-num" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.025em' }}>{g.myElo}</div>
              <DeltaPill delta={g.myDelta} size="sm"/>
            </div>
            <div style={{ fontSize: 12, opacity: 0.7, fontWeight: 600, marginTop: 2 }}>Rank #{g.myRank} of {g.memberCount}</div>
          </div>
          <button style={{
            background: 'var(--lime)', color: 'var(--on-lime)', border: 'none',
            height: 42, padding: '0 14px', borderRadius: 14, fontWeight: 800, fontSize: 13.5,
            display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
          }}>
            <I.plus size={16} sw={2.6}/> Log
          </button>
        </div>
      </div>

      {/* Leaderboard */}
      <div style={{ padding: '4px 20px 10px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div className="vm-h3">Leaderboard</div>
        <div className="vm-xs" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--success)' }}/>
          LIVE
        </div>
      </div>
      <div style={{ padding: '0 20px', background: 'var(--surface)', borderRadius: 'var(--r-lg)', margin: '0 20px', border: '1px solid var(--line)' }}>
        {LEADERBOARD.map((m, i) => (
          <div key={m.userId} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0',
            borderTop: i === 0 ? 'none' : '1px solid var(--line)',
            background: m.isMe ? 'var(--lime-soft)' : 'transparent',
            marginLeft: m.isMe ? -20 : 0, marginRight: m.isMe ? -20 : 0,
            paddingLeft: m.isMe ? 20 : 0, paddingRight: m.isMe ? 20 : 0,
            borderRadius: m.isMe ? 12 : 0,
          }}>
            {/* Rank — big numeric */}
            <div style={{ width: 28, textAlign: 'right' }}>
              {i < 3 ? (
                <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 26, height: 26, borderRadius: 999,
                  background: i === 0 ? 'var(--lime)' : 'var(--surface-3)',
                  color: i === 0 ? 'var(--on-lime)' : 'var(--ink)',
                  fontSize: 13, fontWeight: 800, fontVariantNumeric: 'tabular-nums',
                }}>{i + 1}</div>
              ) : (
                <span className="vm-num" style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink-3)' }}>{i + 1}</span>
              )}
            </div>
            <Avatar name={m.username} size={36}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--ink)' }}>{m.username}</span>
                {m.isMe && <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600 }}>(you)</span>}
                {m.isProvisional && (
                  <span style={{ fontSize: 9.5, fontWeight: 700, color: 'var(--ink-3)', background: 'var(--surface-3)', padding: '2px 6px', borderRadius: 4, letterSpacing: '0.02em' }}>PROVISIONAL</span>
                )}
              </div>
            </div>
            <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
              <span className="vm-num" style={{
                fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1,
                color: m.isProvisional ? 'var(--ink-3)' : 'var(--ink)',
              }}>{m.elo}</span>
              <DeltaPill delta={m.delta} size="sm"/>
            </div>
          </div>
        ))}
      </div>

      {/* Recent matches in this group */}
      <div style={{ padding: '24px 20px 4px' }}>
        <div className="vm-h3">Recent matches</div>
      </div>
      <div style={{ padding: '0 20px' }}>
        {FEED.filter(m => m.group === g.name).map(m => <MatchFeedRow key={m.id} m={m} showGroup={false}/>)}
        {FEED.filter(m => m.group === g.name).length === 0 && (
          <div className="vm-sm" style={{ padding: '20px 0', textAlign: 'center' }}>No matches yet — log your first one</div>
        )}
      </div>
    </div>
  );
}

window.GroupDetail = GroupDetail;