import React, { useState, useMemo, useEffect } from 'react';
import UndoIcon from '@mui/icons-material/Undo';
import RedoIcon from '@mui/icons-material/Redo';
import { API_BASE_URL } from '../config';
import {
  GameBoard,
  Difficulty,
  GameMode,
  RegionMap,
  generatePuzzleForMode,
  getRegionId,
  getRegionNeighbors,
} from './sudokuEngine';

type HighlightType = 'none' | 'row' | 'col' | 'box' | 'sameNumber';
type SudokuRound = {
  board: GameBoard;
  regionMap: RegionMap;
};

const CELL_SIZE = 80;
const CELL_FONT_SIZE = 36;

const createSudokuRound = (difficulty: Difficulty, mode: GameMode): SudokuRound => {
  const { puzzle, regionMap } = generatePuzzleForMode(difficulty, mode);
  return {
    board: puzzle,
    regionMap,
  };
};

const cloneGameBoard = (board: GameBoard): GameBoard => board.map(row => [...row]);

const SudokuGame: React.FC = () => {
  // 游戏难度
  const [difficulty, setDifficulty] = useState<Difficulty>('hard');
  
  // 游戏模式：标准或不规则
  const [gameMode, setGameMode] = useState<GameMode>('standard');
  
  const [round, setRound] = useState<SudokuRound>(() => createSudokuRound('hard', 'standard'));
  const { board, regionMap } = round;
  const [undoStack, setUndoStack] = useState<GameBoard[]>([]);
  const [redoStack, setRedoStack] = useState<GameBoard[]>([]);

  const setBoard = (nextBoard: GameBoard) => {
    setRound((currentRound) => ({
      ...currentRound,
      board: nextBoard,
    }));
  };

  const applyBoardChange = (nextBoard: GameBoard) => {
    setUndoStack((previousStack) => [...previousStack, cloneGameBoard(board)]);
    setRedoStack([]);
    setBoard(nextBoard);
  };

  const [fixedCells, setFixedCells] = useState<boolean[][]>(() =>
    board.map(row => row.map(cell => cell !== 0))
  );

  // 选中的格子 [row, col]
  const [selectedCell, setSelectedCell] = useState<[number, number] | null>(null);

  // 游戏完成状态
  const [isGameComplete, setIsGameComplete] = useState(false);

  // 完成对话框显示状态
  const [showCompleteDialog, setShowCompleteDialog] = useState(false);

  const [timeElapsed, setTimeElapsed] = useState(0);
  const [isTimerRunning, setIsTimerRunning] = useState(true);

  // 配置选项
  const [config, setConfig] = useState({
    highlightRegion: true,           // 突出显示区域（行、列、宫）
    highlightSameNumbers: true,      // 突出显示相同数字
    showRemainingCount: true,        // 显示剩余数字数量
  });

  // 检查在位置 (row, col) 放置数字 num 是否有效
  const isValid = (row: number, col: number, num: number): boolean => {
    for (let c = 0; c < 9; c++) {
      const cell = board[row][c];
      if (c !== col && typeof cell === 'number' && cell === num) return false;
    }

    for (let r = 0; r < 9; r++) {
      const cell = board[r][col];
      if (r !== row && typeof cell === 'number' && cell === num) return false;
    }

    const targetRegion = getRegionId(regionMap, row, col);
    for (let r = 0; r < 9; r++) {
      for (let c = 0; c < 9; c++) {
        const cell = board[r][c];
        if ((r !== row || c !== col) && getRegionId(regionMap, r, c) === targetRegion && typeof cell === 'number' && cell === num) return false;
      }
    }

    return true;
  };

  // 检查数独是否完成
  const isComplete = (): boolean => {
    for (let r = 0; r < 9; r++) {
      for (let c = 0; c < 9; c++) {
        const cell = board[r][c];
        if (typeof cell !== 'number') return false;
        if (!isValid(r, c, cell)) return false;
      }
    }
    return true;
  };

  const getCellValue = (cell: number): number | null => {
    return cell === 0 ? null : cell;
  };

  const formatTime = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  const saveGameRecord = async (won: boolean, timeSeconds: number) => {
    try {
      const token = window.localStorage.getItem('token');
      if (!token) {
        console.log('未登录，不保存数独记录');
        return;
      }

      const response = await fetch(`${API_BASE_URL}/api/sudoku/record`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          difficulty,
          timeSeconds,
          won
        })
      });

      if (response.ok) {
        console.log('数独游戏记录保存成功');
      } else {
        console.warn('保存数独记录失败', response.statusText);
      }
    } catch (error) {
      console.error('保存数独记录失败:', error);
    }
  };

  const handleNumberInput = (num: number) => {
    if (!selectedCell || isGameComplete) return;
    const [row, col] = selectedCell;
    if (fixedCells[row][col]) return;
    if (board[row][col] === num) return;

    const newBoard = board.map(row => [...row]);
    newBoard[row][col] = num;
    applyBoardChange(newBoard);

    // 检查是否完成
    setTimeout(() => {
      if (checkIsComplete(newBoard)) {
        setIsGameComplete(true);
        setIsTimerRunning(false);
        setShowCompleteDialog(true);
        saveGameRecord(true, timeElapsed);
      }
    }, 0);
  };

  const checkIsComplete = (boardToCheck: GameBoard): boolean => {
    for (let r = 0; r < 9; r++) {
      for (let c = 0; c < 9; c++) {
        const cell = boardToCheck[r][c];
        if (cell === 0) return false;
        if (!isValidInBoard(r, c, cell, boardToCheck)) return false;
      }
    }
    return true;
  };

  const isValidInBoard = (row: number, col: number, num: number, boardToCheck: GameBoard): boolean => {
    for (let c = 0; c < 9; c++) {
      if (c !== col && boardToCheck[row][c] === num) return false;
    }
    for (let r = 0; r < 9; r++) {
      if (r !== row && boardToCheck[r][col] === num) return false;
    }
    // 使用 regionMap 检查不规则区域
    const targetRegion = getRegionId(regionMap, row, col);
    for (let r = 0; r < 9; r++) {
      for (let c = 0; c < 9; c++) {
        if ((r !== row || c !== col) && getRegionId(regionMap, r, c) === targetRegion && boardToCheck[r][c] === num) return false;
      }
    }
    return true;
  };

  const handleClear = () => {
    if (!selectedCell || isGameComplete) return;
    const [row, col] = selectedCell;
    if (fixedCells[row][col] || board[row][col] === 0) return;

    const newBoard = board.map(row => [...row]);
    newBoard[row][col] = 0;
    applyBoardChange(newBoard);
  };

  const handleUndo = () => {
    if (isGameComplete || undoStack.length === 0) return;

    const previousBoard = undoStack[undoStack.length - 1];
    setUndoStack(undoStack.slice(0, -1));
    setRedoStack([cloneGameBoard(board), ...redoStack]);
    setBoard(cloneGameBoard(previousBoard));
  };

  const handleRedo = () => {
    if (isGameComplete || redoStack.length === 0) return;

    const nextBoard = redoStack[0];
    setRedoStack(redoStack.slice(1));
    setUndoStack([...undoStack, cloneGameBoard(board)]);
    setBoard(cloneGameBoard(nextBoard));
  };

  const canUndo = !isGameComplete && undoStack.length > 0;
  const canRedo = !isGameComplete && redoStack.length > 0;

  const getHistoryButtonStyle = (enabled: boolean): React.CSSProperties => ({
    padding: '10px 16px',
    fontSize: '16px',
    cursor: enabled ? 'pointer' : 'not-allowed',
    backgroundColor: enabled ? '#f0f0f0' : '#f7f7f7',
    color: enabled ? '#333' : '#aaa',
    border: 'none',
    borderRadius: '4px',
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    opacity: enabled ? 1 : 0.65,
  });

  const createNewGame = (level: Difficulty, mode: GameMode = gameMode) => {
    const nextRound = createSudokuRound(level, mode);
    setRound(nextRound);
    setFixedCells(nextRound.board.map(row => row.map(cell => cell !== 0)));
    setUndoStack([]);
    setRedoStack([]);
    setSelectedCell(null);
    setIsGameComplete(false);
    setShowCompleteDialog(false);
    setTimeElapsed(0);
    setIsTimerRunning(true);
  };

  const handleNewGame = () => {
    createNewGame(difficulty);
  };

  const handleDifficultyChange = (level: Difficulty) => {
    setDifficulty(level);
    createNewGame(level);
  };

  const handleModeChange = (mode: GameMode) => {
    setGameMode(mode);
    createNewGame(difficulty, mode);
  };

  const handleCellClick = (row: number, col: number) => {
    setSelectedCell([row, col]);
  };

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const key = e.key.toLowerCase();
      const isModifierKey = e.ctrlKey || e.metaKey;

      if (isModifierKey && key === 'z') {
        e.preventDefault();
        if (e.shiftKey) {
          handleRedo();
        } else {
          handleUndo();
        }
        return;
      }

      if (isModifierKey && key === 'y') {
        e.preventDefault();
        handleRedo();
        return;
      }

      if (!selectedCell) return;

      const [row, col] = selectedCell;

      switch (e.key) {
        case 'ArrowUp':
          e.preventDefault();
          setSelectedCell([Math.max(0, row - 1), col]);
          break;
        case 'ArrowDown':
          e.preventDefault();
          setSelectedCell([Math.min(8, row + 1), col]);
          break;
        case 'ArrowLeft':
          e.preventDefault();
          setSelectedCell([row, Math.max(0, col - 1)]);
          break;
        case 'ArrowRight':
          e.preventDefault();
          setSelectedCell([row, Math.min(8, col + 1)]);
          break;
        case 'Backspace':
        case 'Delete':
        case ' ':
          e.preventDefault();
          handleClear();
          break;
        case '1':
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
          e.preventDefault();
          handleNumberInput(Number(e.key));
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [selectedCell, board, undoStack, redoStack, isGameComplete, fixedCells, timeElapsed, regionMap, difficulty]);

  useEffect(() => {
    if (!isTimerRunning) return;

    const intervalId = window.setInterval(() => {
      setTimeElapsed((prev) => prev + 1);
    }, 1000);

    return () => window.clearInterval(intervalId);
  }, [isTimerRunning]);

  const getCellHighlightType = (row: number, col: number): HighlightType => {
    if (!selectedCell) return 'none';

    const [selRow, selCol] = selectedCell;
    const cell = board[row][col];
    const selectedValue = board[selRow][selCol];

    if (config.highlightRegion) {
      const inSameRow = row === selRow;
      const inSameCol = col === selCol;
      const inSameBox = getRegionId(regionMap, row, col) === getRegionId(regionMap, selRow, selCol);

      if (inSameBox) return 'box';
      if (inSameRow) return 'row';
      if (inSameCol) return 'col';
    }

    if (config.highlightSameNumbers && selectedValue !== 0) {
      if (cell === selectedValue) {
        return 'sameNumber';
      }
    }

    return 'none';
  };

  const highlightedCells = useMemo(() => {
    const highlighted = new Set<string>();
    if (!selectedCell) return highlighted;

    for (let r = 0; r < 9; r++) {
      for (let c = 0; c < 9; c++) {
        if (getCellHighlightType(r, c) !== 'none') {
          highlighted.add(`${r}-${c}`);
        }
      }
    }
    return highlighted;
  }, [board, selectedCell, config, regionMap]);

  // 计算剩余未填写的数字数量
  const remainingCount = useMemo(() => {
    let count = 0;
    for (let r = 0; r < 9; r++) {
      for (let c = 0; c < 9; c++) {
        if (board[r][c] === 0) count++;
      }
    }
    return count;
  }, [board]);

  // 获取单元格样式 - 支持不规则区域的边框显示
  const getCellStyle = (row: number, col: number): React.CSSProperties => {
    const cell = board[row][col];
    const isFixed = fixedCells[row][col];
    const highlightType = getCellHighlightType(row, col);
    const isSelected = selectedCell && selectedCell[0] === row && selectedCell[1] === col;
    const displayValue = getCellValue(cell);

    // 基础背景色 - 根据高亮类型设置不同颜色
    let backgroundColor = 'white';
    if (isSelected) {
      backgroundColor = '#69b1ff'; // 选中时的深蓝色
    } else if (highlightType === 'box') {
      backgroundColor = '#d9f7be'; // 宫 - 浅绿色
    } else if (highlightType === 'row') {
      backgroundColor = '#bae7ff'; // 行 - 浅蓝色
    } else if (highlightType === 'col') {
      backgroundColor = '#ffe58f'; // 列 - 浅黄色
    } else if (highlightType === 'sameNumber') {
      backgroundColor = '#ff4444'; // 相同数字 - 更醒目的红色
    } else if (isFixed) {
      backgroundColor = '#f0f0f0'; // 初始固定格子
    }

    const thickBorder = '4px solid #666';
    const thinBorder = '2px solid #bbb';

    // 使用 getRegionNeighbors 判断边框粗细，支持不规则区域
    const neighbors = getRegionNeighbors(regionMap, row, col);
    
    const borderRight = col < 8 ? (neighbors.right ? thickBorder : thinBorder) : thickBorder;
    const borderBottom = row < 8 ? (neighbors.bottom ? thickBorder : thinBorder) : thickBorder;
    const borderLeft = col > 0 ? (neighbors.left ? thickBorder : thinBorder) : thickBorder;
    const borderTop = row > 0 ? (neighbors.top ? thickBorder : thinBorder) : thickBorder;

    return {
      width: `${CELL_SIZE}px`,
      height: `${CELL_SIZE}px`,
      backgroundColor,
      borderRight,
      borderBottom,
      borderLeft,
      borderTop,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: `${CELL_FONT_SIZE}px`,
      cursor: 'pointer',
      color: isFixed ? '#333' : '#1890ff',
      position: 'relative' as const,
      boxSizing: 'border-box',
    };
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px', padding: '20px' }}>
      {/* 顶部控制和配置区 */}
      <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', justifyContent: 'center' }}>
        <div style={{ display: 'flex', gap: '10px' }}>
          <button
            onClick={handleNewGame}
            style={{
              padding: '10px 20px',
              fontSize: '16px',
              cursor: 'pointer',
              backgroundColor: '#1890ff',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
            }}
          >
            新游戏
          </button>
          <button
            onClick={handleClear}
            style={{
              padding: '10px 20px',
              fontSize: '16px',
              cursor: 'pointer',
              backgroundColor: '#ff4d4f',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
            }}
          >
            清除
          </button>
          <button
            onClick={handleUndo}
            disabled={!canUndo}
            aria-label="撤销"
            title="撤销 (Ctrl/Cmd+Z)"
            style={getHistoryButtonStyle(canUndo)}
          >
            <UndoIcon fontSize="small" />
            撤销
          </button>
          <button
            onClick={handleRedo}
            disabled={!canRedo}
            aria-label="重做"
            title="重做 (Ctrl/Cmd+Y)"
            style={getHistoryButtonStyle(canRedo)}
          >
            <RedoIcon fontSize="small" />
            重做
          </button>
        </div>

        <div style={{ display: 'flex', gap: '5px', alignItems: 'center' }}>
          <span>难度:</span>
          {(['easy', 'medium', 'hard'] as const).map((d) => (
            <button
              key={d}
              onClick={() => handleDifficultyChange(d)}
              style={{
                padding: '5px 10px',
                fontSize: '14px',
                cursor: 'pointer',
                backgroundColor: difficulty === d ? '#1890ff' : '#f0f0f0',
                color: difficulty === d ? 'white' : '#333',
                border: 'none',
                borderRadius: '4px',
              }}
            >
              {d === 'easy' ? '简单' : d === 'medium' ? '中等' : '困难'}
            </button>
          ))}
        </div>

        <div style={{ display: 'flex', gap: '5px', alignItems: 'center' }}>
          <span>模式:</span>
          {(['standard', 'irregular'] as const).map((m) => (
            <button
              key={m}
              onClick={() => handleModeChange(m)}
              style={{
                padding: '5px 10px',
                fontSize: '14px',
                cursor: 'pointer',
                backgroundColor: gameMode === m ? '#52c41a' : '#f0f0f0',
                color: gameMode === m ? 'white' : '#333',
                border: 'none',
                borderRadius: '4px',
              }}
            >
              {m === 'standard' ? '标准' : '不规则'}
            </button>
          ))}
        </div>
      </div>

      {/* 配置选项区 */}
      <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap', justifyContent: 'center', padding: '10px', backgroundColor: '#fafafa', borderRadius: '8px' }}>
        <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <input
            type="checkbox"
            checked={config.highlightRegion}
            onChange={(e) => setConfig({ ...config, highlightRegion: e.target.checked })}
          />
          突出显示区域
        </label>
        <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <input
            type="checkbox"
            checked={config.highlightSameNumbers}
            onChange={(e) => setConfig({ ...config, highlightSameNumbers: e.target.checked })}
          />
          突出显示相同数字
        </label>
        <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <input
            type="checkbox"
            checked={config.showRemainingCount}
            onChange={(e) => setConfig({ ...config, showRemainingCount: e.target.checked })}
          />
          显示剩余数量
        </label>
      </div>

      {/* 数独棋盘 */}
      <div style={{ width: '100%', overflowX: 'auto', display: 'flex', justifyContent: 'center', paddingBottom: '4px' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: `repeat(9, ${CELL_SIZE}px)`,
            gridTemplateRows: `repeat(9, ${CELL_SIZE}px)`,
            border: '4px solid #333',
            backgroundColor: '#fff',
            flex: '0 0 auto',
          }}
        >
          {board.map((row, rowIndex) =>
            row.map((cell, colIndex) => {
              const displayValue = getCellValue(cell);
              const cellStyle = getCellStyle(rowIndex, colIndex);

              return (
                <div
                  key={`${rowIndex}-${colIndex}`}
                  onClick={() => handleCellClick(rowIndex, colIndex)}
                  style={cellStyle}
                >
                  {displayValue !== null ? displayValue : ''}
                </div>
              );
            })
          )}
        </div>
      </div>

<div style={{ display: 'flex', gap: '30px', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
        <div style={{ padding: '15px 25px', backgroundColor: '#f5f5f5', borderRadius: '8px', textAlign: 'center' }}>
          <span style={{ fontSize: '14px', color: '#666', display: 'block', marginBottom: '8px' }}>
            {selectedCell ? '按键盘 1-9 输入数字' : '选择一个格子后输入数字'}
          </span>
          <span style={{ fontSize: '16px', color: '#666', display: 'block', marginBottom: '8px' }}>
            用时：<strong style={{ color: '#1890ff', fontSize: '20px' }}>{formatTime(timeElapsed)}</strong>
          </span>
          {config.showRemainingCount && (
            <span style={{ fontSize: '16px', color: '#666' }}>
              剩余：<strong style={{ color: '#1890ff', fontSize: '20px' }}>{remainingCount}</strong> 格
            </span>
          )}
        </div>
      </div>

      {/* 快捷键提示 */}
      <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f9f9f9', borderRadius: '4px', fontSize: '12px', color: '#666' }}>
        <strong>快捷键:</strong> 1-9 输入数字 | 空格/Backspace 清除 | Ctrl/Cmd+Z 撤销 | Ctrl/Cmd+Y 重做 | ↑↓←→ 移动选择
      </div>

      {/* 完成成功对话框 */}
      {showCompleteDialog && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000,
        }}>
          <div style={{
            backgroundColor: 'white',
            borderRadius: '8px',
            padding: '40px',
            textAlign: 'center',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
            maxWidth: '400px',
          }}>
            <div style={{
              fontSize: '48px',
              marginBottom: '20px',
            }}>
              🎉
            </div>
            <h2 style={{ 
              margin: '0 0 20px 0',
              color: '#1890ff',
              fontSize: '24px',
            }}>
              恭喜！完成成功
            </h2>
            <p style={{
              margin: '0 0 30px 0',
              color: '#666',
              fontSize: '16px',
              lineHeight: '1.6',
            }}>
              你已经正确完成了这个数独谜题！
              所有格子已锁定，无法再修改。
            </p>
            <button
              onClick={() => setShowCompleteDialog(false)}
              style={{
                padding: '12px 32px',
                fontSize: '16px',
                cursor: 'pointer',
                backgroundColor: '#1890ff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                marginRight: '10px',
              }}
            >
              关闭
            </button>
            <button
              onClick={handleNewGame}
              style={{
                padding: '12px 32px',
                fontSize: '16px',
                cursor: 'pointer',
                backgroundColor: '#52c41a',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
              }}
            >
              新游戏
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default SudokuGame;