/* global React, ReactDOM, I, S, M, SB,
          Landing, Auth, AdminApp, UserApp, VendorApp,
          ToastProvider, useToast, useHashRoute */
/* PAMP — main app */

const { useState, useEffect, useCallback } = React;

const LS_THEME    = "pamp:theme";
const LS_SIDEBAR  = "pamp:sidebar";

function readTheme() {
  const v = localStorage.getItem(LS_THEME);
  if (v === "light" || v === "dark") return v;
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}

function App() {
  const [route, setRoute] = useHashRoute({ name: "landing" });
  const [theme, setTheme] = useState(readTheme);
  const [sidebar, setSidebar] = useState(() => localStorage.getItem(LS_SIDEBAR) || "expanded");
  const [session, setSession] = useState(null);
  const [bootstrapped, setBootstrapped] = useState(false);

  // Apply theme + persist
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem(LS_THEME, theme);
  }, [theme]);

  // Persist sidebar
  useEffect(() => { localStorage.setItem(LS_SIDEBAR, sidebar); }, [sidebar]);

  // Bootstrap session on load
  useEffect(() => {
    (async () => {
      try {
        const s = await window.PampData.bootstrapSession();
        if (s) {
          setSession(s);
          window._PAMP_ADMIN_SESSION = s;
          // If user landed on root but is signed in, send to their portal
          if (route.name === "landing" || route.name === "auth") {
            const portal = window.PampData.portalForRole(s.profile?.role);
            setRoute({ name: portal, page: "dashboard" });
          }
        }
      } finally {
        setBootstrapped(true);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Listen for sign-out from anywhere
  useEffect(() => {
    const sub = SB.client.auth.onAuthStateChange((event) => {
      if (event === "SIGNED_OUT") {
        window._PAMP_ADMIN_SESSION = null;
        setSession(null);
        setRoute({ name: "landing" });
      }
    });
    return () => sub?.data?.subscription?.unsubscribe?.();
  }, []);

  const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
  const toggleSidebar = () => setSidebar((s) => (s === "expanded" ? "collapsed" : "expanded"));
  const collapsed = sidebar === "collapsed";

  const handleSignedIn = useCallback(async (newSession) => {
    setSession(newSession);
    window._PAMP_ADMIN_SESSION = newSession;
    const portal = window.PampData.portalForRole(newSession.profile?.role);
    setRoute({ name: portal, page: "dashboard" });
  }, []);

  const handleExitPortal = useCallback(async () => {
    await SB.signOut();
    window._PAMP_ADMIN_SESSION = null;
    setSession(null);
    setRoute({ name: "landing" });
  }, []);

  // Show splash while bootstrapping
  if (!bootstrapped) {
    return (
      <div className="app-root" style={{ alignItems: "center", justifyContent: "center" }}>
        <div className="loading-state">
          <div className="spin" />
          <div>Loading Pamp…</div>
        </div>
      </div>
    );
  }

  const portalProps = {
    collapsed,
    onToggle: toggleSidebar,
    onTheme: toggleTheme,
    theme,
    onExit: handleExitPortal,
    session,
    setSession,
    onNavigate: (page) => setRoute({ name: route.name, page }),
    currentPage: route.page || "dashboard",
  };

  // Role guard — if user isn't allowed on the requested portal, bounce
  const requestedPortal = route.name;
  const userRole = session?.profile?.role;
  if (session && ["admin","user","vendor"].includes(requestedPortal)) {
    const expected = window.PampData.portalForRole(userRole);
    if (requestedPortal !== expected && !(userRole === "admin")) {
      // admins can visit other portals; others get redirected
      setTimeout(() => setRoute({ name: expected, page: "dashboard" }), 0);
    }
  }
  // Not signed in but trying to access portal — bounce to auth
  if (!session && ["admin","user","vendor"].includes(requestedPortal)) {
    setTimeout(() => setRoute({ name: "auth", role: requestedPortal }), 0);
    return (
      <div className="app-root" style={{ alignItems: "center", justifyContent: "center" }}>
        <div className="loading-state"><div className="spin" /><div>Redirecting…</div></div>
      </div>
    );
  }

  return (
    <div className="app-root">
      {route.name === "landing" && (
        <Landing
          onPortal={(p) => setRoute({ name: "auth", role: p })}
          onTheme={toggleTheme}
          theme={theme}
        />
      )}
      {route.name === "auth" && (
        <Auth
          role={route.role || "user"}
          onBack={() => setRoute({ name: "landing" })}
          onSignedIn={handleSignedIn}
        />
      )}
      {route.name === "admin"  && <AdminApp  {...portalProps} />}
      {route.name === "user"   && <UserApp   {...portalProps} />}
      {route.name === "vendor" && <VendorApp {...portalProps} />}
    </div>
  );
}

function Root() {
  return (
    <ToastProvider>
      <App />
    </ToastProvider>
  );
}

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