<?php $pageTitle = 'EL3AB - العب شطرنج'; ?>
<?php require __DIR__ . '/../includes/header-v2.php'; ?>

<div class="lobby stack-5">

  <!-- Multiplayer (primary) -->
  <div class="lobby-hero">
    <div class="lobby-hero-header">
      <div class="lobby-hero-icon">
        <svg class="icon-lg"><use href="/public/icons/sprite.svg#icon-sword"></use></svg>
      </div>
      <div>
        <p class="t-subhead">ضد لاعب حقيقي</p>
        <p class="t-caption">ابحث عن خصم بمستواك</p>
      </div>
    </div>

    <div class="stack-3">
      <div class="chip-group" id="mp-cat">
        <button class="chip chip-gold active" data-cat="bullet">Bullet</button>
        <button class="chip chip-gold" data-cat="blitz">Blitz</button>
        <button class="chip chip-gold" data-cat="rapid">Rapid</button>
        <button class="chip chip-gold" data-cat="classical">Classical</button>
      </div>
      <div class="chip-group" id="mp-tc">
        <button class="chip active" data-tc="bullet_1_0" data-time="60000" data-inc="0">1+0</button>
        <button class="chip" data-tc="bullet_1_1" data-time="60000" data-inc="1000">1+1</button>
        <button class="chip" data-tc="bullet_2_1" data-time="120000" data-inc="1000">2+1</button>
      </div>
    </div>

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

  <!-- VS Bot -->
  <a href="/bots" class="lobby-row">
    <div class="lobby-row-icon">
      <svg class="icon" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
    </div>
    <div class="lobby-row-text">
      <p class="lobby-row-title">ضد البوت</p>
      <p class="lobby-row-sub">7 مستويات مختلفة</p>
    </div>
    <svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
  </a>

  <!-- Quick Match -->
  <div class="lobby-row" onclick="quickMatch()" role="button" tabindex="0">
    <div class="lobby-row-icon">
      <svg class="icon" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
    </div>
    <div class="lobby-row-text">
      <p class="lobby-row-title">مباراة سريعة</p>
      <p class="lobby-row-sub">5 دقائق ضد بوت عشوائي</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>

  <!-- Custom Game (collapsed by default) -->
  <details class="card">
    <summary class="card-pad flex items-center justify-between" style="cursor:pointer;list-style:none;">
      <span class="t-subhead">مباراة مخصصة</span>
      <svg class="icon" style="color:var(--text-3)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
    </summary>
    <div class="card-pad stack-4" style="border-top:1px solid var(--border);">
      <div>
        <label class="field-label">التوقيت</label>
        <div class="chip-group" id="custom-cat">
          <button class="chip chip-gold active" data-cat="bullet">Bullet</button>
          <button class="chip chip-gold" data-cat="blitz">Blitz</button>
          <button class="chip chip-gold" data-cat="rapid">Rapid</button>
        </div>
        <div class="chip-group" id="custom-tc" style="margin-top:var(--sp-2);">
          <button class="chip active" data-time="60" data-inc="0">1+0</button>
          <button class="chip" data-time="60" data-inc="1">1+1</button>
          <button class="chip" data-time="120" data-inc="1">2+1</button>
        </div>
      </div>
      <div>
        <label class="field-label">اللون</label>
        <div class="chip-group" id="custom-color">
          <button class="chip active" data-color="w">ابيض</button>
          <button class="chip" data-color="b">اسود</button>
          <button class="chip" data-color="random">عشوائي</button>
        </div>
      </div>
      <div>
        <label class="field-label">الخصم</label>
        <select class="input" id="bot-select" dir="ltr">
          <option value="nour">جاري التحميل...</option>
        </select>
      </div>
      <p class="t-caption" style="text-align:center;">مباراة تدريبية (غير مصنفة)</p>
      <button class="btn btn-primary btn-block btn-lg" onclick="startCustom()">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
        ابدأ المباراة
      </button>
    </div>
  </details>

</div>

<script>
const TC_OPTIONS = {
  bullet: [
    { time: '60', inc: '0', label: '1+0', tc: 'bullet_1_0', timeMs: '60000', incMs: '0' },
    { time: '60', inc: '1', label: '1+1', tc: 'bullet_1_1', timeMs: '60000', incMs: '1000' },
    { time: '120', inc: '1', label: '2+1', tc: 'bullet_2_1', timeMs: '120000', incMs: '1000' }
  ],
  blitz: [
    { time: '180', inc: '0', label: '3+0', tc: 'blitz_3_0', timeMs: '180000', incMs: '0' },
    { time: '180', inc: '2', label: '3+2', tc: 'blitz_3_2', timeMs: '180000', incMs: '2000' },
    { time: '300', inc: '0', label: '5+0', tc: 'blitz_5_0', timeMs: '300000', incMs: '0' },
    { time: '300', inc: '3', label: '5+3', tc: 'blitz_5_3', timeMs: '300000', incMs: '3000' }
  ],
  rapid: [
    { time: '600', inc: '0', label: '10+0', tc: 'rapid_10_0', timeMs: '600000', incMs: '0' },
    { time: '600', inc: '5', label: '10+5', tc: 'rapid_10_5', timeMs: '600000', incMs: '5000' },
    { time: '900', inc: '10', label: '15+10', tc: 'rapid_15_10', timeMs: '900000', incMs: '10000' }
  ],
  classical: [
    { time: '1800', inc: '0', label: '30+0', tc: 'classical_30_0', timeMs: '1800000', incMs: '0' },
    { time: '1800', inc: '20', label: '30+20', tc: 'classical_30_20', timeMs: '1800000', incMs: '20000' },
    { time: '3600', inc: '0', label: '60+0', tc: 'classical_60_0', timeMs: '3600000', incMs: '0' }
  ]
};

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

  setupChips('mp-cat', 'mp-tc', true);
  setupChips('custom-cat', 'custom-tc', false);
  setupSelection('custom-color');

  try {
    const data = await App.cachedFetch('/api/bots.php', 60000);
    if (data && data.bots) {
      const select = document.getElementById('bot-select');
      select.innerHTML = data.bots.map(bot => {
        const avgElo = Math.round((bot.elo_min + bot.elo_max) / 2);
        return '<option value="' + bot.id + '"' + (bot.id === 'nour' ? ' selected' : '') + '>' + bot.name + ' (' + avgElo + ')</option>';
      }).join('');
      window._botsData = data.bots;
    }
  } catch (e) {}
});

function setupChips(catId, tcId, isMP) {
  const catEl = document.getElementById(catId);
  const tcEl = document.getElementById(tcId);
  catEl.querySelectorAll('.chip').forEach(chip => {
    chip.addEventListener('click', () => {
      catEl.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
      chip.classList.add('active');
      const opts = TC_OPTIONS[chip.dataset.cat];
      tcEl.innerHTML = opts.map((o, i) => {
        const cls = i === 0 ? ' active' : '';
        if (isMP) return '<button class="chip' + cls + '" data-tc="' + o.tc + '" data-time="' + o.timeMs + '" data-inc="' + o.incMs + '">' + o.label + '</button>';
        return '<button class="chip' + cls + '" data-time="' + o.time + '" data-inc="' + o.inc + '">' + o.label + '</button>';
      }).join('');
      setupSelection(tcId);
    });
  });
  setupSelection(tcId);
}

function setupSelection(id) {
  const el = document.getElementById(id);
  if (!el) return;
  el.querySelectorAll('.chip').forEach(chip => {
    chip.addEventListener('click', () => {
      el.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
      chip.classList.add('active');
    });
  });
}

function startMP() {
  const active = document.querySelector('#mp-tc .chip.active');
  window.location.href = '/matchmaking?tc=' + active.dataset.tc + '&time=' + active.dataset.time + '&inc=' + active.dataset.inc;
}

function quickMatch() {
  const bots = window._botsData ? window._botsData.filter(b => b.id !== 'grandmaster').map(b => b.id) : ['nour'];
  const bot = bots[Math.floor(Math.random() * bots.length)];
  const color = Math.random() < 0.5 ? 'w' : 'b';
  window.location.href = '/game?bot=' + bot + '&color=' + color + '&time=300&inc=0&rated=false';
}

function startCustom() {
  const tc = document.querySelector('#custom-tc .chip.active');
  let color = document.querySelector('#custom-color .chip.active').dataset.color;
  if (color === 'random') color = Math.random() < 0.5 ? 'w' : 'b';
  const bot = document.getElementById('bot-select').value;
  window.location.href = '/game?bot=' + bot + '&color=' + color + '&time=' + tc.dataset.time + '&inc=' + tc.dataset.inc + '&rated=false';
}
</script>

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