import React, { useState, useEffect } from 'react';
import { Play, RotateCcw, CheckCircle, XCircle, Trophy, Zap, Sun, Wind, Droplets } from 'lucide-react';

const QuizApp = () => {
  const [gameState, setGameState] = useState('start'); // start, playing, end
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [showFeedback, setShowFeedback] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  const [isCorrect, setIsCorrect] = useState(false);

  // 30 Questions derived strictly from TWAU 07.pdf
  const questions = [
    {
      question: "What is defined as the ability to make things move, light up, produce sound, or do work?",
      options: ["Gravity", "Energy", "Friction", "Magnetism"],
      correct: 1,
      explanation: "The text defines Energy as what makes things move, light up, produce sound, do work and change temperature."
    },
    {
      question: "Which Indian snake can glide through the air by flattening its body?",
      options: ["King Cobra", "Flying Snake", "Python", "Rat Snake"],
      correct: 1,
      explanation: "The text mentions the Flying Snake, living in Indian forests, can glide through the air."
    },
    {
      question: "In the balloon activity, what kind of energy makes the balloon move forward?",
      options: ["Water energy", "Air movement", "Magnetic pull", "Electrical energy"],
      correct: 1,
      explanation: "When air rushes out of the balloon, it pushes the balloon forward. The movement of air generates energy."
    },
    {
      question: "In the 'Rubber Band Guitar' activity, what produces the sound?",
      options: ["The color of the band", "The length of the box", "Vibrations", "The air inside the box"],
      correct: 2,
      explanation: "Plucking the rubber bands makes them vibrate and produce sounds. This is sound energy."
    },
    {
      question: "What is the main source of energy for life on Earth?",
      options: ["The Moon", "The Sun", "Volcanoes", "Wind"],
      correct: 1,
      explanation: "The text states explicitly: 'The Sun is the main source of energy for life on Earth.'"
    },
    {
      question: "Which solar park in Rajasthan is mentioned as one of the largest in the world?",
      options: ["Kurnool Ultra", "Bhadla Solar Park", "Pavagada", "Rewa Ultra"],
      correct: 1,
      explanation: "The Bhadla Solar Park in Rajasthan is listed as one of the largest solar power plants in the world."
    },
    {
      question: "In cold regions like Ladakh, where do people sometimes keep cattle to warm the rooms above?",
      options: ["On the roof", "In the living room", "On the ground floor", "In a separate shed"],
      correct: 2,
      explanation: "People often keep their cattle on the ground floor. The heat from animals helps keep the rooms above warm."
    },
    {
      question: "What acts as 'fuel' for humans and animals?",
      options: ["Water", "Sleep", "Food", "Sunlight"],
      correct: 2,
      explanation: "Just like vehicles need fuel, humans and animals get energy from food."
    },
    {
      question: "Does the brain use energy even when we are sleeping?",
      options: ["Yes", "No", "Only when dreaming", "Only when awake"],
      correct: 0,
      explanation: "The 'Do you know?' section states that our brain uses energy even when we are sitting, sleeping, or thinking."
    },
    {
      question: "Which of the following is a fuel used for vehicles?",
      options: ["Water", "Petrol", "Sand", "Iron"],
      correct: 1,
      explanation: "Fuels such as petrol and diesel are sources of energy for vehicles."
    },
    {
      question: "Why should we limit the use of wood and coal for cooking?",
      options: ["They are too expensive", "They create pollution", "They don't produce heat", "They are too heavy"],
      correct: 1,
      explanation: "Burning wood or coal creates pollution, smoke, and harmful gases."
    },
    {
      question: "In the Diya experiment, what acted as the fuel?",
      options: ["The cotton wick", "The oil", "The matchstick", "The air"],
      correct: 1,
      explanation: "In the experiment, the diya with oil burned longer because the oil acts as the fuel."
    },
    {
      question: "Which airport is the world's first to be entirely powered by solar energy?",
      options: ["Delhi International", "Mumbai Airport", "Cochin International Airport", "Bangalore Airport"],
      correct: 2,
      explanation: "Cochin International Airport in Kerala is the world's first airport to be entirely powered by solar energy."
    },
    {
      question: "What device converts electrical energy into movement (wind)?",
      options: ["A heater", "A bulb", "A fan", "A speaker"],
      correct: 2,
      explanation: "A fan uses electricity to create movement (blowing air)."
    },
    {
      question: "Using LED bulbs instead of old bulbs is an example of what?",
      options: ["Energy waste", "Energy efficiency", "Energy pollution", "Energy creation"],
      correct: 1,
      explanation: "Energy efficiency means using less energy to do the same work, like using LED bulbs."
    },
    {
      question: "Which of these is a SAFETY rule for electricity?",
      options: ["Touch wires with wet hands", "Put pens in sockets", "Stay away from fallen electric poles", "Repair transformers yourself"],
      correct: 2,
      explanation: "If you see broken wires or fallen electric poles, stay away and tell an adult."
    },
    {
      question: "What creates a lot of smoke and harmful gases when used to generate electricity?",
      options: ["Wind", "Sunlight", "Coal", "Water"],
      correct: 2,
      explanation: "Most electricity comes from burning fuels like coal, which creates smoke and harmful gases."
    },
    {
      question: "Which of these is NOT a source of 'Clean Energy'?",
      options: ["The Sun", "Wind", "Coal", "Water"],
      correct: 2,
      explanation: "Clean energy sources listed are Sun, Wind, and Water. Coal is polluting."
    },
    {
      question: "What is a 'Gharaat' used for in hilly areas?",
      options: ["Cooking food", "Grinding grains using water flow", "Catching fish", "Storing solar power"],
      correct: 1,
      explanation: "In hilly areas, watermills called gharaats use flowing water to grind grains."
    },
    {
      question: "In the 'Sunlight in Focus' activity, what tool is used to focus light?",
      options: ["A mirror", "A magnifying glass", "A prism", "Sunglasses"],
      correct: 1,
      explanation: "A magnifying glass is used to focus the sunlight onto a piece of paper."
    },
    {
      question: "What powers a pinwheel to move?",
      options: ["Water", "Heat", "Wind", "Electricity"],
      correct: 2,
      explanation: "Holding a pinwheel in the wind or running with it makes it rotate using wind energy."
    },
    {
      question: "Ancient traders from Gujarat and Tamil Nadu used what to sail ships?",
      options: ["Diesel engines", "Steam power", "Wind energy", "Solar panels"],
      correct: 2,
      explanation: "Ancient ships had massive sails that used wind energy to travel across vast seas."
    },
    {
      question: "What converts sunlight directly into electricity?",
      options: ["Windmills", "Solar panels", "Dams", "Batteries"],
      correct: 1,
      explanation: "Solar panels capture sunlight and turn it into electricity."
    },
    {
      question: "Batteries are an example of what kind of energy?",
      options: ["Wasted energy", "Stored energy", "Sound energy", "Wind energy"],
      correct: 1,
      explanation: "Batteries contain stored energy which can be used later."
    },
    {
      question: "What is the ancient Indian system of design mentioned that helps plan buildings in harmony with nature?",
      options: ["Yoga", "Ayurveda", "Vaastu Shastra", "Vedas"],
      correct: 2,
      explanation: "Vaastu Shastra helps plan buildings to make the best use of natural energy like sunlight and wind."
    },
    {
      question: "Why do some desert plants open only at night?",
      options: ["To catch bugs", "To save water and energy", "To get moonlight", "To avoid animals"],
      correct: 1,
      explanation: "Some plants in deserts open only at night to save water and energy."
    },
    {
      question: "The Sun gives more energy to Earth in one hour than humans use in a...?",
      options: ["Day", "Month", "Week", "Whole year"],
      correct: 3,
      explanation: "The text states the Sun gives more energy in one hour than all humans use in a whole year."
    },
    {
      question: "What helps ancient traditional Indian houses stay cool in summer?",
      options: ["Air conditioners", "Small windows and thick walls", "Glass roofs", "Electric fans"],
      correct: 1,
      explanation: "Traditional houses had small windows and thick walls to keep them cool in summer and warm in winter."
    },
    {
      question: "In the Energy Flow Game, what would be the 'Type' of energy for the Sun?",
      options: ["Movement", "Heat/Light", "Sound", "Fuel"],
      correct: 1,
      explanation: "The Sun provides Heat and Light energy."
    },
    {
      question: "What happens if you do not eat food?",
      options: ["You feel energetic", "You feel tired", "You feel hotter", "You move faster"],
      correct: 1,
      explanation: "When we do not eat, we may feel tired because we lack energy."
    }
  ];

  const handleStart = () => {
    setGameState('playing');
    setCurrentQuestion(0);
    setScore(0);
    setShowFeedback(false);
  };

  const handleOptionClick = (index) => {
    if (showFeedback) return;
    
    setSelectedOption(index);
    const correct = index === questions[currentQuestion].correct;
    setIsCorrect(correct);
    if (correct) {
      setScore(score + 1);
    }
    setShowFeedback(true);
  };

  const handleNext = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
      setShowFeedback(false);
      setSelectedOption(null);
    } else {
      setGameState('end');
    }
  };

  // Start Screen
  if (gameState === 'start') {
    return (
      <div className="min-h-screen bg-gradient-to-br from-yellow-50 to-orange-100 flex items-center justify-center p-4 font-sans">
        <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center border-4 border-yellow-400">
          <div className="flex justify-center mb-6">
            <Zap className="w-20 h-20 text-yellow-500 animate-pulse" />
          </div>
          <h1 className="text-3xl font-bold text-gray-800 mb-4">Energy: How Things Work</h1>
          <p className="text-gray-600 mb-8 text-lg">Test your knowledge with 30 interactive questions based on Chapter 7!</p>
          
          <div className="flex justify-center space-x-4 mb-8 text-gray-500">
            <div className="flex flex-col items-center">
              <Sun className="w-8 h-8 text-orange-400 mb-1" />
              <span className="text-xs">Solar</span>
            </div>
            <div className="flex flex-col items-center">
              <Wind className="w-8 h-8 text-blue-400 mb-1" />
              <span className="text-xs">Wind</span>
            </div>
            <div className="flex flex-col items-center">
              <Droplets className="w-8 h-8 text-blue-600 mb-1" />
              <span className="text-xs">Hydro</span>
            </div>
          </div>

          <button 
            onClick={handleStart}
            className="w-full bg-yellow-500 hover:bg-yellow-600 text-white text-xl font-bold py-4 px-8 rounded-xl transition-all transform hover:scale-105 flex items-center justify-center shadow-lg"
          >
            <Play className="mr-2" /> Start Quiz
          </button>
        </div>
      </div>
    );
  }

  // Playing Screen
  if (gameState === 'playing') {
    return (
      <div className="min-h-screen bg-slate-50 flex flex-col items-center p-4 font-sans">
        <div className="w-full max-w-2xl bg-white rounded-2xl shadow-lg overflow-hidden mt-4">
          
          {/* Header & Progress */}
          <div className="bg-slate-800 text-white p-4 flex justify-between items-center">
            <span className="font-bold text-lg">Question {currentQuestion + 1} / {questions.length}</span>
            <span className="bg-slate-700 px-3 py-1 rounded-full text-yellow-400 font-bold">Score: {score}</span>
          </div>
          <div className="w-full bg-gray-200 h-2">
            <div 
              className="bg-yellow-500 h-2 transition-all duration-300"
              style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
            ></div>
          </div>

          {/* Question Area */}
          <div className="p-6 md:p-8">
            <h2 className="text-xl md:text-2xl font-bold text-gray-800 mb-6 leading-relaxed">
              {questions[currentQuestion].question}
            </h2>

            <div className="grid grid-cols-1 gap-4">
              {questions[currentQuestion].options.map((option, index) => {
                // Determine styling based on state
                let buttonClass = "w-full text-left p-4 rounded-xl border-2 text-lg font-medium transition-all duration-200 ";
                
                if (showFeedback) {
                  if (index === questions[currentQuestion].correct) {
                    buttonClass += "bg-green-100 border-green-500 text-green-800";
                  } else if (index === selectedOption) {
                    buttonClass += "bg-red-100 border-red-500 text-red-800";
                  } else {
                    buttonClass += "bg-gray-50 border-gray-200 text-gray-400 opacity-50";
                  }
                } else {
                  buttonClass += "bg-white border-gray-200 hover:border-blue-400 hover:bg-blue-50 text-gray-700 hover:shadow-md";
                }

                return (
                  <button
                    key={index}
                    onClick={() => handleOptionClick(index)}
                    disabled={showFeedback}
                    className={buttonClass}
                  >
                    <div className="flex items-center justify-between">
                      <span>{option}</span>
                      {showFeedback && index === questions[currentQuestion].correct && <CheckCircle className="w-6 h-6 text-green-600" />}
                      {showFeedback && index === selectedOption && index !== questions[currentQuestion].correct && <XCircle className="w-6 h-6 text-red-600" />}
                    </div>
                  </button>
                );
              })}
            </div>

            {/* Feedback & Next Button */}
            {showFeedback && (
              <div className="mt-6 animate-fade-in-up">
                <div className={`p-4 rounded-xl mb-6 ${isCorrect ? 'bg-green-50 border border-green-200' : 'bg-orange-50 border border-orange-200'}`}>
                  <h3 className={`font-bold mb-1 ${isCorrect ? 'text-green-800' : 'text-orange-800'}`}>
                    {isCorrect ? 'Correct! 🎉' : 'Oops!'}
                  </h3>
                  <p className="text-gray-700">
                    <span className="font-semibold">Explanation:</span> {questions[currentQuestion].explanation}
                  </p>
                </div>
                
                <button 
                  onClick={handleNext}
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow-lg transition-transform transform hover:scale-102 flex justify-center items-center"
                >
                  {currentQuestion < questions.length - 1 ? 'Next Question' : 'Finish Quiz'}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  // End Screen
  if (gameState === 'end') {
    const percentage = Math.round((score / questions.length) * 100);
    let message = "";
    let color = "";

    if (percentage === 100) {
      message = "Energy Master! 🌟";
      color = "text-yellow-500";
    } else if (percentage >= 80) {
      message = "Great Job! ⚡";
      color = "text-blue-500";
    } else if (percentage >= 50) {
      message = "Good Effort! 👍";
      color = "text-green-500";
    } else {
      message = "Keep Learning! 📚";
      color = "text-orange-500";
    }

    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans">
        <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full text-center">
          <div className="flex justify-center mb-6">
            <Trophy className={`w-24 h-24 ${color}`} />
          </div>
          
          <h2 className="text-4xl font-bold text-gray-800 mb-2">{score} / {questions.length}</h2>
          <p className="text-gray-500 mb-6 text-lg">Your Final Score</p>
          
          <h3 className={`text-2xl font-bold mb-8 ${color}`}>{message}</h3>
          
          <div className="bg-gray-100 rounded-xl p-4 mb-8">
             <p className="text-sm text-gray-600">You completed 30 questions covering energy types, sources, safety, and conservation.</p>
          </div>

          <button 
            onClick={handleStart}
            className="w-full bg-slate-800 hover:bg-slate-900 text-white text-lg font-bold py-4 px-8 rounded-xl transition-all shadow-lg flex items-center justify-center"
          >
            <RotateCcw className="mr-2" /> Play Again
          </button>
        </div>
      </div>
    );
  }

  return null;
};

export default QuizApp;