import React, { useState, useEffect } from 'react';
    import { AlertCircle, RefreshCw } from 'lucide-react';

    export default function PrisonEscapeGame() {
      const [gameState, setGameState] = useState('playing'); // 'playing', 'won', 'lost'
      const [gridSize, setGridSize] = useState({ rows: 10, cols: 10 });
      const [prisoner, setPrisoner] = useState({ row: 8, col: 1 });
      const [guard, setGuard] = useState({ row: 1, col: 8 });
      const [exit, setExit] = useState({ row: 1, col: 1 });
      const [walls, setWalls] = useState([]);
      const [moveCount, setMoveCount] = useState(0);

      // Initialize the game
      useEffect(() => {
        initializeGame();
      }, []);

      const initializeGame = () => {
        // Reset game state
        setGameState('playing');
        setMoveCount(0);
        
        // Create walls for the prison
        const newWalls = [];
        
        // Outer walls
        for (let i = 0; i < gridSize.rows; i++) {
          if (i !== 0) newWalls.push({ row: i, col: 0 }); // Left wall (except exit row)
          newWalls.push({ row: i, col: gridSize.cols - 1 }); // Right wall
        }
        
        for (let j = 0; j < gridSize.cols; j++) {
          if (j !== 1) newWalls.push({ row: 0, col: j }); // Top wall (except exit column)
          newWalls.push({ row: gridSize.rows - 1, col: j }); // Bottom wall
        }
        
        // Inner walls to create a maze-like structure
        newWalls.push({ row: 2, col: 2 });
        newWalls.push({ row: 2, col: 3 });
        newWalls.push({ row: 2, col: 4 });
        newWalls.push({ row: 2, col: 5 });
        newWalls.push({ row: 2, col: 6 });
        newWalls.push({ row: 3, col: 2 });
        newWalls.push({ row: 4, col: 2 });
        newWalls.push({ row: 4, col: 4 });
        newWalls.push({ row: 4, col: 5 });
        newWalls.push({ row: 4, col: 6 });
        newWalls.push({ row: 4, col: 7 });
        newWalls.push({ row: 5, col: 4 });
        newWalls.push({ row: 6, col: 2 });
        newWalls.push({ row: 6, col: 3 });
        newWalls.push({ row: 6, col: 4 });
        newWalls.push({ row: 6, col: 6 });
        newWalls.push({ row: 6, col: 7 });
        newWalls.push({ row: 7, col: 6 });
        
        setWalls(newWalls);
        
        // Set initial positions
        setPrisoner({ row: 8, col: 1 });
        setGuard({ row: 1, col: 8 });
        setExit({ row: 0, col: 1 });
      };

      // Check if a position has a wall
      const hasWall = (row, col) => {
        return walls.some(wall => wall.row === row && wall.col === col);
      };

      // Check if a move is valid
      const isValidMove = (row, col) => {
        return (
          row >= 0 && 
          row < gridSize.rows && 
          col >= 0 && 
          col < gridSize.cols && 
          !hasWall(row, col)
        );
      };

      // Move the prisoner
      const movePrisoner = (rowDelta, colDelta) => {
        if (gameState !== 'playing') return;
        
        const newRow = prisoner.row + rowDelta;
        const newCol = prisoner.col + colDelta;
        
        if (isValidMove(newRow, newCol)) {
          setPrisoner({ row: newRow, col: newCol });
          setMoveCount(moveCount + 1);
          
          // Check if prisoner reached the exit
          if (newRow === exit.row && newCol === exit.col) {
            setGameState('won');
            return;
          }
          
          // Move the guard twice
          setTimeout(() => moveGuard(), 300);
        }
      };

      // Move the guard (follows the prisoner)
      const moveGuard = () => {
        // First move
        let newGuard = moveGuardOnce(guard, prisoner);
        
        // Check if guard caught the prisoner
        if (newGuard.row === prisoner.row && newGuard.col === prisoner.col) {
          setGuard(newGuard);
          setGameState('lost');
          return;
        }
        
        // Second move
        setTimeout(() => {
          const finalGuard = moveGuardOnce(newGuard, prisoner);
          setGuard(finalGuard);
          
          // Check if guard caught the prisoner after second move
          if (finalGuard.row === prisoner.row && finalGuard.col === prisoner.col) {
            setGameState('lost');
          }
        }, 300);
      };

      // Helper function to move guard once
      const moveGuardOnce = (currentGuard, target) => {
        // Simple pathfinding: try to move horizontally or vertically toward the prisoner
        const rowDiff = target.row - currentGuard.row;
        const colDiff = target.col - currentGuard.col;
        
        let newRow = currentGuard.row;
        let newCol = currentGuard.col;
        
        // Try to move horizontally or vertically (whichever gets closer)
        if (Math.abs(rowDiff) > Math.abs(colDiff)) {
          // Try to move vertically
          newRow = currentGuard.row + (rowDiff > 0 ? 1 : -1);
          if (isValidMove(newRow, currentGuard.col)) {
            return { row: newRow, col: currentGuard.col };
          }
          
          // If vertical move is blocked, try horizontal
          newCol = currentGuard.col + (colDiff > 0 ? 1 : -1);
          if (isValidMove(currentGuard.row, newCol)) {
            return { row: currentGuard.row, col: newCol };
          }
        } else {
          // Try to move horizontally
          newCol = currentGuard.col + (colDiff > 0 ? 1 : -1);
          if (isValidMove(currentGuard.row, newCol)) {
            return { row: currentGuard.row, col: newCol };
          }
          
          // If horizontal move is blocked, try vertical
          newRow = currentGuard.row + (rowDiff > 0 ? 1 : -1);
          if (isValidMove(newRow, currentGuard.col)) {
            return { row: newRow, col: currentGuard.col };
          }
        }
        
        // If both direct moves are blocked, try to find any valid move
        const possibleMoves = [
          { row: currentGuard.row + 1, col: currentGuard.col },
          { row: currentGuard.row - 1, col: currentGuard.col },
          { row: currentGuard.row, col: currentGuard.col + 1 },
          { row: currentGuard.row, col: currentGuard.col - 1 }
        ];
        
        for (const move of possibleMoves) {
          if (isValidMove(move.row, move.col)) {
            return move;
          }
        }
        
        // If no valid moves, stay in place
        return currentGuard;
      };

      // Handle keyboard input
      useEffect(() => {
        const handleKeyDown = (e) => {
          if (gameState !== 'playing') return;
          
          switch (e.key) {
            case 'ArrowUp':
              movePrisoner(-1, 0);
              break;
            case 'ArrowDown':
              movePrisoner(1, 0);
              break;
            case 'ArrowLeft':
              movePrisoner(0, -1);
              break;
            case 'ArrowRight':
              movePrisoner(0, 1);
              break;
            default:
              break;
          }
        };
        
        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
      }, [prisoner, guard, gameState, moveCount]);

      // Render the game board
      const renderCell = (row, col) => {
        const isPrisoner = prisoner.row === row && prisoner.col === col;
        const isGuard = guard.row === row && guard.col === col;
        const isExit = exit.row === row && exit.col === col;
        const isWall = hasWall(row, col);
        
        let cellClass = "w-10 h-10 border border-slate-700 flex items-center justify-center";
        
        if (isWall) {
          return <div key={`${row}-${col}`} className={`${cellClass} bg-slate-800`}></div>;
        } else if (isPrisoner) {
          return <div key={`${row}-${col}`} className={`${cellClass} bg-coral-500`}>🧑</div>;
        } else if (isGuard) {
          return <div key={`${row}-${col}`} className={`${cellClass} bg-navy-600`}>👮</div>;
        } else if (isExit) {
          return <div key={`${row}-${col}`} className={`${cellClass} bg-emerald-500`}>🚪</div>;
        } else {
          return <div key={`${row}-${col}`} className={`${cellClass} bg-slate-200`}></div>;
        }
      };

      return (
        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
          <div className="bg-white rounded-lg shadow-lg p-6 max-w-2xl w-full">
            <h1 className="text-3xl font-bold text-center mb-4 text-slate-800">Prison Escape</h1>
            
            <div className="mb-4 p-4 bg-slate-100 rounded-lg">
              <div className="flex items-start gap-2">
                <AlertCircle className="text-slate-700 mt-1 flex-shrink-0" size={20} />
                <div>
                  <p className="text-slate-700 mb-2">
                    <strong>Goal:</strong> Help the prisoner (🧑) escape through the exit (🚪) while avoiding the guard (👮).
                  </p>
                  <p className="text-slate-700 mb-2">
                    <strong>Rules:</strong> The prisoner moves one cell per turn. The guard moves two cells per turn.
                  </p>
                  <p className="text-slate-700">
                    <strong>Controls:</strong> Use arrow keys to move the prisoner.
                  </p>
                </div>
              </div>
            </div>
            
            {gameState === 'won' && (
              <div className="mb-4 p-4 bg-emerald-100 text-emerald-800 rounded-lg text-center font-bold">
                You escaped! Congratulations! Moves: {moveCount}
              </div>
            )}
            
            {gameState === 'lost' && (
              <div className="mb-4 p-4 bg-red-100 text-red-800 rounded-lg text-center font-bold">
                You were caught by the guard! Try again.
              </div>
            )}
            
            <div className="flex justify-center mb-4">
              <div className="grid grid-cols-10 gap-0 border-2 border-slate-800">
                {Array.from({ length: gridSize.rows }).map((_, row) => (
                  Array.from({ length: gridSize.cols }).map((_, col) => (
                    renderCell(row, col)
                  ))
                ))}
              </div>
            </div>
            
            <div className="flex justify-center">
              <button 
                onClick={initializeGame}
                className="flex items-center gap-2 bg-slate-700 hover:bg-slate-800 text-white font-bold py-2 px-4 rounded"
              >
                <RefreshCw size={16} />
                Restart Game
              </button>
            </div>
            
            {gameState === 'playing' && (
              <div className="mt-4 text-center text-slate-600">
                Moves: {moveCount}
              </div>
            )}
          </div>
        </div>
      );
    }