import React, { Suspense } from 'react';
import { HelmetProvider } from 'react-helmet-async';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import IntersectObserver from '@/components/common/IntersectObserver';
import ErrorBoundary from '@/components/ErrorBoundary';
import { CookieConsentBanner } from '@/components/gdpr/CookieConsentBanner';
import MainLayout from '@/components/layouts/MainLayout';
import { TripProviders } from '@/components/providers/TripProviders';
import { DynamicSEO } from '@/components/seo/DynamicSEO';
import { RedirectHandler } from '@/components/seo/RedirectHandler';
import { Skeleton } from '@/components/ui/skeleton';
import { Toaster } from '@/components/ui/toaster';
import { AuthProvider } from '@/contexts/AuthContext';
import { CurrentTripProvider } from '@/contexts/CurrentTripContext';
import { RouteGuard } from '@/components/common/RouteGuard';
import routes from './routes';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      retry: 1,
    },
  },
});

const Loading = () => (
  <div className="flex items-center justify-center min-h-screen">
    <Skeleton className="w-[100px] h-[20px] bg-muted" />
  </div>
);

const App: React.FC = () => {
  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <HelmetProvider>
          <AuthProvider>
            <CurrentTripProvider>
              <TripProviders>
              <Router>
                <DynamicSEO />
                <RedirectHandler />
                <IntersectObserver />
                <Suspense fallback={<Loading />}>
                  <RouteGuard>
                    <Routes>
                      {routes.map((route, index) => {
                        // Admin routes with nested layout
                        if (route.children) {
                          return (
                            <Route key={index} path={route.path} element={route.element}>
                              {route.children.map((child, childIndex) => {
                                if (child.index) {
                                  return (
                                    <Route
                                      key={`${index}-${childIndex}`}
                                      index
                                      element={child.element}
                                    />
                                  );
                                }
                                return (
                                  <Route
                                    key={`${index}-${childIndex}`}
                                    path={child.path}
                                    element={child.element}
                                  />
                                );
                              })}
                            </Route>
                          );
                        }
                        // Regular routes with MainLayout
                        return (
                          <Route
                            key={index}
                            path={route.path}
                            element={
                              route.path.startsWith('/admin') ? (
                                route.element
                              ) : (
                                <MainLayout>{route.element}</MainLayout>
                              )
                            }
                          />
                        );
                      })}
                    </Routes>
                  </RouteGuard>
                </Suspense>
                <Toaster />
                <CookieConsentBanner />
              </Router>
            </TripProviders>
          </CurrentTripProvider>
        </AuthProvider>
      </HelmetProvider>
    </QueryClientProvider>
  </ErrorBoundary>
);
};

export default App;
