const togglePassword = document.getElementById("togglePassword");
const passwordInput = document.getElementById("password");

if (togglePassword && passwordInput) {
  togglePassword.addEventListener("click", function () {
    const type =
      passwordInput.getAttribute("type") === "password" ? "text" : "password";
    passwordInput.setAttribute("type", type);

    const eyeIcon = this.querySelector("img");
    if (eyeIcon) {
      if (type === "text") {
        eyeIcon.src = "../assets/icons/eye-on.svg";
      } else {
        eyeIcon.src = "../assets/icons/eye-off.svg";
      }
    }
  });
}

const countryBtn = document.getElementById("countryBtn");
const countryDropdown = document.getElementById("countryDropdown");
const selectedFlag = document.getElementById("selectedFlag");
const selectedCode = document.getElementById("selectedCode");
const arrowIcon = countryBtn
  ? countryBtn.querySelector('img[src*="dropdown.svg"]')
  : null;

if (countryBtn) {
  countryBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    const isHidden = countryDropdown.classList.contains("hidden");
    countryDropdown.classList.toggle("hidden");
    if (arrowIcon) {
      arrowIcon.style.transform = isHidden ? "rotate(180deg)" : "rotate(0deg)";
    }
  });
}

function selectCountry(flag, code) {
  if (selectedFlag) selectedFlag.src = `https://flagcdn.com/w40/${flag}.png`;
  if (selectedCode) selectedCode.innerText = code;
  if (countryDropdown) countryDropdown.classList.add("hidden");
  if (arrowIcon) arrowIcon.style.transform = "rotate(0deg)";
}

window.addEventListener("click", () => {
  if (countryDropdown) countryDropdown.classList.add("hidden");
  if (arrowIcon) arrowIcon.style.transform = "rotate(0deg)";
});

const signupForm = document.getElementById("signupForm");
const successModal = document.getElementById("success-modal");

if (signupForm) {
  signupForm.addEventListener("submit", function (e) {
    e.preventDefault();

    let isValid = true;
    const fields = ["fullname", "phone", "email", "password"];

    fields.forEach((fieldId) => {
      const input = document.getElementById(fieldId);
      const errorMsg = document.getElementById(fieldId + "-error");

      if (input) {
        const isPasswordShort =
          fieldId === "password" && input.value.length < 8;
        const isEmpty = !input.value.trim();

        if (isEmpty || isPasswordShort) {
          if (errorMsg) errorMsg.classList.remove("hidden");
          input.classList.add("border-red-500");
          isValid = false;
        } else {
          if (errorMsg) errorMsg.classList.add("hidden");
          input.classList.remove("border-red-500");
        }
      }
    });

    if (isValid) {
      if (successModal) {
        successModal.classList.remove("hidden");
      }
    }
  });
}

// Ensure the DOM is fully loaded before running the script
document.addEventListener("DOMContentLoaded", function () {
  const successModal = document.getElementById("success-modal");

  if (successModal) {
    const continueBtn = successModal.querySelector("button");

    if (continueBtn) {
      continueBtn.addEventListener("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // Adding a 2-second delay before redirecting
        setTimeout(() => {
          window.location.href = "./complete-your-profile.html";
        }, 2000);
      });
    }
  }
});
