import { NotificationProvider } from "./components/NotificationProvider";
import { ThemeProvider } from "./components/ThemeProvider";
import { ErrorBoundary } from "./components/ErrorBoundary";
import { Toaster } from "./components/ui/sonner";
import { PageRouter } from "./components/PageRouter";
import { useAppLogic } from "./hooks/useAppLogic";
import { useOfflineDetection } from "./hooks/useOfflineDetection";
import { performanceMonitor, initWebVitals } from "./utils/performance";
import { Suspense, useEffect } from "react";
import { DashboardSkeleton } from "./components/LoadingSkeleton";

// Initialize performance monitoring
initWebVitals();

function AppContent() {
  const {
    currentPage,
    user,
    isLoading,
    isMobile,
    setCurrentPage,
    handleGetStarted,
    handleLandingNavigate,
    handleBackToLanding,
    handleSignUp,
    handleSignIn,
    handleLogout,
    handleNavigate,
    handleBackToDashboard
  } = useAppLogic();

  const isOnline = useOfflineDetection();

  useEffect(() => {
    // Record app initialization time
    performanceMonitor.recordMetric('app_initialization', performance.now());
    
    // Cleanup performance monitoring on unmount
    return () => {
      performanceMonitor.cleanup();
    };
  }, []);

  return (
    <div className="min-h-screen">
      {/* Offline Indicator */}
      {!isOnline && (
        <div className="fixed top-0 left-0 right-0 bg-warning text-warning-foreground px-4 py-2 text-center text-sm font-medium z-50">
          You are currently offline. Some features may not be available.
        </div>
      )}

      <Suspense fallback={<DashboardSkeleton />}>
        <PageRouter
          currentPage={currentPage}
          user={user}
          isMobile={isMobile}
          onGetStarted={handleGetStarted}
          onLandingNavigate={handleLandingNavigate}
          onBackToLanding={handleBackToLanding}
          onSignUp={handleSignUp}
          onSignIn={handleSignIn}
          onLogout={handleLogout}
          onNavigate={handleNavigate}
          onBackToDashboard={handleBackToDashboard}
          onSetCurrentPage={setCurrentPage}
        />
      </Suspense>
      
      <Toaster 
        position="top-right"
        toastOptions={{
          style: {
            background: 'var(--background)',
            border: '1px solid var(--border)',
            color: 'var(--foreground)',
          },
        }}
      />
      
      {/* Enhanced Loading Overlay */}
      {isLoading && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 backdrop-blur-sm">
          <div className="bg-card rounded-lg p-8 flex flex-col items-center gap-4 shadow-xl">
            <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
            <p className="text-foreground font-medium">Processing...</p>
            <p className="text-muted-foreground text-sm">This may take a few moments</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <NotificationProvider>
          <AppContent />
        </NotificationProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}