/* Kybercel — Tweaks: accent color, display font, motion */

const KYB_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "displayFont": "Space Grotesk",
  "atmosphere": "Cinematic",
  "motion": true
}/*EDITMODE-END*/;

const KYB_ACCENTS = {
  amber: { acc: "oklch(0.795 0.142 67)",  dim: "oklch(0.795 0.142 67 / 0.15)",  line: "oklch(0.795 0.142 67 / 0.36)",  ink: "oklch(0.20 0.05 60)",   hover: "oklch(0.86 0.145 72)" },
  green: { acc: "oklch(0.86 0.185 150)",  dim: "oklch(0.86 0.185 150 / 0.14)",  line: "oklch(0.86 0.185 150 / 0.34)",  ink: "oklch(0.22 0.04 150)",  hover: "oklch(0.9 0.185 150)" },
  blue:  { acc: "oklch(0.78 0.135 240)",  dim: "oklch(0.78 0.135 240 / 0.14)",  line: "oklch(0.78 0.135 240 / 0.34)",  ink: "oklch(0.18 0.04 245)",  hover: "oklch(0.83 0.135 240)" },
  mono:  { acc: "oklch(0.97 0.004 255)",  dim: "oklch(0.97 0.004 255 / 0.12)",  line: "oklch(0.97 0.004 255 / 0.28)",  ink: "oklch(0.16 0.006 255)",  hover: "oklch(1 0 0)" }
};

const KYB_ACCENT_OPTS = ["amber", "green", "blue", "mono"];
const KYB_ACCENT_SWATCH = { amber: "#f0b35a", green: "#7fe6a0", blue: "#7bb8f5", mono: "#f5f5f5" };

function KybTweaksApp() {
  const [t, setTweak] = useTweaks(KYB_TWEAK_DEFAULTS);
  const root = document.documentElement;
  const a = KYB_ACCENTS[t.accent] || KYB_ACCENTS.amber;

  React.useEffect(() => {
    root.style.setProperty("--acc", a.acc);
    root.style.setProperty("--acc-dim", a.dim);
    root.style.setProperty("--acc-line", a.line);
    root.style.setProperty("--acc-ink", a.ink);
    root.style.setProperty("--acc-hi", a.hover);
    document.querySelectorAll(".btn-primary").forEach(function (b) { b.style.setProperty("--_hov", a.hover); });
  }, [t.accent]);

  React.useEffect(() => {
    root.style.setProperty("--font-display", '"' + t.displayFont + '", system-ui, sans-serif');
  }, [t.displayFont]);

  React.useEffect(() => {
    const cls = { Cinematic: "", Subtle: "atmos-subtle", Off: "atmos-off" };
    document.body.classList.remove("atmos-subtle", "atmos-off");
    const c = cls[t.atmosphere];
    if (c) document.body.classList.add(c);
  }, [t.atmosphere]);

  React.useEffect(() => {
    document.body.classList.toggle("no-motion", !t.motion);
    if (!t.motion) {
      document.querySelectorAll('[style*="opacity: 0"], [style*="opacity:0"]').forEach(function (el) {
        el.style.opacity = "1";
        el.style.transform = "none";
      });
    }
  }, [t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Accent" />
      <TweakColor label="Signal color" value={KYB_ACCENT_SWATCH[t.accent]}
        options={KYB_ACCENT_OPTS.map(function (k) { return KYB_ACCENT_SWATCH[k]; })}
        onChange={function (hex) {
          const key = KYB_ACCENT_OPTS.find(function (k) { return KYB_ACCENT_SWATCH[k] === hex; }) || "green";
          setTweak("accent", key);
        }} />
      <TweakSection label="Typography" />
      <TweakSelect label="Display font" value={t.displayFont}
        options={["Space Grotesk", "Hanken Grotesk", "JetBrains Mono"]}
        onChange={function (v) { setTweak("displayFont", v); }} />
      <TweakSection label="Atmosphere" />
      <TweakSelect label="Lighting" value={t.atmosphere}
        options={["Cinematic", "Subtle", "Off"]}
        onChange={function (v) { setTweak("atmosphere", v); }} />
      <TweakSection label="Motion" />
      <TweakToggle label="Reveal animations" value={t.motion}
        onChange={function (v) { setTweak("motion", v); }} />
    </TweaksPanel>
  );
}

(function mountKybTweaks() {
  const el = document.getElementById("kyb-tweaks-root");
  if (el) ReactDOM.createRoot(el).render(<KybTweaksApp />);
})();