// tweaks.jsx — Tweaks panel + global tweak store for the Cockpit deck.
// Live values broadcast on `window.__tweaks` and via a 'tweakschange' CustomEvent
// so any slide can subscribe with the useTweakStore() hook below.

(function () {
  const DEFAULTS = window.TWEAK_DEFAULTS || {};
  // Initialize live store
  window.__tweaks = Object.assign({}, DEFAULTS, window.__tweaks || {});

  // Hook: subscribe to live tweak updates and re-render
  window.useTweakStore = function useTweakStore() {
    const [, force] = React.useReducer(x => x + 1, 0);
    React.useEffect(() => {
      const onChange = () => force();
      window.addEventListener('tweakschange', onChange);
      return () => window.removeEventListener('tweakschange', onChange);
    }, []);
    return window.__tweaks;
  };
})();

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

  // Mirror to global live store + broadcast on every render
  React.useEffect(() => {
    window.__tweaks = t;
    window.dispatchEvent(new CustomEvent('tweakschange'));
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Slide 03 — Principles" />

      <TweakSlider
        label="Principles bar height"
        value={t.s3BarHeight}
        min={70}
        max={220}
        step={2}
        unit="px"
        onChange={(v) => setTweak('s3BarHeight', v)}
      />

      <TweakSlider
        label="Title size"
        value={t.s3TitleSize}
        min={56}
        max={120}
        step={2}
        unit="px"
        onChange={(v) => setTweak('s3TitleSize', v)}
      />

      <TweakSlider
        label="Intro paragraph size"
        value={t.s3IntroSize}
        min={20}
        max={36}
        step={1}
        unit="px"
        onChange={(v) => setTweak('s3IntroSize', v)}
      />

      <TweakSection label="Slide 03 — Spacing" />

      <TweakSlider
        label="Gap above '// HOW WE'LL SPEND…'"
        value={t.s3IntroMarginTop}
        min={8}
        max={64}
        step={2}
        unit="px"
        onChange={(v) => setTweak('s3IntroMarginTop', v)}
      />

      <TweakSlider
        label="Gap above bar"
        value={t.s3BarMarginTop}
        min={4}
        max={48}
        step={2}
        unit="px"
        onChange={(v) => setTweak('s3BarMarginTop', v)}
      />

      <TweakSlider
        label="Gap above Pareto callout"
        value={t.s3ParetoMarginTop}
        min={8}
        max={80}
        step={2}
        unit="px"
        onChange={(v) => setTweak('s3ParetoMarginTop', v)}
      />

      <TweakSlider
        label="Pareto vertical padding"
        value={t.s3ParetoPadY}
        min={10}
        max={48}
        step={2}
        unit="px"
        onChange={(v) => setTweak('s3ParetoPadY', v)}
      />

      <TweakSlider
        label="Pareto horizontal padding"
        value={t.s3ParetoPadX}
        min={16}
        max={56}
        step={2}
        unit="px"
        onChange={(v) => setTweak('s3ParetoPadX', v)}
      />

      <TweakButton
        onClick={() => {
          // Reset to defaults
          setTweak(Object.assign({}, window.TWEAK_DEFAULTS));
        }}
      >
        Reset slide 03
      </TweakButton>
    </TweaksPanel>
  );
}

// Mount the tweaks panel into its own root, separate from the slides
(function mountTweaks() {
  const root = document.createElement('div');
  root.id = '__cockpit_tweaks_root';
  document.body.appendChild(root);
  ReactDOM.createRoot(root).render(<CockpitTweaks />);
})();