import { Layout } from '@/components/layout';
import { DashboardPage } from '@/features/dashboard';
import { ExchangesPage } from '@/features/exchanges';
import { MonitoringPage } from '@/features/monitoring';
import { PipelinePage } from '@/features/pipeline';
import { BacktestPage } from '@/features/backtest';
import { SymbolsPage, SymbolDetailPage } from '@/features/symbols';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Navigate to="/dashboard" replace />} />
          <Route path="dashboard" element={<DashboardPage />} />
          <Route path="symbols">
            <Route index element={<SymbolsPage />} />
            <Route path=":symbol" element={<SymbolDetailPage />} />
          </Route>
          <Route path="exchanges" element={<ExchangesPage />} />
          <Route
            path="portfolio"
            element={<div className="p-4">Portfolio Page - Coming Soon</div>}
          />
          <Route
            path="strategies"
            element={<div className="p-4">Strategies Page - Coming Soon</div>}
          />
          <Route
            path="analytics"
            element={<div className="p-4">Analytics Page - Coming Soon</div>}
          />
          <Route path="backtest" element={<BacktestPage />} />
          <Route path="settings" element={<div className="p-4">Settings Page - Coming Soon</div>} />
          <Route path="system/monitoring" element={<MonitoringPage />} />
          <Route path="system/pipeline" element={<PipelinePage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}