import React, { useState, useEffect, useRef } from 'react';
import { Chess } from 'chess.js';
import { PenTool, Trash2, Check, RefreshCw, X, AlertCircle, Loader2, Copy, Type, List, Bot, Undo2, Lightbulb, Settings, GraduationCap } from 'lucide-react';

// --- Assets & Constants ---
const PIECE_URLS = {
  'w-p': 'https://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg',
  'w-n': 'https://upload.wikimedia.org/wikipedia/commons/7/70/Chess_nlt45.svg',
  'w-b': 'https://upload.wikimedia.org/wikipedia/commons/b/b1/Chess_blt45.svg',
  'w-r': 'https://upload.wikimedia.org/wikipedia/commons/7/72/Chess_rlt45.svg',
  'w-q': 'https://upload.wikimedia.org/wikipedia/commons/1/15/Chess_qlt45.svg',
  'w-k': 'https://upload.wikimedia.org/wikipedia/commons/4/42/Chess_klt45.svg',
  'b-p': 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg',
  'b-n': 'https://upload.wikimedia.org/wikipedia/commons/e/ef/Chess_ndt45.svg',
  'b-b': 'https://upload.wikimedia.org/wikipedia/commons/9/98/Chess_bdt45.svg',
  'b-r': 'https://upload.wikimedia.org/wikipedia/commons/f/ff/Chess_rdt45.svg',
  'b-q': 'https://upload.wikimedia.org/wikipedia/commons/4/47/Chess_qdt45.svg',
  'b-k': 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Chess_kdt45.svg',
};

const FILES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
const RANKS = ['8', '7', '6', '5', '4', '3', '2', '1'];

const ENGINE_FENS = {
  1: '4k3/8/8/8/8/8/PPPPPPPP/RNBQKBNR w KQ - 0 1',
  2: '8/8/8/8/4k3/8/8/R3K2R w KQ - 0 1',
  3: '8/8/8/8/4k3/8/8/Q3K3 w - - 0 1'
};

// --- Audio Assets & Sound Engine ---
const AUDIO_ASSETS = {
  move: new Audio('https://images.chesscomfiles.com/chess-themes/sounds/_MP3_/default/move-self.mp3'),
  capture: new Audio('https://images.chesscomfiles.com/chess-themes/sounds/_MP3_/default/capture.mp3'),
  check: new Audio('https://images.chesscomfiles.com/chess-themes/sounds/_MP3_/default/move-check.mp3'),
  castle: new Audio('https://images.chesscomfiles.com/chess-themes/sounds/_MP3_/default/castle.mp3'),
  start: new Audio('https://images.chesscomfiles.com/chess-themes/sounds/_MP3_/default/game-start.mp3'),
  end: new Audio('https://images.chesscomfiles.com/chess-themes/sounds/_MP3_/default/game-end.mp3'),
};

const playSound = (moveObj, isGameOver = false) => {
  try {
    let soundType = 'move';
    if (isGameOver) soundType = 'end';
    else if (!moveObj) soundType = 'start';
    else if (moveObj.san.includes('+') || moveObj.san.includes('#')) soundType = 'check';
    else if (moveObj?.flags?.includes('c') || moveObj?.flags?.includes('e')) soundType = 'capture';
    else if (moveObj?.flags?.includes('k') || moveObj?.flags?.includes('q')) soundType = 'castle';
    
    const sound = AUDIO_ASSETS[soundType];
    if (sound) {
      const clone = sound.cloneNode(true);
      clone.volume = 0.6;
      clone.play().catch(() => {});
    }
  } catch (e) {
    console.error("Audio playback error:", e);
  }
};

export default function App() {
  const [engineLevel, setEngineLevel] = useState(0); // 0: Off, 1: Level 1, 2: Level 2, 3: Level 3
  const [game, setGame] = useState(new Chess());
  const [fen, setFen] = useState(game.fen());
  const [history, setHistory] = useState([]);
  
  // UI & Layout State
  const [isLearnMode, setIsLearnMode] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [showManualControls, setShowManualControls] = useState(false);
  const [showHistory, setShowHistory] = useState(false);
  const [processingType, setProcessingType] = useState(null);
  const [confirmModal, setConfirmModal] = useState({ isOpen: false, text: '', error: '' });
  const [autoSubmit, setAutoSubmit] = useState(true);
  const [inlineError, setInlineError] = useState('');
  const [copied, setCopied] = useState(false);
  const [showAmbiguityHelp, setShowAmbiguityHelp] = useState(false);
  const [hintMove, setHintMove] = useState(null);
  
  // Learn Mode specific state
  const [selectedSquare, setSelectedSquare] = useState(null);
  const [taughtMove, setTaughtMove] = useState(null); // { san: 'Nf3', color: 'w', trigger: timestamp }

  // Input Modes
  const [inputMode, setInputMode] = useState('draw'); // 'draw' | 'text'
  const [textInput, setTextInput] = useState('');

  // Canvas & Logic Refs
  const canvasRef = useRef(null);
  const ctxRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const drawTimeoutRef = useRef(null);
  const hasDrawnRef = useRef(false);
  const gameRef = useRef(game);
  const drawSequenceRef = useRef(0);

  const apiKey = "";

  useEffect(() => {
    gameRef.current = game;
  }, [game]);

  // Handle global "N" hotkey for toggling modes
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.key.toLowerCase() === 'n') {
        setInputMode(prev => prev === 'draw' ? 'text' : 'draw');
        setInlineError('');
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  // Robust Canvas Initialization & Resizing
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return; // Canvas always renders now, so it shouldn't be null

    const initCanvas = () => {
      const parent = canvas.parentElement;
      if (!parent) return;
      
      const rect = parent.getBoundingClientRect();
      if (rect.width > 0 && rect.height > 0) {
        canvas.width = rect.width * 2;
        canvas.height = rect.height * 2;
        
        const ctx = canvas.getContext('2d');
        ctx.scale(2, 2);
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.strokeStyle = '#1e293b';
        ctx.lineWidth = 8;
        ctxRef.current = ctx;

        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, rect.width, rect.height);
      }
    };

    const initialTimer = setTimeout(initCanvas, 50);
    const observer = new ResizeObserver(initCanvas);
    if (canvas.parentElement) observer.observe(canvas.parentElement);

    return () => {
      clearTimeout(initialTimer);
      observer.disconnect();
    };
  }, [inputMode]);

  // Auto-dismiss the learning animation
  useEffect(() => {
    let timer;
    if (taughtMove) {
      timer = setTimeout(() => {
        setTaughtMove(null);
      }, 3500); // Overlay stays for 3.5 seconds
    }
    return () => clearTimeout(timer);
  }, [taughtMove]);

  const isGameOver = typeof game.isGameOver === 'function' ? game.isGameOver() : game.game_over();
  const isCheckmate = typeof game.isCheckmate === 'function' ? game.isCheckmate() : game.in_checkmate();
  const isEngineThinking = engineLevel > 0 && game.turn() === 'b' && !isGameOver;

  // --- Engine Logic ---
  useEffect(() => {
    if (isEngineThinking) {
      const timer = setTimeout(() => {
        const moves = gameRef.current.moves({ verbose: true });
        if (moves.length > 0) {
          let selectedMove;
          
          if (engineLevel === 3) {
            let bestScore = -Infinity;
            let bestMoves = [];
            
            moves.forEach(m => {
              let score = 0;
              const toFileIdx = m.to.charCodeAt(0) - 'a'.charCodeAt(0);
              const toRankIdx = parseInt(m.to[1]);
              const fromRankIdx = parseInt(m.from[1]);
              
              const fileDist = Math.abs(toFileIdx - 3.5);
              const rankDist = Math.abs(toRankIdx - 4.5);
              score -= (fileDist + rankDist);
              
              if (toRankIdx === fromRankIdx) score += 5;
              else if (toRankIdx > fromRankIdx) score -= 10;
              
              if (toRankIdx === 8) score -= 50;
              
              if (score > bestScore) {
                bestScore = score;
                bestMoves = [m];
              } else if (score === bestScore) {
                bestMoves.push(m);
              }
            });
            selectedMove = bestMoves[Math.floor(Math.random() * bestMoves.length)];
            
          } else if (engineLevel === 2) {
            const sidewaysMoves = moves.filter(m => m.from[1] === m.to[1]);
            if (sidewaysMoves.length > 0) {
              selectedMove = sidewaysMoves[Math.floor(Math.random() * sidewaysMoves.length)];
            } else {
              selectedMove = moves[Math.floor(Math.random() * moves.length)];
            }
          } else {
            selectedMove = moves[Math.floor(Math.random() * moves.length)];
          }

          const tempGame = new Chess(ENGINE_FENS[engineLevel]);
          const pastMoves = gameRef.current.history();
          pastMoves.forEach(m => tempGame.move(m));
          
          const moveObj = tempGame.move(selectedMove.san);
          
          setGame(tempGame);
          setFen(tempGame.fen());
          setHistory(tempGame.history({ verbose: true }));
          
          if (isLearnMode) {
            setTaughtMove({ san: moveObj.san, color: moveObj.color, trigger: Date.now() });
          }

          const isNowGameOver = typeof tempGame.isGameOver === 'function' ? tempGame.isGameOver() : tempGame.game_over();
          playSound(moveObj, isNowGameOver);
        }
      }, 600);
      return () => clearTimeout(timer);
    }
  }, [fen, engineLevel, isEngineThinking, isLearnMode]);

  // --- Play on Board (Learn Mode) Logic ---
  const handleBoardMove = (fromSq, toSq) => {
    if (!isLearnMode || isEngineThinking || isGameOver) return false;
    
    const moves = game.moves({ verbose: true });
    const move = moves.find(m => m.from === fromSq && m.to === toSq);

    if (move) {
      const tempGame = engineLevel > 0 ? new Chess(ENGINE_FENS[engineLevel]) : new Chess();
      const pastMoves = game.history();
      pastMoves.forEach(m => tempGame.move(m));

      // Auto promote to Queen in learn mode
      const moveObj = tempGame.move({ from: fromSq, to: toSq, promotion: 'q' });

      setGame(tempGame);
      setFen(tempGame.fen());
      setHistory(tempGame.history({ verbose: true }));
      setSelectedSquare(null);
      setHintMove(null);

      // Trigger animation
      setTaughtMove({ san: moveObj.san, color: moveObj.color, trigger: Date.now() });

      const isNowGameOver = typeof tempGame.isGameOver === 'function' ? tempGame.isGameOver() : tempGame.game_over();
      playSound(moveObj, isNowGameOver);
      return true;
    }
    return false;
  };

  const handleSquareClick = (squareId) => {
    if (!isLearnMode || isEngineThinking || isGameOver) return;
    setTaughtMove(null); // Clear active animation if they are engaging again

    if (selectedSquare) {
      if (handleBoardMove(selectedSquare, squareId)) {
        return; // Move successful
      }
    }

    // Select the piece if they click it
    const piece = game.get(squareId);
    if (piece && piece.color === game.turn()) {
      setSelectedSquare(squareId);
    } else {
      setSelectedSquare(null);
    }
  };

  // --- Notation Input Logic ---
  const attemptMove = (rawInput) => {
    if (!rawInput) return false;
    let input = rawInput.trim();
    
    if (/^[1-8]{4}[qrbn]?$/i.test(input)) {
      const fromFile = String.fromCharCode('a'.charCodeAt(0) + parseInt(input[0]) - 1);
      const fromRank = input[1];
      const toFile = String.fromCharCode('a'.charCodeAt(0) + parseInt(input[2]) - 1);
      const toRank = input[3];
      const promo = input[4] ? input[4].toLowerCase() : '';
      input = `${fromFile}${fromRank}${toFile}${toRank}${promo}`;
    }
    
    try {
      const tempGame = engineLevel > 0 ? new Chess(ENGINE_FENS[engineLevel]) : new Chess();
      const pastMoves = gameRef.current.history();
      pastMoves.forEach(m => tempGame.move(m));

      let moveObj = null;

      if (/^[a-h][1-8][a-h][1-8][qrbn]?$/i.test(input)) {
        const from = input.substring(0, 2).toLowerCase();
        const to = input.substring(2, 4).toLowerCase();
        const promotion = input[4] ? input[4].toLowerCase() : 'q';
        try { moveObj = tempGame.move({ from, to, promotion }); } catch(e) { /* ignore */ }
      }

      if (!moveObj) {
        try { moveObj = tempGame.move(input); } catch (e) { /* ignore */ }
      }
      if (!moveObj && typeof tempGame.move === 'function') {
        try { moveObj = tempGame.move(input, { sloppy: true }); } catch(e) { /* ignore */ }
      }
      if (!moveObj && typeof tempGame.move === 'function') {
        try { moveObj = tempGame.move({ san: input }); } catch(e) { /* ignore */ }
      }

      if (moveObj) {
        setGame(tempGame);
        setFen(tempGame.fen());
        setHistory(tempGame.history({ verbose: true }));
        setHintMove(null);
        
        if (isLearnMode) {
          setTaughtMove({ san: moveObj.san, color: moveObj.color, trigger: Date.now() });
        }
        
        const isNowGameOver = typeof tempGame.isGameOver === 'function' ? tempGame.isGameOver() : tempGame.game_over();
        playSound(moveObj, isNowGameOver);
        
        return true;
      }
    } catch (e) {
      console.error("Attempt move failed deeply:", e);
    }
    return false;
  };

  const handleReset = () => {
    const newGame = engineLevel > 0 ? new Chess(ENGINE_FENS[engineLevel]) : new Chess();
    setGame(newGame);
    setFen(newGame.fen());
    setHistory([]);
    clearCanvas();
    setTextInput('');
    setInlineError('');
    setHintMove(null);
    setSelectedSquare(null);
    setTaughtMove(null);
    playSound(null);
  };

  const handleModeToggle = () => {
    const newLevel = (engineLevel + 1) % 4;
    setEngineLevel(newLevel);
    const newGame = newLevel > 0 ? new Chess(ENGINE_FENS[newLevel]) : new Chess();
    setGame(newGame);
    setFen(newGame.fen());
    setHistory([]);
    clearCanvas();
    setTextInput('');
    setInlineError('');
    setHintMove(null);
    setSelectedSquare(null);
    setTaughtMove(null);
    playSound(null);
  };

  const handleLearnModeToggle = () => {
    const newLearnState = !isLearnMode;
    setIsLearnMode(newLearnState);
    setSelectedSquare(null);
    setTaughtMove(null);
    if (!newLearnState) {
      setTimeout(() => clearCanvas(), 100);
    }
  };

  const handleUndo = () => {
    const pastMoves = gameRef.current.history();
    if (pastMoves.length === 0 || isEngineThinking) return;

    const tempGame = engineLevel > 0 ? new Chess(ENGINE_FENS[engineLevel]) : new Chess();
    
    let movesToKeep = pastMoves.length - 1;
    if (engineLevel > 0 && gameRef.current.turn() === 'w' && pastMoves.length >= 2) {
      movesToKeep = pastMoves.length - 2;
    }

    for (let i = 0; i < movesToKeep; i++) {
      tempGame.move(pastMoves[i]);
    }

    setGame(tempGame);
    setFen(tempGame.fen());
    setHistory(tempGame.history({ verbose: true }));
    clearCanvas();
    setTextInput('');
    setInlineError('');
    setHintMove(null);
    setSelectedSquare(null);
    setTaughtMove(null);
    playSound({ san: '', flags: '' });
  };

  const handleHint = () => {
    if (gameRef.current.turn() !== 'w' || isEngineThinking || isGameOver) return;
    
    const legalMoves = gameRef.current.moves({ verbose: true });
    if (legalMoves.length === 0) return;

    let bestMove = legalMoves[0];
    let bestScore = -Infinity;

    legalMoves.forEach(m => {
      const temp = new Chess(gameRef.current.fen());
      temp.move(m.san);
      
      let score = 0;
      if (typeof temp.isCheckmate === 'function' ? temp.isCheckmate() : temp.in_checkmate()) {
        score += 10000;
      } else if (typeof temp.isDraw === 'function' ? temp.isDraw() : temp.in_draw()) {
        score -= 10000; 
      } else {
        const blackMoves = temp.moves();
        score -= blackMoves.length * 10;
        if (typeof temp.inCheck === 'function' ? temp.inCheck() : temp.in_check()) score += 5;
        if (m.flags.includes('c') || m.flags.includes('e')) score += 20;
        
        const board = temp.board();
        let bkR = 0, bkF = 0;
        board.forEach((row, r) => row.forEach((p, f) => {
          if (p && p.type === 'k' && p.color === 'b') { bkR = r; bkF = f; }
        }));
        const toR = 8 - parseInt(m.to[1]);
        const toF = m.to.charCodeAt(0) - 97;
        score -= (Math.abs(toR - bkR) + Math.abs(toF - bkF)); 
      }

      score += Math.random();

      if (score > bestScore) {
        bestScore = score;
        bestMove = m;
      }
    });

    setHintMove({ from: bestMove.from, to: bestMove.to });
  };

  const handleCopyPgn = () => {
    const pgnStr = gameRef.current.pgn();
    if (!pgnStr) return;
    
    const textArea = document.createElement("textarea");
    textArea.value = pgnStr;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
    
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const getMoveErrorMessage = (input, recognized = false, gameInstance) => {
    if (!input) return "Could not recognize move.";
    const cleanInput = input.trim().replace(/[+#]$/, '');
    
    if (/^[a-h](x[a-h])?[18]$/i.test(cleanInput)) {
      return `Missing promotion! Notate it as ${cleanInput}=Q or ${cleanInput}Q.`;
    }
    
    if (gameInstance) {
      const match = cleanInput.match(/^([KQRBN])?([a-h][1-8]|[a-h]|[1-8])?x?([a-h][1-8])/i);
      if (match) {
        const piece = match[1] ? match[1].toLowerCase() : 'p';
        const dest = match[3].toLowerCase();
        
        const legalMoves = gameInstance.moves({ verbose: true });
        const matchingMoves = legalMoves.filter(m => m.piece === piece && m.to === dest);
        
        if (matchingMoves.length > 1) {
          return `Ambiguous move! Multiple pieces can move to ${dest}.`;
        }
      }
    }

    return recognized ? `Recognized "${input}", but it's invalid.` : `Invalid move: ${input}`;
  };

  const handleTextSubmit = () => {
    if (!textInput.trim() || isEngineThinking) return;
    if (attemptMove(textInput)) {
      setTextInput('');
      setInlineError('');
    } else {
      setInlineError(getMoveErrorMessage(textInput, false, gameRef.current));
    }
  };

  // --- Drawing Logic ---
  const getCoordinates = (e) => {
    const canvas = canvasRef.current;
    const rect = canvas.getBoundingClientRect();
    const clientX = e.touches && e.touches.length > 0 ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches && e.touches.length > 0 ? e.touches[0].clientY : e.clientY;
    return {
      x: clientX - rect.left,
      y: clientY - rect.top
    };
  };

  const startDrawing = (e) => {
    if (e.cancelable) e.preventDefault();
    if (isEngineThinking) return;
    if (drawTimeoutRef.current) clearTimeout(drawTimeoutRef.current);
    
    drawSequenceRef.current += 1;
    setIsDrawing(true);
    hasDrawnRef.current = true;
    setInlineError('');
    setProcessingType(null); 
    setHintMove(null);
    setTaughtMove(null); // Dismiss lesson automatically
    
    const { x, y } = getCoordinates(e);
    ctxRef.current.beginPath();
    ctxRef.current.moveTo(x, y);
  };

  const draw = (e) => {
    if (!isDrawing) return;
    if (e.cancelable) e.preventDefault();
    if (drawTimeoutRef.current) clearTimeout(drawTimeoutRef.current);
    
    const { x, y } = getCoordinates(e);
    ctxRef.current.lineTo(x, y);
    ctxRef.current.stroke();
  };

  const stopDrawing = () => {
    if (!isDrawing) return;

    ctxRef.current.closePath();
    setIsDrawing(false);

    const shouldAutoSubmit = !showManualControls || autoSubmit;

    if (shouldAutoSubmit && hasDrawnRef.current && !isEngineThinking) {
      if (drawTimeoutRef.current) clearTimeout(drawTimeoutRef.current);
      drawTimeoutRef.current = setTimeout(() => {
        processNotation(true);
      }, 800); 
    }
  };

  const clearCanvas = () => {
    const canvas = canvasRef.current;
    const ctx = ctxRef.current;
    if (ctx && canvas) {
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, canvas.width, canvas.height); 
    }
    hasDrawnRef.current = false;
    if (drawTimeoutRef.current) clearTimeout(drawTimeoutRef.current);
    setInlineError('');
    setProcessingType(null);
    drawSequenceRef.current += 1;
    setTaughtMove(null);
  };

  // --- OCR Logic ---
  const fetchGeminiOCR = async (base64Data, retries = 5) => {
    const prompt = "Read the handwritten chess notation in this image. Respond ONLY with the standard algebraic chess notation (e.g., e4, Nf3, O-O, exd5). Do not include any other text, markdown, or punctuation. If you are unsure, provide your best single guess.";
    const payload = {
      contents: [{
        role: "user",
        parts: [
          { text: prompt },
          { inlineData: { mimeType: "image/png", data: base64Data } }
        ]
      }]
    };

    const delays = [1000, 2000, 4000, 8000, 16000];

    for (let i = 0; i < retries; i++) {
      try {
        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        
        const result = await response.json();
        const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
        return text?.trim() || "";
      } catch (error) {
        if (i === retries - 1) throw error;
        await new Promise(res => setTimeout(res, delays[i]));
      }
    }
  };

  const processNotation = async (isAuto = false) => {
    const canvas = canvasRef.current;
    if (!canvas || !hasDrawnRef.current || isEngineThinking) return;

    if (drawTimeoutRef.current) clearTimeout(drawTimeoutRef.current);
    
    const currentSeq = drawSequenceRef.current;
    setProcessingType(isAuto ? 'auto' : 'manual');
    setInlineError('');

    const dataUrl = canvas.toDataURL('image/png');
    const base64Data = dataUrl.split(',')[1]; 

    try {
      const text = await fetchGeminiOCR(base64Data);
      if (currentSeq !== drawSequenceRef.current) return;

      let parsed = text.replace(/```[a-zA-Z]*\n?/g, '').replace(/```/g, '').trim();
      parsed = parsed.split(/\s+/)[0];
      parsed = parsed.replace(/0/g, 'O');
      parsed = parsed.replace(/[^a-zA-Z0-9\+\-\=\#xO]/g, '');
      
      setProcessingType(null);

      if (isAuto) {
        if (parsed && attemptMove(parsed)) {
          setConfirmModal({ isOpen: false, text: '', error: '' });
          clearCanvas();
        } else {
          setInlineError(parsed ? getMoveErrorMessage(parsed, true, gameRef.current) : 'Could not recognize move.');
        }
      } else {
        if (parsed && attemptMove(parsed)) {
           setConfirmModal({ isOpen: false, text: '', error: '' });
           clearCanvas();
        } else {
           setConfirmModal({ isOpen: true, text: parsed, error: parsed ? getMoveErrorMessage(parsed, false, gameRef.current) : 'Could not read text.' });
        }
      }

    } catch (error) {
      if (currentSeq !== drawSequenceRef.current) return;
      console.error("OCR Failed:", error);
      setProcessingType(null);
      
      if (isAuto) {
        setInlineError('Failed to read drawing.');
      } else {
        setConfirmModal({ isOpen: true, text: '', error: 'Could not read text. Please type manually.' });
      }
    }
  };

  const submitMove = (e) => {
    e.preventDefault();
    const moveStr = confirmModal.text.trim();
    
    if (!moveStr) {
      setConfirmModal(prev => ({ ...prev, error: 'Please enter a move.' }));
      return;
    }

    if (attemptMove(moveStr)) {
      setConfirmModal({ isOpen: false, text: '', error: '' });
      clearCanvas();
    } else {
      setConfirmModal(prev => ({ ...prev, error: getMoveErrorMessage(moveStr, false, gameRef.current) }));
    }
  };

  // --- Board Rendering Helper ---
  const getBoardGrid = () => {
    const board = game.board();
    const legalMovesForSelected = selectedSquare ? game.moves({ verbose: true, square: selectedSquare }) : [];
    const legalSquares = legalMovesForSelected.map(m => m.to);

    return RANKS.map((rank, rIdx) => 
      FILES.map((file, fIdx) => {
        const piece = board[rIdx][fIdx];
        const isLight = (rIdx + fIdx) % 2 === 0;
        const id = `${file}${rank}`;
        return {
          id,
          isLight,
          piece,
          isSelected: selectedSquare === id,
          isLegalDest: legalSquares.includes(id)
        };
      })
    ).flat();
  };

  const getMovePairs = () => {
    const pairs = [];
    for (let i = 0; i < history.length; i += 2) {
      pairs.push({
        white: history[i],
        black: history[i + 1] || null
      });
    }
    return pairs;
  };

  return (
    <div className="min-h-screen bg-[#E5E5E7] sm:bg-[#E5E5E7]/50 text-gray-900 font-sans sm:p-4 md:p-6 lg:p-8 flex items-center justify-center selection:bg-blue-200 overflow-hidden">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');
        .font-handwriting {
          font-family: 'Caveat', 'Comic Sans MS', cursive;
        }
        @keyframes revealWrite {
          0% { clip-path: inset(0 100% 0 0); }
          100% { clip-path: inset(0 -20% 0 0); }
        }
        .animate-writing {
          animation: revealWrite 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          display: inline-block;
          white-space: nowrap;
        }
      `}</style>
      
      {/* Mac Window Container */}
      <div className="w-full h-[100dvh] sm:h-[94vh] max-w-[1200px] bg-white sm:rounded-2xl sm:shadow-[0_30px_60px_rgba(0,0,0,0.15)] sm:border sm:border-gray-200 overflow-hidden flex flex-col relative">
        
        {/* Titlebar */}
        <div className="h-12 bg-gradient-to-b from-[#F9F9F9] to-[#EAEAEA] border-b border-[#D1D1D1] flex items-center px-4 relative shrink-0 z-10">
          <div className="flex gap-2 absolute left-4">
            <div className="w-3.5 h-3.5 rounded-full bg-[#FF5F56] border border-[#E0443E]"></div>
            <div className="w-3.5 h-3.5 rounded-full bg-[#FFBD2E] border border-[#DEA123]"></div>
            <div className="w-3.5 h-3.5 rounded-full bg-[#27C93F] border border-[#1AAB29]"></div>
          </div>

          <div className="flex-1 text-center font-bold tracking-widest text-gray-700 select-none text-xs sm:text-sm">
            CHESSPANDA NOTATER
          </div>

          {/* Controls */}
          <div className="absolute right-4 flex items-center gap-3 sm:gap-4">
            <button 
              onClick={handleLearnModeToggle}
              className={`transition-colors flex items-center gap-1.5 ${isLearnMode ? 'text-[#007AFF]' : 'text-gray-500 hover:text-gray-800'}`}
              title="Toggle Learn Mode"
            >
              <GraduationCap className="w-5 h-5" />
            </button>
            <button 
              onClick={() => setShowSettings(true)}
              className="text-gray-500 hover:text-gray-800 transition-colors"
              title="Settings"
            >
              <Settings className="w-5 h-5" />
            </button>
            <button 
              onClick={handleModeToggle}
              className={`transition-colors flex items-center gap-1.5 ${engineLevel > 0 ? 'text-[#007AFF]' : 'text-gray-500 hover:text-gray-800'}`}
              title="Toggle Mini-Game vs Engine"
            >
              <div className="relative flex items-center justify-center">
                <Bot className="w-5 h-5" />
                {engineLevel > 0 && (
                  <span className="absolute -top-1.5 -right-2.5 bg-[#007AFF] text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full leading-none min-w-[16px] text-center border border-white">
                    {engineLevel}
                  </span>
                )}
              </div>
            </button>
            <button 
              onClick={handleReset}
              className="text-gray-500 hover:text-gray-800 transition-colors"
              title="Reset Game"
            >
              <RefreshCw className="w-4 h-4" />
            </button>
            <button 
              onClick={() => setShowHistory(!showHistory)}
              className={`transition-colors ${showHistory ? 'text-[#007AFF]' : 'text-gray-500 hover:text-gray-800'}`}
              title="Toggle Move List"
            >
              <List className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Main Content Area */}
        <div className="flex-1 relative flex bg-[#F5F5F7] overflow-hidden">
          
          {/* Center Column: Board & Drawing Pad */}
          <div className="flex-1 h-full overflow-y-auto overflow-x-hidden flex flex-col items-center p-4 sm:p-6 lg:p-8 gap-6 md:gap-8">
            
            {/* Chessboard */}
            <div className="w-full max-w-[600px] shrink-0 bg-white p-3 md:p-4 rounded-2xl shadow-md border border-gray-200">
              <div className="flex flex-col w-full">
                
                {/* Top Spacer */}
                <div className="flex flex-row mb-1 sm:mb-1.5 invisible select-none">
                  <div className="w-4 sm:w-5 shrink-0 pr-1.5 sm:pr-2"></div>
                  <div className="flex-1 flex flex-row text-[10px] sm:text-xs font-bold">
                    <div className="flex-1 flex items-center justify-center">X</div>
                  </div>
                  <div className="w-4 sm:w-5 shrink-0 pl-1.5 sm:pl-2"></div>
                </div>

                <div className="flex flex-row items-stretch">
                  {/* Ranks (1-8) - LEFT */}
                  <div className="flex flex-col justify-around pr-1.5 sm:pr-2 text-[10px] sm:text-xs font-bold text-gray-400 select-none w-4 sm:w-5 shrink-0">
                    {RANKS.map(r => <div key={`rank-${r}`} className="flex-1 flex items-center justify-center">{r}</div>)}
                  </div>
                  
                  {/* Board */}
                  <div className="flex-1 relative aspect-square grid grid-cols-8 grid-rows-8 rounded overflow-hidden border border-gray-300 shadow-inner">
                    {getBoardGrid().map((sq) => (
                      <div 
                        key={sq.id} 
                        onClick={() => handleSquareClick(sq.id)}
                        onDragOver={(e) => {
                          if (!isLearnMode) return;
                          e.preventDefault();
                          e.dataTransfer.dropEffect = 'move';
                        }}
                        onDrop={(e) => {
                          if (!isLearnMode) return;
                          e.preventDefault();
                          const fromId = e.dataTransfer.getData('text/plain');
                          if (fromId && fromId !== sq.id) {
                            handleBoardMove(fromId, sq.id);
                          }
                        }}
                        className={`relative flex items-center justify-center ${sq.isLight ? 'bg-[#FFFFFF]' : 'bg-[#5C9CE6]'} ${isLearnMode && !isGameOver && !isEngineThinking ? 'cursor-pointer hover:opacity-90' : ''}`}
                      >
                        {sq.isSelected && (
                          <div className="absolute inset-0 bg-yellow-300/40 z-10 pointer-events-none" />
                        )}
                        {sq.isLegalDest && (
                          <div className={`absolute rounded-full bg-black/20 z-10 pointer-events-none ${sq.piece ? 'w-full h-full border-4 border-black/15 bg-transparent' : 'w-1/3 h-1/3'}`} />
                        )}
                        {sq.piece && (
                          <img 
                            src={PIECE_URLS[`${sq.piece.color}-${sq.piece.type}`]} 
                            alt={`${sq.piece.color} ${sq.piece.type}`}
                            className="w-[85%] h-[85%] drop-shadow-sm select-none z-20 relative cursor-grab active:cursor-grabbing"
                            draggable={isLearnMode && !isGameOver && !isEngineThinking && sq.piece.color === game.turn()}
                            onDragStart={(e) => {
                              if (!isLearnMode || isEngineThinking || isGameOver || sq.piece.color !== game.turn()) {
                                e.preventDefault();
                                return;
                              }
                              e.dataTransfer.setData('text/plain', sq.id);
                              e.dataTransfer.effectAllowed = 'move';
                              setSelectedSquare(sq.id);
                              setTaughtMove(null); // Dismiss previous lesson
                            }}
                          />
                        )}
                      </div>
                    ))}

                    {/* SVG Arrow Overlay for Hint Move */}
                    {hintMove && (
                      <svg viewBox="0 0 100 100" className="absolute inset-0 w-full h-full pointer-events-none z-30">
                        <defs>
                          <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
                            <polygon points="0 0, 6 3, 0 6" fill="#f59e0b" opacity="0.9" />
                          </marker>
                        </defs>
                        <line
                          x1={(hintMove.from.charCodeAt(0) - 97 + 0.5) * 12.5}
                          y1={(8 - parseInt(hintMove.from[1]) + 0.5) * 12.5}
                          x2={(hintMove.to.charCodeAt(0) - 97 + 0.5) * 12.5}
                          y2={(8 - parseInt(hintMove.to[1]) + 0.5) * 12.5}
                          stroke="#f59e0b"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          markerEnd="url(#arrowhead)"
                          opacity="0.9"
                        />
                      </svg>
                    )}
                  </div>

                  {/* Right Spacer */}
                  <div className="flex flex-col justify-around pl-1.5 sm:pl-2 text-[10px] sm:text-xs font-bold w-4 sm:w-5 shrink-0"></div>
                </div>

                {/* Files (a-h) - BOTTOM */}
                <div className="flex flex-row mt-1 sm:mt-1.5">
                  <div className="w-4 sm:w-5 shrink-0 pr-1.5 sm:pr-2"></div>
                  <div className="flex-1 flex flex-row text-[10px] sm:text-xs font-bold text-gray-400 select-none">
                    {FILES.map(f => <div key={`file-${f}`} className="flex-1 flex items-center justify-center">{f}</div>)}
                  </div>
                  <div className="w-4 sm:w-5 shrink-0 pl-1.5 sm:pl-2"></div>
                </div>
              </div>
            </div>

            {isGameOver && (
              <div className="w-full max-w-[600px] shrink-0 p-4 bg-green-100 border border-green-200 text-green-800 rounded-xl text-center font-bold text-lg shadow-sm animate-in zoom-in-95">
                Game Over! {isCheckmate ? 'Checkmate!' : 'Draw / Stalemate!'}
              </div>
            )}

            {/* Drawing/Input Area (Notation Pad) */}
            <div className={`w-full max-w-[600px] flex flex-col gap-3 shrink-0 pb-8 transition-opacity ${isGameOver ? 'opacity-50 pointer-events-none' : ''}`}>
              <div className="flex items-center justify-between px-1 mb-1">
                <h3 
                  className="text-sm font-semibold text-gray-600 uppercase tracking-wider flex items-center gap-2 cursor-pointer hover:text-gray-900 transition-colors"
                  onClick={() => setInputMode(prev => prev === 'draw' ? 'text' : 'draw')}
                  title={isLearnMode ? "Learn Mode Active (Toggle Input Mode)" : "Toggle Input Mode (N)"}
                >
                  {isLearnMode ? <GraduationCap className="w-4 h-4 text-[#007AFF]" /> : inputMode === 'draw' ? <PenTool className="w-4 h-4" /> : <Type className="w-4 h-4" />}
                  {isLearnMode ? 'Learn to Notate' : 'Notation Pad'}
                  {isEngineThinking ? (
                    <span className="flex items-center gap-1 text-gray-500 text-xs lowercase tracking-normal ml-2">
                      <Bot className="w-3.5 h-3.5" /> Engine moving...
                    </span>
                  ) : processingType === 'auto' && (
                    <span className="flex items-center gap-1 text-[#007AFF] text-xs lowercase tracking-normal animate-in fade-in ml-2">
                      <Loader2 className="w-3.5 h-3.5 animate-spin" /> reading...
                    </span>
                  )}
                </h3>
                
                <div className="flex items-center gap-3 sm:gap-4">
                  {engineLevel > 0 && (
                    <button 
                      onClick={handleHint}
                      disabled={isEngineThinking || isGameOver}
                      className="text-xs text-amber-500 hover:text-amber-600 flex items-center gap-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                      title="Get Hint"
                    >
                      <Lightbulb className="w-3.5 h-3.5" /> <span className="hidden sm:inline font-medium">Hint</span>
                    </button>
                  )}
                  <button 
                    onClick={handleUndo}
                    disabled={history.length === 0 || isEngineThinking}
                    className="text-xs text-gray-500 hover:text-gray-800 flex items-center gap-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    title="Undo Move"
                  >
                    <Undo2 className="w-3.5 h-3.5" /> <span className="hidden sm:inline font-medium">Undo</span>
                  </button>
                  <button 
                    onClick={() => {
                      clearCanvas();
                      setTextInput('');
                    }}
                    className="text-xs text-gray-500 hover:text-red-500 flex items-center gap-1 transition-colors"
                  >
                    <Trash2 className="w-3.5 h-3.5" /> <span className="hidden sm:inline font-medium">Clear</span>
                  </button>
                </div>
              </div>
              
              {/* Contextual Pad Container */}
              <div className={`relative w-full ${inputMode === 'draw' ? 'min-h-[160px] sm:min-h-[200px]' : 'h-[160px] sm:h-[200px]'} rounded-2xl shadow-sm border border-gray-300 overflow-hidden ${isEngineThinking ? 'opacity-70 pointer-events-none' : ''}`}>
                
                {/* Background & Content based on mode */}
                {inputMode === 'draw' ? (
                  <div className="absolute inset-0 bg-white" style={{ backgroundImage: 'radial-gradient(#CBD5E1 1px, transparent 1px)', backgroundSize: '24px 24px', backgroundPosition: '0 0' }}>
                    <canvas
                      ref={canvasRef}
                      className="absolute inset-0 w-full h-full cursor-crosshair touch-none"
                      onPointerDown={startDrawing}
                      onPointerMove={draw}
                      onPointerUp={stopDrawing}
                      onPointerLeave={stopDrawing}
                    />
                    {processingType === 'manual' && (
                      <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex flex-col items-center justify-center z-10">
                        <div className="w-6 h-6 border-2 border-[#007AFF] border-t-transparent rounded-full animate-spin mb-2"></div>
                        <span className="text-sm font-medium text-gray-700">Reading handwriting...</span>
                      </div>
                    )}
                  </div>
                ) : (
                  <div className="absolute inset-0 bg-white flex items-center justify-center p-6 focus-within:ring-2 focus-within:ring-[#007AFF]/20">
                    <input
                      autoFocus
                      type="text"
                      value={textInput}
                      onChange={(e) => {
                        setTextInput(e.target.value);
                        setInlineError('');
                        setHintMove(null);
                        setTaughtMove(null); // Dismiss lesson on typing
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') handleTextSubmit();
                      }}
                      disabled={isEngineThinking}
                      placeholder="Type move (e.g. e4, d2d4, 7163)"
                      className="w-full h-full text-center text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-800 bg-transparent focus:outline-none placeholder:text-gray-300 placeholder:font-normal placeholder:text-xl sm:placeholder:text-2xl"
                    />
                  </div>
                )}

                {/* Learn Mode Idle Overlay */}
                {isLearnMode && !taughtMove && history.length === 0 && inputMode === 'draw' && (
                  <div className="absolute inset-0 z-10 flex flex-col items-center justify-center pointer-events-none opacity-30">
                    <GraduationCap className="w-8 h-8 mb-2" />
                    <p className="text-xs font-medium uppercase tracking-widest">Draw, Type, or Play</p>
                  </div>
                )}

                {/* Taught Move Overlay (Learn Mode only) */}
                {isLearnMode && taughtMove && (
                  <div 
                    key={taughtMove.trigger} 
                    onPointerDown={() => setTaughtMove(null)}
                    className="absolute inset-0 bg-[#F8F9FA]/95 backdrop-blur-sm z-40 flex flex-col items-center justify-center p-6 animate-in fade-in duration-300 cursor-pointer"
                  >
                    <span className={`text-xs font-bold uppercase tracking-[0.2em] mb-2 ${taughtMove.color === 'w' ? 'text-gray-400' : 'text-gray-800'}`}>
                      {taughtMove.color === 'w' ? 'White played' : 'Black played'}
                    </span>
                    <div className="text-6xl sm:text-8xl text-[#007AFF] drop-shadow-sm font-handwriting italic animate-writing px-4 pb-2">
                      {taughtMove.san}
                    </div>
                  </div>
                )}
              </div>

              {/* Inline Error */}
              {inlineError && typeof inlineError === 'string' && (
                <div className="px-1 text-[13px] text-red-500 flex items-start gap-1.5 animate-in fade-in slide-in-from-top-1">
                  <AlertCircle className="w-3.5 h-3.5 shrink-0 mt-0.5" />
                  <div className="flex-1">
                    {inlineError}
                    {inlineError.includes('Ambiguous') && (
                      <button 
                        onClick={() => setShowAmbiguityHelp(true)}
                        className="text-[#007AFF] underline font-medium ml-1 hover:text-[#0056b3] inline-block"
                      >
                        Click here to learn more.
                      </button>
                    )}
                  </div>
                </div>
              )}

              {/* Controls Below Pad */}
              {showManualControls && (
                <div className="flex items-end justify-between mt-2 gap-4 min-h-[46px]">
                  <div className="flex items-center px-1 opacity-100 transition-opacity flex-1" style={{ opacity: inputMode === 'draw' ? 1 : 0.4, pointerEvents: inputMode === 'draw' ? 'auto' : 'none' }}>
                    <label className="flex items-center gap-2 cursor-pointer group">
                      <input
                        type="checkbox"
                        checked={autoSubmit}
                        onChange={(e) => setAutoSubmit(e.target.checked)}
                        className="w-4 h-4 text-[#007AFF] rounded border-gray-300 focus:ring-[#007AFF] transition-all"
                      />
                      <span className="text-xs sm:text-sm text-gray-600 font-medium group-hover:text-gray-800 transition-colors">
                        Auto-submit drawing
                      </span>
                    </label>
                  </div>

                  <div className="flex items-center gap-2 shrink-0">
                    <button 
                      onClick={() => inputMode === 'text' ? handleTextSubmit() : processNotation(false)}
                      disabled={processingType !== null || isEngineThinking}
                      className="px-6 h-[42px] sm:h-[46px] bg-[#007AFF] hover:bg-[#0056b3] text-white rounded-lg font-medium shadow-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm sm:text-base shrink-0"
                    >
                      <Check className="w-4 h-4 sm:w-5 sm:h-5" /> Submit
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Move History Drawer (Slide-over) */}
          {showHistory && (
            <div 
              className="absolute inset-0 bg-black/20 z-40 backdrop-blur-sm"
              onClick={() => setShowHistory(false)}
            />
          )}

          <div 
            className={`absolute top-0 right-0 h-full w-full sm:w-[320px] bg-white/95 backdrop-blur-xl shadow-[-10px_0_30px_rgba(0,0,0,0.1)] border-l border-gray-200 z-50 transform transition-transform duration-300 flex flex-col ${showHistory ? 'translate-x-0' : 'translate-x-full'}`}
          >
            <div className="h-14 border-b border-gray-200 flex justify-between items-center px-4 bg-gray-50/80">
              <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wider flex items-center gap-2">
                <List className="w-4 h-4" /> Move History
              </h2>
              <div className="flex gap-2">
                <button 
                  onClick={handleCopyPgn}
                  className="p-1.5 text-gray-400 hover:text-[#007AFF] hover:bg-blue-50 rounded-md transition-colors"
                  title="Copy PGN"
                >
                  {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
                </button>
                <button 
                  onClick={() => setShowHistory(false)}
                  className="p-1.5 text-gray-400 hover:text-gray-700 hover:bg-gray-200/50 rounded-md transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>
            </div>
            
            <div className="flex-1 overflow-y-auto p-4 bg-transparent">
              {history.length === 0 ? (
                <div className="text-sm text-gray-400 italic text-center mt-10">No moves recorded yet.</div>
              ) : (
                <div className="flex flex-col space-y-1 text-sm">
                  {getMovePairs().map((turn, i) => (
                    <div key={i} className="flex px-2 py-1.5 rounded-lg hover:bg-gray-100 transition-colors">
                      <div className="w-8 text-gray-400 text-right pr-3 font-mono">{i + 1}.</div>
                      <div className="flex-1 font-medium text-gray-800">{turn.white.san}</div>
                      <div className="flex-1 font-medium text-gray-800">{turn.black ? turn.black.san : ''}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

        </div>
      </div>

      {/* Confirmation/Correction Modal */}
      {confirmModal.isOpen && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[60] p-4">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden animate-in fade-in zoom-in-95 duration-200">
            <div className="bg-[#F9F9F9] border-b border-gray-200 px-4 py-3 flex justify-between items-center">
              <h3 className="font-semibold text-gray-800">Confirm Move</h3>
              <button 
                onClick={() => setConfirmModal({ isOpen: false, text: '', error: '' })}
                className="text-gray-400 hover:text-gray-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <form onSubmit={submitMove} className="p-5">
              <label className="block text-sm text-gray-600 mb-2">
                I recognized this text. Edit if incorrect:
              </label>
              <input 
                type="text" 
                autoFocus
                value={confirmModal.text}
                onChange={(e) => setConfirmModal(prev => ({ ...prev, text: e.target.value, error: '' }))}
                className="w-full text-center text-2xl font-semibold text-gray-800 bg-gray-50 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-[#007AFF] focus:ring-1 focus:ring-[#007AFF] transition-all"
                placeholder="e.g. Nf3"
              />
              {confirmModal.error && (
                <div className="mt-3 flex flex-col items-center gap-1 text-red-500 text-sm justify-center text-center">
                  <div className="flex items-center gap-1.5">
                    <AlertCircle className="w-4 h-4 shrink-0" />
                    <span>{confirmModal.error}</span>
                  </div>
                  {confirmModal.error.includes('Ambiguous') && (
                    <button 
                      type="button"
                      onClick={() => setShowAmbiguityHelp(true)}
                      className="text-[#007AFF] underline font-medium hover:text-[#0056b3] mt-1"
                    >
                      Click here to learn more
                    </button>
                  )}
                </div>
              )}
              <div className="mt-5 flex gap-3">
                <button 
                  type="button"
                  onClick={() => setConfirmModal({ isOpen: false, text: '', error: '' })}
                  className="flex-1 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button 
                  type="submit"
                  className="flex-1 py-2.5 bg-[#007AFF] text-white rounded-lg font-medium hover:bg-[#0056b3] transition-colors"
                >
                  Play Move
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Ambiguous Moves Help Modal */}
      {showAmbiguityHelp && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
            <div className="bg-[#F9F9F9] border-b border-gray-200 px-4 py-3 flex justify-between items-center">
              <h3 className="font-semibold text-gray-800">How to Notate Ambiguous Moves</h3>
              <button onClick={() => setShowAmbiguityHelp(false)} className="text-gray-400 hover:text-gray-700">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-5 text-sm text-gray-700 space-y-4">
              <p>When two (or more) identical pieces can move to the same square, you must specify <strong>which</strong> piece is moving by adding an extra letter or number.</p>
              
              <div className="space-y-3 pt-2">
                <div>
                  <h4 className="font-semibold text-gray-900 mb-1">1. Different Columns (Files)</h4>
                  <p className="text-gray-600 bg-gray-50 p-2.5 rounded border border-gray-100">
                    If the pieces are on different columns, use the starting letter.<br/>
                    <span className="font-mono text-[#007AFF] font-semibold">Ndf3</span> (Knight on the 'd' file moves to f3)
                  </p>
                </div>
                
                <div>
                  <h4 className="font-semibold text-gray-900 mb-1">2. Different Rows (Ranks)</h4>
                  <p className="text-gray-600 bg-gray-50 p-2.5 rounded border border-gray-100">
                    If they are on the same column but different rows, use the starting number.<br/>
                    <span className="font-mono text-[#007AFF] font-semibold">R1e4</span> (Rook on the 1st rank moves to e4)
                  </p>
                </div>

                <div>
                  <h4 className="font-semibold text-gray-900 mb-1">3. Both Different</h4>
                  <p className="text-gray-600 bg-gray-50 p-2.5 rounded border border-gray-100">
                    Rarely, you might need the exact starting square.<br/>
                    <span className="font-mono text-[#007AFF] font-semibold">Qh4e1</span> (Queen on h4 moves to e1)
                  </p>
                </div>
              </div>
            </div>
            <div className="p-4 bg-gray-50 border-t border-gray-200 flex justify-end">
              <button 
                onClick={() => setShowAmbiguityHelp(false)}
                className="px-5 py-2 bg-[#007AFF] text-white rounded-lg font-medium hover:bg-[#0056b3] transition-colors"
              >
                Got it
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Settings Modal */}
      {showSettings && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[80] p-4">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden animate-in fade-in zoom-in-95 duration-200">
            <div className="bg-[#F9F9F9] border-b border-gray-200 px-4 py-3 flex justify-between items-center">
              <h3 className="font-semibold text-gray-800">Settings</h3>
              <button onClick={() => setShowSettings(false)} className="text-gray-400 hover:text-gray-700">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <label className="flex items-center gap-3 cursor-pointer">
                <input 
                  type="checkbox" 
                  checked={showManualControls}
                  onChange={(e) => setShowManualControls(e.target.checked)}
                  className="w-5 h-5 text-[#007AFF] rounded border-gray-300 focus:ring-[#007AFF] transition-all"
                />
                <span className="text-sm font-medium text-gray-700">Show manual submit controls</span>
              </label>
            </div>
            <div className="p-4 bg-gray-50 border-t border-gray-200 flex justify-end">
              <button 
                onClick={() => setShowSettings(false)}
                className="px-5 py-2 bg-[#007AFF] text-white rounded-lg font-medium hover:bg-[#0056b3] transition-colors"
              >
                Done
              </button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}