window.onload = async () => {
  const popup = document.getElementById("popup");
  const loginSection = document.getElementById("login");
  const signupSection = document.getElementById("signup");
  const forgotPassSection = document.getElementById("forgot-pass");
  const resetPassSection = document.getElementById("reset-pass");

  const loginForm = document.getElementById("login-form");
  const signupForm = document.getElementById("signup-form");
  const forgotForm = document.getElementById("forgot-form");
  const resetForm = document.getElementById("reset-form");

  const loginInfo = document.getElementById("login-info");
  const signupInfo = document.getElementById("signup-info");
  const forgotInfo = document.getElementById("forgot-info");
  const resetInfo = document.getElementById("reset-info");

  const loginButton = document.getElementById("login-button");
  const signupButton = document.getElementById("signup-button");
  const logoutButton = document.getElementById("logout-button");
  const forgotButton = document.getElementById("forgot-link");
  const closeButton = document.getElementById("close");

  const signedInMeta = document.querySelector('meta[name="signed_in"]');
  const isSignedIn = signedInMeta?.content === "true";
  if (isSignedIn) {
    loginButton.style.display = "none";
    signupButton.style.display = "none";
  } else {
    logoutButton.style.display = "none";
  }

  const showPopup = (section) => {
    popup.classList.add("active");
    loginSection.classList.remove("active");
    signupSection.classList.remove("active");
    forgotPassSection.classList.remove("active");
    resetPassSection.classList.remove("active");
    if (section) section.classList.add("active");
  };

  const hidePopup = () => {
    popup.classList.remove("active");
    loginSection.classList.remove("active");
    signupSection.classList.remove("active");
    forgotPassSection.classList.remove("active");
    resetPassSection.classList.remove("active");
  };

  loginButton?.addEventListener("click", () => showPopup(loginSection));
  signupButton?.addEventListener("click", () => showPopup(signupSection));
  logoutButton?.addEventListener(
    "click",
    () => (window.location.href = "/logout"),
  );
  forgotButton?.addEventListener("click", () => showPopup(forgotPassSection));
  closeButton?.addEventListener("click", hidePopup);

  // TODO: if succesful hide form and popup success message
  loginForm?.addEventListener("submit", async (e) => {
    e.preventDefault();
    const { username, pass } = loginForm;
    const res = await fetch("/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username: username.value, pass: pass.value }),
    });
    const data = await res.json();
    loginInfo.innerText = data.message;
    if (data.success == "true") {
      loginButton.style.display = "none";
      signupButton.style.display = "none";
      logoutButton.style.display = "block";
    }
  });

  // TODO: if succesful hide form and popup success message
  signupForm?.addEventListener("submit", async (e) => {
    e.preventDefault();
    const { username, email, pass } = signupForm;
    const res = await fetch("/signup", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        username: username.value,
        email: email.value,
        pass: pass.value,
      }),
    });
    const data = await res.json();
    signupInfo.innerText = data.message;
    if (data.success == "true") {
      loginButton.style.display = "none";
      signupButton.style.display = "none";
      logoutButton.style.display = "block";
    }
  });

  forgotForm?.addEventListener("submit", async (e) => {
    e.preventDefault();
    const email = forgotForm.email.value;
    const res = await fetch("/forgot_password", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email }),
    });
    const data = await res.json();
    forgotInfo.innerHTML = data.message;
  });

  // Handle reset code in URL
  const params = new URLSearchParams(window.location.search);
  const resetCode = params.get("reset_code");

  if (resetCode) {
    const res = await fetch("/pass_reset?", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code: resetCode }),
    });

    if (res.status === 200) {
      showPopup(resetPassSection);

      resetForm?.addEventListener("submit", async (e) => {
        e.preventDefault();
        const pass = resetForm.pass.value;
        const passConfirm = resetForm.pass_confirm.value;

        if (pass !== passConfirm) {
          resetInfo.innerText = "Passwords do not match";
          return;
        }

        const res = await fetch(`/reset_password/${resetCode}`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ pass }),
        });
        const data = await res.json();
        resetInfo.innerText = data.message;
      });
    } else {
      window.location.href = "/";
    }
  }
};