import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Index from "./pages/Index";
import NotFound from "./pages/NotFound";
import SyntheticUsers from "./pages/SyntheticUsers";
import FocusGroups from "./pages/FocusGroups";
import FocusGroupSession from "./pages/FocusGroupSession";
import Dashboard from "./pages/Dashboard";
import PersonaProfile from "./components/persona/PersonaProfile";
import Login from "./pages/Login";
import ProtectedRoute from "./components/ProtectedRoute";
import { AuthProvider } from "./contexts/AuthContext";
import { NavigationProvider } from "./contexts/NavigationContext";
import { WebSocketProvider } from "./contexts/WebSocketContextNew";
import { MsalProvider } from "./components/auth/MsalProvider";

// CSS for consistent back button positioning
import "./styles/backButton.css";

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <BrowserRouter basename={import.meta.env.BASE_URL}>
      <MsalProvider>
        <AuthProvider>
          <WebSocketProvider>
            <NavigationProvider>
              <TooltipProvider>
            <Toaster />
            <Routes>
            <Route path="/" element={<Index />} />
            <Route path="/login" element={<Login />} />
            
            <Route path="/synthetic-users" element={
              <ProtectedRoute>
                <SyntheticUsers />
              </ProtectedRoute>
            } />
            
            <Route path="/synthetic-users/:id" element={
              <ProtectedRoute>
                <PersonaProfile />
              </ProtectedRoute>
            } />
            
            <Route path="/personas/:id" element={
              <ProtectedRoute>
                <PersonaProfile />
              </ProtectedRoute>
            } />
            
            <Route path="/focus-groups" element={
              <ProtectedRoute>
                <FocusGroups />
              </ProtectedRoute>
            } />
            
            <Route path="/focus-groups/:id" element={
              <ProtectedRoute>
                <FocusGroupSession />
              </ProtectedRoute>
            } />
            
            <Route path="/dashboard" element={
              <ProtectedRoute>
                <Dashboard />
              </ProtectedRoute>
            } />
            
            {/* Redirect legacy paths */}
            <Route path="/old-path" element={<Navigate to="/" replace />} />
            
            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
            <Route path="*" element={<NotFound />} />
            </Routes>
              </TooltipProvider>
            </NavigationProvider>
          </WebSocketProvider>
        </AuthProvider>
      </MsalProvider>
    </BrowserRouter>
  </QueryClientProvider>
);

export default App;