// Shared tweaks initializer for all Trion pages.
// Each page must include:
//   <div id="tweaks-root"></div>
//   <script>const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{...}/*EDITMODE-END*/;</script>
// then this script after React + tweaks-panel.jsx.

const TweaksApp = () => {
  const [tweaks, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.body.dataset.accent = tweaks.accent;
    document.body.dataset.density = tweaks.density;
  }, [tweaks]);
  return (
    <window.TweaksPanel title="TRION · TWEAKS">
      <window.TweakSection title="Accent">
        <window.TweakRadio
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={[
            { value: 'red', label: 'Red' },
            { value: 'cyan', label: 'Cyan' },
            { value: 'amber', label: 'Amber' },
            { value: 'lime', label: 'Lime' },
            { value: 'violet', label: 'Violet' },
          ]}
        />
      </window.TweakSection>
      <window.TweakSection title="Density">
        <window.TweakRadio
          value={tweaks.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'dense', label: 'Dense' },
            { value: 'balanced', label: 'Balanced' },
            { value: 'airy', label: 'Airy' },
          ]}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
};

const tryMount = () => {
  if (!window.TweaksPanel || !window.useTweaks) return setTimeout(tryMount, 50);
  ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);
};
tryMount();