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

<link rel="stylesheet" href="/public/css/backgammon.css">
<style>.main-inner { max-width: 960px !important; padding: 8px 12px !important; }</style>

<div class="bg-layout">
  <div class="bg-board-column">
    <!-- Player bar top (opponent) -->
    <div class="bg-players-bar">
      <div class="bg-player-info bg-player-info--black" id="bg-player-1">
        <span class="bg-player-dot bg-player-dot--black"></span>
        <span class="bg-player-name" id="bg-name-1">اللاعب 2</span>
        <span class="bg-player-pip">نقاط: <span id="bg-pip-1">167</span></span>
      </div>
    </div>

    <!-- Board -->
    <div class="bg-board" id="bg-board"></div>

    <!-- Player bar bottom (you) -->
    <div class="bg-players-bar">
      <div class="bg-player-info bg-player-info--white" id="bg-player-0">
        <span class="bg-player-dot bg-player-dot--white"></span>
        <span class="bg-player-name" id="bg-name-0">أنت</span>
        <span class="bg-player-pip">نقاط: <span id="bg-pip-0">167</span></span>
      </div>
    </div>
  </div>

  <!-- Side panel -->
  <div class="bg-side-panel">
    <div id="bg-dice-container" class="bg-dice-area"></div>
    <div id="bg-status" class="bg-status"></div>
    <div class="bg-controls">
      <button id="bg-roll-btn" class="bg-roll-btn">ارمِ النرد</button>
      <button id="bg-undo-btn" class="bg-pass-btn" style="display:none;">تراجع</button>
    </div>
    <div id="bg-log" class="bg-log"></div>
  </div>
</div>

<!-- Result overlay -->
<div id="bg-result-overlay" class="bg-result-overlay" style="display:none;"></div>

<script src="/public/js/backgammon-constants.js"></script>
<script src="/public/js/backgammon-ui.js"></script>
<script src="/public/js/backgammon-bot.js"></script>
<script src="/public/js/backgammon-game.js"></script>
<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var mode = params.get('mode') || 'bot';
  var difficulty = params.get('difficulty') || 'medium';

  var players = [
    { id: 'p0', name: 'أنت', type: 'human' },
    { id: 'p1', name: 'اللاعب 2', type: 'human' }
  ];

  var bots = [];

  if (mode === 'bot') {
    players[1] = { id: 'bot_0', name: 'بوت', type: 'bot', difficulty: difficulty };
    bots.push({ index: 1, difficulty: difficulty });
  }

  BackgammonGame.init({
    mode: mode,
    players: players,
    bots: bots,
    matchLength: 1
  });
})();
</script>

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