/* NINTAI — Tweaks panel island */
const NINTAI_TWEAKS = /*EDITMODE-BEGIN*/{
  "direction": "editorial",
  "accent": "auto",
  "grain": true,
  "coverPos": 42,
  "lang": "en"
}/*EDITMODE-END*/;

const NINTAI_ACCENTS = {
  auto:   null,
  amber:  "oklch(0.62 0.13 65)",
  bleu:   "oklch(0.52 0.14 248)",
  vert:   "oklch(0.52 0.11 158)",
  violet: "oklch(0.52 0.15 312)"
};

function NintaiTweaks() {
  const [t, setTweak] = useTweaks(NINTAI_TWEAKS);
  const root = document.documentElement;

  React.useEffect(() => { root.setAttribute("data-direction", t.direction); }, [t.direction]);
  React.useEffect(() => {
    const c = NINTAI_ACCENTS[t.accent];
    if (c) {
      root.style.setProperty("--accent", c);
      root.style.setProperty("--accent-ink", "oklch(0.975 0.006 85)");
    } else {
      root.style.removeProperty("--accent");
      root.style.removeProperty("--accent-ink");
    }
  }, [t.accent]);
  React.useEffect(() => { root.setAttribute("data-grain", t.grain ? "on" : "off"); }, [t.grain]);
  React.useEffect(() => {
    root.style.setProperty("--cover-vpos", t.coverPos + "%");
    if (window.__coverParallax) window.__coverParallax();
  }, [t.coverPos]);
  React.useEffect(() => { if (window.__nintaiSetLang) window.__nintaiSetLang(t.lang); }, [t.lang]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction artistique" />
      <TweakRadio
        label="Style"
        value={t.direction}
        options={[
          { value: "cinema", label: "Ciné" },
          { value: "editorial", label: "Édito" },
          { value: "moderne", label: "Moderne" }
        ]}
        onChange={(v) => setTweak("direction", v)} />
      <TweakSelect
        label="Accent"
        value={t.accent}
        options={[
          { value: "auto", label: "Auto (selon direction)" },
          { value: "amber", label: "Ambre / bronze" },
          { value: "bleu", label: "Bleu froid" },
          { value: "vert", label: "Vert" },
          { value: "violet", label: "Violet" }
        ]}
        onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Ambiance" />
      <TweakToggle label="Grain de film" value={t.grain}
        onChange={(v) => setTweak("grain", v)} />
      <TweakSlider label="Position vidéo (vertical)" min={0} max={100} step={1}
        value={t.coverPos} unit="%"
        onChange={(v) => setTweak("coverPos", v)} />

      <TweakSection label="Langue par défaut" />
      <TweakRadio label="Langue" value={t.lang}
        options={[{ value: "fr", label: "FR" }, { value: "en", label: "EN" }]}
        onChange={(v) => setTweak("lang", v)} />
    </TweaksPanel>
  );
}

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