/* Software Share — Tweaks app (mounts into #tweaks-root on every page) */

const SS_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "radius": "soft"
}/*EDITMODE-END*/;

function SSTweaks() {
  // initialise from localStorage so the choice carries across pages
  const init = {
    accent: localStorage.getItem("ss-accent") || SS_TWEAK_DEFAULTS.accent,
    radius: localStorage.getItem("ss-radius") || SS_TWEAK_DEFAULTS.radius,
  };
  const [t, setTweak] = useTweaks(init);

  const apply = React.useCallback((key, val) => {
    localStorage.setItem("ss-" + key, val);
    document.documentElement.dataset[key] = val;
    setTweak(key, val);
  }, [setTweak]);

  React.useEffect(() => {
    document.documentElement.dataset.accent = t.accent;
    document.documentElement.dataset.radius = t.radius;
  }, []);

  const ACCENTS = [
    { value: "blue",  hex: "#2563EB" },
    { value: "coral", hex: "#EA580C" },
    { value: "green", hex: "#15803D" },
  ];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Akzentfarbe" />
      <TweakColor
        label="Markenfarbe"
        value={ACCENTS.find((a) => a.value === t.accent)?.hex || "#2563EB"}
        options={ACCENTS.map((a) => a.hex)}
        onChange={(hex) => {
          const found = ACCENTS.find((a) => a.hex.toLowerCase() === String(hex).toLowerCase());
          apply("accent", found ? found.value : "blue");
        }}
      />
      <TweakSection label="Form" />
      <TweakRadio
        label="Ecken"
        value={t.radius}
        options={[
          { value: "soft", label: "Weich" },
          { value: "medium", label: "Mittel" },
          { value: "sharp", label: "Kantig" },
        ]}
        onChange={(v) => apply("radius", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.getElementById("tweaks-root");
  if (el && window.ReactDOM) {
    ReactDOM.createRoot(el).render(<SSTweaks />);
  }
})();