import React, { useEffect, useState } from 'react';
import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route, Navigate, useNavigate } from "react-router-dom";
import { Capacitor } from '@capacitor/core';
import { usePermissions } from '@/hooks/usePermissions';
import { useDeepLinks } from '@/hooks/useDeepLinks';
import { AuthProvider, useAuth } from "@/hooks/useAuth";
import { useBetaMode } from "@/hooks/useBetaMode";
import { useExpirationNotifications } from '@/hooks/useExpirationNotifications';
import { useNativeNotifications } from '@/hooks/useNativeNotifications';
import { usePushNotifications } from '@/hooks/usePushNotifications';
import { useDeferredInitialization } from "@/hooks/useDeferredInitialization";
import { ThemeProvider } from "@/components/ThemeProvider";
import { CookieConsentBanner } from "@/components/CookieConsentBanner";
import { PrivacySettingsDialog } from "@/components/PrivacySettingsDialog";
import { SplashScreen } from "@/components/SplashScreen";
// Lazy load route components for code splitting
const Auth = React.lazy(() => import("./pages/Auth"));
const Onboarding = React.lazy(() => import("./pages/Onboarding"));
const Dashboard = React.lazy(() => import("./pages/Dashboard"));
const Send = React.lazy(() => import("./pages/Send"));
const Ride = React.lazy(() => import("./pages/Ride"));
const RecurringRideOffer = React.lazy(() => import("./pages/RecurringRideOffer"));
const Activity = React.lazy(() => import("./pages/Activity"));
const Profile = React.lazy(() => import("./pages/Profile"));
const Settings = React.lazy(() => import("./pages/Settings"));
const About = React.lazy(() => import("./pages/About"));
const HowItWorks = React.lazy(() => import("./pages/HowItWorks"));
const FAQ = React.lazy(() => import("./pages/FAQ"));
import Wallet from "./pages/Wallet";
const Notifications = React.lazy(() => import("./pages/Notifications"));
const MyIssues = React.lazy(() => import("./pages/MyIssues"));
const NotFound = React.lazy(() => import("./pages/NotFound"));
const AuthCallback = React.lazy(() => import("./pages/AuthCallback"));
const Transaction = React.lazy(() => import("./pages/Transaction"));
const PastTransactionView = React.lazy(() => import("./components/PastTransactionView"));
import { MobileLayout } from "@/components/MobileLayout";
import { supabase } from "@/integrations/supabase/client";

const queryClient = new QueryClient();

// Protected Route component
function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth();
  const [onboardingCompleted, setOnboardingCompleted] = React.useState<boolean | null>(null);

  React.useEffect(() => {
    if (user) {
      checkOnboardingStatus();
    }
  }, [user]);

  const checkOnboardingStatus = async () => {
    if (!user) return;

    const { data } = await supabase
      .from('profiles')
      .select('onboarding_completed')
      .eq('user_id', user.id)
      .maybeSingle();

    setOnboardingCompleted(data?.onboarding_completed ?? false);
  };

  if (loading || (user && onboardingCompleted === null)) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  if (!user) {
    return <Navigate to="/auth" replace />;
  }

  if (user && !onboardingCompleted) {
    return <Navigate to="/onboarding" replace />;
  }

  return <>{children}</>;
}

// Root component that shows HowItWorks for unauthenticated or redirects to dashboard
function RootRoute() {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (loading) return;

    if (user) {
      navigate('/dashboard', { replace: true });
    } else {
      // For native apps, redirect to auth page
      const isNative = Capacitor.isNativePlatform();
      if (isNative) {
        navigate('/auth', { replace: true });
      }
    }
  }, [user, loading, navigate]);

  // Show loading while checking auth
  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  // For authenticated users, we'll redirect (handled by useEffect)
  // For native unauthenticated, we'll redirect to /auth (handled by useEffect)
  // For web unauthenticated, show HowItWorks directly
  if (user || Capacitor.isNativePlatform()) {
    return null;
  }

  return <HowItWorks />;
}

function AppRoutes() {
  const { user, loading } = useAuth();
  const { isBetaMode } = useBetaMode();
  const isReady = useDeferredInitialization(2000); // 2 second delay

  // Hook for expiration notifications - deferred
  useExpirationNotifications(isReady);

  // Hook for deep links
  useDeepLinks();

  // Push notifications - re-enabled with fixed hook
  usePushNotifications(isReady && !!user);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <MobileLayout>
      <React.Suspense
        fallback={
          <div className="loading-container">
            <div className="loading-spinner animate-spin"></div>
          </div>
        }
      >
        <Routes>
          <Route path="/" element={<RootRoute />} />
          {/* Sign-IN is open on the web to invited beta users. Sign-UP is
              disabled on the web while beta mode is on — enforced by the
              submit button in BOTH auth forms, Auth.tsx (>=1024px) and
              MobileAuthSheet.tsx (<1024px), since useIsMobile picks between
              them on viewport width, not platform. The gate is isBetaMode,
              not the platform: setting VITE_BETA_MODE to false opens web
              sign-up with no code change. Native is unaffected either way —
              isBetaMode is false on native by construction. */}
          <Route path="/auth" element={
            user ? <Navigate to="/dashboard" replace /> : <Auth />
          } />
          <Route path="/auth/callback" element={<AuthCallback />} />
          <Route path="/onboarding" element={user ? <Onboarding /> : <Navigate to="/auth" replace />} />
          <Route path="/dashboard" element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          } />
          <Route path="/send" element={
            <ProtectedRoute>
              <Send />
            </ProtectedRoute>
          } />
          <Route path="/ride" element={
            <ProtectedRoute>
              <Ride />
            </ProtectedRoute>
          } />
          <Route path="/ride/recurring" element={
            <ProtectedRoute>
              <RecurringRideOffer />
            </ProtectedRoute>
          } />
          <Route path="/activity" element={
            <ProtectedRoute>
              <Activity />
            </ProtectedRoute>
          } />
          <Route path="/transaction/:id" element={
            <ProtectedRoute>
              <Transaction />
            </ProtectedRoute>
          } />
          <Route path="/past-transaction/:id" element={
            <ProtectedRoute>
              <PastTransactionView />
            </ProtectedRoute>
          } />
          <Route path="/profile" element={
            <ProtectedRoute>
              <Profile />
            </ProtectedRoute>
          } />
          <Route path="/wallet" element={
            <ProtectedRoute>
              <Wallet />
            </ProtectedRoute>
          } />
          <Route path="/settings" element={
            <ProtectedRoute>
              <Settings />
            </ProtectedRoute>
          } />
          <Route path="/notifications" element={
            <ProtectedRoute>
              <Notifications />
            </ProtectedRoute>
          } />
          <Route path="/my-issues" element={
            <ProtectedRoute>
              <MyIssues />
            </ProtectedRoute>
          } />
          <Route path="/about" element={<About />} />
          <Route path="/how-it-works" element={<Navigate to="/" replace />} />
          <Route path="/faq" element={
            isBetaMode ? <Navigate to="/" replace /> : <FAQ />
          } />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </React.Suspense>
    </MobileLayout>
  );
}

function PermissionsProvider({ children }: { children: React.ReactNode }) {
  // Disabled: All permissions removed to fix infinite loop
  // const { user } = useAuth();
  // const isReady = useDeferredInitialization(1000);
  // const { requestAllPermissions } = usePermissions();
  // const { requestPermissions: requestNotificationPermissions } = useNativeNotifications();
  
  return <>{children}</>;
}

function App() {
  const [privacyDialogOpen, setPrivacyDialogOpen] = useState(false);
  const [showSplash, setShowSplash] = useState(() => {
    // Only show splash on native platforms
    return Capacitor.isNativePlatform();
  });

  const handleSplashComplete = () => {
    setShowSplash(false);
  };

  if (showSplash) {
    return <SplashScreen onComplete={handleSplashComplete} />;
  }

  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem
          disableTransitionOnChange
        >
          <AuthProvider>
            <PermissionsProvider>
              <TooltipProvider>
                <AppRoutes />
                <Toaster />
                <Sonner />
                <CookieConsentBanner onManageSettings={() => setPrivacyDialogOpen(true)} />
                <PrivacySettingsDialog 
                  open={privacyDialogOpen} 
                  onOpenChange={setPrivacyDialogOpen} 
                />
              </TooltipProvider>
            </PermissionsProvider>
          </AuthProvider>
        </ThemeProvider>
      </BrowserRouter>
    </QueryClientProvider>
  );
}

export default App;