import { useState, useEffect } from 'react';
import { Shuffle, Check, X, RefreshCw, Info } from 'lucide-react';

// Quote database with attribution
const quotes = [
  {
    text: "I am a god.",
    author: "Kanye West",
    context: "From his 2013 album 'Yeezus'"
  },
  {
    text: "The strong do what they can and the weak suffer what they must.",
    author: "Neither",
    context: "Actually from Thucydides, ancient Greek historian"
  },
  {
    text: "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers.",
    author: "Kanye West",
    context: "Said during a 2013 interview with Sway Calloway"
  },
  {
    text: "The victor will never be asked if he told the truth.",
    author: "Hitler",
    context: "From a speech in 1933"
  },
  {
    text: "I am Warhol. I am the No. 1 most impactful artist of our generation. I am Shakespeare in the flesh.",
    author: "Kanye West",
    context: "Said during a 2013 interview with Zane Lowe"
  },
  {
    text: "If you want to shine like the sun, first you have to burn like it.",
    author: "Hitler",
    context: "From a speech to Nazi party members"
  },
  {
    text: "My greatest pain in life is that I will never be able to see myself perform live.",
    author: "Kanye West",
    context: "Said during a 2013 interview"
  },
  {
    text: "Great liars are also great magicians.",
    author: "Hitler",
    context: "From 'Mein Kampf', 1925"
  },
  {
    text: "I'm a creative genius and there's no other way to word it.",
    author: "Kanye West",
    context: "Said during a 2013 interview with Jimmy Kimmel"
  },
  {
    text: "Words build bridges into unexplored regions.",
    author: "Hitler",
    context: "From a speech on propaganda"
  },
  {
    text: "I feel like I'm too busy writing history to read it.",
    author: "Kanye West",
    context: "Tweet from 2012"
  },
  {
    text: "The very first essential for success is a perpetually constant and regular employment of violence.",
    author: "Hitler",
    context: "From 'Mein Kampf', 1925"
  }
];

export default function WhoSaidItGame() {
  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(null);
  const [usedQuotes, setUsedQuotes] = useState([]);
  const [score, setScore] = useState(0);
  const [totalAnswered, setTotalAnswered] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showAnswer, setShowAnswer] = useState(false);
  const [gameOver, setGameOver] = useState(false);
  const [showInfo, setShowInfo] = useState(true);

  // Get a new random quote that hasn't been used yet
  const getRandomQuote = () => {
    const availableQuotes = quotes.filter((_, index) => !usedQuotes.includes(index));
    
    if (availableQuotes.length === 0) {
      setGameOver(true);
      return;
    }
    
    const randomIndex = Math.floor(Math.random() * availableQuotes.length);
    const quoteIndex = quotes.findIndex(quote => quote === availableQuotes[randomIndex]);
    
    setCurrentQuoteIndex(quoteIndex);
    setUsedQuotes([...usedQuotes, quoteIndex]);
    setSelectedAnswer(null);
    setShowAnswer(false);
  };

  // Start the game
  useEffect(() => {
    if (!showInfo && currentQuoteIndex === null && !gameOver) {
      getRandomQuote();
    }
  }, [showInfo, currentQuoteIndex, gameOver]);

  // Handle user's answer
  const handleAnswer = (answer) => {
    if (selectedAnswer !== null) return;
    
    setSelectedAnswer(answer);
    setShowAnswer(true);
    
    if (answer === quotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
    
    setTotalAnswered(totalAnswered + 1);
  };

  // Move to next quote
  const nextQuote = () => {
    getRandomQuote();
  };

  // Restart the game
  const restartGame = () => {
    setUsedQuotes([]);
    setScore(0);
    setTotalAnswered(0);
    setCurrentQuoteIndex(null);
    setSelectedAnswer(null);
    setShowAnswer(false);
    setGameOver(false);
    getRandomQuote();
  };

  // Calculate progress percentage
  const progressPercentage = (totalAnswered / quotes.length) * 100;

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 flex flex-col items-center justify-center p-4">
      {/* Info Modal */}
      {showInfo && (
        <div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-10 p-4">
          <div className="bg-gray-800 p-6 rounded-lg max-w-md w-full">
            <h2 className="text-2xl font-bold text-amber-400 mb-4">Who Said It?</h2>
            <p className="mb-4">
              This game presents quotes that might be surprising or controversial. Your task is to guess whether each quote was said by Kanye West or Adolf Hitler.
            </p>
            <p className="mb-4">
              The game highlights how rhetoric can sometimes be misleading and challenges our assumptions about the sources of certain statements.
            </p>
            <p className="mb-4 text-amber-300">
              Note: This game is meant to be educational and thought-provoking, not to trivialize historical atrocities or to mock individuals.
            </p>
            <button 
              onClick={() => setShowInfo(false)}
              className="w-full py-3 bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold rounded-lg transition-colors"
            >
              Start Game
            </button>
          </div>
        </div>
      )}

      {/* Main Game UI */}
      <div className="max-w-2xl w-full bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
        {/* Header */}
        <div className="bg-gray-700 p-4 flex justify-between items-center">
          <h1 className="text-xl font-bold text-amber-400">Who Said It?</h1>
          <div className="text-lg font-semibold">
            Score: <span className="text-amber-400">{score}</span>/{totalAnswered}
          </div>
        </div>

        {/* Progress Bar */}
        <div className="w-full bg-gray-700 h-2">
          <div 
            className="bg-amber-500 h-full transition-all duration-500 ease-out"
            style={{ width: `${progressPercentage}%` }}
          ></div>
        </div>

        {/* Game Content */}
        {gameOver ? (
          <div className="p-8 flex flex-col items-center">
            <h2 className="text-2xl font-bold mb-4">Game Over!</h2>
            <p className="text-xl mb-6">Your final score: {score}/{quotes.length}</p>
            
            {score === quotes.length ? (
              <p className="text-amber-400 text-lg mb-6">Perfect score! You're an expert at distinguishing these quotes!</p>
            ) : score >= quotes.length * 0.7 ? (
              <p className="text-amber-400 text-lg mb-6">Great job! You have a good ear for rhetoric.</p>
            ) : score >= quotes.length * 0.5 ? (
              <p className="text-amber-300 text-lg mb-6">Not bad! It can be tricky to identify the source of these quotes.</p>
            ) : (
              <p className="text-amber-200 text-lg mb-6">This game shows how rhetoric can be misleading. Keep practicing!</p>
            )}
            
            <button
              onClick={restartGame}
              className="flex items-center gap-2 py-3 px-6 bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold rounded-lg transition-colors"
            >
              <RefreshCw size={20} />
              Play Again
            </button>
          </div>
        ) : currentQuoteIndex !== null ? (
          <div className="p-8">
            {/* Quote */}
            <div className="mb-8 p-6 bg-gray-900 rounded-lg">
              <p className="text-xl italic text-center">"{quotes[currentQuoteIndex].text}"</p>
            </div>

            {/* Answer Buttons */}
            {!showAnswer ? (
              <div className="grid grid-cols-2 gap-4 mb-8">
                <button
                  onClick={() => handleAnswer("Kanye West")}
                  className="py-4 bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold rounded-lg transition-colors"
                >
                  Kanye West
                </button>
                <button
                  onClick={() => handleAnswer("Hitler")}
                  className="py-4 bg-gray-600 hover:bg-gray-700 text-white font-bold rounded-lg transition-colors"
                >
                  Adolf Hitler
                </button>
                <button
                  onClick={() => handleAnswer("Neither")}
                  className="py-4 col-span-2 bg-gray-700 hover:bg-gray-600 text-white font-bold rounded-lg transition-colors"
                >
                  Neither
                </button>
              </div>
            ) : (
              <div className="mb-8">
                <div className={`p-4 rounded-lg mb-4 ${
                  selectedAnswer === quotes[currentQuoteIndex].author 
                    ? "bg-green-800 text-green-100" 
                    : "bg-red-800 text-red-100"
                }`}>
                  <div className="flex items-center gap-2 mb-2">
                    {selectedAnswer === quotes[currentQuoteIndex].author 
                      ? <Check className="text-green-300" /> 
                      : <X className="text-red-300" />}
                    <span className="font-bold">
                      {selectedAnswer === quotes[currentQuoteIndex].author 
                        ? "Correct!" 
                        : "Incorrect!"}
                    </span>
                  </div>
                  <p>
                    This was said by <span className="font-bold">{quotes[currentQuoteIndex].author}</span>
                  </p>
                  <p className="mt-2 text-sm opacity-90">
                    {quotes[currentQuoteIndex].context}
                  </p>
                </div>
                
                <button
                  onClick={nextQuote}
                  className="w-full py-3 bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold rounded-lg transition-colors flex items-center justify-center gap-2"
                >
                  <Shuffle size={20} />
                  Next Quote
                </button>
              </div>
            )}
          </div>
        ) : (
          <div className="p-8 flex justify-center">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-amber-500"></div>
          </div>
        )}
      </div>

      {/* Info Button */}
      {!showInfo && (
        <button 
          onClick={() => setShowInfo(true)}
          className="mt-4 flex items-center gap-2 py-2 px-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm transition-colors"
        >
          <Info size={16} />
          Game Info
        </button>
      )}
    </div>
  );
}