/* Tweaks panel + sound toggle island. Bridges tweak state into the vanilla
   Cymatics engine via window.Cymatics.setConfig. */
const PALETTES = {
  bone:    ['#15120d', '#e9ddbf'],   // charcoal + warm bone (default)
  cream:   ['#1a160e', '#f3e6c4'],   // deep charcoal + warm cream
  ash:     ['#0a0a0b', '#d9d8d2'],   // pure black + pale ash gray
  invert:  ['#e7e0d0', '#1a1611'],   // light bg + dark sand
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paletteName": "bone",
  "density": 124000,
  "sharpness": 2.7,
  "complexity": 0,
  "morphSpeed": 1.7,
  "idleDrift": 0.18,
  "style": "sand",
  "vignette": true
}/*EDITMODE-END*/;

function pushConfig(t) {
  const pal = PALETTES[t.paletteName] || PALETTES.bone;
  window.Cymatics && window.Cymatics.setConfig({
    bg: pal[0], sand: pal[1],
    density: t.density,
    sharpness: t.sharpness,
    complexity: t.complexity,
    morphSpeed: t.morphSpeed,
    idleDrift: t.idleDrift,
    style: t.style,
    vignette: t.vignette,
  });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [sound, setSound] = React.useState(false);
  const [hint, setHint] = React.useState(true);

  React.useEffect(() => { pushConfig(t); }, [t]);

  // vignette toggle reflected on the overlay element
  React.useEffect(() => {
    const v = document.getElementById('vignette');
    if (v) v.style.opacity = t.vignette ? '1' : '0';
  }, [t.vignette]);

  // fade the scroll hint after first interaction
  React.useEffect(() => {
    const dismiss = () => setHint(false);
    window.addEventListener('scroll', dismiss, { passive: true, once: true });
    window.addEventListener('wheel', dismiss, { passive: true, once: true });
    const tm = setTimeout(() => setHint(false), 6000);
    return () => { clearTimeout(tm); window.removeEventListener('scroll', dismiss); window.removeEventListener('wheel', dismiss); };
  }, []);

  const toggleSound = () => {
    const on = window.Cymatics.toggleSound();
    setSound(on);
  };

  const pal = PALETTES[t.paletteName] || PALETTES.bone;

  return (
    <>
      {/* sound toggle — bottom-left, unobtrusive */}
      <button className={'snd' + (sound ? ' on' : '')} onClick={toggleSound}
              aria-label={sound ? 'Mute tone' : 'Play tone'} title={sound ? 'Mute tone' : 'Play tone'}>
        <span className="snd-bars" aria-hidden="true">
          <i /><i /><i /><i />
        </span>
      </button>

      {/* scroll hint */}
      <div className={'hint' + (hint ? '' : ' gone')} aria-hidden="true">
        <span>scroll to shift the frequency</span>
        <svg width="16" height="22" viewBox="0 0 16 22" fill="none">
          <rect x="1" y="1" width="14" height="20" rx="7" stroke="currentColor" strokeWidth="1.3" opacity="0.5"/>
          <circle className="hint-dot" cx="8" cy="6" r="1.6" fill="currentColor"/>
        </svg>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor label="Sand & ground" value={pal}
          options={[PALETTES.bone, PALETTES.cream, PALETTES.ash, PALETTES.invert]}
          onChange={(arr) => {
            const name = Object.keys(PALETTES).find(k => PALETTES[k][0] === arr[0] && PALETTES[k][1] === arr[1]) || 'bone';
            setTweak('paletteName', name);
          }} />

        <TweakSection label="Render" />
        <TweakRadio label="Style" value={t.style} options={['sand', 'glow', 'ink']}
          onChange={(v) => setTweak('style', v)} />
        <TweakSlider label="Grain density" value={t.density} min={20000} max={180000} step={4000}
          onChange={(v) => setTweak('density', v)} />
        <TweakSlider label="Line crispness" value={t.sharpness} min={0.8} max={3.2} step={0.1}
          onChange={(v) => setTweak('sharpness', v)} />
        <TweakSlider label="Complexity" value={t.complexity} min={0} max={1.4} step={0.05}
          onChange={(v) => setTweak('complexity', v)} />

        <TweakSection label="Motion" />
        <TweakSlider label="Scroll morph" value={t.morphSpeed} min={0.2} max={3} step={0.1}
          onChange={(v) => setTweak('morphSpeed', v)} />
        <TweakSlider label="Idle drift" value={t.idleDrift} min={0} max={0.3} step={0.01}
          onChange={(v) => setTweak('idleDrift', v)} />

        <TweakSection label="Atmosphere" />
        <TweakToggle label="Vignette" value={t.vignette} onChange={(v) => setTweak('vignette', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('ui')).render(<App />);