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

<div class="lobby-page">

  <a href="/games" 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">اختر نوع اللعب</p>
  </div>

  <div class="lobby-cards">

    <!-- Local (Pass & Play) -->
    <div class="card lobby-card">
      <div class="card-body space-y-4">
        <div class="lobby-card-header">
          <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--cyan), var(--gold));">
            <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-users"></use></svg>
          </div>
          <div>
            <p class="lobby-card-title-sm">لعب محلي</p>
            <p class="text-muted text-sm">لاعبين على نفس الجهاز</p>
          </div>
        </div>

        <button class="btn btn-gold btn-block btn-lg" onclick="startLocal()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
          ابدأ اللعب
        </button>
      </div>
    </div>

    <!-- VS Bot -->
    <div class="card lobby-card">
      <div class="card-body space-y-4">
        <div class="lobby-card-header">
          <div class="avatar avatar-game" style="background:var(--bg-3);">
            <svg class="icon-lg" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
          </div>
          <div>
            <p class="lobby-card-title-sm">ضد البوت</p>
            <p class="text-muted text-sm">العب ضد بوتات ذكية</p>
          </div>
        </div>

        <div>
          <label class="input-label">الصعوبة</label>
          <div class="tab-group" id="bot-diff-tabs">
            <button class="tab" data-diff="easy">سهل</button>
            <button class="tab active" data-diff="medium">متوسط</button>
            <button class="tab" data-diff="hard">صعب</button>
          </div>
        </div>

        <button class="btn btn-gold btn-block btn-lg" onclick="startBot()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
          ابدأ اللعب
        </button>
      </div>
    </div>

    <!-- Online Multiplayer -->
    <div class="card lobby-card card-featured">
      <div class="card-body space-y-4">
        <div class="lobby-card-header">
          <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--gold), var(--gold-dark));">
            <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-lightning"></use></svg>
          </div>
          <div>
            <p class="lobby-card-title-sm">ضد لاعب حقيقي</p>
            <p class="text-muted text-sm">العب اونلاين ضد لاعبين حقيقيين</p>
          </div>
        </div>

        <button class="btn btn-gold btn-block btn-lg" onclick="startMatchmaking()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
          ابحث عن خصم
        </button>
      </div>
    </div>

    <!-- Private Room -->
    <div class="card lobby-card">
      <div class="card-body space-y-4">
        <div class="lobby-card-header">
          <div class="avatar avatar-game" style="background:var(--bg-3);">
            <svg class="icon-lg" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-key"></use></svg>
          </div>
          <div>
            <p class="lobby-card-title-sm">غرفة خاصة</p>
            <p class="text-muted text-sm">العب مع صديق بكود</p>
          </div>
        </div>

        <div style="display:flex;gap:8px;">
          <button class="btn btn-cyan flex-1" onclick="createRoom()">إنشاء غرفة</button>
          <button class="btn btn-outline flex-1" onclick="joinRoom()">انضم بكود</button>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
function getActiveDiff() {
  var el = document.querySelector('#bot-diff-tabs .tab.active');
  return el ? el.dataset.diff : 'medium';
}

document.querySelectorAll('.tab-group').forEach(function(group) {
  group.querySelectorAll('.tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
      group.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
      tab.classList.add('active');
    });
  });
});

function startLocal() {
  window.location.href = '/backgammon-game?mode=local';
}

function startBot() {
  var diff = getActiveDiff();
  window.location.href = '/backgammon-game?mode=bot&difficulty=' + diff;
}

function startMatchmaking() {
  window.location.href = '/backgammon-matchmaking';
}

function createRoom() {
  window.location.href = '/backgammon-live?action=create';
}

function joinRoom() {
  var code = prompt('ادخل كود الغرفة:');
  if (code && code.trim()) {
    window.location.href = '/backgammon-live?action=join&code=' + code.trim().toUpperCase();
  }
}
</script>

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