import { BrowserRouter, Routes, Route } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "react-hot-toast";
import { ApiKeyProvider } from "./context/ApiKeyContext";
import AppLayout from "./layouts/AppLayout";

// All Real Pages
import Dashboard from "./pages/Dashboard";
import Campaigns from "./pages/Campaigns";
import CampaignDetail from "./pages/CampaignDetail";
import Leads from "./pages/Leads";
import EmailAccounts from "./pages/EmailAccounts";
import Warmup from "./pages/Warmup";
import Inbox from "./pages/Inbox";
import Webhooks from "./pages/Webhooks";
import Analytics from "./pages/Analytics";
import Clients from "./pages/Clients";
import Settings from "./pages/Settings";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      retry: 2,
      refetchOnWindowFocus: true,
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ApiKeyProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<AppLayout />}>
              <Route index element={<Dashboard />} />
              <Route path="campaigns" element={<Campaigns />} />
              <Route path="campaigns/:id" element={<CampaignDetail />} />
              <Route path="leads" element={<Leads />} />
              <Route path="email-accounts" element={<EmailAccounts />} />
              <Route path="warmup" element={<Warmup />} />
              <Route path="inbox" element={<Inbox />} />
              <Route path="webhooks" element={<Webhooks />} />
              <Route path="analytics" element={<Analytics />} />
              <Route path="clients" element={<Clients />} />
              <Route path="settings" element={<Settings />} />
            </Route>
          </Routes>
        </BrowserRouter>
        <Toaster 
          position="bottom-right"
          toastOptions={{
            style: {
              background: '#18181b',
              color: '#fff',
              border: '1px solid #27272a'
            }
          }} 
        />
      </ApiKeyProvider>
    </QueryClientProvider>
  );
}