/* ============================================================
   KIMIPACK Tweaks — warm homepage design controls (React)
   Mounts into #tweaks-root, drives the vanilla site via DOM.
   ============================================================ */
const KP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "mesopotamia",
  "theme": "dark",
  "motion": "full",
  "instrument": "roundflask",
  "rotation": 0.2
}/*EDITMODE-END*/;

const INSTRUMENTS = {
  roundflask:  "ROUND-BOTTOM FLASK",
  erlenmeyer:  "ERLENMEYER FLASK",
  beaker:      "GRIFFIN BEAKER",
  volumetric:  "VOLUMETRIC FLASK"
};

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

  React.useEffect(()=>{
    root.setAttribute("data-palette", t.palette);
    try{ localStorage.setItem("kp-palette", t.palette);}catch(e){}
    if(window.KP){ window.KP.palette=t.palette; }
  }, [t.palette]);

  React.useEffect(()=>{
    root.setAttribute("data-theme", t.theme);
    try{ localStorage.setItem("kp-theme", t.theme);}catch(e){}
    if(window.KP){ window.KP.theme=t.theme; }
  }, [t.theme]);

  React.useEffect(()=>{
    document.body.classList.toggle("no-scan", t.motion!=="full");
  }, [t.motion]);

  React.useEffect(()=>{
    if(window.KP_applyInstrument) window.KP_applyInstrument(t.instrument, INSTRUMENTS[t.instrument]);
  }, [t.instrument]);

  React.useEffect(()=>{
    if(window.KP && window.KP.hero && window.KP.hero.setSpeed) window.KP.hero.setSpeed(t.rotation);
  }, [t.rotation]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Colour scheme" />
      <TweakRadio label="Palette" value={t.palette}
        options={[
          {value:"mesopotamia", label:"Turquoise"},
          {value:"emerald",     label:"Emerald"},
          {value:"saffron",     label:"Saffron"}
        ]}
        onChange={(v)=>setTweak("palette", v)} />
      <TweakRadio label="Mode" value={t.theme} options={["dark","light"]}
        onChange={(v)=>setTweak("theme", v)} />

      <TweakSection label="Motion" />
      <TweakRadio label="Animation" value={t.motion}
        options={[
          {value:"full", label:"Full"},
          {value:"calm", label:"Calm"}
        ]}
        onChange={(v)=>setTweak("motion", v)} />

      <TweakSection label="Hero showpiece" />
      <TweakSelect label="Instrument" value={t.instrument}
        options={[
          {value:"roundflask", label:"Round-bottom flask"},
          {value:"erlenmeyer", label:"Erlenmeyer flask"},
          {value:"beaker",     label:"Griffin beaker"},
          {value:"volumetric", label:"Volumetric flask"}
        ]}
        onChange={(v)=>setTweak("instrument", v)} />
      <TweakSlider label="Rotation speed" value={t.rotation} min={0} max={0.5} step={0.02}
        onChange={(v)=>setTweak("rotation", v)} />
    </TweaksPanel>
  );
}

(function mountTweaks(){
  const el = document.getElementById("tweaks-root");
  if(!el || !window.useTweaks){ return setTimeout(mountTweaks, 60); }
  ReactDOM.createRoot(el).render(<KPTweaksApp/>);
})();