/* KNGHT Doctrine 2026 — Tweaks panel (v3: electric blue + geosphere loop config) */
const KNGHT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "blue": "#0B55F6",
  "field": "sphere",
  "look": "glassy",
  "rotation": "orbit",
  "speed": 1,
  "lineWeight": 1,
  "glow": 0,
  "motion": true
}/*EDITMODE-END*/;

function KnghtTweaks() {
  const [t, setTweak] = useTweaks(KNGHT_TWEAK_DEFAULTS);

  React.useEffect(() => {
    if (window.KNGHT) {
      window.KNGHT.applyTheme({
        blue: t.blue, field: t.field, look: t.look, motion: t.motion,
        speed: t.speed, rotation: t.rotation, lineScale: t.lineWeight, glow: t.glow
      }, true);
    }
  }, [t.blue, t.field, t.look, t.motion, t.speed, t.rotation, t.lineWeight, t.glow]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakColor
        label="Blue"
        value={t.blue}
        options={['#0B55F6', '#1F6FFF', '#0030C8']}
        onChange={(v) => setTweak('blue', v)}
      />
      <TweakSection label="Sphere loop" />
      <TweakRadio
        label="Look"
        value={t.look}
        options={['glassy', 'wireframe']}
        onChange={(v) => setTweak('look', v)}
      />
      <TweakRadio
        label="Hero field"
        value={t.field}
        options={['sphere', 'off']}
        onChange={(v) => setTweak('field', v)}
      />
      <TweakRadio
        label="Rotation"
        value={t.rotation}
        options={['orbit', 'top-down']}
        onChange={(v) => setTweak('rotation', v)}
      />
      <TweakSlider
        label="Evolution speed"
        min={0.3} max={2.2} step={0.1}
        value={t.speed}
        onChange={(v) => setTweak('speed', v)}
      />
      <TweakSection label="Wireframe detail" />
      <TweakSlider
        label="Line weight"
        min={0.5} max={2.5} step={0.1}
        value={t.lineWeight}
        onChange={(v) => setTweak('lineWeight', v)}
      />
      <TweakSlider
        label="Edge glow"
        min={0} max={1} step={0.05}
        value={t.glow}
        onChange={(v) => setTweak('glow', v)}
      />
      <TweakToggle
        label="Motion"
        value={t.motion}
        onChange={(v) => setTweak('motion', v)}
      />
    </TweaksPanel>
  );
}

const knghtTweaksRoot = document.createElement('div');
knghtTweaksRoot.id = 'knght-tweaks-root';
document.body.appendChild(knghtTweaksRoot);
ReactDOM.createRoot(knghtTweaksRoot).render(<KnghtTweaks />);