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

<div class="lobby-page">

  <a href="/play" class="breadcrumb">
    <svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
    العب شطرنج
  </a>

  <div class="text-center" style="margin-top:16px;">
    <h2 class="lobby-title">اختر خصمك</h2>
    <p class="text-muted text-sm" id="bots-subtitle">جاري التحميل...</p>
  </div>

  <div class="lobby-cards" id="bots-grid">
    <div class="skeleton skeleton-card" style="height:80px;"></div>
    <div class="skeleton skeleton-card" style="height:80px;"></div>
    <div class="skeleton skeleton-card" style="height:80px;"></div>
  </div>
</div>

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

  const grid = document.getElementById('bots-grid');
  const subtitle = document.getElementById('bots-subtitle');

  try {
    const data = await App.cachedFetch('/api/bots.php', 60000);
    if (!data || !data.bots) throw new Error('no data');

    const bots = data.bots;
    subtitle.textContent = bots.length + ' بوتات بمستويات مختلفة';

    const barColors = {
      amina: 'var(--success)',
      tarek: 'var(--success)',
      nour: 'var(--warning)',
      omar: 'var(--warning)',
      layla: 'var(--error)',
      ziad: 'var(--error)',
      grandmaster: 'var(--purple)'
    };

    grid.innerHTML = bots.map((bot, i) => {
      const barPct = Math.round(((i + 1) / bots.length) * 100);
      const barColor = barColors[bot.id] || 'var(--cyan)';
      const avgElo = Math.round((bot.elo_min + bot.elo_max) / 2);
      const portraitUrl = 'https://stockfishapi.caprover.al-arcade.com' + bot.portrait_url;
      const letter = bot.id === 'grandmaster' ? 'GM' : bot.name.charAt(0).toUpperCase();

      return '<div class="card lobby-card card-hover bot-card" data-bot="' + bot.id + '" data-elo="' + avgElo + '" style="cursor:pointer;">' +
        '<div class="card-body lobby-card-row">' +
          '<img src="' + portraitUrl + '" class="avatar" style="object-fit:cover;" ' +
            'onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'flex\';">' +
          '<div class="avatar" style="display:none;background:linear-gradient(135deg,var(--bot-' + bot.id + '));color:var(--text-1);font-weight:700;font-size:18px;align-items:center;justify-content:center;">' + letter + '</div>' +
          '<div style="flex:1;">' +
            '<p style="font-size:16px;font-weight:600;">' + bot.name_ar + '</p>' +
            '<p class="text-muted text-xs">' + bot.style_ar + ' - ELO ' + avgElo + '</p>' +
            '<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:' + barPct + '%;background:' + barColor + ';"></div></div>' +
          '</div>' +
          '<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>' +
        '</div>' +
      '</div>';
    }).join('');

    grid.querySelectorAll('.bot-card').forEach(card => {
      card.addEventListener('click', () => {
        const bot = card.dataset.bot;
        const color = Math.random() < 0.5 ? 'w' : 'b';
        window.location.href = '/game?bot=' + bot + '&color=' + color + '&time=600&inc=0&rated=true';
      });
    });
  } catch (e) {
    subtitle.textContent = 'تعذر تحميل البوتات';
    grid.innerHTML = '<div class="empty-state"><p>حدث خطأ في تحميل البوتات. حاول مرة أخرى.</p></div>';
  }
});
</script>

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