// Vertex — small React mount for the Tweaks panel only.
// Writes values to window.VERTEX_TWEAKS and dispatches "vertex-tweaks-changed".

const VERTEX_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motion": "full",
  "palette": "moonlit"
}/*EDITMODE-END*/;

const VERTEX_PALETTE_SWATCHES = {
  moonlit: ["#05080c", "#0c2530", "#d6f6fb"],
  deep: ["#03050a", "#0a1c28", "#c8eef5"],
  twilight: ["#081018", "#123040", "#e0f7fb"],
};

function VertexTweaksApp() {
  const [t, setTweak] = useTweaks(VERTEX_TWEAK_DEFAULTS);

  /* fall back if an older palette name is still persisted */
  const palName = VERTEX_PALETTE_SWATCHES[t.palette] ? t.palette : "moonlit";

  React.useEffect(() => {
    window.VERTEX_TWEAKS = { motion: t.motion, palette: palName };
    window.dispatchEvent(new Event("vertex-tweaks-changed"));
  }, [t.motion, palName]);

  return (
    <TweaksPanel>
      <TweakSection label="Motion" />
      <TweakRadio label="Intensity" value={t.motion} options={["minimal", "moderate", "full"]}
        onChange={(v) => setTweak("motion", v)} />
      <TweakSection label="Atmosphere" />
      <TweakColor label="Ambience" value={VERTEX_PALETTE_SWATCHES[palName]}
        options={[VERTEX_PALETTE_SWATCHES.moonlit, VERTEX_PALETTE_SWATCHES.deep, VERTEX_PALETTE_SWATCHES.twilight]}
        onChange={(v) => {
          const name = Object.keys(VERTEX_PALETTE_SWATCHES).find(
            (k) => VERTEX_PALETTE_SWATCHES[k].join() === v.join()
          );
          if (name) setTweak("palette", name);
        }} />
    </TweaksPanel>
  );
}

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