// Tweaks — density, accent color, dark/paper, low-fi roughness

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "paper": "light",
  "accent": "#1c5fbf",
  "roughness": "sketchy"
}/*EDITMODE-END*/;

const TweaksApp = () => {
  const t = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const b = document.body;
    b.classList.toggle('density-tight', t.density === 'tight');
    b.classList.toggle('bg-night', t.paper === 'night');
    b.classList.toggle('lo-fi-min', t.roughness === 'minimal');
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.density, t.paper, t.accent, t.roughness]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Display">
        <TweakRadio
          label="Density" value={t.density} onChange={v => t.set('density', v)}
          options={[{value:'comfortable',label:'comfortable'},{value:'tight',label:'tight'}]}
        />
        <TweakRadio
          label="Paper" value={t.paper} onChange={v => t.set('paper', v)}
          options={[{value:'light',label:'light'},{value:'night',label:'night'}]}
        />
        <TweakRadio
          label="Roughness" value={t.roughness} onChange={v => t.set('roughness', v)}
          options={[{value:'sketchy',label:'sketchy'},{value:'minimal',label:'cleaner'}]}
        />
      </TweakSection>
      <TweakSection title="Accent">
        <TweakColor label="Color" value={t.accent} onChange={v => t.set('accent', v)} />
      </TweakSection>
    </TweaksPanel>
  );
};

window.TweaksApp = TweaksApp;