import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Layout } from './components/Layout';
import { TasksPage } from './pages/TasksPage';
import { AgentsPage } from './pages/AgentsPage';
import { CronsPage } from './pages/CronsPage';
import { AgentQueuePage } from './pages/AgentQueuePage';
import { KnowledgePage } from './pages/KnowledgePage';
import { EditorPage } from './pages/EditorPage';
import { ViewPage } from './pages/ViewPage';
import { CommandPalette } from './components/CommandPalette';
import { useWebSocket } from './hooks/useWebSocket';

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

function AppInner() {
  useWebSocket();

  return (
    <BrowserRouter>
      <CommandPalette />
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<TasksPage />} />
          <Route path="/agents" element={<AgentsPage />} />
          <Route path="/crons" element={<CronsPage />} />
          <Route path="/queue" element={<AgentQueuePage />} />
          <Route path="/knowledge" element={<KnowledgePage />} />
          <Route path="/editor" element={<EditorPage />} />
          <Route path="/view/*" element={<ViewPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AppInner />
    </QueryClientProvider>
  );
}