/* DCApe — Tweaks panel app (controls the vanilla page via :root attrs/vars) */
const DCAPE_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "jungle",
  "bananas": true,
  "neonGlow": false,
  "ctaColor": "#FFD700"
}/*EDITMODE-END*/;

const CTA_GRAD = {
  "#FFD700": ["linear-gradient(96deg,#FFD700,#FFC02E)", "linear-gradient(96deg,#FFE34D,#FFCE4A)", "#241600"],
  "#FF8A3D": ["linear-gradient(96deg,#FF9A4D,#FF7A1F)", "linear-gradient(96deg,#FFAE63,#FF8A37)", "#2A1200"],
  "#37FFB0": ["linear-gradient(96deg,#5BFFC2,#23E69A)", "linear-gradient(96deg,#73FFCF,#39F2AC)", "#062017"]
};

function DCApeTweaks(){
  const [t, setTweak] = useTweaks(DCAPE_TWEAKS);
  const root = document.documentElement;

  React.useEffect(()=>{ root.setAttribute('data-palette', t.palette); }, [t.palette]);
  React.useEffect(()=>{ if(window.DCApeBananas) window.DCApeBananas(!!t.bananas); }, [t.bananas]);
  React.useEffect(()=>{ root.setAttribute('data-glow', t.neonGlow ? 'on' : 'off'); }, [t.neonGlow]);
  React.useEffect(()=>{
    const g = CTA_GRAD[t.ctaColor] || CTA_GRAD["#FFD700"];
    root.style.setProperty('--grad-banana', g[0]);
    root.style.setProperty('--grad-banana-hover', g[1]);
    root.style.setProperty('--cta-ink', g[2]);
  }, [t.ctaColor]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Klimat / Mood" />
      <TweakRadio label="Paleta" value={t.palette}
        options={[{value:'jungle',label:'Dżungla'},{value:'neon',label:'Neon'}]}
        onChange={(v)=>setTweak('palette', v)} />
      <TweakToggle label="Poświata neonowa" value={t.neonGlow}
        onChange={(v)=>setTweak('neonGlow', v)} />
      <TweakColor label="Kolor CTA" value={t.ctaColor}
        options={["#FFD700","#FF8A3D","#37FFB0"]}
        onChange={(v)=>setTweak('ctaColor', v)} />
      <TweakSection label="Zabawa / Fun" />
      <TweakToggle label="Spadające banany 🍌" value={t.bananas}
        onChange={(v)=>setTweak('bananas', v)} />
      <TweakButton label="Zrzuć stado bananów" onClick={()=>window.DCApeBurst && window.DCApeBurst(20)} />
    </TweaksPanel>
  );
}

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