import { lazy, Suspense, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import Header from './components/common/Header';
import Footer from './components/common/Footer';
import Loader from './components/common/Loader';
import ProtectedRoute from './components/common/ProtectedRoute';

// Lazy-loaded pages
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const OurWork = lazy(() => import('./pages/OurWork'));
const GetInvolved = lazy(() => import('./pages/GetInvolved'));
const Contact = lazy(() => import('./pages/Contact'));
// const MediaCentre = lazy(() => import('./pages/MediaCentre'));
const Login = lazy(() => import('./pages/Login'));
const Register = lazy(() => import('./pages/Register'));
const VerifyEmail = lazy(() => import('./pages/VerifyEmail'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Donate = lazy(() => import('./pages/Donate'));
const Campaigns = lazy(() => import('./pages/Campaigns'));
const CampaignDetail = lazy(() => import('./pages/CampaignDetail'));
const VolunteerRegister = lazy(() => import('./pages/VolunteerRegister'));
const HelpRequest = lazy(() => import('./pages/HelpRequest'));
const DonationHistory = lazy(() => import('./pages/DonationHistory'));
const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
const TermsConditions = lazy(() => import('./pages/TermsConditions'));
const RefundPolicy = lazy(() => import('./pages/RefundPolicy'));
const NotFound = lazy(() => import('./pages/NotFound'));

import { useLocation } from 'react-router-dom';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    document.documentElement.style.scrollBehavior = 'auto';
    window.scrollTo(0, 0);
    requestAnimationFrame(() => {
      document.documentElement.style.scrollBehavior = '';
    });
  }, [pathname]);

  return null;
}

function AppLayout({ children }) {
  return (
    <>
      <Header />
      <main style={{ minHeight: '100vh' }}>
        <Suspense fallback={<Loader fullScreen text="Loading..." />}>
          {children}
        </Suspense>
      </main>
      <Footer />
    </>
  );
}

function AuthLayout({ children }) {
  return (
    <Suspense fallback={<Loader fullScreen />}>
      {children}
    </Suspense>
  );
}

export default function App() {
  return (
    <Router>
      <ScrollToTop />
      <AuthProvider>
        <Routes>
          {/* Auth pages — no header/footer */}
          <Route path="/login" element={<AuthLayout><Login /></AuthLayout>} />
          <Route path="/register" element={<AuthLayout><Register /></AuthLayout>} />
          <Route path="/verify-email" element={<AuthLayout><VerifyEmail /></AuthLayout>} />

          {/* Public pages */}
          <Route path="/" element={<AppLayout><Home /></AppLayout>} />
          <Route path="/about" element={<AppLayout><About /></AppLayout>} />
          <Route path="/our-work" element={<AppLayout><OurWork /></AppLayout>} />
          <Route path="/get-involved" element={<AppLayout><GetInvolved /></AppLayout>} />
          <Route path="/contact" element={<AppLayout><Contact /></AppLayout>} />
          {/* <Route path="/media" element={<AppLayout><MediaCentre /></AppLayout>} /> */}
          <Route path="/donate" element={<AppLayout><Donate /></AppLayout>} />
          <Route path="/campaigns" element={<AppLayout><Campaigns /></AppLayout>} />
          <Route path="/campaigns/:id" element={<AppLayout><CampaignDetail /></AppLayout>} />
          <Route path="/volunteer" element={<AppLayout><VolunteerRegister /></AppLayout>} />
          <Route path="/help-request" element={<AppLayout><HelpRequest /></AppLayout>} />
          <Route path="/privacy" element={<AppLayout><PrivacyPolicy /></AppLayout>} />
          <Route path="/terms" element={<AppLayout><TermsConditions /></AppLayout>} />
          <Route path="/refund" element={<AppLayout><RefundPolicy /></AppLayout>} />

          {/* Protected pages */}
          <Route
            path="/donations/history"
            element={
              <AppLayout>
                <ProtectedRoute>
                  <DonationHistory />
                </ProtectedRoute>
              </AppLayout>
            }
          />
          <Route
            path="/dashboard/*"
            element={
              <AuthLayout>
                <ProtectedRoute>
                  <Dashboard />
                </ProtectedRoute>
              </AuthLayout>
            }
          />

          {/* 404 */}
          <Route path="*" element={<AppLayout><NotFound /></AppLayout>} />
        </Routes>
      </AuthProvider>
    </Router>
  );
}