import { LogicDropdown } from "@/support/dropdown";
import { ensureChartJsRegistered } from "@/support/chartRegistry";
import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "bootstrap-icons/font/bootstrap-icons.css";
import "react-datepicker/dist/react-datepicker.css";
import { StrictMode, useEffect, type ReactNode } from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Bounce, toast, ToastContainer } from "react-toastify";
// @ts-ignore
import "swiper/css";
// @ts-ignore
import "react-day-picker/style.css";
// @ts-ignore
import "swiper/css/pagination";

import ErrorPage from "./pages/errors/Error";
import RouteList from "./routes/RouteList";
import { initializeStores } from "./stores";
import "./styles/index.css";

const queryClient = new QueryClient({
   queryCache: new QueryCache({
      onError: (error: any, query) => {
         const status = error?.response?.status;
         console.log(error.response);

         if (status === 500 && !query.meta?.silent) {
            toast.error(error?.response?.data?.message ?? "Something went wrong. Please try again.", {
               toastId: "server-error",
               autoClose: 10000
            });
         }
      }
   })
});

const root = document.getElementById("root") as HTMLElement;
initializeStores();
LogicDropdown();
ensureChartJsRegistered();

const router = createBrowserRouter([
   {
      ErrorBoundary: ErrorPage,
      children: RouteList
   }
]);

function MainWrapper({ children }: { children: ReactNode }) {
   useEffect(() => {
      const overlay = document.getElementById("loading-overlay");
      if (overlay) {
         overlay.classList.add("hidden");
         const timer = setTimeout(() => {
            overlay.remove();
         }, 800);
         return () => clearTimeout(timer);
      }
   }, []);   

   return <>{children}</>;
}

ReactDOM.createRoot(root).render(
   <StrictMode>
      <QueryClientProvider client={queryClient}>
         <ToastContainer
            position="bottom-center"
            autoClose={5000}
            hideProgressBar={true}
            newestOnTop={false}
            closeOnClick={true}
            closeButton={true}
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
            theme="light"
            toastClassName="app-toast"
            transition={Bounce}
            stacked
         />
         <MainWrapper>
            <RouterProvider router={router} />
         </MainWrapper>
      </QueryClientProvider>
   </StrictMode>
);