<?php
$pageTitle = 'EL3AB - لودو';
$extraCss = ['/public/css/ludo.css'];
$extraJs = ['/public/js/ludo-constants.js', '/public/js/ludo-ui.js', '/public/js/ludo-bot.js', '/public/js/ludo-game.js'];
?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<div class="ludo-layout">
  <div class="ludo-board-column">
    <div class="ludo-players-row" id="ludo-top-players"></div>

    <div class="ludo-board-wrapper">
      <div id="ludo-board"></div>
    </div>

    <div class="ludo-players-row" id="ludo-bottom-players"></div>

    <div class="ludo-mobile-panel">
      <div class="ludo-turn-indicator" id="ludo-turn-mobile"></div>
      <div id="ludo-dice-container-mobile"></div>
    </div>
  </div>

  <div class="ludo-side-panel">
    <div class="ludo-turn-indicator" id="ludo-turn"></div>
    <div id="ludo-dice-container"></div>
    <div class="ludo-log" id="ludo-log"></div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var params = new URLSearchParams(window.location.search);
  var mode = params.get('mode') || 'local';
  var playerCount = parseInt(params.get('players') || '4', 10);
  var botCount = parseInt(params.get('bots') || '1', 10);
  var difficulty = params.get('difficulty') || 'easy';

  var allPlayers = ['P1', 'P2', 'P3', 'P4'];
  var activePlayers, bots, playerNames;

  if (mode === 'bot') {
    var totalPlayers = 1 + botCount;
    if (totalPlayers > 4) totalPlayers = 4;
    activePlayers = allPlayers.slice(0, totalPlayers);
    bots = {};
    playerNames = {};
    playerNames['P1'] = 'انت';
    for (var i = 1; i < totalPlayers; i++) {
      bots[allPlayers[i]] = difficulty;
      playerNames[allPlayers[i]] = 'بوت ' + i;
    }
  } else {
    if (playerCount < 2) playerCount = 2;
    if (playerCount > 4) playerCount = 4;
    activePlayers = allPlayers.slice(0, playerCount);
    bots = {};
    playerNames = {};
    activePlayers.forEach(function(p) {
      playerNames[p] = LudoConstants.PLAYER_LABELS[p];
    });
  }

  LudoUI.renderBoard('#ludo-board');

  var isMobile = window.innerWidth < 768;
  var diceContainer = isMobile ? '#ludo-dice-container-mobile' : '#ludo-dice-container';
  var turnEl = isMobile ? document.getElementById('ludo-turn-mobile') : document.getElementById('ludo-turn');

  LudoUI.renderDice(diceContainer);
  LudoUI.setTurnElement(turnEl);
  LudoUI.setLogElement(document.getElementById('ludo-log'));
  LudoUI.renderPlayerCards(
    document.getElementById('ludo-top-players'),
    document.getElementById('ludo-bottom-players'),
    activePlayers,
    playerNames
  );

  LudoGame.init({
    players: activePlayers,
    mode: mode,
    bots: bots,
    difficulty: difficulty,
    playerNames: playerNames,
    onGameEnd: function(winners) {
      var playAgainBtn = document.getElementById('ludo-play-again');
      if (playAgainBtn) {
        playAgainBtn.addEventListener('click', function() {
          LudoGame.restart({
            players: activePlayers,
            mode: mode,
            bots: bots,
            difficulty: difficulty,
            playerNames: playerNames
          });
        });
      }
    }
  });
});
</script>

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