import { useState, useEffect, lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { Sidebar } from './components/layout/Sidebar';
import { Header } from './components/layout/Header';
import { Footer } from './components/layout/Footer';
import { LandingPage } from './pages/LandingPage';
import { NewOrderPage } from './pages/NewOrderPage';
import { LoginPage } from './pages/LoginPage';
import { PaymentSuccessPage } from './pages/PaymentSuccessPage';
import { Chatbot } from './components/support/Chatbot';
import { OrderProvider } from './contexts/OrderContext';
import { AuthProvider } from './contexts/AuthContext';
import { AdminAuthProvider } from './contexts/AdminAuthContext';
import RequireAuth from './components/auth/RequireAuth';
import RequireRole from './components/auth/RequireRole';
import { AdminRoute } from './components/auth/AdminRoute';
import { PaymentProvider } from './contexts/PaymentContext';
import { ReviewProvider } from './contexts/ReviewContext';
import { LoyaltyProvider } from './contexts/LoyaltyContext';
import { ScrollToTop } from './components/utils/ScrollToTop';
import { usePWA } from './hooks/usePWA';
import { useNotifications } from './hooks/useNotifications';
import { preloadCriticalAssets } from './lib/preload';

// Lazy load less critical pages for better initial load performance
const AllOrdersPage = lazy(() => import('./pages/AllOrdersPage').then(m => ({ default: m.AllOrdersPage })));
const AnalyticsDashboard = lazy(() => import('./pages/AnalyticsDashboard').then(m => ({ default: m.AnalyticsDashboard })));
const ScheduledOrdersPage = lazy(() => import('./pages/ScheduledOrdersPage').then(m => ({ default: m.ScheduledOrdersPage })));
const OrderDetailPage = lazy(() => import('./pages/OrderDetailPage').then(m => ({ default: m.OrderDetailPage })));
const TestimonialsPage = lazy(() => import('./pages/TestimonialsPage').then(m => ({ default: m.TestimonialsPage })));
const AdminLogin = lazy(() => import('./pages/admin/AdminLogin').then(m => ({ default: m.AdminLogin })));
const AdminDashboard = lazy(() => import('./pages/admin/AdminDashboard').then(m => ({ default: m.AdminDashboard })));
const AdminTestimonials = lazy(() => import('./pages/admin/AdminTestimonials').then(m => ({ default: m.AdminTestimonials })));
const AdminAllOrders = lazy(() => import('./pages/admin/AdminAllOrders').then(m => ({ default: m.AdminAllOrders })));

const queryClient = new QueryClient();

// Loading spinner component for lazy-loaded routes
function LoadingFallback() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-saffron to-orange-600">
      <div className="text-center">
        <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-white mx-auto mb-4"></div>
        <p className="text-white text-xl font-semibold">Loading...</p>
      </div>
    </div>
  );
}

// Using RequireAuth component from components/auth

interface AppProps {
  onLoad?: () => void;
}

function AppContent({ onLoad }: AppProps) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isChatbotOpen, setIsChatbotOpen] = useState(false);
  const { canInstall, installApp } = usePWA();
  const { requestPermission } = useNotifications();

  // Signal app load completion
  useEffect(() => {
    onLoad?.();
  }, [onLoad]);

  // Auto-request notification permission for better UX
  useEffect(() => {
    if ('Notification' in window && Notification.permission === 'default') {
      requestPermission();
    }
    
    // Preload critical assets for faster loading
    preloadCriticalAssets();
  }, [requestPermission]);

  return (
    <Router 
      future={{
        v7_startTransition: true,
        v7_relativeSplatPath: true
      }}
    >
      <ScrollToTop />
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/payment-success" element={<PaymentSuccessPage />} />

        {/* Public Landing Page */}
        <Route path="/" element={<LandingPage />} />

        {/* Admin Routes */}
        <Route path="/admin/login" element={
          <Suspense fallback={<LoadingFallback />}>
            <AdminLogin />
          </Suspense>
        } />
        <Route 
          path="/admin/dashboard" 
          element={
            <Suspense fallback={<LoadingFallback />}>
              <AdminRoute requiredPermissions={['manage_orders', 'view_analytics']}>
                <AdminDashboard />
              </AdminRoute>
            </Suspense>
          } 
        />
        <Route 
          path="/admin/testimonials" 
          element={
            <Suspense fallback={<LoadingFallback />}>
              <AdminRoute requiredPermissions={['read', 'write']}>
                <AdminTestimonials />
              </AdminRoute>
            </Suspense>
          } 
        />
        <Route 
          path="/admin/orders" 
          element={
            <Suspense fallback={<LoadingFallback />}>
              <AdminRoute requiredPermissions={['manage_orders']}>
                <AdminAllOrders />
              </AdminRoute>
            </Suspense>
          } 
        />

        {/* Protected App Routes */}
        <Route
          path="/*"
          element={
            <RequireAuth>
              <div className="min-h-screen bg-cream flex flex-col">
                {/* PWA Install Banner */}
                {canInstall && (
                  <div className="bg-saffron text-white p-2 text-center text-sm">
                    <button 
                      onClick={installApp}
                      className="underline hover:no-underline font-medium"
                    >
                      📱 Install South Kitchen app for better experience!
                    </button>
                  </div>
                )}

                <Routes>
                  <Route 
                    path="/*" 
                    element={
                      <div className="min-h-screen flex flex-col">
                        <Header />
                        <div className="flex flex-1">
                          <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
                          <main className="flex-1 lg:ml-48 transition-all duration-300">
                            {/* Minimal spacing for maximum content area */}
                            <div className="w-full px-2 md:px-3 py-3 md:py-4 min-h-[calc(100vh-160px)]">
                              <Suspense fallback={<LoadingFallback />}>
                                <Routes>
                                  <Route path="/menu" element={<NewOrderPage />} />
                                  <Route path="/orders" element={<AllOrdersPage />} />
                                  <Route path="/orders/:id" element={<OrderDetailPage />} />
                                  <Route path="/testimonials" element={<TestimonialsPage />} />
                                  <Route
                                    path="/analytics"
                                    element={
                                      <RequireRole roles={["admin"]}>
                                        <AnalyticsDashboard />
                                      </RequireRole>
                                    }
                                  />
                                  <Route
                                    path="/scheduled"
                                  element={
                                    <RequireRole roles={["admin"]}>
                                      <ScheduledOrdersPage />
                                    </RequireRole>
                                  }
                                />
                                </Routes>
                              </Suspense>
                            </div>
                          </main>
                        </div>
                        <Footer />
                      </div>
                    } 
                  />
                </Routes>

                {/* AI Chatbot */}
                <Chatbot 
                  isOpen={isChatbotOpen} 
                  onToggle={() => setIsChatbotOpen(!isChatbotOpen)} 
                />
              </div>
            </RequireAuth>
          }
        />
      </Routes>
    </Router>
  );
}

function App({ onLoad }: AppProps = {}) {
  useEffect(() => {
    // Call onLoad when app is ready
    const timer = setTimeout(() => {
      onLoad?.();
    }, 500); // Small delay to ensure everything is mounted

    return () => clearTimeout(timer);
  }, [onLoad]);

  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <AdminAuthProvider>
          <PaymentProvider>
            <OrderProvider>
              <ReviewProvider>
                <LoyaltyProvider>
                  <AppContent onLoad={onLoad} />
                </LoyaltyProvider>
              </ReviewProvider>
            </OrderProvider>
          </PaymentProvider>
        </AdminAuthProvider>
      </AuthProvider>
    </QueryClientProvider>
  );
}

export default App;