/* BS Adventure — painel de Tweaks (controla a página HTML) */
/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakColor, TweakToggle */

const BS_TWEAK_DEFAULTS = {
  hero: "Tipográfico",
  accent: "#ffd21e",
  grain: true,
};

const BS_HERO_MAP = { "Cinematográfico": "a", "Diagonal": "b", "Tipográfico": "c" };
const BS_INK_MAP = { "#ffd21e": "#11150a", "#2da6ff": "#051426", "#e4232f": "#ffffff" };

function bsApplyTweaks(t) {
  document.body.dataset.hero = BS_HERO_MAP[t.hero] || "a";
  const root = document.documentElement;
  root.style.setProperty("--accent", t.accent);
  root.style.setProperty("--accent-ink", BS_INK_MAP[t.accent] || "#11150a");
  const grain = document.querySelector(".grain");
  if (grain) grain.style.display = t.grain ? "" : "none";
}

function BSTweaksApp() {
  const [t, setTweak] = useTweaks(BS_TWEAK_DEFAULTS);

  React.useEffect(() => {
    bsApplyTweaks(t);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakSelect
        label="Estilo do topo"
        value={t.hero}
        options={["Cinematográfico", "Diagonal", "Tipográfico"]}
        onChange={(v) => setTweak("hero", v)}
      />
      <TweakSection label="Cor de destaque" />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={["#ffd21e", "#2da6ff", "#e4232f"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Textura" />
      <TweakToggle
        label="Grão / film grain"
        value={t.grain}
        onChange={(v) => setTweak("grain", v)}
      />
    </TweaksPanel>
  );
}

(function mountBSTweaks() {
  const el = document.getElementById("tweaks-root");
  if (!el || typeof useTweaks === "undefined") return;
  ReactDOM.createRoot(el).render(<BSTweaksApp />);
})();