<?php $pageTitle = 'EL3AB - البطولة'; ?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<div class="space-y-6" id="tournament-page">

  <!-- Header -->
  <div class="card">
    <div class="card-body text-center" style="padding:24px;">
      <svg class="icon-xl" style="color:var(--gold);margin-bottom:12px;width:48px;height:48px;"><use href="/public/icons/sprite.svg#icon-trophy"></use></svg>
      <h2 style="font-size:20px;font-weight:700;" id="t-name">---</h2>
      <p class="text-muted text-sm" id="t-desc">---</p>
      <div style="display:flex;gap:12px;justify-content:center;margin-top:16px;">
        <div class="badge" id="t-status">---</div>
        <div class="badge" id="t-time">---</div>
        <div class="badge" id="t-players">---</div>
      </div>
    </div>
  </div>

  <!-- Join Button -->
  <button class="btn btn-gold btn-block" id="t-join-btn" style="display:none;" onclick="joinTournament()">
    <svg class="icon"><use href="/public/icons/sprite.svg#icon-sword"></use></svg>
    انضم للبطولة
  </button>

  <!-- Standings -->
  <div class="card">
    <div class="card-body">
      <p class="section-title" style="margin-bottom:12px;">الترتيب</p>
      <div id="t-standings">
        <div class="empty-state text-sm">لا يوجد مشاركين بعد</div>
      </div>
    </div>
  </div>

  <!-- Rounds -->
  <div class="card">
    <div class="card-body">
      <p class="section-title" style="margin-bottom:12px;">الجولات</p>
      <div id="t-rounds">
        <div class="empty-state text-sm">لم تبدأ بعد</div>
      </div>
    </div>
  </div>

</div>

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

  const params = new URLSearchParams(window.location.search);
  const id = params.get('id');
  if (!id) {
    window.location.href = '/tournaments';
    return;
  }

  const data = await App.fetch('/api/tournaments?id=' + id);
  if (!data || !data.tournament) {
    App.toast('البطولة غير موجودة', 'error');
    return;
  }

  const t = data.tournament;
  document.getElementById('t-name').textContent = t.name;
  document.getElementById('t-desc').textContent = t.description || '';
  document.getElementById('t-status').textContent = t.status === 'active' ? 'جارية' : t.status === 'upcoming' ? 'قادمة' : 'منتهية';
  document.getElementById('t-time').textContent = t.time_control || '5+0';
  document.getElementById('t-players').textContent = (t.participants_count || 0) + ' مشارك';

  if (t.status === 'upcoming' || t.status === 'active') {
    document.getElementById('t-join-btn').style.display = 'flex';
  }

  if (data.standings && data.standings.length > 0) {
    document.getElementById('t-standings').innerHTML = data.standings.map((s, i) => `
      <div style="display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);">
        <span style="font-weight:700;font-family:var(--font-en);min-width:24px;color:var(--text-3);">${i + 1}</span>
        <div style="flex:1;">
          <p style="font-size:14px;font-weight:600;">${s.display_name || s.username}</p>
        </div>
        <span style="font-family:var(--font-en);font-weight:600;">${s.points || 0} نقطة</span>
      </div>
    `).join('');
  }
});

async function joinTournament() {
  const params = new URLSearchParams(window.location.search);
  const id = params.get('id');
  const res = await App.fetch('/api/tournaments', {
    method: 'POST',
    body: JSON.stringify({ action: 'join', tournament_id: id })
  });
  if (res && res.ok) {
    App.toast('تم الانضمام بنجاح', 'success');
    document.getElementById('t-join-btn').style.display = 'none';
  } else {
    App.toast('خطأ في الانضمام', 'error');
  }
}
</script>

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