document.addEventListener("DOMContentLoaded", function () {
  const form = document.querySelector("form");
  // Create a map of all checkboxes mapping name to list of checkboxes
  const email = form.querySelector(`input[id="email"]`);
  const password = form.querySelector(`input[id="password"]`);
  const showPassword = form.querySelector(`a[id="show-password"]`);
  const confirmButton = form.querySelector("button[type='submit']");
  const overlay = document.getElementById("loading-overlay");

  const myUrls = window.myUrls;

  showPassword.addEventListener("click", function (event) {
    event.preventDefault();
    password.type = password.type === "password" ? "text" : "password";
  });

  confirmButton.addEventListener("click", async (event) => {
    event.preventDefault();

    overlay.classList.remove("d-none");

    const params = new URLSearchParams(window.location.search);
    const data = {
      email: email.value,
      password: password.value,
    };

    try {
      const response = await fetch(myUrls.login_api_url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });

      if (!response.ok) {
        const data = await response.json();
        if (data.email || data.password) {
          alert(data.email || data.password);
        } else if (data.error) {
          alert(data.error);
        } else {
          alert("An error occurred. Please try again later.");
        }
      } else {
        // Redirect to the next page
        // wait for a sec for session to be created, otherwise it will redirect to login page again
        await new Promise((resolve) => setTimeout(resolve, 2500));
        window.location.href = params.get("next") || myUrls.home_url;
      }
    } catch (error) {
      console.error("Error during login:", error);
      alert("An error occurred. Please try again later.");
    } finally {
      // Hide the overlay regardless of the outcome
      overlay.classList.add("d-none");
    }
  });
});