.tsx

import {
  createBrowserRouter,
  RouteObject,
  RouterProvider,
} from "react-router-dom";
import { ListResources } from "./pages/Resources/ListResurces";
import { Root } from "./pages/Root";
import ViewResource from "./pages/Resources/ViewResource";
import CreateResourceForm from "./pages/Resources/CreateResource";
import { Button, Result } from "antd";
import ListAppointments from "./pages/Appointments/ListAppointments";
import Login from "./pages/Login";
import { useEffect, useState } from "react";
import ListUsers from "./pages/Users/ListUsers";
import CreateUser from "./pages/Users/CreateUser";
import { TAccessType } from "./interfaces/interfaces";
import UserAppointments from "./pages/Users/Appointments";
import AppointmentView from "./pages/Appointments/Appointment";
import UserProfile from "./pages/MyProfile";
import ListAuditLogs from "./pages/AuditLogs/ListAuditLogs";
import ViewAuditLog from "./pages/AuditLogs/ViewAuditLogs";
import Dashboard from "./pages/Dashboard";
import { useLoggedUser } from "./hooks/useLoggedUser";
import { api } from "./services/api";

function getRoutes(accessType: TAccessType) {
  const ADMIN_ROUTERS: RouteObject = {
    path: "/admin",
    element: <Root accessType="ADMIN" />,
    children: [
      {
        path: "/admin/resources",
        element: <ListResources isAdmin={true} />,
      },
      {
        path: "/admin/resources/view/:id",
        element: <ViewResource isAdmin={true} />,
      },
      {
        path: "/admin/resources/create",
        element: <CreateResourceForm />,
      },
      {
        path: "/admin/resources/edit/:id",
        element: <CreateResourceForm />,
      },
      {
        path: "/admin/appointments",
        element: <ListAppointments isAdmin={accessType === "ADMIN"} />,
      },
      {
        path: "/admin/users",
        element: <ListUsers />,
      },
      {
        path: "/admin/users/create",
        element: <CreateUser />,
      },
      {
        path: "/admin/users/edit/:id",
        element: <CreateUser />,
      },
      {
        path: "/admin/appointments/:id",
        element: <AppointmentView />,
      },
      {
        path: "/admin/user/appointments",
        element: <UserAppointments />,
      },
      {
        path: "/admin/profile",
        element: <UserProfile />,
      },
      {
        path: "/admin/audit",
        element: <ListAuditLogs />,
      },
      {
        path: "/admin/audit/:id",
        element: <ViewAuditLog />,
      },
      {
        path: "/admin/dashboard",
        element: <Dashboard />,
      },
      {
        path: "*",
        element: (
          <Result
            status="404"
            title="404"
            subTitle="Ops, esta página não existe."
            extra={<Button type="primary">Voltar para o início</Button>}
          />
        ),
      },
    ],
    errorElement: (
      <Result
        status="error"
        title="Ops! Algo deu errado"
        subTitle="
      Por favor, recarregue a página e tente novamente. Se o erro persistir, entre em contato com o suporte."
        extra={
          <Button
            type="primary"
            onClick={() => {
              window.location.reload();
            }}
          >
            Recarregar
          </Button>
        }
      />
    ),
  };

  const VISITOR_ROUTERS: RouteObject = {
    path: "/",
    element: <Root accessType="VISITOR" />,
    children: [
      {
        path: "/resources",
        element: <ListResources isAdmin={false} />,
      },
      {
        path: "/resources/view/:id",
        element: <ViewResource isAdmin={false} />,
      },
      {
        path: "/appointments",
        element: <ListAppointments isAdmin={false} />,
      },
      {
        path: "*",
        element: (
          <Result
            status="404"
            title="404"
            subTitle="Ops, esta página não existe."
            extra={<Button type="primary">Voltar para o início</Button>}
          />
        ),
      },
    ],
    errorElement: (
      <Result
        status="error"
        title="Ops! Algo deu errado"
        subTitle="
      Por favor, recarregue a página e tente novamente. Se o erro persistir, entre em contato com o suporte."
        extra={
          <Button
            type="primary"
            onClick={() => {
              window.location.reload();
            }}
          >
            Recarregar
          </Button>
        }
      />
    ),
  };

  if (!VISITOR_ROUTERS.children) {
    VISITOR_ROUTERS.children = [];
  }

  const MEMBER_ROUTERS: RouteObject = {
    path: "/",
    element: <Root accessType="MEMBER" />,
    children: [
      ...VISITOR_ROUTERS.children,
      {
        path: "/user/appointments",
        element: <UserAppointments />,
      },
      {
        path: "/profile",
        element: <UserProfile />,
      },
    ],
    errorElement: (
      <Result
        status="error"
        title="Ops! Algo deu errado"
        subTitle="
      Por favor, recarregue a página e tente novamente. Se o erro persistir, entre em contato com o suporte."
        extra={
          <Button
            type="primary"
            onClick={() => {
              window.location.reload();
            }}
          >
            Recarregar
          </Button>
        }
      />
    ),
  };

  const routes = createBrowserRouter([
    (accessType === "ADMIN" && ADMIN_ROUTERS) ||
      (accessType === "MEMBER" && MEMBER_ROUTERS) ||
      VISITOR_ROUTERS,
    {
      path: "/login",
      element: <Login />,
    },
    {
      path: "*",
      element: (
        <Result
          status="404"
          title="404"
          subTitle="Ops, esta página não existe."
          extra={
            <Button
              type="primary"
              onClick={() => {
                window.history.back();
              }}
            >
              Voltar para a página anterior
            </Button>
          }
        />
      ),
    },
  ]);

  return routes;
}

export function Routers() {
  const [accessType, setAccessType] = useState<"ADMIN" | "MEMBER" | "VISITOR">(
    getInitialAccessType()
  );

  function getInitialAccessType() {
    try {
      const localStorageUser = localStorage.getItem("sora:user");
      if (localStorageUser) {
        const user = JSON.parse(localStorageUser);
        const token = localStorage.getItem("sora:token");
        api.defaults.headers.common["Authorization"] = `Bearer ${token}`;
        if (user) {
          return user.role;
        }
      }

      return "VISITOR";
    } catch (error) {
      return "VISITOR";
    }
  }

  const loggedUser = useLoggedUser();
  useEffect(() => {
    if (loggedUser.user) {
      setAccessType(loggedUser.user.role);
    }
  }, [loggedUser.user]);

  return <RouterProvider router={getRoutes(accessType)} key={accessType} />;
}