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

<div class="space-y-6 bg-animated" id="games-content">

  <div class="text-center">
    <h2 class="page-title" style="margin-bottom:8px;">العاب</h2>
    <p class="text-muted text-sm">اختر لعبتك المفضلة وابدأ</p>
  </div>

  <div class="games-grid" id="games-grid">
    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
  </div>

</div>

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

  const grid = document.getElementById('games-grid');

  const gameRoutes = {
    chess: '/play',
    ludo: '/ludo',
    domino: '/domino',
    backgammon: '/backgammon'
  };

  const gameIcons = {
    chess: 'icon-play',
    ludo: 'icon-ludo',
    domino: 'icon-domino',
    backgammon: 'icon-backgammon',
    trix: 'icon-cards',
    baloot: 'icon-cards',
    trivia: 'icon-trophy'
  };

  const gameCoverClasses = {
    chess: 'game-card-cover--chess',
    ludo: 'game-card-cover--ludo',
    domino: 'game-card-cover--domino',
    backgammon: 'game-card-cover--backgammon',
    trix: 'game-card-cover--trix',
    baloot: 'game-card-cover--baloot',
    trivia: 'game-card-cover--trix'
  };

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

    const games = data.games;

    grid.innerHTML = games.map(game => {
      const route = gameRoutes[game.game_key];
      const isPlayable = route && game.is_enabled;
      const icon = gameIcons[game.game_key] || 'icon-play';
      const coverClass = gameCoverClasses[game.game_key] || 'game-card-cover--chess';
      const cardClass = isPlayable ? 'game-card card-accent' : 'game-card game-card--soon';

      let html = '<div class="' + cardClass + '" data-game="' + game.game_key + '">';
      html += '<div class="game-card-cover ' + coverClass + '">';
      html += '<svg class="game-card-icon"><use href="/public/icons/sprite.svg#' + icon + '"></use></svg>';
      if (!isPlayable) {
        html += '<span class="game-card-badge">قريبا</span>';
      }
      html += '</div>';
      html += '<div class="game-card-info">';
      html += '<div class="game-card-meta">';
      html += '<span class="game-card-name">' + game.name_ar + '</span>';
      if (isPlayable) {
        html += '<span class="online-badge" id="online-' + game.game_key + '"><span class="online-dot"></span> --</span>';
      }
      html += '</div>';
      if (isPlayable) {
        html += '<a href="' + route + '" class="btn btn-cyan btn-sm game-card-play">العب</a>';
      }
      html += '</div></div>';
      return html;
    }).join('');

    grid.querySelectorAll('.game-card[data-game]').forEach(card => {
      card.addEventListener('click', (e) => {
        if (e.target.closest('.game-card-play')) return;
        const key = card.dataset.game;
        if (gameRoutes[key]) window.location.href = gameRoutes[key];
      });
    });

  } catch (e) {
    grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1;"><p>حدث خطأ في تحميل الالعاب</p></div>';
  }
});
</script>

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