const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2e7bff",
  "dark": true
}/*EDITMODE-END*/;

// dark-ink accents (light swatches) need black text on buttons
const DARK_INK = new Set(["#9be15d", "#ffb020"]);

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-ink", DARK_INK.has(t.accent.toLowerCase()) ? "#11161f" : "#ffffff");
  }, [t.accent]);

  return (
    <TweaksPanel>
      <TweakSection label="Accent" />
      <TweakColor
        label="Color"
        value={t.accent}
        options={["#2e7bff", "#7c5cff", "#ff3d77", "#9be15d", "#ffb020"]}
        onChange={(v) => setTweak("accent", v)}
      />
    </TweaksPanel>
  );
}

// apply current tweak values on first paint (before React mounts) to avoid flash.
// Theme is owned by the top-left toggle (localStorage 'cvTheme'); respect it here.
(function () {
  const root = document.documentElement;
  root.style.setProperty("--accent", TWEAK_DEFAULTS.accent);
  root.style.setProperty("--accent-ink", DARK_INK.has(TWEAK_DEFAULTS.accent.toLowerCase()) ? "#11161f" : "#ffffff");
  let saved = null;
  try { saved = localStorage.getItem("cvTheme"); } catch (e) {}
  root.setAttribute("data-theme", saved || (TWEAK_DEFAULTS.dark ? "dark" : "light"));
})();

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);