const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0FA0DC",
  "logoSize": 56,
  "displayFont": "Oswald",
  "btnStyle": "angular",
  "density": "regular",
  "showTopbar": true
}/*EDITMODE-END*/;

// --- color helpers: shift a hex by +/- lightness in HSL ---
function hexToHsl(hex){
  let r=parseInt(hex.slice(1,3),16)/255, g=parseInt(hex.slice(3,5),16)/255, b=parseInt(hex.slice(5,7),16)/255;
  const max=Math.max(r,g,b), min=Math.min(r,g,b); let h=0,s=0,l=(max+min)/2;
  if(max!==min){const d=max-min; s=l>.5?d/(2-max-min):d/(max+min);
    if(max===r)h=(g-b)/d+(g<b?6:0); else if(max===g)h=(b-r)/d+2; else h=(r-g)/d+4; h/=6;}
  return [h*360,s*100,l*100];
}
function hslToHex(h,s,l){
  h/=360;s/=100;l/=100; const a=s*Math.min(l,1-l);
  const f=n=>{const k=(n+h*12)%12; const c=l-a*Math.max(-1,Math.min(k-3,9-k,1));
    return Math.round(255*c).toString(16).padStart(2,'0');};
  return `#${f(0)}${f(8)}${f(4)}`;
}
function shift(hex,dl){const [h,s,l]=hexToHsl(hex); return hslToHex(h,s,Math.max(0,Math.min(100,l+dl)));}

const FONT_MAP = {
  Oswald: "'Oswald',sans-serif",
  Teko: "'Teko',sans-serif",
  Anton: "'Anton',sans-serif"
};

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

  React.useEffect(()=>{
    const root = document.documentElement;
    root.style.setProperty('--blue', t.accent);
    root.style.setProperty('--blue-bright', shift(t.accent, 12));
    root.style.setProperty('--blue-dark', shift(t.accent, -14));
    root.style.setProperty('--logo-h', t.logoSize + 'px');
    root.style.setProperty('--display', FONT_MAP[t.displayFont] || FONT_MAP.Oswald);
    document.body.dataset.btn = t.btnStyle;
    document.body.dataset.density = t.density;
    const tb = document.querySelector('.topbar');
    if(tb) tb.style.display = t.showTopbar ? '' : 'none';
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={['#0FA0DC','#1CB4E8','#E8590C','#16A34A','#DC2626','#7A5AE0']}
        onChange={(v)=>setTweak('accent', v)} />
      <TweakSlider label="Header logo" value={t.logoSize} min={36} max={96} step={2} unit="px"
        onChange={(v)=>setTweak('logoSize', v)} />
      <TweakSection label="Type" />
      <TweakRadio label="Display font" value={t.displayFont}
        options={['Oswald','Teko','Anton']}
        onChange={(v)=>setTweak('displayFont', v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Button shape" value={t.btnStyle}
        options={['angular','square','rounded']}
        onChange={(v)=>setTweak('btnStyle', v)} />
      <TweakRadio label="Section spacing" value={t.density}
        options={['compact','regular','spacious']}
        onChange={(v)=>setTweak('density', v)} />
      <TweakToggle label="Top info bar" value={t.showTopbar}
        onChange={(v)=>setTweak('showTopbar', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);