import { useState, useEffect, useCallback } from 'react';
import { X } from 'lucide-react';

export default function WhackAMoleGame() {
  const [gameActive, setGameActive] = useState(false);
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(30);
  const [moles, setMoles] = useState(Array(9).fill(false));
  const [gameOver, setGameOver] = useState(false);
  const [highScore, setHighScore] = useState(0);

  // Generate a new mole
  const generateMole = useCallback(() => {
    if (!gameActive) return;
    
    const newMoles = [...moles];
    // Hide all moles first
    newMoles.fill(false);
    
    // Show 1-3 moles randomly
    const numberOfMoles = Math.floor(Math.random() * 3) + 1;
    for (let i = 0; i < numberOfMoles; i++) {
      const randomIndex = Math.floor(Math.random() * 9);
      newMoles[randomIndex] = true;
    }
    
    setMoles(newMoles);
  }, [moles, gameActive]);

  // Handle whacking a mole
  const whackMole = (index) => {
    if (!gameActive || !moles[index]) return;
    
    // Update score
    setScore(prevScore => prevScore + 1);
    
    // Hide the mole
    const newMoles = [...moles];
    newMoles[index] = false;
    setMoles(newMoles);
  };

  // Start the game
  const startGame = () => {
    setGameActive(true);
    setScore(0);
    setTimeLeft(30);
    setMoles(Array(9).fill(false));
    setGameOver(false);
  };

  // Timer effect
  useEffect(() => {
    if (!gameActive) return;
    
    const timer = setInterval(() => {
      setTimeLeft(prevTime => {
        if (prevTime <= 1) {
          clearInterval(timer);
          setGameActive(false);
          setGameOver(true);
          setHighScore(prevHighScore => Math.max(prevHighScore, score));
          return 0;
        }
        return prevTime - 1;
      });
    }, 1000);
    
    return () => clearInterval(timer);
  }, [gameActive, score]);

  // Mole generation effect
  useEffect(() => {
    if (!gameActive) return;
    
    const moleInterval = setInterval(generateMole, 1000);
    return () => clearInterval(moleInterval);
  }, [gameActive, generateMole]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-lavender p-4 font-inter">
      <div className="w-full max-w-md bg-white rounded-xl shadow-lg overflow-hidden">
        <div className="bg-teal-500 p-4 text-white text-center">
          <h1 className="text-2xl font-bold mb-2">Whack-a-Mole</h1>
          <div className="flex justify-between">
            <div className="text-xl">Score: {score}</div>
            <div className="text-xl">Time: {timeLeft}s</div>
          </div>
        </div>
        
        {!gameActive && !gameOver && (
          <div className="p-8 text-center">
            <h2 className="text-xl mb-4">Ready to play?</h2>
            <p className="mb-6 text-gray-600">Click on the moles as they appear to score points!</p>
            <button 
              onClick={startGame}
              className="bg-coral hover:bg-coral/90 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105"
            >
              Start Game
            </button>
          </div>
        )}
        
        {gameActive && (
          <div className="p-4 grid grid-cols-3 gap-4">
            {moles.map((active, index) => (
              <div 
                key={index}
                onClick={() => whackMole(index)}
                className={`h-24 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-150 ${
                  active ? 'bg-amber-400 shadow-md transform scale-105' : 'bg-gray-200'
                }`}
              >
                {active && (
                  <div className="w-12 h-12 bg-brown-600 rounded-full flex items-center justify-center">
                    <div className="w-8 h-8 bg-brown-800 rounded-full"></div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
        
        {gameOver && (
          <div className="p-8 text-center">
            <h2 className="text-2xl font-bold mb-2">Game Over!</h2>
            <p className="text-xl mb-2">Your score: {score}</p>
            <p className="text-gray-600 mb-6">High score: {highScore}</p>
            <button 
              onClick={startGame}
              className="bg-coral hover:bg-coral/90 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105"
            >
              Play Again
            </button>
          </div>
        )}
      </div>
      
      <style jsx global>{`
        :root {
          --coral: #FF7F50;
          --teal: #20B2AA;
          --amber: #FFBF00;
          --lavender: #E6E6FA;
        }
        
        .bg-coral { background-color: var(--coral); }
        .bg-teal-500 { background-color: var(--teal); }
        .bg-amber-400 { background-color: var(--amber); }
        .bg-lavender { background-color: var(--lavender); }
        .bg-brown-600 { background-color: #8B4513; }
        .bg-brown-800 { background-color: #5D2906; }
      `}</style>
    </div>
  );
}