import React, { Suspense, lazy, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Layout from './components/Layout';
import useServiceWorker from './hooks/useServiceWorker';

// Lazy load all pages for better performance
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Facilities = lazy(() => import('./pages/Facilities'));
const Gallery = lazy(() => import('./pages/Gallery'));
const News = lazy(() => import('./pages/News'));
const Testimonials = lazy(() => import('./pages/Testimonials'));
const Membership = lazy(() => import('./pages/Membership'));
const Contact = lazy(() => import('./pages/Contact'));
const Champions = lazy(() => import('./pages/Champions'));

// Static loading component
const PageLoader: React.FC = () => (
  <div className="min-h-screen bg-black flex items-center justify-center">
    <div className="text-center">
      <div className="loading-spinner mb-4"></div>
      <p className="text-white">Loading...</p>
    </div>
  </div>
);

// Route preloader for better UX
const RoutePreloader: React.FC = () => {
  useEffect(() => {
    // Preload critical routes on idle
    if ('requestIdleCallback' in window) {
      requestIdleCallback(() => {
        import('./pages/About');
        import('./pages/Membership');
        import('./pages/Contact');
      });
    } else {
      setTimeout(() => {
        import('./pages/About');
        import('./pages/Membership');
        import('./pages/Contact');
      }, 2000);
    }
  }, []);

  return null;
};

// App content component
const AppContent: React.FC = () => {
  const location = useLocation();
  useServiceWorker();

  // Scroll to top whenever the route changes
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  // Preload next likely routes based on current location
  useEffect(() => {
    const preloadRoutes = () => {
      switch (location.pathname) {
        case '/':
          import('./pages/About');
          import('./pages/Membership');
          break;
        case '/about':
          import('./pages/Facilities');
          import('./pages/Membership');
          break;
        case '/facilities':
          import('./pages/Membership');
          import('./pages/Gallery');
          break;
        case '/gallery':
          import('./pages/Testimonials');
          import('./pages/Membership');
          break;
        default:
          import('./pages/Membership');
          import('./pages/Contact');
      }
    };

    if ('requestIdleCallback' in window) {
      requestIdleCallback(preloadRoutes);
    } else {
      setTimeout(preloadRoutes, 100);
    }
  }, [location.pathname]);

  return (
    <>
      <Layout>
        <Suspense fallback={<PageLoader />}>
          <Routes location={location} key={location.pathname}>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/facilities" element={<Facilities />} />
            <Route path="/gallery" element={<Gallery />} />
            <Route path="/news" element={<News />} />
            <Route path="/testimonials" element={<Testimonials />} />
            <Route path="/membership" element={<Membership />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/champions" element={<Champions />} />
          </Routes>
        </Suspense>
        <RoutePreloader />
      </Layout>

    </>
  );
};

function App() {
  return (
    <Router>
      <AppContent />
    </Router>
  );
}

export default App;