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

export default function KanyeOrHitlerGame() {
  const [quotes, setQuotes] = useState([
    {
      text: "I am a god.",
      author: "Kanye",
      source: "Yeezus album, 2013"
    },
    {
      text: "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers.",
      author: "Kanye",
      source: "Interview with Sway, 2013"
    },
    {
      text: "My greatest pain in life is that I will never be able to see myself perform live.",
      author: "Kanye",
      source: "VH1 Storytellers, 2009"
    },
    {
      text: "I am Warhol. I am the number one most impactful artist of our generation. I am Shakespeare in the flesh.",
      author: "Kanye",
      source: "Interview with Sway, 2013"
    },
    {
      text: "The greatest accomplishment in life is not being successful, but being influential.",
      author: "Kanye",
      source: "Twitter, 2018"
    },
    {
      text: "Great liars are also great magicians.",
      author: "Hitler",
      source: "Mein Kampf, 1925"
    },
    {
      text: "If you tell a big enough lie and tell it frequently enough, it will be believed.",
      author: "Hitler",
      source: "Attributed in propaganda discussions, 1941"
    },
    {
      text: "The victor will never be asked if he told the truth.",
      author: "Hitler",
      source: "Speech in Munich, 1936"
    },
    {
      text: "Words build bridges into unexplored regions.",
      author: "Hitler",
      source: "Mein Kampf, 1925"
    },
    {
      text: "The art of leadership consists in consolidating the attention of the people against a single adversary.",
      author: "Hitler",
      source: "Mein Kampf, 1925"
    }
  ]);
  
  const [currentQuote, setCurrentQuote] = useState(null);
  const [score, setScore] = useState(0);
  const [totalGuesses, setTotalGuesses] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [userGuess, setUserGuess] = useState(null);
  const [gameOver, setGameOver] = useState(false);
  
  useEffect(() => {
    if (!gameOver) {
      getRandomQuote();
    }
  }, [gameOver]);
  
  const getRandomQuote = () => {
    if (quotes.length === 0) {
      setGameOver(true);
      return;
    }
    
    const randomIndex = Math.floor(Math.random() * quotes.length);
    const selected = quotes[randomIndex];
    
    // Remove the selected quote from the array
    const updatedQuotes = [...quotes];
    updatedQuotes.splice(randomIndex, 1);
    
    setQuotes(updatedQuotes);
    setCurrentQuote(selected);
    setShowAnswer(false);
    setUserGuess(null);
  };
  
  const handleGuess = (author) => {
    if (showAnswer) return;
    
    setUserGuess(author);
    setShowAnswer(true);
    setTotalGuesses(totalGuesses + 1);
    
    if (author === currentQuote.author) {
      setScore(score + 1);
    }
  };
  
  const nextQuote = () => {
    if (quotes.length === 0) {
      setGameOver(true);
    } else {
      getRandomQuote();
    }
  };
  
  const resetGame = () => {
    setQuotes([
      {
        text: "I am a god.",
        author: "Kanye",
        source: "Yeezus album, 2013"
      },
      {
        text: "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers.",
        author: "Kanye",
        source: "Interview with Sway, 2013"
      },
      {
        text: "My greatest pain in life is that I will never be able to see myself perform live.",
        author: "Kanye",
        source: "VH1 Storytellers, 2009"
      },
      {
        text: "I am Warhol. I am the number one most impactful artist of our generation. I am Shakespeare in the flesh.",
        author: "Kanye",
        source: "Interview with Sway, 2013"
      },
      {
        text: "The greatest accomplishment in life is not being successful, but being influential.",
        author: "Kanye",
        source: "Twitter, 2018"
      },
      {
        text: "Great liars are also great magicians.",
        author: "Hitler",
        source: "Mein Kampf, 1925"
      },
      {
        text: "If you tell a big enough lie and tell it frequently enough, it will be believed.",
        author: "Hitler",
        source: "Attributed in propaganda discussions, 1941"
      },
      {
        text: "The victor will never be asked if he told the truth.",
        author: "Hitler",
        source: "Speech in Munich, 1936"
      },
      {
        text: "Words build bridges into unexplored regions.",
        author: "Hitler",
        source: "Mein Kampf, 1925"
      },
      {
        text: "The art of leadership consists in consolidating the attention of the people against a single adversary.",
        author: "Hitler",
        source: "Mein Kampf, 1925"
      }
    ]);
    setScore(0);
    setTotalGuesses(0);
    setGameOver(false);
    setShowAnswer(false);
    setUserGuess(null);
  };
  
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-white 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-amber-400">Who Said It?</h1>
          <h2 className="text-xl text-center mt-2 text-gray-300">Kanye or Hitler</h2>
        </div>
        
        <div className="p-6">
          {gameOver ? (
            <div className="text-center py-10">
              <h2 className="text-2xl font-bold mb-4">Game Over!</h2>
              <p className="text-xl mb-6">Your final score: {score}/{totalGuesses}</p>
              <button 
                onClick={resetGame}
                className="flex items-center justify-center mx-auto px-6 py-3 bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold rounded-lg transition-colors"
              >
                <RefreshCw className="mr-2 h-5 w-5" />
                Play Again
              </button>
            </div>
          ) : currentQuote ? (
            <>
              <div className="mb-8 p-6 bg-gray-700 rounded-lg">
                <p className="text-xl italic text-center">"{currentQuote.text}"</p>
              </div>
              
              <div className="flex justify-center gap-4 mb-6">
                <button
                  onClick={() => handleGuess("Kanye")}
                  disabled={showAnswer}
                  className={`px-6 py-3 rounded-lg font-bold transition-colors ${
                    showAnswer && userGuess === "Kanye"
                      ? userGuess === currentQuote.author
                        ? "bg-green-500 text-white"
                        : "bg-red-500 text-white"
                      : "bg-amber-400 hover:bg-amber-500 text-gray-900"
                  }`}
                >
                  Kanye West
                </button>
                
                <button
                  onClick={() => handleGuess("Hitler")}
                  disabled={showAnswer}
                  className={`px-6 py-3 rounded-lg font-bold transition-colors ${
                    showAnswer && userGuess === "Hitler"
                      ? userGuess === currentQuote.author
                        ? "bg-green-500 text-white"
                        : "bg-red-500 text-white"
                      : "bg-amber-400 hover:bg-amber-500 text-gray-900"
                  }`}
                >
                  Adolf Hitler
                </button>
              </div>
              
              {showAnswer && (
                <div className="text-center mb-6">
                  <div className="flex items-center justify-center mb-2">
                    {userGuess === currentQuote.author ? (
                      <Check className="text-green-500 mr-2 h-6 w-6" />
                    ) : (
                      <X className="text-red-500 mr-2 h-6 w-6" />
                    )}
                    <p className="text-lg">
                      {userGuess === currentQuote.author 
                        ? "Correct!" 
                        : `Wrong! This was said by ${currentQuote.author}.`}
                    </p>
                  </div>
                  <p className="text-sm text-gray-400">Source: {currentQuote.source}</p>
                  
                  <button
                    onClick={nextQuote}
                    className="mt-4 px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center mx-auto"
                  >
                    <Shuffle className="mr-2 h-4 w-4" />
                    Next Quote
                  </button>
                </div>
              )}
            </>
          ) : (
            <p className="text-center">Loading quotes...</p>
          )}
        </div>
        
        <div className="p-4 bg-gray-800 border-t border-gray-700 flex justify-between items-center">
          <div className="text-sm text-gray-400">
            Quotes remaining: {quotes.length}
          </div>
          <div className="text-lg font-bold">
            Score: {score}/{totalGuesses}
          </div>
        </div>
      </div>
      
      <p className="mt-6 text-sm text-gray-500 max-w-md text-center">
        Note: This game is meant to highlight the sometimes shocking similarity between quotes from very different public figures. It is not intended to equate or compare the individuals themselves.
      </p>
    </div>
  );
}