const PID_THEME_KEY = "pid_theme";
const PID_COLOR_THEME_KEY = "pid_color_theme";

const PID_COLOR_THEMES = [
  { key: "roxo", label: "Roxo", swatch: "#7c4dff" },
  { key: "azul", label: "Azul", swatch: "#3b82f6" },
  { key: "verde", label: "Verde", swatch: "#22c55e" },
  { key: "ambar", label: "Âmbar", swatch: "#f59e0b" },
  { key: "rosa", label: "Rosa", swatch: "#ec4899" },
  { key: "vermelho", label: "Vermelho", swatch: "#ef4444" },
];

(function applyStoredTheme() {
  const stored = localStorage.getItem(PID_THEME_KEY);
  if (stored) {
    document.documentElement.setAttribute("data-theme", stored);
  }
})();

(function applyStoredColorTheme() {
  const stored = localStorage.getItem(PID_COLOR_THEME_KEY);
  if (stored) {
    document.documentElement.setAttribute("data-color-theme", stored);
  }
})();

function pidSyncLoginLogo() {
  const img = document.getElementById("login-logo");
  if (!img) return;
  const theme = document.documentElement.getAttribute("data-theme") || "dark";
  const src = theme === "light" ? img.dataset.logoLight : img.dataset.logoDark;
  if (src) img.src = src;
}

pidSyncLoginLogo();
document.addEventListener("pid:theme-changed", pidSyncLoginLogo);

function pidToggleTheme() {
  const current = document.documentElement.getAttribute("data-theme") || "dark";
  const next = current === "dark" ? "light" : "dark";
  document.documentElement.setAttribute("data-theme", next);
  localStorage.setItem(PID_THEME_KEY, next);
  document.dispatchEvent(new CustomEvent("pid:theme-changed", { detail: { theme: next } }));
}

function pidGetColorTheme() {
  return document.documentElement.getAttribute("data-color-theme") || "roxo";
}

function pidSetColorTheme(themeKey) {
  document.documentElement.setAttribute("data-color-theme", themeKey);
  localStorage.setItem(PID_COLOR_THEME_KEY, themeKey);
}

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("theme-toggle");
  if (!btn) return;

  const syncIcon = () => {
    const theme = document.documentElement.getAttribute("data-theme") || "dark";
    btn.setAttribute("aria-pressed", theme === "light");
    btn.setAttribute("aria-label", theme === "dark" ? "Ativar modo claro" : "Ativar modo escuro");
  };

  syncIcon();
  btn.addEventListener("click", () => {
    pidToggleTheme();
    syncIcon();
  });
});