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: `متى تم اعتماد مدينة الكويت مدينة عالمية لحرفة نسيج السدو من مجلس الحرف العالمي؟`,
    listAnswer: [
      "2023",
      "2024",
      "2025",
    ],
    correctAnswer: "2025",
    numberQuestion: 'الأول'
  },
  {
    question: `متى أدرجت منظمة اليونيسكو فن السدو في التراث الثقافي العالمي غير المادي؟`,
    listAnswer: [
      "2020",
      "2021",
      "2022",
    ],
    correctAnswer: "2020",
    numberQuestion: 'الثاني'
  },
  {
    question: `ما هي حرفة نسيج السدو التراثية في الكويت؟`,
    listAnswer: [
      "نسج وبر الجمال",
      "حياكة صوف الغنم",
      "غزل شعر الماعز",
    ],
    correctAnswer: "حياكة صوف الغنم",
    numberQuestion: 'الثالث'
  },
  {
    question: `ما الموسم الذي يتم فيه جز الصوف قديماً في البادية في دولة الكويت؟`,
    listAnswer: [
      "موسم الشتاء",
      "موسم الخريف",
      "موسم الربيع",
    ],
    correctAnswer: "موسم الربيع",
    numberQuestion: 'الرابع'
  },
  {
    question: `ما اسم النبات المستخدم في صباغة خيوط الصوف التقليدية في حرفة نسيج السدو؟`,
    listAnswer: [
      "النوير",
      "العرجون",
      "الجوري",
    ],
    correctAnswer: "العرجون",
    numberQuestion: 'الخامس'
  },
  {
    question: `ما الاسم الذي يطلق على المرأة المتميزة بالحياكة في عرف البادية؟`,
    listAnswer: [
      "الجيدة",
      "الماهرة",
      "الظفرة",
    ],
    correctAnswer: "الظفرة",
    numberQuestion: 'السادس'
  },
];
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 = "إرسال";
        }
      } else {
        buttonNext.disabled = true;
        showResult();
      }
      checkActivePagination();
      checkButtonVisibility();
    }
  });

buttonPrev &&
  buttonPrev.addEventListener("click", () => {
    if (currentQuestion > 1) {
      currentQuestion -= 1;
      generateQuestion();
      checkActivePagination();
      checkButtonVisibility();
    }
  });

buttonTryAgain &&
  buttonTryAgain.addEventListener("click", () => {
    tryAgain();
    generateQuestion();
    checkActivePagination();
  });

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

  // Pre-select the previous answer if it exists
  const previousAnswer = listWrongAnswers.find(
    (entry) => entry.numberQuestion === currentQuestion
  );
  if (previousAnswer) {
    setTimeout(() => {
      const radioButton = document.querySelector(
        `input[value="${previousAnswer.userAnswer}"]`
      );
      if (radioButton) {
        radioButton.checked = true;
      }
    }, 0);
  }
}

function checkAnswer() {
  const answer = document.querySelector(".listAnswer input:checked")?.value;
  if (answer) {
    const userAnswer = answer.trim();
    const correctAnswer = listQuestion[currentQuestion - 1].correctAnswer.trim();

    // 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 (listWrongAnswers[existingAnswerIndex].isCorrectAnswer) {
        score -= 1;
      }
      listWrongAnswers.splice(existingAnswerIndex, 1);
    }

    const isCorrect = userAnswer === correctAnswer;
    if (isCorrect) {
      score += 1;
    }
    listWrongAnswers.push({
      isCorrectAnswer: isCorrect,
      numberQuestion: currentQuestion,
      question: listQuestion[currentQuestion - 1].question,
      correctAnswer: correctAnswer,
      userAnswer: userAnswer,
    });
    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() {
  questionProgress.innerHTML = "";
  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");
    }
  });
}

function checkButtonVisibility() {
  if (currentQuestion > 1) {
    buttonPrev.style.display = "inline-block";
  } else {
    buttonPrev.style.display = "none";
  }

  if (currentQuestion === listQuestion.length) {
    buttonNext.textContent = "إرسال";
  } else {
    buttonNext.textContent = "التالي";
  }
}