import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { StudyProvider } from './context/StudyContext';
import { MainLayout } from './components/layout/MainLayout';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Results from './pages/Results';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5000,
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <StudyProvider>
        <BrowserRouter>
          <Routes>
            {/* Home page - no sidebar layout */}
            <Route path="/" element={<Home />} />

            {/* Study pages - with sidebar layout */}
            <Route element={<MainLayout />}>
              <Route path="dashboard" element={<Dashboard />} />
              <Route path="results" element={<Results />} />
              <Route path="analytics" element={<Dashboard />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </StudyProvider>
    </QueryClientProvider>
  );
}

export default App;
