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");
const userPopover = document.getElementById("user-popover");
const currentViewTitle = document.getElementById("current-view-title");
const navButtons = Array.from(document.querySelectorAll(".header-center [data-view]"));
const organizationFrame = document.getElementById("organization-frame");
const organizationStage = document.getElementById("organization-stage");
const emptyStage = document.getElementById("empty-stage");

const viewLabels = {
  ledger: "사업관리대장",
  project: "프로젝트별 분석",
  team: "팀/개인별 분석",
  organization: "조직 현황",
};

let currentView = "organization";

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 hideUserPopover() {
  userPopover?.classList.add("hidden");
}

function toggleUserPopover() {
  userPopover?.classList.toggle("hidden");
}

function setActiveView(view) {
  const previousView = currentView;
  currentView = view in viewLabels ? view : "organization";
  if (currentViewTitle) {
    currentViewTitle.textContent = viewLabels[currentView];
  }
  navButtons.forEach((button) => {
    const active = button.dataset.view === currentView;
    button.classList.toggle("active", active);
    button.classList.toggle("muted", !active);
  });
  const isOrganization = currentView === "organization";
  if (organizationStage) {
    organizationStage.hidden = !isOrganization;
    organizationStage.style.display = isOrganization ? "flex" : "none";
  }
  if (emptyStage) {
    emptyStage.hidden = isOrganization;
    emptyStage.style.display = isOrganization ? "none" : "flex";
  }

  if (isOrganization && previousView !== "organization" && organizationFrame) {
    const frameSrc = organizationFrame.dataset.src || organizationFrame.src;
    organizationFrame.src = frameSrc;
  }
}

function renderAuth() {
  const session = getSession();
  const authenticated = Boolean(session?.user?.display_name);
  loginPanel.classList.toggle("hidden", authenticated);
  dashboardPanel.classList.toggle("hidden", !authenticated);
  if (authenticated) {
    const displayName = session.user.display_name || "접속자";
    const rank = "-";
    userBadge.innerHTML = `<span class="user-chip-icon">◎</span><span class="user-chip-text"><strong>${displayName}</strong><em>${rank}</em></span><span class="user-chip-caret" aria-hidden="true">▾</span>`;
    userBadge.title = `${displayName} / -`;
    if (userPopover) {
      userPopover.innerHTML = `
        <div class="user-popover-row">
          <span class="user-popover-label">이름</span>
          <strong>${displayName}</strong>
        </div>
        <div class="user-popover-row">
          <span class="user-popover-label">직급</span>
          <span>${rank}</span>
        </div>
        <div class="user-popover-row">
          <span class="user-popover-label">권한</span>
          <span>${session.user.role || "-"}</span>
        </div>
        <div class="user-popover-row">
          <span class="user-popover-label">아이디</span>
          <span>${session.user.username || "-"}</span>
        </div>
      `;
    }
  }
}

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 (userBadge) {
  userBadge.addEventListener("click", (event) => {
    event.stopPropagation();
    toggleUserPopover();
  });
}

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

navButtons.forEach((button) => {
  button.addEventListener("click", () => {
    hideUserPopover();
    setActiveView(button.dataset.view || "organization");
  });
});

document.addEventListener("click", () => {
  hideUserPopover();
});

setActiveView(currentView);
renderAuth();