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

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

  <!-- Board Column -->
  <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-profile"></use></svg>
        </div>
        <div>
          <div class="game-player-name" id="opponent-name">خصم</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">
      <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>
      <div class="board-wrapper">
        <div class="board" id="board"></div>
      </div>
    </div>

    <!-- Thinking indicator (opponent's turn) -->
    <div class="thinking" id="thinking-indicator" style="display:none;">
      <div class="thinking-dots">
        <span></span><span></span><span></span>
      </div>
      <span>ينتظر نقلة الخصم...</span>
    </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">
      <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>

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

      <div class="panel-status" id="game-status">بانتظار الخصم...</div>

      <!-- Draw offer banner -->
      <div class="draw-offer-banner" id="draw-offer-banner" style="display:none;">
        <span>الخصم يعرض التعادل</span>
        <div class="draw-offer-actions">
          <button class="btn btn-success btn-sm" onclick="LiveGame.acceptDraw()">قبول</button>
          <button class="btn btn-ghost btn-sm" onclick="LiveGame.declineDraw()">رفض</button>
        </div>
      </div>

      <div class="panel-controls" id="game-controls">
        <button class="btn btn-ghost btn-sm" onclick="LiveGame.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="LiveGame.offerDraw()" id="btn-draw">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-shield"></use></svg>
          تعادل
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Board.flip()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-eye"></use></svg>
          اقلب
        </button>
      </div>

      <div class="postgame-controls" id="postgame-controls" style="display:none;">
        <button class="btn btn-ghost btn-sm" onclick="LiveGame.exportPGN()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-download"></use></svg>
          PGN
        </button>
        <button class="btn btn-ghost btn-sm" onclick="LiveGame.copyFEN()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-copy"></use></svg>
          FEN
        </button>
        <button class="btn btn-cyan btn-sm" onclick="window.location.href='/play'">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
          رجوع
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Panel -->
  <div class="game-mobile-panel" id="mobile-panel">
    <div class="analysis-panel">
      <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>
      <div class="move-list-pro" id="move-list-mobile"></div>
      <div class="panel-status" id="game-status-mobile">بانتظار الخصم...</div>

      <div class="draw-offer-banner" id="draw-offer-banner-mobile" style="display:none;">
        <span>الخصم يعرض التعادل</span>
        <div class="draw-offer-actions">
          <button class="btn btn-success btn-sm" onclick="LiveGame.acceptDraw()">قبول</button>
          <button class="btn btn-ghost btn-sm" onclick="LiveGame.declineDraw()">رفض</button>
        </div>
      </div>

      <div class="panel-controls" id="game-controls-mobile">
        <button class="btn btn-ghost btn-sm" onclick="LiveGame.resign()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-flag"></use></svg>
          استسلام
        </button>
        <button class="btn btn-ghost btn-sm" onclick="LiveGame.offerDraw()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-shield"></use></svg>
          تعادل
        </button>
        <button class="btn btn-ghost btn-sm" onclick="Board.flip()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-eye"></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/realtime.js"></script>
<script src="/public/js/game-live.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  if (!App.isLoggedIn()) {
    window.location.href = '/login';
    return;
  }

  const params = new URLSearchParams(window.location.search);
  const matchId = params.get('id');

  if (!matchId) {
    App.toast('معرف المباراة مفقود', 'error');
    setTimeout(() => window.location.href = '/play', 1500);
    return;
  }

  LiveGame.init(matchId);
});
</script>

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