import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route, Navigate, useLocation, useParams } from "react-router-dom";
import { HelmetProvider } from 'react-helmet-async';
import { OptimizedAppProvider } from "@/contexts/OptimizedAppContext";
import { CookieConsent } from "@/components/ui/cookie-consent";
import { Suspense, lazy } from "react";
import ErrorBoundary from "@/components/ErrorBoundary";
import { HeroGeometricBackground } from "@/components/ui/hero-geometric-bg";
import { LocaleProvider } from "@/i18n/LocaleProvider";
import { AuthProvider } from "@/contexts/AuthProvider";
import { LOCALES, detectBrowserLocale, isLocale, DEFAULT_LOCALE } from "@/i18n/locales";
import { SLUGS, localizedPath, type PageKey } from "@/i18n/paths";

// Immediate load for homepage (critical path)
import Index from "./pages/Index";

// Lazy load route components for code splitting
const Contact = lazy(() => import("./pages/Contact"));
const UeberUns = lazy(() => import("./pages/UeberUns"));
const ToolsIndex = lazy(() => import("./pages/tools/ToolsIndex"));
const ToolDetail = lazy(() => import("./pages/tools/ToolDetail"));
const Categories = lazy(() => import("./pages/tools/Categories"));
const CategoryDetail = lazy(() => import("./pages/tools/CategoryDetail"));
const Submit = lazy(() => import("./pages/tools/Submit"));
const Login = lazy(() => import("./pages/auth/Login"));
const Register = lazy(() => import("./pages/auth/Register"));
const Account = lazy(() => import("./pages/auth/Account"));
const Impressum = lazy(() => import("./pages/legal/Impressum"));
const Datenschutz = lazy(() => import("./pages/legal/Datenschutz"));
const Cookies = lazy(() => import("./pages/legal/Cookies"));
const NotFound = lazy(() => import("./pages/NotFound"));

// Loading component for suspense boundaries
const PageLoader = () => (
  <div className="min-h-screen bg-background flex items-center justify-center">
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
  </div>
);

// Optimized query client with better defaults
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      gcTime: 1000 * 60 * 10, // 10 minutes
    },
  },
});

function RootRedirect() {
  const loc = detectBrowserLocale()
  return <Navigate to={`/${loc}`} replace />
}

function LegacyRedirect({ page, paramKey }: { page: PageKey; paramKey?: string }) {
  const location = useLocation()
  const params = useParams()
  const slug = paramKey ? params[paramKey] : undefined
  const to = localizedPath("de", page, { slug }) + location.search + location.hash
  return <Navigate to={to} replace />
}

function LocaleLayout() {
  const { lang } = useParams<{ lang: string }>()
  if (!isLocale(lang)) {
    return <Navigate to={`/${DEFAULT_LOCALE}`} replace />
  }
  return (
    <LocaleProvider>
      <LocalizedRoutes />
    </LocaleProvider>
  )
}

/**
 * Routes inside the /:lang layout. We mount one route per page-key, but the
 * URL segment varies per locale (e.g. "tools" vs "herramientas"). To support
 * that with a single tree, we register every locale's slug as a route.
 */
function LocalizedRoutes() {
  const pages: Array<[PageKey, JSX.Element, boolean]> = [
    ["home", <Index />, false],
    ["tools", <ToolsIndex />, false],
    ["tool", <ToolDetail />, true],
    ["categories", <Categories />, false],
    ["category", <CategoryDetail />, true],
    ["submit", <Submit />, false],
    ["about", <UeberUns />, false],
    ["contact", <Contact />, false],
    ["imprint", <Impressum />, false],
    ["privacy", <Datenschutz />, false],
    ["cookies", <Cookies />, false],
    ["login", <Login />, false],
    ["register", <Register />, false],
    ["account", <Account />, false],
  ]
  const seen = new Set<string>()
  const out: JSX.Element[] = []
  for (const [key, el, hasSlug] of pages) {
    if (key === "home") {
      out.push(<Route key="home-index" index element={el} />)
      continue
    }
    for (const loc of LOCALES) {
      const seg = SLUGS[key][loc]
      if (!seg) continue
      const path = hasSlug ? `${seg}/:slug` : seg
      if (seen.has(path)) continue
      seen.add(path)
      out.push(<Route key={`${key}-${loc}-${path}`} path={path} element={el} />)
    }
  }
  out.push(<Route key="nf" path="*" element={<NotFound />} />)
  return <Routes>{out}</Routes>
}

const App = () => (
  <ErrorBoundary>
    <QueryClientProvider client={queryClient}>
      <HelmetProvider>
        <OptimizedAppProvider>
          <AuthProvider>
          <TooltipProvider>
            {/* Fixed background animation across entire website */}
            <div style={{
              position: 'fixed',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              zIndex: 0,
              pointerEvents: 'none'
            }}>
              <HeroGeometricBackground />
            </div>
            
            {/* Main content */}
            <div style={{ position: 'relative', zIndex: 1 }}>
              <Toaster />
              <Sonner />
              <BrowserRouter>
                <ErrorBoundary fallback={<PageLoader />}>
                  <Suspense fallback={<PageLoader />}>
                    <Routes>
                      <Route path="/" element={<RootRedirect />} />

                      {/* Legacy DE paths → /de/... */}
                      <Route path="/tools" element={<LegacyRedirect page="tools" />} />
                      <Route path="/tools/:slug" element={<LegacyRedirect page="tool" paramKey="slug" />} />
                      <Route path="/kategorien" element={<LegacyRedirect page="categories" />} />
                      <Route path="/kategorien/:slug" element={<LegacyRedirect page="category" paramKey="slug" />} />
                      <Route path="/submit" element={<LegacyRedirect page="submit" />} />
                      <Route path="/leistungen" element={<LegacyRedirect page="tools" />} />
                      <Route path="/kontakt" element={<LegacyRedirect page="contact" />} />
                      <Route path="/ueber-uns" element={<LegacyRedirect page="about" />} />
                      <Route path="/impressum" element={<LegacyRedirect page="imprint" />} />
                      <Route path="/datenschutz" element={<LegacyRedirect page="privacy" />} />
                      <Route path="/cookie-richtlinie" element={<LegacyRedirect page="cookies" />} />

                      {/* Localized routes under /:lang/* */}
                      <Route path="/:lang/*" element={<LocaleLayout />} />

                      <Route path="*" element={<NotFound />} />
                    </Routes>
                  </Suspense>
                </ErrorBoundary>
                <CookieConsent />
              </BrowserRouter>
            </div>
          </TooltipProvider>
          </AuthProvider>
        </OptimizedAppProvider>
      </HelmetProvider>
    </QueryClientProvider>
  </ErrorBoundary>
);

export default App;