import { useState } from 'react';

export default function QuoteQuiz() {
  // Quiz data with much more difficult quotes
  const quizData = [
    {
      quote: "Great liars are also great magicians.",
      source: "Hitler",
      context: "From 'Mein Kampf', discussing propaganda techniques"
    },
    {
      quote: "I'm a creative genius and there's no other way to word it.",
      source: "Kanye",
      context: "Said during a 2013 interview with Jimmy Kimmel"
    },
    {
      quote: "The victor will never be asked if he told the truth.",
      source: "Hitler",
      context: "Statement made in private to his generals, 1939"
    },
    {
      quote: "People always tell you, 'Be humble. Be humble.' When was the last time someone told you to be amazing?",
      source: "Kanye",
      context: "From a 2009 interview with Details magazine"
    },
    {
      quote: "If you want to shine like the sun, first you have to burn like it.",
      source: "Neither",
      context: "This is actually a quote from Adolf Hitler's propaganda minister Joseph Goebbels"
    },
    {
      quote: "I am the law, and I am the father and the sun and the moon.",
      source: "Neither",
      context: "This is a quote from the character Immortan Joe in the film 'Mad Max: Fury Road'"
    },
    {
      quote: "I am not impressed by money, followers, degrees, or titles. I'm impressed by the way someone treats other human beings.",
      source: "Neither",
      context: "This is a popular quote often misattributed to various people, but has no verified source"
    },
    {
      quote: "I liberate minds with my music. That's more important than liberating a few people from apartheid or whatever.",
      source: "Kanye",
      context: "Said in a 2015 interview with the Sunday Times"
    },
    {
      quote: "Words build bridges into unexplored regions.",
      source: "Hitler",
      context: "From a speech on propaganda in 1936"
    },
    {
      quote: "I'm like a vessel, and God has chosen me to be the voice and the connector.",
      source: "Kanye",
      context: "From a 2016 interview discussing his creative process"
    },
    {
      quote: "It is not truth that matters, but victory.",
      source: "Hitler",
      context: "From a private conversation recorded by Hermann Rauschning"
    },
    {
      quote: "My greatest pain in life is that I will never be able to see myself perform live.",
      source: "Kanye",
      context: "Said during a 2013 interview with W Magazine"
    },
    {
      quote: "Humanitarianism is the expression of stupidity and cowardice.",
      source: "Hitler",
      context: "From a dinner speech in 1942"
    },
    {
      quote: "I feel like I'm too busy writing history to read it.",
      source: "Kanye",
      context: "Tweet from January 2016"
    },
    {
      quote: "The masses are blind and stupid.",
      source: "Neither",
      context: "This is a paraphrase of ideas from Nietzsche, not a direct quote from either Kanye or Hitler"
    },
    {
      quote: "I am the nucleus.",
      source: "Kanye",
      context: "From a 2013 New York Times interview"
    },
    {
      quote: "The doom of a nation can be averted only by a storm of flowing passion, but only those who are passionate themselves can arouse passion in others.",
      source: "Hitler",
      context: "From a speech in Munich, 1923"
    },
    {
      quote: "For me, money is not my definition of success. Inspiring people is a definition of success.",
      source: "Kanye",
      context: "From a 2015 interview with Time magazine"
    },
    {
      quote: "Obstacles do not exist to be surrendered to, but only to be broken.",
      source: "Hitler",
      context: "From a speech to Nazi party members, 1933"
    },
    {
      quote: "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers.",
      source: "Kanye",
      context: "From a 2013 interview with Sway Calloway"
    }
  ];

  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [gameOver, setGameOver] = useState(false);

  const handleAnswer = (answer) => {
    setSelectedAnswer(answer);
    setShowAnswer(true);
    
    if (answer === quizData[currentQuestionIndex].source) {
      setScore(score + 1);
    }
  };

  const nextQuestion = () => {
    setShowAnswer(false);
    setSelectedAnswer(null);
    
    if (currentQuestionIndex < quizData.length - 1) {
      setCurrentQuestionIndex(currentQuestionIndex + 1);
    } else {
      setGameOver(true);
    }
  };

  const restartGame = () => {
    setCurrentQuestionIndex(0);
    setScore(0);
    setShowAnswer(false);
    setSelectedAnswer(null);
    setGameOver(false);
  };

  // Function to get feedback based on score
  const getFeedback = () => {
    const percentage = (score / quizData.length) * 100;
    
    if (percentage === 100) return "Incredible! Are you a historian or Kanye's biographer?";
    if (percentage >= 80) return "Impressive! You really know your controversial figures.";
    if (percentage >= 60) return "Good job! This was not easy.";
    if (percentage >= 40) return "Not bad for such difficult quotes.";
    if (percentage >= 20) return "These were tough quotes - don't feel bad!";
    return "Wow, these quotes really are hard to distinguish!";
  };

  return (
    <div className="min-h-screen bg-slate-800 text-ivory-100 flex flex-col items-center justify-center p-4">
      <div className="w-full max-w-md bg-slate-700 rounded-lg shadow-xl overflow-hidden">
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h1 className="text-2xl font-bold text-coral-400">Who Said It:</h1>
            <span className="bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full">HARD MODE</span>
          </div>
          
          {!gameOver ? (
            <>
              <div className="flex justify-between mb-4">
                <span className="text-sage-300">Question {currentQuestionIndex + 1}/{quizData.length}</span>
                <span className="text-sage-300">Score: {score}</span>
              </div>
              
              <div className="bg-slate-600 p-6 rounded-lg mb-6">
                <p className="text-xl text-center italic">"{quizData[currentQuestionIndex].quote}"</p>
              </div>
              
              {!showAnswer ? (
                <div className="grid grid-cols-2 gap-4 mb-6">
                  <button 
                    onClick={() => handleAnswer("Kanye")}
                    className="bg-coral-500 hover:bg-coral-600 text-white py-3 px-4 rounded-lg transition-colors"
                  >
                    Kanye
                  </button>
                  <button 
                    onClick={() => handleAnswer("Hitler")}
                    className="bg-slate-500 hover:bg-slate-600 text-white py-3 px-4 rounded-lg transition-colors"
                  >
                    Hitler
                  </button>
                  <button 
                    onClick={() => handleAnswer("Neither")}
                    className="col-span-2 bg-sage-500 hover:bg-sage-600 text-white py-3 px-4 rounded-lg transition-colors"
                  >
                    Neither
                  </button>
                </div>
              ) : (
                <div className="mb-6">
                  <div className={`p-4 rounded-lg mb-4 ${
                    selectedAnswer === quizData[currentQuestionIndex].source 
                      ? "bg-green-600 text-white" 
                      : "bg-red-600 text-white"
                  }`}>
                    {selectedAnswer === quizData[currentQuestionIndex].source 
                      ? "Correct!" 
                      : `Incorrect! It was ${quizData[currentQuestionIndex].source}.`}
                  </div>
                  <div className="bg-slate-600 p-4 rounded-lg">
                    <p className="text-sm">{quizData[currentQuestionIndex].context}</p>
                  </div>
                  <button 
                    onClick={nextQuestion}
                    className="w-full bg-sage-500 hover:bg-sage-600 text-white py-3 px-4 rounded-lg mt-4 transition-colors"
                  >
                    Next Question
                  </button>
                </div>
              )}
            </>
          ) : (
            <div className="text-center">
              <h2 className="text-2xl mb-4">Quiz Complete!</h2>
              <p className="text-xl mb-6">Your final score: {score}/{quizData.length}</p>
              <p className="mb-6 text-sage-400">{getFeedback()}</p>
              
              <button 
                onClick={restartGame}
                className="bg-coral-500 hover:bg-coral-600 text-white py-3 px-6 rounded-lg transition-colors"
              >
                Play Again
              </button>
            </div>
          )}
        </div>
      </div>
      
      <p className="mt-6 text-sm text-slate-400 max-w-md text-center">
        This hard mode features much more ambiguous quotes that are genuinely difficult to attribute correctly. Some quotes may surprise you with their actual source.
      </p>
    </div>
  );
}