<?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>
    <p class="text-muted text-sm">شارك في بطولات واربح جوائز</p>
  </div>

  <!-- Tabs -->
  <div class="tab-group" id="tourney-tabs">
    <button class="tab active" data-tab="active">جارية</button>
    <button class="tab" data-tab="upcoming">قادمة</button>
    <button class="tab" data-tab="completed">منتهية</button>
  </div>

  <!-- Active Tournaments -->
  <div id="tab-active" class="space-y-3">
    <div id="active-tournaments">
      <div class="card">
        <div class="empty-state">جاري التحميل...</div>
      </div>
    </div>
  </div>

  <!-- Upcoming -->
  <div id="tab-upcoming" class="space-y-3" style="display:none;">
    <div id="upcoming-tournaments">
      <div class="card">
        <div class="empty-state">جاري التحميل...</div>
      </div>
    </div>
  </div>

  <!-- Completed -->
  <div id="tab-completed" class="space-y-3" style="display:none;">
    <div id="completed-tournaments">
      <div class="card">
        <div class="empty-state">جاري التحميل...</div>
      </div>
    </div>
  </div>

</div>

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

  const tabs = document.querySelectorAll('#tourney-tabs .tab');
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      document.querySelectorAll('[id^="tab-"]').forEach(p => p.style.display = 'none');
      document.getElementById('tab-' + tab.dataset.tab).style.display = 'block';
    });
  });

  loadTournaments();
});

async function loadTournaments() {
  const data = await App.fetch('/api/tournaments');
  if (!data || !data.tournaments) {
    document.getElementById('active-tournaments').innerHTML = '<div class="card"><div class="empty-state">لا توجد بطولات جارية</div></div>';
    document.getElementById('upcoming-tournaments').innerHTML = '<div class="card"><div class="empty-state">لا توجد بطولات قادمة</div></div>';
    document.getElementById('completed-tournaments').innerHTML = '<div class="card"><div class="empty-state">لا توجد بطولات منتهية</div></div>';
    return;
  }

  const now = new Date();
  const active = [];
  const upcoming = [];
  const completed = [];

  data.tournaments.forEach(t => {
    const start = t.started_at ? new Date(t.started_at) : null;
    const end = t.completed_at ? new Date(t.completed_at) : null;

    if (t.status === 'completed' || (end && end < now)) {
      completed.push(t);
    } else if (t.status === 'active' || (start && start <= now && (!end || end > now))) {
      active.push(t);
    } else {
      upcoming.push(t);
    }
  });

  renderTournaments('active-tournaments', active, 'لا توجد بطولات جارية');
  renderTournaments('upcoming-tournaments', upcoming, 'لا توجد بطولات قادمة');
  renderTournaments('completed-tournaments', completed, 'لا توجد بطولات منتهية');
}

function renderTournaments(containerId, tournaments, emptyMsg) {
  const container = document.getElementById(containerId);
  if (tournaments.length === 0) {
    container.innerHTML = '<div class="card"><div class="empty-state">' + emptyMsg + '</div></div>';
    return;
  }

  container.innerHTML = tournaments.map(t => `
    <a href="/tournament?id=${t.id}" class="card card-hover" style="display:block;text-decoration:none;margin-bottom:12px;">
      <div class="card-body" style="display:flex;align-items:center;gap:16px;">
        <div class="avatar" style="background:var(--bg-3);">
          <svg class="icon-lg" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-trophy"></use></svg>
        </div>
        <div style="flex:1;">
          <p style="font-size:15px;font-weight:600;">${t.name}</p>
          <p class="text-muted text-xs">${t.participants_count || 0} مشارك</p>
        </div>
        <div class="text-left">
          <p class="text-xs" style="font-family:var(--font-en);font-weight:600;">${t.time_control || '5+0'}</p>
          <p class="text-muted text-xs">${t.prize || ''}</p>
        </div>
      </div>
    </a>
  `).join('');
}
</script>

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