"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { Chess, Move } from "chess.js";
import { Chessboard } from "react-chessboard";
import { Stockfish, StockfishEvaluation } from "@/lib/stockfish";
import { Tutor } from "./Tutor";
import { EvaluationBar } from "./EvaluationBar";
import { Personality } from "@/lib/personalities";
import Header from "./Header";
import { useTranslation } from "@/lib/i18n/useTranslation";
import { SupportedLanguage } from "@/lib/i18n/translations";
import { lookupOpening, lookupPossibleOpenings, extractMoveSequenceFromPGN, OpeningMetadata } from "@/lib/openings";
import { GameAnalysisModal } from "./GameAnalysisModal";
import { GameOverModal, MoveHistoryItem } from "./GameOverModal";
import { Brain, ArrowLeft, Download, Flag } from "lucide-react";
import { CapturedPieces } from "./CapturedPieces";
import { detectMissedTactics, uciToSan, DetectedTactic } from "@/lib/tacticDetection";
import { upsertSavedGame } from "@/lib/savedGames";

interface ChessGameProps {
    gameId: string;
    initialFen?: string;
    initialPgn?: string;
    initialPersonality: Personality;
    initialColor: 'white' | 'black';
    initialStockfishDepth?: number;
    onBack: () => void;
}

const PIECE_VALUES: Record<string, number> = {
    'p': 1,
    'n': 3,
    'b': 3,
    'r': 5,
    'q': 9,
    'k': 0
};

export default function ChessGame({ gameId, initialFen, initialPgn, initialPersonality, initialColor, initialStockfishDepth, onBack }: ChessGameProps) {
    const gameRef = useRef(new Chess(initialFen || "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"));
    const [fen, setFen] = useState(gameRef.current.fen());
    const [stockfish, setStockfish] = useState<Stockfish | null>(null);

    // Analysis States
    const [evalP0, setEvalP0] = useState<StockfishEvaluation | null>(null);
    const [evalP2, setEvalP2] = useState<StockfishEvaluation | null>(null);

    // Opening Data
    const [openingData, setOpeningData] = useState<OpeningMetadata[]>([]);

    // Tactical Analysis Data
    const [latestMissedTactics, setLatestMissedTactics] = useState<DetectedTactic[] | null>(null);

    const [userMove, setUserMove] = useState<Move | null>(null);
    const [computerMove, setComputerMove] = useState<Move | null>(null);
    const [isAnalyzing, setIsAnalyzing] = useState(false);
    const [apiKey, setApiKey] = useState<string | null>(null);
    const [stockfishDepth, setStockfishDepth] = useState(initialStockfishDepth ?? 15);

    // Settings
    const [language, setLanguage] = useState<SupportedLanguage>('en');

    // Game State
    const [playerColor, setPlayerColor] = useState<'white' | 'black'>(initialColor);
    const [showAnalysisModal, setShowAnalysisModal] = useState(false);
    const [showDownloadModal, setShowDownloadModal] = useState(false);
    const [gameOverState, setGameOverState] = useState<{ result: string, winner: "White" | "Black" | "Draw" } | null>(null);
    const [moveHistory, setMoveHistory] = useState<MoveHistoryItem[]>([]);
    const [selectedPersonality, setSelectedPersonality] = useState<Personality>(initialPersonality);
    const [resignationContext, setResignationContext] = useState<{
        trigger: number;
        fen: string;
        evaluation: StockfishEvaluation | null;
        history: MoveHistoryItem[];
        result: string;
        winner: "White" | "Black" | "Draw";
    } | null>(null);
    const messagesEndRef = useRef<HTMLDivElement>(null);
    const hasRebuiltHistoryRef = useRef(false);

    // Sound Refs
    const moveSound = useRef<HTMLAudioElement | null>(null);
    const captureSound = useRef<HTMLAudioElement | null>(null);
    const checkSound = useRef<HTMLAudioElement | null>(null);
    const victorySound = useRef<HTMLAudioElement | null>(null);
    const defeatSound = useRef<HTMLAudioElement | null>(null);

    useEffect(() => {
        moveSound.current = new Audio('/sounds/move.wav');
        captureSound.current = new Audio('/sounds/capture.wav');
        checkSound.current = new Audio('/sounds/check.wav');
        victorySound.current = new Audio('/sounds/victory.wav');
        defeatSound.current = new Audio('/sounds/defeat.wav');
    }, []);

    const playMoveSound = (captured: boolean) => {
        if (captured) {
            captureSound.current?.play().catch(e => console.error("Audio play failed", e));
        } else {
            moveSound.current?.play().catch(e => console.error("Audio play failed", e));
        }
    };

    // Removed auto-scroll to prevent page jumping when moves are added
    // Users can manually scroll to see move history if needed

    // Captured Pieces State
    const [capturedWhitePieces, setCapturedWhitePieces] = useState<string[]>([]);
    const [capturedBlackPieces, setCapturedBlackPieces] = useState<string[]>([]);
    const [materialScore, setMaterialScore] = useState<{ white: number, black: number }>({ white: 0, black: 0 });

    const t = useTranslation(language);

    // Initialize Stockfish
    useEffect(() => {
        const sf = new Stockfish();
        setStockfish(sf);
        return () => sf.terminate();
    }, []);

    useEffect(() => {
        hasRebuiltHistoryRef.current = false;
    }, [initialPgn]);

    useEffect(() => {
        if (typeof initialStockfishDepth === 'number') {
            setStockfishDepth(initialStockfishDepth);
        }
    }, [initialStockfishDepth]);

    useEffect(() => {
        if (!initialPgn || !stockfish) return;
        if (moveHistory.length > 0 || hasRebuiltHistoryRef.current) return;

        let isCancelled = false;
        hasRebuiltHistoryRef.current = true;

        const rebuildHistoryFromPgn = async () => {
            try {
                const setupFen = initialFen || undefined;
                const parsingGame = new Chess(setupFen);
                parsingGame.loadPgn(initialPgn);
                const verboseMoves = parsingGame.history({ verbose: true });

                const replayGame = new Chess(setupFen);
                const playerTurnColor = playerColor === 'white' ? 'w' : 'b';
                const rebuiltHistory: MoveHistoryItem[] = [];

                for (let i = 0; i < verboseMoves.length; i++) {
                    const move = verboseMoves[i];

                    // Play through opponent moves until it's the player's turn
                    if (move.color !== playerTurnColor) {
                        replayGame.move(move);
                        continue;
                    }

                    const moveNumber = Math.floor(i / 2) + 1;
                    const fenBeforePlayerMove = replayGame.fen();
                    const evalBeforePlayerMove = await stockfish.evaluate(fenBeforePlayerMove, stockfishDepth);

                    const playerMoveResult = replayGame.move(move);
                    if (!playerMoveResult) break;

                    const fenAfterPlayerMove = replayGame.fen();
                    const evalAfterPlayerMove = await stockfish.evaluate(fenAfterPlayerMove, stockfishDepth);

                    let computerMoveSan = '';
                    let fenAfterComputerMove = fenAfterPlayerMove;
                    let evalAfterComputerMove = evalAfterPlayerMove;

                    if (i + 1 < verboseMoves.length && verboseMoves[i + 1].color !== move.color) {
                        const computerMove = verboseMoves[i + 1];
                        const computerMoveResult = replayGame.move(computerMove);
                        if (computerMoveResult) {
                            computerMoveSan = computerMoveResult.san;
                            fenAfterComputerMove = replayGame.fen();
                            evalAfterComputerMove = await stockfish.evaluate(fenAfterComputerMove, stockfishDepth);
                            i++; // Skip the computer move we just processed
                        }
                    }

                    const isWhite = playerColor === 'white';
                    const evalBeforePerspective = isWhite ? evalBeforePlayerMove.score : -evalBeforePlayerMove.score;
                    const evalAfterPerspective = isWhite ? -evalAfterPlayerMove.score : evalAfterPlayerMove.score;
                    const cpLoss = evalBeforePerspective - evalAfterPerspective;

                    const bestMoveUci = evalBeforePlayerMove.bestMove;
                    const bestMoveSan = bestMoveUci ? uciToSan(fenBeforePlayerMove, bestMoveUci) : null;
                    const missedTactics = bestMoveUci ? detectMissedTactics({
                        fen: fenBeforePlayerMove,
                        playerColor,
                        playerMoveSan: playerMoveResult.san,
                        bestMoveUci,
                        cpLoss,
                    }) : undefined;

                    const currentPgn = replayGame.pgn();
                    const moveSequence = extractMoveSequenceFromPGN(currentPgn);
                    const possibleOpenings = lookupPossibleOpenings(moveSequence, 5);

                    rebuiltHistory.push({
                        moveNumber,
                        playerMove: playerMoveResult.san,
                        playerColor,
                        fenBeforePlayerMove,
                        evalBeforePlayerMove,
                        fenAfterPlayerMove,
                        evalAfterPlayerMove,
                        computerMove: computerMoveSan || '...',
                        fenAfterComputerMove,
                        evalAfterComputerMove,
                        opening: possibleOpenings.length > 0 ? possibleOpenings[0].name : undefined,
                        move: playerMoveResult.san,
                        evalBefore: evalBeforePlayerMove.score,
                        evalAfter: evalAfterPlayerMove.score,
                        bestMove: evalBeforePlayerMove.bestMove,
                        bestMoveSan,
                        cpLoss,
                        missedTactics,
                    });
                }

                if (!isCancelled) {
                    setMoveHistory(rebuiltHistory);
                }
            } catch (error) {
                console.error('Failed to rebuild move history from PGN', error);
                hasRebuiltHistoryRef.current = false;
            }
        };

        rebuildHistoryFromPgn();

        return () => {
            isCancelled = true;
        };
    }, [initialPgn, stockfish, playerColor, stockfishDepth, initialFen, moveHistory.length]);

    // Load Settings & Initial State
    useEffect(() => {
        const storedKey = localStorage.getItem("gemini_api_key");
        const storedLang = localStorage.getItem("chess_tutor_language");

        if (storedKey) setApiKey(storedKey);
        if (storedLang) setLanguage(storedLang as SupportedLanguage);

        // If initialFen is provided, ensure gameRef is synced
        if (initialFen && initialFen !== gameRef.current.fen()) {
            gameRef.current = new Chess(initialFen);
            setFen(initialFen);
            updateCapturedPieces(); // Update captured pieces for loaded game
        }

        // If initialPgn is provided, load it to restore history
        if (initialPgn) {
            try {
                gameRef.current.loadPgn(initialPgn);
                setFen(gameRef.current.fen());
                updateCapturedPieces();
            } catch (e) {
                console.error("Failed to load PGN:", e);
            }
        }

        // If computer is white (player is black) and it's the start of the game, make a move
        // But only if we are at the start position
        if (initialColor === 'black' &&
            gameRef.current.fen() === "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" &&
            stockfish) {

            // Small delay to ensure stockfish is ready
            setTimeout(() => {
                stockfish.evaluate(gameRef.current.fen(), 10).then(evalResult => {
                    const computerMoveData = {
                        from: evalResult.bestMove.substring(0, 2),
                        to: evalResult.bestMove.substring(2, 4),
                        promotion: evalResult.bestMove.length > 4 ? evalResult.bestMove.substring(4, 5) : "q"
                    };
                    makeAMove(computerMoveData);
                });
            }, 1000);
        }

    }, [initialFen, initialColor, stockfish]); // Run when these change

    // Save Game State on Change
    useEffect(() => {
        const saveData = {
            id: gameId,
            fen,
            language,
            selectedPersonality,
            apiKey,
            playerColor, // Save player color too
            pgn: gameRef.current.pgn(),
            updatedAt: Date.now(),
            evaluation: evalP0 ? {
                score: evalP0.score,
                mate: evalP0.mate,
                depth: evalP0.depth
            } : null
        };

        upsertSavedGame(saveData);
        localStorage.setItem("chess_tutor_save", JSON.stringify(saveData));
    }, [fen, language, selectedPersonality, apiKey, playerColor, gameId, evalP0]);

    // Game Over Detection
    useEffect(() => {
        const game = gameRef.current;
        if (game.isGameOver()) {
            let result = "";
            let winner: "White" | "Black" | "Draw" = "Draw";

            if (game.isCheckmate()) {
                if (game.turn() === 'w') {
                    result = "Checkmate! You lost.";
                    winner = "Black";
                    if (playerColor === 'white') defeatSound.current?.play().catch(e => console.error(e));
                    else victorySound.current?.play().catch(e => console.error(e));
                } else {
                    result = "Checkmate! You won!";
                    winner = "White";
                    if (playerColor === 'white') victorySound.current?.play().catch(e => console.error(e));
                    else defeatSound.current?.play().catch(e => console.error(e));
                }
            } else if (game.isDraw()) {
                result = "Draw!";
                winner = "Draw";
            } else if (game.isStalemate()) {
                result = "Stalemate!";
                winner = "Draw";
            } else if (game.inCheck()) {
                checkSound.current?.play().catch(e => console.error(e));
            }

            setGameOverState({ result, winner });
        }
    }, [fen, playerColor]);

    // Pre-Analysis (P0)
    useEffect(() => {
        const playerTurn = playerColor === 'white' ? 'w' : 'b';
        if (stockfish && gameRef.current.turn() === playerTurn && !isAnalyzing && !gameOverState) {
            stockfish.evaluate(gameRef.current.fen(), stockfishDepth).then(evalResult => {
                setEvalP0(evalResult);
            }).catch(err => console.error("Pre-analysis failed:", err));
        }
    }, [playerColor, fen, stockfish, stockfishDepth, isAnalyzing, gameOverState]);

    const updateCapturedPieces = useCallback(() => {
        const history = gameRef.current.history({ verbose: true });
        const whitePiecesLost: string[] = [];
        const blackPiecesLost: string[] = [];
        let whiteLostScore = 0;
        let blackLostScore = 0;

        history.forEach(move => {
            if (move.captured) {
                if (move.color === 'w') { // White moved, captured a black piece. So a black piece was lost.
                    blackPiecesLost.push(move.captured);
                    blackLostScore += PIECE_VALUES[move.captured] || 0;
                } else { // Black moved, captured a white piece. So a white piece was lost.
                    whitePiecesLost.push(move.captured);
                    whiteLostScore += PIECE_VALUES[move.captured] || 0;
                }
            }
        });

        setCapturedWhitePieces(whitePiecesLost);
        setCapturedBlackPieces(blackPiecesLost);
        setMaterialScore({ white: whiteLostScore, black: blackLostScore });
    }, []);

    const makeAMove = useCallback(
        (move: { from: string; to: string; promotion?: string }) => {
            try {
                const game = gameRef.current;
                const result = game.move(move);

                if (result) {
                    const newFen = game.fen();
                    setFen(newFen);
                    updateCapturedPieces();
                    playMoveSound(!!result.captured);

                    // If it was computer's move, update state
                    if (game.turn() === 'w') { // Computer just moved (assuming computer is Black? No, wait)
                        // Logic below handles turns
                    }

                    return { result, newFen };
                }
            } catch (e) {
                return null;
            }
            return null;
        },
        [updateCapturedPieces]
    );

    function onDrop({ sourceSquare, targetSquare }: { sourceSquare: string; targetSquare: string | null }) {
        if (!targetSquare || !stockfish || gameOverState) return false;

        // Check if it's the player's turn
        const currentTurn = gameRef.current.turn(); // 'w' or 'b'
        const playerTurn = playerColor === 'white' ? 'w' : 'b';

        if (currentTurn !== playerTurn) {
            // Not the player's turn - prevent move
            return false;
        }

        // Wait for pre-analysis (evalP0) to be available before allowing moves
        // This ensures we can properly track move history with evaluations
        if (!evalP0) {
            console.log("Waiting for position analysis before move...");
            return false;
        }

        const move = {
            from: sourceSquare,
            to: targetSquare,
            promotion: "q",
        };

        // Capture FEN BEFORE player's move (P0)
        const fenP0 = gameRef.current.fen();

        // 1. User Move (P0 -> P1)
        const moveResult = makeAMove(move);

        if (!moveResult) return false;

        setUserMove(moveResult.result);

        // Reset Computer State
        setComputerMove(null);
        setEvalP2(null);
        setOpeningData([]);

        setIsAnalyzing(true);
        const { newFen: fenP1 } = moveResult;

        // 2. Bot Move (P1 -> P2)
        stockfish.evaluate(fenP1, stockfishDepth).then(p1Eval => {
            // Store partial history data if evalP0 is available
            const partialHistoryItem = evalP0 ? {
                moveNumber: gameRef.current.moveNumber(),
                playerMove: moveResult.result.san,
                playerColor: playerColor,
                fenBeforePlayerMove: fenP0,
                evalBeforePlayerMove: evalP0,
                fenAfterPlayerMove: fenP1,
                evalAfterPlayerMove: p1Eval,
            } : null;

            // Computer should ALWAYS move, even if evalP0 is missing
            setTimeout(() => {
                const computerMoveData = {
                    from: p1Eval.bestMove.substring(0, 2),
                    to: p1Eval.bestMove.substring(2, 4),
                    promotion: p1Eval.bestMove.length > 4 ? p1Eval.bestMove.substring(4, 5) : "q"
                };

                const compResult = makeAMove(computerMoveData);
                if (compResult) {
                    setComputerMove(compResult.result);
                    const { newFen: fenP2 } = compResult;

                    // 3. Post-Eval (P2)
                    stockfish.evaluate(fenP2, stockfishDepth).then(p2Eval => {
                        setEvalP2(p2Eval);

                        // 4. Opening Lookup - Get multiple possible openings
                        const currentPgn = gameRef.current.pgn();
                        const moveSequence = extractMoveSequenceFromPGN(currentPgn);
                        const possibleOpenings = lookupPossibleOpenings(moveSequence, 5);
                        setOpeningData(possibleOpenings);

                        // 5. Complete the history item with computer's move data (only if we have evalP0)
                        if (partialHistoryItem && evalP0) {
                            const isWhite = playerColor === 'white';
                            const evalBefore = isWhite ? evalP0.score : -evalP0.score;
                            const evalAfterPlayerMove = isWhite ? -p1Eval.score : p1Eval.score;
                            const cpLoss = evalBefore - evalAfterPlayerMove;
                            const bestMoveSan = uciToSan(fenP0, evalP0.bestMove);
                            const missedTactics = detectMissedTactics({
                                fen: fenP0,
                                playerColor,
                                playerMoveSan: moveResult.result.san,
                                bestMoveUci: evalP0.bestMove,
                                cpLoss,
                            });

                            // Store the latest tactics for the Tutor component
                            setLatestMissedTactics(missedTactics);

                            const completeHistoryItem: MoveHistoryItem = {
                                ...partialHistoryItem,
                                computerMove: compResult.result.san,
                                fenAfterComputerMove: fenP2,
                                evalAfterComputerMove: p2Eval,
                                opening: possibleOpenings.length > 0 ? possibleOpenings[0].name : undefined,
                                // Legacy fields for backward compatibility
                                move: moveResult.result.san,
                                evalBefore: evalP0.score,
                                evalAfter: p1Eval.score,
                                bestMove: evalP0.bestMove,
                                bestMoveSan,
                                cpLoss,
                                missedTactics,
                            };
                            setMoveHistory(prev => [...prev, completeHistoryItem]);
                        } else {
                            console.warn("Skipping move history - evalP0 was not available when player moved");
                        }

                        setIsAnalyzing(false);
                    }).catch(err => {
                        console.error("P2 analysis failed:", err);
                        setIsAnalyzing(false);
                    });
                } else {
                    setIsAnalyzing(false);
                }
            }, 500);
        }).catch(err => {
            console.error("Bot move analysis failed:", err);
            setIsAnalyzing(false);
        });

        return true;
    }

    // Check if computer needs to move (safety net for race conditions)
    const checkAndMakeComputerMove = useCallback(() => {
        if (!stockfish || gameOverState || isAnalyzing) return;

        const currentTurn = gameRef.current.turn();
        const computerTurn = playerColor === 'white' ? 'b' : 'w';

        // If it's the computer's turn and we're not already analyzing, make a move
        if (currentTurn === computerTurn) {
            console.log("Safety check: Computer's turn detected, making move...");
            setIsAnalyzing(true);

            const currentFen = gameRef.current.fen();
            stockfish.evaluate(currentFen, stockfishDepth).then(evalResult => {
                const computerMoveData = {
                    from: evalResult.bestMove.substring(0, 2),
                    to: evalResult.bestMove.substring(2, 4),
                    promotion: evalResult.bestMove.length > 4 ? evalResult.bestMove.substring(4, 5) : "q"
                };

                const compResult = makeAMove(computerMoveData);
                if (compResult) {
                    setComputerMove(compResult.result);
                    const { newFen } = compResult;

                    // Evaluate the position after computer's move
                    stockfish.evaluate(newFen, stockfishDepth).then(p2Eval => {
                        setEvalP2(p2Eval);
                        const currentPgn = gameRef.current.pgn();
                        const moveSequence = extractMoveSequenceFromPGN(currentPgn);
                        const possibleOpenings = lookupPossibleOpenings(moveSequence, 5);
                        setOpeningData(possibleOpenings);
                        setIsAnalyzing(false);
                    }).catch(err => {
                        console.error("Post-computer-move analysis failed:", err);
                        setIsAnalyzing(false);
                    });
                } else {
                    setIsAnalyzing(false);
                }
            }).catch(err => {
                console.error("Computer move evaluation failed:", err);
                setIsAnalyzing(false);
            });
        }
    }, [stockfish, gameOverState, isAnalyzing, playerColor, stockfishDepth, makeAMove]);

    const handleNewGame = () => {
        // Reset game to initial props or just reload?
        // For now, let's just reset the board
        const newGame = new Chess();
        gameRef.current = newGame;
        setFen(newGame.fen());
        setGameOverState(null);
        setMoveHistory([]);
        setUserMove(null);
        setComputerMove(null);
        setEvalP0(null);
        setEvalP2(null);
        setOpeningData([]);
        setResignationContext(null);
        updateCapturedPieces();
    };

    const handleResign = useCallback(async () => {
        if (gameOverState) return;

        // Show confirmation dialog
        const confirmed = window.confirm(t.game.resignConfirm);
        if (!confirmed) return;

        setIsAnalyzing(false);

        const currentFen = gameRef.current.fen();
        let evaluation: StockfishEvaluation | null = null;

        if (stockfish) {
            try {
                evaluation = await stockfish.evaluate(currentFen, stockfishDepth);
            } catch (error) {
                console.error("Failed to evaluate resignation position", error);
            }
        }

        const result = t.game.resignation;
        const winner = playerColor === 'white' ? 'Black' : 'White' as const;

        setGameOverState({
            result,
            winner,
        });

        setResignationContext({
            trigger: Date.now(),
            fen: currentFen,
            evaluation,
            history: moveHistory,
            result,
            winner,
        });
    }, [gameOverState, moveHistory, playerColor, stockfish, stockfishDepth, t.game.resignConfirm, t.game.resignation]);

    const handleDownloadPGN = () => {
        const pgn = gameRef.current.pgn();
        const blob = new Blob([pgn], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `chess-game-${Date.now()}.pgn`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        setShowDownloadModal(false);
    };

    const handleDownloadFEN = () => {
        const fen = gameRef.current.fen();
        const blob = new Blob([fen], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `chess-position-${Date.now()}.fen`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        setShowDownloadModal(false);
    };

    // Determine material advantage
    // If Black lost more value, White has advantage
    const whiteAdvantage = materialScore.black - materialScore.white;
    const blackAdvantage = materialScore.white - materialScore.black;

    const [showStrengthSlider, setShowStrengthSlider] = useState(false);

    return (
        <>
            <Header language={language} />
            <div className="flex-grow grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8 w-full max-w-6xl mx-auto p-4">


                {/* 1. Header (Col 1-3) */}
                <div className="md:col-span-3 flex justify-between items-center">
                    <button
                        onClick={onBack}
                        className="p-2 md:px-4 md:py-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 text-sm font-medium transition-colors"
                        aria-label={t.game.backToMenu}
                    >
                        <span className="hidden md:inline">{t.game.backToMenu}</span>
                        <ArrowLeft className="md:hidden" size={20} />
                    </button>
                    <div className="text-sm text-gray-500 hidden md:block">
                        {t.game.playingAs} {playerColor === 'white' ? t.game.white : t.game.black} {t.game.vs} {selectedPersonality?.name}
                    </div>
                </div>

                {/* 2. Board Area (Col 1-2) */}
                <div className="md:col-span-2 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex flex-col md:flex-row gap-4 relative">
                    {/* Desktop Eval Bar (Vertical) */}
                    <div className="hidden md:block h-[560px]">
                        <EvaluationBar
                            score={isAnalyzing ? null : evalP0?.score}
                            mate={isAnalyzing ? null : evalP0?.mate}
                            isPlayerWhite={playerColor === 'white'}
                            orientation="vertical"
                        />
                    </div>

                    <div className="flex-1 flex flex-col justify-center">
                        {/* Opponent's Captured Pieces (Top) */}
                        <div className="mb-2 h-8">
                            <CapturedPieces
                                captured={playerColor === 'white' ? capturedWhitePieces : capturedBlackPieces}
                                color={playerColor === 'white' ? 'w' : 'b'}
                                score={playerColor === 'white' ? (blackAdvantage > 0 ? blackAdvantage : null) : (whiteAdvantage > 0 ? whiteAdvantage : null)}
                            />
                        </div>

                        <div className="bg-[#779954] p-[2px] rounded-sm">
                            <Chessboard
                                options={{
                                    position: fen,
                                    onPieceDrop: ({ sourceSquare, targetSquare }) => onDrop({ sourceSquare, targetSquare }),
                                    darkSquareStyle: { backgroundColor: '#779954' },
                                    lightSquareStyle: { backgroundColor: '#e9edcc' },
                                    animationDurationInMs: 200,
                                    boardOrientation: playerColor
                                }}
                            />
                        </div>

                        {/* Player's Captured Pieces (Bottom) */}
                        <div className="mt-2 h-8">
                            <CapturedPieces
                                captured={playerColor === 'white' ? capturedBlackPieces : capturedWhitePieces}
                                color={playerColor === 'white' ? 'b' : 'w'}
                                score={playerColor === 'white' ? (whiteAdvantage > 0 ? whiteAdvantage : null) : (blackAdvantage > 0 ? blackAdvantage : null)}
                            />
                        </div>

                        {/* Board Footer: Controls */}
                        <div className="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                            <div className="relative">
                                <button
                                    onClick={() => setShowStrengthSlider(!showStrengthSlider)}
                                    className="hover:text-gray-700 dark:hover:text-gray-200 underline decoration-dotted underline-offset-2"
                                >
                                    Stockfish Level: {stockfishDepth}
                                </button>
                                {showStrengthSlider && (
                                    <div className="absolute bottom-full left-0 mb-2 w-48 bg-white dark:bg-gray-700 p-3 rounded shadow-xl border border-gray-200 dark:border-gray-600 z-10">
                                        <label className="block text-xs font-bold mb-1 text-gray-700 dark:text-gray-200">
                                            Strength (Depth: {stockfishDepth})
                                        </label>
                                        <input
                                            type="range"
                                            min="1"
                                            max="20"
                                            value={stockfishDepth}
                                            onChange={(e) => setStockfishDepth(parseInt(e.target.value))}
                                            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600"
                                        />
                                    </div>
                                )}
                            </div>

                            <div className="flex items-center gap-3">
                                <button
                                    onClick={() => {
                                        const game = gameRef.current;
                                        game.undo();
                                        game.undo();
                                        setFen(game.fen());
                                        setUserMove(null);
                                        setComputerMove(null);
                                        setEvalP0(null);
                                        setEvalP2(null);
                                        setOpeningData([]);
                                        updateCapturedPieces();
                                    }}
                                    className="flex items-center gap-1 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                                    disabled={!!gameOverState}
                                >
                                    <ArrowLeft size={12} /> {t.game.undoMove}
                                </button>

                                <button
                                    onClick={handleResign}
                                    className="flex items-center gap-1 text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors"
                                    disabled={!!gameOverState}
                                >
                                    <Flag size={12} /> {t.game.resign}
                                </button>
                            </div>
                        </div>
                    </div>

                    {/* Mobile Eval Bar (Horizontal) */}
                    <div className="md:hidden w-full">
                        <EvaluationBar
                            score={isAnalyzing ? null : evalP0?.score}
                            mate={isAnalyzing ? null : evalP0?.mate}
                            isPlayerWhite={playerColor === 'white'}
                            orientation="horizontal"
                        />
                    </div>
                </div>

                {/* 3. Tutor (Col 3) - Side by side with Board on Desktop */}
                <div className="md:col-span-1 h-[400px] md:h-auto">
                    {/* Note: We rely on Tutor's internal height styling or pass a class.
                         The Tutor component has 'h-[400px] md:h-full'.
                         Since it's in a grid cell that might stretch, 'h-full' should work if the row has height.
                         However, the Board Area defines the row height.
                     */}
                    <Tutor
                        game={gameRef.current}
                        currentFen={fen}
                        userMove={userMove}
                        computerMove={computerMove}
                        stockfish={stockfish}
                        evalP0={evalP0}
                        evalP2={evalP2}
                        openingData={openingData}
                        missedTactics={latestMissedTactics}
                        onAnalysisComplete={() => { }}
                        apiKey={apiKey}
                        personality={selectedPersonality}
                        language={language}
                        playerColor={playerColor}
                        onCheckComputerMove={checkAndMakeComputerMove}
                        resignationContext={resignationContext}
                    />
                </div>

                {/* 4. History (Col 1-3) - Full width at bottom */}
                <div className="md:col-span-3 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex flex-col">
                    <div className="flex items-center justify-between mb-2">
                        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{t.game.gameHistory}</h3>
                        <div className="flex gap-2">
                            <button
                                onClick={() => setShowDownloadModal(true)}
                                className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded hover:bg-green-200 dark:bg-green-900 dark:text-green-200 flex items-center gap-1"
                            >
                                <Download size={12} /> Download
                            </button>
                            <button
                                onClick={() => setShowAnalysisModal(true)}
                                className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-200 flex items-center gap-1"
                            >
                                <Brain size={12} /> {t.game.analyze}
                            </button>
                        </div>
                    </div>
                    <div className="overflow-y-auto border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900 p-2 max-h-40">
                        <table className="w-full text-sm text-left">
                            <thead>
                                <tr className="text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
                                    <th className="py-1 px-2 w-12">#</th>
                                    <th className="py-1 px-2">{t.game.white}</th>
                                    <th className="py-1 px-2">{t.game.black}</th>
                                    <th className="py-1 px-2 text-center w-20">Eval Δ</th>
                                </tr>
                            </thead>
                            <tbody>
                                {moveHistory.length === 0 ? (
                                    <tr>
                                        <td colSpan={4} className="py-4 text-center text-gray-500 italic">
                                            {t.game.noMovesYet}
                                        </td>
                                    </tr>
                                ) : (
                                    moveHistory.map((item, idx) => {
                                        // Calculate evaluation change for player's move
                                        const evalBefore = item.evalBeforePlayerMove.score ?? 0;
                                        const evalAfter = item.evalAfterPlayerMove.score ?? 0;
                                        const evalChange = evalAfter - evalBefore;

                                        // Determine color based on evaluation change
                                        // Positive change = good for white, negative = good for black
                                        let evalColor = 'text-gray-500';
                                        if (Math.abs(evalChange) > 50) {
                                            if (item.playerColor === 'white') {
                                                evalColor = evalChange > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400';
                                            } else {
                                                evalColor = evalChange < 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400';
                                            }
                                        }

                                        const evalDisplay = evalChange > 0 ? `+${(evalChange / 100).toFixed(1)}` : (evalChange / 100).toFixed(1);

                                        return (
                                            <tr key={idx} className="border-b border-gray-100 dark:border-gray-800 last:border-0">
                                                <td className="py-1 px-2 text-gray-500 dark:text-gray-500">{item.moveNumber}.</td>
                                                <td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">
                                                    {item.playerColor === 'white' ? item.playerMove : item.computerMove}
                                                </td>
                                                <td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">
                                                    {item.playerColor === 'black' ? item.playerMove : item.computerMove}
                                                </td>
                                                <td className={`py-1 px-2 text-center font-mono text-xs ${evalColor}`}>
                                                    {evalDisplay}
                                                </td>
                                            </tr>
                                        );
                                    })
                                )}
                            </tbody>
                        </table>
                        <div ref={messagesEndRef} />
                    </div>
                </div>
            </div>

            {showAnalysisModal && (
                <GameAnalysisModal
                    fen={fen}
                    stockfish={stockfish}
                    apiKey={apiKey}
                    language={language}
                    onClose={() => setShowAnalysisModal(false)}
                />
            )}

            {gameOverState && (
                <GameOverModal
                    result={gameOverState.result}
                    winner={gameOverState.winner}
                    history={moveHistory}
                    apiKey={apiKey}
                    language={language}
                    onClose={() => setGameOverState(null)}
                    onNewGame={handleNewGame}
                    onAnalyze={() => {
                        setGameOverState(null);
                        setShowAnalysisModal(true);
                    }}
                />
            )}

            {showDownloadModal && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
                    <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full p-6">
                        <div className="flex items-center justify-between mb-4">
                            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
                                {t.analysis.downloadTitle}
                            </h2>
                            <button
                                onClick={() => setShowDownloadModal(false)}
                                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                            >
                                ✕
                            </button>
                        </div>
                        <div className="space-y-3">
                            <button
                                onClick={handleDownloadPGN}
                                className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-md transition-all flex items-center justify-center gap-2"
                            >
                                <Download size={18} />
                                {t.analysis.downloadPGN}
                            </button>
                            <button
                                onClick={handleDownloadFEN}
                                className="w-full py-3 px-4 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium shadow-md transition-all flex items-center justify-center gap-2"
                            >
                                <Download size={18} />
                                {t.analysis.downloadFEN}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}