/* CPS Tweaks — exposes key design knobs to the user */
const { useState, useEffect } = React;

const CPS_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#F5B724",
  "primary": "#3B82F6",
  "density": "regular",
  "sidebar": "default",
  "radius": 12,
  "showRoleSwitch": true,
  "showBadges": true,
  "showSparks": true,
  "fontScale": 100
}/*EDITMODE-END*/;

function CPSTweaks(){
  const [t, setTweak] = useTweaks(CPS_TWEAK_DEFAULTS);

  useEffect(()=>{
    const b = document.body;
    b.dataset.theme = t.theme;
    b.dataset.density = t.density;
    b.dataset.side = t.sidebar;
    document.documentElement.style.setProperty('--accent', t.accent);
    // leave --accent-ink as the ink color defined in CSS (readable on accent bg)
    document.documentElement.style.setProperty('--primary', t.primary);
    document.documentElement.style.setProperty('--primary-2', t.primary);
    document.documentElement.style.setProperty('--r-lg', t.radius+'px');
    document.documentElement.style.setProperty('--r-md', Math.max(6,t.radius-3)+'px');
    document.documentElement.style.fontSize = (16 * t.fontScale/100) + 'px';
    const rs = document.getElementById('roleSwitch');
    if (rs) rs.style.display = t.showRoleSwitch ? '' : 'none';
    b.classList.toggle('no-badges', !t.showBadges);
    b.classList.toggle('no-sparks', !t.showSparks);
  }, [t]);

  return (
    <TweaksPanel title="CPS Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme} options={['light','dark']}
        onChange={v=>setTweak('theme', v)} />
      <TweakColor label="Accent" value={t.accent} onChange={v=>setTweak('accent', v)} />
      <TweakColor label="Primary" value={t.primary} onChange={v=>setTweak('primary', v)} />
      <TweakSlider label="Radius" value={t.radius} min={0} max={20} unit="px"
        onChange={v=>setTweak('radius', v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density} options={['compact','regular','comfy']}
        onChange={v=>setTweak('density', v)} />
      <TweakRadio label="Sidebar" value={t.sidebar} options={['compact','default','wide']}
        onChange={v=>setTweak('sidebar', v)} />
      <TweakSlider label="Font scale" value={t.fontScale} min={85} max={115} unit="%"
        onChange={v=>setTweak('fontScale', v)} />

      <TweakSection label="Chrome" />
      <TweakToggle label="Role switcher" value={t.showRoleSwitch}
        onChange={v=>setTweak('showRoleSwitch', v)} />
      <TweakToggle label="Badge counts" value={t.showBadges}
        onChange={v=>setTweak('showBadges', v)} />
      <TweakToggle label="Sparklines" value={t.showSparks}
        onChange={v=>setTweak('showSparks', v)} />
    </TweaksPanel>
  );
}

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