/* GridLink — Tweaks app (mounts only the panel; rest of site is vanilla) */
(function () {
  "use strict";

  var TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#38e8a0",
    "motion": true
  }/*EDITMODE-END*/;

  var ACCENTS = [
    { hex: "#38e8a0", deep: "#14b178" }, // signal green
    { hex: "#5fb6ff", deep: "#2b7fd6" }, // electric blue
    { hex: "#c7a3ff", deep: "#8b5cf0" }, // violet
    { hex: "#ffb454", deep: "#e07d18" }  // amber
  ];

  function hexToRgb(hex) {
    var h = hex.replace("#", "");
    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
    var n = parseInt(h, 16);
    return ((n >> 16) & 255) + "," + ((n >> 8) & 255) + "," + (n & 255);
  }

  function applyAccent(hex) {
    var match = ACCENTS.filter(function (a) { return a.hex === hex; })[0];
    var deep = match ? match.deep : hex;
    var rgb = hexToRgb(hex);
    var s = document.documentElement.style;
    s.setProperty("--accent", hex);
    s.setProperty("--accent-deep", deep);
    s.setProperty("--accent-soft", "rgba(" + rgb + ",0.12)");
    s.setProperty("--accent-line", "rgba(" + rgb + ",0.35)");
    window.__accentRGB = rgb;
  }

  function applyMotion(on) {
    if (window.GridLink && window.GridLink.setMotion) window.GridLink.setMotion(on);
  }

  function applyAll(t) {
    applyAccent(t.accent);
    applyMotion(t.motion);
  }

  function mount() {
    if (!window.React || !window.useTweaks || !window.TweaksPanel) { setTimeout(mount, 60); return; }
    var React = window.React;
    var h = React.createElement;

    function App() {
      var tk = window.useTweaks(TWEAK_DEFAULTS);
      var t = tk[0], setTweak = tk[1];
      React.useEffect(function () { applyAll(t); }, [t.accent, t.motion]);
      return h(window.TweaksPanel, { title: "Tweaks" },
        h(window.TweakSection, { label: "Brand" }),
        h(window.TweakColor, {
          label: "Accent",
          value: t.accent,
          options: ACCENTS.map(function (a) { return a.hex; }),
          onChange: function (v) { setTweak("accent", v); }
        }),
        h(window.TweakSection, { label: "Motion" }),
        h(window.TweakToggle, {
          label: "Animated network",
          value: t.motion,
          onChange: function (v) { setTweak("motion", v); }
        })
      );
    }

    var root = document.createElement("div");
    root.id = "tweaks-root";
    document.body.appendChild(root);
    window.ReactDOM.createRoot(root).render(h(App));
  }

  // apply default values immediately so the site reflects them pre-mount
  applyAll(TWEAK_DEFAULTS);

  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount);
  else mount();
})();