// Tweaks app — theme switcher + ripple controls

const THEMES = [
  { id: 'paper',    label: 'Paper Lab',     desc: 'cream / ink / carmine (v1)' },
  { id: 'midnight', label: 'Midnight Confocal', desc: 'indigo · mint · magenta' },
  { id: 'petri',    label: 'Petri Dish',    desc: 'oxblood · amber · agar green' },
  { id: 'carbon',   label: 'Carbon Schematic', desc: 'graphite · cyan blueprint' },
  { id: 'fluoro',   label: 'Fluorescence',  desc: 'pure black · stained nuclei' },
];

function TweaksApp() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Reflect theme + ripple config back to DOM/JS whenever tweaks change
  React.useEffect(() => {
    document.body.dataset.theme = t.theme;
    window.__rippleConfig = {
      density: t.density,
      intensity: t.intensity,
      speed: t.speed,
      mode: t.mode,
      glow: t.glow,
    };
  }, [t.theme, t.density, t.intensity, t.speed, t.mode, t.glow]);

  // Rebuild scene when density or mode changes
  React.useEffect(() => {
    if (typeof window.__rippleRebuild === 'function') window.__rippleRebuild();
  }, [t.density, t.mode]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Background theme" />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
        {THEMES.map(th => {
          const active = t.theme === th.id;
          return (
            <button
              key={th.id}
              onClick={() => setTweak('theme', th.id)}
              style={{
                appearance: 'none',
                textAlign: 'left',
                padding: '8px 10px',
                borderRadius: 8,
                border: active ? '1px solid rgba(168,50,74,.65)' : '0.5px solid rgba(0,0,0,.12)',
                background: active ? 'rgba(168,50,74,.1)' : 'rgba(255,255,255,.55)',
                color: 'inherit',
                font: 'inherit',
                cursor: 'default',
                lineHeight: 1.25,
              }}>
              <div style={{ fontWeight: 600, fontSize: 11.5 }}>{th.label}</div>
              <div style={{ fontSize: 10.5, color: 'rgba(41,38,27,.55)', marginTop: 2 }}>{th.desc}</div>
            </button>
          );
        })}
      </div>

      <TweakSection label="Background motion" />
      <TweakRadio
        label="Composition"
        value={t.mode}
        options={['mixed', 'helix', 'peptide', 'sparse']}
        onChange={v => setTweak('mode', v)}
      />
      <TweakSlider label="Density"   value={t.density}   min={0.4} max={2} step={0.1} onChange={v => setTweak('density', v)} />
      <TweakSlider label="Ripple"    value={t.intensity} min={0.2} max={2} step={0.1} onChange={v => setTweak('intensity', v)} />
      <TweakSlider label="Speed"     value={t.speed}     min={0.2} max={2} step={0.1} onChange={v => setTweak('speed', v)} />
      <TweakSlider label="Glow"      value={t.glow}      min={0}   max={2} step={0.1} onChange={v => setTweak('glow', v)} />
    </TweaksPanel>
  );
}

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