import { useState, useEffect } from 'react';

// Sample questions JSON data
const questionsData = [
  {
    "id": 1,
    "question": "What is the capital of France?",
    "options": ["Berlin", "Madrid", "Paris", "Rome"],
    "answer": "Paris"
  },
  {
    "id": 2,
    "question": "Which planet is known as the Red Planet?",
    "options": ["Earth", "Mars", "Jupiter", "Saturn"],
    "answer": "Mars"
  },
  {
    "id": 3,
    "question": "What is the chemical symbol for gold?",
    "options": ["Au", "Ag", "Pb", "Fe"],
    "answer": "Au"
  },
  {
    "id": 4,
    "question": "Who wrote 'To Kill a Mockingbird'?",
    "options": ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
    "answer": "Harper Lee"
  },
  {
    "id": 5,
    "question": "What is the largest ocean on Earth?",
    "options": ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
    "answer": "Pacific Ocean"
  },
  {
    "id": 6,
    "question": "Which element has the atomic number 1?",
    "options": ["Helium", "Hydrogen", "Oxygen", "Carbon"],
    "answer": "Hydrogen"
  },
  {
    "id": 7,
    "question": "In which year did the Titanic sink?",
    "options": ["1912", "1905", "1898", "1923"],
    "answer": "1912"
  },
  {
    "id": 8,
    "question": "Who is the author of '1984'?",
    "options": ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
    "answer": "George Orwell"
  },
  {
    "id": 9,
    "question": "What is the hardest natural substance on Earth?",
    "options": ["Gold", "Platinum", "Diamond", "Iron"],
    "answer": "Diamond"
  },
  {
    "id": 10,
    "question": "What is the largest planet in our solar system?",
    "options": ["Earth", "Saturn", "Neptune", "Jupiter"],
    "answer": "Jupiter"
  },
  {
    "id": 11,
    "question": "What is the main ingredient in guacamole?",
    "options": ["Tomato", "Avocado", "Pepper", "Onion"],
    "answer": "Avocado"
  },
  {
    "id": 12,
    "question": "Which country is known as the Land of the Rising Sun?",
    "options": ["China", "Japan", "Thailand", "South Korea"],
    "answer": "Japan"
  },
  {
    "id": 13,
    "question": "What is the smallest prime number?",
    "options": ["1", "2", "3", "5"],
    "answer": "2"
  },
  {
    "id": 14,
    "question": "Who painted the Mona Lisa?",
    "options": ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
    "answer": "Leonardo da Vinci"
  },
  {
    "id": 15,
    "question": "What is the capital city of Australia?",
    "options": ["Sydney", "Melbourne", "Canberra", "Brisbane"],
    "answer": "Canberra"
  },
  {
    "id": 16,
    "question": "Which gas do plants primarily use for photosynthesis?",
    "options": ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
    "answer": "Carbon Dioxide"
  },
  {
    "id": 17,
    "question": "What is the boiling point of water in Celsius?",
    "options": ["90°C", "100°C", "110°C", "120°C"],
    "answer": "100°C"
  },
  {
    "id": 18,
    "question": "Which language is primarily spoken in Brazil?",
    "options": ["Spanish", "Portuguese", "French", "English"],
    "answer": "Portuguese"
  },
  {
    "id": 19,
    "question": "What is the smallest unit of life?",
    "options": ["Tissue", "Organ", "Cell", "Organism"],
    "answer": "Cell"
  },
  {
    "id": 20,
    "question": "Who developed the theory of relativity?",
    "options": ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
    "answer": "Albert Einstein"
  },
  {
    "id": 21,
    "question": "In what year did World War II end?",
    "options": ["1945", "1944", "1946", "1943"],
    "answer": "1945"
  }
];

  

export default function Index() {
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
    const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
    const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
  
    useEffect(() => {
      // Start the countdown timer
      const id = setInterval(() => {
        setTimeRemaining(prevTime => {
          if (prevTime <= 1) {
            clearInterval(id);
            return 0;
          }
          return prevTime - 1;
        });
      }, 1000);
  
      setIntervalId(id);
  
      // Clear interval on component unmount
      return () => {
        if (intervalId) {
          clearInterval(intervalId);
        }
      };
    }, [intervalId]);
  
    const handleNextQuestion = () => {
      setCurrentQuestionIndex(prevIndex => (prevIndex + 1) % questionsData.length);
    };
  
    const currentQuestion = questionsData[currentQuestionIndex];
  
    return (
      <>
        <section className='container-fluid bg-[#000] '>
          <div className="flex flex-row justify-center gap-x-8 py-6">
            <p className="text-[42px] w-[42px] h-[31px]">✨</p>
            <div className="flex flex-col justify-center place-items-center">
              <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
              <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
            </div>
          </div>
        </section>
        <div className='mt-[100px]'>
            {/* this div for margin top */}
        </div>
        <div className='container mx-auto max-w-[890px]'>
            <p className='flex justify-end text-[20px] font-[600]'>Time remaining: {timeRemaining} seconds</p>
        </div>
        
        <section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl px-10 py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] bg-[#FCFCFC]" >
          <div>
            <h2 className="text-[32px] font-[700]">{`Q${currentQuestion.id}. ${currentQuestion.question}`}</h2>
            <div className="flex flex-col space-y-4 mt-8">
              {currentQuestion.options.map((option, index) => (
                <div key={index} className='border-[1px] border-[#D3D3D3] rounded-[10px] p-3 bg-[#FFF]'>
                  <label className='text-[18px] font-[600]' htmlFor={`question${currentQuestion.id}_${index}`}>
                    <input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} />
                    &nbsp;&nbsp;{option}
                  </label>
                </div>
              ))}
            </div>
            <div className='flex justify-end'>
              <button className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] " onClick={handleNextQuestion}>Next Question</button>
            </div>
          </div>
        </section>
      </>
    );
  }