import { Toaster } from "@/components/ui/toaster";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AuthProvider } from "@/contexts/AuthContext";
import { useAuth } from "@/hooks/useAuth";
import { lazy, Suspense } from "react";
import RequireAdmin from "./components/RequireAdmin";
import ErrorBoundary from "./components/ErrorBoundary";
import IndexErrorBoundary from "./components/IndexErrorBoundary";
import { WhatsAppLayout } from '@/components/layout';
import NotificationPrompt from '@/components/NotificationPrompt';
import PrivacyNotificationDialog from '@/components/auth/PrivacyNotificationDialog';
import { TooltipProvider } from '@/components/ui/tooltip';
import CriticalCSS from '@/components/CriticalCSS';
import { ThemeProvider } from '@/contexts/ThemeContext';
import { NotificationProvider } from '@/components/notifications/NotificationProvider';
import { BannerProvider } from '@/components/notifications';

// Loading component for better UX
const PageLoading = () => (
  <div className="min-h-screen bg-background flex items-center justify-center p-4 transition-all duration-200">
    <div className="w-full max-w-sm">
      <div className="p-6 text-center space-y-4">
        <div className="w-12 h-12 mx-auto animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
        <h2 className="text-2xl font-bold text-foreground transition-all duration-200">Loading...</h2>
        <p className="text-muted-foreground transition-all duration-200">Preparing your experience...</p>
      </div>
    </div>
  </div>
);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      retryDelay: 1000,
      staleTime: 5 * 60 * 1000,
      gcTime: 10 * 60 * 1000,
    },
  },
});

// Protected Route component - defined outside App function
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { user, loading } = useAuth();

  if (loading) {
    return <PageLoading />;
  }

  if (!user) {
    return <Navigate to="/auth" replace />;
  }

  return <>{children}</>;
};

// Public Route component (only for unauthenticated users) - defined outside App function
const PublicRoute = ({ children }: { children: React.ReactNode }) => {
  const { user, loading } = useAuth();

  if (loading) {
    return <PageLoading />;
  }

  if (user) {
    return <Navigate to="/" replace />;
  }

  return <>{children}</>;
};

// AppRoutes component - defined outside App function
const AppRoutes = () => {
  console.log('AppRoutes component starting...');
  
  try {
    console.log('Loading lazy components...');
    // Lazy load all pages for better performance - moved inside AppRoutes
    const Index = lazy(() => import("@/screens/Index.tsx"));
    const Auth = lazy(() => import("@/screens").then(module => ({ default: module.Auth })));
    const Profile = lazy(() => import("@/screens").then(module => ({ default: module.ProfileScreen })));
    const NominatePage = lazy(() => import("@/screens").then(module => ({ default: module.NominatePage })));
    const VotingInterface = lazy(() => import("@/screens").then(module => ({ default: module.VotingInterfaceScreen })));
    const NotFound = lazy(() => import("@/screens").then(module => ({ default: module.NotFound })));
    const EventProgramPage = lazy(() => import("@/screens").then(module => ({ default: module.EventProgram })));
    
    const FollowUsPage = lazy(() => import("@/screens").then(module => ({ default: module.FollowUs })));
    const VotingRulesPage = lazy(() => import("@/screens").then(module => ({ default: module.VotingRules })));
    const TermsPage = lazy(() => import("@/screens").then(module => ({ default: module.Terms })));
    const PrivacyPolicyPage = lazy(() => import("@/screens").then(module => ({ default: module.PrivacyPolicy })));
    const FeedbackPage = lazy(() => import("@/screens").then(module => ({ default: module.Feedback })));
    const UserGuide = lazy(() => import("@/screens").then(module => ({ default: module.UserGuide })));
    const NomineeProfile = lazy(() => import("@/components/NomineeProfile"));
    const SettingsPage = lazy(() => import("@/screens").then(module => ({ default: module.Settings })));
    const LeaderboardPage = lazy(() => import("@/screens").then(module => ({ default: module.LeaderboardScreen })));
    const GalleryPage = lazy(() => import("@/screens").then(module => ({ default: module.GalleryScreen })));
    const EventTimelinePage = lazy(() => import("@/screens").then(module => ({ default: module.EventTimeline })));
    const ContactSupportPage = lazy(() => import("@/screens").then(module => ({ default: module.ContactSupport })));
    const ChangePasswordPage = lazy(() => import("@/screens/settings/change-password"));
    const EditNamePage = lazy(() => import("@/components/profile/EditNameForm"));
    const ManageEmailPage = lazy(() => import("@/screens/settings/manage-email"));
    const ManagePhonePage = lazy(() => import("@/screens/settings/manage-phone"));
    const DeleteAccountPage = lazy(() => import("@/screens/settings/delete-account"));
    const EditBioPage = lazy(() => import("@/screens/settings/edit-bio"));
    const PrivacySettingsPage = lazy(() => import("@/screens/PrivacySettings"));
    const FAQPage = lazy(() => import("@/screens").then(module => ({ default: module.FAQ })));
    const PlacePage = lazy(() => import("@/screens").then(module => ({ default: module.Place })));
    const NotificationsPage = lazy(() => import("@/screens").then(module => ({ default: module.Notifications })));
    const NotificationTestPage = lazy(() => import("@/screens/notification-test"));
    const LazyAdminRoutes = lazy(() => import("@/components/admin/LazyAdminRoutes"));

    console.log('All lazy components loaded successfully');

    console.log('Setting up router...');
    return (
      <Router>
        <Suspense fallback={<PageLoading />}>
        <Routes>
          {/* Public routes - only accessible when not authenticated */}
          <Route path="/auth" element={
            <PublicRoute>
              <Auth />
            </PublicRoute>
          } />
          
          {/* Protected routes - only accessible when authenticated */}
          <Route path="/" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <IndexErrorBoundary>
                  <Index />
                </IndexErrorBoundary>
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/profile" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <Profile />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/nominate" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <NominatePage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/vote" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <VotingInterface />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/notifications" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <NotificationsPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/notification-test" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <NotificationTestPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          {/* Public nominee profile route - accessible to everyone */}
          <Route path="/nominee/:slug" element={
            <WhatsAppLayout>
              <NomineeProfile />
            </WhatsAppLayout>
          } />
          
          <Route path="/event-program" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <EventProgramPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/event-timeline" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <EventTimelinePage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/gallery" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <GalleryPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/leaderboard" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <LeaderboardPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/results" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <LeaderboardPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/place" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <PlacePage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <SettingsPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/user-guide" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <UserGuide />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/voting-rules" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <VotingRulesPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/terms" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <TermsPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/privacy-policy" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <PrivacyPolicyPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/feedback" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <FeedbackPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          
          <Route path="/follow-us" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <FollowUsPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/contact-support" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <ContactSupportPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings/change-password" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <ChangePasswordPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings/edit-name" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <EditNamePage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings/manage-email" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <ManageEmailPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings/manage-phone" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <ManagePhonePage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings/delete-account" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <DeleteAccountPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings/edit-bio" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <EditBioPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/settings/privacy" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <PrivacySettingsPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          <Route path="/faq" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <FAQPage />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
          
          {/* Admin routes */}
          <Route 
            path="/admin/*" 
            element={
              <ProtectedRoute>
                <WhatsAppLayout>
                  <RequireAdmin>
                    <Suspense fallback={<PageLoading />}>
                      <LazyAdminRoutes />
                    </Suspense>
                  </RequireAdmin>
                </WhatsAppLayout>
              </ProtectedRoute>
            } 
          />
          
          {/* Catch all route */}
          <Route path="*" element={
            <ProtectedRoute>
              <WhatsAppLayout>
                <NotFound />
              </WhatsAppLayout>
            </ProtectedRoute>
          } />
        </Routes>
      </Suspense>
      {/* Notification Prompt for first-time visitors */}
      <NotificationPrompt />
      {/* Privacy notification for user visibility */}
      <PrivacyNotificationDialog />
    </Router>
  );
  } catch (error) {
    console.error('Error in AppRoutes:', error);
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-4">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-foreground mb-4">App Loading Error</h1>
          <p className="text-muted-foreground mb-4">Something went wrong while loading the app.</p>
          <button 
            onClick={() => window.location.reload()} 
            className="px-4 py-2 bg-primary text-primary-foreground rounded"
          >
            Reload App
          </button>
        </div>
      </div>
    );
  }
};

// Version: 2025-01-09-mobile-optimization-v2
function App() {
  console.log('App component starting...');
  
  try {
    console.log('Rendering App with providers...');
    return (
      <ErrorBoundary>
        <CriticalCSS>
          <ThemeProvider defaultTheme="light" storageKey="bearfest-theme">
            <QueryClientProvider client={queryClient}>
              <AuthProvider>
                <TooltipProvider>
                  <NotificationProvider>
                    <BannerProvider>
                      <AppRoutes />
                      <Toaster />
                    </BannerProvider>
                  </NotificationProvider>
                </TooltipProvider>
              </AuthProvider>
            </QueryClientProvider>
          </ThemeProvider>
        </CriticalCSS>
      </ErrorBoundary>
    );
  } catch (error) {
    console.error('Error in App component:', error);
    throw error;
  }
}

export default App;