import * as net from '../../../core/net.js';
import * as scene from '../../../core/scene.js';
import * as audio from '../../../core/audio.js';
import { t } from '../../../core/i18n.js';
import { emoji } from '../../../core/theme.js';

export async function mountLeaderboard(el) {
  el.innerHTML = `
    <div style="padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);">
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <h2 style="font-size:20px;font-weight:700;">${t('rank.leaderboard')}</h2>
        <button class="btn btn-secondary" id="btn-tournaments" style="font-size:12px;min-height:var(--tap-min);">${t('rank.tournaments')}</button>
      </div>
      <div style="display:flex;gap:var(--s-2);overflow-x:auto;" id="game-tabs">
        <button class="btn btn-secondary tab-active" data-game="chess" style="font-size:12px;min-height:var(--tap-min);">${emoji('chess_pawn', '♟', 12)} ${t('game.chess')}</button>
        <button class="btn btn-secondary" data-game="domino" style="font-size:12px;min-height:var(--tap-min);">${emoji('domino_tile', '⬚', 12)} ${t('game.domino')}</button>
        <button class="btn btn-secondary" data-game="ludo" style="font-size:12px;min-height:var(--tap-min);">${emoji('ludo_hex', '⬡', 12)} ${t('game.ludo')}</button>
      </div>
      <div id="leaderboard-list">
        <div class="skeleton" style="height:50px;margin-bottom:var(--s-2);"></div>
        <div class="skeleton" style="height:50px;margin-bottom:var(--s-2);"></div>
        <div class="skeleton" style="height:50px;margin-bottom:var(--s-2);"></div>
      </div>
    </div>
  `;

  el.querySelector('#btn-tournaments').addEventListener('click', () => {
    audio.play('click');
    scene.push('tournaments');
  });

  let activeGame = 'chess';
  el.querySelectorAll('#game-tabs button').forEach(btn => {
    btn.addEventListener('click', () => {
      audio.play('click');
      activeGame = btn.dataset.game;
      el.querySelectorAll('#game-tabs button').forEach(b => b.classList.remove('tab-active'));
      btn.classList.add('tab-active');
      loadLeaderboard(el, activeGame);
    });
  });

  loadLeaderboard(el, activeGame);
}

async function loadLeaderboard(el, game) {
  const list = el.querySelector('#leaderboard-list');
  list.innerHTML = '<div class="skeleton" style="height:50px;"></div>'.repeat(5);

  try {
    const data = await net.get('leaderboard.php', { game_key: game, limit: 50 });
    const players = data.leaderboard || data || [];
    renderList(list, players);
  } catch (e) {
    list.innerHTML = `<p style="color:var(--text-secondary);text-align:center;">${t('common.error')}</p>`;
  }
}

function renderList(container, players) {
  if (players.length === 0) {
    container.innerHTML = `<p style="color:var(--text-secondary);text-align:center;padding:var(--s-6);">${t('common.empty')}</p>`;
    return;
  }

  const medals = [emoji('medal_gold', '🥇', 18), emoji('medal_silver', '🥈', 18), emoji('medal_bronze', '🥉', 18)];
  container.innerHTML = players.map((p, i) => `
    <div class="card" style="display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);margin-bottom:var(--s-2);">
      <div style="width:28px;text-align:center;font-size:${i < 3 ? '18px' : '13px'};font-weight:700;color:${i < 3 ? 'var(--gold)' : 'var(--text-muted)'};">
        ${i < 3 ? medals[i] : i + 1}
      </div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:14px;">${emoji('person', '👤', 14)}</div>
      <div style="flex:1;">
        <div style="font-size:13px;font-weight:600;">${p.display_name || p.username || 'Player'}</div>
      </div>
      <div style="font-size:15px;font-weight:700;font-family:var(--font-lat);color:var(--gold);">${p.rating || p.elo_rapid || 1200}</div>
    </div>
  `).join('');
}
