/* global React, ReactDOM, Nav, Footer, Home, Opportunities, About, OurAgents, Contact, PortalLogin, Portal */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const ROUTES = ["home", "opportunities", "about", "agents", "contact", "login", "portal"];
const DEFAULT_ROUTE = "home";

function parseHash() {
  const h = window.location.hash.replace(/^#\//, "").replace(/^#/, "").trim();
  return ROUTES.includes(h) ? h : DEFAULT_ROUTE;
}

function App() {
  const [route, setRoute] = useStateApp(parseHash());
  const [user, setUser] = useStateApp(null);

  useEffectApp(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (r) => {
    window.location.hash = "#/" + r;
    // hashchange handler will pick it up; but set immediately for snappy feel
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Guard: if not signed in and trying to access portal, send to login
  useEffectApp(() => {
    if (route === "portal" && !user) {
      navigate("login");
    }
  }, [route, user]);

  const handleLogin = (creds) => setUser(creds);
  const handleLogout = () => { setUser(null); navigate("login"); };

  const showFooter = route !== "login" && route !== "portal";

  return (
    <div>
      <Nav route={route} navigate={navigate} />
      {route === "home" && <Home navigate={navigate} />}
      {route === "opportunities" && <Opportunities navigate={navigate} />}
      {route === "about" && <About navigate={navigate} />}
      {route === "agents" && <OurAgents navigate={navigate} />}
      {route === "contact" && <Contact navigate={navigate} />}
      {route === "login" && <PortalLogin navigate={navigate} onLogin={handleLogin} />}
      {route === "portal" && user && <Portal user={user} navigate={navigate} onLogout={handleLogout} />}
      {showFooter && <Footer navigate={navigate} />}
    </div>
  );
}

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