import { useState, useEffect } from 'react';

export default function QuoteAttributionGame() {
  const [quotes, setQuotes] = useState([
    {
      text: "I am a god.",
      author: "Kanye",
      context: "From Kanye's song 'I Am a God' on his 2013 album Yeezus."
    },
    {
      text: "The Jews are responsible for all the wars in the world.",
      author: "Neither",
      context: "This was actually said by Mel Gibson during a 2006 arrest, not by either Hitler or Kanye."
    },
    {
      text: "I believe that I am acting in accordance with the will of the Almighty Creator.",
      author: "Hitler",
      context: "From Hitler's book Mein Kampf, published in 1925."
    },
    {
      text: "My greatest pain in life is that I will never be able to see myself perform live.",
      author: "Kanye",
      context: "Said during a 2013 interview with W Magazine."
    },
    {
      text: "The stronger must dominate and not mate with the weaker.",
      author: "Hitler",
      context: "From Hitler's book Mein Kampf, expressing his views on eugenics."
    },
    {
      text: "I'm like a vessel, and God has chosen me to be the voice and the connector.",
      author: "Kanye",
      context: "Said during a 2016 interview discussing his music and influence."
    },
    {
      text: "The victor will never be asked if he told the truth.",
      author: "Hitler",
      context: "A statement attributed to Hitler regarding propaganda and power."
    },
    {
      text: "I am Warhol. I am the No. 1 most impactful artist of our generation.",
      author: "Kanye",
      context: "Said during a 2013 interview with Sway Calloway."
    },
    {
      text: "Great liars are also great magicians.",
      author: "Hitler",
      context: "A statement attributed to Hitler about the power of deception."
    },
    {
      text: "I'm going to be the first hip-hop designer and because of that I'm going to be bigger than Walmart.",
      author: "Kanye",
      context: "Said during a 2013 interview about his fashion aspirations."
    }
  ]);

  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [gameOver, setGameOver] = useState(false);
  const [userAnswer, setUserAnswer] = useState(null);

  // Shuffle quotes at the beginning
  useEffect(() => {
    const shuffledQuotes = [...quotes].sort(() => Math.random() - 0.5);
    setQuotes(shuffledQuotes);
  }, []);

  const handleGuess = (guess) => {
    setUserAnswer(guess);
    setShowAnswer(true);
    
    if (guess === quotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
  };

  const nextQuestion = () => {
    setShowAnswer(false);
    setUserAnswer(null);
    
    if (currentQuoteIndex < quotes.length - 1) {
      setCurrentQuoteIndex(currentQuoteIndex + 1);
    } else {
      setGameOver(true);
    }
  };

  const restartGame = () => {
    setCurrentQuoteIndex(0);
    setScore(0);
    setShowAnswer(false);
    setGameOver(false);
    setUserAnswer(null);
    const shuffledQuotes = [...quotes].sort(() => Math.random() - 0.5);
    setQuotes(shuffledQuotes);
  };

  return (
    <div className="min-h-screen bg-slate-100 flex flex-col items-center justify-center p-4">
      <div className="max-w-md w-full bg-white rounded-xl shadow-lg overflow-hidden">
        <div className="bg-slate-800 text-white p-6">
          <h1 className="text-2xl font-bold text-center">Quote Attribution Quiz</h1>
          <p className="text-center text-slate-300 mt-1">
            Test your knowledge of historical and contemporary figures
          </p>
        </div>
        
        {!gameOver ? (
          <div className="p-6">
            <div className="mb-8">
              <div className="flex justify-between text-sm text-slate-500 mb-2">
                <span>Question {currentQuoteIndex + 1} of {quotes.length}</span>
                <span>Score: {score}</span>
              </div>
              
              <div className="bg-slate-50 p-6 rounded-lg border border-slate-200 mb-6">
                <p className="text-xl italic text-center">"{quotes[currentQuoteIndex].text}"</p>
              </div>
              
              <p className="text-center font-medium mb-4">Who said this?</p>
              
              <div className="grid grid-cols-2 gap-4 mb-4">
                <button
                  onClick={() => handleGuess("Hitler")}
                  disabled={showAnswer}
                  className={`py-3 px-4 rounded-lg font-medium transition-colors ${
                    showAnswer 
                      ? userAnswer === "Hitler"
                        ? quotes[currentQuoteIndex].author === "Hitler"
                          ? "bg-green-100 text-green-800 border-2 border-green-500"
                          : "bg-red-100 text-red-800 border-2 border-red-500"
                        : quotes[currentQuoteIndex].author === "Hitler"
                          ? "bg-green-100 text-green-800 border-2 border-green-500"
                          : "bg-slate-100 text-slate-500"
                      : "bg-slate-100 hover:bg-slate-200 text-slate-800"
                  }`}
                >
                  Hitler
                </button>
                <button
                  onClick={() => handleGuess("Kanye")}
                  disabled={showAnswer}
                  className={`py-3 px-4 rounded-lg font-medium transition-colors ${
                    showAnswer 
                      ? userAnswer === "Kanye"
                        ? quotes[currentQuoteIndex].author === "Kanye"
                          ? "bg-green-100 text-green-800 border-2 border-green-500"
                          : "bg-red-100 text-red-800 border-2 border-red-500"
                        : quotes[currentQuoteIndex].author === "Kanye"
                          ? "bg-green-100 text-green-800 border-2 border-green-500"
                          : "bg-slate-100 text-slate-500"
                      : "bg-slate-100 hover:bg-slate-200 text-slate-800"
                  }`}
                >
                  Kanye West
                </button>
              </div>
              
              <button
                onClick={() => handleGuess("Neither")}
                disabled={showAnswer}
                className={`w-full py-2 px-4 rounded-lg font-medium transition-colors mb-4 ${
                  showAnswer 
                    ? userAnswer === "Neither"
                      ? quotes[currentQuoteIndex].author === "Neither"
                        ? "bg-green-100 text-green-800 border-2 border-green-500"
                        : "bg-red-100 text-red-800 border-2 border-red-500"
                      : quotes[currentQuoteIndex].author === "Neither"
                        ? "bg-green-100 text-green-800 border-2 border-green-500"
                        : "bg-slate-100 text-slate-500"
                    : "bg-slate-100 hover:bg-slate-200 text-slate-800"
                }`}
              >
                Neither
              </button>
            </div>
            
            {showAnswer && (
              <div className="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
                <p className="font-medium text-blue-800 mb-1">
                  {userAnswer === quotes[currentQuoteIndex].author 
                    ? "Correct!" 
                    : `Incorrect. This was said by ${quotes[currentQuoteIndex].author}.`}
                </p>
                <p className="text-sm text-blue-700">{quotes[currentQuoteIndex].context}</p>
              </div>
            )}
            
            {showAnswer && (
              <button
                onClick={nextQuestion}
                className="w-full py-3 px-4 bg-slate-800 text-white rounded-lg font-medium hover:bg-slate-700 transition-colors"
              >
                Next Question
              </button>
            )}
          </div>
        ) : (
          <div className="p-6 text-center">
            <h2 className="text-2xl font-bold mb-2">Quiz Complete!</h2>
            <p className="text-lg mb-6">Your final score: {score} out of {quotes.length}</p>
            
            <div className="mb-6">
              {score === quotes.length ? (
                <p className="text-green-600 font-medium">Perfect score! You really know your quotes.</p>
              ) : score >= quotes.length * 0.7 ? (
                <p className="text-blue-600 font-medium">Great job! You have a good knowledge of these figures.</p>
              ) : score >= quotes.length * 0.5 ? (
                <p className="text-amber-600 font-medium">Not bad! You got half or more correct.</p>
              ) : (
                <p className="text-slate-600 font-medium">This can be a tricky subject. Keep learning!</p>
              )}
            </div>
            
            <button
              onClick={restartGame}
              className="w-full py-3 px-4 bg-slate-800 text-white rounded-lg font-medium hover:bg-slate-700 transition-colors"
            >
              Play Again
            </button>
          </div>
        )}
        
        <div className="bg-slate-50 p-4 border-t border-slate-200">
          <p className="text-xs text-slate-500 text-center">
            This quiz is designed for educational purposes to highlight how quotes can be misattributed or taken out of context.
            Understanding the source and context of statements is crucial for media literacy.
          </p>
        </div>
      </div>
    </div>
  );
}