import React from "react";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { SpeedInsights } from "@vercel/speed-insights/react";
import { Analytics } from "@vercel/analytics/react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { AuthProvider } from "@/contexts/AuthContext";
import { SubscriptionProvider } from "@/contexts/SubscriptionContext";
import { LeadConfigurationProvider } from "@/contexts/LeadConfigurationContext";
import { ThemeProvider } from "@/contexts/ThemeContext";
import { Provider } from "jotai";
import ProtectedRoute from "@/components/ProtectedRoute";
import SuperAdminRoute from "@/components/SuperAdminRoute";
import { initializeStorage } from "@/lib/storage";
import MainLayout from "@/layouts/MainLayout";
import * as dateFnsTz from "date-fns-tz";
import NotFound from "@/pages/NotFound";
import CommandPalette from "@/components/CommandPalette";

// Import critical pages (loaded immediately)
import LandingPage from "@/pages/LandingPage";
import Login from "@/pages/Login";
import SignUp from "@/pages/SignUp";
import Dashboard from "@/pages/Dashboard";
import AuthCallback from "@/pages/AuthCallback";

// Lazy load heavy pages to reduce initial bundle size
const LeadsPage = React.lazy(() => import("@/pages/LeadsPage"));
const PipelinePage = React.lazy(() => import("@/pages/PipelinePage"));
const ProfilePage = React.lazy(() => import("@/pages/ProfilePage"));
const BillingPage = React.lazy(() => import("@/pages/BillingPage"));
const AIInsightsPage = React.lazy(() => import("@/pages/AIInsightsPage"));
const MailPlannerPage = React.lazy(() => import("@/pages/MailPlannerPage"));
const GTMStrategyPage = React.lazy(() => import("@/pages/GTMStrategyPage"));
const SuperAdminLogin = React.lazy(() => import("@/pages/SuperAdminLogin"));
const SuperAdminDashboard = React.lazy(
  () => import("@/pages/SuperAdminDashboard")
);
const SuperAdminUsers = React.lazy(() => import("@/pages/SuperAdminUsers"));
const SuperAdminOrganizations = React.lazy(
  () => import("@/pages/SuperAdminOrganizations")
);
const OrganizationDetail = React.lazy(
  () => import("@/pages/OrganizationDetail")
);
const SuperAdminAnalytics = React.lazy(
  () => import("@/pages/SuperAdminAnalytics")
);
const SuperAdminSettings = React.lazy(
  () => import("@/pages/SuperAdminSettings")
);
const AdvancedManagerDashboard = React.lazy(
  () => import("@/pages/AdvancedManagerDashboard")
);
const OrgAdminLogin = React.lazy(() => import("@/pages/OrgAdminLogin"));
const OrgAdminDashboard = React.lazy(() => import("@/pages/OrgAdminDashboard"));
const OrgAdminUsers = React.lazy(() => import("@/pages/OrgAdminUsers"));
const OrgAdminSettings = React.lazy(() => import("@/pages/OrgAdminSettings"));
const OrgAdminDebugger = React.lazy(
  () => import("@/components/OrgAdminDebugger")
);
const OrgAdminContextFixer = React.lazy(
  () => import("@/components/OrgAdminContextFixer")
);
const ContactSales = React.lazy(() => import("@/pages/ContactSales"));
const DemoScheduling = React.lazy(() => import("@/pages/DemoScheduling"));
const Debug = React.lazy(() => import("@/pages/Debug"));
const UserDebugPage = React.lazy(() => import("@/pages/UserDebugPage"));
const SessionDebugPage = React.lazy(() => import("@/pages/SessionDebugPage"));
const FollowUpPage = React.lazy(() => import("@/pages/FollowUpPage"));
const MeetingsPage = React.lazy(() => import("@/pages/MeetingsPage"));
const SpecialDatesPage = React.lazy(() => import("@/pages/SpecialDatesPage"));
const LeadDetailPage = React.lazy(() => import("@/pages/LeadDetailPage"));
const Settings = React.lazy(() => import("@/pages/Settings"));
// Lazy load these too for better FCP
const EmailIntegrationsPage = React.lazy(() => import("@/pages/EmailIntegrationsPage"));
const LeadScoringSettingsPage = React.lazy(() => import("@/pages/LeadScoringSettingsPage"));
const CustomLeadFieldsSettingsPage = React.lazy(() => import("@/pages/CustomLeadFieldsSettingsPage"));
const DashboardSettingsPage = React.lazy(() => import("@/pages/DashboardSettingsPage"));
const ReportsPage = React.lazy(() => import("@/pages/ReportsPage"));
const SupportPage = React.lazy(() => import("@/pages/SupportPage"));
const TicketDetailPage = React.lazy(() => import("@/pages/TicketDetailPage"));
const AdminTicketsPage = React.lazy(() => import("@/pages/AdminTicketsPage"));
const ResetPassword = React.lazy(() => import("@/pages/ResetPassword"));
const ResetPasswordDebug = React.lazy(() => import("@/pages/ResetPasswordDebug"));
const OnboardingPage = React.lazy(() => import("@/pages/OnboardingPage"));
const PerformancePage = React.lazy(() => import("@/pages/PerformancePage"));
const AIAgentsPage = React.lazy(() => import("@/pages/AIAgentsPage"));
const AutomationHubPageWorking = React.lazy(() => import("@/pages/AutomationHubPageWorking"));
const DealsPage = React.lazy(() => import("@/pages/DealsPage"));
const DomainHealthPage = React.lazy(() => import("@/pages/DomainHealthPage"));
const DomainDetailPage = React.lazy(() => import("@/pages/DomainDetailPage"));
const DomainWarmingPage = React.lazy(() => import("@/pages/DomainWarmingPage"));
const WarmupDetailPage = React.lazy(() => import("@/pages/WarmupDetailPage"));

// Initialize storage on app start
initializeStorage();

// Debug localStorage on app start
console.log("App: localStorage on startup:", {
  subscriptionPlan: localStorage.getItem("subscriptionPlan"),
  subscriptionSelectedAt: localStorage.getItem("subscriptionSelectedAt"),
  billingType: localStorage.getItem("billingType"),
  backup: localStorage.getItem("gtm_subscription_backup"),
  allKeys: Object.keys(localStorage),
  allValues: Object.keys(localStorage).reduce((acc, key) => {
    acc[key] = localStorage.getItem(key);
    return acc;
  }, {} as Record<string, string | null>),
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      refetchOnWindowFocus: false,
    },
  },
});

const App = () => (
  <QueryClientProvider client={queryClient}>
    <ThemeProvider defaultTheme="system" storageKey="gtm-ui-theme">
      <TooltipProvider>
        <Provider>
          <Sonner />
          <Router>
            <AuthProvider>
              <SubscriptionProvider>
                <LeadConfigurationProvider>
                  <CommandPalette />
                  <React.Suspense
                    fallback={
                      <div className="loading-spinner">
                        <div className="spinner"></div>
                      </div>
                    }
                  >
                    <Routes>
                      {/* Public Routes */}
                      <Route path="/" element={<LandingPage />} />
                      <Route path="/login" element={<Login />} />
                      <Route path="/sign-in" element={<Login />} />
                      <Route path="/signup" element={<SignUp />} />
                      <Route path="/contact-sales" element={<ContactSales />} />
                      <Route
                        path="/demo-scheduling"
                        element={<DemoScheduling />}
                      />
                      <Route path="/auth/callback" element={<AuthCallback />} />
                      <Route
                        path="/auth/v1/callback"
                        element={<AuthCallback />}
                      />
                      <Route
                        path="/auth/callback/google"
                        element={<AuthCallback />}
                      />
                      <Route path="/onboarding" element={<OnboardingPage />} />
                      <Route
                        path="/auth/callback/microsoft"
                        element={<AuthCallback />}
                      />
                      <Route
                        path="/super-admin"
                        element={<SuperAdminLogin />}
                      />
                      <Route
                        path="/org-admin/login"
                        element={<OrgAdminLogin />}
                      />
                      <Route
                        path="/reset-password"
                        element={<ResetPassword />}
                      />
                      <Route
                        path="/reset-password-debug"
                        element={<ResetPasswordDebug />}
                      />
                      <Route path="/user-debug" element={<UserDebugPage />} />
                      <Route
                        path="/session-debug"
                        element={<SessionDebugPage />}
                      />
                      <Route
                        path="/subscription/select"
                        element={<Navigate to="/dashboard" replace />}
                      />

                      {/* Protected Routes with MainLayout */}
                      <Route
                        path="/"
                        element={
                          <ProtectedRoute>
                            <MainLayout />
                          </ProtectedRoute>
                        }
                      >
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/leads" element={<LeadsPage />} />
                        <Route
                          path="/leads/:leadId"
                          element={<LeadDetailPage />}
                        />
                        <Route path="/pipeline" element={<PipelinePage />} />
                        <Route path="/deals" element={<DealsPage />} />
                        <Route path="/automation/*" element={<AutomationHubPageWorking />} />
                        <Route
                          path="/gtm-strategy"
                          element={<GTMStrategyPage />}
                        />
                        <Route
                          path="/mail-planner"
                          element={<MailPlannerPage />}
                        />
                        <Route
                          path="/ai-insights"
                          element={<AIInsightsPage />}
                        />
                        <Route path="/profile" element={<ProfilePage />} />
                        <Route path="/billing" element={<BillingPage />} />
                        <Route path="/debug" element={<Debug />} />
                        <Route path="/follow-up" element={<FollowUpPage />} />
                        <Route path="/meetings" element={<MeetingsPage />} />
                        <Route
                          path="/special-dates"
                          element={<SpecialDatesPage />}
                        />
                        <Route path="/reports" element={<ReportsPage />} />
                        <Route path="/support" element={<SupportPage />} />
                        <Route
                          path="/support/ticket/:ticketId"
                          element={<TicketDetailPage />}
                        />
                        <Route 
                          path="/performance" 
                          element={
                            <SuperAdminRoute>
                              <PerformancePage />
                            </SuperAdminRoute>
                          } 
                        />
                        <Route path="/settings" element={<Settings />} />
                        <Route
                          path="/settings/email-integrations"
                          element={<EmailIntegrationsPage />}
                        />
                        <Route
                          path="/settings/lead-scoring"
                          element={<LeadScoringSettingsPage />}
                        />
                        <Route
                          path="/settings/custom-lead-fields"
                          element={<CustomLeadFieldsSettingsPage />}
                        />
                        <Route
                          path="/settings/dashboard"
                          element={<DashboardSettingsPage />}
                        />
                        <Route path="/domain-health" element={<DomainHealthPage />} />
                        <Route path="/domain-health/:domainId" element={<DomainDetailPage />} />
                        <Route path="/domain-warming" element={<DomainWarmingPage />} />
                        <Route path="/domain-warming/:campaignId" element={<WarmupDetailPage />} />
                        <Route path="/agents" element={<AIAgentsPage />} />
                        <Route
                          path="/super-admin/dashboard"
                          element={<SuperAdminDashboard />}
                        />
                        <Route
                          path="/super-admin/tickets"
                          element={<AdminTicketsPage />}
                        />
                        <Route
                          path="/super-admin/users"
                          element={<SuperAdminUsers />}
                        />
                        <Route
                          path="/super-admin/organizations"
                          element={<SuperAdminOrganizations />}
                        />
                        <Route
                          path="/super-admin/organizations/:orgId"
                          element={<OrganizationDetail />}
                        />
                        <Route
                          path="/super-admin/analytics"
                          element={<SuperAdminAnalytics />}
                        />
                        <Route
                          path="/super-admin/settings"
                          element={<SuperAdminSettings />}
                        />
                        <Route
                          path="/manager/dashboard"
                          element={<AdvancedManagerDashboard />}
                        />
                        <Route
                          path="/org-admin"
                          element={
                            <ProtectedRoute>
                              <OrgAdminDashboard />
                            </ProtectedRoute>
                          }
                        />
                        <Route
                          path="/org-admin/users"
                          element={
                            <ProtectedRoute>
                              <OrgAdminUsers />
                            </ProtectedRoute>
                          }
                        />
                        <Route
                          path="/org-admin/settings"
                          element={
                            <ProtectedRoute>
                              <OrgAdminSettings />
                            </ProtectedRoute>
                          }
                        />
                        <Route
                          path="/org-admin/debug"
                          element={<OrgAdminDebugger />}
                        />
                        <Route
                          path="/org-admin/fix-context"
                          element={<OrgAdminContextFixer />}
                        />
                      </Route>

                      {/* 404 Route */}
                      <Route path="*" element={<NotFound />} />
                    </Routes>
                  </React.Suspense>
                </LeadConfigurationProvider>
              </SubscriptionProvider>
            </AuthProvider>
          </Router>
          <SpeedInsights />
          <Analytics />
        </Provider>
      </TooltipProvider>
    </ThemeProvider>
  </QueryClientProvider>
);

export default App;