import { useState, useEffect } from 'react';
import { Shuffle, Award, AlertTriangle } from 'lucide-react';

export default function QuoteGuessingGame() {
  const [quotes, setQuotes] = useState([]);
  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [gameOver, setGameOver] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [loading, setLoading] = useState(true);
  const [fadeIn, setFadeIn] = useState(true);

  // Collection of verified quotes - fixed any syntax issues
  const quoteData = [
    {
      text: "I am the greatest artist that God has ever created.",
      author: "Kanye"
    },
    {
      text: "The Jews are undoubtedly a race, but they are not human.",
      author: "Hitler"
    },
    {
      text: "I am a creative genius and there is no other way to word it.",
      author: "Kanye"
    },
    {
      text: "Great liars are also great magicians.",
      author: "Hitler"
    },
    {
      text: "My greatest pain in life is that I will never be able to see myself perform live.",
      author: "Kanye"
    },
    {
      text: "If you tell a big enough lie and tell it frequently enough, it will be believed.",
      author: "Hitler"
    },
    {
      text: "I feel like I am too busy writing history to read it.",
      author: "Kanye"
    },
    {
      text: "The victor will never be asked if he told the truth.",
      author: "Hitler"
    },
    {
      text: "I am Warhol. I am the No. 1 most impactful artist of our generation. I am Shakespeare in the flesh.",
      author: "Kanye"
    },
    {
      text: "Words build bridges into unexplored regions.",
      author: "Hitler"
    },
    {
      text: "I love sleep; it is my favorite.",
      author: "Kanye"
    },
    {
      text: "Humanitarianism is the expression of stupidity and cowardice.",
      author: "Hitler"
    }
  ];

  // Initialize and shuffle quotes
  useEffect(() => {
    const shuffledQuotes = [...quoteData].sort(() => Math.random() - 0.5);
    setQuotes(shuffledQuotes);
    setTimeout(() => setLoading(false), 800); // Add slight delay for loading animation
  }, []);

  const handleGuess = (author) => {
    if (showAnswer) return;
    
    setSelectedAnswer(author);
    setShowAnswer(true);
    
    if (author === quotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
    
    // Move to next quote after a delay with animation
    setTimeout(() => {
      setFadeIn(false);
      setTimeout(() => {
        if (currentQuoteIndex < quotes.length - 1) {
          setCurrentQuoteIndex(currentQuoteIndex + 1);
          setShowAnswer(false);
          setSelectedAnswer(null);
          setFadeIn(true);
        } else {
          setGameOver(true);
        }
      }, 300);
    }, 1500);
  };

  const restartGame = () => {
    setLoading(true);
    setTimeout(() => {
      const shuffledQuotes = [...quoteData].sort(() => Math.random() - 0.5);
      setQuotes(shuffledQuotes);
      setCurrentQuoteIndex(0);
      setScore(0);
      setShowAnswer(false);
      setGameOver(false);
      setSelectedAnswer(null);
      setFadeIn(true);
      setLoading(false);
    }, 600);
  };

  // Calculate percentage for score display
  const scorePercentage = Math.round((score / quotes.length) * 100) || 0;
  
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-900 to-slate-900">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white mb-4"></div>
          <div className="text-white text-xl font-light tracking-wider">Loading quotes...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-900 to-slate-900 p-4 font-['Inter',sans-serif] text-white">
      <div className="w-full max-w-3xl">
        {!gameOver ? (
          <div className={`transition-opacity duration-300 ${fadeIn ? 'opacity-100' : 'opacity-0'}`}>
            {/* Header with title and score */}
            <div className="text-center mb-8">
              <h1 className="text-3xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-yellow-500">
                Who Said It?
              </h1>
              <p className="text-slate-300 text-lg">Hitler or Kanye West</p>
            </div>
            
            {/* Score and progress bar */}
            <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-4 mb-6 shadow-lg flex items-center justify-between">
              <div className="flex items-center">
                <Award className="text-yellow-400 mr-2" size={24} />
                <div>
                  <div className="text-sm text-slate-400">Score</div>
                  <div className="text-xl font-bold">{score}/{quotes.length}</div>
                </div>
              </div>
              
              <div className="flex-1 mx-6">
                <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
                  <div 
                    className="h-full bg-gradient-to-r from-teal-400 to-emerald-500 transition-all duration-500 ease-out"
                    style={{ width: `${((currentQuoteIndex) / quotes.length) * 100}%` }}
                  ></div>
                </div>
              </div>
              
              <div className="text-right">
                <div className="text-sm text-slate-400">Question</div>
                <div className="text-xl font-bold">{currentQuoteIndex + 1}/{quotes.length}</div>
              </div>
            </div>
            
            {/* Quote card */}
            <div className="bg-slate-800/70 backdrop-blur-sm rounded-2xl p-8 mb-8 shadow-xl border border-slate-700">
              <div className="bg-gradient-to-br from-slate-700 to-slate-800 p-8 rounded-xl mb-8 shadow-inner relative">
                <div className="absolute -top-3 -left-1 text-5xl text-slate-600 opacity-50">"</div>
                <div className="absolute -bottom-3 -right-1 text-5xl text-slate-600 opacity-50">"</div>
                <p className="text-2xl italic text-center text-slate-200 relative z-10">
                  {quotes[currentQuoteIndex]?.text}
                </p>
              </div>
              
              {/* Feedback area */}
              {showAnswer && (
                <div className={`text-center mb-6 p-4 rounded-xl transition-all duration-300 transform ${
                  selectedAnswer === quotes[currentQuoteIndex].author 
                    ? 'bg-gradient-to-r from-emerald-500 to-green-600 scale-105' 
                    : 'bg-gradient-to-r from-rose-500 to-red-600 scale-105'
                }`}>
                  <p className="text-xl font-bold mb-1">
                    {selectedAnswer === quotes[currentQuoteIndex].author 
                      ? 'Correct!' 
                      : 'Wrong!'}
                  </p>
                  <p>
                    {selectedAnswer === quotes[currentQuoteIndex].author 
                      ? `Yes, this was said by ${quotes[currentQuoteIndex].author}.` 
                      : `This was actually said by ${quotes[currentQuoteIndex].author}.`}
                  </p>
                </div>
              )}
              
              {/* Answer buttons */}
              <div className="grid grid-cols-2 gap-6">
                <button
                  onClick={() => handleGuess("Hitler")}
                  disabled={showAnswer}
                  className={`p-5 rounded-xl text-white font-bold transition-all transform hover:scale-105 active:scale-95 ${
                    showAnswer 
                      ? quotes[currentQuoteIndex].author === "Hitler"
                        ? 'bg-gradient-to-br from-emerald-500 to-green-600 shadow-lg shadow-emerald-500/20'
                        : selectedAnswer === "Hitler" 
                          ? 'bg-gradient-to-br from-rose-500 to-red-600 shadow-lg shadow-rose-500/20' 
                          : 'bg-slate-600 opacity-50'
                      : 'bg-gradient-to-br from-slate-600 to-slate-700 hover:from-slate-500 hover:to-slate-600 shadow-lg shadow-slate-800/50'
                  }`}
                >
                  <div className="flex flex-col items-center justify-center">
                    <span className="text-xs uppercase tracking-wider mb-1 opacity-80">Adolf</span>
                    <span className="text-xl">Hitler</span>
                  </div>
                </button>
                <button
                  onClick={() => handleGuess("Kanye")}
                  disabled={showAnswer}
                  className={`p-5 rounded-xl text-white font-bold transition-all transform hover:scale-105 active:scale-95 ${
                    showAnswer 
                      ? quotes[currentQuoteIndex].author === "Kanye"
                        ? 'bg-gradient-to-br from-emerald-500 to-green-600 shadow-lg shadow-emerald-500/20'
                        : selectedAnswer === "Kanye" 
                          ? 'bg-gradient-to-br from-rose-500 to-red-600 shadow-lg shadow-rose-500/20' 
                          : 'bg-slate-600 opacity-50'
                      : 'bg-gradient-to-br from-slate-600 to-slate-700 hover:from-slate-500 hover:to-slate-600 shadow-lg shadow-slate-800/50'
                  }`}
                >
                  <div className="flex flex-col items-center justify-center">
                    <span className="text-xs uppercase tracking-wider mb-1 opacity-80">Kanye</span>
                    <span className="text-xl">West</span>
                  </div>
                </button>
              </div>
            </div>
            
            {/* Disclaimer */}
            <div className="text-center text-slate-400 text-sm flex items-center justify-center">
              <AlertTriangle size={14} className="mr-2" />
              <span>This game contains offensive content for educational purposes.</span>
            </div>
          </div>
        ) : (
          // Results screen
          <div className="animate-fadeIn">
            <div className="bg-slate-800/70 backdrop-blur-sm rounded-2xl p-8 shadow-xl border border-slate-700 text-center">
              <div className="mb-8">
                <h2 className="text-4xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-yellow-500">Game Over!</h2>
                <p className="text-slate-300 text-lg">How well do you know your quotes?</p>
              </div>
              
              {/* Score display */}
              <div className="mb-10">
                <div className="relative w-48 h-48 mx-auto mb-6">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-4xl font-bold">{scorePercentage}%</div>
                  </div>
                  <svg className="w-full h-full" viewBox="0 0 100 100">
                    <circle 
                      cx="50" cy="50" r="45" 
                      fill="none" 
                      stroke="#334155" 
                      strokeWidth="8"
                    />
                    <circle 
                      cx="50" cy="50" r="45" 
                      fill="none" 
                      stroke={scorePercentage > 70 ? "#10b981" : scorePercentage > 40 ? "#f59e0b" : "#ef4444"} 
                      strokeWidth="8"
                      strokeDasharray={`${scorePercentage * 2.83} 283`}
                      strokeDashoffset="0"
                      transform="rotate(-90 50 50)"
                    />
                  </svg>
                </div>
                <p className="text-2xl font-bold mb-2">Your final score: {score} out of {quotes.length}</p>
                
                {score === quotes.length ? (
                  <p className="text-emerald-400 text-lg">Perfect score! You're an expert!</p>
                ) : score >= quotes.length * 0.7 ? (
                  <p className="text-emerald-400 text-lg">Great job! You know your quotes well!</p>
                ) : score >= quotes.length * 0.5 ? (
                  <p className="text-amber-400 text-lg">Not bad! You got more than half right.</p>
                ) : (
                  <p className="text-rose-400 text-lg">Better luck next time!</p>
                )}
              </div>
              
              {/* Play again button */}
              <button
                onClick={restartGame}
                className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-bold py-4 px-8 rounded-xl transition-all transform hover:scale-105 active:scale-95 shadow-lg shadow-indigo-500/30 flex items-center justify-center mx-auto"
              >
                <Shuffle className="mr-2" size={20} />
                Play Again
              </button>
            </div>
            
            {/* Disclaimer */}
            <div className="text-center text-slate-400 text-sm mt-6 flex items-center justify-center">
              <AlertTriangle size={14} className="mr-2" />
              <span>This game contains offensive content for educational purposes.</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}