import { useState } from "react";

export default function KanyeOrHitlerQuiz() {
  const quotes = [
    {
      text: "I am a god.",
      author: "Kanye",
      context: "Lyrics from his song 'I Am a God' (2013)"
    },
    {
      text: "The Jews are the cause of all our misfortunes.",
      author: "Hitler",
      context: "Common antisemitic rhetoric used in Nazi propaganda"
    },
    {
      text: "I will go down as the voice of this generation.",
      author: "Kanye",
      context: "Statement during an interview (2008)"
    },
    {
      text: "The stronger must dominate and not mate with the weaker.",
      author: "Hitler",
      context: "From 'Mein Kampf' (1925)"
    },
    {
      text: "I'm like a vessel, and God has chosen me to be the voice and the connector.",
      author: "Kanye",
      context: "Interview statement (2016)"
    },
    {
      text: "I am the number one human being in music. That means any person that's living or breathing is number two.",
      author: "Kanye",
      context: "Statement during a concert (2013)"
    },
    {
      text: "The victor will never be asked if he told the truth.",
      author: "Hitler",
      context: "Speech to the Reichstag (1939)"
    },
    {
      text: "Jewish people have owned the black voice. Either it's through us or through the management.",
      author: "Kanye",
      context: "Controversial statement during an interview (2022)"
    },
    {
      text: "I believe that I am acting in accordance with the will of the Almighty Creator.",
      author: "Hitler",
      context: "From 'Mein Kampf' (1925)"
    },
    {
      text: "My greatest pain in life is that I will never be able to see myself perform live.",
      author: "Kanye",
      context: "Interview statement (2013)"
    }
  ];

  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [answered, setAnswered] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [gameOver, setGameOver] = useState(false);

  const handleAnswer = (author) => {
    if (answered) return;
    
    setSelectedAnswer(author);
    setAnswered(true);
    
    if (author === quotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
  };

  const nextQuote = () => {
    if (currentQuoteIndex < quotes.length - 1) {
      setCurrentQuoteIndex(currentQuoteIndex + 1);
      setAnswered(false);
      setSelectedAnswer(null);
    } else {
      setGameOver(true);
    }
  };

  const restartGame = () => {
    setCurrentQuoteIndex(0);
    setScore(0);
    setAnswered(false);
    setSelectedAnswer(null);
    setGameOver(false);
  };

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 flex flex-col items-center justify-center p-4">
      <div className="max-w-2xl w-full bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
        <div className="p-6 bg-gray-800 border-b border-gray-700">
          <h1 className="text-3xl font-bold text-center text-yellow-400 mb-2">Who Said It?</h1>
          <h2 className="text-xl text-center text-gray-300">Kanye West or Adolf Hitler</h2>
        </div>
        
        {!gameOver ? (
          <div className="p-6">
            <div className="mb-8">
              <div className="text-center mb-2 text-sm text-gray-400">
                Quote {currentQuoteIndex + 1} of {quotes.length}
              </div>
              <div className="bg-gray-700 p-6 rounded-lg">
                <p className="text-xl italic text-center">"{quotes[currentQuoteIndex].text}"</p>
              </div>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-4 mb-6">
              <button
                onClick={() => handleAnswer("Kanye")}
                disabled={answered}
                className={`flex-1 py-3 px-4 rounded-lg font-medium transition-colors ${
                  answered 
                    ? selectedAnswer === "Kanye"
                      ? quotes[currentQuoteIndex].author === "Kanye"
                        ? "bg-green-600 text-white"
                        : "bg-red-600 text-white"
                      : "bg-gray-600 text-gray-300"
                    : "bg-yellow-600 hover:bg-yellow-500 text-white"
                }`}
              >
                Kanye West
              </button>
              
              <button
                onClick={() => handleAnswer("Hitler")}
                disabled={answered}
                className={`flex-1 py-3 px-4 rounded-lg font-medium transition-colors ${
                  answered 
                    ? selectedAnswer === "Hitler"
                      ? quotes[currentQuoteIndex].author === "Hitler"
                        ? "bg-green-600 text-white"
                        : "bg-red-600 text-white"
                      : "bg-gray-600 text-gray-300"
                    : "bg-gray-600 hover:bg-gray-500 text-white"
                }`}
              >
                Adolf Hitler
              </button>
            </div>
            
            {answered && (
              <div className="mb-6">
                <div className={`p-4 rounded-lg ${
                  selectedAnswer === quotes[currentQuoteIndex].author
                    ? "bg-green-900/30 border border-green-700"
                    : "bg-red-900/30 border border-red-700"
                }`}>
                  <p className="font-medium mb-1">
                    {selectedAnswer === quotes[currentQuoteIndex].author
                      ? "Correct!"
                      : "Incorrect!"}
                  </p>
                  <p>
                    This was said by <span className="font-bold">{quotes[currentQuoteIndex].author}</span>
                  </p>
                  <p className="text-sm text-gray-400 mt-1">
                    {quotes[currentQuoteIndex].context}
                  </p>
                </div>
              </div>
            )}
            
            <div className="flex justify-between items-center">
              <div className="text-lg">
                Score: <span className="font-bold text-yellow-400">{score}</span>
              </div>
              
              {answered && (
                <button
                  onClick={nextQuote}
                  className="py-2 px-4 bg-blue-600 hover:bg-blue-500 rounded-lg font-medium text-white transition-colors"
                >
                  Next Quote
                </button>
              )}
            </div>
          </div>
        ) : (
          <div className="p-6 text-center">
            <h2 className="text-2xl font-bold mb-4">Game Over!</h2>
            <p className="text-xl mb-6">
              Your final score: <span className="font-bold text-yellow-400">{score}</span> out of {quotes.length}
            </p>
            <button
              onClick={restartGame}
              className="py-3 px-6 bg-yellow-600 hover:bg-yellow-500 rounded-lg font-medium text-white transition-colors"
            >
              Play Again
            </button>
          </div>
        )}
        
        <div className="p-4 bg-gray-900 text-xs text-gray-500 text-center">
          This quiz is for educational purposes only. It highlights the importance of critical thinking and historical awareness.
        </div>
      </div>
    </div>
  );
}