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

export default function WutheringWavesQuoteGame() {
  // Game state
  const [currentQuote, setCurrentQuote] = useState(null);
  const [options, setOptions] = useState([]);
  const [selectedCharacter, setSelectedCharacter] = useState(null);
  const [score, setScore] = useState(0);
  const [totalQuestions, setTotalQuestions] = useState(0);
  const [gameStatus, setGameStatus] = useState('playing'); // 'playing', 'correct', 'incorrect'
  const [quoteHistory, setQuoteHistory] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // Database of quotes and characters
  const quoteDatabase = [
    { quote: "The world is a vast place. I want to see it all.", character: "Rover", image: "https://i.imgur.com/JQpTbLM.png" },
    { quote: "I'm not interested in the past. Only in what lies ahead.", character: "Yinlin", image: "https://i.imgur.com/8Xt3Ygj.png" },
    { quote: "The Union's authority is absolute. Remember that.", character: "Jianxin", image: "https://i.imgur.com/QXnHrZA.png" },
    { quote: "My research is all that matters. Don't get in my way.", character: "Chixia", image: "https://i.imgur.com/0Ht9Yvl.png" },
    { quote: "The shadows hide many secrets. I've learned to embrace them.", character: "Baizhi", image: "https://i.imgur.com/JlCGXwG.png" },
    { quote: "Every performance should touch the heart. That's my belief.", character: "Lingyang", image: "https://i.imgur.com/Yk9YVGM.png" },
    { quote: "The sea calls to me. I can hear its whispers.", character: "Jiyan", image: "https://i.imgur.com/pVLCgzP.png" },
    { quote: "My blade is the last thing my enemies see.", character: "Herta", image: "https://i.imgur.com/1XZdXzA.png" },
    { quote: "The stars hold the answers we seek.", character: "Yuanwu", image: "https://i.imgur.com/dNzjnSB.png" },
    { quote: "I fight for those who cannot fight for themselves.", character: "Aalto", image: "https://i.imgur.com/KXcLnVG.png" },
    { quote: "The path of justice is often paved with difficult choices.", character: "Mortefi", image: "https://i.imgur.com/8Xt3Ygj.png" },
    { quote: "My loyalty is to the people, not to any organization.", character: "Verina", image: "https://i.imgur.com/JQpTbLM.png" },
    { quote: "Knowledge is power. I seek to understand everything.", character: "Chixia", image: "https://i.imgur.com/0Ht9Yvl.png" },
    { quote: "The echoes of the past guide my steps forward.", character: "Yuanwu", image: "https://i.imgur.com/dNzjnSB.png" },
    { quote: "In the dance of blades, I find my purpose.", character: "Baizhi", image: "https://i.imgur.com/JlCGXwG.png" }
  ];

  const characters = [...new Set(quoteDatabase.map(item => item.character))];

  // Initialize game
  useEffect(() => {
    loadNewQuote();
    setIsLoading(false);
  }, []);

  // Load a new random quote
  const loadNewQuote = () => {
    setSelectedCharacter(null);
    setGameStatus('playing');
    
    // Filter out quotes that have already been used
    const unusedQuotes = quoteDatabase.filter(
      quote => !quoteHistory.includes(quote.quote)
    );
    
    // If all quotes have been used, reset history
    if (unusedQuotes.length === 0) {
      setQuoteHistory([]);
      const randomQuote = quoteDatabase[Math.floor(Math.random() * quoteDatabase.length)];
      setCurrentQuote(randomQuote);
      setQuoteHistory([randomQuote.quote]);
    } else {
      // Select a random unused quote
      const randomQuote = unusedQuotes[Math.floor(Math.random() * unusedQuotes.length)];
      setCurrentQuote(randomQuote);
      setQuoteHistory([...quoteHistory, randomQuote.quote]);
    }
    
    // Generate options (1 correct, 3 random)
    generateOptions();
  };

  // Generate 4 options including the correct answer
  const generateOptions = () => {
    if (!quoteDatabase.length) return;
    
    // Get a random quote if currentQuote is not set yet
    const quote = currentQuote || quoteDatabase[Math.floor(Math.random() * quoteDatabase.length)];
    
    // Create a copy of characters array without the correct answer
    const otherCharacters = characters.filter(char => char !== quote.character);
    
    // Shuffle the array
    const shuffledCharacters = otherCharacters.sort(() => 0.5 - Math.random());
    
    // Take 3 random characters
    const randomOptions = shuffledCharacters.slice(0, 3);
    
    // Add the correct answer
    const allOptions = [...randomOptions, quote.character];
    
    // Shuffle again to randomize position
    setOptions(allOptions.sort(() => 0.5 - Math.random()));
  };

  // Handle character selection
  const handleSelect = (character) => {
    if (gameStatus !== 'playing') return;
    
    setSelectedCharacter(character);
    
    if (character === currentQuote.character) {
      setScore(score + 1);
      setGameStatus('correct');
    } else {
      setGameStatus('incorrect');
    }
    
    setTotalQuestions(totalQuestions + 1);
  };

  // Handle next question
  const handleNext = () => {
    loadNewQuote();
  };

  // Reset the game
  const resetGame = () => {
    setScore(0);
    setTotalQuestions(0);
    setQuoteHistory([]);
    loadNewQuote();
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-[#0a1a2a] to-[#1a2a3a]">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-400"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#0a1a2a] to-[#1a2a3a] text-white font-sans p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl md:text-4xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-purple-400">
            Wuthering Waves Quote Challenge
          </h1>
          <p className="text-teal-200 text-lg">
            Can you guess which character said these quotes?
          </p>
        </div>

        {/* Score Display */}
        <div className="flex justify-between items-center mb-6 bg-[#1c2e40] p-4 rounded-lg shadow-lg">
          <div className="flex items-center">
            <Award className="text-yellow-400 mr-2" size={24} />
            <span className="text-lg">Score: {score}/{totalQuestions}</span>
          </div>
          <button 
            onClick={resetGame}
            className="flex items-center bg-[#2a3f55] hover:bg-[#34495e] px-4 py-2 rounded-md transition-colors"
          >
            <RefreshCw size={16} className="mr-2" />
            Reset
          </button>
        </div>

        {/* Quote Card */}
        <div className="bg-[#1c2e40] rounded-xl shadow-xl p-6 mb-8 border border-[#2a3f55]">
          <div className="flex items-center mb-4">
            <Shuffle className="text-purple-400 mr-2" size={20} />
            <h2 className="text-xl font-semibold text-purple-300">Random Quote</h2>
          </div>
          
          <div className="relative">
            <blockquote className="text-xl md:text-2xl italic text-center my-8 px-4 md:px-8">
              "{currentQuote?.quote}"
            </blockquote>
            
            {/* Decorative elements */}
            <div className="absolute top-0 left-0 text-4xl text-purple-500/20">"</div>
            <div className="absolute bottom-0 right-0 text-4xl text-purple-500/20">"</div>
          </div>
        </div>

        {/* Character Options */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          {options.map((character, index) => {
            const characterData = quoteDatabase.find(q => q.character === character) || {};
            const isCorrect = character === currentQuote?.character;
            const isSelected = character === selectedCharacter;
            
            let bgClass = "bg-[#1c2e40] hover:bg-[#2a3f55]";
            if (gameStatus !== 'playing' && isSelected) {
              bgClass = isCorrect ? "bg-green-900/50" : "bg-red-900/50";
            } else if (gameStatus !== 'playing' && isCorrect) {
              bgClass = "bg-green-900/50";
            }
            
            return (
              <button
                key={index}
                onClick={() => handleSelect(character)}
                disabled={gameStatus !== 'playing'}
                className={`${bgClass} border border-[#2a3f55] rounded-lg p-4 transition-all transform hover:scale-105 flex flex-col items-center ${
                  gameStatus !== 'playing' && isSelected ? 'ring-2' : ''
                } ${
                  gameStatus !== 'playing' && isSelected && isCorrect ? 'ring-green-400' : ''
                } ${
                  gameStatus !== 'playing' && isSelected && !isCorrect ? 'ring-red-400' : ''
                }`}
              >
                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden mb-2 bg-[#0a1a2a] flex items-center justify-center">
                  {characterData.image ? (
                    <img 
                      src={characterData.image} 
                      alt={character} 
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="text-2xl font-bold">{character?.charAt(0)}</div>
                  )}
                </div>
                <span className="font-medium">{character}</span>
              </button>
            );
          })}
        </div>

        {/* Feedback and Next Button */}
        {gameStatus !== 'playing' && (
          <div className={`p-4 rounded-lg mb-6 flex justify-between items-center ${
            gameStatus === 'correct' ? 'bg-green-900/30' : 'bg-red-900/30'
          }`}>
            <div>
              <p className="font-bold text-lg">
                {gameStatus === 'correct' ? 'Correct!' : 'Incorrect!'}
              </p>
              <p>
                "{currentQuote?.quote}" was said by <span className="font-bold">{currentQuote?.character}</span>
              </p>
            </div>
            <button
              onClick={handleNext}
              className="bg-teal-600 hover:bg-teal-700 px-4 py-2 rounded-md flex items-center transition-colors"
            >
              Next <ChevronRight size={16} className="ml-1" />
            </button>
          </div>
        )}

        {/* Game Info */}
        <div className="mt-8 text-center text-teal-200/70 text-sm">
          <p>Test your knowledge of Wuthering Waves characters and their memorable quotes!</p>
        </div>
      </div>
    </div>
  );
}