"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, OpeningMetadata } from "@/lib/openings";
import { GameAnalysisModal } from "./GameAnalysisModal";
import { GameOverModal, MoveHistoryItem } from "./GameOverModal";
import { Brain, ArrowLeft } from "lucide-react";
import { CapturedPieces } from "./CapturedPieces";

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

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

export default function ChessGame({ initialFen, initialPgn, initialPersonality, initialColor, 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 | 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(15);

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

    // Game State
    const [playerColor, setPlayerColor] = useState<'white' | 'black'>(initialColor);
    const [showAnalysisModal, setShowAnalysisModal] = 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 messagesEndRef = useRef<HTMLDivElement>(null);

    // 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));
        }
    };

    // Scroll to bottom of move history
    useEffect(() => {
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }, [moveHistory]);

    // 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();
    }, []);

    // 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 = {
            fen,
            language,
            selectedPersonality,
            apiKey,
            playerColor, // Save player color too
            pgn: gameRef.current.pgn()
        };
        localStorage.setItem("chess_tutor_save", JSON.stringify(saveData));
    }, [fen, language, selectedPersonality, apiKey, playerColor]);

    // 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(() => {
        if (stockfish && gameRef.current.turn() === 'w' && !isAnalyzing && !gameOverState) {
            stockfish.evaluate(gameRef.current.fen(), stockfishDepth).then(evalResult => {
                setEvalP0(evalResult);
            }).catch(err => console.error("Pre-analysis failed:", err));
        }
    }, [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;

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

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

        if (!moveResult) return false;

        setUserMove(moveResult.result);

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

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

        // 2. Bot Move (P1 -> P2)
        stockfish.evaluate(fenP1, stockfishDepth).then(p1Eval => {
            if (evalP0) {
                const evalAfter = -p1Eval.score;
                const historyItem: MoveHistoryItem = {
                    moveNumber: gameRef.current.moveNumber(),
                    move: moveResult.result.san,
                    evalBefore: evalP0.score,
                    evalAfter: evalAfter,
                    bestMove: evalP0.bestMove
                };
                setMoveHistory(prev => [...prev, historyItem]);
            }

            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
                        const opening = lookupOpening(fenP2);
                        setOpeningData(opening);

                        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;
    }

    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(null);
        updateCapturedPieces();
    };

    // 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>

                            <button
                                onClick={() => {
                                    const game = gameRef.current;
                                    game.undo();
                                    game.undo();
                                    setFen(game.fen());
                                    setUserMove(null);
                                    setComputerMove(null);
                                    setEvalP0(null);
                                    setEvalP2(null);
                                    setOpeningData(null);
                                    updateCapturedPieces();
                                }}
                                className="flex items-center gap-1 hover:text-red-600 dark:hover:text-red-400 transition-colors"
                            >
                                <ArrowLeft size={12} /> Undo
                            </button>
                        </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
                        currentFen={fen}
                        userMove={userMove}
                        computerMove={computerMove}
                        stockfish={stockfish}
                        evalP0={evalP0}
                        evalP2={evalP2}
                        openingData={openingData}
                        onAnalysisComplete={() => { }}
                        apiKey={apiKey}
                        personality={selectedPersonality}
                        language={language}
                        playerColor={playerColor}
                    />
                </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">Game History</h3>
                        <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} /> Analyze
                        </button>
                    </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">White</th>
                                    <th className="py-1 px-2">Black</th>
                                </tr>
                            </thead>
                            <tbody>
                                {(() => {
                                    const history = gameRef.current.history();
                                    const rows = [];
                                    for (let i = 0; i < history.length; i += 2) {
                                        rows.push(
                                            <tr key={i} 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">{Math.floor(i / 2) + 1}.</td>
                                                <td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i]}</td>
                                                <td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i + 1] || ""}</td>
                                            </tr>
                                        );
                                    }
                                    if (rows.length === 0) {
                                        return (
                                            <tr>
                                                <td colSpan={3} className="py-4 text-center text-gray-500 italic">
                                                    No moves yet.
                                                </td>
                                            </tr>
                                        );
                                    }
                                    return rows;
                                })()}
                            </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}
                />
            )}
        </>
    );
}