// Root app — Gelatina Bariátrica · 21 Dias
const { QUESTIONS } = window.QUIZ_DATA;
const STORAGE_KEY = "quiz_gelatina_v1";

function loadState() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? JSON.parse(raw) : { route: "intro", step: 0, answers: {} };
  } catch (e) { return { route: "intro", step: 0, answers: {} }; }
}
function saveState(s) {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch (e) {}
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#15803D",
  "accentColor": "#EA580C",
  "bgTone": "warm",
  "intent": "calm",
  "showSocialProof": true,
  "ctaStyle": "solid"
}/*EDITMODE-END*/;

const BG_TONES = {
  soft:  { body: "#F5F7FA", card: "#FFFFFF" },
  warm:  { body: "#FAF7F2", card: "#FFFFFF" },
  cool:  { body: "#F0F4F8", card: "#FFFFFF" },
  paper: { body: "#FBF9F4", card: "#FFFFFF" }
};

function App() {
  const [state, setState] = React.useState(() => loadState());
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { saveState(state); }, [state]);

  // Admin gate: ?admin=123 abre o painel Tweaks
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('admin') === '123') {
      const t = setTimeout(() => {
        window.postMessage({ type: '__activate_edit_mode' }, '*');
      }, 150);
      return () => clearTimeout(t);
    }
  }, []);

  // Captura UTMs/fbclid da URL no load e persiste pra propagar no checkout
  React.useEffect(() => {
    try {
      const params = new URLSearchParams(window.location.search);
      const keys = ['utm_source','utm_medium','utm_campaign','utm_content','utm_term','fbclid','gclid','ttclid'];
      const captured = {};
      keys.forEach(k => {
        const v = params.get(k);
        if (v) captured[k] = v;
      });
      if (Object.keys(captured).length > 0) {
        sessionStorage.setItem('quiz_utm_params', JSON.stringify(captured));
      }
    } catch (e) {}
  }, []);

  // Apply tweaks → CSS vars
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--brand', tweaks.primaryColor);
    r.style.setProperty('--accent', tweaks.accentColor);
    const tone = BG_TONES[tweaks.bgTone] || BG_TONES.soft;
    r.style.setProperty('--bg', tone.body);
    r.style.setProperty('--card', tone.card);
  }, [tweaks.primaryColor, tweaks.accentColor, tweaks.bgTone]);

  const startQuiz = () => setState(s => ({ ...s, route: "quiz", step: 1, answers: {} }));

  // value pode ser string (single) ou array (multi)
  const selectAnswer = (value) => {
    setState(s => {
      const key = "q" + s.step;
      const answers = { ...s.answers, [key]: value };
      if (s.step >= QUESTIONS.length) {
        if (typeof window.fbq === 'function') {
          window.fbq('track', 'Lead');
        }
        return { ...s, route: "result", answers };
      }
      return { ...s, step: s.step + 1, answers };
    });
  };

  const back = () => {
    setState(s => {
      if (s.step <= 1) return { ...s, route: "intro", step: 0 };
      return { ...s, step: s.step - 1 };
    });
  };

  const onCaptureSubmit = ({ email, whatsapp }) => {
    setState(s => ({ ...s, route: "result", email, whatsapp }));
  };

  const onCheckout = (tierId) => {
    const PRICES = { unico: 37.00 };
    const CHECKOUT_URLS = {
      unico: 'https://pay.hotmart.com/I105761968U?checkoutMode=10'
    };
    if (typeof window.fbq === 'function') {
      window.fbq('track', 'InitiateCheckout', {
        content_name: tierId,
        value: PRICES[tierId] || 0,
        currency: 'BRL'
      });
    }
    const url = CHECKOUT_URLS[tierId];
    if (url) {
      const propagated = new URLSearchParams();
      try {
        const stored = JSON.parse(sessionStorage.getItem('quiz_utm_params') || '{}');
        Object.entries(stored).forEach(([k, v]) => propagated.set(k, v));
      } catch (e) {}
      const live = new URLSearchParams(window.location.search);
      ['utm_source','utm_medium','utm_campaign','utm_content','utm_term','fbclid','gclid','ttclid'].forEach(k => {
        const v = live.get(k);
        if (v && !propagated.has(k)) propagated.set(k, v);
      });
      const finalUrl = propagated.toString()
        ? url + (url.includes('?') ? '&' : '?') + propagated.toString()
        : url;
      window.location.href = finalUrl;
    }
  };

  const reset = () => {
    setState({ route: "intro", step: 0, answers: {} });
  };

  let screen;
  if (state.route === "intro") screen = <window.IntroScreen onStart={startQuiz} />;
  else if (state.route === "quiz") {
    const q = QUESTIONS[state.step - 1];
    screen = <window.QuizScreen
      step={state.step}
      total={QUESTIONS.length}
      question={q}
      answers={state.answers}
      onSelect={selectAnswer}
      onBack={back}
    />;
  }
  else if (state.route === "capture") screen = <window.CaptureScreen onSubmit={onCaptureSubmit} onBack={back} />;
  else if (state.route === "result") screen = <window.ResultScreen answers={state.answers} onCheckout={onCheckout} />;

  return (
    <>
      <div className="app-root">{screen}</div>
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Aparência">
          <window.TweakColor label="Cor primária" value={tweaks.primaryColor} onChange={v => setTweak('primaryColor', v)} />
          <window.TweakColor label="Cor de destaque" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} />
          <window.TweakSelect label="Fundo" value={tweaks.bgTone} onChange={v => setTweak('bgTone', v)} options={[
            { value: "soft", label: "Cinza suave" },
            { value: "warm", label: "Off-white quente (padrão)" },
            { value: "cool", label: "Cinza azulado" },
            { value: "paper", label: "Papel creme" }
          ]} />
        </window.TweakSection>
        <window.TweakSection title="Conteúdo">
          <window.TweakToggle label="Mostrar prova social no intro" value={tweaks.showSocialProof} onChange={v => setTweak('showSocialProof', v)} />
          <window.TweakRadio label="Estilo do CTA" value={tweaks.ctaStyle} onChange={v => setTweak('ctaStyle', v)} options={[
            { value: "solid", label: "Sólido" },
            { value: "soft", label: "Suave" }
          ]} />
        </window.TweakSection>
        <window.TweakSection title="Navegação rápida">
          <window.TweakButton label="Resetar quiz" onClick={reset} />
          <window.TweakButton label="Pular para Resultado URGENTE" onClick={() => setState({
            route: "result",
            step: QUESTIONS.length,
            answers: {
              q1: "55 a 64 anos",
              q2: "Barriga e abdômen (que não desincha nunca)",
              q3: "Mais de 10 anos (e nada funcionou)",
              q4: "Estou na menopausa ou pré-menopausa",
              q5: "Vários produtos da internet sem resultado",
              q6: "Mais de 15kg (preciso de uma transformação grande)",
              q7: "Sim, tenho um evento em 30 dias (casamento, formatura, viagem)",
              q8: "Sim, quero começar hoje mesmo"
            }
          })} />
          <window.TweakButton label="Pular para Resultado ATIVO" onClick={() => setState({
            route: "result",
            step: QUESTIONS.length,
            answers: {
              q1: "45 a 54 anos",
              q2: "Está espalhado pelo corpo todo",
              q3: "3 a 10 anos",
              q4: "Ansiedade, intestino preso ou gastrite",
              q5: "Dietas restritivas (passei fome e voltou tudo)",
              q6: "De 5 a 10kg",
              q7: "Quero ficar bem pro verão",
              q8: "Talvez essa semana"
            }
          })} />
          <window.TweakButton label="Pular para Resultado INICIAL" onClick={() => setState({
            route: "result",
            step: QUESTIONS.length,
            answers: {
              q1: "35 a 44 anos",
              q2: "Quadril e culote",
              q3: "Menos de 1 ano",
              q4: "Nenhuma dessas",
              q5: "Sinceramente, nunca tentei nada sério",
              q6: "Até 5kg (quero ficar bem pra um evento)",
              q7: "Não tenho pressa, só quero resolver de uma vez",
              q8: "Sim, quero começar hoje mesmo"
            }
          })} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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