import { BrowserRouter, Routes, Route } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import CssBaseline from "@mui/material/CssBaseline";
import "dayjs/locale/it";

import Layout from "./components/Layout";
import Dashboard from "./pages/Dashboard";
import EventiPage from "./pages/EventiPage";
import EventoDetailPage from "./pages/EventoDetailPage";
import ClientiPage from "./pages/ClientiPage";
import LocationPage from "./pages/LocationPage";
import ArticoliPage from "./pages/ArticoliPage";
import RisorsePage from "./pages/RisorsePage";
import CalendarioPage from "./pages/CalendarioPage";
import ReportTemplatesPage from "./pages/ReportTemplatesPage";
import ReportEditorPage from "./pages/ReportEditorPage";
import ModulesAdminPage from "./pages/ModulesAdminPage";
import ModulePurchasePage from "./pages/ModulePurchasePage";
import AutoCodesAdminPage from "./pages/AutoCodesAdminPage";
import WarehouseRoutes from "./modules/warehouse/routes";
import { ModuleGuard } from "./components/ModuleGuard";
import { useRealTimeUpdates } from "./hooks/useRealTimeUpdates";
import { CollaborationProvider } from "./contexts/CollaborationContext";
import { ModuleProvider } from "./contexts/ModuleContext";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
      staleTime: 1000 * 60, // 1 minuto - i dati sono considerati freschi
    },
    mutations: {
      // Le mutation non mostrano errori bloccanti
    },
  },
});

// Componente wrapper per abilitare real-time updates
function RealTimeProvider({ children }: { children: React.ReactNode }) {
  useRealTimeUpdates();
  return <>{children}</>;
}

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#dc004e",
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="it">
          <CssBaseline />
          <BrowserRouter>
            <ModuleProvider>
              <CollaborationProvider>
                <RealTimeProvider>
                  <Routes>
                    <Route path="/" element={<Layout />}>
                      <Route index element={<Dashboard />} />
                      <Route path="calendario" element={<CalendarioPage />} />
                      <Route path="eventi" element={<EventiPage />} />
                      <Route path="eventi/:id" element={<EventoDetailPage />} />
                      <Route path="clienti" element={<ClientiPage />} />
                      <Route path="location" element={<LocationPage />} />
                      <Route path="articoli" element={<ArticoliPage />} />
                      <Route path="risorse" element={<RisorsePage />} />
                      <Route
                        path="report-templates"
                        element={<ReportTemplatesPage />}
                      />
                      <Route
                        path="report-editor"
                        element={<ReportEditorPage />}
                      />
                      <Route
                        path="report-editor/:id"
                        element={<ReportEditorPage />}
                      />
                      {/* Admin */}
                      <Route path="modules" element={<ModulesAdminPage />} />
                      <Route
                        path="modules/purchase/:code"
                        element={<ModulePurchasePage />}
                      />
                      <Route
                        path="admin/auto-codes"
                        element={<AutoCodesAdminPage />}
                      />
                      {/* Warehouse Module */}
                      <Route
                        path="warehouse/*"
                        element={
                          <ModuleGuard moduleCode="warehouse">
                            <WarehouseRoutes />
                          </ModuleGuard>
                        }
                      />
                    </Route>
                  </Routes>
                </RealTimeProvider>
              </CollaborationProvider>
            </ModuleProvider>
          </BrowserRouter>
        </LocalizationProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default App;