/* global React, ReactDOM, ZemplooGroundBackground, ZTopNav, ZPages, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSlider, TweakToggle */
const { useState, useEffect } = React;
const { HomePage, ServicesPage, CartaPage, FaqPage, FormularioPage, Footer } = ZPages;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "brand",
  "intensity": 1,
  "bgPaused": false,
  "showBg": true,
  "theme": "dark"
}/*EDITMODE-END*/;

function App() {
  // Roteamento por hash:
  //   #formulario              → form sem tier (cliente escolhe dentro)
  //   #formulario-single       → form com tier=single pré-selecionado
  //   #formulario-basic        → tier=basic + seletor de abas (1-2)
  //   #formulario-expert       → tier=expert + seletor de abas (3-5)
  //   #formulario-custom       → tier=custom + briefing aberto
  // Páginas públicas continuam controladas pelo nav (state).
  const parseHash = (h) => {
    const clean = h.replace(/^#/, "");
    const m = clean.match(/^formulario(?:-(single|basic|expert|custom))?$/);
    return m ? { route: "formulario", tier: m[1] || null } : { route: null, tier: null };
  };
  const initial = parseHash(window.location.hash);
  const [active, setActive] = useState(() => initial.route || "home");
  const [formTier, setFormTier] = useState(() => initial.tier);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const onHash = () => {
      const { route: r, tier: t } = parseHash(window.location.hash);
      if (r) {
        setActive(r);
        setFormTier(t);
      }
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const theme = tweaks.theme;
  useEffect(() => {
    document.body.classList.toggle("theme-light", theme === "light");
    document.body.classList.toggle("theme-dark", theme === "dark");
  }, [theme]);

  // Scroll main to top whenever we switch pages
  useEffect(() => {
    const main = document.querySelector(".main");
    if (main) main.scrollTo({ top: 0, behavior: "smooth" });
  }, [active]);

  let Page;
  if (active === "home")             Page = <HomePage go={setActive} />;
  else if (active === "services")    Page = <ServicesPage />;
  else if (active === "carta")       Page = <CartaPage />;
  else if (active === "formulario")  Page = <FormularioPage tier={formTier} />;
  else                               Page = <FaqPage />;

  return (
    <>
      {tweaks.showBg && (
        <ZemplooGroundBackground
          accent={tweaks.accent}
          intensity={tweaks.intensity}
          paused={tweaks.bgPaused}
          theme={theme}
        />
      )}
      <div className="app">
        <ZTopNav
          active={active}
          setActive={setActive}
          theme={theme}
          setTheme={(t) => setTweak("theme", t)}
        />
        <main className="main">
          {Page}
          <Footer />
        </main>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Plano de fundo">
          <TweakRadio
            label="Paleta"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { label: "Brand", value: "brand" },
              { label: "Magenta", value: "magenta" },
              { label: "Blue", value: "blue" },
              { label: "Calm", value: "calm" },
            ]}
          />
          <TweakSlider
            label="Intensidade"
            value={tweaks.intensity}
            onChange={(v) => setTweak("intensity", v)}
            min={0.2} max={1.8} step={0.05}
          />
          <TweakToggle
            label="Animar"
            value={!tweaks.bgPaused}
            onChange={(v) => setTweak("bgPaused", !v)}
          />
          <TweakToggle
            label="Mostrar fundo"
            value={tweaks.showBg}
            onChange={(v) => setTweak("showBg", v)}
          />
        </TweakSection>
        <TweakSection title="Tema">
          <TweakRadio
            label="Modo"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { label: "Escuro", value: "dark" },
              { label: "Claro", value: "light" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);