// VEXEL — Main app shell + router
const { useState: useState_app, useEffect: useEffect_app } = React;

function App() {
  const [route, setRoute] = useState_app(() => {
    const h = window.location.hash.slice(1);
    if (!h) return { name: "home", params: {} };
    const [name, q] = h.split("?");
    const params = {};
    if (q) q.split("&").forEach(p => { const [k, v] = p.split("="); params[k] = v; });
    return { name, params };
  });
  const [signedIn, setSignedIn] = useState_app(false);
  const [lang, setLang] = useState_app("EN");
  const [currency, setCurrency] = useState_app("AED");

  // Probe the API on first load to check if a session cookie is valid
  useEffect_app(() => {
    (async () => {
      const r = await window.VexelAPI.me();
      if (r.ok && r.user) setSignedIn(true);
    })();
  }, []);

  const go = (name, params = {}) => {
    setRoute({ name, params });
    const q = Object.keys(params).length ? "?" + Object.entries(params).map(([k, v]) => `${k}=${v}`).join("&") : "";
    window.location.hash = name + q;
    window.scrollTo(0, 0);
  };

  useEffect_app(() => {
    const onHash = () => {
      const h = window.location.hash.slice(1);
      if (!h) return setRoute({ name: "home", params: {} });
      const [name, q] = h.split("?");
      const params = {};
      if (q) q.split("&").forEach(p => { const [k, v] = p.split("="); params[k] = v; });
      setRoute({ name, params });
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const dir = lang === "AR" ? "rtl" : "ltr";
  useEffect_app(() => { document.documentElement.dir = dir; }, [dir]);

  let Page;
  const r = route.name;
  if (r === "home") Page = <HomePage go={go} currency={currency} />;
  else if (r === "tournaments") Page = <TournamentsPage go={go} currency={currency} />;
  else if (r === "tournament") Page = <TournamentDetailPage params={route.params} go={go} currency={currency} />;
  else if (r === "live") Page = <LivePage go={go} />;
  else if (r === "teams") Page = <TeamsPage go={go} />;
  else if (r === "team") Page = <TeamDetailPage params={route.params} go={go} />;
  else if (r === "players") Page = <PlayersPage go={go} />;
  else if (r === "player") Page = <PlayerDetailPage params={route.params} go={go} />;
  else if (r === "news") Page = <NewsPage go={go} />;
  else if (r === "article") Page = <ArticleDetailPage params={route.params} go={go} />;
  else if (r === "store") Page = <StorePage go={go} currency={currency} />;
  else if (r === "partners") Page = <PartnersPage go={go} />;
  else if (r === "about") Page = <AboutPage go={go} />;
  else if (r === "careers") Page = <CareersPage go={go} />;
  else if (r === "contact") Page = <ContactPage go={go} />;
  else if (r === "signin") Page = <SignInPage params={route.params} go={go} setSignedIn={setSignedIn} />;
  else if (r === "dashboard") Page = <DashboardPage go={go} setSignedIn={setSignedIn} />;
  else if (r === "privacy")   Page = <PrivacyPage go={go} />;
  else if (r === "terms")     Page = <TermsPage go={go} />;
  else if (r === "conduct")   Page = <CodeOfConductPage go={go} />;
  else if (r === "anticheat") Page = <AntiCheatPage go={go} />;
  else if (r === "faq")       Page = <FAQPage go={go} />;
  else if (r === "press")     Page = <ContactPage go={go} />;
  else Page = <NotFoundPage go={go} />;

  // Hide nav/footer on sign in page for fullscreen treatment
  const hideChrome = r === "signin";

  return (
    <>
      {!hideChrome && <Header route={route} go={go} signedIn={signedIn} setSignedIn={setSignedIn} lang={lang} setLang={setLang} currency={currency} setCurrency={setCurrency} />}
      {Page}
      {!hideChrome && <Footer go={go} />}
      <CookieBanner />
    </>
  );
}

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