import { lazy, Suspense, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Outlet, Navigate } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "sonner";
import { ThemeProvider } from "./contexts/ThemeContext";
import { AuthProvider } from "./contexts/AuthContext";
import { OfflineProvider } from "./contexts/OfflineContext";
import { FormatProvider } from "./contexts/FormatContext";
import { ProtectedRoute } from "./components/auth/ProtectedRoute";
import { MainLayout } from "./components/layout/MainLayout";
import { ErrorBoundary } from "./components/ui/ErrorBoundary";
import { InstallPrompt } from "./components/pwa/InstallPrompt";
import { usePWAUpdate } from "./hooks/usePWAUpdate";
import { installUiFreezeRecovery } from "./lib/uiFreezeRecovery";
// Eager — needed at cold-start / auth check
import Index from "./pages/Index";
import TrackOrder from "./pages/TrackOrder";
import Install from "./pages/Install";
import NotFound from "./pages/NotFound";
import SelectClient from "./pages/SelectClient";
// Lazy — heavy pages loaded on first navigation
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Clients = lazy(() => import("./pages/Clients"));
const ClientDetails = lazy(() => import("./pages/ClientDetails"));
const Sales = lazy(() => import("./pages/Sales"));
const SaleDetail = lazy(() => import("./pages/SaleDetail"));
const Orders = lazy(() => import("./pages/Orders"));
const Settings = lazy(() => import("./pages/Settings"));
const NewStatistics = lazy(() => import("./pages/NewStatistics"));
const SalesChanges = lazy(() => import("./pages/SalesChanges"));
const GraduationsAnalysis = lazy(() => import("./pages/GraduationsAnalysis"));
const Cashier = lazy(() => import("./pages/Cashier"));
const InvoicesPage = lazy(() => import("./pages/InvoicesPage").then(m => ({ default: m.InvoicesPage })));
import "./App.css";

const PageFallback = () => (
  <div className="flex items-center justify-center min-h-[60vh]">
    <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
  </div>
);

const PageErrorFallback = () => (
  <div className="flex flex-col items-center justify-center min-h-[60vh] p-4">
    <div className="max-w-md w-full p-6 bg-card text-card-foreground rounded-lg shadow-md text-center">
      <h2 className="text-lg font-semibold text-destructive mb-2">Error en esta sección</h2>
      <p className="text-muted-foreground mb-4 text-sm">
        Ocurrió un error al cargar esta página. El resto de la aplicación sigue funcionando.
      </p>
      <button
        onClick={() => window.location.reload()}
        className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90"
      >
        Recargar página
      </button>
    </div>
  </div>
);

// Initialize QueryClient outside component to prevent recreation
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      refetchOnWindowFocus: false,
      retry: 1,
    },
    mutations: {
      retry: 1,
    },
  },
});

function App() {
  // Initialize PWA update functionality
  usePWAUpdate();

  // Mobile App Return Freeze Fix (Android PWA):
  // Radix/vaul dejan pointer-events: none en el body y overlays montados si
  // Android congela la página con un modal abierto (ej. imprimir factura AFIP).
  useEffect(() => installUiFreezeRecovery(), []);

  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <ErrorBoundary>
            <Router>
              <AuthProvider>
                <OfflineProvider>
                  <FormatProvider>
                    <Toaster position="top-right" richColors />
                    <InstallPrompt />
                    <Routes>
                      <Route path="/" element={<Index />} />
                      <Route path="/consulta" element={<TrackOrder />} />
                      <Route path="/track" element={<TrackOrder />} />
                      <Route path="/install" element={<Install />} />
                      <Route element={
                        <ProtectedRoute>
                          <MainLayout>
                            <ErrorBoundary>
                              <Suspense fallback={<PageFallback />}>
                                <Outlet />
                              </Suspense>
                            </ErrorBoundary>
                          </MainLayout>
                        </ProtectedRoute>
                      }>
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/clients" element={<Clients />} />
                        <Route path="/clients/:id" element={<ClientDetails />} />
                        <Route
                          path="/invoices"
                          element={
                            <ProtectedRoute allowedRoles={['admin']}>
                              <InvoicesPage />
                            </ProtectedRoute>
                          }
                        />
                        <Route path="/cashier" element={<Cashier />} />
                        <Route path="/sales" element={<Sales />} />
                        <Route path="/sales/:id" element={<SaleDetail />} />
                        <Route path="/select-client" element={<SelectClient />} />
                        <Route path="/orders" element={<Orders />} />
                        <Route path="/new-statistics" element={<NewStatistics />} />
                        <Route path="/sales-changes" element={<SalesChanges />} />
                        <Route path="/graduations-analysis" element={<GraduationsAnalysis />} />
                        <Route path="/settings" element={<Settings />} />
                        <Route path="*" element={<NotFound />} />
                      </Route>
                    </Routes>
                  </FormatProvider>
                </OfflineProvider>
              </AuthProvider>
            </Router>
          </ErrorBoundary>
        </ThemeProvider>
      </QueryClientProvider>
    </ErrorBoundary>
  );
}

export default App;