// tweaks-store.jsx — shared tweak store for the INXM site.
//
// The Tweaks panel and the CompilePipeline "How Orchestrator works" demo
// live in separate React roots, so tweak values can't flow through props.
// This module owns a tiny framework-agnostic pub/sub store on `window`,
// exposes a `useINXMTweaks()` React hook both trees subscribe to, and
// persists edits through the host protocol (same __edit_mode_set_keys
// message useTweaks posts — the host rewrites the EDITMODE block below).
//
// Load order (see index.html): tweaks-panel.jsx → tweaks-store.jsx →
// component bundles → Page.jsx → mount.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hiwFraming": "video",
  "hiwPace": 2.4,
  "hiwAutocycle": true,
  "hiwSnippets": true,
  "hiwAccent": "#FF5900"
}/*EDITMODE-END*/;

const __inxmStore = {
  values: { ...TWEAK_DEFAULTS },
  subs: new Set(),
  setTweak(keyOrEdits, val) {
    const edits =
      typeof keyOrEdits === "object" && keyOrEdits !== null
        ? keyOrEdits
        : { [keyOrEdits]: val };
    __inxmStore.values = { ...__inxmStore.values, ...edits };
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
    } catch (e) {
      /* not in host — in-memory only */
    }
    __inxmStore.subs.forEach((fn) => fn(__inxmStore.values));
  },
  subscribe(fn) {
    __inxmStore.subs.add(fn);
    return () => __inxmStore.subs.delete(fn);
  },
};

window.__inxmTweakStore = __inxmStore;
window.setINXMTweak = __inxmStore.setTweak;
window.useINXMTweaks = function useINXMTweaks() {
  const [v, setV] = React.useState(__inxmStore.values);
  React.useEffect(() => __inxmStore.subscribe(setV), []);
  return v;
};

// ── The panel ────────────────────────────────────────────────────────────────
// Built from the tweaks-panel.jsx helpers. Controls the "How Orchestrator
// works" demo directly. Default framing is "video" so the demo already
// mirrors the explainer film with Tweaks off.
function INXMTweaksPanel() {
  const t = window.useINXMTweaks();
  const set = window.setINXMTweak;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="How Orchestrator works" />
      <TweakRadio
        label="Step story"
        value={t.hiwFraming}
        options={[
          { value: "video", label: "Video" },
          { value: "lifecycle", label: "Lifecycle" },
        ]}
        onChange={(v) => set("hiwFraming", v)}
      />
      <TweakSlider
        label="Scene pace"
        value={t.hiwPace}
        min={1.2}
        max={4.5}
        step={0.1}
        unit="s"
        onChange={(v) => set("hiwPace", v)}
      />
      <TweakToggle
        label="Auto-cycle"
        value={t.hiwAutocycle}
        onChange={(v) => set("hiwAutocycle", v)}
      />
      <TweakToggle
        label="Case snippets"
        value={t.hiwSnippets}
        onChange={(v) => set("hiwSnippets", v)}
      />
      <TweakSection label="Accent" />
      <TweakRadio
        label="Colour"
        value={t.hiwAccent}
        options={[
          { value: "#FF5900", label: "Orange" },
          { value: "#2A6FDB", label: "Blue" },
          { value: "#1F8A5B", label: "Green" },
        ]}
        onChange={(v) => set("hiwAccent", v)}
      />
    </TweaksPanel>
  );
}

window.INXMTweaksPanel = INXMTweaksPanel;