import { type FC } from "react";
import { createBrowserRouter, Navigate, RouterProvider } from "react-router";

import IndexPage from "./pages/Index";
import LoginPage from "./pages/Login";
import RegisterPage from "./pages/Register";
import AuthorizePage from "./pages/Authorize";
import AuthenticatePage from "./pages/Authenticate";
import AuthLayout from "./layout/AuthLayout";
import DashboardLayout from "./layout/DashboardLayout";
import PersonalInfoPage from "./pages/PersonalInfo";
import ApiServicesPage from "./pages/Admin/ApiServices";
import AdminLayout from "./layout/AdminLayout";
import ApiServiceCreatePage from "./pages/Admin/ApiServices/Create";
import ViewApiServicePage from "./pages/Admin/ApiServices/View";
import NotAllowedPage from "./pages/NotAllowed";
import NotFoundPage from "./pages/NotFound";
import ApiServiceEditPage from "./pages/Admin/ApiServices/Update";
import AdminUsersPage from "./pages/Admin/Users";
import AdminViewUserPage from "./pages/Admin/Users/View";
import AdminCreateUserPage from "./pages/Admin/Users/Create";
import VerificationLayout from "./layout/VerificationLayout";
import VerifyStartPage from "./pages/Verify";
import VerifyEmailPage from "./pages/Verify/Email";
import VerifyEmailOtpPage from "./pages/Verify/Email/OTP";
import VerifyAvatarPage from "./pages/Verify/Avatar";
import VerifyReviewPage from "./pages/Verify/Review";

const router = createBrowserRouter([
  {
    path: "/",
    element: <AuthLayout />,
    children: [
      {
        path: "/",
        element: <DashboardLayout />,
        children: [
          {
            index: true,
            element: <IndexPage />,
          },
          {
            path: "personal-info",
            element: <PersonalInfoPage />,
          },
          {
            path: "admin",
            element: <AdminLayout />,
            children: [
              {
                index: true,
                element: <Navigate to="/admin/api-services" />,
              },
              {
                path: "api-services",
                children: [
                  { index: true, element: <ApiServicesPage /> },
                  { path: "create", element: <ApiServiceCreatePage /> },
                  {
                    path: "view/:serviceId",
                    element: <ViewApiServicePage />,
                  },
                  {
                    path: "edit/:serviceId",
                    element: <ApiServiceEditPage />,
                  },
                ],
              },
              {
                path: "users",
                children: [
                  { index: true, element: <AdminUsersPage /> },
                  { path: "create", element: <AdminCreateUserPage /> },
                  {
                    path: "view/:userId",
                    element: <AdminViewUserPage />,
                  },
                  // {
                  //   path: "edit/:serviceId",
                  //   element: <ApiServiceEditPage />,
                  // },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
  {
    path: "/verify",
    element: <AuthLayout />,
    children: [
      {
        path: "/verify",
        element: <VerificationLayout />,
        children: [
          {
            index: true,
            element: <VerifyStartPage />,
          },
          {
            path: "email",
            element: <VerifyEmailPage />,
          },
          {
            path: "email/otp",
            element: <VerifyEmailOtpPage />,
          },
          {
            path: "avatar",
            element: <VerifyAvatarPage />,
          },
          {
            path: "review",
            element: <VerifyReviewPage />,
          },
        ],
      },
    ],
  },
  {
    path: "/auth",
    element: <AuthLayout />,
    children: [
      { index: true, element: <AuthorizePage /> },
      { path: "login", element: <LoginPage /> },
      { path: "register", element: <RegisterPage /> },
      { path: "authenticate", element: <AuthenticatePage /> },
    ],
  },
  {
    path: "/not-allowed",
    element: <NotAllowedPage />,
  },
  {
    path: "*",
    element: <NotFoundPage />,
  },
]);

const App: FC = () => {
  return <RouterProvider router={router} />;
};

export default App;