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, useLocation } from "react-router-dom";
import { useEffect, lazy, Suspense } from "react";
import ScrollToTop from "./components/ScrollToTop";
import ScrollToTopButton from "./components/ScrollToTopButton";
import ErrorBoundary from "./components/ErrorBoundary";
import { trackPageView } from "@/lib/gtm";

// Conditionally import DevTools only in development
const ReactQueryDevtools = import.meta.env.DEV
  ? lazy(() => import('@tanstack/react-query-devtools').then(m => ({ default: m.ReactQueryDevtools })))
  : null;

// Lazy load route components for better performance
const Index = lazy(() => import("./pages/Index"));
const Contact = lazy(() => import("./pages/Contact"));
const Over = lazy(() => import("./pages/Over"));
const Kenniscentrum = lazy(() => import("./pages/Kenniscentrum"));
const AllArticles = lazy(() => import("./pages/AllArticles"));
const PillarPage = lazy(() => import("./pages/PillarPage"));
const ArticlePage = lazy(() => import("./pages/ArticlePage"));
const Privacy = lazy(() => import("./pages/Privacy"));
const Werkwijze = lazy(() => import("./pages/Werkwijze"));
const NotFound = lazy(() => import("./pages/NotFound"));
const FeedbackPage = lazy(() => import("./pages/FeedbackPage"));
const LinkedInImageGenerator = lazy(() => import("./pages/LinkedInImageGenerator"));
const VideoGenerator = lazy(() => import("./pages/VideoGenerator"));
const FactuurTemplateSportpunt = lazy(() => import("./pages/FactuurTemplateSportpunt"));
const VoorstelSMR = lazy(() => import("./pages/VoorstelSMR"));
const RapportSMR = lazy(() => import("./pages/RapportSMR"));

// Interne pagina's: alleen zichtbaar in de ontwikkelomgeving (localhost of Lovable preview),
// niet op de gepubliceerde site (bloei.ai / bloei.lovable.app).
const isDevEnvironment =
  import.meta.env.DEV ||
  window.location.hostname === "localhost" ||
  window.location.hostname.includes("id-preview");

const DevOnlyRoute = ({ children }: { children: React.ReactNode }) =>
  isDevEnvironment ? <>{children}</> : <NotFound />;

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

// GTM Route Tracker Component
const GTMRouteTracker = () => {
  const location = useLocation();

  useEffect(() => {
    trackPageView(location.pathname + location.search);
  }, [location]);

  return null;
};

const App = () => (
  <QueryClientProvider client={queryClient}>
    {ReactQueryDevtools && (
      <Suspense fallback={null}>
        <ReactQueryDevtools initialIsOpen={false} />
      </Suspense>
    )}
    <TooltipProvider>
      <Toaster />
      <Sonner />
      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <ScrollToTop />
        <ScrollToTopButton />
        <GTMRouteTracker />
        <ErrorBoundary>
          <Suspense fallback={<div className="min-h-screen flex items-center justify-center"><div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div></div>}>
            <Routes>
              <Route path="/" element={<Index />} />
              <Route path="/contact" element={<Contact />} />
              <Route path="/over" element={<Over />} />
              <Route path="/kennis" element={<Kenniscentrum />} />
              <Route path="/kennis/artikelen" element={<AllArticles />} />
              <Route path="/kennis/:pillarSlug" element={<ErrorBoundary><PillarPage /></ErrorBoundary>} />
              <Route path="/kennis/:pillarSlug/:articleSlug" element={<ErrorBoundary><ArticlePage /></ErrorBoundary>} />
              <Route path="/privacy" element={<Privacy />} />
              <Route path="/werkwijze" element={<Werkwijze />} />
              <Route path="/feedback" element={<FeedbackPage />} />
              <Route path="/feedback/:code" element={<FeedbackPage />} />
              <Route path="/linkedin-image" element={<LinkedInImageGenerator />} />
              <Route path="/video" element={<VideoGenerator />} />
              <Route path="/factuur-sportpunt" element={<DevOnlyRoute><FactuurTemplateSportpunt /></DevOnlyRoute>} />
              <Route path="/voorstel-smr" element={<DevOnlyRoute><VoorstelSMR /></DevOnlyRoute>} />
              <Route path="/rapport-smr" element={<RapportSMR />} />

              {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
              <Route path="*" element={<NotFound />} />
            </Routes>
          </Suspense>
        </ErrorBoundary>
      </BrowserRouter>
    </TooltipProvider>
  </QueryClientProvider>
);

export default App;