shinkan-jinkendo/frontend/src/App.jsx

import React, { Suspense, lazy } from 'react'
import {
  RouterProvider,
  createBrowserRouter,
  Navigate,
  NavLink,
  useLocation,
  Outlet,
} from 'react-router-dom'
import { AuthProvider, useAuth } from './context/AuthContext'
import { ToastProvider } from './context/ToastContext'
import { OrgInboxProvider, useOrgInbox } from './context/OrgInboxContext'
import DesktopSidebar from './components/DesktopSidebar'
import { getMainNavItems } from './config/appNav'
import AdminHomeRedirect from './components/AdminHomeRedirect'
import PlatformAdminRoute from './components/PlatformAdminRoute'
import ActiveClubSwitcher from './components/ActiveClubSwitcher'
import InactiveMembershipBanner from './components/InactiveMembershipBanner'
import './app.css'

const LoginPage = lazy(() => import('./pages/LoginPage'))
const VerifyPage = lazy(() => import('./pages/VerifyPage'))
const Dashboard = lazy(() => import('./pages/Dashboard'))
const AccountSettingsPage = lazy(() => import('./pages/AccountSettingsPage'))
const SettingsSystemInfoPage = lazy(() => import('./pages/SettingsSystemInfoPage'))
const ExercisesListPage = lazy(() => import('./pages/ExercisesListPage'))
const ExerciseDetailPage = lazy(() => import('./pages/ExerciseDetailPage'))
const ExerciseFormPage = lazy(() => import('./pages/ExerciseFormPage'))
const ClubsPage = lazy(() => import('./pages/ClubsPage'))
const InboxPage = lazy(() => import('./pages/InboxPage'))
const SkillsPage = lazy(() => import('./pages/SkillsPage'))
const TrainingPlanningPage = lazy(() => import('./pages/TrainingPlanningPage'))
const TrainingFrameworkProgramsListPage = lazy(() =>
  import('./pages/TrainingFrameworkProgramsListPage'),
)
const TrainingFrameworkProgramEditPage = lazy(() =>
  import('./pages/TrainingFrameworkProgramEditPage'),
)
const TrainingModulesListPage = lazy(() => import('./pages/TrainingModulesListPage'))
const TrainingModuleEditPage = lazy(() => import('./pages/TrainingModuleEditPage'))
const TrainingUnitRunPage = lazy(() => import('./pages/TrainingUnitRunPage'))
const TrainingCoachPage = lazy(() => import('./pages/TrainingCoachPage'))
const AdminCatalogsPage = lazy(() => import('./pages/AdminCatalogsPage'))
const AdminHierarchyPage = lazy(() => import('./pages/AdminHierarchyPage'))
const AdminMaturityModelsPage = lazy(() => import('./pages/AdminMaturityModelsPage'))
const TrainerContextsPage = lazy(() => import('./pages/TrainerContextsPage'))
const MediaWikiImportPage = lazy(() => import('./pages/MediaWikiImportPage'))
const AdminUsersPage = lazy(() => import('./pages/AdminUsersPage'))
const MediaLibraryPage = lazy(() => import('./pages/MediaLibraryPage'))
const LegalPage = lazy(() => import('./pages/LegalPage'))
const AdminLegalDocumentsPage = lazy(() => import('./pages/AdminLegalDocumentsPage'))
const SettingsLegalPage = lazy(() => import('./pages/SettingsLegalPage'))

/** Shield „Admin“: nur Super-Admin (global). Vereinsorga: Vereine → Mitglieder. */
function computeShowAdminNav(currentUser) {
  return currentUser?.role === 'superadmin'
}

function AppRouteFallback() {
  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--bg)',
      }}
    >
      <div className="spinner"></div>
    </div>
  )
}

// Bottom Navigation (Mobile)
function Nav({ showAdminNav }) {
  const { canAccessOrgInbox, inboxCount } = useOrgInbox()
  const items = getMainNavItems(showAdminNav, { showInbox: canAccessOrgInbox })
  const loc = useLocation()

  const navItemActive = (pathname, item, routerIsActive) => {
    if (item.to.startsWith('/admin')) return pathname.startsWith('/admin')
    return routerIsActive
  }

  return (
    <nav className="bottom-nav">
      {items.map((item) => (
        <NavLink
          key={item.to}
          to={item.to}
          end={!!item.end}
          className={({ isActive }) =>
            'nav-item' + (navItemActive(loc.pathname, item, isActive) ? ' active' : '')
          }
        >
          <item.Icon size={26} strokeWidth={2} />
          {item.to === '/inbox' && inboxCount > 0 ? (
            <span className="nav-item__badge" aria-label={`${inboxCount} offen`}>
              {inboxCount > 99 ? '99+' : inboxCount}
            </span>
          ) : null}
          <span>{item.shortLabel || item.label}</span>
        </NavLink>
      ))}
    </nav>
  )
}

function ProtectedLayout() {
  const { isAuthenticated, loading, user, logout } = useAuth()

  const handleLogout = () => {
    if (confirm('Wirklich abmelden?')) {
      logout()
      window.location.href = '/'
    }
  }

  if (loading) {
    return (
      <div
        style={{
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'var(--bg)',
        }}
      >
        <div className="spinner"></div>
      </div>
    )
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />
  }

  const showAdminNav = computeShowAdminNav(user)

  return (
    <OrgInboxProvider user={user}>
      <DesktopSidebar showAdminNav={showAdminNav} user={user} onLogout={handleLogout} />
      <div className="app-shell">
        <div className="app-shell__column">
          <div className="app-header app-header--mobile app-header--mobile-stack">
            <div className="app-header-mobile__top">
              <div className="app-logo">🥋 Shinkan</div>
            </div>
            <ActiveClubSwitcher variant="mobile" />
          </div>
          <div className="app-main">
            <InactiveMembershipBanner />
            <Outlet />
          </div>
          <Nav showAdminNav={showAdminNav} />
        </div>
      </div>
    </OrgInboxProvider>
  )
}

function PublicRoute({ children }) {
  const { isAuthenticated, loading } = useAuth()

  if (loading) {
    return (
      <div
        style={{
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'var(--bg)',
        }}
      >
        <div className="spinner"></div>
      </div>
    )
  }

  return !isAuthenticated ? children : <Navigate to="/" replace />
}

/**
 * Data Router — erforderlich für `useBlocker` (ungespeicherte Änderungen).
 * Klassisches `BrowserRouter` stellt keinen DataRouterContext bereit; ohne Migration
 * werfen Seiten mit `useUnsavedChangesBlocker` beim Rendern eine Invariante.
 */
const appRouter = createBrowserRouter([
  { path: '/verify', element: <VerifyPage /> },
  {
    path: '/login',
    element: (
      <PublicRoute>
        <LoginPage />
      </PublicRoute>
    ),
  },
  { path: '/impressum', element: <LegalPage type="impressum" /> },
  { path: '/datenschutz', element: <LegalPage type="datenschutz" /> },
  { path: '/nutzungsbedingungen', element: <LegalPage type="nutzungsbedingungen" /> },
  { path: '/medienrichtlinie', element: <LegalPage type="medienrichtlinie" /> },
  {
    element: <ProtectedLayout />,
    children: [
      { index: true, element: <Dashboard /> },
      { path: 'profile', element: <Navigate to="/settings" replace /> },
      { path: 'settings', element: <AccountSettingsPage /> },
      { path: 'settings/system', element: <SettingsSystemInfoPage /> },
      { path: 'settings/legal', element: <SettingsLegalPage /> },
      { path: 'media', element: <MediaLibraryPage /> },
      {
        path: 'exercises',
        children: [
          { index: true, element: <ExercisesListPage /> },
          { path: 'new', element: <ExerciseFormPage /> },
          { path: ':id/edit', element: <ExerciseFormPage /> },
          { path: ':id', element: <ExerciseDetailPage /> },
        ],
      },
      { path: 'clubs', element: <ClubsPage /> },
      { path: 'inbox', element: <InboxPage /> },
      { path: 'skills', element: <SkillsPage /> },
      { path: 'planning/framework-programs/new', element: <TrainingFrameworkProgramEditPage /> },
      { path: 'planning/framework-programs/:id', element: <TrainingFrameworkProgramEditPage /> },
      { path: 'planning/framework-programs', element: <TrainingFrameworkProgramsListPage /> },
      { path: 'planning/training-modules/new', element: <TrainingModuleEditPage /> },
      { path: 'planning/training-modules/:id', element: <TrainingModuleEditPage /> },
      { path: 'planning/training-modules', element: <TrainingModulesListPage /> },
      { path: 'planning/run/:unitId/coach', element: <TrainingCoachPage /> },
      { path: 'planning/run/:unitId', element: <TrainingUnitRunPage /> },
      { path: 'planning', element: <TrainingPlanningPage /> },
      { path: 'admin', element: <AdminHomeRedirect /> },
      {
        path: 'admin/users',
        element: (
          <PlatformAdminRoute>
            <AdminUsersPage />
          </PlatformAdminRoute>
        ),
      },
      {
        path: 'admin/hierarchy',
        element: (
          <PlatformAdminRoute>
            <AdminHierarchyPage />
          </PlatformAdminRoute>
        ),
      },
      {
        path: 'admin/maturity-models',
        element: (
          <PlatformAdminRoute>
            <AdminMaturityModelsPage />
          </PlatformAdminRoute>
        ),
      },
      {
        path: 'admin/catalogs',
        element: (
          <PlatformAdminRoute>
            <AdminCatalogsPage />
          </PlatformAdminRoute>
        ),
      },
      {
        path: 'admin/mediawiki-import',
        element: (
          <PlatformAdminRoute>
            <MediaWikiImportPage />
          </PlatformAdminRoute>
        ),
      },
      {
        path: 'admin/legal-documents',
        element: (
          <PlatformAdminRoute>
            <AdminLegalDocumentsPage />
          </PlatformAdminRoute>
        ),
      },
      { path: 'trainer-contexts', element: <TrainerContextsPage /> },
    ],
  },
  { path: '*', element: <Navigate to="/" replace /> },
])

function App() {
  return (
    <AuthProvider>
      <ToastProvider>
        <Suspense fallback={<AppRouteFallback />}>
          <RouterProvider router={appRouter} />
        </Suspense>
      </ToastProvider>
    </AuthProvider>
  )
}

export default App