LabelingSystem/web/apps/lq_label/src/app/app.tsx

import { Route, Routes, Navigate } from 'react-router-dom';
import { useAtomValue } from 'jotai';
import { Layout } from '../components/layout';
import { ThemeProvider } from '../components/theme-provider';
import { ProtectedRoute } from '../components/protected-route';
import { AdminRoute } from '../components/admin-route';
import { LoginForm } from '../components/login-form';
import { RegisterForm } from '../components/register-form';
import { OAuthCallback } from '../components/oauth-callback';
import { isAuthenticatedAtom } from '../atoms/auth-atoms';
import {
  HomeView,
  NotFoundView,
  ProjectsView,
  ProjectEditView,
  ProjectConfigView,
  TasksView,
  AnnotationsView,
  AnnotationView,
  UserManagementView,
  MyTasksView,
  ExternalProjectsView,
} from '../views';
import { ProjectAnnotationView } from '../views/project-annotation-view';
import { EditorTest } from '../views/editor-test';
import { ToastContainer } from '../components/toast-container';
import { ErrorBoundary } from '../components/error-boundary';

/**
 * Annotation Platform Application
 * 
 * This is the main application component for the annotation platform.
 * It provides routing and integrates with Layout component for
 * backend management UI style.
 * 
 * Includes JWT authentication with protected routes.
 * 
 * Requirements: 4.1, 4.2, 4.8, 7.3, 7.6, 10.1, 10.3, 10.5, 10.7, 1.1, 2.1, 4.1
 */
export function App() {
  const isAuthenticated = useAtomValue(isAuthenticatedAtom);

  return (
    <ThemeProvider>
      <ErrorBoundary>
        <Routes>
          {/* Public Routes - Login and Register */}
          <Route
            path="/login"
            element={
              isAuthenticated ? <Navigate to="/" replace /> : <LoginForm />
            }
          />
          <Route
            path="/register"
            element={
              isAuthenticated ? <Navigate to="/" replace /> : <RegisterForm />
            }
          />
          <Route path="/auth/callback" element={<OAuthCallback />} />

          {/* Protected Routes - Require Authentication */}
          <Route
            path="/*"
            element={
              <ProtectedRoute>
                <Layout>
                  <Routes>
                    {/* Home Route */}
                    <Route path="/" element={<HomeView />} />

                    {/* Editor Test Route */}
                    <Route path="/editor-test" element={<EditorTest />} />

                    {/* Projects Routes */}
                    <Route path="/projects" element={<ProjectsView />} />
                    <Route
                      path="/projects/:id/edit"
                      element={<ProjectEditView />}
                    />
                    <Route
                      path="/projects/:projectId/config"
                      element={<ProjectConfigView />}
                    />
                    <Route
                      path="/projects/:projectId/annotate"
                      element={<ProjectAnnotationView />}
                    />

                    {/* External Projects Routes (Admin Only) */}
                    <Route
                      path="/external-projects"
                      element={
                        <AdminRoute>
                          <ExternalProjectsView />
                        </AdminRoute>
                      }
                    />

                    {/* Tasks Routes (Admin Only for /tasks) */}
                    <Route
                      path="/tasks"
                      element={
                        <AdminRoute>
                          <TasksView />
                        </AdminRoute>
                      }
                    />
                    <Route path="/my-tasks" element={<MyTasksView />} />
                    <Route
                      path="/tasks/:id/annotate"
                      element={<AnnotationView />}
                    />

                    {/* Annotations Routes */}
                    <Route path="/annotations" element={<AnnotationsView />} />

                    {/* User Management Routes (Admin Only) */}
                    <Route
                      path="/users"
                      element={
                        <AdminRoute>
                          <UserManagementView />
                        </AdminRoute>
                      }
                    />

                    {/* 404 Not Found */}
                    <Route path="*" element={<NotFoundView />} />
                  </Routes>
                </Layout>
              </ProtectedRoute>
            }
          />
        </Routes>

        {/* Global Toast Container */}
        <ToastContainer />
      </ErrorBoundary>
    </ThemeProvider>
  );
}

export default App;