import { Routes, Route, Navigate } from 'react-router-dom'
import { useAuth } from './contexts/AuthContext'
import { Skeleton } from './components/Skeleton'
import { ErrorBoundary } from './components/ErrorBoundary'
import { SectionErrorBoundary } from './components/ErrorBoundaryWithI18n'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import Spaces from './pages/Spaces'
import Projects from './pages/Projects'
import Tasks from './pages/Tasks'
import ProjectSettings from './pages/ProjectSettings'
import MySettings from './pages/MySettings'
import AuditPage from './pages/AuditPage'
import WorkloadPage from './pages/WorkloadPage'
import ProjectHealthPage from './pages/ProjectHealthPage'
import ProtectedRoute from './components/ProtectedRoute'
import Layout from './components/Layout'

function App() {
  const { isAuthenticated, loading } = useAuth()

  if (loading) {
    return (
      <div className="container" style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
        <Skeleton variant="rect" width="100%" height={60} style={{ marginBottom: '24px' }} />
        <Skeleton variant="rect" width="100%" height={400} />
      </div>
    )
  }

  return (
    <ErrorBoundary variant="page">
      <Routes>
        <Route
          path="/login"
          element={isAuthenticated ? <Navigate to="/" /> : <Login />}
        />
        <Route
          path="/"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Dashboard">
                  <Dashboard />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/spaces"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Spaces">
                  <Spaces />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/spaces/:spaceId"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Projects">
                  <Projects />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/projects/:projectId"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Tasks">
                  <Tasks />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/projects/:projectId/settings"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Project Settings">
                  <ProjectSettings />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/audit"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Audit">
                  <AuditPage />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/workload"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Workload">
                  <WorkloadPage />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/project-health"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Project Health">
                  <ProjectHealthPage />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/my-settings"
          element={
            <ProtectedRoute>
              <Layout>
                <SectionErrorBoundary sectionName="Settings">
                  <MySettings />
                </SectionErrorBoundary>
              </Layout>
            </ProtectedRoute>
          }
        />
      </Routes>
    </ErrorBoundary>
  )
}

export default App