// Tweaks app — palette / scale / mode / cover variants
// Wires CSS custom properties on :root from a small set of presets.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "deep",
  "mode": "light",
  "scale": 100,
  "cover": "editorial"
}/*EDITMODE-END*/;

const PALETTES = {
  deep: {
    "--c-primary": "#0A2540",
    "--c-secondary": "#00D4A0",
    "--c-accent": "#F5A623",
    "--c-bg-dark": "#0F1729",
  },
  obsidian: {
    "--c-primary": "#111827",
    "--c-secondary": "#10B981",
    "--c-accent": "#FBBF24",
    "--c-bg-dark": "#0B0F19",
  },
  consult: {
    "--c-primary": "#1B365D",
    "--c-secondary": "#5B8DEF",
    "--c-accent": "#E07A5F",
    "--c-bg-dark": "#13233F",
  },
  graphite: {
    "--c-primary": "#1F2937",
    "--c-secondary": "#22D3B8",
    "--c-accent": "#F97066",
    "--c-bg-dark": "#0E141B",
  },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement;
    const p = PALETTES[t.palette] || PALETTES.deep;
    Object.entries(p).forEach(([k, v]) => r.style.setProperty(k, v));
  }, [t.palette]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--scale", t.scale / 100);
    document.documentElement.style.fontSize = `${16 * (t.scale / 100)}px`;
  }, [t.scale]);

  React.useEffect(() => {
    document.body.dataset.mode = t.mode;
    if (t.mode === "dark") {
      document.body.style.setProperty("background", "#0F1729");
    } else {
      document.body.style.removeProperty("background");
    }
    // Apply dark class to all non-divider non-tech-bg slides if mode=dark
    const slides = document.querySelectorAll("section.slide:not(.block-divider):not(.tech-bg)");
    slides.forEach(s => {
      if (t.mode === "dark") s.classList.add("dark");
      else s.classList.remove("dark");
    });
  }, [t.mode]);

  React.useEffect(() => {
    // Cover variant — toggle layout class on first slide
    const cover = document.querySelector('section.slide[data-screen-label*="Portada"]');
    if (cover) {
      cover.dataset.coverVariant = t.cover;
    }
  }, [t.cover]);

  return (
    <TweaksPanel title="Tweaks · Conferencia">
      <TweakSection label="Paleta" />
      <TweakSelect label="Esquema" value={t.palette}
        options={[
          {value: "deep", label: "Deep (azul + verde IA)"},
          {value: "obsidian", label: "Obsidian (más oscuro)"},
          {value: "consult", label: "Consult (azul + coral)"},
          {value: "graphite", label: "Graphite (gris + teal)"},
        ]}
        onChange={(v) => setTweak("palette", v)} />

      <TweakSection label="Modo" />
      <TweakRadio label="Tema base" value={t.mode}
        options={[{value:"light", label:"Claro"}, {value:"dark", label:"Oscuro"}]}
        onChange={(v) => setTweak("mode", v)} />

      <TweakSection label="Escala tipográfica" />
      <TweakSlider label="Escala global" value={t.scale} min={85} max={115} step={1} unit="%"
        onChange={(v) => setTweak("scale", v)} />

      <TweakSection label="Portada" />
      <TweakRadio label="Variante" value={t.cover}
        options={[{value:"editorial", label:"Editorial"}, {value:"minimal", label:"Mínima"}, {value:"data", label:"Data"}]}
        onChange={(v) => setTweak("cover", v)} />
    </TweaksPanel>
  );
}

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);