import React, { useState, useEffect } from 'react';

const KidsLearningGame = () => {
  const [gameType, setGameType] = useState('math');
  const [score, setScore] = useState(0);
  const [currentQuestion, setCurrentQuestion] = useState(null);
  const [userAnswer, setUserAnswer] = useState('');
  const [feedback, setFeedback] = useState('');
  const [showCelebration, setShowCelebration] = useState(false);
  const [isSpeaking, setIsSpeaking] = useState(false);

  // Simple words for spelling practice
  const words = ['cat', 'dog', 'sun', 'car', 'bat', 'hat', 'cup', 'bee', 'egg', 'pig'];
  
  // Speech function
  const speak = (text, rate = 0.8) => {
    if ('speechSynthesis' in window) {
      // Cancel any ongoing speech
      window.speechSynthesis.cancel();
      
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.rate = rate; // Slower for kids
      utterance.pitch = 1.1; // Slightly higher pitch
      utterance.volume = 1;
      
      // Try to use a child-friendly voice if available
      const voices = window.speechSynthesis.getVoices();
      const preferredVoice = voices.find(voice => 
        voice.name.includes('Google') || 
        voice.name.includes('Microsoft') ||
        voice.lang.startsWith('en')
      );
      if (preferredVoice) {
        utterance.voice = preferredVoice;
      }
      
      utterance.onstart = () => setIsSpeaking(true);
      utterance.onend = () => setIsSpeaking(false);
      
      window.speechSynthesis.speak(utterance);
    }
  };

  // Speak encouragement phrases
  const encouragementPhrases = [
    "Great job!", "Wonderful!", "Amazing!", "You're so smart!", 
    "Fantastic!", "Super!", "Excellent!", "Way to go!"
  ];
  
  const getRandomEncouragement = () => {
    return encouragementPhrases[Math.floor(Math.random() * encouragementPhrases.length)];
  };
  
  // Generate math questions
  const generateMathQuestion = () => {
    const num1 = Math.floor(Math.random() * 10) + 1;
    const num2 = Math.floor(Math.random() * 10) + 1;
    const operation = Math.random() > 0.5 ? '+' : '-';
    
    if (operation === '+') {
      const question = {
        question: `${num1} + ${num2}`,
        answer: num1 + num2,
        type: 'math',
        spokenText: `Let's add! ${num1} plus ${num2} equals what?`
      };
      return question;
    } else {
      // Make sure subtraction doesn't result in negative numbers
      const larger = Math.max(num1, num2);
      const smaller = Math.min(num1, num2);
      const question = {
        question: `${larger} - ${smaller}`,
        answer: larger - smaller,
        type: 'math',
        spokenText: `Let's subtract! ${larger} minus ${smaller} equals what?`
      };
      return question;
    }
  };

  // Generate spelling questions
  const generateSpellingQuestion = () => {
    const word = words[Math.floor(Math.random() * words.length)];
    return {
      question: `How do you spell: ${word.toUpperCase()}?`,
      answer: word.toLowerCase(),
      type: 'spelling',
      word: word,
      spokenText: `Let's spell! How do you spell ${word}? ${word.split('').join(', ')}`
    };
  };

  // Initialize or generate new question
  const newQuestion = () => {
    setUserAnswer('');
    setFeedback('');
    let question;
    if (gameType === 'math') {
      question = generateMathQuestion();
    } else {
      question = generateSpellingQuestion();
    }
    setCurrentQuestion(question);
    
    // Speak the question after a short delay
    setTimeout(() => {
      speak(question.spokenText);
    }, 500);
  };

  // Repeat the current question
  const repeatQuestion = () => {
    if (currentQuestion && currentQuestion.spokenText) {
      speak(currentQuestion.spokenText);
    }
  };

  // Check answer
  const checkAnswer = () => {
    if (!userAnswer.trim()) return;
    
    const isCorrect = userAnswer.toLowerCase().trim() === currentQuestion.answer.toString().toLowerCase();
    
    if (isCorrect) {
      setScore(score + 1);
      const encouragement = getRandomEncouragement();
      setFeedback(`🎉 ${encouragement} That's correct!`);
      setShowCelebration(true);
      
      // Speak positive feedback
      speak(`${encouragement}! That's correct! The answer is ${currentQuestion.answer}!`);
      
      setTimeout(() => {
        setShowCelebration(false);
        speak("Let's try another one!");
        setTimeout(() => {
          newQuestion();
        }, 1000);
      }, 2500);
    } else {
      setFeedback(`Good try! The answer is ${currentQuestion.answer}. Let's try another one!`);
      
      // Speak corrective feedback
      speak(`Good try! The correct answer is ${currentQuestion.answer}. Let's try another one!`);
      
      setTimeout(() => {
        newQuestion();
      }, 4000);
    }
  };

  // Switch game type
  const switchGameType = (type) => {
    setGameType(type);
    setUserAnswer('');
    setFeedback('');
    
    // Announce the game mode
    if (type === 'math') {
      speak("Let's practice math! We can add and subtract numbers!");
    } else {
      speak("Let's practice spelling! We'll spell fun words together!");
    }
  };

  // Load voices and initialize first question
  useEffect(() => {
    // Load voices
    if ('speechSynthesis' in window) {
      const loadVoices = () => {
        window.speechSynthesis.getVoices();
      };
      
      if (window.speechSynthesis.onvoiceschanged !== undefined) {
        window.speechSynthesis.onvoiceschanged = loadVoices;
      }
      loadVoices();
    }
    
    // Welcome message
    setTimeout(() => {
      speak("Welcome to Learning Fun! Let's practice math together!");
    }, 1000);
  }, []);

  // Generate new question when game type changes
  useEffect(() => {
    if (currentQuestion === null) {
      newQuestion();
    } else {
      newQuestion();
    }
  }, [gameType]);

  // Handle enter key
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      checkAnswer();
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 p-4">
      <div className="max-w-2xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-purple-800 mb-2">🌟 Learning Fun! 🌟</h1>
          <div className="text-2xl font-semibold text-green-700">Score: {score} ⭐</div>
          {isSpeaking && (
            <div className="text-lg text-blue-600 mt-2 animate-pulse">
              🔊 Speaking...
            </div>
          )}
        </div>

        {/* Game Type Switcher */}
        <div className="flex justify-center mb-6">
          <button
            onClick={() => switchGameType('math')}
            className={`px-6 py-3 mx-2 text-xl font-bold rounded-full ${
              gameType === 'math' 
                ? 'bg-orange-400 text-white shadow-lg' 
                : 'bg-white text-orange-400 border-2 border-orange-400'
            } hover:scale-105 transition-transform`}
          >
            🔢 Math Fun
          </button>
          <button
            onClick={() => switchGameType('spelling')}
            className={`px-6 py-3 mx-2 text-xl font-bold rounded-full ${
              gameType === 'spelling' 
                ? 'bg-green-400 text-white shadow-lg' 
                : 'bg-white text-green-400 border-2 border-green-400'
            } hover:scale-105 transition-transform`}
          >
            🔤 Spelling Fun
          </button>
        </div>

        {/* Game Area */}
        <div className="bg-white rounded-3xl shadow-2xl p-8 text-center">
          {currentQuestion && (
            <>
              <div className="mb-6">
                <h2 className="text-3xl font-bold text-gray-800 mb-4">
                  {currentQuestion.question}
                </h2>
                
                {gameType === 'spelling' && currentQuestion.word && (
                  <div className="text-6xl mb-4">
                    {currentQuestion.word === 'cat' && '🐱'}
                    {currentQuestion.word === 'dog' && '🐶'}
                    {currentQuestion.word === 'sun' && '☀️'}
                    {currentQuestion.word === 'car' && '🚗'}
                    {currentQuestion.word === 'bat' && '🦇'}
                    {currentQuestion.word === 'hat' && '👒'}
                    {currentQuestion.word === 'cup' && '☕'}
                    {currentQuestion.word === 'bee' && '🐝'}
                    {currentQuestion.word === 'egg' && '🥚'}
                    {currentQuestion.word === 'pig' && '🐷'}
                  </div>
                )}
              </div>

              <div className="mb-6">
                <input
                  type="text"
                  value={userAnswer}
                  onChange={(e) => setUserAnswer(e.target.value)}
                  onKeyPress={handleKeyPress}
                  className="text-2xl text-center p-4 border-4 border-blue-300 rounded-2xl w-48 focus:border-blue-500 focus:outline-none"
                  placeholder="Your answer"
                  autoFocus
                />
              </div>

              <div className="flex flex-col items-center gap-4">
                <button
                  onClick={checkAnswer}
                  disabled={isSpeaking}
                  className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white text-2xl font-bold py-4 px-8 rounded-2xl hover:scale-105 transition-transform shadow-lg"
                >
                  Check Answer! ✨
                </button>
                
                <button
                  onClick={repeatQuestion}
                  disabled={isSpeaking}
                  className="bg-purple-500 hover:bg-purple-600 disabled:bg-purple-300 text-white text-lg font-bold py-3 px-6 rounded-2xl hover:scale-105 transition-transform shadow-lg"
                >
                  🔊 Say it Again!
                </button>
              </div>
            </>
          )}

          {/* Feedback */}
          {feedback && (
            <div className={`mt-6 text-2xl font-bold p-4 rounded-2xl ${
              feedback.includes('correct') 
                ? 'bg-green-100 text-green-800' 
                : 'bg-yellow-100 text-yellow-800'
            }`}>
              {feedback}
            </div>
          )}

          {/* Celebration Animation */}
          {showCelebration && (
            <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
              <div className="bg-white rounded-3xl p-8 text-center animate-bounce">
                <div className="text-6xl mb-4">🎉</div>
                <div className="text-3xl font-bold text-green-600">Awesome!</div>
                <div className="text-xl text-gray-600">You're doing great!</div>
              </div>
            </div>
          )}
        </div>

        {/* Instructions */}
        <div className="mt-6 text-center text-gray-700">
          <p className="text-lg">
            🔊 Listen to the questions and practice speaking along!
            <br />
            Switch between Math and Spelling to practice both skills! 
            <br />
            Click "Say it Again!" if you want to hear the question repeated.
            <br />
            You're doing amazing! Keep learning and having fun! 🌈
          </p>
        </div>
      </div>
    </div>
  );
};

export default KidsLearningGame;