import { lazy, Suspense } 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 } from "react-router-dom";
import { PageTransition } from './components/ui/page-transition';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n/config';
import { useUserLanguage } from './hooks/useUserLanguage';
import { useUserTheme } from './hooks/useUserTheme';
import { ProtectedRoute } from './components/auth/ProtectedRoute';
import { CommandPalette } from './components/CommandPalette';
import { ThemeProvider } from 'next-themes';
import { PageLoader } from './components/ui/page-loader';
import { PageTransitionProvider } from './contexts/PageTransitionContext';
import { CardToSidebarTransition } from './components/ui/card-to-sidebar-transition';
import { useDomainContext } from './hooks/useDomainContext';

// Retry dynamic imports on failure (handles stale cache after deployments)
function lazyRetry(importFn: () => Promise<any>) {
  return lazy(() =>
    importFn().catch(() => {
      // If chunk fetch fails, reload the page once
      const hasReloaded = sessionStorage.getItem('lazy-reload');
      if (!hasReloaded) {
        sessionStorage.setItem('lazy-reload', '1');
        window.location.reload();
        return new Promise(() => {}); // never resolves, page reloads
      }
      sessionStorage.removeItem('lazy-reload');
      return importFn(); // retry once more, let it fail naturally
    })
  );
}

// Lazy-loaded sub-apps for better initial bundle size
const FidelityApp = lazyRetry(() => import('./apps/fidelity/FidelityApp').then(m => ({ default: m.FidelityApp })));
const EatApp = lazyRetry(() => import('./apps/eat/EatApp').then(m => ({ default: m.EatApp })));
const MarketApp = lazyRetry(() => import('./apps/market/MarketApp').then(m => ({ default: m.MarketApp })));
const PosStorefrontApp = lazyRetry(() => import('./apps/pos-storefront/PosStorefrontApp').then(m => ({ default: m.PosStorefrontApp })));
// Lazy-loaded route components for code splitting
const Login = lazyRetry(() => import("./pages/Login"));
const Dashboard = lazyRetry(() => import("./pages/Dashboard"));
const BackOffice = lazyRetry(() => import("./pages/BackOffice"));
const POS = lazyRetry(() => import("./pages/POS"));
const ProductLayout = lazyRetry(() => import("./pages/ProductLayout"));

const Kiosk = lazyRetry(() => import("./pages/Kiosk"));
const Operator = lazyRetry(() => import("./pages/Operator"));
const BusinessReferrer = lazyRetry(() => import("./pages/BusinessReferrer"));
const FiscalAdministration = lazyRetry(() => import("./pages/FiscalAdministration"));
const SupplierB2B = lazyRetry(() => import("./pages/SupplierB2B"));
const Fiduciary = lazyRetry(() => import("./pages/Fiduciary"));
const Storefront = lazyRetry(() => import("./pages/Storefront"));
const PendingApproval = lazyRetry(() => import("./pages/PendingApproval"));
const OrderPortal = lazyRetry(() => import("./pages/OrderPortal"));
const MerchantOrder = lazyRetry(() => import("./pages/MerchantOrder"));
const OrderCheckout = lazyRetry(() => import("./pages/OrderCheckout"));
const OrderPayment = lazyRetry(() => import("./pages/OrderPayment"));
const OrderTracking = lazyRetry(() => import("./pages/OrderTracking"));
const SalesManagement = lazyRetry(() => import("./pages/SalesManagement"));
const SalesHistory = lazyRetry(() => import("./pages/SalesHistory"));
const KitchenDisplay = lazyRetry(() => import("./pages/KitchenDisplay"));
const ServerMobile = lazyRetry(() => import("./pages/ServerMobile"));
const DisplayHub = lazyRetry(() => import("./pages/DisplayHub"));
const CustomerDisplay = lazyRetry(() => import("./pages/CustomerDisplay"));
const TVMenuBoard = lazyRetry(() => import("./pages/TVMenuBoard"));
const Purchasing = lazyRetry(() => import("./pages/Purchasing"));
const WebRedirect = lazyRetry(() => import("./pages/WebRedirect"));
const Profile = lazyRetry(() => import("./pages/Profile"));
const Resources = lazyRetry(() => import("./pages/Resources"));
const ResetPassword = lazyRetry(() => import("./pages/ResetPassword"));
const NotFound = lazyRetry(() => import("./pages/NotFound"));


const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes - avoid refetching fresh data
      gcTime: 1000 * 60 * 30, // 30 minutes - keep unused data in cache
      refetchOnWindowFocus: false, // Don't refetch on tab focus
      retry: 1, // Single retry on failure
    },
  },
});


function AppContent() {
  useUserLanguage();
  useUserTheme();
  const domain = useDomainContext();

  // App Fidelity (clients finaux) - domaine fidelity.* ou /fidelity/*
  if (domain === 'fidelity') {
    return (
      <Suspense fallback={<PageLoader />}>
        <FidelityApp />
      </Suspense>
    );
  }

  // App EAT (marketplace) - domaine eat.* ou /eat/*
  if (domain === 'eat') {
    return (
      <Suspense fallback={<PageLoader />}>
        <EatApp />
      </Suspense>
    );
  }

  // App Market (marketplace hors restauration) - domaine market.* ou /market/*
  if (domain === 'market') {
    return (
      <Suspense fallback={<PageLoader />}>
        <MarketApp />
      </Suspense>
    );
  }

  // Storefront commerçant - domaine *.pos.uninova.one ou /pos-store/*
  if (domain === 'pos-storefront') {
    return (
      <Suspense fallback={<PageLoader />}>
        <PosStorefrontApp />
      </Suspense>
    );
  }

  // App CrystalPOS (B2B) - défaut
  return (
    <Suspense fallback={<PageLoader />}>
      <PageTransition>
        <Routes>
          <Route path="/" element={<Login />} />
          
          <Route path="/reset-password" element={<ResetPassword />} />
          <Route path="/store/:companyId" element={<Storefront />} />
          <Route path="/order" element={<OrderPortal />} />
          <Route path="/order/:locationId" element={<MerchantOrder />} />
          <Route path="/order/:locationId/checkout" element={<OrderCheckout />} />
          <Route path="/order/payment/:orderId" element={<OrderPayment />} />
          <Route path="/order/tracking/:orderNumber" element={<OrderTracking />} />
          <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
          <Route path="/backoffice" element={<ProtectedRoute><BackOffice /></ProtectedRoute>} />
          <Route path="/pos" element={<POS />} />
          <Route path="/product-layout" element={<ProtectedRoute><ProductLayout /></ProtectedRoute>} />
          <Route path="/product-layout/:locationId" element={<ProtectedRoute><ProductLayout /></ProtectedRoute>} />
          
          <Route path="/kiosk" element={<Kiosk />} />
          <Route path="/operator" element={<ProtectedRoute><Operator /></ProtectedRoute>} />
          <Route path="/business-referrer" element={<ProtectedRoute><BusinessReferrer /></ProtectedRoute>} />
          <Route path="/fiscal-administration" element={<ProtectedRoute><FiscalAdministration /></ProtectedRoute>} />
          <Route path="/supplier-b2b" element={<ProtectedRoute><SupplierB2B /></ProtectedRoute>} />
          <Route path="/fiduciary" element={<ProtectedRoute><Fiduciary /></ProtectedRoute>} />
          <Route path="/pending-approval" element={<ProtectedRoute><PendingApproval /></ProtectedRoute>} />
          <Route path="/sales" element={<ProtectedRoute><SalesManagement /></ProtectedRoute>} />
          <Route path="/sales/history" element={<ProtectedRoute><SalesHistory /></ProtectedRoute>} />
          <Route path="/kitchen" element={<KitchenDisplay />} />
          <Route path="/server" element={<ProtectedRoute><ServerMobile /></ProtectedRoute>} />
          <Route path="/display" element={<ProtectedRoute><DisplayHub /></ProtectedRoute>} />
          <Route path="/customer-display" element={<CustomerDisplay />} />
          <Route path="/tv-menu/:locationId" element={<TVMenuBoard />} />
          <Route path="/purchasing" element={<ProtectedRoute><Purchasing /></ProtectedRoute>} />
          <Route path="/web" element={<ProtectedRoute><WebRedirect /></ProtectedRoute>} />
          <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
          <Route path="/resources" element={<ProtectedRoute><Resources /></ProtectedRoute>} />
          {/* Fidelity routes (for dev/testing via path) */}
          <Route path="/fidelity/*" element={<FidelityApp />} />
          {/* EAT routes (for dev/testing via path) */}
          <Route path="/eat/*" element={<EatApp />} />
          {/* Market routes (for dev/testing via path) */}
          <Route path="/market/*" element={<MarketApp />} />
          {/* POS Storefront routes (for dev/testing via path) */}
          <Route path="/pos-store/*" element={<PosStorefrontApp />} />
          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </PageTransition>
    </Suspense>
  );
}

const App = () => (
  <QueryClientProvider client={queryClient}>
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <I18nextProvider i18n={i18n}>
        <TooltipProvider>
          <PageTransitionProvider>
            <Toaster />
            <Sonner />
            <BrowserRouter>
              <CommandPalette />
              <AppContent />
              <CardToSidebarTransition />
            </BrowserRouter>
          </PageTransitionProvider>
        </TooltipProvider>
      </I18nextProvider>
    </ThemeProvider>
  </QueryClientProvider>
);

export default App;