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 Setup from './pages/Setup';
import Dashboard from './pages/Dashboard';
import Analysis from './pages/Analysis';
import Insights from './pages/Insights';
import Results from './pages/Results';
import CanvasView from './pages/CanvasView';
import Studio from './pages/Studio';

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 />} />

            {/* Canvas page - full screen, no sidebar */}
            <Route path="canvas" element={<CanvasView />} />
            <Route path="canvas/*" element={<CanvasView />} />

            {/* Studio - unified study creation environment */}
            <Route path="studio" element={<Studio />} />
            <Route path="studio/:draftId" element={<Studio />} />

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

export default App;