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",
//   },
// ];
interface QuizModule {
  id: number;
  question: string;
}
export default function Index() {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
  const [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({});
  const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]);

    const [questionsData, setQuestionsData] = useState<QuizModule[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        fetch(`https://api.teachertrainingkolkata.in/api/question-list`)
            .then(res => {
                if (!res.ok) {
                    throw new Error('Network response was not ok');
                }
                return res.json();
            })
            .then(data => {
                // console.log('Question Data', typeof data);
                setQuestionsData(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('An error occurred', error);
                setError(error);
                setLoading(false);
            });
    }, []); // Dependency array to run the effect only once on mount
    // console.log('Question Data Length', questionsData.length)
    if (loading) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error.message}</div>;
    }
  useEffect(() => {
    // Start the countdown timer
    const id = setInterval(() => {
      setTimeRemaining((prevTime) => {
        if (prevTime <= 1) {
          clearInterval(id);
          return 0;
        }
        return prevTime - 1;
      });
    }, 1000);

    // Clear interval on component unmount
    return () => {
      clearInterval(id);
    };
  }, []);

  const handleNextQuestion = () => {
    if (selectedAnswers[currentQuestion.id]) {
      setAnsweredQuestions((prev) => [
        ...prev,
        { id: currentQuestion.id, selectedOption: selectedAnswers[currentQuestion.id] },
      ]);
    }
    setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionsData.length);
  };

  const handleAnswerChange = (questionId: number, selectedOption: string) => {
    setSelectedAnswers((prevAnswers) => ({
      ...prevAnswers,
      [questionId]: selectedOption,
    }));
  };
console.log('Question Data 04',questionsData)
  const currentQuestion = questionsData[currentQuestionIndex];
  console.log('Current Questions', currentQuestion);
  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] ${selectedAnswers[currentQuestion.id] === option ? 'border-[#000]' : '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}`} checked={selectedAnswers[currentQuestion.id] === option} onChange={() => handleAnswerChange(currentQuestion.id, option)}/>&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
                    </button>
                </div>
            </div>
        </section>
      {/* <pre>{JSON.stringify(answeredQuestions, null, 2)}</pre> */}
    </>
  );
}