// Root App.
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [loggedIn, setLoggedIn] = useStateA(false);
  const [currentUserId, setCurrentUserId] = useStateA('u1'); // Justin = super_admin
  const [route, setRoute] = useStateA('tasks');
  const [teamsState] = useStateA(window.AppData.TEAMS);

  const user = window.AppData.USERS.find(u => u.id === currentUserId);

  function landingFor(role) {
    return 'tasks';
  }

  useEffectA(() => {
    if (!loggedIn) return;
    setRoute(prev => {
      if (prev.startsWith('team:')) return prev;
      return landingFor(user.role);
    });
    // eslint-disable-next-line
  }, [user.role, loggedIn]);

  function nav(r) { setRoute(r); }

  function switchRole(userId) {
    setCurrentUserId(userId);
  }

  if (!loggedIn) {
    return <window.LoginScreen onLogin={() => setLoggedIn(true)} />;
  }

  let body;
  if (route === 'starter-pack') {
    body = <window.Dashboard teams={teamsState} onOpenTeam={(id) => setRoute('team:' + id)} readOnly={user.role === 'cs_helper'} mode="starter-pack" />;
  } else if (route === 'teams') {
    body = <window.Dashboard teams={teamsState} onOpenTeam={(id) => setRoute('team:' + id)} readOnly={user.role === 'cs_helper'} />;
  } else if (route === 'events') {
    body = <window.EventsScreen user={user} defaultTab={user.role === 'staff_admin' ? 'facilities' : 'schedule'} />;
  } else if (route === 'forms') {
    body = <window.FormsScreen user={user} onOpenTeam={(id) => setRoute('team:' + id)} />;
  } else if (route === 'tasks') {
    body = <window.TasksScreen user={user} onNavigate={(r) => setRoute(r)} />;
  } else if (route === 'budget') {
    body = <window.BudgetScreen user={user} teams={teamsState} transactions={window.AppData.TRANSACTIONS} />;
  } else if (route === 'users') {
    body = <window.UsersScreen onBack={() => setRoute('tasks')} />;
  } else if (route === 'connections') {
    body = <window.FormConnectionsScreen user={user} onBack={() => setRoute('tasks')} />;
  } else if (route.startsWith('team:')) {
    const tid = route.slice(5);
    const team = teamsState.find(t => t.id === tid);
    body = team
      ? <window.TeamDrillDown team={team} user={user} onBack={() => setRoute('teams')} onNavigate={(r) => setRoute(r)} />
      : <div className="empty"><div className="empty-title">Team not found</div></div>;
  }

  return (
    <div className="app">
      <window.NavBar
        user={user}
        currentRoute={route}
        onNav={nav}
        onOpenUsers={() => setRoute('users')}
        onOpenConnections={() => setRoute('connections')}
        onLogout={() => setLoggedIn(false)}
      />
      <main className="main">{body}</main>
      <window.RoleSwitcher currentRole={user.role} currentUserId={user.id} onChange={switchRole} />
    </div>
  );
}

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