import * as scene from '../../../core/scene.js';
import * as net from '../../../core/net.js';
import * as audio from '../../../core/audio.js';
import * as bus from '../../../core/bus.js';
import { t } from '../../../core/i18n.js';
import { createCanvas, clear } from '../../../core/canvas.js';
import * as engine from '../logic/engine.js';
import { classifyMove, calculateAccuracy, getMoveClassSummary, getAccuracyLabel } from '../logic/classifier.js';
import { getOpeningName } from '../logic/openings.js';
import { emoji } from '../../../core/theme.js';

let reviewData = null;

export async function mountReview(el, params) {
  const { moveHistory = [], playerColor = 'w', botId, result } = params;

  el.innerHTML = `
    <div style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;overflow-y:auto;">
      <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#0f0f1e;border-bottom:1px solid rgba(255,255,255,0.06);">
        <button class="btn btn-secondary" id="back-btn" style="min-height:30px;padding:4px 12px;font-size:12px;">← ${t('game.back')}</button>
        <span style="font-size:15px;font-weight:700;color:#f8fafc;">${emoji('star', '⭐', 15)} مراجعة المباراة</span>
        <div style="width:50px;"></div>
      </div>

      <!-- Progress -->
      <div id="review-progress" style="padding:16px;text-align:center;">
        <div style="font-size:14px;color:#94a3b8;margin-bottom:8px;">جاري تحليل كل نقلة...</div>
        <div style="background:#1e1e3a;border-radius:6px;height:8px;overflow:hidden;">
          <div id="progress-bar" style="height:100%;background:#E4AC38;width:0%;transition:width 0.3s;border-radius:6px;"></div>
        </div>
        <div id="progress-text" style="font-size:11px;color:#64748b;margin-top:4px;">0/${moveHistory.length}</div>
      </div>

      <!-- Review content (shown after analysis) -->
      <div id="review-content" style="display:none;padding:0 14px 14px;"></div>
    </div>
  `;

  el.querySelector('#back-btn').addEventListener('click', () => { audio.play('click'); scene.pop(); });

  // Start analyzing
  await analyzeAllMoves(el, moveHistory, playerColor);
}

async function analyzeAllMoves(el, moves, playerColor) {
  const results = [];
  const chess = new Chess();
  let prevEval = 0.2; // Slight white advantage at start

  const progressBar = el.querySelector('#progress-bar');
  const progressText = el.querySelector('#progress-text');

  for (let i = 0; i < moves.length; i++) {
    const fen = chess.fen();
    const isWhiteMove = chess.turn() === 'w';
    const move = moves[i];

    // Apply move
    chess.move({ from: move.from, to: move.to, promotion: move.promotion });

    // Get engine eval for position AFTER the move
    let evalAfter = prevEval;
    let bestEval = prevEval;
    let bestMove = null;

    try {
      const analysis = await net.post('analysis.php', { fen: chess.fen(), depth: 12, lines: 1 });
      if (analysis?.lines?.[0]) {
        // Eval is from side-to-move perspective, flip it to white's perspective
        evalAfter = analysis.lines[0].evaluation * (chess.turn() === 'w' ? 1 : -1);
      }
    } catch (e) {}

    try {
      const bestAnalysis = await net.post('analysis.php', { fen, depth: 12, lines: 1 });
      if (bestAnalysis?.lines?.[0]) {
        bestEval = bestAnalysis.lines[0].evaluation * (isWhiteMove ? 1 : -1);
        bestMove = bestAnalysis.lines[0].move;
      }
    } catch (e) {
      bestEval = evalAfter;
    }

    const moveNum = Math.floor(i / 2) + 1;
    const classification = classifyMove(prevEval, evalAfter, bestEval, isWhiteMove, moveNum);

    results.push({
      san: move.san,
      evalBefore: prevEval,
      evalAfter,
      bestEval,
      bestMove,
      classification,
      isWhite: isWhiteMove
    });

    prevEval = evalAfter;

    // Update progress
    const pct = Math.round(((i + 1) / moves.length) * 100);
    progressBar.style.width = pct + '%';
    progressText.textContent = `${i + 1}/${moves.length}`;
  }

  reviewData = results;
  renderReview(el, results, moves, playerColor);
}

function renderReview(el, results, moves, playerColor) {
  el.querySelector('#review-progress').style.display = 'none';
  const content = el.querySelector('#review-content');
  content.style.display = 'block';

  // Split by player
  const whiteMoves = results.filter(r => r.isWhite);
  const blackMoves = results.filter(r => !r.isWhite);

  const whiteAccuracy = calculateAccuracy(whiteMoves.map(r => r.classification));
  const blackAccuracy = calculateAccuracy(blackMoves.map(r => r.classification));

  const whiteSummary = getMoveClassSummary(whiteMoves.map(r => r.classification));
  const blackSummary = getMoveClassSummary(blackMoves.map(r => r.classification));

  const playerAccuracy = playerColor === 'w' ? whiteAccuracy : blackAccuracy;
  const opponentAccuracy = playerColor === 'w' ? blackAccuracy : whiteAccuracy;
  const playerLabel = getAccuracyLabel(playerAccuracy);
  const opponentLabel = getAccuracyLabel(opponentAccuracy);

  const opening = getOpeningName(moves) || 'غير معروف';

  content.innerHTML = `
    <!-- Eval Graph -->
    <div id="eval-graph-container" style="background:#0f0f1e;border-radius:10px;padding:8px;margin-bottom:12px;"></div>

    <!-- Accuracy Comparison -->
    <div style="background:#0f0f1e;border-radius:10px;padding:16px;margin-bottom:12px;">
      <div style="text-align:center;font-size:15px;font-weight:700;color:#f8fafc;margin-bottom:12px;">${emoji('star', '⭐', 15)} مراجعة المباراة</div>

      <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
        <!-- Player accuracy -->
        <div style="flex:1;text-align:center;">
          <div style="font-size:28px;font-weight:800;color:${playerLabel.color};font-family:Inter,monospace;">${playerAccuracy}%</div>
          <div style="font-size:11px;color:#94a3b8;">أنت</div>
          <div style="height:6px;background:#1e1e3a;border-radius:3px;margin-top:6px;overflow:hidden;">
            <div style="height:100%;width:${playerAccuracy}%;background:${playerLabel.color};border-radius:3px;"></div>
          </div>
        </div>

        <div style="font-size:12px;color:#64748b;font-weight:600;">VS</div>

        <!-- Opponent accuracy -->
        <div style="flex:1;text-align:center;">
          <div style="font-size:28px;font-weight:800;color:${opponentLabel.color};font-family:Inter,monospace;">${opponentAccuracy}%</div>
          <div style="font-size:11px;color:#94a3b8;">الخصم</div>
          <div style="height:6px;background:#1e1e3a;border-radius:3px;margin-top:6px;overflow:hidden;">
            <div style="height:100%;width:${opponentAccuracy}%;background:${opponentLabel.color};border-radius:3px;"></div>
          </div>
        </div>
      </div>

      <!-- Opening -->
      <div style="text-align:center;font-size:12px;color:#64748b;margin-bottom:12px;">${emoji('book', '📖', 12)} ${opening}</div>
    </div>

    <!-- Move Classification Breakdown -->
    <div style="background:#0f0f1e;border-radius:10px;padding:14px;margin-bottom:12px;">
      <div style="font-size:13px;font-weight:700;color:#f8fafc;margin-bottom:10px;text-align:center;">تصنيف النقلات</div>
      <table style="width:100%;border-collapse:collapse;font-size:12px;">
        <thead>
          <tr style="color:#64748b;">
            <th style="text-align:right;padding:3px 0;font-weight:600;">أنت</th>
            <th style="text-align:center;padding:3px 8px;"></th>
            <th style="text-align:left;padding:3px 0;font-weight:600;">الخصم</th>
          </tr>
        </thead>
        <tbody>
          ${renderClassRow('brilliant', '!! رائعة', '#06B6D4', whiteSummary, blackSummary, playerColor)}
          ${renderClassRow('great', '! ممتازة', '#3B82F6', whiteSummary, blackSummary, playerColor)}
          ${renderClassRow('best', emoji('best_move_star', '★', 12) + ' أفضل نقلة', '#10B981', whiteSummary, blackSummary, playerColor)}
          ${renderClassRow('good', '✓ جيدة', '#94a3b8', whiteSummary, blackSummary, playerColor)}
          ${renderClassRow('book', emoji('book', '📖', 12) + ' نظرية', '#94a3b8', whiteSummary, blackSummary, playerColor)}
          ${renderClassRow('inaccuracy', '?! عدم دقة', '#FBBF24', whiteSummary, blackSummary, playerColor)}
          ${renderClassRow('mistake', '? خطأ', '#F97316', whiteSummary, blackSummary, playerColor)}
          ${renderClassRow('blunder', '?? خطأ فادح', '#EF4444', whiteSummary, blackSummary, playerColor)}
        </tbody>
      </table>
    </div>

    <!-- Back to analysis button -->
    <button class="btn btn-secondary w-full" id="btn-full-analysis" style="font-size:13px;margin-bottom:12px;">${emoji('chart', '📊', 13)} التحليل التفصيلي</button>
  `;

  // Render eval graph
  renderEvalGraph(el.querySelector('#eval-graph-container'), results);

  el.querySelector('#btn-full-analysis')?.addEventListener('click', () => {
    audio.play('click');
    scene.pop();
  });
}

function renderClassRow(key, label, color, whiteSummary, blackSummary, playerColor) {
  const playerCount = playerColor === 'w' ? (whiteSummary[key] || 0) : (blackSummary[key] || 0);
  const opponentCount = playerColor === 'w' ? (blackSummary[key] || 0) : (whiteSummary[key] || 0);

  return `
    <tr style="border-top:1px solid rgba(255,255,255,0.04);">
      <td style="text-align:right;padding:5px 0;color:${playerCount > 0 ? color : '#475569'};font-weight:${playerCount > 0 ? '700' : '400'};">${playerCount}</td>
      <td style="text-align:center;padding:5px 8px;color:${color};font-size:11px;">${label}</td>
      <td style="text-align:left;padding:5px 0;color:${opponentCount > 0 ? color : '#475569'};font-weight:${opponentCount > 0 ? '700' : '400'};">${opponentCount}</td>
    </tr>
  `;
}

function renderEvalGraph(container, results) {
  if (!results || results.length < 2) return;

  const width = container.clientWidth || 340;
  const height = 80;
  const { canvas, ctx } = createCanvas(container, width, height);
  canvas.style.width = '100%';
  canvas.style.height = height + 'px';
  canvas.style.borderRadius = '6px';

  const padding = 4;
  const graphW = width - padding * 2;
  const graphH = height - padding * 2;

  // Background
  ctx.fillStyle = '#1e1e3a';
  ctx.fillRect(0, 0, width, height);

  // Center line (0 eval)
  ctx.strokeStyle = 'rgba(255,255,255,0.15)';
  ctx.lineWidth = 1;
  ctx.setLineDash([3, 3]);
  ctx.beginPath();
  ctx.moveTo(padding, height / 2);
  ctx.lineTo(width - padding, height / 2);
  ctx.stroke();
  ctx.setLineDash([]);

  // Fill areas
  const evals = results.map(r => r.evalAfter);
  const maxEval = 4;

  function toY(ev) {
    const clamped = Math.max(-maxEval, Math.min(maxEval, ev));
    return padding + graphH / 2 - (clamped / maxEval) * (graphH / 2);
  }

  function toX(i) {
    return padding + (i / (results.length - 1)) * graphW;
  }

  // White advantage fill (above center)
  ctx.beginPath();
  ctx.moveTo(toX(0), height / 2);
  for (let i = 0; i < results.length; i++) {
    const y = Math.min(toY(evals[i]), height / 2);
    ctx.lineTo(toX(i), y);
  }
  ctx.lineTo(toX(results.length - 1), height / 2);
  ctx.closePath();
  ctx.fillStyle = 'rgba(255,255,255,0.7)';
  ctx.fill();

  // Black advantage fill (below center)
  ctx.beginPath();
  ctx.moveTo(toX(0), height / 2);
  for (let i = 0; i < results.length; i++) {
    const y = Math.max(toY(evals[i]), height / 2);
    ctx.lineTo(toX(i), y);
  }
  ctx.lineTo(toX(results.length - 1), height / 2);
  ctx.closePath();
  ctx.fillStyle = 'rgba(50,50,50,0.7)';
  ctx.fill();

  // Eval line
  ctx.beginPath();
  ctx.moveTo(toX(0), toY(evals[0]));
  for (let i = 1; i < results.length; i++) {
    ctx.lineTo(toX(i), toY(evals[i]));
  }
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 1.5;
  ctx.stroke();

  // Dots for mistakes/blunders
  const dotColors = { blunder: '#EF4444', mistake: '#F97316', inaccuracy: '#FBBF24', brilliant: '#06B6D4' };
  results.forEach((r, i) => {
    const dotColor = dotColors[r.classification.class];
    if (dotColor) {
      ctx.beginPath();
      ctx.arc(toX(i), toY(evals[i]), 3.5, 0, Math.PI * 2);
      ctx.fillStyle = dotColor;
      ctx.fill();
    }
  });
}
