import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Sidebar } from './components/layout/Sidebar';
import { DashboardPage } from './pages/Dashboard';
import { LeaderboardPage } from './pages/Leaderboard';
import { ExperimentsPage } from './pages/Experiments';
import { ExperimentDetailPage } from './pages/ExperimentDetail';
import { ExperimentDiffPage } from './pages/ExperimentDiff';
import { LineagePage } from './pages/Lineage';
import { BacktestPage, BacktestTaskDetailPage, BacktestResultsPage, BacktestDirectResultsPage } from './pages/Backtest';
import { BacktestComparePage } from './pages/BacktestCompare';
import { PaperTradingPage } from './pages/PaperTrading';
import { CashParkingPage } from './pages/CashParking';
import { ComposeStrategyPage } from './pages/ComposeStrategy';

const qc = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30_000, retry: 1 },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={qc}>
      <BrowserRouter>
        <div style={{ display: 'flex', minHeight: '100vh', width: '100%' }}>
          <Sidebar />
          <main style={{ flex: 1, marginLeft: 'var(--sidebar-w, 230px)', minHeight: '100vh', overflowY: 'auto' }}>
            <Routes>
              <Route path="/" element={<DashboardPage />} />
              <Route path="/leaderboard" element={<LeaderboardPage />} />
              <Route path="/experiments" element={<ExperimentsPage />} />
              <Route path="/experiments/compose" element={<ComposeStrategyPage />} />
              <Route path="/experiments/:name" element={<ExperimentDetailPage />} />
              <Route path="/experiments/:name/diff" element={<ExperimentDiffPage />} />
              <Route path="/experiments/:name/diff/:other" element={<ExperimentDiffPage />} />
              <Route path="/lineage/:name" element={<LineagePage />} />
              <Route path="/backtest" element={<BacktestPage />} />
              <Route path="/backtest/compare" element={<BacktestComparePage />} />
              <Route path="/backtest/tasks/:taskId" element={<BacktestTaskDetailPage />} />
              <Route path="/backtest/results/:runId" element={<BacktestResultsPage />} />
              <Route path="/backtest/direct-results/:taskId" element={<BacktestDirectResultsPage />} />
              <Route path="/paper" element={<PaperTradingPage />} />
              <Route path="/docs/cash-parking" element={<CashParkingPage />} />
            </Routes>
          </main>
        </div>
      </BrowserRouter>
    </QueryClientProvider>
  );
}
