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

// Array of quotes with attributions
const quotes = [
  {
    text: "I am the greatest artist that God has ever created.",
    author: "Kanye West",
    year: "2019"
  },
  {
    text: "The victor will never be asked if he told the truth.",
    author: "Adolf Hitler",
    year: "1925"
  },
  {
    text: "I am Warhol. I am the No. 1 most impactful artist of our generation. I am Shakespeare in the flesh.",
    author: "Kanye West",
    year: "2013"
  },
  {
    text: "Great liars are also great magicians.",
    author: "Adolf Hitler",
    year: "1925"
  },
  {
    text: "My greatest pain in life is that I will never be able to see myself perform live.",
    author: "Kanye West",
    year: "2013"
  },
  {
    text: "If you tell a big enough lie and tell it frequently enough, it will be believed.",
    author: "Adolf Hitler",
    year: "1925"
  },
  {
    text: "I feel like I'm too busy writing history to read it.",
    author: "Kanye West",
    year: "2012"
  },
  {
    text: "Words build bridges into unexplored regions.",
    author: "Adolf Hitler",
    year: "1925"
  },
  {
    text: "I'm a creative genius and there's no other way to word it.",
    author: "Kanye West",
    year: "2013"
  },
  {
    text: "The very first essential for success is a perpetually constant and regular employment of violence.",
    author: "Adolf Hitler",
    year: "1925"
  }
];

export default function QuoteGuessingGame() {
  const [gameQuotes, setGameQuotes] = useState([]);
  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [selectedAuthor, setSelectedAuthor] = useState(null);
  const [gameOver, setGameOver] = useState(false);
  const [gameStarted, setGameStarted] = useState(false);

  // Initialize game with shuffled quotes
  const startGame = () => {
    const shuffled = [...quotes].sort(() => 0.5 - Math.random());
    setGameQuotes(shuffled);
    setCurrentQuoteIndex(0);
    setScore(0);
    setShowAnswer(false);
    setSelectedAuthor(null);
    setGameOver(false);
    setGameStarted(true);
  };

  // Handle user's guess
  const handleGuess = (author) => {
    if (showAnswer) return;
    
    setSelectedAuthor(author);
    setShowAnswer(true);
    
    if (author === gameQuotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
  };

  // Move to next quote
  const nextQuote = () => {
    if (currentQuoteIndex < gameQuotes.length - 1) {
      setCurrentQuoteIndex(currentQuoteIndex + 1);
      setShowAnswer(false);
      setSelectedAuthor(null);
    } else {
      setGameOver(true);
    }
  };

  // Restart the game
  const restartGame = () => {
    startGame();
  };

  // Start game on component mount
  useEffect(() => {
    startGame();
  }, []);

  if (!gameStarted) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-6">
        <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-8">
          <h1 className="text-3xl font-bold text-center mb-6">Quote Guessing Game</h1>
          <p className="text-gray-700 mb-8 text-center">
            Can you tell who said it: Adolf Hitler or Kanye West?
          </p>
          <div className="flex justify-center">
            <button
              onClick={startGame}
              className="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
            >
              Start Game
            </button>
          </div>
          <div className="mt-8 text-sm text-gray-500 text-center">
            <AlertTriangle className="inline-block mr-1 h-4 w-4" />
            <span>This game is for educational purposes only and does not endorse any harmful ideologies.</span>
          </div>
        </div>
      </div>
    );
  }

  if (gameOver) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-6">
        <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-8">
          <h1 className="text-3xl font-bold text-center mb-6">Game Over!</h1>
          <p className="text-xl text-center mb-8">
            Your final score: <span className="font-bold">{score}</span> out of {gameQuotes.length}
          </p>
          <div className="flex justify-center">
            <button
              onClick={restartGame}
              className="flex items-center px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
            >
              <RefreshCw className="mr-2 h-5 w-5" />
              Play Again
            </button>
          </div>
        </div>
      </div>
    );
  }

  const currentQuote = gameQuotes[currentQuoteIndex];

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-6">
      <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-8">
        <div className="flex justify-between items-center mb-6">
          <div className="text-sm font-medium text-gray-500">
            Quote {currentQuoteIndex + 1} of {gameQuotes.length}
          </div>
          <div className="text-sm font-medium">
            Score: <span className="text-indigo-600">{score}</span>
          </div>
        </div>
        
        <div className="mb-8">
          <div className="text-xl font-serif italic text-gray-800 mb-4 p-4 bg-gray-50 rounded-lg border border-gray-100">
            "{currentQuote.text}"
          </div>
          
          {showAnswer ? (
            <div className={`p-4 rounded-lg mb-4 ${selectedAuthor === currentQuote.author ? 'bg-green-50 border border-green-100' : 'bg-red-50 border border-red-100'}`}>
              <div className="flex items-center">
                {selectedAuthor === currentQuote.author ? (
                  <Check className="h-5 w-5 text-green-500 mr-2" />
                ) : (
                  <X className="h-5 w-5 text-red-500 mr-2" />
                )}
                <span className="font-medium">
                  {selectedAuthor === currentQuote.author ? 'Correct!' : 'Incorrect!'}
                </span>
              </div>
              <div className="mt-2">
                This quote is by <span className="font-bold">{currentQuote.author}</span> ({currentQuote.year}).
              </div>
            </div>
          ) : (
            <div className="text-center text-gray-700 mb-4">Who said this?</div>
          )}
          
          <div className="grid grid-cols-2 gap-4">
            <button
              onClick={() => handleGuess("Adolf Hitler")}
              disabled={showAnswer}
              className={`px-4 py-3 rounded-lg font-medium transition-colors ${
                showAnswer 
                  ? currentQuote.author === "Adolf Hitler"
                    ? "bg-green-100 text-green-800 border border-green-200"
                    : "bg-gray-100 text-gray-800 border border-gray-200"
                  : "bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-200"
              }`}
            >
              Adolf Hitler
            </button>
            <button
              onClick={() => handleGuess("Kanye West")}
              disabled={showAnswer}
              className={`px-4 py-3 rounded-lg font-medium transition-colors ${
                showAnswer 
                  ? currentQuote.author === "Kanye West"
                    ? "bg-green-100 text-green-800 border border-green-200"
                    : "bg-gray-100 text-gray-800 border border-gray-200"
                  : "bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-200"
              }`}
            >
              Kanye West
            </button>
          </div>
        </div>
        
        {showAnswer && (
          <div className="flex justify-center">
            <button
              onClick={nextQuote}
              className="px-6 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
            >
              Next Quote
            </button>
          </div>
        )}
        
        <div className="mt-8 text-xs text-gray-500 text-center">
          <AlertTriangle className="inline-block mr-1 h-3 w-3" />
          <span>This game is for educational purposes only and does not endorse any harmful ideologies.</span>
        </div>
      </div>
    </div>
  );
}