<?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>

        <div>
          <label class="input-label">عدد اللاعبين</label>
          <div class="tab-group" id="local-count-tabs">
            <button class="tab active" data-count="2">2 لاعبين</button>
            <button class="tab" data-count="4">4 لاعبين</button>
          </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-mode-tabs">
            <button class="tab active" data-mode="2p">1 ضد 1</button>
            <button class="tab" data-mode="4p_teams">فرق (2 ضد 2)</button>
          </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>

    <!-- 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>

        <div>
          <label class="input-label">الوضع</label>
          <div class="tab-group" id="mp-mode-tabs">
            <button class="tab active" data-mode="2p">1 ضد 1</button>
            <button class="tab" data-mode="4p_teams">فرق (2 ضد 2)</button>
          </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(--gold)"><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 config from games API
  App.cachedFetch('/api/games.php', 60000).then(function(data) {
    if (!data || !data.games) return;
    var domino = data.games.find(function(g) { return g.game_key === 'domino'; });
    if (!domino || !domino.config || !domino.config.difficulties) return;
    var diffTabs = document.getElementById('bot-diff-tabs');
    if (!diffTabs) return;
    diffTabs.innerHTML = domino.config.difficulties.map(function(d, i) {
      return '<button class="tab' + (i === 1 ? ' 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() {
  var count = document.querySelector('#local-count-tabs .tab.active').dataset.count;
  var mode = count === '4' ? '4p_teams' : '2p';
  window.location.href = '/domino-game?mode=' + mode + '&type=local&players=' + count;
}

function startBot() {
  var mode = document.querySelector('#bot-mode-tabs .tab.active').dataset.mode;
  var diff = document.querySelector('#bot-diff-tabs .tab.active').dataset.diff;
  var count = mode === '4p_teams' ? 4 : 2;
  window.location.href = '/domino-game?mode=' + mode + '&type=bot&players=' + count + '&difficulty=' + diff;
}

function startMatchmaking() {
  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
  var mode = document.querySelector('#mp-mode-tabs .tab.active').dataset.mode;
  window.location.href = '/domino-matchmaking?mode=' + mode;
}

function createRoom() {
  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
  window.location.href = '/domino-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 = '/domino-live?action=join&code=' + code;
}
</script>

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