<?php $pageTitle = 'EL3AB - المتصدرين'; ?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<div class="space-y-6">

  <div class="text-center">
    <h2 style="font-size:22px;font-weight:700;">المتصدرين</h2>
  </div>

  <!-- Category Tabs -->
  <div class="tab-group" id="lb-tabs">
    <button class="tab active" data-mode="blitz">بليتز</button>
    <button class="tab" data-mode="rapid">رابيد</button>
    <button class="tab" data-mode="bullet">بوليت</button>
  </div>

  <!-- Top 3 Podium -->
  <div id="podium" style="display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:16px 0;">
    <div class="text-center" id="podium-2" style="flex:1;">
      <div class="avatar" style="margin:0 auto 8px;background:var(--bg-3);">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
      </div>
      <p class="text-xs" style="font-weight:600;">---</p>
      <p class="text-xs text-muted">---</p>
    </div>
    <div class="text-center" id="podium-1" style="flex:1;">
      <svg class="icon-lg" style="color:var(--gold);margin-bottom:4px;"><use href="/public/icons/sprite.svg#icon-crown"></use></svg>
      <div class="avatar avatar-lg" style="margin:0 auto 8px;border:2px solid var(--gold);background:var(--bg-3);">
        <svg class="icon-lg"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
      </div>
      <p style="font-size:14px;font-weight:700;">---</p>
      <p class="text-xs text-muted">---</p>
    </div>
    <div class="text-center" id="podium-3" style="flex:1;">
      <div class="avatar" style="margin:0 auto 8px;background:var(--bg-3);">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
      </div>
      <p class="text-xs" style="font-weight:600;">---</p>
      <p class="text-xs text-muted">---</p>
    </div>
  </div>

  <!-- Full List -->
  <div class="card" id="leaderboard-list">
    <div class="empty-state">جاري التحميل...</div>
  </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  if (!App.isLoggedIn()) {
    window.location.href = '/login';
    return;
  }

  let currentMode = 'blitz';

  document.querySelectorAll('#lb-tabs .tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('#lb-tabs .tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      currentMode = tab.dataset.mode;
      loadLeaderboard(currentMode);
    });
  });

  loadLeaderboard(currentMode);
});

async function loadLeaderboard(mode) {
  const data = await App.fetch('/api/leaderboard?mode=' + mode);
  if (!data || !data.players) return;

  const players = data.players;

  if (players.length >= 1) {
    updatePodium('podium-1', players[0], mode);
  }
  if (players.length >= 2) {
    updatePodium('podium-2', players[1], mode);
  }
  if (players.length >= 3) {
    updatePodium('podium-3', players[2], mode);
  }

  const list = document.getElementById('leaderboard-list');
  if (players.length > 3) {
    list.innerHTML = players.slice(3).map((p, i) => `
      <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);">
        <span style="font-weight:700;font-family:var(--font-en);min-width:24px;color:var(--text-3);">${i + 4}</span>
        <div class="avatar avatar-sm" style="background:var(--bg-3);">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
        </div>
        <div style="flex:1;">
          <p style="font-size:14px;font-weight:600;">${p.display_name || p.username}</p>
        </div>
        <span style="font-weight:700;font-family:var(--font-en);">${p['elo_' + mode] || 1200}</span>
      </div>
    `).join('');
  } else if (players.length === 0) {
    list.innerHTML = '<div class="empty-state">لا يوجد لاعبين بعد</div>';
  } else {
    list.innerHTML = '';
  }
}

function updatePodium(elementId, player, mode) {
  const el = document.getElementById(elementId);
  const nameEl = el.querySelector('p:not(.text-muted)');
  const ratingEl = el.querySelector('.text-muted:last-child');
  if (nameEl) nameEl.textContent = player.display_name || player.username || '---';
  if (ratingEl) ratingEl.textContent = (player['elo_' + mode] || 1200) + ' ELO';
}
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>
