const STORAGE_KEY = "app.prefs.v1";

const DEFAULT_PREFS = {
  theme: "system",
  density: "comfortable",
};

function loadPrefs() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return { ...DEFAULT_PREFS };
    const parsed = JSON.parse(raw);
    return { ...DEFAULT_PREFS, ...parsed };
  } catch {
    return { ...DEFAULT_PREFS };
  }
}

function savePrefs(prefs) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
}

function applyTheme(theme) {
  const resolved =
    theme === "system"
      ? window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light"
      : theme;
  document.documentElement.dataset.theme = resolved;
}

const prefs = loadPrefs();
applyTheme(prefs.theme);

document.querySelector("#theme").value = prefs.theme;
document.querySelector("#theme").addEventListener("change", (event) => {
  prefs.theme = event.target.value;
  savePrefs(prefs);
  applyTheme(prefs.theme);
});

window.addEventListener("storage", (event) => {
  if (event.key !== STORAGE_KEY || !event.newValue) return;
  const next = { ...DEFAULT_PREFS, ...JSON.parse(event.newValue) };
  applyTheme(next.theme);
});