import { useState, useEffect } from 'react';

export default function WhoSaidItGame() {
  // Game data - quotes and their sources
  const quotes = [
    { text: "The only thing that I regret is that I can't see my own performance.", source: "Kanye" },
    { text: "I am a god.", source: "Kanye" },
    { text: "I am the greatest artist that God has ever created.", source: "Kanye" },
    { text: "My greatest pain in life is that I will never be able to see myself perform live.", source: "Kanye" },
    { text: "I feel like I'm too busy writing history to read it.", source: "Kanye" },
    { text: "Believe in your flyness, conquer your shyness.", source: "Kanye" },
    { text: "The strong do what they can, the weak accept what they must.", source: "Hitler" },
    { text: "If you tell a big enough lie and tell it frequently enough, it will be believed.", source: "Hitler" },
    { text: "He alone, who owns the youth, gains the future.", source: "Hitler" },
    { text: "Words build bridges into unexplored regions.", source: "Hitler" },
    { text: "Great liars are also great magicians.", source: "Hitler" },
    { text: "The victor will never be asked if he told the truth.", source: "Hitler" },
  ];

  // Game state
  const [gameStarted, setGameStarted] = useState(false);
  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [shuffledQuotes, setShuffledQuotes] = useState([]);
  const [score, setScore] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showAnswer, setShowAnswer] = useState(false);
  const [gameOver, setGameOver] = useState(false);

  // Shuffle quotes when game starts
  useEffect(() => {
    if (gameStarted && shuffledQuotes.length === 0) {
      setShuffledQuotes([...quotes].sort(() => Math.random() - 0.5));
    }
  }, [gameStarted, shuffledQuotes.length, quotes]);

  // Start the game
  const startGame = () => {
    setGameStarted(true);
    setScore(0);
    setCurrentQuoteIndex(0);
    setGameOver(false);
    setShowAnswer(false);
    setSelectedAnswer(null);
    setShuffledQuotes([...quotes].sort(() => Math.random() - 0.5));
  };

  // Handle player's guess
  const handleGuess = (guess) => {
    if (showAnswer) return;
    
    setSelectedAnswer(guess);
    setShowAnswer(true);
    
    if (guess === shuffledQuotes[currentQuoteIndex].source) {
      setScore(score + 1);
    }
    
    // Move to next quote after a delay
    setTimeout(() => {
      if (currentQuoteIndex < shuffledQuotes.length - 1) {
        setCurrentQuoteIndex(currentQuoteIndex + 1);
        setShowAnswer(false);
        setSelectedAnswer(null);
      } else {
        setGameOver(true);
      }
    }, 2000);
  };

  // Reset the game
  const resetGame = () => {
    startGame();
  };

  // Calculate progress percentage
  const progressPercentage = gameStarted && !gameOver 
    ? ((currentQuoteIndex) / shuffledQuotes.length) * 100 
    : 0;

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-gray-100 p-4">
      {!gameStarted ? (
        <div className="text-center max-w-md">
          <h1 className="text-4xl font-bold mb-6 text-amber-400">Who Said It?</h1>
          <p className="mb-8 text-lg">Can you tell whether these quotes were said by Kanye West or Adolf Hitler?</p>
          <button 
            onClick={startGame}
            className="px-8 py-3 bg-amber-500 text-gray-900 rounded-lg font-bold text-lg hover:bg-amber-400 transition-colors"
          >
            Start Game
          </button>
        </div>
      ) : gameOver ? (
        <div className="text-center max-w-md bg-gray-800 p-8 rounded-xl shadow-2xl">
          <h2 className="text-3xl font-bold mb-4 text-amber-400">Game Over!</h2>
          <p className="text-xl mb-6">Your final score: <span className="font-bold text-amber-400">{score}</span> out of {shuffledQuotes.length}</p>
          
          {score === shuffledQuotes.length ? (
            <p className="mb-6">Perfect score! You're an expert at distinguishing between these two... unique individuals.</p>
          ) : score >= shuffledQuotes.length * 0.7 ? (
            <p className="mb-6">Great job! You know your quotes pretty well.</p>
          ) : score >= shuffledQuotes.length * 0.5 ? (
            <p className="mb-6">Not bad! It can be surprisingly difficult to tell these quotes apart.</p>
          ) : (
            <p className="mb-6">Better luck next time! These quotes can be trickier than they seem.</p>
          )}
          
          <button 
            onClick={resetGame}
            className="px-8 py-3 bg-amber-500 text-gray-900 rounded-lg font-bold text-lg hover:bg-amber-400 transition-colors"
          >
            Play Again
          </button>
        </div>
      ) : (
        <div className="w-full max-w-2xl">
          {/* Progress bar */}
          <div className="w-full bg-gray-700 h-2 rounded-full mb-8">
            <div 
              className="bg-amber-500 h-2 rounded-full transition-all duration-500"
              style={{ width: `${progressPercentage}%` }}
            ></div>
          </div>
          
          {/* Score */}
          <div className="text-right mb-4">
            <p className="text-lg">Score: <span className="font-bold text-amber-400">{score}</span> / {currentQuoteIndex}</p>
          </div>
          
          {/* Quote card */}
          <div className="bg-gray-800 p-8 rounded-xl shadow-xl mb-8">
            <p className="text-2xl italic mb-8 leading-relaxed">"{shuffledQuotes[currentQuoteIndex]?.text}"</p>
            
            {/* Answer buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button 
                onClick={() => handleGuess("Kanye")}
                disabled={showAnswer}
                className={`px-6 py-3 rounded-lg font-bold text-lg flex-1 transition-colors ${
                  showAnswer 
                    ? selectedAnswer === "Kanye"
                      ? shuffledQuotes[currentQuoteIndex]?.source === "Kanye"
                        ? "bg-green-600 text-white"
                        : "bg-red-600 text-white"
                      : shuffledQuotes[currentQuoteIndex]?.source === "Kanye"
                        ? "bg-green-600 text-white opacity-50"
                        : "bg-gray-600 text-gray-300 opacity-50"
                    : "bg-amber-500 text-gray-900 hover:bg-amber-400"
                }`}
              >
                Kanye West
              </button>
              
              <button 
                onClick={() => handleGuess("Hitler")}
                disabled={showAnswer}
                className={`px-6 py-3 rounded-lg font-bold text-lg flex-1 transition-colors ${
                  showAnswer 
                    ? selectedAnswer === "Hitler"
                      ? shuffledQuotes[currentQuoteIndex]?.source === "Hitler"
                        ? "bg-green-600 text-white"
                        : "bg-red-600 text-white"
                      : shuffledQuotes[currentQuoteIndex]?.source === "Hitler"
                        ? "bg-green-600 text-white opacity-50"
                        : "bg-gray-600 text-gray-300 opacity-50"
                    : "bg-amber-500 text-gray-900 hover:bg-amber-400"
                }`}
              >
                Adolf Hitler
              </button>
            </div>
          </div>
          
          {/* Feedback */}
          {showAnswer && (
            <div className={`text-center p-4 rounded-lg ${
              selectedAnswer === shuffledQuotes[currentQuoteIndex]?.source
                ? "bg-green-900/30 text-green-300"
                : "bg-red-900/30 text-red-300"
            }`}>
              <p className="text-lg">
                {selectedAnswer === shuffledQuotes[currentQuoteIndex]?.source
                  ? "Correct! "
                  : "Incorrect! "}
                This was said by <span className="font-bold">{shuffledQuotes[currentQuoteIndex]?.source}</span>.
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}