/* global React, ReactDOM */
/* global Slide01Cover, Slide01bAgents, Slide02Sho, Slide03ML, Slide04Notas */
/* global Slide05A11yReady, Slide05bScaling, Slide06SaliendoFigma, Slide07HandoffReal, Slide08SourceOfTruth */
/* global Slide09AITools, Slide10Skills, Slide11MCPs, Slide12OpenSource, Slide12bAccessibilityAgents, Slide13Agentes, Slide14RepoImpact, Slide15AuditoriasImpacto, Slide16BypassFigma */
/* global Slide17Demo */
/* global useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "noise": false
}/*EDITMODE-END*/;

const SLIDES = [
  { label: "01 Portada", Comp: Slide01Cover },
  { label: "01b Portada Agentes", Comp: Slide01bAgents },
  { label: "02 Sho", Comp: Slide02Sho },
  { label: "03 Mercado Libre", Comp: Slide03ML },
  { label: "04 Notas A11Y 2023", Comp: Slide04Notas },
  { label: "05b Escalabilidad", Comp: Slide05bScaling },
  { label: "05 A11Y Ready", Comp: Slide05A11yReady },
  { label: "06 Saliendo de Figma", Comp: Slide06SaliendoFigma },
  { label: "07 Handoff Real", Comp: Slide07HandoffReal },
  { label: "08 Fuente de la verdad", Comp: Slide08SourceOfTruth },
  { label: "09 AI Tools", Comp: Slide09AITools },
  { label: "10 Skills", Comp: Slide10Skills },
  { label: "11 MCPs", Comp: Slide11MCPs },
  { label: "12 Open Source", Comp: Slide12OpenSource },
  { label: "12b accessibility-agents", Comp: Slide12bAccessibilityAgents },
  { label: "13 Agentes en acción", Comp: Slide13Agentes },
  { label: "14 Impacto en el Repo", Comp: Slide14RepoImpact },
  { label: "15 Auditorías reales", Comp: Slide15AuditoriasImpacto },
  { label: "16 Bypass Figma", Comp: Slide16BypassFigma },
  { label: "17 Demo en Cursor", Comp: Slide17Demo },
];

function applyTheme(t) {
  document.documentElement.classList.toggle("dark", t === "dark");
}
function applyNoise(on) {
  document.documentElement.classList.toggle("with-noise", !!on);
}

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

  React.useEffect(() => { applyTheme(t.theme); }, [t.theme]);
  React.useEffect(() => { applyNoise(t.noise); }, [t.noise]);

  return (
    <TweaksPanel title="Tweaks · Deck">
      <TweakSection label="Apariencia" />
      <TweakRadio
        label="Tema"
        value={t.theme}
        options={["light", "dark"]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakToggle
        label="Grano"
        value={!!t.noise}
        onChange={(v) => setTweak("noise", v)}
      />
    </TweaksPanel>
  );
}

/* ---- Mount slides into <deck-stage> ---- */
function mountSlides() {
  const stage = document.querySelector("deck-stage");
  if (!stage) return;
  // Clear any prior children
  stage.innerHTML = "";
  SLIDES.forEach(({ label, Comp }) => {
    const section = document.createElement("section");
    section.setAttribute("data-label", label);
    stage.appendChild(section);
    ReactDOM.createRoot(section).render(<Comp />);
  });
}

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

/* Mount slides — wait a tick so React globals are registered */
mountSlides();