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

<div class="analysis-page" id="analysis-page">

  <!-- Loading state -->
  <div class="analysis-loading" id="analysis-loading">
    <div class="thinking">
      <div class="thinking-dots">
        <span></span><span></span><span></span>
      </div>
      <span>تحميل المباراة...</span>
    </div>
  </div>

  <!-- Main content (hidden until loaded) -->
  <div class="analysis-content" id="analysis-content" style="display:none;">

    <!-- Header with game info -->
    <div class="analysis-header">
      <div class="analysis-players">
        <div class="analysis-player">
          <svg class="icon-sm"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
          <span id="analysis-player-name">اللاعب</span>
          <span class="text-muted text-sm" id="analysis-player-accuracy"></span>
        </div>
        <span class="text-muted">ضد</span>
        <div class="analysis-player">
          <svg class="icon-sm"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
          <span id="analysis-opponent-name">الخصم</span>
          <span class="text-muted text-sm" id="analysis-opponent-accuracy"></span>
        </div>
      </div>
      <div class="analysis-opening" id="analysis-opening"></div>
    </div>

    <!-- Board + Eval Bar -->
    <div class="analysis-board-section">
      <!-- Eval bar (vertical, left side) -->
      <div class="eval-bar" id="eval-bar">
        <div class="eval-bar-fill" id="eval-bar-fill"></div>
        <div class="eval-bar-value" id="eval-bar-value">0.0</div>
      </div>

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

    <!-- Move navigation -->
    <div class="analysis-nav">
      <button class="btn btn-ghost btn-sm" id="btn-first" title="البداية">
        <svg class="icon" style="transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrows"></use></svg>
      </button>
      <button class="btn btn-ghost btn-sm" id="btn-prev" title="السابق">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
      </button>
      <button class="btn btn-ghost btn-sm" id="btn-next" title="التالي">
        <svg class="icon" style="transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
      </button>
      <button class="btn btn-ghost btn-sm" id="btn-last" title="النهاية">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-arrows"></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>
    </div>

    <!-- Move list with classifications -->
    <div class="analysis-moves" id="analysis-moves"></div>

    <!-- Eval graph (canvas chart) -->
    <div class="analysis-section">
      <h3 class="analysis-section-title">
        <svg class="icon-sm"><use href="/public/icons/sprite.svg#icon-star"></use></svg>
        رسم التقييم
      </h3>
      <div class="eval-graph-wrapper">
        <canvas id="eval-graph" width="600" height="150"></canvas>
      </div>
    </div>

    <!-- Time per move chart -->
    <div class="analysis-section">
      <h3 class="analysis-section-title">
        <svg class="icon-sm"><use href="/public/icons/sprite.svg#icon-clock"></use></svg>
        الوقت لكل نقلة
      </h3>
      <div class="eval-graph-wrapper">
        <canvas id="time-graph" width="600" height="120"></canvas>
      </div>
    </div>

    <!-- Critical moments -->
    <div class="analysis-section">
      <h3 class="analysis-section-title">
        <svg class="icon-sm" style="color:var(--error)"><use href="/public/icons/sprite.svg#icon-fire"></use></svg>
        اللحظات الحاسمة
      </h3>
      <div class="critical-moments" id="critical-moments"></div>
    </div>

    <!-- Action buttons -->
    <div class="analysis-actions">
      <button class="btn btn-cyan btn-sm" id="btn-analyze" onclick="Analysis.startAnalysis()">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-star"></use></svg>
        تحليل بالمحرك
      </button>
      <button class="btn btn-ghost btn-sm" id="btn-review-mistakes" onclick="Analysis.reviewMistakes()">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-search"></use></svg>
        مراجعة الاخطاء
      </button>
      <button class="btn btn-ghost btn-sm" onclick="Analysis.exportPGN()">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-send"></use></svg>
        تصدير PGN
      </button>
      <button class="btn btn-ghost btn-sm" onclick="Analysis.copyFEN()">
        <svg class="icon"><use href="/public/icons/sprite.svg#icon-edit"></use></svg>
        نسخ FEN
      </button>
    </div>

    <!-- Analysis progress -->
    <div class="analysis-progress" id="analysis-progress" style="display:none;">
      <div class="progress-bar">
        <div class="progress-bar-fill" id="analysis-progress-fill"></div>
      </div>
      <span class="text-sm text-muted" id="analysis-progress-text">جاري التحليل...</span>
    </div>

  </div>
</div>

<style>
.analysis-page {
  max-width: 100%;
}

.analysis-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.analysis-header {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
}

.analysis-players {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.analysis-player {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.analysis-opening {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-en);
}

.analysis-board-section {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}

/* Eval bar */
.eval-bar {
  width: 24px;
  min-height: 100%;
  background: var(--eval-bg);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.eval-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--eval-white);
  transition: height 0.3s ease;
}

.eval-bar-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-en);
  color: var(--text-1);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  z-index: 1;
  text-shadow: 0 0 3px var(--overlay-dark);
}

.analysis-board-section .board-wrapper {
  flex: 1;
}

/* Navigation */
.analysis-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Move list */
.analysis-moves {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  font-family: var(--font-en);
  font-size: 13px;
  direction: ltr;
  margin-bottom: 16px;
}

.analysis-move-pair {
  display: flex;
  gap: 4px;
  padding: 2px 0;
  align-items: center;
}

.analysis-move-number {
  color: var(--text-3);
  min-width: 28px;
}

.analysis-move {
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.analysis-move:hover { background: var(--bg-3); }
.analysis-move.current { background: var(--cyan); color: var(--text-inverse); }

/* Move classifications */
.move-class {
  font-size: 10px;
  font-weight: 700;
  margin-right: 2px;
}
.move-class-brilliant { color: var(--move-text-brilliant); }
.move-class-great { color: var(--move-text-great); }
.move-class-good { color: var(--move-text-good); }
.move-class-book { color: var(--move-book); }
.move-class-inaccuracy { color: var(--move-text-inaccuracy); }
.move-class-mistake { color: var(--move-text-mistake); }
.move-class-blunder { color: var(--move-text-blunder); }

/* Sections */
.analysis-section {
  margin-bottom: 16px;
}

.analysis-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Eval graph */
.eval-graph-wrapper {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  overflow-x: auto;
}

.eval-graph-wrapper canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* Critical moments */
.critical-moments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.critical-moment {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.critical-moment:hover { background: var(--bg-3); }

.critical-moment-move {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
}

.critical-moment-eval {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--text-3);
}

/* Actions */
.analysis-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Progress bar */
.analysis-progress {
  margin-bottom: 16px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.progress-bar-fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}
</style>

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

  const params = new URLSearchParams(window.location.search);
  const gameId = params.get('id');
  if (!gameId) {
    App.toast('لم يتم تحديد مباراة', 'error');
    return;
  }

  Analysis.init(gameId);
});
</script>

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