import { createRoot } from 'react-dom/client';
import { QueryClientProvider } from '@tanstack/react-query';
import App from './App.tsx';
import './index.css';
import { ThemeProvider } from './components/ThemeProvider';
import { AuthProvider } from './contexts/AuthContext';
import { AppStateProvider } from './contexts/AppStateContext';
import { UserStateProvider } from './contexts/UserStateContext';
import { DashboardStateProvider } from './contexts/DashboardStateContext';
import { nativeIntegration } from './lib/native';
import { queryClient } from './lib/queryClient';
import { ToastHost } from './components/shared/ToastHost';
import { GlobalLoadingOverlay } from './components/shared/GlobalLoadingOverlay';

// Initialize native integration
nativeIntegration;

// Register service worker for caching and offline support
if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
  // Only register in production (not localhost)
  const isProduction = window.location.hostname !== 'localhost' && 
                       window.location.hostname !== '127.0.0.1' &&
                       !window.location.hostname.startsWith('192.168.') &&
                       !window.location.hostname.startsWith('10.0.');
  
  if (isProduction) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' })
        .then((registration) => {
          console.log('Service Worker registered successfully:', registration.scope);
          
          // Check for updates periodically (every hour)
          setInterval(() => {
            registration.update();
          }, 60 * 60 * 1000);
          
          // Check for updates on page focus
          window.addEventListener('focus', () => {
            registration.update();
          });
        })
        .catch((error) => {
          console.error('Service Worker registration failed:', error);
        });
    });
  }
}

// Set up React Query focus manager for WebView/React Native
if (typeof window !== 'undefined') {
  let visibilityChangeTimeout: NodeJS.Timeout | null = null;
  
  // Handle visibility changes for React Query refetching
  // Only refetch if the page was hidden for more than 30 seconds
  // This prevents aggressive refetching when briefly switching apps
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      // Clear any pending timeout
      if (visibilityChangeTimeout) {
        clearTimeout(visibilityChangeTimeout);
        visibilityChangeTimeout = null;
      }
      
      // Only invalidate if we've been hidden for a while
      // This prevents unnecessary reloads when quickly switching apps
      const lastHiddenTime = parseInt(sessionStorage.getItem('lastVisibilityHidden') || '0', 10);
      const hiddenDuration = Date.now() - lastHiddenTime;
      
      if (hiddenDuration > 30000) { // 30 seconds
        queryClient.resumePausedMutations();
        // Only invalidate stale queries, not all queries
        queryClient.invalidateQueries({ 
          predicate: (query) => query.state.dataUpdatedAt < Date.now() - 30000 
        });
      } else {
        // For short absences, just resume paused mutations
        queryClient.resumePausedMutations();
      }
    } else {
      // Track when we became hidden
      sessionStorage.setItem('lastVisibilityHidden', Date.now().toString());
    }
  });

  // Handle focus events - be less aggressive
  window.addEventListener('focus', () => {
    queryClient.resumePausedMutations();
    // Don't invalidate all queries on focus - let React Query handle stale time naturally
  });
}

// Mark page initialization start
if (typeof window !== 'undefined') {
  // Clear any recovery timeout since we're initializing
  if (window.authRecoveryTimeout) {
    clearTimeout(window.authRecoveryTimeout);
    delete window.authRecoveryTimeout;
  }
  
  // Mark that React is initializing (helps with faster recovery detection)
  sessionStorage.setItem('react_initializing', 'true');
}

createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <ThemeProvider>
      <AuthProvider>
        <AppStateProvider>
          <UserStateProvider>
            <DashboardStateProvider>
              <App />
              <GlobalLoadingOverlay />
              <ToastHost />
            </DashboardStateProvider>
          </UserStateProvider>
        </AppStateProvider>
      </AuthProvider>
    </ThemeProvider>
  </QueryClientProvider>
);

// Mark React as initialized after a brief delay (to allow App to mount)
if (typeof window !== 'undefined') {
  setTimeout(() => {
    sessionStorage.removeItem('react_initializing');
  }, 100);
}