let isAuthenticated = false;  // cache auth state globally

// Check if user is authenticated
async function checkAuth() {
  try {
    const response = await fetch("/auth/check", {
      method: "GET",
      credentials: "include",
    });
    if (!response.ok) {
      return false;
    }
    const data = await response.json();
    return data.authenticated;
  } catch (error) {
    console.error("Authentication check error:", error);
    return false;
  }
}

// Redirect unauthenticated users away from protected pages
function redirectIfUnauthenticated() {
  if (window.location.pathname === "/" || window.location.pathname === "/index.html") {
    return; // no redirect on login page
  }
  if (!isAuthenticated) {
    window.location.href = "/";
  }
}

// Update the navigation bar based on auth state
async function updateNavBar(authenticated) {
  const navBar = document.getElementById("navBar");
  if (!navBar) return;

  if (authenticated) {
    navBar.innerHTML = `
      <div id="navBar">
            <div class="nav-links">
                <a href="/main" class="external-button">Stories</a>
                <a href="/contacts.html" class="external-button">Contacts</a>
                <a href="/pubcheck.html" class="external-button">Published</a>
                <a href="/storylist.html" class="external-button">Storylist</a>
                <a href="/showplaner.html" class="external-button">Showplaner</a>
                <a href="/settings.html" class="external-button">Settings</a>
                <button id="logoutButton" class="external-button">Logout</button>
            </div>
            <div class="right-side">
                <h1 class="custom-heading">Newsroom <br> Story <br> Tracker</h1>
                <div class="vers">Version 0.5</div>
            </div>
          </div>
    `;
    const logoutButton = document.getElementById("logoutButton");
    if (logoutButton) {
      logoutButton.onclick = logout;
    }
  } else {
    navBar.innerHTML = `
      <div class="nav-links">
        <a href="/">Login</a>
      </div>
    `;
  }
}

// Logout user
async function logout() {
  try {
    const response = await fetch("/api/auth/logout", {
      method: "POST",
      credentials: "include",
    });
    if (response.ok) {
      window.location.href = "/";
    }
  } catch (error) {
    console.error("Logout error:", error);
  }
}

// Fetch and display the current user's details
async function fetchAndDisplayUserDetails() {
  try {
    console.log("Fetching user details...");
    const response = await fetch("/api/users/me", {
      credentials: "include",
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const user = await response.json();
    console.log("User details fetched successfully:", user);

    const usernameElement = document.getElementById("username");
    const fullNameElement = document.getElementById("fullName");
    const emailElement = document.getElementById("email");

    if (usernameElement && fullNameElement && emailElement) {
      usernameElement.value = user.username;
      fullNameElement.value = user.fullName;
      emailElement.value = user.email;
    }

    if (user.role === "admin") {
      console.log("User is an admin. Enabling Admin tab.");
      const adminTabButton = document.getElementById("adminTabButton");
      if (adminTabButton) {
        adminTabButton.style.display = "inline-block"; // Or "flex" depending on your CSS
      }

      await fetchUsers(); // Load user list into the admin tab
    }
  } catch (error) {
    console.error("Error fetching user details:", error);
    const profileMessageElement = document.getElementById("profileMessage");
    if (profileMessageElement) {
      profileMessageElement.textContent = "Error fetching user details";
      profileMessageElement.classList.add("error");
    }
  }
}

// Fetch and list all users (admin only)
async function fetchUsers() {
  try {
    console.log("Fetching user list...");
    const response = await fetch("/api/users", {
      credentials: "include",
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const users = await response.json();
    console.log("User list fetched successfully:", users);

    const userListElement = document.getElementById("users");
    if (userListElement) {
      userListElement.innerHTML = users
        .map(
          (user) => `
          <li>
            <span class="user-info">${user.username} - ${user.fullName} (${user.email})</span>
            <button data-userid="${user._id}" class="delete-btn">Delete</button>
          </li>
        `
        )
        .join("");

      // Add click listeners to all delete buttons
      const deleteButtons = userListElement.querySelectorAll(".delete-btn");
      deleteButtons.forEach((btn) =>
        btn.addEventListener("click", (e) => {
          const userId = e.target.getAttribute("data-userid");
          deleteUser(userId);
        })
      );
    }
  } catch (error) {
    console.error("Error fetching user list:", error);
    const userMessageElement = document.getElementById("userMessage");
    if (userMessageElement) {
      userMessageElement.textContent = "Failed to load users. Please try again.";
      userMessageElement.classList.add("error");
    }
  }
}

window.addEventListener("DOMContentLoaded", fetchUsers);


async function deleteUser(userId) {
  if (!confirm("Are you sure you want to delete this user?")) return;

  try {
    const response = await fetch(`/api/users/${userId}`, {
      method: "DELETE",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (!response.ok) {
      const errorData = await response.json();
      alert(`Failed to delete user: ${errorData.message}`);
      return;
    }

    alert("User deleted successfully!");
    fetchUsers(); // Refresh the list after deletion
  } catch (error) {
    console.error("Error deleting user:", error);
    alert("Error deleting user. Please try again.");
  }
}


// Setup login form submission handler
function setupLoginForm() {
  const loginForm = document.getElementById("loginForm");
  console.log("Login form element:", loginForm);
  if (!loginForm) {
    console.warn("Login form not found.");
    return;
  }

  loginForm.addEventListener("submit", async (event) => {
    event.preventDefault();
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const errorMessage = document.getElementById("error-message");
    const submitButton = loginForm.querySelector("button[type=submit]");

    submitButton.disabled = true;
    submitButton.textContent = "Logging in...";

    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
        credentials: "include",
      });

      console.log("Login response status:", response.status);

      // Check if the response content-type is JSON
      const contentType = response.headers.get("content-type") || "";
      if (!contentType.includes("application/json")) {
        const text = await response.text();
        console.warn("Non-JSON login response:", text);
        if (errorMessage) errorMessage.textContent = text || "Login failed";
        submitButton.disabled = false;
        submitButton.textContent = "Login";
        return;
      }

      const data = await response.json();
      console.log("Login response data:", data);

      // Check if the response is successful
      if (response.ok) {
        console.log("Redirecting to /main");
        window.location.href = "/main";
      } else {
        if (errorMessage) errorMessage.textContent = data.message || "Login failed";
      }
    } catch (error) {
      console.error("Login error:", error);
      if (errorMessage) errorMessage.textContent = "Internal server error";
    } finally {
      submitButton.disabled = false;
      submitButton.textContent = "Login";
    }
  });
}


// Setup profile update form handler
function setupProfileForm() {
  const profileForm = document.getElementById("profileForm");
  if (!profileForm) return;

  profileForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const username = document.getElementById("username").value;
    const fullName = document.getElementById("fullName").value;
    const email = document.getElementById("email").value;

    try {
      const response = await fetch("/api/users/me", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
        body: JSON.stringify({ username, fullName, email }),
      });

      const profileMessageElement = document.getElementById("profileMessage");
      if (profileMessageElement) {
        if (response.ok) {
          profileMessageElement.textContent = "Profile updated successfully!";
          profileMessageElement.classList.remove("error");
        } else {
          profileMessageElement.textContent = "Error updating profile";
          profileMessageElement.classList.add("error");
        }
      }
    } catch (error) {
      console.error("Error updating profile:", error);
      const profileMessageElement = document.getElementById("profileMessage");
      if (profileMessageElement) {
        profileMessageElement.textContent = "Error updating profile";
        profileMessageElement.classList.add("error");
      }
    }
  });
}

// Setup password change form handler
function setupPasswordForm() {
  const passwordForm = document.getElementById("passwordForm");
  if (!passwordForm) return;

  passwordForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const currentPassword = document.getElementById("currentPassword").value;
    const newPassword = document.getElementById("newPassword").value;

    try {
      const response = await fetch("/api/users/change-password", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
        body: JSON.stringify({ currentPassword, newPassword }),
      });

      const passwordMessageElement = document.getElementById("passwordMessage");
      if (passwordMessageElement) {
        if (response.ok) {
          passwordMessageElement.textContent = "Password changed successfully!";
          passwordMessageElement.classList.remove("error");
          document.getElementById("currentPassword").value = "";
          document.getElementById("newPassword").value = "";
        } else {
          passwordMessageElement.textContent = "Error changing password";
          passwordMessageElement.classList.add("error");
        }
      }
    } catch (error) {
      console.error("Error changing password:", error);
      const passwordMessageElement = document.getElementById("passwordMessage");
      if (passwordMessageElement) {
        passwordMessageElement.textContent = "Error changing password";
        passwordMessageElement.classList.add("error");
      }
    }
  });
}

// Setup new user registration form (admin only)
function setupAdminUserForm() {
  const newUserForm = document.getElementById("newUserForm");
  if (!newUserForm) return;

  newUserForm.addEventListener("submit", async (e) => {
    e.preventDefault();

    const newUsername = document.getElementById("newUsername").value;
    const newFullName = document.getElementById("newFullName").value;
    const newEmail = document.getElementById("newEmail").value;
    const newPassword = document.getElementById("newUserPassword").value;
    const newUserRole = document.getElementById("newUserRole").value;

    const userMessageElement = document.getElementById("userMessage");

    if (!newUsername || !newFullName || !newEmail || !newPassword || !newUserRole) {
      if (userMessageElement) {
        userMessageElement.textContent = "All fields are required.";
        userMessageElement.classList.add("error");
      }
      return;
    }

    try {
      const response = await fetch("/api/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({
          username: newUsername,
          fullName: newFullName,
          email: newEmail,
          password: newPassword,
          role: newUserRole,
        }),
      });

      if (userMessageElement) {
        if (response.ok) {
          userMessageElement.textContent = "User registered successfully!";
          userMessageElement.classList.remove("error");
          newUserForm.reset();
          await fetchUsers();
        } else {
          const errorData = await response.json();
          userMessageElement.textContent = errorData.message || "Error registering user";
          userMessageElement.classList.add("error");
        }
      }
    } catch (error) {
      console.error("Error during registration:", error);
      if (userMessageElement) {
        userMessageElement.textContent = "Internal server error";
        userMessageElement.classList.add("error");
      }
    }
  });
}


// Main page initialization function
async function initializePage() {
  // Cache authentication state once
  isAuthenticated = await checkAuth();

  // Redirect if not authenticated and not on login page
  redirectIfUnauthenticated();

  // Update nav bar with cached auth state
  await updateNavBar(isAuthenticated);

  // Fetch and display user details if authenticated
  if (isAuthenticated) {
    await fetchAndDisplayUserDetails();
  }

  // Setup forms and admin section
  setupLoginForm();
  setupProfileForm();
  setupPasswordForm();
  setupAdminUserForm();
}

// Run initializePage when DOM is ready
document.addEventListener("DOMContentLoaded", () => {
  initializePage();
});