apps/matrix-frontend/src/App.tsx

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 } from "react-router-dom";
import { Suspense, lazy } from 'react';
import { Loader2 } from 'lucide-react';
import GlobalHeader from "./components/GlobalHeader";
import GlobalAIChat from "./components/GlobalAIChat";
import { ThemeProvider } from "./contexts/ThemeContext";
import { NotificationProvider } from "./contexts/NotificationContext";
import { MCPProvider } from "./contexts/MCPContext";

// Lazy load pages
const Index = lazy(() => import("./pages/Index"));
const Widgets = lazy(() => import("./pages/Widgets"));
const WidgetDiscovery = lazy(() => import("./pages/WidgetDiscovery"));
const WidgetGallery = lazy(() => import("./pages/WidgetGallery"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const PageBuilder = lazy(() => import("./pages/PageBuilder"));
const CustomPage = lazy(() => import("./pages/CustomPage"));
const Install = lazy(() => import("./pages/Install"));
const Backend = lazy(() => import("./pages/Backend"));
const AdminDashboard = lazy(() => import("./pages/AdminDashboard"));
const ReactorCoreStatusWidget = lazy(() => import("./widgets/ReactorCoreStatusWidget"));
const NotFound = lazy(() => import("./pages/NotFound"));

const queryClient = new QueryClient();

const LoadingFallback = () => (
  <div className="flex items-center justify-center h-[calc(100vh-3.5rem)]">
    <Loader2 className="w-8 h-8 animate-spin text-primary" />
  </div>
);

const App = () => (
  <QueryClientProvider client={queryClient}>
    <MCPProvider autoConnect={true}>
      <ThemeProvider>
        <NotificationProvider>
          <TooltipProvider>
            <Toaster />
            <Sonner />
            <BrowserRouter>
              <GlobalHeader />
              <div className="pt-14">
                <Suspense fallback={<LoadingFallback />}>
                  <Routes>
                    <Route path="/" element={<Index />} />
                    <Route path="/widgets" element={<Widgets />} />
                    <Route path="/discover" element={<WidgetDiscovery />} />
                    <Route path="/gallery" element={<WidgetGallery />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/pages" element={<PageBuilder />} />
                    <Route path="/page/:slug" element={<CustomPage />} />
                    <Route path="/install" element={<Install />} />
                    <Route path="/backend" element={<Backend />} />
                    <Route path="/reactor" element={<ReactorCoreStatusWidget />} />
                    <Route path="/admin" element={<AdminDashboard />} />
                    {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                    <Route path="*" element={<NotFound />} />
                  </Routes>
                </Suspense>
              </div>
              {/* Global AI Chat - Available on all pages */}
              <GlobalAIChat position="bottom-right" />
            </BrowserRouter>
          </TooltipProvider>
        </NotificationProvider>
      </ThemeProvider>
    </MCPProvider>
  </QueryClientProvider>
);

export default App;