<?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 card-hover" style="cursor:pointer;" onclick="startLocal()">
      <div class="card-body lobby-card-row">
        <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--ludo-p1), var(--ludo-p3));">
          <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-users"></use></svg>
        </div>
        <div style="flex:1;">
          <p class="lobby-card-title-sm">لعب محلي</p>
          <p class="text-muted text-sm">2-4 لاعبين على نفس الجهاز</p>
        </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>

    <!-- 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">العب ضد 1-3 بوتات</p>
          </div>
        </div>

        <div>
          <label class="input-label">عدد البوتات</label>
          <div class="tab-group" id="bot-count-tabs">
            <button class="tab active" data-count="1">1</button>
            <button class="tab" data-count="2">2</button>
            <button class="tab" data-count="3">3</button>
          </div>
        </div>

        <div>
          <label class="input-label">الصعوبة</label>
          <div class="tab-group" id="bot-diff-tabs">
            <!-- Loaded from API, fallback below -->
            <button class="tab active" data-diff="easy">سهل</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>

    <!-- Multiplayer -->
    <div class="card lobby-card lobby-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(--cyan));">
            <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-sword"></use></svg>
          </div>
          <div>
            <p class="lobby-card-title">ضد لاعب حقيقي</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-search"></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(--ludo-p4)"><use href="/public/icons/sprite.svg#icon-lock"></use></svg>
          </div>
          <div>
            <p class="lobby-card-title-sm">غرفة خاصة</p>
            <p class="text-muted text-sm">انشئ غرفة وادعو اصحابك</p>
          </div>
        </div>

        <div class="lobby-btn-pair">
          <button class="btn btn-gold" onclick="createRoom()">انشئ غرفة</button>
          <button class="btn btn-ghost" onclick="showJoinRoom()">انضم بكود</button>
        </div>

        <div id="join-room-form" style="display:none;">
          <div class="lobby-code-row">
            <input type="text" class="input" id="room-code-input" placeholder="ادخل كود الغرفة" maxlength="6" style="text-transform:uppercase;letter-spacing:4px;text-align:center;">
            <button class="btn btn-gold" onclick="joinRoom()">دخول</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  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');
      });
    });
  });

  // Load ludo config from games API
  App.cachedFetch('/api/games.php', 60000).then(function(data) {
    if (!data || !data.games) return;
    var ludo = data.games.find(function(g) { return g.game_key === 'ludo'; });
    if (!ludo || !ludo.config || !ludo.config.difficulties) return;
    var diffTabs = document.getElementById('bot-diff-tabs');
    if (!diffTabs) return;
    diffTabs.innerHTML = ludo.config.difficulties.map(function(d, i) {
      return '<button class="tab' + (i === 0 ? ' active' : '') + '" data-diff="' + d.id + '">' + d.label + '</button>';
    }).join('');
    diffTabs.querySelectorAll('.tab').forEach(function(tab) {
      tab.addEventListener('click', function() {
        diffTabs.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
        tab.classList.add('active');
      });
    });
  }).catch(function() {});
});

function startLocal() {
  window.location.href = '/ludo-game?mode=local&players=4';
}

function startBot() {
  var count = document.querySelector('#bot-count-tabs .tab.active').dataset.count;
  var diff = document.querySelector('#bot-diff-tabs .tab.active').dataset.diff;
  window.location.href = '/ludo-game?mode=bot&bots=' + count + '&difficulty=' + diff;
}

function startMatchmaking() {
  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
  window.location.href = '/ludo-matchmaking';
}

function createRoom() {
  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
  window.location.href = '/ludo-live?action=create';
}

function showJoinRoom() {
  var form = document.getElementById('join-room-form');
  form.style.display = form.style.display === 'none' ? 'block' : 'none';
  if (form.style.display === 'block') {
    document.getElementById('room-code-input').focus();
  }
}

function joinRoom() {
  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
  var code = document.getElementById('room-code-input').value.trim().toUpperCase();
  if (!code || code.length < 4) {
    App.toast('ادخل كود صحيح', 'error');
    return;
  }
  window.location.href = '/ludo-live?action=join&code=' + code;
}
</script>

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