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

// 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,
    },
  },
});

function RequireKey({ children }: { children: ReactNode }) {
  const { activeKey } = useApiKey();
  if (!activeKey) {
    return <Navigate to="/connect" replace />;
  }
  return <>{children}</>;
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ApiKeyProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/connect" element={<Gate />} />
            <Route
              path="/"
              element={
                <RequireKey>
                  <AppLayout />
                </RequireKey>
              }
            >
              <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: 'var(--nt-bg-surface-raised)',
              color: 'var(--nt-text-primary)',
              border: '1px solid var(--nt-border-accent)'
            }
          }} 
        />
      </ApiKeyProvider>
    </QueryClientProvider>
  );
}