// Search subjects
document.addEventListener("DOMContentLoaded", () => {
  let orderParams = {};
  let searchSubjects = [];
  const body = document.querySelector("body");
  const popup = document.querySelector(".r-popup");
  const searchWrap = document.querySelector(".subjects");
  const resultWrap = document.querySelector(".subjects__bot");
  const resultList = document.querySelector(".subjects__list");
  const searchInput = document.querySelector(".subjects__input");
  const searchClear = document.querySelector(".subjects__clear");
  const searchArrow = document.querySelector(".subjects__arrow");
  const mobileTrigger = document.querySelector(".subjects-trigger");
  const popupClose = document.querySelector(".subjects__close");
  const authButtons = document.querySelectorAll("a[href*='app.studyfy.com']");
  const reviewsButton = document.querySelector(
    "[data-button-group='button_internal_page']"
  );

  const popularSubjects = `
    <div class="subjects__group">Popular</div>
    <p class="subjects__value" id="154">Occupational safety and health administration</p>
    <p class="subjects__value" id="63">Nursing</p>
    <p class="subjects__value" id="11">Business and management</p>
    <p class="subjects__value" id="35">English</p>
    <p class="subjects__value" id="77">Psychology</p>
    <p class="subjects__value" id="101">Healthcare</p>
    <p class="subjects__value" id="29">Education</p>
    <p class="subjects__value" id="92">Social work</p>
  `;

  fetch("https://app.studyfy.com/api/directory/external/")
    .then((response) => {
      return response.json();
    })
    .then((json) => {
      let subjects = json.subjects;
      subjects.forEach((subject) => {
        searchSubjects.push({
          name: subject.title,
          group: subject.subject_group_title,
        });
      });
    })
    .catch((error) => console.error("Error accessing the API", error));

  if (window.innerWidth <= 991) {
    popup.appendChild(searchWrap);
    searchInput.placeholder = "Search";

    mobileTrigger.addEventListener("click", function () {
      searchWrap.style.display = "block";
      popup.style.display = "flex";
      body.classList.add("popup-open");
      updateResult("");
      notQuizPage && google.accounts.id.cancel();
      notQuizPage = false;
    });

    popupClose.addEventListener("click", function () {
      popup.style.display = "none";
      body.classList.remove("popup-open");
    });
  } else {
    document.addEventListener("click", function (event) {
      if (!event.target.closest(".subjects")) {
        resultWrap.style.display = "none";
        searchArrow.classList.remove("subjects__arrow--active");
      }
    });
  }

  searchInput.addEventListener("focus", function () {
    updateResult("");
    searchArrow.classList.add("subjects__arrow--active");
  });

  searchInput.addEventListener("input", function () {
    let searchText = searchInput.value;
    updateResult(searchText);
    if (searchInput.value !== "") {
      searchClear.classList.add("subjects__clear--active");
    } else {
      searchClear.classList.remove("subjects__clear--active");
    }
  });

  searchClear.addEventListener("click", function () {
    searchInput.value = "";
    mobileTrigger.innerText = searchInput.placeholder;
    searchClear.classList.remove("subjects__clear--active");
    searchArrow.classList.add("subjects__arrow--active");
    updateResult("");
  });

  function updateResult(query) {
    resultWrap.style.display = "block";
    query = query.toLowerCase();

    let results = searchSubjects.filter(
      (el) => el.name.toLowerCase().indexOf(query) !== -1
    );

    resultList.innerHTML = "";

    if (results.length < 1) {
      resultList.innerHTML = '<p class="subjects__value">Nothing was found</p>';
      return;
    }

    let groupedResults = results.reduce((groups, subject) => {
      const groupName = subject.group;
      if (!groups[groupName]) {
        groups[groupName] = [];
      }
      groups[groupName].push(subject.name);
      return groups;
    }, {});

    let sortedGroups = Object.keys(groupedResults).sort();

    let resultString = "";
    sortedGroups.forEach((group) => {
      resultString += `<div class="subjects__group">${group}</div>`;

      groupedResults[group].sort().forEach((name) => {
        resultString += `<p class="subjects__value">${name}</p>`;
      });
    });

    resultList.innerHTML = popularSubjects + resultString;

    let resultItems = document.querySelectorAll(".subjects__value");
    resultItems.forEach((item) => {
      item.addEventListener("click", function () {
        searchInput.value = item.innerText;
        mobileTrigger.innerText = item.innerText;
        resultList.innerHTML = "";
        resultWrap.style.display = "none";
        popup.style.display = "none";
        body.classList.remove("popup-open");
        searchClear.classList.add("subjects__clear--active");
        orderParams.subject = item.innerText;

        dataLayer.push({
          event: "landing_page_subject",
          method: "drop list",
          click_text: item.innerText,
        });
      });
    });
  }

  async function sendOrder(data) {
    if (Object.keys(data).length < 1) return false;
    const orderId = crypto.randomUUID();
    const orderData = { front_id: orderId, ...data };

    try {
      const response = await fetch(
        "https://app.studyfy.com/api/order/order-form/",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(orderData),
        }
      );

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`HTTP ${response.status}: ${errorText}`);
      }

      const encodedCookie = encodeURIComponent(
        JSON.stringify({
          context: "order-form",
          payload: { front_id: orderId },
        })
      );
      document.cookie = `landing_context=${encodedCookie}; domain=.studyfy.com; path=/;`;
      return true;
    } catch (error) {
      console.error("Error", error.message);
      return false;
    }
  }

  authButtons.forEach((button) => {
    button.addEventListener("click", async function (e) {
      e.preventDefault();

      if (button.innerText == "Log in") {
        dataLayer.push({
          event: "click_login_button",
          button_text: button.innerText,
        });
      } else if (button.innerText == "Sign up") {
        dataLayer.push({
          event: "click_sign_up_button",
          button_text: button.innerText,
        });
      } else {
        dataLayer.push({
          event: "landing_page_click_start_order",
          button_text: button.innerText,
          subject: orderParams.subject || "not selected",
        });
      }

      handleAuthPopupClick(1);
      body.classList.add("popup-open");
      google.accounts.id.cancel();
      const success = await sendOrder(orderParams);
    });
  });

  reviewsButton.addEventListener("click", function (e) {
    dataLayer.push({
      event: "landing_page_reviews_block_click",
      button_text: reviewsButton.innerText,
    });
  });

  // Range scroll
  const rangeScrolls = document.querySelectorAll("[range-scroll]");
  const rangeSliders = document.querySelectorAll("[range-input]");

  if (rangeScrolls && rangeSliders) {
    rangeSliders.forEach((range, index) => {
      rangeSlider(
        range,
        rangeScrolls[index],
        range.getAttribute("range-input")
      );
    });
  }

  function rangeSlider(toggle, content, direction = "horizontal") {
    const scroll = toggle;
    const panel = content;
    const isHorizontal = direction === "horizontal";

    if (isHorizontal) {
      swipeWithScroll(content);
    }

    scroll.oninput = function () {
      const total = isHorizontal
        ? panel.scrollWidth - panel.offsetWidth
        : panel.scrollHeight - panel.offsetHeight;

      const percentage = total * (this.value / 100);

      if (isHorizontal) {
        panel.scrollLeft = percentage;
      } else {
        panel.scrollTop = percentage;
      }
    };

    panel.onscroll = function () {
      const total = isHorizontal
        ? panel.scrollWidth - panel.offsetWidth
        : panel.scrollHeight - panel.offsetHeight;

      const percentage = isHorizontal
        ? (panel.scrollLeft / total) * 100
        : (panel.scrollTop / total) * 100;

      scroll.value = percentage;
    };
  }

  function swipeWithScroll(slider) {
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener("mousedown", (e) => {
      isDown = true;
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
      cancelMomentumTracking();
    });

    slider.addEventListener("mouseleave", () => {
      isDown = false;
    });

    slider.addEventListener("mouseup", () => {
      isDown = false;
      beginMomentumTracking();
    });

    slider.addEventListener("mousemove", (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 3;
      var prevScrollLeft = slider.scrollLeft;
      slider.scrollLeft = scrollLeft - walk;
      velX = slider.scrollLeft - prevScrollLeft;
    });

    var velX = 0;
    var momentumID;

    slider.addEventListener("wheel", (e) => {
      cancelMomentumTracking();
    });

    function beginMomentumTracking() {
      cancelMomentumTracking();
      momentumID = requestAnimationFrame(momentumLoop);
    }
    function cancelMomentumTracking() {
      cancelAnimationFrame(momentumID);
    }
    function momentumLoop() {
      slider.scrollLeft += velX;
      velX *= 0.95;
      if (Math.abs(velX) > 0.5) {
        momentumID = requestAnimationFrame(momentumLoop);
      }
    }
  }
  // Read more text
  const text = document.querySelector(".r-intro__span");
  const btn = document.querySelector(".r-intro__show");

  btn.addEventListener("click", () => {
    if (text.classList.contains("r-intro__span--active")) {
      text.classList.remove("r-intro__span--active");
      btn.textContent = "Read more";
    } else {
      text.classList.add("r-intro__span--active");
      btn.textContent = "Read less";
    }
  });
});

// AUTHENTICATION
// START FB Auth
window.fbAsyncInit = function () {
  FB.init({
    appId: "1377613392528854",
    cookie: true,
    xfbml: true,
    version: "v14.0",
  });

  FB.AppEvents.logPageView();
};

(function (d, s, id) {
  var js,
    fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {
    return;
  }
  js = d.createElement(s);
  js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");

let accessTokenFb;
// Event handler for 'Login with Facebook' button click
document.querySelectorAll(".js-fb-login-btn").forEach((button) => {
  button.addEventListener("click", function () {
    FB.login(
      function (response) {
        if (response.status === "connected") {
          accessTokenFb = response.authResponse.accessToken;
          sendFbRequest(false);
        } else {
          console.log("User cancelled login or did not fully authorize.");
        }
      },
      { scope: "public_profile,email" }
    );

    userMethodRegisterEvent("click_facebook_icon");
  });
});
// END FB Auth

// START Google Auth render buttons
let googleBtnWidth;

function renderGoogleButton(index) {
  const buttonElement = document.getElementById(`googleBtnRender${index}`);
  const buttonWrap = document.getElementById(`googleBtnWrap${index}`);

  googleBtnWidth = buttonWrap?.offsetWidth || googleBtnWidth;

  google.accounts.id.renderButton(buttonElement, {
    theme: "filled_black",
    size: "large",
    width: googleBtnWidth,
    text: "continue_with",
    click_listener: onGoogleClickHandler,
  });
}

document
  .querySelectorAll(".auth-form__tabs__link.w-tab-link")
  .forEach((tabLink) => {
    tabLink.addEventListener("click", (event) => {
      const lastChar = event.target.id.slice(-1);
      renderGoogleButton(lastChar);
    });
  });
// END Google Auth render buttons

let loginToken = "";

if (getCookie("accessToken")) {
  fetchUserData().then(() => {
    const storedData = localStorage.getItem("currentUser");
    if (storedData) {
      const user = JSON.parse(storedData);

      if (user.state === "unverified") {
        toggleIsActive("auth-form", true);
        toggleIsActive("initial-state", false);
        //toggleIsActive('auth-form-social', false);
        toggleIsActive("confirm-state", true);
        document.getElementById("confirm-email").textContent = user.email;
      }
    }
  });
}

// START GENERAL FUNCTIONS

// facebook api request
function sendFbRequest(activateValue) {
  fetch("https://app.studyfy.com/api/social/auth/signin/facebook/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      access_token: accessTokenFb,
      activate: activateValue,
      client_id: "pgnfidgwuKhlfrh4jRuIirRpvteChDGnga9I4hmj",
      is_test: false,
      role: "customer",
      site: "app.studyfy.com",
    }),
    credentials: "include",
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.is_sms_otp_allow) {
        showTwoFactorStep();
        loginToken = data.token;
      } else if (!data.error_map) {
        setCookie({
          name: "accessToken",
          value: data.access_token,
          domain: ".studyfy.com",
        });
        setCookie({
          name: "refreshToken",
          value: data.refresh_token,
          domain: ".studyfy.com",
        });
        if (data.is_new) {
          setCookie({
            name: "new_user",
            value: "true",
            domain: ".studyfy.com",
          });
        }
        fetchUserData().then((userData) => {
          if (userData.new_user) {
            userSignUpEvent(userData.id, "facebook");
          } else {
            userLoginEvent(userData.id, "facebook");
          }
          if (
            !userData.allow_unverified_user &&
            userData.state === "unverified"
          ) {
            showConfirmEmailStep(userData.email);
          } else {
            window.location.href = "https://app.studyfy.com/";
          }
        });
      } else {
        showCodeErrorStep(data.code, "facebook");
      }
    })
    .catch((error) => console.error("Error:", error));
}

// get initial user data
function fetchUserData() {
  const accessToken = getCookie("accessToken");

  return fetch("https://app.studyfy.com/api/auth/user/", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    credentials: "include",
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.error_map) {
        localStorage.removeItem("currentUser");
      } else {
        localStorage.setItem("currentUser", JSON.stringify(data));
      }
      return data;
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

// get Cookie function
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
}

// set Cookie function
function setCookie({ name, value, domain }) {
  document.cookie =
    name + "=" + encodeURIComponent(value) + "; domain=" + domain + "; path=/";
}

// Function to toggle 'is-active' class
function toggleIsActive(id, add = true) {
  const element = document.getElementById(id);
  if (add) {
    element.classList.add("is-active");
  } else {
    element.classList.remove("is-active");
  }
}

// Function to switch tabs
function switchTab(tabIndex) {
  document
    .querySelectorAll(".auth-form__tabs__link.w-tab-link")
    [tabIndex].click();
  setTimeout(() => {
    renderGoogleButton(tabIndex);
  }, 100);
}

// Function to validate email
function isValidEmail(email) {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailPattern.test(email);
}

// Function to handle form errors
function handleFormError(inputWrap, errorText, message) {
  inputWrap.classList.add("is-error");
  if (message === "Incorrect credentials") {
    errorText.textContent = "Invalid email address or password. Try again";
  } else {
    errorText.textContent = message;
  }
}

// Function to clear form errors
function clearFormError(inputWrap, errorText) {
  inputWrap.classList.remove("is-error");
  errorText.textContent = "";
}

// Universal function to handle API response
function handleApiResponse(
  data,
  emailInputWrap,
  passwordInputWrap,
  passErrorText,
  emailErrorText
) {
  if (data.is_sms_otp_allow) {
    showTwoFactorStep();
    loginToken = data.token;
  } else if (!data.error_map) {
    if (!data.allow_unverified_user && data.state === "unverified") {
      showConfirmEmailStep(data.email);
    } else {
      window.location.href = `https://app.studyfy.com/`;
    }
  } else {
    let message = "";
    if (typeof data.message === "object" && data.message !== null) {
      message = data.message.email || "";
    } else {
      message = data.message;
    }

    if (message[0].includes("Email")) {
      handleFormError(emailInputWrap, emailErrorText, message);
      handleFormError(passwordInputWrap, passErrorText, "");
    } else if (message.includes("WriterPro")) {
      document.getElementById("auth-modal-error").style.display = "block";
      setTimeout(() => {
        document.getElementById("auth-modal-error").style.display = "none";
      }, 5000);
      document.getElementById("auth-modal-error").textContent = message;
    } else {
      handleFormError(emailInputWrap, emailErrorText, "");
      handleFormError(passwordInputWrap, passErrorText, message);
    }
    showCodeErrorStep(data.code, "email");
  }
}

// Function when api response with two-factor authentication
function showTwoFactorStep() {
  toggleIsActive("initial-state", false);
  //toggleIsActive('auth-form-social', false);
  toggleIsActive("code-state", true);

  document.querySelector(".quiz__top-title").textContent =
    "Two-factor authentication";
}

// Function when api response with confirm email
function showConfirmEmailStep(email) {
  document.querySelector(".quiz__top-title").textContent = "Confirm your email";
  document.querySelector(".quiz__confirm").style.display = "flex";
  document.querySelectorAll(".quiz__prev")[4].style.display = "none";

  document.getElementById("confirm-email").textContent = email;
  toggleIsActive("initial-state", false);
  //toggleIsActive('auth-form-social', false);
  toggleIsActive("confirm-state", true);
}

// Function when api response with code error
function showCodeErrorStep(codeStatus, authType) {
  if (codeStatus === "DEACTIVATED_USER_ERROR") {
    if (authType === "apple") {
      toggleIsActive("reactivate-yes", false);
      toggleIsActive("reactivate-yes-apple", true);
    }
    toggleIsActive("reactivate-popup", true);
  } else if (codeStatus === "LOCKED_USER_ERROR") {
    toggleIsActive("locked-popup", true);
  }
}

// Function to validate form input
function validateForm(
  email,
  password,
  emailInputWrap,
  emailErrorText,
  passwordInputWrap,
  passErrorText
) {
  let isValid = true;

  if (emailInputWrap && emailErrorText) {
    clearFormError(emailInputWrap, emailErrorText);

    if (!email) {
      handleFormError(emailInputWrap, emailErrorText, "Email is required");
      isValid = false;
    } else if (!isValidEmail(email)) {
      handleFormError(emailInputWrap, emailErrorText, "Invalid email address");
      isValid = false;
    }
  }

  if (passwordInputWrap && passErrorText) {
    clearFormError(passwordInputWrap, passErrorText);

    if (!password) {
      handleFormError(passwordInputWrap, passErrorText, "Password is required");
      isValid = false;
    } else if (password.length < 6) {
      handleFormError(
        passwordInputWrap,
        passErrorText,
        "Password must be at least 6 characters long"
      );
      isValid = false;
    }
  }

  return isValid;
}

// Toggle password visibility
document.querySelectorAll(".js-toggle-password").forEach((icon) => {
  icon.addEventListener("click", function () {
    const parent = this.closest(".auth-form__input-wrap-upd");
    const passwordInput = parent.querySelector("input");
    const passwordHideIcon = parent.querySelector(
      ".auth-form__input-hide-pass"
    );
    const passwordShowIcon = parent.querySelector(
      ".auth-form__input-show-pass"
    );

    const isPassword = passwordInput.type === "password";
    passwordInput.type = isPassword ? "text" : "password";
    passwordHideIcon.classList.toggle("hide", !isPassword);
    passwordShowIcon.classList.toggle("hide", isPassword);
  });
});

// Event handler for switching to forgot password
document
  .getElementById("forgot-password-btn")
  .addEventListener("click", function () {
    toggleIsActive("initial-state", false);
    //toggleIsActive('auth-form-social', false);
    toggleIsActive("forgot-state", true);

    document.querySelector(".quiz__top-title").textContent = "Forgot password";
    document.querySelector(".quiz__forgot").style.display = "flex";
    document.querySelectorAll(".quiz__prev")[4].style.display = "none";
  });

// Returning from forgot password
document.querySelectorAll(".js-forgot-back").forEach((btn) => {
  btn.addEventListener("click", function () {
    toggleIsActive("forgot-state", false);
    toggleIsActive("initial-state", true);
    //toggleIsActive('auth-form-social', true);
    toggleIsActive("forgot-success-block", false);
    document.getElementById("email-form-forgot").classList.remove("is-hide");
    document.querySelector(".js-email-for-reset").textContent = "";
    document.getElementById("forgot-email").value = "";

    document.querySelector(".quiz__top-title").textContent =
      "Continue with email";
    document.querySelector(".quiz__forgot").style.display = "none";
    document.querySelectorAll(".quiz__prev")[4].style.display = "flex";
  });
});

// show email auth state
document.querySelectorAll(".js-start-email-btn").forEach((button) => {
  button.addEventListener("click", () => {
    document.querySelectorAll(".js-auth-email-step").forEach((step) => {
      step.classList.remove("is-hide");
    });
    document.querySelectorAll(".js-google-icon").forEach((btn) => {
      btn.classList.remove("is-hide");
    });
    document.querySelectorAll(".js-auth-start-state").forEach((state) => {
      state.classList.add("is-hide");
    });

    userMethodRegisterEvent("click_with_email_icon");
  });
});

// show/hide loader on btn
function toggleLoader(button, isLoading) {
  if (isLoading) {
    button.classList.add("is-loading");
  } else {
    button.classList.remove("is-loading");
  }
}
// END GENERAL FUNCTIONS

// START reactivate logic
// Event handler for 'Reactivate No' button click
document
  .getElementById("reactivate-no")
  .addEventListener("click", () => toggleIsActive("reactivate-popup", false));

// Event handler for 'Contact Help' button click
document.getElementById("contact-help-btn").addEventListener("click", () => {
  Intercom("show");
  toggleIsActive("locked-popup", false);
});

// Event handler for 'Reactivate Yes' button click
document
  .getElementById("reactivate-yes")
  .addEventListener("click", function () {
    const email = document.getElementById("signin-email").value;
    const password = document.getElementById("signin-password").value;
    const emailInputWrap = document.getElementById("signin-email-input-wrap");
    const emailErrorText = document.getElementById("signin-email-input-error");
    const passwordInputWrap = document.getElementById("signin-pass-input-wrap");
    const passErrorText = document.getElementById("signin-pass-input-error");

    fetch("https://app.studyfy.com/api/auth/signin/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        activate: true,
        remember_me: true,
        email: email,
        password: password,
        client_id: "pgnfidgwuKhlfrh4jRuIirRpvteChDGnga9I4hmj",
        site: "app.studyfy.com",
        is_premium_blog_user: true,
      }),
      credentials: "include",
    })
      .then((response) => response.json())
      .then((data) => {
        setCookie({
          name: "accessToken",
          value: data.access_token,
          domain: ".studyfy.com",
        });
        setCookie({
          name: "refreshToken",
          value: data.refresh_token,
          domain: ".studyfy.com",
        });
        handleApiResponse(
          data,
          emailInputWrap,
          passwordInputWrap,
          passErrorText,
          emailErrorText
        );
      })
      .catch((error) => console.error("Error:", error));

    toggleIsActive("reactivate-popup", false);
  });

// Event handler for 'Reactivate Yes' google button click
document
  .getElementById("reactivate-yes-google")
  .addEventListener("click", function () {
    const accessToken = getCookie("accessToken");

    const authForm = document.getElementById("auth-form");
    const isPremiumUser = authForm && authForm.classList.contains("is-active");

    fetch("https://app.studyfy.com/api/social/auth/signin/google-oauth2/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        activate: true,
        access_token: accessToken,
        client_id: "pgnfidgwuKhlfrh4jRuIirRpvteChDGnga9I4hmj",
        is_test: false,
        role: "customer",
        site: "app.studyfy.com",
        ...(isPremiumUser && { is_premium_blog_user: true }),
      }),
      credentials: "include",
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.is_sms_otp_allow) {
          showTwoFactorStep();
          loginToken = data.token;
        } else if (!data.error_map) {
          setCookie({
            name: "accessToken",
            value: data.access_token,
            domain: ".studyfy.com",
          });
          setCookie({
            name: "refreshToken",
            value: data.refresh_token,
            domain: ".studyfy.com",
          });
          if (!data.allow_unverified_user && data.state === "unverified") {
            showConfirmEmailStep(data.email);
          } else {
            window.location.href = `https://app.studyfy.com/`;
          }
        }
      })
      .catch((error) => console.error("Error:", error));

    toggleIsActive("reactivate-popup", false);
  });

// Event handler for 'Reactivate Yes' apple button click
document
  .getElementById("reactivate-yes-apple")
  .addEventListener("click", function () {
    sendAppleRequest(accessTokenApple, true);
    toggleIsActive("reactivate-popup", false);
  });
// END reactivate logic

// START Login form logic via email
function getLoginEmailValidationElements() {
  return {
    emailInputWrap: document.getElementById("signin-email-input-wrap"),
    emailErrorText: document.getElementById("signin-email-input-error"),
    email: document.getElementById("signin-email").value,
  };
}

function getLoginPasswordValidationElements() {
  return {
    passwordInputWrap: document.getElementById("signin-pass-input-wrap"),
    passErrorText: document.getElementById("signin-pass-input-error"),
    password: document.getElementById("signin-password").value,
  };
}

function validateLoginEmail() {
  const { email, emailInputWrap, emailErrorText } =
    getLoginEmailValidationElements();
  validateForm(email, "", emailInputWrap, emailErrorText, null, null);
}

function validateLoginPassword() {
  const { password, passwordInputWrap, passErrorText } =
    getLoginPasswordValidationElements();
  validateForm("", password, null, null, passwordInputWrap, passErrorText);
}

document
  .getElementById("loginButton")
  .addEventListener("click", function (event) {
    const currentBtn = event.currentTarget;

    const { email, emailInputWrap, emailErrorText } =
      getLoginEmailValidationElements();
    const { password, passwordInputWrap, passErrorText } =
      getLoginPasswordValidationElements();

    const isEmailValid = validateForm(
      email,
      "",
      emailInputWrap,
      emailErrorText,
      null,
      null
    );
    const isPasswordValid = validateForm(
      "",
      password,
      null,
      null,
      passwordInputWrap,
      passErrorText
    );

    if (!isEmailValid || !isPasswordValid) return;

    toggleLoader(currentBtn, true);

    fetch("https://app.studyfy.com/api/auth/signin/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        activate: null,
        remember_me: true,
        email: email,
        password: password,
        client_id: "pgnfidgwuKhlfrh4jRuIirRpvteChDGnga9I4hmj",
        site: "app.studyfy.com",
        is_premium_blog_user: true,
      }),
      credentials: "include",
    })
      .then((response) => response.json())
      .then((data) => {
        const userId = getCookie("extra_metadata");
        setCookie({
          name: "accessToken",
          value: data.access_token,
          domain: ".studyfy.com",
        });
        setCookie({
          name: "refreshToken",
          value: data.refresh_token,
          domain: ".studyfy.com",
        });

        localStorage.setItem("currentUser", JSON.stringify(data));
        if (!data.error_map) {
          userLoginEvent(userId, "email");
        }
        handleApiResponse(
          data,
          emailInputWrap,
          passwordInputWrap,
          passErrorText,
          emailErrorText
        );
      })
      .catch((error) => console.error("Error:", error))
      .finally(() => {
        toggleLoader(currentBtn, false);
      });
  });

document
  .getElementById("signin-email")
  .addEventListener("input", validateLoginEmail);
document
  .getElementById("signin-password")
  .addEventListener("input", validateLoginPassword);
// END Login form logic via email

// START Sign Up logic
function getSignEmailValidationElements() {
  return {
    emailInputWrap: document.getElementById("signup-email-input-wrap"),
    emailErrorText: document.getElementById("signup-email-input-error"),
    email: document.getElementById("signup-email").value,
  };
}

function getSignPasswordValidationElements() {
  return {
    passwordInputWrap: document.getElementById("signup-pass-input-wrap"),
    passErrorText: document.getElementById("signup-pass-input-error"),
    password: document.getElementById("signup-password").value,
  };
}

function validateSignEmail() {
  const { email, emailInputWrap, emailErrorText } =
    getSignEmailValidationElements();
  validateForm(email, "", emailInputWrap, emailErrorText, null, null);
}

function validateSignPassword() {
  const { password, passwordInputWrap, passErrorText } =
    getSignPasswordValidationElements();
  validateForm("", password, null, null, passwordInputWrap, passErrorText);
}

let recaptchaResponse;

function onSubmitSignUp(token) {
  recaptchaResponse = token;
  handleSignUpSubmission();
}

function handleSignUpSubmission() {
  if (!recaptchaResponse) {
    return;
  }

  const { email, emailInputWrap, emailErrorText } =
    getSignEmailValidationElements();
  const { password, passwordInputWrap, passErrorText } =
    getSignPasswordValidationElements();

  const isEmailValid = validateForm(
    email,
    "",
    emailInputWrap,
    emailErrorText,
    null,
    null
  );
  const isPasswordValid = validateForm(
    "",
    password,
    null,
    null,
    passwordInputWrap,
    passErrorText
  );

  if (!isEmailValid) {
    window.dataLayer.push({
      event: "auth_error_email",
      order_error_type: emailErrorText.innerText,
    });
  }

  if (!isPasswordValid) {
    window.dataLayer.push({
      event: "auth_error_password",
      order_error_type: passErrorText.innerText,
    });
  }

  if (!isEmailValid || !isPasswordValid) return;

  const signUpButton = document.getElementById("signUpButton");
  toggleLoader(signUpButton, true);

  let responseData = {};

  fetch("https://app.studyfy.com/api/auth/signup/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      email,
      password,
      role: "customer",
      client_id: "pgnfidgwuKhlfrh4jRuIirRpvteChDGnga9I4hmj",
      g_recaptcha_response: recaptchaResponse,
      site: "app.studyfy.com",
      is_premium_blog_user: true,
    }),
    credentials: "include",
  })
    .then((response) => response.json())
    .then((data) => {
      responseData = data;

      const userId = getCookie("extra_metadata");
      setCookie({
        name: "accessToken",
        value: data.access_token,
        domain: ".studyfy.com",
      });
      setCookie({
        name: "refreshToken",
        value: data.refresh_token,
        domain: ".studyfy.com",
      });

      if (!data.error_map) {
        return fetchUserData();
      }
      if (typeof data.message === "object" && data.message !== null) {
        window.dataLayer.push({
          event: "auth_error_email",
          order_error_type: data.message.email[0] || "",
        });
      } else {
        window.dataLayer.push({
          event: "auth_error_password",
          order_error_type: data.message,
        });
      }
    })
    .then((userData) => {
      const combinedData = {
        ...responseData,
        ...userData,
      };

      if (combinedData.new_user) {
        setCookie({
          name: "new_user",
          value: "true",
          domain: ".studyfy.com",
        });
        userSignUpEvent(combinedData.id, "email");
      } else {
        userLoginEvent(combinedData.id, "email");
      }

      handleApiResponse(
        combinedData,
        emailInputWrap,
        passwordInputWrap,
        passErrorText,
        emailErrorText
      );
    })
    .catch((error) => console.error("Error:", error))
    .finally(() => {
      toggleLoader(signUpButton, false);
    });
}

document
  .getElementById("signUpButton")
  .addEventListener("click", function (event) {
    event.preventDefault();
    handleSignUpSubmission();
  });

document
  .getElementById("signup-email")
  .addEventListener("input", validateSignEmail);
document
  .getElementById("signup-password")
  .addEventListener("input", validateSignPassword);

// END Sign Up logic

// START Forgot Password logic
function getForgotEmailValidationElements() {
  return {
    emailInputWrap: document.getElementById("forgot-email-input-wrap"),
    emailErrorText: document.getElementById("forgot-email-input-error"),
    email: document.getElementById("forgot-email").value,
  };
}

function validateForgotEmail() {
  const { email, emailInputWrap, emailErrorText } =
    getForgotEmailValidationElements();
  validateForm(email, "", emailInputWrap, emailErrorText, null, null);
}

document.getElementById("forgotButton").addEventListener("click", function () {
  const { email, emailInputWrap, emailErrorText } =
    getForgotEmailValidationElements();

  const isEmailValid = validateForm(
    email,
    "",
    emailInputWrap,
    emailErrorText,
    null,
    null
  );

  if (!isEmailValid) return;

  fetch(
    `https://app.studyfy.com/api/auth/forgot-password?email=${encodeURIComponent(
      email
    )}`,
    {
      method: "GET",
    }
  )
    .then((response) => response)
    .then((data) => {
      if (data.status === 200) {
        toggleIsActive("forgot-success-block", true);
        document.getElementById("email-form-forgot").classList.add("is-hide");
        document.querySelector(".js-email-for-reset").textContent = email;
      } else {
        handleFormError(emailInputWrap, emailErrorText, "Email not registered");
      }
    })
    .catch((error) => console.error("Error:", error));
});

document
  .getElementById("forgot-email")
  .addEventListener("input", validateForgotEmail);
// END Forgot Password logic

// START logic for opening/closing popup
function handleAuthPopupClick(tabIndex) {
  const countryInfo = getCountryInfoByTimezone(
    Intl.DateTimeFormat().resolvedOptions().timeZone
  );

  const allowedCountries = ["GB", "AU", "NZ", "IE"];

  if (allowedCountries.includes(countryInfo?.country_code)) {
    document.getElementById("auth-country").textContent = countryInfo.name;
    document.getElementById(
      "auth-country-with-s"
    ).textContent = `${countryInfo.name}'s`;
    toggleIsActive("authFormCountry", true);
  }
  dataLayer.push({ event: "auth_modal_open" });
  switchTab(tabIndex);
  toggleIsActive("auth-form", true);
}

document.getElementById("close-auth-popup").addEventListener("click", () => {
  toggleIsActive("auth-form", false);
  document.querySelector("body").classList.remove("popup-open");

  const codeStateElement = document.getElementById("code-state");
  if (codeStateElement && codeStateElement.classList.contains("is-active")) {
    toggleIsActive("initial-state", true);
    toggleIsActive("auth-form-social", true);
    toggleIsActive("code-state", false);
  }

  window.dataLayer.push({
    event: "auth_modal_click_close",
    click_text: "Close popup",
  });
});
// END logic for opening/closing popup

// START Returning from confirm email
document.getElementById("backToSignup").addEventListener("click", function () {
  const accessToken = getCookie("accessToken");

  toggleIsActive("confirm-state", false);
  toggleIsActive("initial-state", true);
  //toggleIsActive('auth-form-social', true);

  document.querySelector(".quiz__top-title").textContent =
    "Continue with email";
  document.querySelector(".quiz__confirm").style.display = "none";
  document.querySelectorAll(".quiz__prev")[4].style.display = "flex";

  fetch("https://app.studyfy.com/api/auth/signout/", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    credentials: "include",
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.status) {
        localStorage.removeItem("currentUser");
      }
    })
    .catch((error) => {
      console.error("Error:", error);
    });
});
// END Returning from confirm email

// START re-send link to email
document
  .getElementById("confirmEmailBtn")
  .addEventListener("click", function () {
    const confirmEmail = document.getElementById("confirm-email").textContent;
    const accessToken = getCookie("accessToken");

    fetch("https://app.studyfy.com/api/auth/verify-email/resend/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
      },
      body: JSON.stringify({
        email: confirmEmail,
      }),
      credentials: "include",
    })
      .then((response) => response)
      .then((data) => {
        if (data.ok) {
          document
            .getElementById("authFormConfirmBtn")
            .classList.add("is-hide");
          toggleIsActive("authFormConfirmDone", true);
        }
      })
      .catch((error) => console.error("Error:", error));
  });

document
  .getElementById("confirmEmailAgain")
  .addEventListener("click", function () {
    document.getElementById("confirmEmailBtn").click();
  });
// END re-send link to email

// START two-factor authentication
const codeInputs = document.querySelectorAll(".js-code-input");
const twoFactorSubmitBtn = document.getElementById("twoFactorCodeButton");
let code = "";

function checkInputs() {
  code = Array.from(codeInputs)
    .map((input) => input.value)
    .join("");
  if (code.length === codeInputs.length) {
    twoFactorSubmitBtn.classList.remove("not-active");
    document.getElementById("twoFactorCodeButton").click();
  } else {
    twoFactorSubmitBtn.classList.add("not-active");
  }
}

codeInputs.forEach((input, index) => {
  input.addEventListener("input", (e) => {
    let { value } = e.target;

    if (value.length > 1) {
      value = value.charAt(0);
      e.target.value = value;
    }

    if (value.length === 1 && index < codeInputs.length - 1) {
      codeInputs[index + 1].focus();
    }

    checkInputs();
  });

  input.addEventListener("keydown", (e) => {
    if (e.key === "Backspace" && index > 0 && input.value === "") {
      codeInputs[index - 1].focus();
    }
  });

  input.addEventListener("paste", (e) => {
    e.preventDefault();
    const pasteData = e.clipboardData.getData("text");

    if (pasteData.length === codeInputs.length) {
      codeInputs.forEach((input, i) => {
        input.value = pasteData[i] || "";
      });

      checkInputs();

      codeInputs[codeInputs.length - 1].focus();
    }
  });
});

document
  .getElementById("twoFactorCodeButton")
  .addEventListener("click", function (event) {
    const currentBtn = event.currentTarget;
    const codeInputWrap = document.getElementById("code-input-wrap");
    const codeInputError = document.getElementById("code-input-error");

    if (!code) {
      handleFormError(
        codeInputWrap,
        codeInputError,
        "Verification code is required"
      );
      return;
    }

    toggleLoader(currentBtn, true);
    fetch("https://app.studyfy.com/api/auth/signin/two-factor/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        otp: code,
        token: loginToken,
        client_id: "pgnfidgwuKhlfrh4jRuIirRpvteChDGnga9I4hmj",
      }),
      credentials: "include",
    })
      .then((response) => response.json())
      .then((data) => {
        if (!data.error_map) {
          setCookie({
            name: "accessToken",
            value: data.access_token,
            domain: ".studyfy.com",
          });
          setCookie({
            name: "refreshToken",
            value: data.refresh_token,
            domain: ".studyfy.com",
          });
          window.location.href = `https://app.studyfy.com/`;
        } else {
          handleFormError(codeInputWrap, codeInputError, "");
        }
      })
      .catch((error) => console.error("Error:", error))
      .finally(() => {
        toggleLoader(currentBtn, false);
      });
  });
// END two-factor authentication

// START Country logic
// Get country params
function getCountryInfoByTimezone(timezone) {
  for (const country of countries) {
    if (country.timezones.includes(timezone)) {
      return {
        country_code: country.country_code,
        name: country.name,
      };
    }
  }
  return null;
}

// Listeners for country popup buttons
document
  .getElementById("closeCountryPopup")
  .addEventListener("click", function () {
    toggleIsActive("authFormCountry", false);
  });

document
  .getElementById("closeCountryAll")
  .addEventListener("click", function () {
    toggleIsActive("authFormCountry", false);
    closeQuiz();
  });
//END Country logic

// START analytics
window.dataLayer = window.dataLayer || [];

function userLoginEvent(userId, method) {
  window.dataLayer.push({
    user_id: userId,
    method: method,
    color_theme: "system",
    event: "user_login",
  });
}

function userSignUpEvent(userId, method) {
  const currentDate = new Date();
  const formattedDate =
    currentDate.getDate() +
    "." +
    (currentDate.getMonth() + 1) +
    "." +
    currentDate.getFullYear();
  window.dataLayer.push({
    userId: userId,
    eventCategory: "SignUp",
    eventAction: "Completed",
    registration_date: formattedDate,
    method: method,
    color_theme: "system",
    event: "CompleteRegistration",
  });
}

function userMethodRegisterEvent(eventName) {
  const activeTab = document.querySelector(".auth-form__tabs__link.w--current");
  const clickText = activeTab ? activeTab.textContent.trim() : "";

  window.dataLayer.push({
    event: eventName,
    click_text: clickText,
    type: "Auth modal",
  });
}

function onGoogleClickHandler() {
  userMethodRegisterEvent("click_google_icon");
}

document
  .querySelectorAll(".auth-form__tabs__link.w-tab-link")[1]
  .addEventListener("click", function () {
    window.dataLayer.push({
      event: "click_sign_up_tab",
      click_text: "Sign up",
      type: "Auth modal",
    });
  });
document
  .querySelectorAll(".auth-form__tabs__link.w-tab-link")[0]
  .addEventListener("click", function () {
    window.dataLayer.push({
      event: "click_login_tab",
      click_text: "Log in",
      type: "Auth modal",
    });
  });
// END analytics