const sessionKey = "mh-dashboard-session";

const loginPanel = document.getElementById("login-panel");
const dashboardPanel = document.getElementById("dashboard-panel");
const loginForm = document.getElementById("login-form");
const loginMessage = document.getElementById("login-message");
const logoutBtn = document.getElementById("logout-btn");
const userBadge = document.getElementById("user-badge");

function getSession() {
  try {
    return JSON.parse(sessionStorage.getItem(sessionKey) || "null");
  } catch {
    return null;
  }
}

function setSession(session) {
  sessionStorage.setItem(sessionKey, JSON.stringify(session));
}

function clearSession() {
  sessionStorage.removeItem(sessionKey);
}

function renderAuth() {
  const session = getSession();
  const authenticated = Boolean(session?.user?.display_name);
  loginPanel.classList.toggle("hidden", authenticated);
  dashboardPanel.classList.toggle("hidden", !authenticated);
  if (authenticated) {
    userBadge.textContent = "내 정보";
    userBadge.title = `${session.user.display_name} / ${session.user.role}`;
  }
}

if (loginForm) {
  loginForm.addEventListener("submit", async (event) => {
    event.preventDefault();
    loginMessage.textContent = "로그인 처리 중입니다.";
    const formData = new FormData(loginForm);
    try {
      const response = await fetch("/api/mock-login", {
        method: "POST",
        body: formData,
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.detail || "login failed");
      setSession(payload);
      loginForm.reset();
      renderAuth();
    } catch (error) {
      loginMessage.textContent = "로그인에 실패했습니다. backend 연결 상태를 확인해주세요.";
    }
  });
}

if (logoutBtn) {
  logoutBtn.addEventListener("click", () => {
    clearSession();
    renderAuth();
  });
}

renderAuth();