import React from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import App from './App.tsx'
import './index.css'
import { setupGlobalChunkErrorHandler } from '@/utils/chunkErrorHandler'
import { startAppUpdateWatcher } from '@/utils/appUpdate'
import { AppUpdateBanner } from '@/components/AppUpdateBanner'
import { initPerformanceMonitoring } from '@/utils/performanceMonitoring'

// Create Query Client with optimized defaults for better performance
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 10 * 60 * 1000, // 10 minutes (increased from 5 for better caching)
      gcTime: 30 * 60 * 1000, // 30 minutes (increased from 10 for longer cache retention)
      retry: (failureCount, error: any) => {
        // Don't retry on 4xx errors
        if (error?.status >= 400 && error?.status < 500) return false
        return failureCount < 3
      },
      refetchOnWindowFocus: false,
      refetchOnReconnect: true,
      // Network mode optimization
      networkMode: 'offlineFirst',
    },
    mutations: {
      retry: 1,
      retryDelay: 1000,
      // Network mode optimization
      networkMode: 'offlineFirst',
    },
  },
})

// Devtools are dev-only. Using a lazy import (instead of a top-level one)
// keeps the ~tens-of-KB devtools bundle out of the production build entirely —
// Vite tree-shakes the `import.meta.env.DEV` branch away when building for prod.
const ReactQueryDevtools = import.meta.env.DEV
  ? React.lazy(() =>
      import('@tanstack/react-query-devtools').then((m) => ({
        default: m.ReactQueryDevtools,
      }))
    )
  : () => null;

const root = createRoot(
  document.getElementById('root') as HTMLElement
);

// Setup global chunk error handler (must be done early)
setupGlobalChunkErrorHandler();

// Initialize performance monitoring (development and production)
if (import.meta.env.PROD) {
  // In production, delay to avoid interfering with initial load
  setTimeout(initPerformanceMonitoring, 1000);
} else {
  // In development, initialize immediately for debugging
  initPerformanceMonitoring();
}

// Register Service Worker for offline capabilities (only in production)
if ('serviceWorker' in navigator && import.meta.env.PROD) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then((reg) => {
        console.log('✅ Service Worker registered:', reg.scope);
      })
      .catch((err) => {
        console.error('❌ Service Worker registration failed:', err);
      });
  });
}

// Watch for new deploys (prod only) so users get a "Refresh" prompt instead of
// silently running a stale build until a chunk 404s.
if (import.meta.env.PROD) {
  startAppUpdateWatcher();
}

// Unregister any existing service workers in development (immediately, before page load)
if (import.meta.env.DEV && 'serviceWorker' in navigator) {
  // Unregister immediately, don't wait for load event
  (async () => {
    try {
      const registrations = await navigator.serviceWorker.getRegistrations();
      for (const registration of registrations) {
        const success = await registration.unregister();
        if (success) {
          console.log('🔄 Unregistered service worker for development');
          // Clear all caches
          if ('caches' in window) {
            const cacheNames = await caches.keys();
            await Promise.all(cacheNames.map(name => caches.delete(name)));
            console.log('🗑️ Cleared all caches');
          }
        }
      }
      // Also try to unregister any controlling service worker
      if (navigator.serviceWorker.controller) {
        navigator.serviceWorker.controller.postMessage({ type: 'SKIP_WAITING' });
      }
    } catch (err) {
      // Ignore errors when unregistering
    }
  })();
}

// Render the app
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <AppUpdateBanner />
      {import.meta.env.DEV && (
        <React.Suspense fallback={null}>
          <ReactQueryDevtools initialIsOpen={false} />
        </React.Suspense>
      )}
    </QueryClientProvider>
  </React.StrictMode>
);