// Root app + router
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [route, nav] = useRoute();
  // window.MOCK_USER is populated by api-bridge.js from /auth/me before this
  // script loads. Null means anonymous.
  const [user, setUser] = useStateApp(window.MOCK_USER || null);

  // Route guards.
  // Permission model:
  //   anonymous              → /program, /login
  //   waiting (no app yet)   → /application only
  //   pending (submitted)    → /application + /dashboard (posts only, no sprints)
  //   approved               → /dashboard (posts + sprints), /application read-only
  //   rejected               → /application (read-only)
  //   admin / superadmin     → /admin + /dashboard
  useEffectApp(() => {
    if (!user) {
      if (route.name === 'dashboard' || route.name === 'application' || route.name === 'admin') nav('login');
      return;
    }
    const isStaff = user.role === 'admin' || user.role === 'superadmin';
    const canSeeDashboard = isStaff || user.status === 'approved' || user.status === 'pending';

    if (route.name === 'admin' && !isStaff) {
      nav(canSeeDashboard ? 'dashboard' : 'application');
      return;
    }
    if (route.name === 'dashboard' && !canSeeDashboard) {
      nav('application');
      return;
    }
    // Approved + staff users skip the application form.
    if (route.name === 'application' && (user.status === 'approved' || isStaff)) {
      nav('dashboard');
      return;
    }
  }, [route.name, user]);

  // After landing back from OAuth, re-fetch /auth/me to pick up the new session.
  useEffectApp(() => {
    if (!user && (route.name === 'application' || route.name === 'dashboard')) {
      window._api.getMe().then((me) => { if (me) setUser(me); }).catch(() => {});
    }
  }, [route.name]);

  const onLogin = () => { window._api.login(); };
  const onLogout = () => { window._api.logout(); };
  const onNav = (name) => nav(name);

  // Don't render header on login
  const showHeader = route.name !== 'login';

  return (
    <div className="app-root">
      {showHeader && route.name !== 'program' && <AppHeader user={user} route={route.name} onNav={onNav} onLogout={onLogout} />}
      {route.name === 'program' && <ProgramHeader user={user} onNav={onNav} onLogout={onLogout} />}

      <div className="route-fade" key={route.name}>
        {route.name === 'program' && <ProgramPage onNav={onNav} />}
        {route.name === 'login' && <LoginPage onNav={onNav} onLogin={onLogin} />}
        {route.name === 'application' && user && <ApplicationPage user={user} onNav={onNav} />}
        {route.name === 'dashboard' && user && <DashboardPage user={user} onNav={onNav} onLogout={onLogout} />}
        {route.name === 'admin' && user && (user.role === 'admin' || user.role === 'superadmin') && <AdminPage user={user} onNav={onNav} />}
      </div>
      <UIRoot/>
    </div>);

}

// Floating header just for the program page (transparent over hero)
function ProgramHeader({ user, onNav, onLogout }) {
  return (
    <header className="prog-header">
      <div className="container prog-header-inner">
        <a className="brand" href="#/program" onClick={(e) => {e.preventDefault();onNav('program');}}>
          <BloomMark size={22} />
        </a>
        <nav className="prog-nav">
          <a href="#section-tiers">Tiers</a>
          <a href="#section-rewards">Rewards</a>
          <a href="#section-sprints">Sprints</a>
          <a href="#section-faq">FAQ</a>
          {user ?
          <a className="btn btn-secondary btn-sm" href="#/dashboard" onClick={(e) => {e.preventDefault();onNav('dashboard');}}>Sign In</a> :

          <a className="btn btn-secondary btn-sm" href="#/login" onClick={(e) => {e.preventDefault();onNav('login');}}>Sign in</a>
          }
        </nav>
      </div>
    </header>);

}

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