import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Outlet, RouterProvider, createBrowserRouter, Navigate } from 'react-router-dom';
import AppNavbar from './components/AppNavbar';
import SubscriptionsPage from './pages/SubscriptionsPage';
import AddSubscriptionPage from './pages/AddSubscriptionPage';
import MetricsPage from './pages/MetricsPage';
import IngestionPage from './pages/IngestionPage';
import AddIngestionPage from './pages/AddIngestionPage';
import PaperRunsPage from './pages/PaperRunsPage';
import AddPaperRunPage from './pages/AddPaperRunPage';
import PaperRunDetailPage from './pages/PaperRunDetailPage';
import StrategiesPage from './pages/StrategiesPage';
import AddStrategyPage from './pages/AddStrategyPage';
import StrategyDetailPage from './pages/StrategyDetailPage';

const queryClient = new QueryClient();

function RootLayout() {
  return (
    <>
      <AppNavbar />
      <Outlet />
    </>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { index: true, element: <Navigate to="/subscriptions" replace /> },
      {
        path: 'subscriptions',
        handle: { crumb: 'Subscriptions' },
        children: [
          { index: true, element: <SubscriptionsPage /> },
          { path: 'new', handle: { crumb: 'Add Subscription' }, element: <AddSubscriptionPage /> },
        ],
      },
      {
        path: 'metrics',
        handle: { crumb: 'Metrics' },
        element: <MetricsPage />,
      },
      {
        path: 'ingestion',
        handle: { crumb: 'Ingestion' },
        children: [
          { index: true, element: <IngestionPage /> },
          { path: 'new', handle: { crumb: 'Add Config' }, element: <AddIngestionPage /> },
        ],
      },
      {
        path: 'paper-runs',
        handle: { crumb: 'Paper Runs' },
        children: [
          { index: true, element: <PaperRunsPage /> },
          { path: 'new', handle: { crumb: 'New Run' }, element: <AddPaperRunPage /> },
          { path: ':id', handle: { crumb: 'Run Detail' }, element: <PaperRunDetailPage /> },
        ],
      },
      {
        path: 'strategies',
        handle: { crumb: 'Strategies' },
        children: [
          { index: true, element: <StrategiesPage /> },
          { path: 'new', handle: { crumb: 'New Strategy' }, element: <AddStrategyPage /> },
          { path: ':id', handle: { crumb: 'Strategy' }, element: <StrategyDetailPage /> },
        ],
      },
      { path: '*', element: <Navigate to="/subscriptions" replace /> },
    ],
  },
]);

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}

export default App;
