/* app-game.jsx — GAME ONLY, for iframe embedding. No marketing nav/hero/footer. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "treatment": "flat",
  "accent": "#005090"
}/*EDITMODE-END*/;

const TREATMENTS = {
  flat: { es: "Plano", en: "Flat" },
  blueprint: { es: "Técnico", en: "Blueprint" },
  iso: { es: "Iso", en: "Iso" },
};

const GameApp = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { lang } = useReto();
  const [won, setWon] = React.useState(null);

  React.useEffect(() => { document.documentElement.style.setProperty("--reto-accent", t.accent); }, [t.accent]);

  /* No scrolling on win — the WinPanel now mounts in the same
     .game-embed__main the board was using, so the player is already
     looking at it. The previous setTimeout-then-scrollTo would jump
     the page UPWARD, breaking the "stay inside the game" feel the
     new end-game flow is designed around. */
  const onWin = (code, tries) => { setWon({ code, tries }); };

  return (
    <>
      <div className="game-embed">
        <div className="game-embed__bar">
          <RetoLogo size={22} />
          <RetoLangToggle />
        </div>
        <div className="game-embed__main">
          {/* Once the player wins, swap the board for the WinPanel
              IN PLACE so the celebration lives inside the same stage
              window as the challenge — same navy frame, same width,
              no jarring "page transition" feel. Game keeps its key
              so re-entering (e.g. retry) re-mounts cleanly. */}
          {won
            ? <WinPanel code={won.code} tries={won.tries} />
            : <Game key="game" onWin={onWin} treatment={t.treatment} />}
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label={lang === "es" ? "Tratamiento visual" : "Visual treatment"} />
        <TweakRadio
          label={lang === "es" ? "Estilo del tablero" : "Board style"}
          value={t.treatment}
          options={["flat", "blueprint", "iso"].map((o) => ({ value: o, label: TREATMENTS[o][lang] }))}
          onChange={(v) => setTweak("treatment", v)}
        />
        <TweakSection label={lang === "es" ? "Color de acento" : "Accent color"} />
        <TweakColor
          label={lang === "es" ? "Acento" : "Accent"}
          value={t.accent}
          options={["#005090", "#003C70", "#1F6FB2"]}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweaksPanel>
    </>
  );
};

/* RetoMount — render-time wrapper. Passes the parent site's lang
   straight into RetoLangProvider as `initialLang`, so the game's
   locale matches the main site without any localStorage timing race.
   Wraps the game in a `.reto-scope` div so the scoped CSS
   (reto-scoped.css) only applies inside this subtree. The parent
   (PageTalento) re-keys this whole component on lang change to force
   a full remount, which re-runs RetoLangProvider's lazy state init
   with the new initialLang value. */
const RetoMount = ({ lang }) => {
  return (
    <div className="reto-scope">
      <RetoLangProvider initialLang={lang}>
        <GameApp />
      </RetoLangProvider>
    </div>
  );
};

Object.assign(window, { RetoMount, GameApp });