import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { ScrollToTop } from "@/components/ScrollToTop";
import { TranslationProvider, useTranslationContext } from "@/contexts/TranslationContext";
import { TranslationLoadingSpinner } from "@/components/TranslationLoadingSpinner";
import { ProtectedRoute } from "./components/ProtectedRoute";
import { Suspense, lazy } from "react";

// Lazy load all page components for better performance
const Index = lazy(() => import("./pages/Index"));
const AboutPage = lazy(() => import("./pages/AboutPage"));
const FocusAreasPage = lazy(() => import("./pages/FocusAreasPage"));
const ServicesPage = lazy(() => import("./pages/ServicesPage"));
const FractionalLeadershipPage = lazy(() => import("./pages/FractionalLeadershipPage"));
const ConsultingPage = lazy(() => import("./pages/ConsultingPage"));
const SpeakingPage = lazy(() => import("./pages/SpeakingPage"));
const BoardSeatsPage = lazy(() => import("./pages/BoardSeatsPage"));
const RemoteLeadershipPage = lazy(() => import("./pages/RemoteLeadershipPage"));
const HybridLeadershipPage = lazy(() => import("./pages/HybridLeadershipPage"));
const InsightsPage = lazy(() => import("./pages/InsightsPage"));
const BlogPostPage = lazy(() => import("./pages/BlogPostPage"));
const ContactPage = lazy(() => import("./pages/ContactPage"));
const NotFound = lazy(() => import("./pages/NotFound"));
const AdminLoginPage = lazy(() => import("./pages/AdminLoginPage").then(m => ({ default: m.AdminLoginPage })));
const AdminDashboardPage = lazy(() => import("./pages/AdminDashboardPage"));
const AdminTranslationsPage = lazy(() => import("./pages/AdminTranslationsPage").then(m => ({ default: m.AdminTranslationsPage })));
const AdminUsersPage = lazy(() => import("./pages/AdminUsersPage"));
const AdminSubscribersPage = lazy(() => import("./pages/AdminSubscribersPage"));
const AdminEmailTemplatesPage = lazy(() => import("./pages/AdminEmailTemplatesPage"));
const AdminNewslettersPage = lazy(() => import("./pages/AdminNewslettersPage"));
const AdminNewsletterEditorPage = lazy(() => import("./pages/AdminNewsletterEditorPage"));
const AdminNewsletterRecipientsPage = lazy(() => import("./pages/AdminNewsletterRecipientsPage"));
const NewsletterConfirmPage = lazy(() => import("./pages/NewsletterConfirmPage"));
const NewsletterConfirmedPage = lazy(() => import("./pages/NewsletterConfirmedPage"));
const NewsletterUnsubscribedPage = lazy(() => import("./pages/NewsletterUnsubscribedPage"));
const ResetPasswordPage = lazy(() => import("./pages/ResetPasswordPage"));

const AppRoutes = () => {
  const { isLoading, isError, error, retryLoading } = useTranslationContext();

  if (isLoading) {
    return <TranslationLoadingSpinner />;
  }

  if (isError) {
    return <TranslationLoadingSpinner error={error} onRetry={retryLoading} />;
  }

  return (
    <BrowserRouter>
      <ScrollToTop />
      <Suspense fallback={<TranslationLoadingSpinner />}>
        <Routes>
          <Route path="/" element={<Index />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/focus-areas" element={<FocusAreasPage />} />
          <Route path="/services" element={<ServicesPage />} />
          <Route path="/services/fractional-leadership" element={<FractionalLeadershipPage />} />
          <Route path="/services/consulting" element={<ConsultingPage />} />
          <Route path="/services/speaking" element={<SpeakingPage />} />
          <Route path="/services/board-seats" element={<BoardSeatsPage />} />
          <Route path="/remote-leadership" element={<RemoteLeadershipPage />} />
          <Route path="/hybrid-leadership" element={<HybridLeadershipPage />} />
          <Route path="/blog" element={<InsightsPage />} />
          <Route path="/blog/:slug" element={<BlogPostPage />} />
          <Route path="/contact" element={<ContactPage />} />
          <Route path="/admin/login" element={<AdminLoginPage />} />
          <Route path="/admin" element={
            <ProtectedRoute>
              <AdminDashboardPage />
            </ProtectedRoute>
          } />
          <Route path="/admin/translations" element={
            <ProtectedRoute>
              <AdminTranslationsPage />
            </ProtectedRoute>
          } />
          <Route path="/admin/users" element={
            <ProtectedRoute>
              <AdminUsersPage />
            </ProtectedRoute>
          } />
          <Route path="/admin/subscribers" element={
            <ProtectedRoute>
              <AdminSubscribersPage />
            </ProtectedRoute>
          } />
          <Route path="/admin/email-templates" element={
            <ProtectedRoute>
              <AdminEmailTemplatesPage />
            </ProtectedRoute>
          } />
          <Route path="/admin/newsletters" element={
            <ProtectedRoute>
              <AdminNewslettersPage />
            </ProtectedRoute>
          } />
          <Route path="/admin/newsletters/:id" element={
            <ProtectedRoute>
              <AdminNewsletterEditorPage />
            </ProtectedRoute>
          } />
          <Route path="/admin/newsletters/:id/recipients" element={
            <ProtectedRoute>
              <AdminNewsletterRecipientsPage />
            </ProtectedRoute>
          } />
          <Route path="/newsletter/confirm" element={<NewsletterConfirmPage />} />
          <Route path="/newsletter/confirmed" element={<NewsletterConfirmedPage />} />
          <Route path="/newsletter/unsubscribed" element={<NewsletterUnsubscribedPage />} />
          <Route path="/reset-password" element={<ResetPasswordPage />} />
          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

const App = () => (
  <TooltipProvider>
    <Toaster />
    <Sonner />
    <TranslationProvider>
      <AppRoutes />
    </TranslationProvider>
  </TooltipProvider>
);

export default App;