import { Toaster } from '@/components/ui/sonner';
import { TooltipProvider } from '@/components/ui/tooltip';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useScrollToTop } from './hooks/use-scroll';
import { Header } from './components/layout/Header';
import { Footer } from './components/layout/Footer';
import HomePage from './pages/Index';
import ProfilePage from "./pages/Profile";
import NotFound from './pages/NotFound';
import DoctorsPage from './pages/Doctors';
import PackagesPage from './pages/Packages';
import ServicesPage from './pages/Services';
import AboutPage from './pages/About';
import ContactPage from './pages/Contact';
import LoginPage from './pages/Login';
import RegisterPage from './pages/Register';
import ForgotPasswordPage from './pages/ForgotPassword';
import ResetPasswordPage from './pages/ResetPassword';
import TermsPage from './pages/Terms';
import Appointment from './pages/Appointment';
import AdminContactsPage from './pages/AdminContacts';
import SitemapPage from './pages/Sitemap';
import { AuthProvider, useAuth } from './context/AuthContext'; // ✅ case fixed
import ReceptionRoute from './components/routes/ReceptionRoute';
import './App.css';
import { useEffect } from 'react';
import { initVisitorTracking } from './services/analyticsService';
import { cdnService } from './services/cdnService';
import { performanceService } from './services/performanceService';
import { PosterModal } from './components/PosterModal';

const queryClient = new QueryClient();

// ScrollToTop component
function ScrollToTop() {
  useScrollToTop();
  return null;
}

// ✅ Generic Protected Route (must be logged in)
function ProtectedRoute({ children }: { children: JSX.Element }) {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" replace />;
}

// ✅ Admin-only Protected Route
function AdminRoute({ children }: { children: JSX.Element }) {
  const { user } = useAuth();
  return user && user.role === 'admin'
    ? children
    : <Navigate to="/" replace />;
}

const App = () => (
  <QueryClientProvider client={queryClient}>
    <TooltipProvider>
      <Toaster />
      {/* ✅ Wrap everything inside AuthProvider */}
      <AuthProvider>
        <BrowserRouter>
          <ScrollToTop />
          {(() => {
            function AnalyticsInit() {
              useEffect(() => {
                const init = async () => {
                  try {
                    // Initialize performance monitoring first
                    performanceService.initialize();
                    
                    await initVisitorTracking();
                    // Initialize CDN service for performance optimization
                    cdnService.initialize();
                  } catch (err) {
                    console.error('Analytics init failed', err);
                  }
                };
                init();
              }, []);
              return null;
            }
            return <AnalyticsInit />;
          })()}
          
          <div className="flex flex-col min-h-screen">
            <Header />
            <PosterModal />
            <main className="flex-grow">
              <Routes>
                <Route path="/" element={<HomePage />} />
                <Route path="/doctors" element={<DoctorsPage />} />
                <Route path="/services" element={<ServicesPage />} />
                <Route path="/about" element={<AboutPage />} />
                <Route path="/contact" element={<ContactPage />} />
                <Route path="/profile" element={<ProfilePage />} />
                {/* ✅ Admin-only */}
                <Route
                  path="/packages"
                  element={
                    <AdminRoute>
                      <PackagesPage />
                    </AdminRoute>
                  }
                />
                <Route
                  path="/appointment"
                  element={
                    <ReceptionRoute>
                      <Appointment />
                    </ReceptionRoute>
                  }
                />
                <Route
                  path="/admin/contacts"
                  element={
                    <AdminRoute>
                      <AdminContactsPage />
                    </AdminRoute>
                  }
                />
                
                {/* Auth routes */}
                <Route path="/login" element={<LoginPage />} />
                <Route path="/register" element={<RegisterPage />} />
                <Route path="/forgot-password" element={<ForgotPasswordPage />} />
                <Route path="/reset-password" element={<ResetPasswordPage />} />
                <Route path="/terms" element={<TermsPage />} />
                <Route
                  path="/sitemap"
                  element={
                    <AdminRoute>
                      <SitemapPage />
                    </AdminRoute>
                  }
                />
                <Route path="*" element={<NotFound />} />
              </Routes>
            </main>
            <Footer />
          </div>
        </BrowserRouter>
      </AuthProvider>
    </TooltipProvider>
  </QueryClientProvider>
);

export default App;