/* tweaks-app.jsx — renders the Tweaks panel and applies values to the page */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "stack",
  "accent": "#9c7c45",
  "tone": "bone",
  "grain": true
}/*EDITMODE-END*/;

// accent -> [accent, darker accent-ink]
const ACCENTS = {
  "#9c7c45": "#7c6133", // antique brass
  "#8a8f7a": "#646956", // sage olive
  "#7a3b34": "#5c2a24", // oxblood
  "#3f5b6b": "#2c4350", // slate blue
};
const TONES = {
  bone:      { "--bone": "#f2ede3", "--bone-deep": "#ebe4d6", "--paper": "#faf7f0" },
  porcelain: { "--bone": "#f6f3ec", "--bone-deep": "#ece7dc", "--paper": "#fdfcf8" },
  sand:      { "--bone": "#ece2d2", "--bone-deep": "#e2d6c2", "--paper": "#f6efe2" },
};

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

  useEffect(() => { document.body.dataset.hero = t.hero; }, [t.hero]);

  useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty("--accent", t.accent);
    root.setProperty("--accent-ink", ACCENTS[t.accent] || "#7c6133");
  }, [t.accent]);

  useEffect(() => {
    const root = document.documentElement.style;
    const tone = TONES[t.tone] || TONES.bone;
    Object.entries(tone).forEach(([k, v]) => root.setProperty(k, v));
  }, [t.tone]);

  useEffect(() => {
    const sheet = document.getElementById("__grain_toggle") || (() => {
      const s = document.createElement("style"); s.id = "__grain_toggle"; document.head.appendChild(s); return s;
    })();
    sheet.textContent = `body::before{opacity:${t.grain ? 0.04 : 0} !important;}`;
  }, [t.grain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero direction" />
      <TweakRadio
        label="Layout"
        value={t.hero}
        options={["stack", "index", "cinema"]}
        onChange={(v) => setTweak("hero", v)}
      />
      <TweakSection label="Palette" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakRadio
        label="Paper tone"
        value={t.tone}
        options={["bone", "porcelain", "sand"]}
        onChange={(v) => setTweak("tone", v)}
      />
      <TweakSection label="Texture" />
      <TweakToggle
        label="Paper grain"
        value={t.grain}
        onChange={(v) => setTweak("grain", v)}
      />
    </TweaksPanel>
  );
}

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