// Inkwell tweaks panel — visible when user toggles Tweaks in the toolbar.
// Adjusts knobs on window.GAME_STATE.cfg, plus a few cosmetic options.

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gravity": 2100,
  "jumpV": -935,
  "moveMax": 470,
  "dashV": 720,
  "rivalAggro": 0.7,
  "inkWobble": 1,
  "difficulty": "normal",
  "showMinimap": true,
  "showGrid": true,
  "godMode": false
}/*EDITMODE-END*/;

function InkwellTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live
  useEffect(() => {
    const s = window.GAME_STATE;
    if (!s) return;
    s.cfg.gravity = t.gravity;
    s.cfg.jumpV = t.jumpV;
    s.cfg.moveMax = t.moveMax;
    s.cfg.dashV = t.dashV;
    s.cfg.rivalAggro = t.rivalAggro;
    s.cfg.inkWobble = t.inkWobble;
    s.cfg.difficulty = t.difficulty;
    s.cfg.godMode = t.godMode;

    // difficulty preset
    if (t.difficulty === 'easy') {
      s.cfg.coyote = 0.18;
      s.cfg.jumpBuffer = 0.20;
    } else if (t.difficulty === 'hard') {
      s.cfg.coyote = 0.05;
      s.cfg.jumpBuffer = 0.06;
    } else {
      s.cfg.coyote = 0.10;
      s.cfg.jumpBuffer = 0.12;
    }

    const mini = document.getElementById('minimap');
    if (mini) mini.style.display = t.showMinimap ? 'block' : 'none';

    document.getElementById('stage').style.backgroundImage =
      t.showGrid
        ? 'radial-gradient(rgba(28,20,16,0.08) 1px, transparent 1px), radial-gradient(rgba(28,20,16,0.08) 1px, transparent 1px)'
        : 'none';
  }, [t]);

  // god mode: keep invuln topped up
  useEffect(() => {
    if (!t.godMode) return;
    const id = setInterval(() => {
      const s = window.GAME_STATE;
      if (s && s.player) s.player.invulnT = 0.5;
    }, 200);
    return () => clearInterval(id);
  }, [t.godMode]);

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const Sl = window.TweakSlider;
  const Tg = window.TweakToggle;
  const Rd = window.TweakRadio;
  const Bt = window.TweakButton;

  return (
    <TP title="Tweaks">
      <TS label="Movement" />
      <Sl label="Run speed" value={t.moveMax}
        min={140} max={680} step={10}
        onChange={(v) => setTweak('moveMax', v)} unit=" px/s" />
      <Sl label="Jump power" value={-t.jumpV}
        min={400} max={1200} step={10}
        onChange={(v) => setTweak('jumpV', -v)} />
      <Sl label="Gravity" value={t.gravity}
        min={800} max={3600} step={50}
        onChange={(v) => setTweak('gravity', v)} />
      <Sl label="Dash speed" value={t.dashV}
        min={300} max={1400} step={20}
        onChange={(v) => setTweak('dashV', v)} unit=" px/s" />

      <TS label="Difficulty" />
      <Sl label="Rival aggression" value={t.rivalAggro}
        min={0.2} max={1} step={0.05}
        onChange={(v) => setTweak('rivalAggro', v)} />
      <Rd label="Forgiveness"
        value={t.difficulty}
        options={['easy', 'normal', 'hard']}
        onChange={(v) => setTweak('difficulty', v)} />
      <Tg label="God mode"
        value={t.godMode}
        onChange={(v) => setTweak('godMode', v)} />

      <TS label="Aesthetic" />
      <Sl label="Ink wobble" value={t.inkWobble}
        min={0} max={3} step={0.1}
        onChange={(v) => setTweak('inkWobble', v)} />
      <Tg label="Paper grid"
        value={t.showGrid}
        onChange={(v) => setTweak('showGrid', v)} />
      <Tg label="Minimap"
        value={t.showMinimap}
        onChange={(v) => setTweak('showMinimap', v)} />

      <TS label="Actions" />
      <Bt label="Restart game"
        onClick={() => {
          const btn = document.getElementById('play-btn');
          if (btn) btn.click();
          else document.getElementById('retry-btn')?.click();
        }} />
    </TP>
  );
}

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