import { StrictMode, lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async";
import { ThemeProvider } from "./contexts/ThemeContext";

// Lazy load components for better performance
const DateTimeDifference = lazy(() => import("./pages/DateTimeDifference"));
const DurationDifference = lazy(() => import("./pages/DurationDifference"));
const WorkingDaysDifference = lazy(() => import("./pages/WorkingDaysDifference"));
const About = lazy(() => import("./pages/About"));
const Contact = lazy(() => import("./pages/Contact"));
const NotFound = lazy(() => import("./pages/NotFound"));
const Pricing = lazy(() => import("./pages/Pricing"));
const Faqs = lazy(() => import("./pages/Faqs"));
const Blog = lazy(() => import("./pages/Blog"));

import "bootstrap-icons/font/bootstrap-icons.css";
import "./styles/theme.scss";
import ReactGA from 'react-ga';
import { reportWebVitals } from './utils/webVitals';
import { initializeAnalytics, trackPageView } from './utils/analytics';
import { initSentry, captureCalculationError, captureAnalyticsError, addBreadcrumb, SentryErrorBoundary } from './utils/sentry.jsx';
import './config/analytics-config.js';

// Initialize error tracking
initSentry();

// Make Sentry functions available globally for analytics integration
window.Sentry = {
  captureCalculationError,
  captureAnalyticsError,
  addBreadcrumb
};

ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS_ID);
initializeAnalytics();

// eslint-disable-next-line react-refresh/only-export-components
const TrackPageView = () => {
  const location = useLocation();
  ReactGA.set({ page: location.pathname });
  ReactGA.pageview(location.pathname);
  
  // Enhanced page view tracking
  trackPageView(location.pathname, {
    title: document.title,
    userType: 'anonymous' // You can enhance this with user authentication status
  });
  
  return null;
};

const routes = [
  { path: "/", component: DateTimeDifference },
  { path: "/date-difference", component: DateTimeDifference },
  { path: "/duration-difference", component: DurationDifference },
  { path: "/working-days-difference", component: WorkingDaysDifference },
  { path: "/pricing", component: Pricing },
  { path: "/faqs", component: Faqs },
  { path: "/about", component: About },
  { path: "/contact", component: Contact },
  { path: "/not-found-404", component: NotFound },
  { path: "/blog", component: Blog },
  { path: "*", component: NotFound },
];

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <SentryErrorBoundary 
      fallback={({ resetError }) => (
        <div className="container py-5 text-center">
          <div className="alert alert-danger" role="alert">
            <h4 className="alert-heading">Something went wrong!</h4>
            <p>We&apos;ve been notified of this error and are working to fix it.</p>
            <hr />
            <div className="d-flex justify-content-center gap-2">
              <button className="btn btn-outline-danger" onClick={resetError}>
                Try Again
              </button>
              <button className="btn btn-primary" onClick={() => window.location.href = '/'}>
                Go Home
              </button>
            </div>
          </div>
        </div>
      )}
    >
      <HelmetProvider>
        <ThemeProvider>
          <BrowserRouter>
            <TrackPageView />
            <Suspense fallback={<div className="d-flex justify-content-center align-items-center vh-100"><div className="spinner-border" role="status"></div></div>}>
              <Routes>
                <Route>
                  {routes.map(({ path, component: Component }) => (
                    <Route key={path} path={path} element={<Component />} />
                  ))}
                </Route>
              </Routes>
            </Suspense>
          </BrowserRouter>
        </ThemeProvider>
      </HelmetProvider>
    </SentryErrorBoundary>
  </StrictMode>
);

// Report web vitals
reportWebVitals();