/*
 * DarojaAI — Tweaks panel
 */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E6B340",
  "theme": "cream",
  "heroStyle": "editorial",
  "density": "comfortable",
  "grain": true
}/*EDITMODE-END*/;

const { useEffect } = React;

const ACCENT_TO_NAME = {
  '#E6B340': 'gold',
  '#3299BB': 'azure',
  '#708238': 'green',
  '#B34A35': 'red',
};

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

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-accent', ACCENT_TO_NAME[t.accent] || 'gold');
    root.setAttribute('data-theme', t.theme);
    root.setAttribute('data-hero', t.heroStyle);
    root.setAttribute('data-density', t.density);
    root.setAttribute('data-grain', t.grain ? 'on' : 'off');
  }, [t.accent, t.theme, t.heroStyle, t.density, t.grain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor
        label="Quadrant"
        value={t.accent}
        options={['#E6B340', '#3299BB', '#708238', '#B34A35']}
        onChange={v => setTweak('accent', v)}
      />

      <TweakSection label="Theme" />
      <TweakRadio
        label="Background"
        value={t.theme}
        options={['cream', 'ink']}
        onChange={v => setTweak('theme', v)}
      />

      <TweakSection label="Hero" />
      <TweakSelect
        label="Composition"
        value={t.heroStyle}
        options={[
          { value: 'editorial', label: 'Editorial split' },
          { value: 'centered',  label: 'Centered minimal' },
          { value: 'dark',      label: 'Dark / confident' },
        ]}
        onChange={v => setTweak('heroStyle', v)}
      />

      <TweakSection label="Density" />
      <TweakRadio
        label="Spacing"
        value={t.density}
        options={['compact', 'comfortable', 'roomy']}
        onChange={v => setTweak('density', v)}
      />
      <TweakToggle
        label="Grain texture"
        value={t.grain}
        onChange={v => setTweak('grain', v)}
      />
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<Tweaks/>);