import { Authenticated, Refine } from "@refinedev/core";

import { RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui";

import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyles from "@mui/material/GlobalStyles";
import { ThemeProvider } from "@mui/material/styles";
import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
import routerBindings, {
  CatchAllNavigate,
  DocumentTitleHandler,
  UnsavedChangesNotifier,
} from "@refinedev/react-router";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";
import { authProvider } from "./providers/auth-provider";
import { dataProvider } from "./providers/data-provider";
import { ColorModeContextProvider } from "./contexts/color-mode";
import { Login } from "./components/auth/Login";
import { Register } from "./components/auth/Register";
import { ForgotPassword } from "./components/auth/ForgotPassword";
import { UpdatePassword } from "./components/auth/UpdatePassword";

import { Header } from "./components";
import { HubRoutes } from "./pages/hub";
import { FirmRoutes } from "./pages/firm";
import rpcTheme from "./theme";

function App() {
  return (
    <BrowserRouter>
      <ThemeProvider theme={rpcTheme}>
        <ColorModeContextProvider>
          <CssBaseline />
          <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
          <RefineSnackbarProvider>
            <Refine
              authProvider={authProvider}
              dataProvider={dataProvider}
              notificationProvider={useNotificationProvider}
              routerProvider={routerBindings}
              options={{
                title: {
                  text: "Roleplay Contracts",
                  icon: <HistoryEduIcon />
                },
                syncWithLocation: true,
                warnWhenUnsavedChanges: true,
                useNewQueryKeys: true,
                disableTelemetry: true,
                reactQuery: {
                  clientConfig: {
                    defaultOptions: {
                      queries: {
                        retry: (failureCount, error) => {
                          // @ts-ignore
                          if (error.statusCode >= 400 && error.statusCode <= 499) {
                            return false
                          }
                          return failureCount < 4
                        },
                      }
                    }
                  }
                }
              }}
            >
              <Routes>
                <Route
                  element={(
                    <Authenticated key="authenticated-routes" redirectOnFail="/auth/login" fallback={<CatchAllNavigate  to="/auth/login"/>}>
                      <Outlet />
                    </Authenticated>
                  )}
                >
                  <Route path="hub/*" element={<HubRoutes />} />
                  <Route path="firm/*" element={<FirmRoutes />} />
                </Route>
                <Route path="auth/*" element={<Outlet />}>
                  <Route path="login" element={<Login />} />
                  <Route path="register" element={<Register />} />
                  <Route path="forgot-password" element={<ForgotPassword />} />
                  <Route path="update-password" element={<UpdatePassword />} />
                </Route>
                <Route index element={<><Header /><h1>HOME</h1></>} />
              </Routes>
              <UnsavedChangesNotifier />
              <DocumentTitleHandler />
            </Refine>
          </RefineSnackbarProvider>
        </ColorModeContextProvider>
      </ThemeProvider>
    </BrowserRouter>
  );
}

export default App;