import React, { Suspense, lazy, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import { SimpleToaster } from "@/components/ui/simple-toaster";
import { PushNotificationPrompt } from "@/components/PushNotificationPrompt";
import { MobileInstallPrompt } from "@/components/MobileInstallPrompt";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AuthProvider } from '@/hooks/useAuthState';
import { UserProvider } from '@/hooks/useUser';
import AuthGuard from '@/components/AuthGuard';
import AuthCallback from '@/components/AuthCallback';
import TrezzlyLoader from '@/components/TrezzlyLoader';
import ReactErrorBoundary from '@/components/ReactErrorBoundary';
import GlobalTermsChecker from '@/components/GlobalTermsChecker';
import { VisibilityRoute } from '@/components/VisibilityRoute';
import { NavigationLogger } from '@/components/NavigationLogger';
import { LazyErrorBoundary } from '@/components/LazyErrorBoundary';
import { lazyWithRetry } from '@/utils/lazyWithRetry';

// Declare global hideLoadingScreen function
declare global {
  interface Window {
    hideLoadingScreen?: () => void;
  }
}

// Lazy loading with retry for critical pages
const Index = lazyWithRetry(() => import("./pages/Index"));
const LotteryTypeDetails = lazyWithRetry(() => import("./pages/LotteryTypeDetails"));
const MyVouchers = lazyWithRetry(() => import("./pages/MyVouchers"));
const WalletManagement = lazyWithRetry(() => import("./pages/WalletManagement"));
const AdminDashboard = lazyWithRetry(() => import("./pages/AdminDashboard"));
const AdminAudit = lazyWithRetry(() => import("./pages/AdminAudit"));
const AdminReferrals = lazyWithRetry(() => import("./pages/AdminReferrals"));
const AdminSalesRecords = lazyWithRetry(() => import("./pages/AdminSalesRecords"));

// Standard lazy loading for other pages
const Login = lazy(() => import("./pages/Login"));
const Signup = lazy(() => import("./pages/Signup"));
const ForgotPassword = lazy(() => import("./pages/ForgotPassword"));
const ResetPassword = lazy(() => import("./pages/ResetPassword"));
const ChangePassword = lazy(() => import("./pages/ChangePassword"));
const UserProfile = lazy(() => import("./pages/UserProfile"));
const Winners = lazy(() => import(/* webpackPrefetch: true */ "./pages/Winners"));
const Referrals = lazy(() => import("./pages/Referrals"));
const Support = lazy(() => import("./pages/Support"));
const SupportFeedback = lazy(() => import("./pages/SupportFeedback"));
const Advertise = lazy(() => import("./pages/Advertise"));
const SocialMediaMarketing = lazy(() => import("./pages/SocialMediaMarketing"));
const InvestorCorner = lazy(() => import("./pages/InvestorCorner"));
const PayrollManagement = lazy(() => import("./pages/PayrollManagement"));
const JobActivities = lazy(() => import("./pages/JobActivities"));
const OfficialCommunication = lazy(() => import("./pages/OfficialCommunication"));
const LotteryRules = lazy(() => import("./pages/LotteryRules"));
const HowItWorks = lazy(() => import("./pages/HowItWorks"));
const Blog = lazy(() => import("./pages/Blog"));
const NotFound = lazy(() => import("./pages/NotFound"));
const BecomeTenant = lazy(() => import("./pages/BecomeTenant"));
const TenantPortal = lazy(() => import("./pages/TenantPortal"));
const AdminTenants = lazy(() => import("./pages/AdminTenants"));
const EmbedLottery = lazy(() => import("./pages/EmbedLottery"));

const LoadingFallback = () => (
  <TrezzlyLoader message="Loading..." />
);

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

function App() {
  // Signal that React app is ready and hide the HTML loading screen
  useEffect(() => {
    // Use requestAnimationFrame to ensure browser has painted content before hiding loading screen
    // This prevents white page flashes on mobile devices with slower rendering
    const hideLoading = () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          // Double RAF ensures browser has completed painting
          if (window.hideLoadingScreen) {
            window.hideLoadingScreen();
          }
        });
      });
    };
    
    // Longer delay for mobile devices to fully render content
    const timer = setTimeout(hideLoading, 300);
    return () => clearTimeout(timer);
  }, []);

  return (
    <ReactErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <UserProvider>
            <SimpleToaster />
            <PushNotificationPrompt />
            <MobileInstallPrompt />
            <Router>
              <NavigationLogger />
              <GlobalTermsChecker>
                <LazyErrorBoundary>
                  <Suspense fallback={<LoadingFallback />}>
                    <Routes>
                  {/* Public routes - redirect to home if authenticated */}
                  <Route 
                    path="/login" 
                    element={
                      <AuthGuard requireAuth={false}>
                        <Login />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/signup" 
                    element={
                      <AuthGuard requireAuth={false}>
                        <Signup />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/forgot-password" 
                    element={
                      <AuthGuard requireAuth={false}>
                        <ForgotPassword />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/reset-password" 
                    element={
                      <AuthGuard requireAuth={false}>
                        <ResetPassword />
                      </AuthGuard>
                    } 
                  />
                  
                  {/* Auth callback route */}
                  <Route path="/auth/callback" element={<AuthCallback />} />
                  
                  {/* Public content routes */}
                  <Route path="/lottery-rules" element={<LotteryRules />} />
                  <Route path="/how-it-works" element={<HowItWorks />} />
                  <Route path="/blog" element={<Blog />} />
                  <Route path="/support-feedback" element={<SupportFeedback />} />
                  <Route path="/investors" element={<InvestorCorner />} />
                  <Route path="/winners" element={<Winners />} />
                  <Route path="/embed/lottery/:id" element={<EmbedLottery />} />
                  <Route path="/become-tenant" element={
                    <AuthGuard><BecomeTenant /></AuthGuard>
                  } />
                  <Route path="/tenant" element={
                    <AuthGuard><TenantPortal /></AuthGuard>
                  } />
                  <Route path="/admin/tenants" element={
                    <AuthGuard requiredRole="superadmin"><AdminTenants /></AuthGuard>
                  } />
                  
                  {/* Protected routes */}
                   <Route 
                     path="/" 
                     element={
                       <AuthGuard requireAuth={true} fallbackPath="/login" isHomepage={true}>
                         <Index />
                       </AuthGuard>
                     } 
                   />
                  <Route 
                    path="/lottery/:id" 
                    element={
                      <AuthGuard>
                        <LotteryTypeDetails />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/profile" 
                    element={
                      <AuthGuard>
                        <UserProfile />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/change-password" 
                    element={
                      <AuthGuard>
                        <ChangePassword />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/my-vouchers" 
                    element={
                      <AuthGuard>
                        <MyVouchers />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/wallet" 
                    element={
                      <AuthGuard>
                        <WalletManagement />
                      </AuthGuard>
                    } 
                  />
                <Route 
                  path="/history-2"
                  element={
                    <VisibilityRoute componentLoader={() => import("./pages/History")}>
                      {null}
                    </VisibilityRoute>
                  } 
                />
                  <Route 
                    path="/referrals" 
                    element={
                      <AuthGuard>
                        <Referrals />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/advertise" 
                    element={
                      <AuthGuard>
                        <Advertise />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/social-media-marketing" 
                    element={
                      <AuthGuard>
                        <SocialMediaMarketing />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/support" 
                    element={
                      <AuthGuard>
                        <Support />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/job-activities" 
                    element={
                      <AuthGuard>
                        <JobActivities />
                      </AuthGuard>
                    } 
                  />
                  
                  {/* Admin routes - require superadmin role */}
                  <Route 
                    path="/admin" 
                    element={
                      <AuthGuard requiredRole="superadmin">
                        <AdminDashboard />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/admin/audit" 
                    element={
                      <AuthGuard requiredRole="superadmin">
                        <AdminAudit />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/admin-referrals" 
                    element={
                      <AuthGuard requiredRole="superadmin">
                        <AdminReferrals />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/investor-corner" 
                    element={
                      <AuthGuard requiredRole="superadmin">
                        <InvestorCorner />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/payroll-management" 
                    element={
                      <AuthGuard requiredRole="superadmin">
                        <PayrollManagement />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/admin/sales-records" 
                    element={
                      <AuthGuard requireAuth={true} requiredRole="superadmin">
                        <AdminSalesRecords />
                      </AuthGuard>
                    } 
                  />
                  <Route 
                    path="/official-communication" 
                    element={
                      <AuthGuard requiredRole="superadmin">
                        <OfficialCommunication />
                      </AuthGuard>
                    } 
                  />
                  
                  {/* Fallback route */}
                  <Route path="*" element={<NotFound />} />
                    </Routes>
                  </Suspense>
                </LazyErrorBoundary>
              </GlobalTermsChecker>
            </Router>
          </UserProvider>
        </AuthProvider>
      </QueryClientProvider>
    </ReactErrorBoundary>
  );
}

export default App;