/* =====================================================================
 * Point d'entrée : routage simple, mise en page et contrôle d'accès.
 * ===================================================================== */

const PAGE_PERMS = {
  dashboard: null,
  bilan: 'sap',
  historique: 'sap',
  jsp: 'jsp',
  admin: 'admin',
  journal: null,
};

const PAGE_NAMES = { bilan: 'Bilans SAP', historique: 'Bilans SAP', jsp: 'Tenues JSP', admin: 'Gestion accès', journal: 'Journal' };

function Shell() {
  const { can, currentUser, createBilan, printNode, session, dataStatus, refreshData, needsSetup } = useApp();
  const [route, setRoute] = useState({ page: 'dashboard' });
  const [menuOpen, setMenuOpen] = useState(false);

  const navigate = useCallback(
    (page, params = {}) => {
      if (page === 'nouveau') {
        setRoute({ page: 'bilan', id: createBilan() });
      } else {
        setRoute({ page, ...params });
      }
      setMenuOpen(false);
      window.scrollTo(0, 0);
    },
    [createBilan],
  );

  useEffect(() => {
    if (!currentUser) setRoute({ page: 'dashboard' });
  }, [currentUser]);

  if (session.status === 'loading') {
    return (
      <FullScreenMessage>
        <div className="boot-spinner mx-auto mb-3" />
        <p>Connexion au serveur…</p>
      </FullScreenMessage>
    );
  }

  if (!currentUser) {
    return (
      <Fragment>
        <LoginScreen />
        <Toasts />
      </Fragment>
    );
  }

  if (currentUser.mustChangePassword) {
    return (
      <Fragment>
        <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-red-900" />
        <ChangePasswordModal forced />
        <Toasts />
      </Fragment>
    );
  }

  if (dataStatus !== 'ready') {
    return (
      <FullScreenMessage>
        {dataStatus === 'error' ? (
          <Fragment>
            <p className="mb-4">Impossible de charger les données depuis le serveur.</p>
            <Button icon={RotateCcw} onClick={() => refreshData()}>
              Réessayer
            </Button>
          </Fragment>
        ) : (
          <Fragment>
            <div className="boot-spinner mx-auto mb-3" />
            <p>Chargement des données…</p>
          </Fragment>
        )}
      </FullScreenMessage>
    );
  }

  const perm = PAGE_PERMS[route.page];
  const allowed = !perm || can[perm];

  let content;
  if (!allowed) content = <AccessDenied module={PAGE_NAMES[route.page]} />;
  else if (route.page === 'bilan') content = <BilanWizard key={route.id} bilanId={route.id} navigate={navigate} />;
  else if (route.page === 'historique') content = <Historique navigate={navigate} />;
  else if (route.page === 'jsp') content = <JspModule />;
  else if (route.page === 'admin') content = <UsersModule />;
  else if (route.page === 'journal') content = <JournalModule />;
  else content = <Dashboard navigate={navigate} />;

  return (
    <div className="min-h-screen">
      <Sidebar page={route.page} navigate={navigate} open={menuOpen} onClose={() => setMenuOpen(false)} />

      <div className="lg:pl-64">
        <header className="sticky top-0 z-20 flex items-center gap-3 border-b border-slate-200 bg-white/90 px-4 py-3 backdrop-blur lg:hidden">
          <IconButton icon={Menu} title="Menu" onClick={() => setMenuOpen(true)} />
          <Siren className="h-5 w-5 text-red-600" />
          <span className="font-bold">SAP Manager</span>
          <SyncIndicator className="ml-auto text-slate-500" />
          <span>
            <UserAvatar user={currentUser} size="sm" />
          </span>
        </header>

        <main className="mx-auto max-w-[1400px] px-4 py-6 sm:px-6 lg:px-8">{content}</main>
      </div>

      <Toasts />
      {needsSetup && can.admin && <SetupModal />}
      {printNode && ReactDOM.createPortal(printNode, document.getElementById('print-root'))}
    </div>
  );
}

function App() {
  return (
    <AppProvider>
      <Shell />
    </AppProvider>
  );
}

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