import { MantineProvider, Loader, Stack, Text } from '@mantine/core';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { CodeHighlightAdapterProvider } from '@mantine/code-highlight';
import { lazy, Suspense } from 'react';
import { Analytics } from '@vercel/analytics/react';
import { shikiAdapter } from './utils/shikiAdapter';
import { theme } from './theme';
import { LandingPage } from './pages/LandingPage';
import { DocsLayout } from './layouts/DocsLayout';
import { ErrorBoundary } from './components/ErrorBoundary';

// Lazy load documentation pages for better performance
const GettingStarted = lazy(() => import('./pages/docs/GettingStarted'));
const Installation = lazy(() => import('./pages/docs/Installation'));
const BasicUsage = lazy(() => import('./pages/docs/BasicUsage'));
const Configuration = lazy(() => import('./pages/docs/Configuration'));
const ErrorHandling = lazy(() => import('./pages/docs/ErrorHandling'));
const TypeInference = lazy(() => import('./pages/docs/TypeInference'));
const Caching = lazy(() => import('./pages/docs/Caching'));
const Interceptors = lazy(() => import('./pages/docs/Interceptors'));
const AIMLUseCases = lazy(() => import('./pages/docs/AIMLUseCases'));
const AxiosComparison = lazy(() => import('./pages/docs/AxiosComparison'));
const APIReference = lazy(() => import('./pages/docs/APIReference'));
import '@mantine/core/styles.css';
import '@mantine/code-highlight/styles.css';
import '@mantine/spotlight/styles.css';
import './styles/global.css';
import './styles/fonts.css';

// Loading component for Suspense fallbacks
function LoadingFallback() {
  return (
    <Stack align="center" justify="center" gap="sm" p="xl" style={{ minHeight: '200px' }}>
      <Loader size="md" />
      <Text size="sm" c="dimmed">Loading page...</Text>
    </Stack>
  );
}

export function App() {
  return (
    <MantineProvider theme={theme} defaultColorScheme="dark">
      <CodeHighlightAdapterProvider adapter={shikiAdapter}>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route path="/docs" element={<DocsLayout />}>
              <Route index element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <GettingStarted />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="installation" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <Installation />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="basic-usage" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <BasicUsage />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="configuration" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <Configuration />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="error-handling" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <ErrorHandling />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="type-inference" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <TypeInference />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="caching" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <Caching />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="interceptors" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <Interceptors />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="ai-ml-use-cases" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <AIMLUseCases />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="axios-comparison" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <AxiosComparison />
                  </Suspense>
                </ErrorBoundary>
              } />
              <Route path="api-reference" element={
                <ErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <APIReference />
                  </Suspense>
                </ErrorBoundary>
              } />
            </Route>
          </Routes>
        </BrowserRouter>
        <Analytics />
      </CodeHighlightAdapterProvider>
    </MantineProvider>
  );
}