(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;

  function App() {
    var _screen     = useState('home');   var screen = _screen[0], setScreen = _screen[1];
    var _authUser   = useState(null);     var authUser = _authUser[0], setAuthUser = _authUser[1];
    var _authReady  = useState(false);    var authReady = _authReady[0], setAuthReady = _authReady[1];
    var _showLogin  = useState(false);    var showLogin = _showLogin[0], setShowLogin = _showLogin[1];
    var _screenKey  = useState(0);        var screenKey = _screenKey[0], setScreenKey = _screenKey[1];

    useEffect(function() {
      window.initUserCursor();

      // Boot auth
      if (window.AuthState) {
        window.AuthState.init().then(function() {
          setAuthUser(window.AuthState.getUser());
          setAuthReady(true);
        });
        var unsub = window.AuthState.onChange(function(state) { setAuthUser(state.user); });
        return unsub;
      } else {
        setAuthReady(true);
      }
    }, []);

    // Subscribe to router
    useEffect(function() {
      var unsub = window.UserRouter.onChange(function(s) {
        setScreen(s);
        setScreenKey(function(k){ return k + 1; });
      });
      return unsub;
    }, []);

    useEffect(function() {
      if (!authReady) return;
      setTimeout(function() { window.showUserToast('Welcome to CityBuildR 🌆', 'violet'); }, 800);
    }, [authReady]);

    function handleLogout() {
      if (window.AuthState) {
        window.AuthState.logout();
        window.showUserToast('Signed out', 'violet');
      }
    }

    function renderScreen() {
      switch (screen) {
        case 'projects':       return <window.UserProjectsPage />;
        case 'project-detail': return <window.UserProjectDetailPage />;
        case 'ar-demo':        return <window.UserARDemoPage />;
        case 'funding':        return <window.UserFundingPage />;
        case 'community':      return <window.UserCommunityPage />;
        case 'submit':         return <window.UserSubmitPage />;
        case 'profile':        return <window.UserProfilePage />;
        default:               return <window.UserHomePage />;
      }
    }

    var NAV_SCREEN_MAP = { 'Explore':'home', 'Projects':'projects', 'AR Demo':'ar-demo', 'Funding':'funding', 'Community':'community' };

    return (
      <>
        <window.UserNav
          active={screen}
          navMap={NAV_SCREEN_MAP}
          authUser={authUser}
          onLoginClick={function(){ setShowLogin(true); }}
          onLogout={handleLogout}
        />
        <div key={screenKey}>
          {renderScreen()}
        </div>
        {showLogin && (
          <window.AuthModal mode="user" onClose={function(user) {
            setShowLogin(false);
            if (user) window.showUserToast('Welcome back, '+user.name+'!', 'lime');
          }} />
        )}
      </>
    );
  }

  window.UserApp = App;
})();