/* Beyond Control — Tweaks (theme · accent · motion) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": ["#7B5FA3", "#5C4380", "#9B7FC3"],
  "motion": "calm",
  "grain": true
}/*EDITMODE-END*/;

function hexToRgb(hex) {
  let h = String(hex).replace("#", "");
  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
  const n = parseInt(h.slice(0, 6), 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

// pick a readable foreground (near-black or white) for a given accent
function readableInk(hex) {
  const [r, g, b] = hexToRgb(hex);
  const L = (0.299 * r + 0.587 * g + 0.114 * b);
  return L > 150 ? "#15181e" : "#ffffff";
}

function applyTheme(t) {
  const root = document.documentElement;
  root.setAttribute("data-theme", t.theme);
  const acc = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent, t.accent];
  root.style.setProperty("--accent", acc[0]);
  root.style.setProperty("--accent-deep", acc[1] || acc[0]);
  root.style.setProperty("--accent-bright", acc[2] || acc[0]);
  root.style.setProperty("--accent-ink", readableInk(acc[0]));
  const [r, g, b] = hexToRgb(acc[0]);
  root.style.setProperty("--accent-tint", `rgba(${r}, ${g}, ${b}, ${t.theme === "dark" ? 0.16 : 0.1})`);
  root.setAttribute("data-grain", t.grain ? "on" : "off");
  // persist for no-flash reload
  try { localStorage.setItem("bc_tweaks", JSON.stringify(t)); } catch (e) {}
  window.__bcMotion = t.motion;
  window.dispatchEvent(new CustomEvent("bc:themechange"));
}

function App() {
  const [t, setTweak] = useTweaks(
    (function () {
      try {
        const saved = JSON.parse(localStorage.getItem("bc_tweaks"));
        if (saved) return Object.assign({}, TWEAK_DEFAULTS, saved);
      } catch (e) {}
      return TWEAK_DEFAULTS;
    })()
  );

  React.useEffect(() => { applyTheme(t); }, [t.theme, JSON.stringify(t.accent), t.grain]);
  React.useEffect(() => {
    window.__bcMotion = t.motion;
    window.dispatchEvent(new CustomEvent("bc:motionchange", { detail: { value: t.motion } }));
  }, [t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio
        label="Mode"
        value={t.theme}
        options={[{ value: "light", label: "Bone" }, { value: "dark", label: "Field" }]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={[
          ["#7B5FA3", "#5C4380", "#9B7FC3"],
          ["#2a55a8", "#1b386f", "#4f7dd4"],
          ["#2f5fd0", "#1d3c86", "#6088e6"],
          ["#42566f", "#28384c", "#6c809a"],
          ["#1f7a6b", "#114a40", "#3aa491"],
          ["#5a45c8", "#352a88", "#8a78ec"],
          ["#7a3fb5", "#4f297a", "#a472dc"],
          ["#a23a8e", "#6e2660", "#c46fb0"],
          ["#b4632a", "#7d401a", "#d68a4f"]
        ]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Living system" />
      <TweakRadio
        label="Motion"
        value={t.motion}
        options={[{ value: "off", label: "Off" }, { value: "calm", label: "Calm" }, { value: "lively", label: "Lively" }]}
        onChange={(v) => setTweak("motion", v)}
      />
      <TweakToggle label="Paper grain" value={t.grain} onChange={(v) => setTweak("grain", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<App />);