import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './context/AuthContext';
import { DataProvider } from './context/DataContext';
import AppShell from './components/layout/AppShell';
import LoginPage from './pages/LoginPage';
import { ErrorBoundary } from './components/ErrorBoundary';

// ✅ Lazy load all pages (loaded only when user navigates to them)
const OverviewPage = lazy(() => import('./pages/OverviewPage'));
const PipelinePage = lazy(() => import('./pages/PipelinePage'));
const ContactsPage = lazy(() => import('./pages/ContactsPage'));
const ContactDetailPage = lazy(() => import('./pages/contacts/ContactDetailPage'));
const ActivitiesPage = lazy(() => import('./pages/ActivitiesPage'));
const BlogPage = lazy(() => import('./pages/BlogPage'));
const SEOToolsPage = lazy(() => import('./pages/SEOToolsPage'));
const AIInsightsPage = lazy(() => import('./pages/AIInsightsPage'));
const EmailPage = lazy(() => import('./pages/EmailPage'));

// ✅ Minimal loading spinner (no external dependencies)
function PageLoader() {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '400px',
    }}>
      <div style={{
        width: '40px',
        height: '40px',
        border: '3px solid rgba(99, 102, 241, 0.2)',
        borderTopColor: '#6366f1',
        borderRadius: '50%',
        animation: 'spin 0.8s linear infinite',
      }} />
      <style>{`
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}

// ✅ Spinner for auth loading (critical path)
function Spinner({ size = 'md' }) {
  const sizes = { sm: '16px', md: '24px', lg: '40px' };
  return (
    <div style={{
      width: sizes[size],
      height: sizes[size],
      border: '3px solid rgba(99, 102, 241, 0.2)',
      borderTopColor: '#6366f1',
      borderRadius: '50%',
      animation: 'spin 0.8s linear infinite',
    }} />
  );
}

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Spinner size="lg" />
      </div>
    );
  }

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

  return children;
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/"
        element={
          <ProtectedRoute>
            {/* ✅ DataProvider inside ProtectedRoute — only fetches when logged in */}
            <DataProvider>
              <AppShell />
            </DataProvider>
          </ProtectedRoute>
        }
      >
        <Route
          index
          element={
            <Suspense fallback={<PageLoader />}>
              <OverviewPage />
            </Suspense>
          }
        />
        <Route
          path="insights"
          element={
            <Suspense fallback={<PageLoader />}>
              <AIInsightsPage />
            </Suspense>
          }
        />
        <Route
          path="pipeline"
          element={
            <Suspense fallback={<PageLoader />}>
              <PipelinePage />
            </Suspense>
          }
        />
        <Route
          path="contacts"
          element={
            <Suspense fallback={<PageLoader />}>
              <ContactsPage />
            </Suspense>
          }
        />
        <Route
          path="contacts/:id"
          element={
            <Suspense fallback={<PageLoader />}>
              <ContactDetailPage />
            </Suspense>
          }
        />
        <Route
          path="activities"
          element={
            <Suspense fallback={<PageLoader />}>
              <ActivitiesPage />
            </Suspense>
          }
        />
        <Route
          path="blog"
          element={
            <Suspense fallback={<PageLoader />}>
              <BlogPage />
            </Suspense>
          }
        />
        <Route
          path="seo"
          element={
            <Suspense fallback={<PageLoader />}>
              <SEOToolsPage />
            </Suspense>
          }
        />
        <Route
          path="email"
          element={
            <Suspense fallback={<PageLoader />}>
              <EmailPage />
            </Suspense>
          }
        />
      </Route>
    </Routes>
  );
}

export default function App() {
  return (
    <ErrorBoundary>
      <AuthProvider>
        <BrowserRouter>
          <AppRoutes />
        </BrowserRouter>
      </AuthProvider>
    </ErrorBoundary>
  );
}