/* Shared Tweaks for the Jaras releases site (accent + dark mode). */
const { useEffect } = React;

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

const ACCENTS = {
  blue:   { a: "#132ef5", h: "#1026cc", s: "#d0d5fd" },
  navy:   { a: "#021441", h: "#021136", s: "#ccd0d9" },
  orange: { a: "#fa8334", h: "#d06d2b", s: "#fee6d6" },
};

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    const root = document.documentElement;
    const ac = ACCENTS[t.accent] || ACCENTS.blue;
    root.style.setProperty("--accent", ac.a);
    root.style.setProperty("--accent-hover", ac.h);
    root.style.setProperty("--accent-subtle", ac.s);
    if (t.dark) root.setAttribute("data-theme", "dark");
    else root.removeAttribute("data-theme");
  }, [t.accent, t.dark]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="المظهر / Appearance" />
      <TweakColor
        label="اللون المميّز"
        value={ACCENTS[t.accent].a}
        options={[ACCENTS.blue.a, ACCENTS.navy.a, ACCENTS.orange.a]}
        onChange={(v) => setTweak("accent", Object.keys(ACCENTS).find((k) => ACCENTS[k].a === v) || "blue")}
      />
      <TweakToggle label="الوضع الداكن" value={t.dark} onChange={(v) => setTweak("dark", v)} />
    </TweaksPanel>
  );
}

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