import { conversationsLoader } from "@routes/(app)/(conversations)/loader.js";
import { chatLoader } from "@routes/(app)/chat/[conversationId]/loader.js";
import { appLoader } from "@routes/(app)/loader.js";
import { guestLoader } from "@routes/(auth)/loader.js";
import { useState } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

function createAppRouter() {
  return createBrowserRouter([
    {
      element: <RootLayout />,
      errorElement: <RootError />,
      hydrateFallbackElement: <RootLoading />,
      children: [
        {
          element: <AuthLayout />,
          loader: guestLoader,
          children: [
            { path: "login", element: <LoginRoute /> },
            { path: "register", element: <RegisterRoute /> },
            { path: "forgot-password", element: <ForgotPasswordRoute /> },
            { path: "reset-password", element: <ResetPasswordRoute /> },
            { path: "verify-email", element: <VerifyEmailRoute /> },
          ],
        },
        {
          loader: appLoader,
          children: [
            {
              element: <AppLayout />,
              children: [
                { index: true, element: <ConversationsRoute />, loader: conversationsLoader },
                { path: "profile", element: <ProfileRoute /> },
              ],
            },
            {
              path: "chat",
              element: <ChatLayout />,
              children: [
                {
                  path: ":conversationId",
                  element: <ChatRoute />,
                  loader: chatLoader,
                },
              ],
            },
          ],
        },
        { path: "*", element: <RootNotFound /> },
      ],
    },
  ]);
}

function AppRouter() {
  const [router] = useState(createAppRouter);

  return <RouterProvider router={router} />;
}

window.AppRouter = AppRouter;