import React, { useState, useEffect } from 'react';
import { BookOpen, CheckCircle, XCircle, Award, Loader, Flag, MessageSquare, HelpCircle, ChevronRight } from 'lucide-react';

const SpanishGame = () => {
  // Game states
  const [gameState, setGameState] = useState('welcome'); // welcome, playing, results
  const [questions, setQuestions] = useState([]);
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [userAnswer, setUserAnswer] = useState('');
  const [score, setScore] = useState(0);
  const [loading, setLoading] = useState(false);
  const [feedback, setFeedback] = useState(null);
  const [isChecking, setIsChecking] = useState(false);
  const [showConfetti, setShowConfetti] = useState(false);
  
  const totalQuestions = 10;
  const fifthGraderThreshold = 7; // Score needed to beat a 5th grader
  
  // Generate questions when game starts
  const startGame = async () => {
    setLoading(true);
    setGameState('playing');
    try {
      await generateQuestions();
    } catch (error) {
      console.error("Failed to generate questions:", error);
    } finally {
      setLoading(false);
    }
  };
  
  // Generate questions using the OpenAI API
  const generateQuestions = async () => {
    try {
      // In a real implementation, this would call the OpenAI API
      // For demo purposes, we'll use predefined questions
      const generatedQuestions = [
        {
          question: "¿Cómo te llamas?",
          correctAnswer: "Me llamo [name]",
          difficulty: "easy",
          translation: "What is your name?",
          hint: "Use 'Me llamo' followed by your name"
        },
        {
          question: "¿Cuántos años tienes?",
          correctAnswer: "Tengo [number] años",
          difficulty: "easy",
          translation: "How old are you?",
          hint: "Use 'Tengo' followed by your age and 'años'"
        },
        {
          question: "¿Cuáles son los colores de la bandera de México?",
          correctAnswer: "Verde, blanco y rojo",
          difficulty: "medium",
          translation: "What are the colors of the Mexican flag?",
          hint: "Three colors: green, white, and red in Spanish"
        },
        {
          question: "Cuenta del uno al cinco en español.",
          correctAnswer: "Uno, dos, tres, cuatro, cinco",
          difficulty: "easy",
          translation: "Count from one to five in Spanish.",
          hint: "Start with 'uno'"
        },
        {
          question: "¿Qué día es hoy?",
          correctAnswer: "Hoy es [day]",
          difficulty: "medium",
          translation: "What day is today?",
          hint: "Start with 'Hoy es' followed by the day of the week"
        },
        {
          question: "Nombra tres animales en español.",
          correctAnswer: "Perro, gato, pájaro",
          difficulty: "medium",
          translation: "Name three animals in Spanish.",
          hint: "Common animals include 'perro' (dog), 'gato' (cat)"
        },
        {
          question: "¿Cuál es la capital de España?",
          correctAnswer: "Madrid",
          difficulty: "medium",
          translation: "What is the capital of Spain?",
          hint: "It's the same word in English and Spanish"
        },
        {
          question: "Traduce: 'I like to play soccer with my friends.'",
          correctAnswer: "Me gusta jugar al fútbol con mis amigos",
          difficulty: "hard",
          translation: "Translate: 'I like to play soccer with my friends.'",
          hint: "Start with 'Me gusta jugar'"
        },
        {
          question: "Conjuga el verbo 'hablar' en presente para 'yo'.",
          correctAnswer: "Yo hablo",
          difficulty: "medium",
          translation: "Conjugate the verb 'hablar' in present tense for 'I'.",
          hint: "Change the ending from '-ar' to '-o'"
        },
        {
          question: "¿Cómo se dice 'goodbye' en español?",
          correctAnswer: "Adiós",
          difficulty: "easy",
          translation: "How do you say 'goodbye' in Spanish?",
          hint: "It's a common farewell word"
        }
      ];
      
      setQuestions(generatedQuestions);
    } catch (error) {
      console.error("Error generating questions:", error);
      throw error;
    }
  };
  
  // In a real implementation, this would call the OpenAI API to check the answer
  const checkAnswer = async () => {
    if (!userAnswer.trim()) return;
    
    setIsChecking(true);
    
    try {
      // Simulate API call delay
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      const currentQuestion = questions[currentQuestionIndex];
      
      // Simple check - in a real app, use AI to evaluate answer quality
      const isCorrect = userAnswer.toLowerCase().includes(
        currentQuestion.correctAnswer.toLowerCase().split('[')[0].trim()
      );
      
      if (isCorrect) {
        setScore(prevScore => prevScore + 1);
        setFeedback({
          correct: true,
          message: "¡Correcto! Great job!"
        });
      } else {
        setFeedback({
          correct: false,
          message: `Not quite. A good answer would be: "${currentQuestion.correctAnswer}"`
        });
      }
      
      // Move to next question after a delay
      setTimeout(() => {
        if (currentQuestionIndex < totalQuestions - 1) {
          setCurrentQuestionIndex(prevIndex => prevIndex + 1);
          setUserAnswer('');
          setFeedback(null);
        } else {
          setGameState('results');
          if (score + (isCorrect ? 1 : 0) >= fifthGraderThreshold) {
            setShowConfetti(true);
          }
        }
        setIsChecking(false);
      }, 2000);
      
    } catch (error) {
      console.error("Error checking answer:", error);
      setFeedback({
        correct: false,
        message: "Error checking your answer. Please try again."
      });
      setIsChecking(false);
    }
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    checkAnswer();
  };
  
  const resetGame = () => {
    setGameState('welcome');
    setQuestions([]);
    setCurrentQuestionIndex(0);
    setUserAnswer('');
    setScore(0);
    setFeedback(null);
    setShowConfetti(false);
  };
  
  // Confetti component for celebration
  const Confetti = () => {
    useEffect(() => {
      const confettiCount = 200;
      const container = document.querySelector('.confetti-container');
      
      for (let i = 0; i < confettiCount; i++) {
        const confetti = document.createElement('div');
        confetti.className = 'confetti';
        confetti.style.left = `${Math.random() * 100}%`;
        confetti.style.animationDelay = `${Math.random() * 5}s`;
        confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
        container.appendChild(confetti);
      }
      
      return () => {
        const confettis = document.querySelectorAll('.confetti');
        confettis.forEach(c => c.remove());
      };
    }, []);
    
    return <div className="confetti-container absolute inset-0 overflow-hidden pointer-events-none"></div>;
  };
  
  // Difficulty badge component
  const DifficultyBadge = ({ difficulty }) => {
    const colors = {
      easy: 'bg-green-100 text-green-800 border-green-200',
      medium: 'bg-yellow-100 text-yellow-800 border-yellow-200',
      hard: 'bg-red-100 text-red-800 border-red-200'
    };
    
    return (
      <span className={`text-xs font-medium px-2.5 py-0.5 rounded-full border ${colors[difficulty]}`}>
        {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
      </span>
    );
  };
  
  // Render different game screens based on state
  const renderGameContent = () => {
    switch (gameState) {
      case 'welcome':
        return (
          <div className="flex flex-col items-center justify-center space-y-8 p-8 text-center max-w-4xl mx-auto">
            <div className="relative w-full">
              <div className="absolute -top-16 -right-16 w-32 h-32 bg-yellow-300 rounded-full opacity-20 blur-xl"></div>
              <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-teal-300 rounded-full opacity-20 blur-xl"></div>
              
              <div className="relative bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
                <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-[#FF6B6B] via-[#FFE66D] to-[#4ECDC4]"></div>
                
                <div className="p-8 md:p-12">
                  <div className="flex justify-center mb-6">
                    <div className="flex items-center space-x-2 bg-[#1A535C] text-white px-4 py-2 rounded-full">
                      <Flag className="h-5 w-5" />
                      <span className="font-medium">Spanish Challenge</span>
                    </div>
                  </div>
                  
                  <h1 className="text-4xl md:text-5xl font-extrabold text-[#1A535C] mb-4 leading-tight">
                    ¿Puedes hablar español <span className="text-[#FF6B6B]">mejor que un estudiante de quinto grado?</span>
                  </h1>
                  
                  <h2 className="text-xl md:text-2xl text-[#1A535C] mb-8 font-medium">
                    Can You Speak Spanish Better Than a 5th Grader?
                  </h2>
                  
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
                    <div className="bg-[#F7FFF7] p-6 rounded-xl border border-gray-100">
                      <div className="w-12 h-12 bg-[#4ECDC4] rounded-full flex items-center justify-center mb-4">
                        <MessageSquare className="h-6 w-6 text-white" />
                      </div>
                      <h3 className="font-bold text-lg mb-2 text-[#1A535C]">10 Questions</h3>
                      <p className="text-gray-600">Test your Spanish skills with questions a 5th grader should know</p>
                    </div>
                    
                    <div className="bg-[#F7FFF7] p-6 rounded-xl border border-gray-100">
                      <div className="w-12 h-12 bg-[#FF6B6B] rounded-full flex items-center justify-center mb-4">
                        <HelpCircle className="h-6 w-6 text-white" />
                      </div>
                      <h3 className="font-bold text-lg mb-2 text-[#1A535C]">Helpful Hints</h3>
                      <p className="text-gray-600">Get assistance if you're stuck on a challenging question</p>
                    </div>
                    
                    <div className="bg-[#F7FFF7] p-6 rounded-xl border border-gray-100">
                      <div className="w-12 h-12 bg-[#FFE66D] rounded-full flex items-center justify-center mb-4">
                        <Award className="h-6 w-6 text-[#1A535C]" />
                      </div>
                      <h3 className="font-bold text-lg mb-2 text-[#1A535C]">Get Scored</h3>
                      <p className="text-gray-600">See if your Spanish skills beat a typical 5th grader</p>
                    </div>
                  </div>
                  
                  <button
                    onClick={startGame}
                    className="group relative inline-flex items-center justify-center px-8 py-4 bg-[#FF6B6B] text-white font-bold text-lg rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:bg-[#ff5252] focus:outline-none focus:ring-4 focus:ring-[#FF6B6B] focus:ring-opacity-30"
                  >
                    <span className="relative z-10 flex items-center">
                      ¡Empezar el juego! 
                      <ChevronRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
                    </span>
                    <span className="absolute inset-0 bg-gradient-to-r from-[#FF6B6B] to-[#ff5252] opacity-0 group-hover:opacity-100 transition-opacity"></span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        );
        
      case 'playing':
        if (loading) {
          return (
            <div className="flex flex-col items-center justify-center h-64">
              <div className="relative">
                <Loader className="animate-spin h-16 w-16 text-[#4ECDC4]" />
                <div className="absolute inset-0 h-16 w-16 rounded-full border-t-4 border-[#4ECDC4] animate-ping opacity-20"></div>
              </div>
              <p className="mt-6 text-xl font-medium text-[#1A535C]">Generating questions...</p>
              <p className="text-gray-500 mt-2">Preparing your Spanish challenge</p>
            </div>
          );
        }
        
        if (questions.length === 0) {
          return (
            <div className="text-center p-8 max-w-md mx-auto">
              <div className="bg-red-50 border border-red-200 rounded-xl p-6">
                <XCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
                <p className="text-red-600 font-medium text-lg mb-4">Failed to load questions. Please try again.</p>
                <button
                  onClick={resetGame}
                  className="px-6 py-3 bg-[#FF6B6B] text-white rounded-xl font-medium hover:bg-[#ff5252] transition-colors"
                >
                  Go Back
                </button>
              </div>
            </div>
          );
        }
        
        const currentQuestion = questions[currentQuestionIndex];
        
        return (
          <div className="flex flex-col items-center w-full max-w-3xl mx-auto p-4">
            {/* Progress bar */}
            <div className="w-full mb-8">
              <div className="flex justify-between items-center mb-2">
                <span className="text-sm font-medium text-[#1A535C]">
                  Question {currentQuestionIndex + 1} of {totalQuestions}
                </span>
                <div className="flex items-center bg-[#F7FFF7] px-3 py-1 rounded-full border border-[#4ECDC4]">
                  <Award className="h-4 w-4 text-[#4ECDC4] mr-1" />
                  <span className="text-sm font-medium text-[#1A535C]">Score: {score}</span>
                </div>
              </div>
              <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-[#4ECDC4] to-[#1A535C] rounded-full transition-all duration-500 ease-out"
                  style={{ width: `${((currentQuestionIndex) / totalQuestions) * 100}%` }}
                ></div>
              </div>
            </div>
            
            {/* Question card */}
            <div className="w-full bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden mb-6 transform transition-all duration-300">
              <div className="p-6 md:p-8">
                <div className="flex justify-between items-start mb-6">
                  <div>
                    <h3 className="text-2xl font-bold text-[#1A535C] mb-2">
                      {currentQuestion.question}
                    </h3>
                    <p className="text-gray-600 italic mb-3">
                      {currentQuestion.translation}
                    </p>
                  </div>
                  <DifficultyBadge difficulty={currentQuestion.difficulty} />
                </div>
                
                <form onSubmit={handleSubmit} className="w-full">
                  <div className="mb-6">
                    <label htmlFor="answer" className="block text-sm font-medium text-gray-700 mb-2">
                      Your Answer:
                    </label>
                    <div className="relative">
                      <input
                        type="text"
                        id="answer"
                        value={userAnswer}
                        onChange={(e) => setUserAnswer(e.target.value)}
                        className="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent transition-all text-lg"
                        placeholder="Type your answer in Spanish..."
                        disabled={isChecking}
                      />
                      <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <MessageSquare className="h-5 w-5 text-gray-400" />
                      </div>
                    </div>
                  </div>
                  
                  {feedback && (
                    <div 
                      className={`p-4 rounded-xl mb-6 animate-fadeIn ${
                        feedback.correct ? 'bg-green-50 border border-green-100' : 'bg-red-50 border border-red-100'
                      }`}
                    >
                      <div className="flex items-start">
                        {feedback.correct ? (
                          <CheckCircle className="h-6 w-6 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
                        ) : (
                          <XCircle className="h-6 w-6 text-red-500 mr-3 flex-shrink-0 mt-0.5" />
                        )}
                        <p className={`${feedback.correct ? 'text-green-700' : 'text-red-700'} font-medium`}>
                          {feedback.message}
                        </p>
                      </div>
                    </div>
                  )}
                  
                  <div className="flex justify-between items-center">
                    <button
                      type="button"
                      onClick={() => alert(currentQuestion.hint)}
                      className="text-[#4ECDC4] hover:text-[#3dbfb7] flex items-center font-medium transition-colors"
                    >
                      <HelpCircle className="h-4 w-4 mr-1" />
                      Need a hint?
                    </button>
                    
                    <button
                      type="submit"
                      disabled={!userAnswer.trim() || isChecking}
                      className={`px-6 py-3 rounded-xl font-medium flex items-center transition-all ${
                        !userAnswer.trim() || isChecking 
                          ? 'bg-gray-300 text-gray-500 cursor-not-allowed' 
                          : 'bg-[#4ECDC4] text-white hover:bg-[#3dbfb7] shadow-md hover:shadow-lg'
                      }`}
                    >
                      {isChecking ? (
                        <span className="flex items-center">
                          <Loader className="animate-spin h-4 w-4 mr-2" />
                          Checking...
                        </span>
                      ) : (
                        <>
                          Submit Answer
                          <ChevronRight className="ml-1 h-5 w-5" />
                        </>
                      )}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        );
        
      case 'results':
        const beatFifthGrader = score >= fifthGraderThreshold;
        return (
          <div className="flex flex-col items-center justify-center p-8 text-center relative">
            {showConfetti && <Confetti />}
            
            <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 md:p-10 border border-gray-100 relative overflow-hidden">
              <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-[#FF6B6B] via-[#FFE66D] to-[#4ECDC4]"></div>
              
              {beatFifthGrader ? (
                <div className="absolute -top-10 -right-10 w-40 h-40 bg-[#FFE66D] rounded-full opacity-20 blur-xl"></div>
              ) : (
                <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-gray-200 rounded-full opacity-20 blur-xl"></div>
              )}
              
              <div className={`w-24 h-24 mx-auto mb-6 rounded-full flex items-center justify-center ${
                beatFifthGrader ? 'bg-[#FFE66D]' : 'bg-gray-100'
              }`}>
                <Award className={`h-12 w-12 ${beatFifthGrader ? 'text-[#1A535C]' : 'text-gray-400'}`} />
              </div>
              
              <h2 className={`text-2xl md:text-3xl font-bold mb-4 ${
                beatFifthGrader ? 'text-[#1A535C]' : 'text-gray-700'
              }`}>
                {beatFifthGrader 
                  ? "¡Felicidades! You beat a 5th grader!" 
                  : "Not quite 5th grade level yet!"}
              </h2>
              
              <div className="text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-[#4ECDC4] to-[#1A535C]">
                {score} / {totalQuestions}
              </div>
              
              <div className="mb-8">
                <div className="w-full h-4 bg-gray-200 rounded-full mb-2">
                  <div 
                    className={`h-full rounded-full ${beatFifthGrader ? 'bg-[#4ECDC4]' : 'bg-[#FF6B6B]'}`}
                    style={{ width: `${(score / totalQuestions) * 100}%` }}
                  ></div>
                </div>
                <div className="flex justify-between text-xs text-gray-500">
                  <span>0</span>
                  <span className="relative">
                    {fifthGraderThreshold}
                    <span className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-nowrap bg-[#1A535C] text-white px-2 py-1 rounded">
                      5th Grade Level
                    </span>
                  </span>
                  <span>{totalQuestions}</span>
                </div>
              </div>
              
              <p className="text-gray-700 mb-8 text-lg">
                {beatFifthGrader
                  ? `¡Excelente! You scored ${score} out of ${totalQuestions}, which is better than an average 5th grader!`
                  : `You scored ${score} out of ${totalQuestions}. A typical 5th grader scores at least ${fifthGraderThreshold}. ¡Sigue practicando! (Keep practicing!)`}
              </p>
              
              <button
                onClick={resetGame}
                className="w-full px-6 py-4 bg-gradient-to-r from-[#FF6B6B] to-[#ff5252] text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:translate-y-[-2px]"
              >
                Play Again
              </button>
            </div>
          </div>
        );
        
      default:
        return <div>Something went wrong</div>;
    }
  };
  
  return (
    <div className="min-h-screen bg-gradient-to-b from-[#F7FFF7] to-[#e6f7f6] font-['Inter',sans-serif] text-[#1A535C]">
      <style jsx="true">{`
        @keyframes confettiFall {
          0% {
            transform: translateY(-100vh) rotate(0deg);
            opacity: 1;
          }
          100% {
            transform: translateY(100vh) rotate(360deg);
            opacity: 0;
          }
        }
        
        .confetti {
          position: absolute;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          animation: confettiFall 5s linear forwards;
        }
        
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out forwards;
        }
      `}</style>
      <div className="container mx-auto py-8 px-4">
        {renderGameContent()}
      </div>
    </div>
  );
};

export default SpanishGame;