client/src/App.jsx

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'react-hot-toast';
import { AuthProvider, useAuth } from './context/AuthContext';
import { WebsiteProvider } from './context/WebsiteContext';
import Layout from './components/Layout';
import PublicLayout from './components/PublicLayout';

// Auth Pages (Lazy)
const Login = lazy(() => import('./pages/Login'));
const Register = lazy(() => import('./pages/Register'));

// Dashboard Pages (Lazy)
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const ChatManagement = lazy(() => import('./pages/ChatManagement'));
const ContentManager = lazy(() => import('./pages/ContentManager'));
const UnansweredQuestions = lazy(() => import('./pages/UnansweredQuestions'));
const FAQManagement = lazy(() => import('./pages/FAQManagement'));
const WebsiteManagement = lazy(() => import('./pages/WebsiteManagement'));
const UserManagement = lazy(() => import('./pages/UserManagement'));
const PatientTimeline = lazy(() => import('./pages/PatientTimeline'));
const OnboardingSuccess = lazy(() => import('./pages/OnboardingSuccess'));
const CreateFirstWebsite = lazy(() => import('./pages/CreateFirstWebsite'));
const NotificationCenter = lazy(() => import('./pages/NotificationCenter'));
const NotificationSettings = lazy(() => import('./pages/NotificationSettings'));

// Public Pages (Lazy)
const Home = lazy(() => import('./pages/Home'));
const Pricing = lazy(() => import('./pages/Pricing'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const Privacy = lazy(() => import('./pages/Privacy'));
const Terms = lazy(() => import('./pages/Terms'));
const CookiePolicy = lazy(() => import('./pages/CookiePolicy'));
const GDPR = lazy(() => import('./pages/GDPR'));
const Security = lazy(() => import('./pages/Security'));
const HelpCenter = lazy(() => import('./pages/HelpCenter'));
const Blog = lazy(() => import('./pages/Blog'));
const BlogDetail = lazy(() => import('./pages/BlogDetail'));

import './index.css';

const queryClient = new QueryClient();

const LoadingSpinner = () => (
  <div className="min-h-screen flex items-center justify-center bg-secondary-50">
    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
  </div>
);

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

  if (loading) {
    return <LoadingSpinner />;
  }

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

  return children;
};

const PublicRoute = ({ children }) => {
  const { user, loading } = useAuth();

  if (loading) {
    return <LoadingSpinner />;
  }

  if (user) {
    return <Navigate to="/websites" />;
  }

  return children;
};

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <WebsiteProvider>
          <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
            <Toaster position="top-right" />
            <Suspense fallback={<LoadingSpinner />}>
              <Routes>
                {/* Public Routes */}
                <Route element={<PublicLayout />}>
                  <Route path="/" element={<Home />} />
                  <Route path="/pricing" element={<Pricing />} />
                  <Route path="/about" element={<About />} />
                  <Route path="/contact" element={<Contact />} />
                  <Route path="/privacy" element={<Privacy />} />
                  <Route path="/terms" element={<Terms />} />
                  <Route path="/cookies" element={<CookiePolicy />} />
                  <Route path="/gdpr" element={<GDPR />} />
                  <Route path="/security" element={<Security />} />
                  <Route path="/help" element={<HelpCenter />} />
                  <Route path="/blog" element={<Blog />} />
                  <Route path="/blog/:slug" element={<BlogDetail />} />

                  <Route
                    path="/login"
                    element={
                      <PublicRoute>
                        <Login />
                      </PublicRoute>
                    }
                  />
                  <Route
                    path="/register"
                    element={
                      <PublicRoute>
                        <Register />
                      </PublicRoute>
                    }
                  />
                </Route>

                {/* Protected Dashboard Routes */}
                <Route
                  element={
                    <ProtectedRoute>
                      <Layout />
                    </ProtectedRoute>
                  }
                >
                  <Route path="/dashboard" element={<Dashboard />} />
                  <Route path="/settings" element={<Settings />} />
                  <Route path="/chats" element={<ChatManagement />} />
                  <Route path="/users" element={<UserManagement />} />
                  <Route path="/leads/:email" element={<PatientTimeline />} />
                  <Route path="/content" element={<ContentManager />} />
                  <Route path="/unanswered-questions" element={<UnansweredQuestions />} />
                  <Route path="/faqs" element={<FAQManagement />} />
                  <Route path="/websites" element={<WebsiteManagement />} />
                  <Route path="/onboarding-success" element={<OnboardingSuccess />} />
                  <Route path="/onboarding/create-website" element={<CreateFirstWebsite />} />
                  <Route path="/notifications" element={<NotificationCenter />} />
                  <Route path="/notifications/settings" element={<NotificationSettings />} />
                </Route>

                {/* Catch all */}
                <Route path="*" element={<Navigate to="/" replace />} />
              </Routes>
            </Suspense>
          </Router>
        </WebsiteProvider>
      </AuthProvider>
    </QueryClientProvider>
  );
}

export default App;