import { useState, useEffect } from "react";

export default function HitlerOrKanyeGame() {
  // Game state
  const [gameStarted, setGameStarted] = useState(false);
  const [gameOver, setGameOver] = useState(false);
  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [fadeIn, setFadeIn] = useState(true);

  // Quotes database
  const quotes = [
    {
      text: "I am God's vessel. My greatest pain in life is that I will never be able to see myself perform live.",
      author: "Kanye",
    },
    {
      text: "The victor will never be asked if he told the truth.",
      author: "Hitler",
    },
    {
      text: "I am Warhol. I am the No. 1 most impactful artist of our generation. I am Shakespeare in the flesh.",
      author: "Kanye",
    },
    {
      text: "If you tell a big enough lie and tell it frequently enough, it will be believed.",
      author: "Hitler",
    },
    {
      text: "I feel like I'm too busy writing history to read it.",
      author: "Kanye",
    },
    {
      text: "Great liars are also great magicians.",
      author: "Hitler",
    },
    {
      text: "My greatest pain in life is that I will never be able to see myself perform live.",
      author: "Kanye",
    },
    {
      text: "Words build bridges into unexplored regions.",
      author: "Hitler",
    },
    {
      text: "I'm a creative genius and there's no other way to word it.",
      author: "Kanye",
    },
    {
      text: "Strength lies not in defense but in attack.",
      author: "Hitler",
    },
  ];

  // Handle answer selection
  const handleAnswer = (answer) => {
    if (showAnswer) return;
    
    setSelectedAnswer(answer);
    setShowAnswer(true);
    
    if (answer === quotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
    
    // Delay before moving to next quote
    setTimeout(() => {
      setFadeIn(false);
      setTimeout(() => {
        if (currentQuoteIndex < quotes.length - 1) {
          setCurrentQuoteIndex(currentQuoteIndex + 1);
          setShowAnswer(false);
          setSelectedAnswer(null);
        } else {
          setGameOver(true);
        }
        setFadeIn(true);
      }, 300);
    }, 1500);
  };

  // Start a new game
  const startNewGame = () => {
    setGameStarted(true);
    setGameOver(false);
    setCurrentQuoteIndex(0);
    setScore(0);
    setShowAnswer(false);
    setSelectedAnswer(null);
    setFadeIn(true);
  };

  // Restart the game
  const restartGame = () => {
    startNewGame();
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white flex flex-col items-center justify-center p-4">
      <div className="max-w-2xl w-full bg-slate-800 rounded-xl shadow-2xl overflow-hidden">
        {!gameStarted ? (
          // Game intro screen
          <div className="p-8 flex flex-col items-center">
            <h1 className="text-4xl font-bold mb-6 text-center bg-gradient-to-r from-amber-400 to-red-500 bg-clip-text text-transparent">
              Who Said It?
            </h1>
            <h2 className="text-3xl font-bold mb-8 text-center">Hitler or Kanye?</h2>
            <p className="text-slate-300 mb-8 text-center max-w-md">
              Test your knowledge! Can you tell who said these controversial quotes? 
              Was it Adolf Hitler or Kanye West?
            </p>
            <button
              onClick={startNewGame}
              className="px-8 py-3 bg-gradient-to-r from-amber-500 to-red-600 rounded-full text-white font-bold text-lg transition-all hover:from-amber-600 hover:to-red-700 hover:shadow-lg"
            >
              Start Game
            </button>
          </div>
        ) : gameOver ? (
          // Game over screen
          <div className="p-8 flex flex-col items-center">
            <h2 className="text-3xl font-bold mb-4 text-center">Game Over!</h2>
            <div className="text-6xl font-bold mb-6 text-center bg-gradient-to-r from-amber-400 to-red-500 bg-clip-text text-transparent">
              {score} / {quotes.length}
            </div>
            <p className="text-slate-300 mb-8 text-center">
              {score === quotes.length
                ? "Perfect score! You're an expert!"
                : score >= quotes.length / 2
                ? "Not bad! You know your quotes."
                : "Better luck next time!"}
            </p>
            <button
              onClick={restartGame}
              className="px-8 py-3 bg-gradient-to-r from-amber-500 to-red-600 rounded-full text-white font-bold text-lg transition-all hover:from-amber-600 hover:to-red-700 hover:shadow-lg"
            >
              Play Again
            </button>
          </div>
        ) : (
          // Game play screen
          <div className={`transition-opacity duration-300 ${fadeIn ? 'opacity-100' : 'opacity-0'}`}>
            <div className="bg-slate-700 p-4 flex justify-between items-center">
              <div className="text-sm font-medium text-slate-300">
                Question {currentQuoteIndex + 1} of {quotes.length}
              </div>
              <div className="bg-slate-900 px-4 py-1 rounded-full">
                <span className="text-amber-400 font-bold">Score: {score}</span>
              </div>
            </div>
            
            <div className="p-8">
              <div className="mb-8 min-h-[160px] flex items-center justify-center">
                <div className="bg-slate-900 p-6 rounded-lg shadow-inner w-full">
                  <p className="text-xl text-center italic">
                    "{quotes[currentQuoteIndex].text}"
                  </p>
                </div>
              </div>
              
              <div className="text-center mb-4">
                <p className="text-slate-300 mb-4">Who said this?</p>
                <div className="flex gap-4 justify-center">
                  <button
                    onClick={() => handleAnswer("Hitler")}
                    disabled={showAnswer}
                    className={`px-6 py-3 rounded-lg font-bold text-lg transition-all w-32
                      ${showAnswer && selectedAnswer === "Hitler"
                        ? quotes[currentQuoteIndex].author === "Hitler"
                          ? "bg-green-600 text-white"
                          : "bg-red-600 text-white"
                        : showAnswer && quotes[currentQuoteIndex].author === "Hitler"
                        ? "bg-green-600 text-white"
                        : "bg-slate-700 hover:bg-slate-600 text-white"
                      }`}
                  >
                    Hitler
                  </button>
                  
                  <button
                    onClick={() => handleAnswer("Kanye")}
                    disabled={showAnswer}
                    className={`px-6 py-3 rounded-lg font-bold text-lg transition-all w-32
                      ${showAnswer && selectedAnswer === "Kanye"
                        ? quotes[currentQuoteIndex].author === "Kanye"
                          ? "bg-green-600 text-white"
                          : "bg-red-600 text-white"
                        : showAnswer && quotes[currentQuoteIndex].author === "Kanye"
                        ? "bg-green-600 text-white"
                        : "bg-slate-700 hover:bg-slate-600 text-white"
                      }`}
                  >
                    Kanye
                  </button>
                </div>
              </div>
              
              {showAnswer && (
                <div className="mt-6 text-center animate-fadeIn">
                  <p className={`text-lg font-medium ${selectedAnswer === quotes[currentQuoteIndex].author ? "text-green-400" : "text-red-400"}`}>
                    {selectedAnswer === quotes[currentQuoteIndex].author
                      ? "Correct!"
                      : "Wrong!"}
                  </p>
                  <p className="text-slate-300 mt-2">
                    This was said by <span className="font-bold text-amber-400">{quotes[currentQuoteIndex].author}</span>
                  </p>
                </div>
              )}
            </div>
            
            <div className="bg-slate-900 p-4 flex justify-between items-center">
              <div className="text-sm text-slate-400">
                {showAnswer ? "Next quote loading..." : "Select your answer"}
              </div>
              <div className="text-sm text-slate-400">
                {score} correct so far
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}