export function applyUserRoleUI(user, refs) {
  const { usernameDisplay, roleBadge } = refs;

  if (!user || !usernameDisplay || !roleBadge) return;

  usernameDisplay.textContent = user.username || "unknown";

  const roleBadges = {
    admin: '<i class="fa-solid fa-crown mr-1"></i>Admin',
    operator: '<i class="fa-solid fa-sliders mr-1"></i>Operator',
    viewer: '<i class="fa-solid fa-eye mr-1"></i>Viewer',
  };

  if (roleBadges[user.role]) {
    roleBadge.innerHTML = roleBadges[user.role];
  } else {
    roleBadge.textContent = user.role || "user";
  }

  roleBadge.classList.remove(
    "bg-purple-900/50",
    "text-purple-300",
    "border",
    "border-purple-800",
    "bg-blue-900/50",
    "text-blue-300",
    "border-blue-800",
    "bg-slate-700",
    "text-slate-300",
    "border-slate-600",
  );

  if (user.role === "admin") {
    roleBadge.classList.add(
      "bg-purple-900/50",
      "text-purple-300",
      "border",
      "border-purple-800",
    );
  } else if (user.role === "operator") {
    roleBadge.classList.add(
      "bg-blue-900/50",
      "text-blue-300",
      "border",
      "border-blue-800",
    );
  } else {
    roleBadge.classList.add(
      "bg-slate-700",
      "text-slate-300",
      "border",
      "border-slate-600",
    );
  }

  const permissions = new Set(Array.isArray(user.permissions) ? user.permissions : []);
  const can = (permission) => permissions.has(permission);
  const canAny = (...items) => items.some((permission) => can(permission));

  // Helper: unhide an element by ID in both topbar and sidebar
  const unhide = (id) => {
    const el = document.getElementById(id);
    if (el) el.classList.remove("hidden");
  };

  if (can("users:manage")) unhide("users-link");
  if (can("plugins:manage")) unhide("plugins-link");
  if (can("audit:view")) unhide("logs-link");
  if (can("system:configure")) unhide("sol-publish-link");
  if (can("clients:build") || user.canBuild) unhide("build-link");
  if (can("clients:enroll")) unhide("enrollment-link");
  if (can("scripts:manage")) unhide("scripts-link");
  if (can("deploys:manage")) unhide("deploy-link");
  if (canAny("system:notifications", "clients:control", "clients:enroll")) {
    unhide("notifications-link");
  }
  if (user.role !== "viewer" || user.canUploadFiles) {
    unhide("file-share-link");
  }
}

export async function applyThumbnailWallVisibility(user) {
  if (!user || user.role === "viewer") return;
  try {
    const res = await fetch("/api/settings/thumbnails", { credentials: "include" });
    if (!res.ok) return;
    const data = await res.json();
    if (data?.thumbnails?.wallEnabled === false) return;
    document.querySelectorAll("#screenshots-link").forEach((el) => el.classList.remove("hidden"));
  } catch {}
}