import React, { lazy, Suspense, useEffect } from 'react'; // Added useEffect
import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Routes, Route, useLocation } from "react-router-dom"; // Removed BrowserRouter import
import AnimatedLogo from './components/AnimatedLogo'; // Import AnimatedLogo for fallback
import { useIsMobile } from '@/hooks/use-mobile'; // Import useIsMobile
import MobileNavBar from './components/MobileNavBar'; // New import
import WhatsAppFloatingButton from './components/WhatsAppFloatingButton'; // New import
import SupportFloatingButton from './components/SupportFloatingButton'; // NEW: Import SupportFloatingButton
import { useAppSettingsContext } from './integrations/supabase/app-settings/AppSettingsProvider'; // Import useAppSettingsContext
import { useCart } from './integrations/supabase/cart/useCart'; // NEW: Import useCart
import FloatingCartReminder from './components/FloatingCartReminder'; // NEW: Import FloatingCartReminder
import RealtimeManager from './components/RealtimeManager'; // NEW: Centralized Realtime manager
import DevelopmentNoticePopup from './components/DevelopmentNoticePopup'; // NEW: Under construction popup
import SiteVisitTracker from './components/SiteVisitTracker';

// --- HELPER PARA PROTEÇÃO DE DEPLOY (Auto-Reload em Erro de Chunk) ---
// Envolve o import dinâmico. Se falhar ao buscar o arquivo JS (comum após deploy),
// força um recarregamento da página para baixar a nova versão.
const lazyRetry = (importFn: () => Promise<{ default: React.ComponentType<any> }>) => {
  return lazy(async () => {
    try {
      return await importFn();
    } catch (error: unknown) {
      // Verifica mensagens de erro comuns de arquivos de chunk perdidos
      let message = "";
      if (error instanceof Error) {
        message = error.message;
      } else if (typeof error === 'string') {
        message = error;
      } else if (error && typeof error === 'object') {
        try {
          message = JSON.stringify(error);
        } catch {
          message = "[object Object]";
        }
      } else {
        message = String(error);
      }
      if (
        message.includes('Failed to fetch dynamically imported module') ||
        message.includes('Importing a module script failed') ||
        message.includes('error loading dynamic module') ||
        message.includes('Failed to load module script') ||
        message.includes('MIME type')
      ) {
        // Usa sessionStorage para garantir que recarregamos apenas uma vez por rota para evitar loop infinito
        const storageKey = `retry_chunk_${globalThis.location.pathname}`;
        if (!sessionStorage.getItem(storageKey)) {
          console.warn('Chunk load failed (deploy update?), reloading page...');
          sessionStorage.setItem(storageKey, 'true');
          globalThis.location.reload();
          // Retorna promessa pendente para segurar a UI enquanto recarrega
          return new Promise(() => {});
        }
      }
      // Se não for erro de chunk ou já tentou recarregar, lança o erro
      throw error;
    }
  });
};

// Lazy load all page components using lazyRetry wrapper
const Index = lazyRetry(() => import("./pages/Index"));
const Promocoes = lazyRetry(() => import("./pages/Promocoes"));
const PreVenda = lazyRetry(() => import("./pages/PreVenda"));
const CartoesPagos = lazyRetry(() => import("./pages/CartoesPagos"));
const Empresa = lazyRetry(() => import("./pages/Empresa"));
const MinhaConta = lazyRetry(() => import("./pages/MinhaConta"));
const Depoimentos = lazyRetry(() => import("./pages/Depoimentos"));
const Contato = lazyRetry(() => import("./pages/Contato"));
const TermosCondicoes = lazyRetry(() => import("./pages/TermosCondicoes"));
const SiteSeguro = lazyRetry(() => import("./pages/SiteSeguro"));
const PrazoEntrega = lazyRetry(() => import("./pages/PrazoEntrega"));
const FormasPagamento = lazyRetry(() => import("./pages/FormasPagamento"));
const PoliticaReembolso = lazyRetry(() => import("./pages/PoliticaReembolso"));
const PoliticaPrivacidade = lazyRetry(() => import("./pages/PoliticaPrivacidade"));
const NotFound = lazyRetry(() => import("./pages/NotFound"));
const Login = lazyRetry(() => import("./pages/Login"));
const ProtectedRoute = lazyRetry(() => import("./components/ProtectedRoute"));
const AdminProtectedRoute = lazyRetry(() => import("./components/AdminProtectedRoute"));
const PlatformManagement = lazyRetry(() => import("./pages/PlatformManagement"));
const GameManagement = lazyRetry(() => import("./pages/GameManagement"));
const MercadoPagoSettingsPage = lazyRetry(() => import("./pages/MercadoPagoSettings"));
const UserManagement = lazyRetry(() => import("./pages/UserManagement"));
const OrderManagement = lazyRetry(() => import("./pages/OrderManagement"));
const NotificationManagement = lazyRetry(() => import("./pages/NotificationManagement"));
const EmailManagement = lazyRetry(() => import("./pages/EmailManagement"));
const LicenseManagement = lazyRetry(() => import("./pages/LicenseManagement"));
const AllGames = lazyRetry(() => import("./pages/AllGames"));
const ContactSettingsManagement = lazyRetry(() => import("./pages/ContactSettingsManagement"));
const AdminLogin = lazyRetry(() => import("./pages/AdminLogin"));
const Cart = lazyRetry(() => import("./pages/Cart"));
const BannerManagement = lazyRetry(() => import("./pages/BannerManagement"));
const GameDetail = lazyRetry(() => import("./pages/GameDetail"));
const UserProfileSettings = lazyRetry(() => import("./pages/UserProfileSettings"));
const UserOrderHistory = lazyRetry(() => import("./pages/UserOrderHistory"));
const PaymentConfirmation = lazyRetry(() => import("./pages/PaymentConfirmation"));
const PaymentConfirmationRedirect = lazyRetry(() => import("./components/PaymentConfirmationRedirect"));
const AppSettingsManagement = lazyRetry(() => import("./pages/AppSettingsManagement"));
const NavigationManagement = lazyRetry(() => import("./pages/NavigationManagement"));
const OfferBannerManagement = lazyRetry(() => import("./pages/OfferBannerManagement"));
const AdminDashboard = lazyRetry(() => import("./pages/AdminDashboard"));
const FinancialManagement = lazyRetry(() => import("./pages/FinancialManagement"));
const SupportTicketManagement = lazyRetry(() => import("./pages/SupportTicketManagement"));
const CouponManagement = lazyRetry(() => import("./pages/CouponManagement")); // New lazy import
const BlogManagement = lazyRetry(() => import("./pages/BlogManagement"));
const BlogList = lazyRetry(() => import("./pages/BlogList"));
const BlogPost = lazyRetry(() => import("./pages/BlogPost"));
const PlatformPage = lazyRetry(() => import("./pages/PlatformPage"));

const App = () => {
  const isMobile = useIsMobile(); // Detect if it's a mobile device
  const location = useLocation();
  const { appSettings } = useAppSettingsContext(); // Get appSettings here
  const { cartCount } = useCart(); // NEW: Get cartCount from useCart

  const isCheckoutFlow =
    location.pathname === '/cart' ||
    location.pathname.includes('/pagamento') ||
    location.pathname.includes('/confirmacao');
  const mainPaddingClass = isMobile
    ? isCheckoutFlow
      ? 'pb-mobile-checkout'
      : 'pb-mobile-nav'
    : '';

  // Limpa a flag de retry se o componente montar com sucesso (significa que o chunk carregou)
  useEffect(() => {
    const storageKey = `retry_chunk_${globalThis.location.pathname}`;
    sessionStorage.removeItem(storageKey);
  }, []);

  return (
    <TooltipProvider>
      <Toaster />
      <Sonner />
      <RealtimeManager />
      <SiteVisitTracker />
      <DevelopmentNoticePopup />
      {/* BrowserRouter is now in main.tsx */}
        {/* Main content wrapper */}
        <div className={`flex flex-col min-h-screen ${mainPaddingClass}`}>
          <Suspense fallback={
            <div className="min-h-screen flex items-center justify-center bg-background text-foreground">
              <AnimatedLogo logoUrl={appSettings?.logo_url} /> {/* Pass the logo URL with optional chaining protection */}
            </div>
          }>
            <Routes>
              <Route path="/" element={<Index />} />
              <Route path="/promocoes" element={<Promocoes />} />
              <Route path="/pre-venda" element={<PreVenda />} />
              <Route path="/cartoes-pre-pagos" element={<CartoesPagos />} />
              <Route path="/empresa" element={<Empresa />} />
              <Route path="/depoimentos" element={<Depoimentos />} />
              <Route path="/contato" element={<Contato />} />
              <Route path="/termos" element={<TermosCondicoes />} />
              <Route path="/site-seguro" element={<SiteSeguro />} />
              <Route path="/prazo-entrega" element={<PrazoEntrega />} />
              <Route path="/formas-pagamento" element={<FormasPagamento />} />
              <Route path="/reembolso" element={<PoliticaReembolso />} />
              <Route path="/privacidade" element={<PoliticaPrivacidade />} />
              <Route path="/login" element={<Login />} />
              <Route path="/admin/login" element={<AdminLogin />} />
              <Route path="/todos-os-jogos" element={<AllGames />} />
              <Route path="/cart" element={<Cart />} />
               <Route path="/game/:id/:slug?" element={<GameDetail />} />
              <Route path="/blog" element={<BlogList />} />
              <Route path="/blog/:slug" element={<BlogPost />} />
              
              
              {/* Rotas Protegidas para Usuários Autenticados */}
              <Route element={<ProtectedRoute />}>
                <Route path="/minha-conta" element={<MinhaConta />} />
                <Route path="/minha-conta/perfil" element={<UserProfileSettings />} />
                <Route path="/minha-conta/pedidos" element={<UserOrderHistory />} />
                <Route path="/minha-conta/pedidos/:orderId/pagamento" element={<PaymentConfirmation />} />
                <Route path="/pedido/:orderId/confirmacao" element={<PaymentConfirmationRedirect />} />
              </Route>

              {/* Rotas Protegidas para Administradores */}
              <Route element={<AdminProtectedRoute />}>
                <Route path="/admin/dashboard" element={<AdminDashboard />} />
                <Route path="/admin/offer-banner" element={<OfferBannerManagement />} />
                <Route path="/admin/users" element={<UserManagement />} />
                <Route path="/admin/orders" element={<OrderManagement />} />
                <Route path="/admin/notifications" element={<NotificationManagement />} />
                <Route path="/admin/emails" element={<EmailManagement />} />
                <Route path="/admin/platforms" element={<PlatformManagement />} />
                <Route path="/admin/games" element={<GameManagement />} />
                <Route path="/admin/licenses" element={<LicenseManagement />} />
                <Route path="/admin/banners" element={<BannerManagement />} />
                <Route path="/admin/navigation" element={<NavigationManagement />} />
                <Route path="/admin/mercadopago-settings" element={<MercadoPagoSettingsPage />} />
                <Route path="/admin/contact-settings" element={<ContactSettingsManagement />} />
                <Route path="/admin/app-settings" element={<AppSettingsManagement />} />
                <Route path="/admin/financial" element={<FinancialManagement />} />
                <Route path="/admin/support-tickets" element={<SupportTicketManagement />} />
                <Route path="/admin/coupons" element={<CouponManagement />} /> {/* New admin route */}
                <Route path="/admin/blog" element={<BlogManagement />} />
              </Route>

              {/* Dynamic Platform Route - Catch all for non-predefined top-level routes */}
              <Route path="/:platformSlug" element={<PlatformPage />} />
              
              {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
              <Route path="*" element={<NotFound />} />
            </Routes>
          </Suspense>
        </div>
        {/* MobileNavBar is rendered outside the main content div but inside BrowserRouter */}
        {isMobile && <MobileNavBar />}
        <WhatsAppFloatingButton /> {/* Render the floating WhatsApp button */}
        <SupportFloatingButton /> {/* NEW: Render the floating Support button */}
        {cartCount > 0 && <FloatingCartReminder />} {/* NEW: Render FloatingCartReminder if cart has items */}
      {/* BrowserRouter is now in main.tsx */}
    </TooltipProvider>
  );
};

export default App;