/* global React, ReactDOM, useRoute, Landing, SignUp, SignIn, ResetPassword, UpdatePassword, Dashboard, Wordmark */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const SplashLoader = () => (
  <div style={{minHeight:"100vh", display:"grid", placeItems:"center", background:"var(--bg)"}}>
    <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:18}}>
      <Wordmark size={26}/>
      <div className="splash-dots"><span/><span/><span/></div>
    </div>
  </div>
);

const App = () => {
  const [route, navigate] = useRoute();
  // session: undefined = still loading, null = signed out, object = signed in
  const [session, setSession] = useStateApp(undefined);

  useEffectApp(() => {
    let alive = true;
    window.Supa.getSession().then((s) => { if (alive) setSession(s); });
    window.Supa.onAuthChange((s, event) => {
      if (!alive) return;
      setSession(s);
      if (event === "PASSWORD_RECOVERY") navigate("/update-password");
    });
    return () => { alive = false; };
  }, []);

  // Public routes (work signed-out)
  if (route === "/signup") return session ? <Dashboard navigate={navigate}/> : <SignUp navigate={navigate}/>;
  if (route === "/signin") return session ? <Dashboard navigate={navigate}/> : <SignIn navigate={navigate}/>;
  if (route === "/reset") return <ResetPassword navigate={navigate}/>;
  if (route === "/update-password") return <UpdatePassword navigate={navigate}/>;

  if (route === "/dashboard") {
    if (session === undefined) return <SplashLoader/>;        // wait for session check
    if (!session) return <SignIn navigate={navigate}/>;        // gate
    return <Dashboard navigate={navigate}/>;
  }

  return <Landing navigate={navigate}/>;
};

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