/* MStheory website — app composition + auth/payment orchestration */
function App() {
  const saved = (typeof localStorage !== "undefined" && localStorage.getItem("ms_lang")) || "nl";
  const [lang, setLangState] = React.useState(saved);
  const [user, setUser] = React.useState(window.MSStore.current());
  const [auth, setAuth] = React.useState(false);
  const [checkout, setCheckout] = React.useState(false);
  const t = window.MS_I18N[lang] || window.MS_I18N.nl;
  const rtl = (window.MS_I18N.langs.find((l) => l.code === lang) || {}).rtl;

  React.useEffect(() => window.MSStore.onAuth(setUser), []);

  const setLang = (code) => { setLangState(code); try { localStorage.setItem("ms_lang", code); } catch (e) {} };
  React.useEffect(() => { document.documentElement.lang = lang; document.documentElement.dir = rtl ? "rtl" : "ltr"; }, [lang, rtl]);

  const hasAccess = (u) => u && (u.paid || window.MSStore.isAdmin(u));
  const goToQuiz = (topic) => { window.location.href = `../quiz/index.html${topic ? "?topic=" + topic : ""}`; };
  // "Bekijk demo" — open the quiz in preview mode; the paid gate serves the
  // free sample questions to anyone who hasn't paid.
  const goToDemo = (topic) => { window.location.href = `../quiz/index.html?topic=${topic || "vrachtwagen"}&preview=1`; };

  // Single entry point for "get access / start"
  const openAccess = (topic) => {
    const u = window.MSStore.current();
    if (!u) { setAuth(true); return; }
    if (hasAccess(u)) { goToQuiz(topic); return; }
    setCheckout(true);
  };

  const onAuthed = (u) => {
    setAuth(false);
    if (hasAccess(u)) goToQuiz();
    else setCheckout(true);
  };

  const onPaid = async () => {
    // LIVE: markPaid() hands off to Stripe Checkout via window.location.assign
    // and returns { redirected:true } — we must NOT navigate again or we clobber
    // the Stripe redirect. DEMO: markPaid() unlocks locally and returns nothing,
    // so we send the user straight into the quiz.
    const res = await window.MSStore.markPaid();
    if (res && res.redirected) return; // navigating to Stripe — leave the page be
    setCheckout(false); goToQuiz("vrachtwagen");
  };

  return (
    <React.Fragment>
      <Header t={t} lang={lang} setLang={setLang} user={user}
        onCheckout={() => openAccess()} onLogin={() => setAuth(true)}
        onProfile={() => (window.location.href = "profile.html")}
        onAdmin={() => (window.location.href = "admin.html")}
        onSignOut={() => window.MSStore.signOut()} />
      <main>
        <Hero t={t} onCheckout={() => openAccess()} onDemo={() => goToDemo("vrachtwagen")} />
        <Showcase t={t} lang={lang} />
        <Topics t={t} lang={lang} onTopic={(id) => openAccess(id)} />
        <HowItWorks t={t} />
        <Pricing t={t} onCheckout={() => openAccess()} />
      </main>
      <Footer t={t} lang={lang} setLang={setLang} />
      <AuthModal open={auth} intent="pay" onClose={() => setAuth(false)} onAuthed={onAuthed} />
      <CheckoutModal t={t} open={checkout} user={user} onClose={() => setCheckout(false)} onSuccess={onPaid} />
    </React.Fragment>
  );
}

window.MSStore.ready.then(() => {
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
});