/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakRadio */

/* Acentos dentro de la disciplina cromática de la 02: un único color de señal.
   Cada opción reescribe el azul base + sus derivados (soft/deep) y la aurora. */
const ACCENTS = {
  "Azul 02":   ["#2E8FF5", "#9DB4FF", "#1E6FD0"],   /* el de la Home 02 */
  "Cobalto":   ["#3D6BFF", "#9FB0FF", "#274FD6"],
  "Teal frío": ["#1FA6C4", "#8BD6E4", "#127E97"],
  "Ámbar":     ["#D98B3A", "#F0C089", "#B36C24"]
};
const ACC_LIST = Object.values(ACCENTS);

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#2E8FF5", "#9DB4FF", "#1E6FD0"],
  "motion": true,
  "grain": true,
  "cursorStyle": "Flecha"
}/*EDITMODE-END*/;

const CURSOR_MAP = { "Mira": "mira", "Punto": "punto", "Foco": "foco", "Flecha": "flecha", "Anillo": "anillo", "Disco": "disco" };

function applyTweaks(t) {
  const root = document.documentElement;
  const a = Array.isArray(t.accent) ? t.accent : ACCENTS["Azul 02"];
  root.style.setProperty("--accent", a[0]);
  root.style.setProperty("--accent-soft", a[1]);
  root.style.setProperty("--accent-deep", a[2]);
  /* aurora azul-tonal a juego (atmósfera, no protagonista) */
  root.style.setProperty("--au1", a[0]);
  root.style.setProperty("--au2", a[2]);
  root.style.setProperty("--au3", a[1]);

  root.setAttribute("data-motion", t.motion ? "on" : "off");
  root.setAttribute("data-grain", t.grain ? "on" : "off");
  const fine = matchMedia("(hover:hover) and (pointer:fine)").matches;
  root.setAttribute("data-cursor", fine ? "on" : "off");
  root.setAttribute("data-cstyle", CURSOR_MAP[t.cursorStyle] || "punto");
  const cur = document.getElementById("cursor");
  if (cur) cur.style.display = fine ? "" : "none";

  /* la constelación relee sus colores en caliente */
  if (typeof window.intragentsRetheme === "function") window.intragentsRetheme(a);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t.accent, t.motion, t.grain, t.cursorStyle]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Acento de señal" />
      <TweakColor
        label="Color"
        value={t.accent}
        options={ACC_LIST}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Experiencia" />
      <TweakRadio label="Cursor" value={t.cursorStyle} options={["Mira", "Punto", "Foco", "Flecha", "Anillo", "Disco"]} onChange={(v) => setTweak("cursorStyle", v)} />
      <TweakToggle label="Movimiento (aurora, marquee, reveals)" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      <TweakToggle label="Grano de película" value={t.grain} onChange={(v) => setTweak("grain", v)} />
    </TweaksPanel>
  );
}

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