/* BifferProxy — Tweaks panel. */
const { useEffect: btuE } = React;

const BIFFER_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "kin",
  "density": "comfortable",
  "motionPins": false,
  "heroSpeed": 10,
  "grainOverlay": false
}/*EDITMODE-END*/;

const ACCENTS = {
  kin:    { hex: '#C9A227', hover: '#E5B63A' },
  tsuru:  { hex: '#4A8DB5', hover: '#5FA4CB' },
  acid:   { hex: '#B4FF39', hover: '#C8FF5C' },
  violet: { hex: '#7C5CFF', hover: '#9679FF' },
  cyan:   { hex: '#00E0FF', hover: '#3FE9FF' },
};

function BifferTweaks() {
  const [t, setTweak] = useTweaks(BIFFER_TWEAK_DEFAULTS);
  btuE(() => {
    const a = ACCENTS[t.accent] || ACCENTS.kin;
    const r = document.documentElement;
    r.style.setProperty('--kin', a.hex);
    r.style.setProperty('--kin-hover', a.hover);
    r.classList.toggle('motion-pins-on', !!t.motionPins);
    document.body.classList.toggle('hide-motion-pins', !t.motionPins);
    r.style.setProperty('--hero-speed', (t.heroSpeed / 10).toFixed(2));
    r.classList.toggle('density-compact', t.density === 'compact');
    r.classList.toggle('grain-on', !!t.grainOverlay);
  }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent"/>
      <TweakRadio label="Color" value={t.accent} options={[
        {value:'kin', label:'Gold'},
        {value:'tsuru', label:'Teal'},
        {value:'acid', label:'Acid'},
        {value:'violet', label:'Violet'},
        {value:'cyan', label:'Cyan'},
      ]} onChange={(v) => setTweak('accent', v)}/>
      <TweakSection label="Motion"/>
      <TweakToggle label="Show motion pins" value={t.motionPins} onChange={(v) => setTweak('motionPins', v)}/>
      <TweakSlider label="Hero speed" value={t.heroSpeed} min={5} max={20} step={1} unit="×0.1"
                   onChange={(v) => setTweak('heroSpeed', v)}/>
      <TweakSection label="Surface"/>
      <TweakRadio label="Density" value={t.density} options={[
        {value:'comfortable', label:'Comfort'},
        {value:'compact', label:'Compact'},
      ]} onChange={(v) => setTweak('density', v)}/>
      <TweakToggle label="Subtle grain" value={t.grainOverlay} onChange={(v) => setTweak('grainOverlay', v)}/>
    </TweaksPanel>
  );
}

function __mountBifferTweaks() {
  if (document.getElementById('__tweaks_host')) return;
  const host = document.createElement('div');
  host.id = '__tweaks_host';
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<BifferTweaks/>);
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', __mountBifferTweaks);
} else {
  __mountBifferTweaks();
}