import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "@/contexts/AuthContext";
import { OrchestrationProvider } from "@/contexts/OrchestrationContext";
import { ThemeProvider } from "@/components/theme-provider";
import { ConnectivityProvider } from "@/services/connectivity-service";
import { OfflineRecordingManager } from "@/components/recording/OfflineRecordingManager";
import { ErrorBoundary } from "@/components/error/ErrorBoundary";
import { MobileBottomNav } from "@/components/ui/mobile/MobileBottomNav";
import { RoutesWithTracking } from "@/components/routing/RoutesWithTracking";
import { DeviceProvider } from "@/contexts/DeviceContext";
import { useEffect } from "react";
// Import debug utilities for console access
import "@/utils/ai-recovery-debug";

// Create a client with optimized settings for performance
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false, // Disable retries initially to reduce main-thread work
      staleTime: 10 * 60 * 1000, // 10 minutes - longer stale time
      gcTime: 15 * 60 * 1000, // 15 minutes - longer garbage collection time
    },
    mutations: {
      retry: false, // Disable retries for mutations initially
    },
  },
});

// Standard routing

// Setup global error handlers on app mount
const GlobalErrorHandler = () => {
  useEffect(() => {
    // Handle unhandled promise rejections
    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
      console.error('[GlobalErrorHandler] Unhandled Promise Rejection:', {
        reason: event.reason,
        promise: event.promise,
        stack: event.reason?.stack,
        message: event.reason?.message
      });
      
      // Prevent default handling to avoid browser error page
      event.preventDefault();
    };

    // Handle window errors
    const handleWindowError = (event: ErrorEvent) => {
      // Suppress harmless ResizeObserver warnings that are common in React apps
      if (event.message?.includes('ResizeObserver loop completed')) {
        return true; // Suppress this error
      }

      const errorInfo = {
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        errorStack: event.error?.stack || String(event.error),
        errorType: event.error?.constructor?.name || typeof event.error,
      };

      // Log with better formatting
      console.error('[GlobalErrorHandler] Window Error:', errorInfo.message);
      console.error('[GlobalErrorHandler] Details:', errorInfo);

      // Return false to allow default handling
      return false;
    };

    window.addEventListener('unhandledrejection', handleUnhandledRejection);
    window.addEventListener('error', handleWindowError);

    return () => {
      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
      window.removeEventListener('error', handleWindowError);
    };
  }, []);

  return null;
};

const App = () => (
  <ErrorBoundary>
    <GlobalErrorHandler />
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <ConnectivityProvider>
          <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
            <AuthProvider>
              <OrchestrationProvider>
                <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
                  <DeviceProvider>
                    <OfflineRecordingManager />
                    <MobileBottomNav />

                    {/* Routes with GTM tracking */}
                    <RoutesWithTracking />
                  </DeviceProvider>
                </ThemeProvider>
              </OrchestrationProvider>
            </AuthProvider>
          </BrowserRouter>
        </ConnectivityProvider>
      </TooltipProvider>
    </QueryClientProvider>
  </ErrorBoundary>
);

export default App;