fotospiel-app/resources/js/admin/router.tsx

import React from 'react';
import { createBrowserRouter, Outlet, Navigate, useLocation, useParams } from 'react-router-dom';
import RouteErrorElement from '@/components/RouteErrorElement';
import { useAuth } from './auth/context';
import {
  ADMIN_BASE_PATH,
  ADMIN_DEFAULT_AFTER_LOGIN_PATH,
  ADMIN_EVENTS_PATH,
  ADMIN_LOGIN_PATH,
  ADMIN_LOGIN_START_PATH,
  ADMIN_PUBLIC_LANDING_PATH,
} from './constants';
const AuthCallbackPage = React.lazy(() => import('./mobile/AuthCallbackPage'));
const LoginStartPage = React.lazy(() => import('./mobile/LoginStartPage'));
const LogoutPage = React.lazy(() => import('./mobile/LogoutPage'));
const MobileEventsPage = React.lazy(() => import('./mobile/EventsPage'));
const MobileEventDetailPage = React.lazy(() => import('./mobile/EventDetailPage'));
const MobileEventPhotoboothPage = React.lazy(() => import('./mobile/EventPhotoboothPage'));
const MobileBrandingPage = React.lazy(() => import('./mobile/BrandingPage'));
const MobileEventFormPage = React.lazy(() => import('./mobile/EventFormPage'));
const MobileQrPrintPage = React.lazy(() => import('./mobile/QrPrintPage'));
const MobileQrLayoutCustomizePage = React.lazy(() => import('./mobile/QrLayoutCustomizePage'));
const MobileEventGuestNotificationsPage = React.lazy(() => import('./mobile/EventGuestNotificationsPage'));
const MobileEventPhotosPage = React.lazy(() => import('./mobile/EventPhotosPage'));
const MobileEventMembersPage = React.lazy(() => import('./mobile/EventMembersPage'));
const MobileEventTasksPage = React.lazy(() => import('./mobile/EventTasksPage'));
const MobileEventRecapPage = React.lazy(() => import('./mobile/EventRecapPage'));
const MobileNotificationsPage = React.lazy(() => import('./mobile/NotificationsPage'));
const MobileProfilePage = React.lazy(() => import('./mobile/ProfilePage'));
const MobileBillingPage = React.lazy(() => import('./mobile/BillingPage'));
const MobileSettingsPage = React.lazy(() => import('./mobile/SettingsPage'));
const MobileLoginPage = React.lazy(() => import('./mobile/LoginPage'));
const MobileDashboardPage = React.lazy(() => import('./mobile/DashboardPage'));
const MobileTasksTabPage = React.lazy(() => import('./mobile/TasksTabPage'));
const MobileUploadsTabPage = React.lazy(() => import('./mobile/UploadsTabPage'));
const MobileAnimatedOutlet = React.lazy(() => import('./mobile/components/MobileAnimatedOutlet'));

function RequireAuth() {
  const { status } = useAuth();
  const location = useLocation();

  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Bitte warten ...
      </div>
    );
  }

  if (status === 'unauthenticated') {
    return <Navigate to={ADMIN_LOGIN_START_PATH} state={{ from: location }} replace />;
  }

  return (
    <React.Suspense fallback={<Outlet />}>
      <MobileAnimatedOutlet />
    </React.Suspense>
  );
}

function LandingGate() {
  const { status } = useAuth();

  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Bitte warten ...
      </div>
    );
  }

  if (status === 'authenticated') {
    return <Navigate to={ADMIN_DEFAULT_AFTER_LOGIN_PATH} replace />;
  }

  return <Navigate to={ADMIN_LOGIN_PATH} replace />;
}

function RequireAdminAccess({ children }: { children: React.ReactNode }) {
  const { user } = useAuth();

  if (user?.role === 'member') {
    return <Navigate to={ADMIN_EVENTS_PATH} replace />;
  }

  return <>{children}</>;
}

function RedirectToMobileEvent({ buildPath }: { buildPath: (slug: string) => string }) {
  const { slug } = useParams<{ slug?: string }>();
  if (!slug) {
    return <Navigate to={ADMIN_EVENTS_PATH} replace />;
  }
  return <Navigate to={buildPath(slug)} replace />;
}

export const router = createBrowserRouter([
  {
    path: ADMIN_BASE_PATH,
    element: <Outlet />,
    errorElement: <RouteErrorElement />,
    children: [
      { index: true, element: <LandingGate /> },
      { path: 'login', element: <MobileLoginPage /> },
      { path: 'mobile/login', element: <MobileLoginPage /> },
      { path: 'start', element: <LoginStartPage /> },
      { path: 'logout', element: <LogoutPage /> },
      { path: 'auth/callback', element: <AuthCallbackPage /> },
      {
        element: <RequireAuth />,
        children: [
          { path: 'dashboard', element: <RequireAdminAccess><MobileDashboardPage /></RequireAdminAccess> },
          { path: 'live', element: <RequireAdminAccess><MobileDashboardPage /></RequireAdminAccess> },
          { path: 'events', element: <Navigate to={ADMIN_EVENTS_PATH} replace /> },
          { path: 'events/new', element: <Navigate to={`${ADMIN_EVENTS_PATH}/new`} replace /> },
          { path: 'events/:slug', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
          { path: 'events/:slug/recap', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
          { path: 'events/:slug/edit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/edit`} /> },
          { path: 'events/:slug/photos', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/photos`} /> },
          { path: 'events/:slug/members', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/members`} /> },
          { path: 'events/:slug/tasks', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/tasks`} /> },
          { path: 'events/:slug/invites', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/qr`} /> },
          { path: 'events/:slug/branding', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/branding`} /> },
          { path: 'events/:slug/photobooth', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/photobooth`} /> },
          { path: 'events/:slug/guest-notifications', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/guest-notifications`} /> },
          { path: 'events/:slug/toolkit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
          { path: 'mobile/events', element: <MobileEventsPage /> },
          { path: 'mobile/events/:slug', element: <MobileEventDetailPage /> },
          { path: 'mobile/events/:slug/branding', element: <RequireAdminAccess><MobileBrandingPage /></RequireAdminAccess> },
          { path: 'mobile/events/new', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/edit', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/qr', element: <RequireAdminAccess><MobileQrPrintPage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/qr/customize/:tokenId?', element: <RequireAdminAccess><MobileQrLayoutCustomizePage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/photos', element: <MobileEventPhotosPage /> },
          { path: 'mobile/events/:slug/recap', element: <RequireAdminAccess><MobileEventRecapPage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/members', element: <RequireAdminAccess><MobileEventMembersPage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/tasks', element: <MobileEventTasksPage /> },
          { path: 'mobile/events/:slug/photobooth', element: <RequireAdminAccess><MobileEventPhotoboothPage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/guest-notifications', element: <RequireAdminAccess><MobileEventGuestNotificationsPage /></RequireAdminAccess> },
          { path: 'mobile/notifications', element: <MobileNotificationsPage /> },
          { path: 'mobile/profile', element: <RequireAdminAccess><MobileProfilePage /></RequireAdminAccess> },
          { path: 'mobile/billing', element: <RequireAdminAccess><MobileBillingPage /></RequireAdminAccess> },
          { path: 'mobile/settings', element: <RequireAdminAccess><MobileSettingsPage /></RequireAdminAccess> },
          { path: 'mobile/dashboard', element: <MobileDashboardPage /> },
          { path: 'mobile/tasks', element: <MobileTasksTabPage /> },
          { path: 'mobile/uploads', element: <MobileUploadsTabPage /> },
        ],
      },
    ],
  },
  {
    path: '*',
    element: <Navigate to={ADMIN_PUBLIC_LANDING_PATH} replace />,
    errorElement: <RouteErrorElement />,
  },
]);