import { Route, Routes, BrowserRouter } from "react-router"
import {
  DashboardPage,
  DashboardLayout,
  SubscribersPage,
  CampaignsPage,
  EditCampaignPage,
  TemplatesPage,
  SettingsPage,
  AnalyticsPage,
  ListsPage,
  OnboardingPage,
  MessagesPage,
  EditCampaignLayout,
  UnsubscribePage,
  AuthPage,
  NotFoundPage,
  VerifyEmailPage,
} from "./pages"
import { scan } from "react-scan"

if (import.meta.env.DEV) {
  scan({
    enabled: true,
    log: true,
  })
}

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<AuthPage />} />
        <Route path="dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardPage />} />
          <Route path="subscribers" element={<SubscribersPage />} />
          <Route path="campaigns">
            <Route index element={<CampaignsPage />} />
            <Route
              path=":id"
              element={
                <EditCampaignLayout>
                  <EditCampaignPage />
                </EditCampaignLayout>
              }
            />
          </Route>
          <Route path="templates" element={<TemplatesPage />} />
          <Route path="settings" element={<SettingsPage />} />
          <Route path="analytics" element={<AnalyticsPage />} />
          <Route path="lists" element={<ListsPage />} />
          <Route path="messages" element={<MessagesPage />} />
        </Route>
        <Route path="/onboarding" element={<OnboardingPage />} />
        <Route path="/unsubscribe" element={<UnsubscribePage />} />
        <Route path="/verify-email" element={<VerifyEmailPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  )
}