import { createBrowserRouter, Navigate } from "react-router-dom";
import CommonLayout from "../layouts/CommonLayout";
import Login from "../pages/Login";
import Approval from "../pages/shared/Approval";
import MyApproval from "../pages/shared/MyApproval";
import UserDetail from "../pages/shared/UserDetail";
import MyReservation from "../pages/user/MyReservation";
import Reserve from "../pages/user/Reserve";
import ProtectedRoute from "./ProtectedRoute";
import DeviceManage from "../pages/deviceAdmin/DeviceManage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="/login" replace />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/",
    element: <CommonLayout />,
    children: [
      {
        path: "user",
        element: <ProtectedRoute allowedRoles={["USER"]} />,
        children: [
          {
            path: "reserve",
            element: <Reserve />,
          },
          {
            path: "my-reservation",
            element: <MyReservation />,
          },
        ],
      },
      {
        element: <ProtectedRoute allowedRoles={["LEADER", "DEVICE_ADMIN"]} />,
        children: [
          {
            path: "approval",
            element: <Approval />,
          },
          {
            path: "my-approval",
            element: <MyApproval />,
          },
        ],
      },
      {
        path: "device-manage",
        element: <ProtectedRoute allowedRoles={["DEVICE_ADMIN"]} />,
        children: [
          {
            path: "",
            element: <DeviceManage />,
          },
        ],
      },
      {
        path: "userdetail",
        element: <UserDetail />,
      },
    ],
  },
]);

export default router;