import "./global.css";

import { Toaster } from "@/components/ui/toaster";
import { createRoot } from "react-dom/client";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Sidebar } from "./components/Sidebar";
import { RecipientProvider } from "./contexts/RecipientContext";
import { KeyPhrasesProvider } from "./contexts/KeyPhrasesContext";
import { SubjectLinesProvider } from "./contexts/SubjectLinesContext";
import { AuthProvider } from "./contexts/AuthContext";
import { ProtectedRoute } from "./components/ProtectedRoute";
import Dashboard from "./pages/Dashboard";
import Debug from "./pages/Debug";
import NetworkTest from "./pages/NetworkTest";
import Recipients from "./pages/Recipients";
import Compose from "./pages/Compose";
import History from "./pages/History";
import SubjectLines from "./pages/SubjectLines";
import KeyPhrases from "./pages/KeyPhrases";
import EmailTones from "./pages/EmailTones";
import Settings from "./pages/Settings";
import PlaceholderPage from "./pages/PlaceholderPage";
import NotFound from "./pages/NotFound";
import VerifySetup from "./pages/VerifySetup";

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <TooltipProvider>
      <AuthProvider>
        <RecipientProvider>
          <KeyPhrasesProvider>
            <SubjectLinesProvider>
              <Toaster />
              <Sonner />
              {/* Background scheduler to process due campaign emails */}
              <BrowserRouter>
                <ProtectedRoute>
                  <div className="flex h-screen bg-background">
                    <Sidebar className="hidden md:block border-r bg-muted/40" />
                    <main className="flex-1 overflow-auto">
                      <Routes>
                        <Route path="/" element={<Dashboard />} />
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/Dashboard" element={<Dashboard />} />
                        <Route path="/debug" element={<Debug />} />
                        <Route path="/network-test" element={<NetworkTest />} />
                        <Route path="/recipients" element={<Recipients />} />
                        <Route path="/compose" element={<Compose />} />
                        <Route path="/tones" element={<EmailTones />} />
                        <Route path="/subjects" element={<SubjectLines />} />
                        <Route path="/phrases" element={<KeyPhrases />} />
                        <Route path="/history" element={<History />} />
                        <Route path="/settings" element={<Settings />} />
                        <Route path="/verify" element={<VerifySetup />} />
                        {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                        <Route path="*" element={<NotFound />} />
                      </Routes>
                    </main>
                  </div>
                </ProtectedRoute>
              </BrowserRouter>
            </SubjectLinesProvider>
          </KeyPhrasesProvider>
        </RecipientProvider>
      </AuthProvider>
    </TooltipProvider>
  </QueryClientProvider>
);

createRoot(document.getElementById("root")!).render(<App />);