/* HOPE — Tweaks app
   Mounts the Tweaks panel and drives the page via CSS vars + data attributes.
   The vanilla hero canvas (main.js) reads --accent-h and [data-hero]. */

const HOPE_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "mesh",
  "accent": "296",
  "glow": 1,
  "navStyle": "blur"
}/*EDITMODE-END*/;

const HERO_LABELS = {
  mesh: "Malha de conexão",
  aurora: "Aurora",
  geometric: "Geométrico",
  topographic: "Topográfico",
};

function applyHope(t) {
  const root = document.documentElement;
  root.setAttribute("data-hero", t.hero);
  root.style.setProperty("--accent-h", String(t.accent));
  root.style.setProperty("--glow", String(t.glow));
}

function HopeTweaks() {
  const [t, setTweak] = useTweaks(HOPE_DEFAULTS);

  React.useEffect(() => { applyHope(t); }, [t.hero, t.accent, t.glow]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakSelect
        label="Tratamento visual"
        value={t.hero}
        options={[
          { value: "mesh", label: HERO_LABELS.mesh },
          { value: "aurora", label: HERO_LABELS.aurora },
          { value: "geometric", label: HERO_LABELS.geometric },
          { value: "topographic", label: HERO_LABELS.topographic },
        ]}
        onChange={(v) => setTweak("hero", v)}
      />

      <TweakSection label="Acento" />
      <TweakColor
        label="Cor do acento"
        value={accentToHex(t.accent)}
        options={["#7C3AED", "#6366F1", "#2563EB", "#0EA5A4", "#DB2777"]}
        onChange={(hex) => setTweak("accent", hexToHue(hex))}
      />
      <TweakSlider
        label="Intensidade do glow"
        value={t.glow}
        min={0} max={1.6} step={0.1}
        onChange={(v) => setTweak("glow", v)}
      />
    </TweaksPanel>
  );
}

/* map curated hexes to a hue our oklch system uses, and back for the swatch */
const HEX_HUE = {
  "#7C3AED": "296", // roxo (default)
  "#6366F1": "277", // indigo
  "#2563EB": "263", // azul
  "#0EA5A4": "190", // teal
  "#DB2777": "355", // magenta
};
const HUE_HEX = Object.fromEntries(Object.entries(HEX_HUE).map(([k, v]) => [v, k]));
function hexToHue(hex) { return HEX_HUE[hex] || "296"; }
function accentToHex(hue) { return HUE_HEX[String(hue)] || "#7C3AED"; }

(function mount() {
  function go() {
    const el = document.getElementById("tweaks-root");
    if (!el || !window.TweaksPanel || !window.useTweaks) { return setTimeout(go, 40); }
    applyHope(HOPE_DEFAULTS);
    ReactDOM.createRoot(el).render(<HopeTweaks />);
  }
  go();
})();