// tweaks.jsx — light/dark mode toggle for Dating Lab site
// Persists to localStorage AND the EDITMODE-BEGIN/END block so it survives reloads.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false
}/*EDITMODE-END*/;

function applyTheme(dark) {
  const t = dark ? "dark" : "light";
  document.documentElement.dataset.theme = t;
  try { localStorage.setItem("dl-theme", t); } catch (e) {}
}

// On boot, if a localStorage value exists, sync the defaults UI to it.
(function () {
  try {
    const t = localStorage.getItem("dl-theme");
    if (t === "dark") TWEAK_DEFAULTS.dark = true;
    if (t === "light") TWEAK_DEFAULTS.dark = false;
  } catch (e) {}
  applyTheme(TWEAK_DEFAULTS.dark);
})();

function TweakApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTheme(t.dark); }, [t.dark]);

  return (
    <TweaksPanel>
      <TweakSection label="Appearance" />
      <TweakToggle
        label="Dark mode"
        value={t.dark}
        onChange={(v) => setTweak("dark", v)}
      />
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement("div");
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<TweakApp />);