import { MantineProvider } 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';

// 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';

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={
                <Suspense fallback={<div>Loading...</div>}>
                  <GettingStarted />
                </Suspense>
              } />
              <Route path="installation" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <Installation />
                </Suspense>
              } />
              <Route path="basic-usage" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <BasicUsage />
                </Suspense>
              } />
              <Route path="configuration" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <Configuration />
                </Suspense>
              } />
              <Route path="error-handling" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <ErrorHandling />
                </Suspense>
              } />
              <Route path="type-inference" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <TypeInference />
                </Suspense>
              } />
              <Route path="caching" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <Caching />
                </Suspense>
              } />
              <Route path="interceptors" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <Interceptors />
                </Suspense>
              } />
              <Route path="ai-ml-use-cases" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <AIMLUseCases />
                </Suspense>
              } />
              <Route path="axios-comparison" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <AxiosComparison />
                </Suspense>
              } />
              <Route path="api-reference" element={
                <Suspense fallback={<div>Loading...</div>}>
                  <APIReference />
                </Suspense>
              } />
            </Route>
          </Routes>
        </BrowserRouter>
        <Analytics />
      </CodeHighlightAdapterProvider>
    </MantineProvider>
  );
}