/* ZI3 Tweaks Panel (React island)
 * useTweaks returns [values, setTweak] tuple; each control takes value + onChange.
 */

const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "cinematic",
  "accent": "#e02424",
  "grain": "on",
  "scanlines": "off"
}/*EDITMODE-END*/;

function applyAll(t) {
  if (window.__zi3ApplyTweaks) window.__zi3ApplyTweaks(t);
  try { localStorage.setItem('zi3.tweaks', JSON.stringify(t)); } catch (e) {}
}

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

  useEffect(() => { applyAll(t); }, [t.mode, t.accent, t.grain, t.scanlines]);

  return (
    <TweaksPanel title="TWEAKS">
      <TweakSection label="Visual mode">
        <TweakRadio
          label="Mode"
          value={t.mode}
          options={[
            { value: 'cinematic', label: 'Cinema' },
            { value: 'brutalist', label: 'Brutal' },
            { value: 'terminal', label: 'Term' }
          ]}
          onChange={(v) => setTweak('mode', v)}
        />
      </TweakSection>

      <TweakSection label="Accent color">
        <TweakColor
          label="Accent"
          value={t.accent}
          options={['#e02424', '#ff6a00', '#b8ff3a', '#f0ede8', '#7a3aff']}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection label="Effects">
        <TweakToggle
          label="Film grain"
          value={t.grain === 'on'}
          onChange={(v) => setTweak('grain', v ? 'on' : 'off')}
        />
        <TweakToggle
          label="CRT scanlines"
          value={t.scanlines === 'on'}
          onChange={(v) => setTweak('scanlines', v ? 'on' : 'off')}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
root.className = 'tweaks-host';
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);