// QTG Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "cyan",
  "density": "comfortable",
  "showTicker": true,
  "darkRatio": "70-30"
}/*EDITMODE-END*/;

const ACCENTS = {
  cyan:    {value:'#00ffff',  dim:'rgba(0,255,255,0.18)',  faint:'rgba(0,255,255,0.08)',  name:'QTG Cyan'},
  mint:    {value:'oklch(0.86 0.16 165)', dim:'oklch(0.86 0.16 165 / 0.18)', faint:'oklch(0.86 0.16 165 / 0.08)', name:'Quant Mint'},
  green:   {value:'oklch(0.86 0.18 145)', dim:'oklch(0.86 0.18 145 / 0.18)', faint:'oklch(0.86 0.18 145 / 0.08)', name:'Electric Green'},
  amber:   {value:'oklch(0.85 0.15 75)',  dim:'oklch(0.85 0.15 75 / 0.18)',  faint:'oklch(0.85 0.15 75 / 0.08)',  name:'Signal Amber'},
};

const QtgTweaks = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(()=>{
    const root = document.documentElement;
    const a = ACCENTS[tweaks.accent] || ACCENTS.cyan;
    root.style.setProperty('--accent', a.value);
    root.style.setProperty('--accent-dim', a.dim);
    root.style.setProperty('--accent-faint', a.faint);
  }, [tweaks.accent]);

  React.useEffect(()=>{
    document.body.dataset.density = tweaks.density;
  }, [tweaks.density]);

  React.useEffect(()=>{
    document.body.dataset.ticker = tweaks.showTicker ? 'on' : 'off';
  }, [tweaks.showTicker]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakRadio
          value={tweaks.accent}
          onChange={v=>setTweak('accent', v)}
          options={[
            {value:'cyan', label:'Cyan'},
            {value:'mint', label:'Mint'},
            {value:'green', label:'Green'},
            {value:'amber', label:'Amber'},
          ]}
        />
      </TweakSection>
      <TweakSection title="Density">
        <TweakRadio
          value={tweaks.density}
          onChange={v=>setTweak('density', v)}
          options={[
            {value:'compact', label:'Compact'},
            {value:'comfortable', label:'Comfort'},
          ]}
        />
      </TweakSection>
      <TweakSection title="Hero ticker">
        <TweakToggle value={tweaks.showTicker} onChange={v=>setTweak('showTicker', v)} label="Show running stats" />
      </TweakSection>
    </TweaksPanel>
  );
};

window.QtgTweaks = QtgTweaks;