import { useState, useEffect } from 'react';
// Fix the icon imports - use correct icon names from lucide-react
import { HelpCircle, Trophy, Flame } from 'lucide-react';

export default function WhoSaidItQuiz() {
  // Quiz data - can be expanded or loaded from an external source
  const quizData = [
    {
      quote: "I am a god.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Napoleon"]
    },
    {
      quote: "My greatest pain in life is that I will never be able to see myself perform live.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Freddie Mercury"]
    },
    {
      quote: "I'm the number one human being in music.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Mozart"]
    },
    {
      quote: "I am the voice of a generation.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Bob Dylan"]
    },
    {
      quote: "If you have the opportunity to play this game called life, you need to appreciate every moment.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Confucius"]
    },
    {
      quote: "I feel like I'm too busy writing history to read it.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Winston Churchill"]
    },
    {
      quote: "I am Warhol. I am the No. 1 most impactful artist of our generation.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Banksy"]
    },
    {
      quote: "I will go down as the voice of this generation.",
      correctAnswer: "Kanye",
      options: ["Kanye", "John Lennon"]
    },
    {
      quote: "I'm a creative genius and there's no other way to word it.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Leonardo da Vinci"]
    },
    {
      quote: "My greatest award is what I'm about to do.",
      correctAnswer: "Kanye",
      options: ["Kanye", "Steve Jobs"]
    }
  ];

  // State variables
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [streak, setStreak] = useState(0);
  const [bestScore, setBestScore] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showResult, setShowResult] = useState(false);
  const [gameOver, setGameOver] = useState(false);
  const [shuffledQuestions, setShuffledQuestions] = useState([]);

  // Load best score from local storage on component mount
  useEffect(() => {
    const savedBestScore = localStorage.getItem('whoSaidItBestScore');
    if (savedBestScore) {
      setBestScore(parseInt(savedBestScore));
    }
    
    // Shuffle questions
    const shuffled = [...quizData].sort(() => Math.random() - 0.5);
    setShuffledQuestions(shuffled);
  }, []);

  // Current question object
  const currentQuestion = shuffledQuestions[currentQuestionIndex] || quizData[0];

  // Handle answer selection
  const handleAnswerSelect = (answer) => {
    if (selectedAnswer) return; // Prevent multiple selections
    
    setSelectedAnswer(answer);
    setShowResult(true);
    
    const isCorrect = answer === currentQuestion.correctAnswer;
    
    if (isCorrect) {
      setScore(score + 1);
      setStreak(streak + 1);
    } else {
      setStreak(0);
    }
    
    // Move to next question after a delay
    setTimeout(() => {
      setShowResult(false);
      setSelectedAnswer(null);
      
      if (currentQuestionIndex < shuffledQuestions.length - 1) {
        setCurrentQuestionIndex(currentQuestionIndex + 1);
      } else {
        setGameOver(true);
        // Update best score if needed
        const newScore = score + (isCorrect ? 1 : 0);
        if (newScore > bestScore) {
          setBestScore(newScore);
          localStorage.setItem('whoSaidItBestScore', newScore.toString());
        }
      }
    }, 1500);
  };

  // Restart the game
  const restartGame = () => {
    setCurrentQuestionIndex(0);
    setScore(0);
    setStreak(0);
    setSelectedAnswer(null);
    setShowResult(false);
    setGameOver(false);
    
    // Reshuffle questions
    const shuffled = [...quizData].sort(() => Math.random() - 0.5);
    setShuffledQuestions(shuffled);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-indigo-900 text-white p-4">
      <div className="w-full max-w-md">
        {/* Header */}
        <div className="text-center mb-6">
          <h1 className="text-4xl font-bold mb-2">Who Said It? <HelpCircle className="inline-block ml-2" size={36} /></h1>
          <h2 className="text-2xl font-semibold mb-6">{currentQuestion.options[0]} or {currentQuestion.options[1]}</h2>
          
          {/* Score display */}
          <div className="flex justify-center gap-4 mb-8">
            <div className="bg-indigo-800 rounded-lg p-3 w-24 text-center">
              <div className="text-lg">Score</div>
              <div className="text-3xl font-bold">{score}/{shuffledQuestions.length}</div>
            </div>
            
            <div className="bg-indigo-800 rounded-lg p-3 w-24 text-center">
              <div className="text-lg">Streak</div>
              <div className="text-3xl font-bold flex items-center justify-center">
                {streak} <Flame className="ml-1" size={20} color={streak > 0 ? "#ff9d00" : "#666"} />
              </div>
            </div>
            
            <div className="bg-indigo-800 rounded-lg p-3 w-24 text-center">
              <div className="text-lg">Best</div>
              <div className="text-3xl font-bold flex items-center justify-center">
                {bestScore} <Trophy className="ml-1" size={20} color="#ffd700" />
              </div>
            </div>
          </div>
        </div>
        
        {!gameOver ? (
          <>
            {/* Quote display */}
            <div className="bg-indigo-800 bg-opacity-50 rounded-lg p-6 mb-8">
              <p className="text-2xl text-center italic">"{currentQuestion.quote}"</p>
            </div>
            
            {/* Answer options */}
            <div className="grid grid-cols-2 gap-4 mb-8">
              {currentQuestion.options.map((option) => (
                <button
                  key={option}
                  onClick={() => handleAnswerSelect(option)}
                  disabled={selectedAnswer !== null}
                  className={`
                    py-4 px-6 rounded-lg text-xl font-bold transition-all
                    ${option === currentQuestion.options[0] ? 'bg-amber-400 text-gray-900 hover:bg-amber-300' : 'bg-teal-400 text-gray-900 hover:bg-teal-300'}
                    ${selectedAnswer && showResult ? 
                      option === currentQuestion.correctAnswer ? 'ring-4 ring-green-500' : 
                      option === selectedAnswer ? 'ring-4 ring-red-500 opacity-70' : 'opacity-70' 
                      : ''}
                  `}
                >
                  {option}
                </button>
              ))}
            </div>
            
            {/* Progress indicator */}
            <div className="text-center mb-4">
              Question {currentQuestionIndex + 1} of {shuffledQuestions.length}
            </div>
            
            {/* Progress bar */}
            <div className="w-full bg-indigo-800 rounded-full h-2.5 mb-8">
              <div 
                className="bg-teal-400 h-2.5 rounded-full" 
                style={{ width: `${((currentQuestionIndex) / shuffledQuestions.length) * 100}%` }}
              ></div>
            </div>
            
            {/* Feedback message */}
            {showResult && (
              <div className={`text-center text-xl font-bold mb-4 ${selectedAnswer === currentQuestion.correctAnswer ? 'text-green-400' : 'text-red-400'}`}>
                {selectedAnswer === currentQuestion.correctAnswer ? 'Correct!' : `Wrong! It was ${currentQuestion.correctAnswer}.`}
              </div>
            )}
          </>
        ) : (
          /* Game over screen */
          <div className="text-center">
            <h2 className="text-3xl font-bold mb-4">Game Over!</h2>
            <p className="text-2xl mb-6">Your final score: {score}/{shuffledQuestions.length}</p>
            
            {score > bestScore / 2 ? (
              <p className="text-xl mb-8">Great job! You know your quotes well!</p>
            ) : (
              <p className="text-xl mb-8">Better luck next time!</p>
            )}
            
            <button 
              onClick={restartGame}
              className="bg-teal-500 hover:bg-teal-400 text-gray-900 font-bold py-3 px-8 rounded-lg text-xl transition-colors"
            >
              Play Again
            </button>
          </div>
        )}
        
        {/* Disclaimer */}
        <div className="mt-12 text-center text-sm text-indigo-300 opacity-80">
          <p>This game is meant to highlight similarities between different forms of rhetoric.</p>
          <p>It's intended to educate and create awareness, not to promote hate speech.</p>
        </div>
      </div>
    </div>
  );
}