<?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" id="ach-progress">0 / 0 مكتمل</p>
  </div>

  <!-- Progress Bar -->
  <div class="stat-bar" style="height:8px;">
    <div class="stat-bar-fill" id="ach-bar" style="width:0%;background:var(--gold);"></div>
  </div>

  <!-- Categories -->
  <div class="tab-group" id="ach-tabs">
    <button class="tab active" data-cat="all">الكل</button>
    <button class="tab" data-cat="games">مباريات</button>
    <button class="tab" data-cat="social">اجتماعي</button>
    <button class="tab" data-cat="streak">متتالية</button>
  </div>

  <!-- Achievement List -->
  <div class="space-y-2" id="achievements-list">
    <div class="card"><div class="empty-state">جاري التحميل...</div></div>
  </div>

</div>

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

  let currentCat = 'all';

  document.querySelectorAll('#ach-tabs .tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('#ach-tabs .tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      currentCat = tab.dataset.cat;
      loadAchievements(currentCat);
    });
  });

  loadAchievements(currentCat);
});

async function loadAchievements(category) {
  const url = '/api/achievements' + (category !== 'all' ? '?category=' + category : '');
  const data = await App.fetch(url);
  const container = document.getElementById('achievements-list');

  if (!data || !data.achievements) {
    container.innerHTML = '<div class="card"><div class="empty-state">لا يوجد انجازات</div></div>';
    return;
  }

  const achievements = data.achievements;
  const completed = achievements.filter(a => a.unlocked).length;
  document.getElementById('ach-progress').textContent = completed + ' / ' + achievements.length + ' مكتمل';
  const pct = achievements.length > 0 ? (completed / achievements.length * 100) : 0;
  document.getElementById('ach-bar').style.width = pct + '%';

  container.innerHTML = achievements.map(a => {
    const unlocked = a.unlocked;
    const opacity = unlocked ? '' : 'opacity:0.5;';
    return `
      <div class="card" style="${opacity}">
        <div class="card-body" style="display:flex;align-items:center;gap:16px;">
          <div class="avatar" style="background:${unlocked ? 'var(--gold-dim)' : 'var(--bg-3)'};">
            <svg class="icon-lg" style="color:${unlocked ? 'var(--gold)' : 'var(--text-3)'}"><use href="/public/icons/sprite.svg#icon-star"></use></svg>
          </div>
          <div style="flex:1;">
            <p style="font-size:14px;font-weight:600;">${a.name}</p>
            <p class="text-muted text-xs">${a.description}</p>
            ${a.progress !== undefined && !unlocked ? `
              <div class="stat-bar" style="margin-top:6px;height:4px;">
                <div class="stat-bar-fill" style="width:${Math.min((a.progress / a.target) * 100, 100)}%;background:var(--cyan);"></div>
              </div>
              <p class="text-muted text-xs" style="margin-top:2px;">${a.progress} / ${a.target}</p>
            ` : ''}
          </div>
          ${unlocked ? '<svg class="icon" style="color:var(--success);"><use href="/public/icons/sprite.svg#icon-check"></use></svg>' : ''}
        </div>
      </div>
    `;
  }).join('');
}
</script>

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