import React, { useState, useEffect, Suspense, lazy } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
import App from './App'
import Loader from './components/Loader'
import ErrorBoundary from './components/ErrorBoundary'
import { initializeAnalytics, trackPageView } from './utils/analytics'
import './index.css'

// Lazy load page components for code splitting and better performance
const AISearch = lazy(() => import('./pages/AISearch'))
const AIRecommendations = lazy(() => import('./pages/AIRecommendations'))
const AdvancedAIServices = lazy(() => import('./pages/AdvancedAIServices'))
const Renderly = lazy(() => import('./pages/Prerender'))
const Magento = lazy(() => import('./pages/Magento'))
const Shopify = lazy(() => import('./pages/Shopify'))
const WordPress = lazy(() => import('./pages/WordPress'))
const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'))
const TermsOfService = lazy(() => import('./pages/TermsOfService'))

// Solution pages
const Solutions = lazy(() => import('./pages/Solutions'))
const MagentoAISearch = lazy(() => import('./pages/MagentoAISearch'))
const AdobeCommerceAISearch = lazy(() => import('./pages/AdobeCommerceAISearch'))
const SemanticDiscovery = lazy(() => import('./pages/SemanticDiscovery'))
const VectorSearch = lazy(() => import('./pages/VectorSearch'))
const RAGChatbot = lazy(() => import('./pages/RAGChatbot'))
const AIRecommendationEngine = lazy(() => import('./pages/AIRecommendationEngine'))

// Platform pages
const MagentoTwo = lazy(() => import('./pages/MagentoTwo'))
const AdobeCommerce = lazy(() => import('./pages/AdobeCommerce'))

// Scroll to top component
const ScrollToTop = () => {
  const { pathname } = useLocation()
  
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [pathname])
  
  return null
}

// Loading fallback for suspense
const PageLoader = () => <Loader />

// Page transition wrapper
const PageTransition = ({ children }) => {
  const location = useLocation()
  const [isLoading, setIsLoading] = useState(false)
  const [displayLocation, setDisplayLocation] = useState(location)

  useEffect(() => {
    if (location.pathname !== displayLocation.pathname) {
      setIsLoading(true)
      window.scrollTo(0, 0)
      
      const timer = setTimeout(() => {
        setDisplayLocation(location)
        setIsLoading(false)
      }, 1000) // Loader duration
      return () => clearTimeout(timer)
    }
  }, [location, displayLocation])

  return (
    <>
      {isLoading && <Loader />}
      <div 
        className={isLoading ? 'opacity-0 pointer-events-none transition-opacity duration-200' : 'opacity-100 transition-opacity duration-200'}
        style={{ contain: 'layout style paint' }}
      >
        {children}
      </div>
    </>
  )
}

// Initial loader - optimize CLS by showing it briefly
const InitialLoader = ({ children }) => {
  const [initialLoad, setInitialLoad] = useState(true)

  useEffect(() => {
    const timer = setTimeout(() => {
      setInitialLoad(false)
    }, 800) // Reduced from 1500 for better perceived performance
    return () => clearTimeout(timer)
  }, [])

  if (initialLoad) {
    return <Loader />
  }

  return children
}

const AppRouter = () => {
  const location = useLocation()
  
  // Track page views on route change
  useEffect(() => {
    trackPageView(location.pathname, document.title)
  }, [location.pathname])
  
  return (
    <>
      <ScrollToTop />
      <PageTransition>
        <Suspense fallback={<PageLoader />}>
          <Routes location={location}>
            <Route path="/" element={<App />} />
            
            {/* Solution Pages */}
            <Route path="/solutions" element={<Solutions />} />
            <Route path="/solutions/magento-ai-search" element={<MagentoAISearch />} />
            <Route path="/solutions/adobe-commerce-ai-search" element={<AdobeCommerceAISearch />} />
            <Route path="/solutions/ecommerce-semantic-discovery" element={<SemanticDiscovery />} />
            <Route path="/solutions/vector-search" element={<VectorSearch />} />
            <Route path="/solutions/rag-chatbot" element={<RAGChatbot />} />
            <Route path="/solutions/ai-product-recommendation-engine" element={<AIRecommendationEngine />} />
            
            {/* Platform Pages */}
            <Route path="/platforms/magento-2" element={<MagentoTwo />} />
            <Route path="/platforms/adobe-commerce" element={<AdobeCommerce />} />
            
            {/* Existing Routes */}
            <Route path="/search" element={<AISearch />} />
            <Route path="/recommendations" element={<AIRecommendations />} />
            <Route path="/advanced-ai" element={<AdvancedAIServices />} />
            <Route path="/renderly" element={<Renderly />} />
            <Route path="/magento" element={<Magento />} />
            <Route path="/shopify" element={<Shopify />} />
            <Route path="/wordpress" element={<WordPress />} />
            <Route path="/privacy" element={<PrivacyPolicy />} />
            <Route path="/terms" element={<TermsOfService />} />
          </Routes>
        </Suspense>
      </PageTransition>
    </>
  )
}

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary>
      <BrowserRouter>
        <InitialLoader>
          <AppRouter />
        </InitialLoader>
      </BrowserRouter>
    </ErrorBoundary>
  </React.StrictMode>
)

// Initialize analytics (replace YOUR_GA_ID with your Google Analytics ID)
// initializeAnalytics('YOUR_GA_ID')