<?php
$pageTitle = 'EL3AB - المباراة';
$extraCss = '/public/css/chessboard.css';
?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<div class="game-layout" id="game-container">

  <!-- Board Column (eval bar + opponent/player info + board) -->
  <div class="game-board-column">

    <!-- Opponent info + clock -->
    <div class="game-header">
      <div class="game-player">
        <div class="avatar avatar-sm" id="opponent-avatar">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
        </div>
        <div>
          <div class="game-player-name" id="opponent-name">Bot</div>
          <div class="game-player-rating" id="opponent-rating">1200</div>
        </div>
      </div>
      <div class="game-clock" id="clock-top">10:00</div>
    </div>

    <!-- Board + Eval Bar -->
    <div class="game-board-section">
      <!-- Eval Bar -->
      <div class="eval-bar" id="eval-bar">
        <span class="eval-bar-label eval-bar-label-top" id="eval-label-top"></span>
        <div class="eval-bar-fill" id="eval-bar-fill" style="height:50%;"></div>
        <span class="eval-bar-label eval-bar-label-bottom" id="eval-label-bottom"></span>
      </div>

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

    <!-- Thinking indicator -->
    <div class="thinking" id="thinking-indicator" style="display:none;">
      <div class="thinking-dots">
        <span></span><span></span><span></span>
      </div>
      <span>يفكر...</span>
    </div>

    <!-- Pre-move indicator -->
    <div class="premove-indicator" id="premove-indicator" style="display:none;">
      نقلة مسبقة محجوزة
    </div>

    <!-- Player info + clock -->
    <div class="game-header">
      <div class="game-player">
        <div class="avatar avatar-sm">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
        </div>
        <div>
          <div class="game-player-name" id="player-name">انت</div>
          <div class="game-player-rating" id="player-rating">1200</div>
        </div>
      </div>
      <div class="game-clock" id="clock-bottom">10:00</div>
    </div>

  </div>

  <!-- Side Panel (Desktop) -->
  <div class="game-side-panel" id="side-panel">
    <div class="analysis-panel">
      <!-- Opening name -->
      <div class="opening-display" id="opening-display" style="display:none;">
        <span class="opening-eco" id="opening-eco"></span>
        <span class="opening-name" id="opening-name"></span>
      </div>

      <!-- Move list -->
      <div class="move-list-pro" id="move-list"></div>

      <!-- Game status -->
      <div class="panel-status" id="game-status">دورك</div>

      <!-- Controls -->
      <div class="panel-controls" id="game-controls">
        <button class="btn btn-ghost btn-sm" onclick="Game.resign()" id="btn-resign">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-flag"></use></svg>
          استسلام
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Board.flip()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-arrows"></use></svg>
          اقلب
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Game.toggleArrows()" id="btn-arrows">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-eye"></use></svg>
          اسهم
        </button>
      </div>

      <!-- Post-game controls (hidden initially) -->
      <div class="postgame-controls" id="postgame-controls" style="display:none;">
        <button class="btn btn-ghost btn-sm" onclick="Game.exportPGN()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-download"></use></svg>
          PGN
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Game.copyFEN()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-copy"></use></svg>
          FEN
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Game.analyze()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-chart"></use></svg>
          تحليل
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Panel (shown only on mobile) -->
  <div class="game-mobile-panel" id="mobile-panel">
    <div class="analysis-panel">
      <!-- Opening name (mobile) -->
      <div class="opening-display" id="opening-display-mobile" style="display:none;">
        <span class="opening-eco" id="opening-eco-mobile"></span>
        <span class="opening-name" id="opening-name-mobile"></span>
      </div>

      <!-- Move list (mobile) -->
      <div class="move-list-pro" id="move-list-mobile"></div>

      <!-- Game status (mobile) -->
      <div class="panel-status" id="game-status-mobile">دورك</div>

      <!-- Controls (mobile) -->
      <div class="panel-controls" id="game-controls-mobile">
        <button class="btn btn-ghost btn-sm" onclick="Game.resign()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-flag"></use></svg>
          استسلام
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Board.flip()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-arrows"></use></svg>
          اقلب
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Game.toggleArrows()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-eye"></use></svg>
          اسهم
        </button>
      </div>

      <!-- Post-game controls (mobile, hidden initially) -->
      <div class="postgame-controls" id="postgame-controls-mobile" style="display:none;">
        <button class="btn btn-ghost btn-sm" onclick="Game.exportPGN()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-download"></use></svg>
          PGN
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Game.copyFEN()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-copy"></use></svg>
          FEN
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Game.analyze()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-chart"></use></svg>
          تحليل
        </button>
      </div>
    </div>
  </div>

</div>

<script src="/public/js/chess.min.js"></script>
<script src="/public/js/board.js"></script>
<script src="/public/js/openings.js"></script>
<script src="/public/js/game.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  if (!App.isLoggedIn()) {
    window.location.href = '/login';
    return;
  }

  const params = new URLSearchParams(window.location.search);
  const botId = params.get('bot') || 'amina';
  const color = params.get('color') || 'w';
  const time = parseInt(params.get('time') || '600');
  const inc = parseInt(params.get('inc') || '0');
  const rated = params.get('rated') !== 'false';

  const avatarEl = document.getElementById('opponent-avatar');
  avatarEl.innerHTML = '<img src="https://stockfishapi.caprover.al-arcade.com/portraits/' + botId + '.jpg" alt="' + botId + '" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">';

  // Load bot name from API
  (async () => {
    try {
      const data = await App.cachedFetch('/api/bots.php', 60000);
      if (data && data.bots) {
        const bot = data.bots.find(b => b.id === botId);
        if (bot) {
          document.getElementById('opponent-name').textContent = bot.name_ar.split(' ')[0];
        } else {
          document.getElementById('opponent-name').textContent = botId;
        }
      }
    } catch (e) {
      document.getElementById('opponent-name').textContent = botId;
    }
  })();

  Game.start({ botId, color, time, increment: inc, rated });
});
</script>

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