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, useLocation } from "react-router-dom";
import React from "react";
import { AuthProvider, useAuth } from "@/hooks/useAuth";
import { ProtectedRoute } from "@/components/ProtectedRoute";
import { Footer } from "@/components/Footer";
import { LocaleProvider } from "@/components/LocaleSelector";
import { FloatingChatbot } from "@/components/stackai/FloatingChatbot";
import { PageViewTracker } from "@/components/analytics/PageViewTracker";
import { MetaPixelTracker } from "@/components/analytics/MetaPixelTracker";
import { MarketingAssistantWidget } from "@/components/marketing/MarketingAssistantWidget";
import { isPublicMarketingRoute } from "@/lib/publicMarketingRoutes";
// import { CalendarPromptProvider } from "@/components/dashboard/CalendarConnectionPrompt";
import './lib/i18n';

// Direct imports for stability
import Index from "./pages/Index";
import Dashboard from "./pages/Dashboard";
import Setup from "./pages/Setup";
import Auth from "./pages/Auth";
import NotFound from "./pages/NotFound";
import Terms from "./pages/Terms";
import Privacy from "./pages/Privacy";
import RefundPolicy from "./pages/RefundPolicy";
import DataDeletion from "./pages/DataDeletion";
import DeletionStatus from "./pages/DeletionStatus";
import BookingPage from "./pages/BookingPage";
import Customize from "./pages/Customize";
import Settings from "./pages/Settings";
import Availability from "./pages/Availability";
import Contact from "./pages/Contact";
import FAQ from "./pages/FAQ";
import Features from "./pages/Features";
import Pricing from "./pages/Pricing";
import RoiCalculator from "./pages/RoiCalculator";
import IgFbReplyGenerator from "./pages/IgFbReplyGenerator";
import Analytics from "./pages/Analytics";
import Customers from "./pages/Customers";
import SubmitReview from "./pages/SubmitReview";
import Roadmap from "./pages/Roadmap";
import BespokeSolutions from "./pages/BespokeSolutions";
import AuthCallback from "./pages/api/AuthCallback";
import EmbedWidget from "./pages/EmbedWidget";
import SocialMediaBotFAQ from "./pages/SocialMediaBotFAQ";
import SalonsAndSpas from "./pages/SalonsAndSpas";
import Barbershops from "./pages/Barbershops";
import TattooStudios from "./pages/TattooStudios";
import PersonalTrainers from "./pages/PersonalTrainers";
import ClinicsAndDentist from "./pages/ClinicsAndDentist";
import Gyms from "./pages/Gyms";
import Consultants from "./pages/Consultants";
import Tutoring from "./pages/Tutoring";
import HomeServices from "./pages/HomeServices";
import Automotive from "./pages/Automotive";
import RealEstate from "./pages/RealEstate";
import PetServices from "./pages/PetServices";
import Branches from "./pages/Branches";
import PromoCodes from "./pages/PromoCodes";
import Products from "./pages/Products";
import Orders from "./pages/Orders";
import StaffCommissions from "./pages/StaffCommissions";
import ServiceEdit from "./pages/ServiceEdit";
import TeamManagement from "./pages/TeamManagement";
import StaffDashboard from "./pages/StaffDashboard";
import StaffInvite from "./pages/StaffInvite";
import StaffBookingPage from "./pages/StaffBookingPage";
import StaffSettings from "./pages/StaffSettings";
import ResetPassword from "./pages/ResetPassword";
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      gcTime: 10 * 60 * 1000, // 10 minutes
      retry: 2, // Reduce retry attempts for faster failure
      refetchOnWindowFocus: false, // Prevent unnecessary refetches
      refetchOnReconnect: 'always',
    },
    mutations: {
      retry: 1, // Quick failure for mutations
    },
  },
});

// Component to render FloatingChatbot - Only for signed in users with active subscriptions
const ConditionalChatbot = () => {
  const { user } = useAuth();
  const location = useLocation();
  const [hasActiveSubscription, setHasActiveSubscription] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

  // Whitelist: These emails always see the chatbot
  const whitelistedEmails = [
    'admin@stackmotion.ai',
    'minriemacapugay@gmail.com',
    'mariesalon8@gmail.com',
    'test@bookingassist.co',
    'bookingassist.starter@gmail.com',
    'bookingassist.pro@gmail.com',
    'bookingassistpro.sm@gmail.com',
    'ba.eductraining@gmail.com',
    'ba.events01@gmail.com',
    'ba.homeservices1@gmail.com',
    'ba.autodetailing01@gmail.com',
    'sales@bookingassist.co',
  ];
  const userEmail = (user?.email || '').toLowerCase();
  const isWhitelisted = whitelistedEmails.includes(userEmail);

  React.useEffect(() => {
    const checkSubscription = async () => {
      if (!user) {
        setHasActiveSubscription(false);
        setLoading(false);
        return;
      }

      // Whitelisted users don't need subscription check
      if (isWhitelisted) {
        setHasActiveSubscription(true);
        setLoading(false);
        return;
      }

      try {
        const { supabase } = await import('@/integrations/supabase/client');
        const { data: subscription } = await supabase
          .from('subscriptions')
          .select('status, plan_name, cancel_at_period_end, canceled_at')
          .eq('user_id', user.id)
          .maybeSingle();

        const canceledAt = subscription?.canceled_at ? new Date(subscription.canceled_at).getTime() : null;
        const withinGrace = canceledAt ? Date.now() <= canceledAt + 7 * 24 * 60 * 60 * 1000 : false;
        const isActive = (!subscription?.cancel_at_period_end
          && subscription?.status === 'active'
          && subscription?.plan_name !== 'pending')
          || withinGrace;
        setHasActiveSubscription(isActive);
      } catch (error) {
        console.error('Error checking subscription:', error);
        setHasActiveSubscription(false);
      } finally {
        setLoading(false);
      }
    };

    checkSubscription();
  }, [user, isWhitelisted]);

  if (isPublicMarketingRoute(location.pathname)) {
    return null;
  }

  // Hide chatbot if loading, not signed in, or not paid (unless whitelisted)
  if (loading || !user || (!hasActiveSubscription && !isWhitelisted)) {
    return null;
  }

  return <FloatingChatbot />;
};

const App = () => (
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <AuthProvider>
        <LocaleProvider>
          {/* <CalendarPromptProvider> */}
            <TooltipProvider>
              <Toaster />
              <Sonner />
              <PageViewTracker />
              <MetaPixelTracker />
              <MarketingAssistantWidget />
              <div className="min-h-screen flex flex-col">
                  <div className="flex-1">
                    <Routes>
            <Route path="/" element={<Index />} />
            <Route path="/auth" element={<Auth />} />
            <Route path="/auth/callback" element={<AuthCallback />} />
            <Route path="/auth/reset-password" element={<ResetPassword />} />
            <Route path="/terms" element={<Terms />} />
            <Route path="/privacy" element={<Privacy />} />
            <Route path="/data-deletion" element={<DataDeletion />} />
            <Route path="/deletion-status" element={<DeletionStatus />} />
            <Route path="/refunds" element={<RefundPolicy />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/faq" element={<FAQ />} />
            <Route path="/docs/social-media-bot-faq" element={<SocialMediaBotFAQ />} />
            <Route path="/features" element={<Features />} />
            <Route path="/pricing" element={<Pricing />} />
            <Route path="/roi-calculator" element={<RoiCalculator />} />
            <Route path="/free-tools/ig-fb-reply-generator" element={<IgFbReplyGenerator />} />
            <Route path="/roadmap" element={<Roadmap />} />
            <Route path="/bespoke-solutions" element={<BespokeSolutions />} />

            {/* Industry-Specific Landing Pages */}
            <Route path="/salonsandspas" element={<SalonsAndSpas />} />
            <Route path="/barbershops" element={<Barbershops />} />
            <Route path="/tattoo-studios" element={<TattooStudios />} />
            <Route path="/personal-trainers" element={<PersonalTrainers />} />
            <Route path="/clinicsanddentist" element={<ClinicsAndDentist />} />
            <Route path="/gyms" element={<Gyms />} />
            <Route path="/consultants" element={<Consultants />} />
            <Route path="/tutoring" element={<Tutoring />} />
            <Route path="/home-services" element={<HomeServices />} />
            <Route path="/automotive" element={<Automotive />} />
            <Route path="/real-estate" element={<RealEstate />} />
            <Route path="/pet-services" element={<PetServices />} />
            <Route 
              path="/analytics" 
              element={
                <ProtectedRoute>
                  <Analytics />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/customers" 
              element={
                <ProtectedRoute>
                  <Customers />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/setup" 
              element={
                <ProtectedRoute>
                  <Setup />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/dashboard" 
              element={
                <ProtectedRoute>
                  <Dashboard />
                </ProtectedRoute>
              } 
            />
            <Route path="/settings" element={
              <ProtectedRoute>
                <Settings />
              </ProtectedRoute>
            } />
            <Route path="/availability" element={
              <ProtectedRoute>
                <Availability />
              </ProtectedRoute>
            } />
            <Route path="/branches" element={
              <ProtectedRoute>
                <Branches />
              </ProtectedRoute>
            } />
            <Route path="/promo-codes" element={
              <ProtectedRoute>
                <PromoCodes />
              </ProtectedRoute>
            } />
            <Route path="/products" element={
              <ProtectedRoute>
                <Products />
              </ProtectedRoute>
            } />
            <Route path="/services/:serviceId" element={
              <ProtectedRoute>
                <ServiceEdit />
              </ProtectedRoute>
            } />
            <Route path="/orders" element={
              <ProtectedRoute>
                <Orders />
              </ProtectedRoute>
            } />
            <Route path="/commissions" element={
              <ProtectedRoute>
                <StaffCommissions />
              </ProtectedRoute>
            } />
            <Route path="/team" element={
              <ProtectedRoute>
                <TeamManagement />
              </ProtectedRoute>
            } />
            <Route path="/staff" element={
              <ProtectedRoute>
                <StaffDashboard />
              </ProtectedRoute>
            } />
            <Route path="/staff/settings" element={
              <ProtectedRoute>
                <StaffSettings />
              </ProtectedRoute>
            } />
            <Route path="/staff-invite/:token" element={<StaffInvite />} />
            <Route path="/:businessUsername/:staffUsername" element={<StaffBookingPage />} />
            <Route path="/customize" element={
              <ProtectedRoute>
                <Customize />
              </ProtectedRoute>
            } />
            {/* Embeddable booking widget */}
            <Route path="/embed/:username" element={<EmbedWidget />} />
            {/* Public review submission page */}
            <Route path="/reviews/submit/:username" element={<SubmitReview />} />
            {/* Username-based booking landing pages */}
            <Route path="/booking/:username" element={<BookingPage />} />
            <Route path="/:username" element={<BookingPage />} />
            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
            <Route path="*" element={<NotFound />} />
                  </Routes>
                </div>
                <Footer />
              </div>
              {/* Floating AI Chatbot - appears on all pages except customer booking/review pages */}
              <ConditionalChatbot />
            </TooltipProvider>
          {/* </CalendarPromptProvider> */}
        </LocaleProvider>
      </AuthProvider>
    </BrowserRouter>
  </QueryClientProvider>
);

export default App;