/* Krisify Tweaks — mount React TweaksPanel on every page.
   Reads/writes via window.Krisify (localStorage) so state survives navigation. */

const { useState, useEffect } = React;

function TweaksApp() {
  const [t, setT] = useState(() => window.Krisify.getTweaks());

  const update = (key, value) => {
    let next;
    if (typeof key === "object") next = { ...t, ...key };
    else next = { ...t, [key]: value };
    setT(next);
    window.Krisify.setTweak(next);
  };

  // ensure HTML attrs sync when other pages updated state
  useEffect(() => {
    const onStorage = (e) => {
      if (e.key === "krisify.tweaks.v1") setT(window.Krisify.getTweaks());
    };
    window.addEventListener("storage", onStorage);
    return () => window.removeEventListener("storage", onStorage);
  }, []);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Appearance" />
      <TweakToggle
        label="Dark mode"
        value={t.dark}
        onChange={(v) => update("dark", v)}
      />
      <TweakColor
        label="Accent"
        value={t.accent === "blue" ? "#0071e3" : t.accent === "warm" ? "#d97757" : "#1d1d1f"}
        options={["#0071e3", "#1d1d1f", "#d97757"]}
        onChange={(hex) => {
          const map = { "#0071e3": "blue", "#1d1d1f": "mono", "#d97757": "warm" };
          update("accent", map[hex] || "blue");
        }}
      />
      <TweakRadio
        label="Heading font"
        value={t.headfont}
        options={["inter", "sfpro", "serif"]}
        onChange={(v) => update("headfont", v)}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Animation"
        value={t.anim}
        options={["subtle", "playful", "heavy"]}
        onChange={(v) => update("anim", v)}
      />

      <TweakSection label="Homepage" />
      <TweakSelect
        label="Hero variant"
        value={String(t.heroVariant ?? 0)}
        options={[
          { value: "0", label: "Pipeline diagram" },
          { value: "1", label: "Headline + dashboard" },
          { value: "2", label: "Centered minimal" },
        ]}
        onChange={(v) => update("heroVariant", parseInt(v, 10))}
      />
    </TweaksPanel>
  );
}

(function mount() {
  function go() {
    const host = document.createElement("div");
    host.id = "tweaks-root";
    document.body.appendChild(host);
    const root = ReactDOM.createRoot(host);
    root.render(<TweaksApp />);
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", go);
  } else {
    go();
  }
})();