const buttonNext = document.querySelector("button.buttonNext");
const buttonPrev = document.querySelector("button.buttonPrev");
const buttonTryAgain = document.querySelector("button.tryAgain");
const questionText = document.querySelector(".question");
const listAnswer = document.querySelector(".listAnswer");
const questionProgress = document.querySelector(".questionProgress");
const listQuestion = [
  {
    question: `When was Kuwait City recognized as a World Crafts City for AlSadu Weaving by the World Crafts Council?`,
    listAnswer: [
      "2023",
      "2024",
      "2025",
    ],
    correctAnswer: "2025",
    numberQuestion:'1'
  },
  {
    question: `When did UNESCO include the art of AlSadu in the world's intangible cultural heritage? `,

    listAnswer: [
      "2020",
      "2021",
      "2022 ",
    ],
    correctAnswer: "2020",
    numberQuestion:'2'
  },
  {
    question: `What is the traditional craft of AlSadu weaving in Kuwait? `,
    listAnswer: [
      "Weaving camel wool",
      "Knitting sheep’s wool",
      "Spinning goat hair",
    ],
    correctAnswer: "Knitting sheep’s wool",
    numberQuestion:'3'
  },
  {
    question: `Which season was traditionally used for shearing wool in the Bedioun desert of Kuwait?`,
    listAnswer: [
	"Winter Season",
      "Autumn Season",
      "Spring Season",
	],
    correctAnswer: "Spring Season",
    numberQuestion:'4'
  },
  {
    question: `Which plant is used to dye the traditional wool threads in AlSadu weaving craft?`,
    listAnswer: [
      "Nuwair (Senecio glaucus)",
      "Arjun (Podaxis)",
      "Jouri (Rose)",
    ],
    correctAnswer: "Arjun (Podaxis)",
    numberQuestion:'5'
  },
  
  {
    question: `What name is given to a woman who excels in knitting in the Bedouin tradition?`,
    listAnswer: [
      "Jayyida (Good) ",
      "Mahira (Skilled)",
      "Dhafra (Distinguished)",
    ],
    correctAnswer: "Dhafra (Distinguished)",
    numberQuestion:'6'
  },
];
let currentQuestion = 1;
let score = 0;
let listWrongAnswers = [];
document.addEventListener("DOMContentLoaded", () => {
  generateQuestion();
  generatePagination();
  checkActivePagination();
  checkButtonVisibility();
});
buttonNext &&
  buttonNext.addEventListener("click", () => {
    if (checkAnswer()) {
      if (currentQuestion + 1 <= listQuestion.length) {
        currentQuestion += 1;
        if (currentQuestion <= listQuestion.length) {
          generateQuestion();
        }
        if (currentQuestion + 1 > listQuestion.length) {
          buttonNext.textContent = "Next";
        }
      } else {
      	buttonNext.disabled = true;
        showResult();
      }
      checkActivePagination();
      checkButtonVisibility();
    }
  });
buttonPrev &&
  buttonPrev.addEventListener("click", () => {
    if (currentQuestion > 1) {
      currentQuestion -= 1;
      generateQuestion();
      checkActivePagination();
      checkButtonVisibility();
    }
  });  
function checkButtonVisibility() {
  if (currentQuestion > 1) {
    buttonPrev.style.display = "inline-block";
  } else {
    buttonPrev.style.display = "none";
  }

  if (currentQuestion === listQuestion.length) {
    buttonNext.textContent = "Next";
  } else {
    buttonNext.textContent = "Next";
  }
}
  
buttonTryAgain &&
  buttonTryAgain.addEventListener("click", () => {
    tryAgain();
    generateQuestion();
    checkActivePagination();
  });

function generateQuestion() {
  questionText.textContent = listQuestion[currentQuestion - 1].question;
  document.querySelector('.numberQuestion').innerHTML = 'Question ' + listQuestion[currentQuestion - 1].numberQuestion;
  listAnswer.textContent = "";
  listQuestion[currentQuestion - 1].listAnswer.forEach((value) => {
    listAnswer.innerHTML += `
      <div class="groupAnswer">
        <input type="radio" name="answer" id="${value}" value="${value}">
        <label for="${value}">${value}</label>
      </div>
    `;
  });

  // Pre-select the previous answer if it exists
  const previousAnswer = listWrongAnswers.find(
    (entry) => entry.numberQuestion === currentQuestion
  );
  if (previousAnswer) {
    const radioButton = document.querySelector(
      `input[value="${previousAnswer.userAnswer}"]`
    );
    if (radioButton) {
      radioButton.checked = true;
    }
  }
}
function checkAnswer() {
  const answer = document.querySelector(".listAnswer input:checked")?.value;
  if (answer) {
    // Check if the current question already has an entry in listWrongAnswers
    const existingAnswerIndex = listWrongAnswers.findIndex(
      (entry) => entry.numberQuestion === currentQuestion
    );

    // Adjust score if the question was previously answered
    if (existingAnswerIndex !== -1) {
      // If the question was previously answered correctly, deduct the score
      if (listWrongAnswers[existingAnswerIndex].isCorrectAnswer) {
        score -= 1;
      }
      // Remove the old entry
      listWrongAnswers.splice(existingAnswerIndex, 1);
    }

    // Add the new answer
    const isCorrect = listQuestion[currentQuestion - 1].correctAnswer === answer;
    if (isCorrect) {
      score += 1;
    }
    listWrongAnswers.push({
      isCorrectAnswer: isCorrect,
      numberQuestion: currentQuestion,
      question: listQuestion[currentQuestion - 1].question,
      correctAnswer: listQuestion[currentQuestion - 1].correctAnswer,
      userAnswer: answer,
    });
    return true;
  }
  return false;
}

function showResult() {
  localStorage.setItem("result", JSON.stringify(listWrongAnswers));
  location.href = location.pathname.replace(/[^\/]*$/, "result.html");
}
function tryAgain() {
  score = 0;
  currentQuestion = 1;

  document.querySelector("form").reset();
  document.querySelector(".formQuestion").style.display = "flex";
  document.querySelector(".containerResult").style.display = "none";
  buttonNext.textContent = "التالي";
  listWrongAnswers = [];
  document.querySelector(".containerResult .listWrongAnswers").innerHTML = "";
  checkButtonVisibility();
}

function generatePagination() {
  // Clear existing pagination
  questionProgress.innerHTML = "";

  // Generate new pagination
  listQuestion.forEach((question, index) => {
    questionProgress.innerHTML += `
      <li class="circle-question">
        <span class="currentQuestion ">
            ${index + 1}
        </span>
      </li>
    `;
  });
}

function checkActivePagination() {
  document.querySelectorAll(".questionProgress li").forEach((element, i) => {
    if (currentQuestion - 1 === i) {
      element.classList.add("active");
    } else {
      element.classList.remove("active");
    }
  });
}