// Rankings tab — gold/silver/bronze counts per team
function RankingsTab({ medals, setMedals, hostMode }) {
  const { TEAMS, PLAYERS } = window.LEA30;
  const score = (m) => m.gold * 3 + m.silver * 2 + m.bronze * 1;
  const ranked = ['orange', 'yellow', 'green', 'blue']
    .map(tk => ({ tk, m: medals[tk] || { gold: 0, silver: 0, bronze: 0 } }))
    .sort((a, b) => {
      const sb = score(b.m) - score(a.m);
      if (sb !== 0) return sb;
      // tie-break by gold, then silver
      if (b.m.gold !== a.m.gold) return b.m.gold - a.m.gold;
      return b.m.silver - a.m.silver;
    });

  const adjust = (tk, key, delta) => {
    setMedals(prev => ({
      ...prev,
      [tk]: { ...prev[tk], [key]: Math.max(0, (prev[tk]?.[key] || 0) + delta) },
    }));
  };

  return (
    <div>
      <div className="section-title">RANKINGS</div>
      <div className="rank-list">
        {ranked.map((r, idx) => {
          const team = TEAMS[r.tk];
          const players = PLAYERS.filter(p => p.team === r.tk).map(p => p.name).join(' · ');
          const total = score(r.m);
          return (
            <div key={r.tk} className="rank-row" style={{ '--team-col': team.color }}>
              <div className={`place p${idx + 1}`}>{idx + 1}</div>
              <div className="team-meta">
                <div className="tname">{team.label}</div>
                <div className="tplayers">{players}</div>
                <div className="medals">
                  <div className="medal g"><span className="dot" />{r.m.gold}</div>
                  <div className="medal s"><span className="dot" />{r.m.silver}</div>
                  <div className="medal b"><span className="dot" />{r.m.bronze}</div>
                </div>
                {hostMode && (
                  <div style={{ display: 'flex', gap: 4, marginTop: 8, flexWrap: 'wrap' }}>
                    {['gold', 'silver', 'bronze'].map(k => (
                      <div key={k} style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                        <button className="pixel-btn ghost" style={{ padding: '4px 6px', fontSize: 8 }} onClick={() => adjust(r.tk, k, -1)}>−</button>
                        <span style={{ fontFamily: 'var(--pixel)', fontSize: 8, color: 'var(--ink-3)', minWidth: 32, textAlign: 'center' }}>{k.slice(0,1).toUpperCase()}</span>
                        <button className="pixel-btn ghost" style={{ padding: '4px 6px', fontSize: 8 }} onClick={() => adjust(r.tk, k, +1)}>+</button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <div className="total">{total}</div>
            </div>
          );
        })}
      </div>
      <div className="divider" />
      <div style={{ padding: '0 16px 12px', fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.5 }}>
        Score = Gold ×3 + Silver ×2 + Bronze ×1.
      </div>
    </div>
  );
}

window.RankingsTab = RankingsTab;