import React, { useState, useEffect, useRef } from 'react';
import { ArrowLeft, ArrowRight } from 'lucide-react';

export default function CarRacingGame() {
  const [gameStarted, setGameStarted] = useState(false);
  const [gameOver, setGameOver] = useState(false);
  const [score, setScore] = useState(0);
  const [highScore, setHighScore] = useState(0);
  const [carPosition, setCarPosition] = useState(50);
  const [obstacles, setObstacles] = useState([]);
  const [speed, setSpeed] = useState(5);
  const gameAreaRef = useRef(null);
  const animationFrameRef = useRef(null);
  const lastObstacleTimeRef = useRef(0);

  // Game dimensions
  const carWidth = 10;
  const carHeight = 15;
  const obstacleWidth = 10;
  const obstacleHeight = 15;
  const roadWidth = 100;

  // Start the game
  const startGame = () => {
    setGameStarted(true);
    setGameOver(false);
    setScore(0);
    setCarPosition(50);
    setObstacles([]);
    setSpeed(5);
    lastObstacleTimeRef.current = Date.now();
    gameLoop();
  };

  // Game loop
  const gameLoop = () => {
    if (gameAreaRef.current) {
      updateGameState();
      animationFrameRef.current = requestAnimationFrame(gameLoop);
    }
  };

  // Update game state
  const updateGameState = () => {
    // Increase score
    setScore(prevScore => {
      const newScore = prevScore + 1;
      if (newScore > highScore) {
        setHighScore(newScore);
      }
      return newScore;
    });

    // Increase speed gradually
    if (score > 0 && score % 500 === 0) {
      setSpeed(prevSpeed => Math.min(prevSpeed + 1, 15));
    }

    // Generate new obstacles
    const now = Date.now();
    if (now - lastObstacleTimeRef.current > 1500 - speed * 50) {
      const newObstacleX = Math.random() * (roadWidth - obstacleWidth);
      setObstacles(prevObstacles => [
        ...prevObstacles,
        { x: newObstacleX, y: -obstacleHeight }
      ]);
      lastObstacleTimeRef.current = now;
    }

    // Move obstacles
    setObstacles(prevObstacles => {
      const updatedObstacles = prevObstacles
        .map(obstacle => ({
          ...obstacle,
          y: obstacle.y + speed
        }))
        .filter(obstacle => obstacle.y < 100);

      // Check for collisions
      const collision = updatedObstacles.some(obstacle => 
        obstacle.y + obstacleHeight > 80 && 
        obstacle.y < 80 + carHeight &&
        obstacle.x + obstacleWidth > carPosition && 
        obstacle.x < carPosition + carWidth
      );

      if (collision) {
        setGameOver(true);
        cancelAnimationFrame(animationFrameRef.current);
      }

      return updatedObstacles;
    });
  };

  // Move car left
  const moveLeft = () => {
    if (!gameOver && gameStarted) {
      setCarPosition(prevPos => Math.max(0, prevPos - 10));
    }
  };

  // Move car right
  const moveRight = () => {
    if (!gameOver && gameStarted) {
      setCarPosition(prevPos => Math.min(roadWidth - carWidth, prevPos + 10));
    }
  };

  // Clean up animation frame on unmount
  useEffect(() => {
    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, []);

  // Handle keyboard controls
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowLeft') {
        moveLeft();
      } else if (e.key === 'ArrowRight') {
        moveRight();
      } else if (e.key === ' ' || e.key === 'Enter') {
        if (gameOver || !gameStarted) {
          startGame();
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [gameOver, gameStarted]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-4">
      <h1 className="text-3xl font-bold mb-4 text-coral-400">Street Racer</h1>
      
      <div className="mb-4 flex justify-between w-full max-w-md">
        <div className="text-lg">Score: <span className="font-bold">{score}</span></div>
        <div className="text-lg">High Score: <span className="font-bold">{highScore}</span></div>
      </div>
      
      <div 
        ref={gameAreaRef}
        className="relative w-full max-w-md h-96 bg-gray-800 border-4 border-gray-700 overflow-hidden"
        style={{ 
          backgroundImage: 'repeating-linear-gradient(#1a2b3c 0px, #1a2b3c 10px, #2a3b4c 10px, #2a3b4c 20px)',
          backgroundSize: '100% 20px',
          backgroundPosition: `0 ${score % 20}px`
        }}
      >
        {/* Road markings */}
        <div className="absolute left-1/2 h-full w-2 bg-yellow-400 opacity-75 transform -translate-x-1/2"
             style={{ backgroundImage: 'repeating-linear-gradient(#ffd700 0px, #ffd700 30px, transparent 30px, transparent 60px)' }}></div>
        
        {/* Player car */}
        {(gameStarted || gameOver) && (
          <div 
            className="absolute w-10 h-15 bg-coral-500 rounded-md"
            style={{ 
              left: `${carPosition}%`, 
              bottom: '20%', 
              width: `${carWidth}%`, 
              height: `${carHeight}%`,
              backgroundColor: '#ff7f50',
              boxShadow: '0 0 10px rgba(255, 127, 80, 0.7)'
            }}
          >
            {/* Car details */}
            <div className="absolute top-1/4 left-1/4 w-1/2 h-1/4 bg-sky-200"></div>
            <div className="absolute bottom-0 left-0 w-1/4 h-1/4 bg-gray-800"></div>
            <div className="absolute bottom-0 right-0 w-1/4 h-1/4 bg-gray-800"></div>
          </div>
        )}
        
        {/* Obstacles */}
        {obstacles.map((obstacle, index) => (
          <div 
            key={index}
            className="absolute bg-teal-500 rounded-md"
            style={{ 
              left: `${obstacle.x}%`, 
              top: `${obstacle.y}%`, 
              width: `${obstacleWidth}%`, 
              height: `${obstacleHeight}%`,
              backgroundColor: '#008080'
            }}
          >
            {/* Obstacle details */}
            <div className="absolute top-1/4 left-1/4 w-1/2 h-1/4 bg-sky-200"></div>
            <div className="absolute bottom-0 left-0 w-1/4 h-1/4 bg-gray-800"></div>
            <div className="absolute bottom-0 right-0 w-1/4 h-1/4 bg-gray-800"></div>
          </div>
        ))}
        
        {/* Start screen */}
        {!gameStarted && !gameOver && (
          <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-70 p-4">
            <h2 className="text-2xl font-bold mb-4 text-coral-400">Street Racer</h2>
            <p className="text-center mb-6">Avoid obstacles by moving left and right. How far can you go?</p>
            <button 
              onClick={startGame}
              className="px-6 py-3 bg-coral-500 text-white font-bold rounded-lg hover:bg-coral-600 transition"
            >
              Start Game
            </button>
          </div>
        )}
        
        {/* Game over screen */}
        {gameOver && (
          <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-70 p-4">
            <h2 className="text-2xl font-bold mb-2 text-red-500">Game Over</h2>
            <p className="text-xl mb-1">Score: {score}</p>
            <p className="text-lg mb-6">High Score: {highScore}</p>
            <button 
              onClick={startGame}
              className="px-6 py-3 bg-coral-500 text-white font-bold rounded-lg hover:bg-coral-600 transition"
            >
              Play Again
            </button>
          </div>
        )}
      </div>
      
      {/* Control buttons */}
      <div className="flex justify-between w-full max-w-md mt-6">
        <button 
          onClick={moveLeft}
          className="p-6 bg-gray-700 rounded-full hover:bg-gray-600 active:bg-gray-500 transition"
          disabled={gameOver || !gameStarted}
        >
          <ArrowLeft size={24} />
        </button>
        
        <button 
          onClick={moveRight}
          className="p-6 bg-gray-700 rounded-full hover:bg-gray-600 active:bg-gray-500 transition"
          disabled={gameOver || !gameStarted}
        >
          <ArrowRight size={24} />
        </button>
      </div>
      
      <div className="mt-6 text-sm text-gray-400">
        <p>Tip: You can also use keyboard arrow keys to control the car</p>
      </div>
    </div>
  );
}