/**
 * Стенд: переключение темы и скругления.
 * Пишет в localStorage под тем же ключом, что и панель темы сайта,
 * поэтому выбранный режим сохранится при переходе на сам сайт.
 */
import { STORAGE_KEY, readThemeState, writeThemeState } from "/js/modules/theme/theme-core.js";
import { ensureThemeFontLoaded } from "/js/modules/theme/theme-fonts.js";

function apply(patch) {
  const state = { ...readThemeState(), ...patch };
  writeThemeState(state);

  const root = document.documentElement;

  // Тема: только светлая/тёмная. Режим «system» на стенде не нужен —
  // важно видеть обе темы принудительно.
  if (state.mode === "system") state.mode = prefersDark() ? "dark" : "light";
  root.dataset.theme = state.mode;

  if (state.radius) root.dataset.radius = state.radius;
  if (state.font) root.dataset.font = state.font;

  const labAcc = state[state.mode] || state.light || { h: 210, s: 90, l: 40 };
  root.style.setProperty("--theme-h", String(labAcc.h));
  root.style.setProperty("--theme-s", String(labAcc.s));
  root.style.setProperty("--theme-l", String(labAcc.l));

  ensureThemeFontLoaded(state.font);
  syncButtons();
}

function prefersDark() {
  return window.matchMedia("(prefers-color-scheme: dark)").matches;
}

function bind(attr, key) {
  const btns = document.querySelectorAll(`[${attr}]`);
  btns.forEach((btn) => {
    btn.addEventListener("click", () => {
      apply({ [key]: btn.getAttribute(attr) });
    });
  });
}

function syncButtons() {
  const state = readThemeState();
  const theme = state.mode === "system" ? (prefersDark() ? "dark" : "light") : state.mode;

  document.querySelectorAll("[data-lab-theme]").forEach((btn) => {
    btn.setAttribute("aria-pressed", btn.getAttribute("data-lab-theme") === theme ? "true" : "false");
  });

  document.querySelectorAll("[data-lab-radius]").forEach((btn) => {
    btn.setAttribute("aria-pressed", btn.getAttribute("data-lab-radius") === state.radius ? "true" : "false");
  });
}

bind("data-lab-theme", "mode");
bind("data-lab-radius", "radius");
syncButtons();