Sudoku with Friends

// Core Sudoku generation algorithm
class SudokuGenerator {
  private grid: number[][];

  generatePuzzle(difficulty: Difficulty): number[][] {
    // Start with a solved grid
    this.grid = this.generateSolvedGrid();

    // Remove numbers based on difficulty
    const cellsToRemove = this.getCellsToRemove(difficulty);
    this.removeCells(cellsToRemove);

    return this.grid;
  }

  private generateSolvedGrid(): number[][] {
    // Backtracking algorithm to create valid Sudoku
    const grid = Array(9).fill(null).map(() => Array(9).fill(0));
    this.solveGrid(grid);
    return grid;
  }

  private solveGrid(grid: number[][]): boolean {
    for (let row = 0; row < 9; row++) {
      for (let col = 0; col < 9; col++) {
        if (grid[row][col] === 0) {
          const numbers = this.shuffleArray([1, 2, 3, 4, 5, 6, 7, 8, 9]);

          for (const num of numbers) {
            if (this.isValid(grid, row, col, num)) {
              grid[row][col] = num;
              if (this.solveGrid(grid)) return true;
              grid[row][col] = 0;
            }
          }
          return false;
        }
      }
    }
    return true;
  }
}

// Real-time game state management
export const useGameState = () => {
  const [gameState, setGameState] = useState<GameState | null>(null);
  const [players, setPlayers] = useState<Player[]>([]);

  useEffect(() => {
    const gameRef = ref(database, `games/${roomId}`);
    const playersRef = ref(database, `games/${roomId}/players`);

    // Listen for game state changes
    onValue(gameRef, (snapshot) => {
      const data = snapshot.val();
      if (data) {
        setGameState(data);
      }
    });

    // Listen for player presence
    onValue(playersRef, (snapshot) => {
      const playersData = snapshot.val();
      if (playersData) {
        const playersList = Object.values(playersData);
        setPlayers(playersList);
      }
    });

    return () => {
      off(gameRef);
      off(playersRef);
    };
  }, [roomId]);

  const updateCell = useCallback(async (row: number, col: number, value: number) => {
    try {
      const updates: any = {};
      updates[`games/${roomId}/grid/${row}/${col}`] = value;
      updates[`games/${roomId}/lastMove`] = {
        row,
        col,
        value,
        playerId: currentPlayer.id,
        timestamp: serverTimestamp()
      };

      await update(ref(database), updates);
    } catch (error) {
      console.error('Failed to update cell:', error);
    }
  }, [roomId, currentPlayer]);

  return { gameState, players, updateCell };
};

// Responsive Sudoku grid component
const SudokuGrid: React.FC<SudokuGridProps> = ({
  grid,
  selectedCell,
  onCellSelect,
  conflicts
}) => {
  return (
    <div className="grid grid-cols-9 gap-px bg-gray-300 rounded-lg p-1">
      {grid.map((row, rowIndex) =>
        row.map((cell, colIndex) => {
          const isSelected = selectedCell?.row === rowIndex &&
                           selectedCell?.col === colIndex;
          const hasConflict = conflicts.some(
            c => c.row === rowIndex && c.col === colIndex
          );

          return (
            <button
              key={`${rowIndex}-${colIndex}`}
              className={`
                aspect-square text-lg font-semibold
                transition-all duration-200
                ${isSelected ? 'bg-blue-500 text-white' : 'bg-white'}
                ${hasConflict ? 'bg-red-100 text-red-600' : ''}
                hover:bg-blue-50 focus:outline-none focus:ring-2
                focus:ring-blue-500 focus:ring-offset-2
              `}
              onClick={() => onCellSelect(rowIndex, colIndex)}
              aria-label={`Cell ${rowIndex + 1}, ${colIndex + 1}`}
            >
              {cell || ''}
            </button>
          );
        })
      )}
    </div>
  );
};