"use client";

import dynamic from "next/dynamic";
import { usePathname } from "next/navigation";
import PageLoader from "./PageLoader";
import Loader from "./common/Loader";
import DataNotFound from "./common/DataNotFound";
import { Suspense } from "react";

const routeComponentMap: Record<string, any> = {
  "/": dynamic<{}>(
    () => {
      return Promise.all([
        import("../app/(kanzy)/code"),
        new Promise((resolve) => setTimeout(resolve, 3000)),
      ]).then(([module]) =>
        module.default ? module.default : module
      ) as Promise<React.ComponentType<any>>;
    },
    {
      ssr: false,
      loading: () => <PageLoader />,
    }
  ),
  "/dashboard": dynamic(() => import("../app/(user)/dashboard/code"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/contact": dynamic(() => import("../app/(kanzy)/contact/Contact"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/faq": dynamic(() => import("../app/(kanzy)/faq/Faq"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/login": dynamic(() => import("../app/(auth)/login/Login"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/register": dynamic(() => import("../app/(auth)/register/Register"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/forgot-password": dynamic(
    () => import("../app/(auth)/forgot-password/ForgetPassword"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/reset-password": dynamic(
    () => import("../app/(auth)/reset-password/ResetPassword"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/otpverification": dynamic(
    () => import("../app/(auth)/otpverification/OtpVerification"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/account-settings": dynamic(
    () => import("../app/(user)/account-settings/AccountSettings"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/my-address": dynamic(() => import("../app/(user)/my-address/MyAddress"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/my-banks": dynamic(() => import("../app/(user)/my-banks/MyBanks"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/my-orders": dynamic(() => import("../app/(user)/my-orders/MyOrders"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/order-received": dynamic(
    () => import("../app/(user)/order-received/OrderReceived"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/checkout": dynamic(() => import("../app/(user)/checkout/Checkout"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/notifications": dynamic(
    () => import("../app/(user)/notifications/Notifications"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/wallet": dynamic(() => import("../app/(user)/wallet/Wallet"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/wishlist": dynamic(() => import("../app/(kanzy)/wishlist/Wishlist"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/save-search": dynamic(
    () => import("../app/(user)/save-search/SaveSearch"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/subscription": dynamic(
    () => import("../app/(user)/subscription/Subscription"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/rating-reviews": dynamic(
    () => import("../app/(user)/rating-reviews/RatingReview"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/listing": dynamic(() => import("../app/(user)/listing/Listings"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/listing/create": dynamic(
    () => import("../app/(user)/listing/create/MyListing"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/listing/edit": dynamic(
    () => import("../app/(user)/listing/edit/EditListing"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/products": dynamic(() => import("../app/(kanzy)/products/Products"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/products/:slug": dynamic(
    () => import("../app/(kanzy)/products/[slug]/ProductSlug"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/filters/:slug": dynamic(
    () => import("../app/(kanzy)/filters/[slug]/FilterSlug"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/chat": dynamic(() => import("../app/(user)/chat/Chat"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/request-a-product": dynamic(
    () => import("../app/(user)/request-a-product/RequestProduct"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
  "/service": dynamic(() => import("../app/(kanzy)/service/Services"), {
    ssr: false,
    loading: () => (
      <div>
        <Loader />
      </div>
    ),
  }),
  "/service:id": dynamic(
    () => import("../app/(kanzy)/service/[id]/ServiceSlug"),
    {
      ssr: false,
      loading: () => (
        <div>
          <Loader />
        </div>
      ),
    }
  ),
};

export default function DynamicRouteWrapper() {
  const pathname = usePathname();

  let Component = routeComponentMap[pathname];

  if (!Component && pathname.startsWith("/products/")) {
    Component = dynamic(
      () => import("../app/(kanzy)/products/[slug]/ProductSlug"),
      {
        ssr: false,
        loading: () => (
          <div>
            <Loader />
          </div>
        ),
      }
    );
  }

  if (!Component && pathname.startsWith("/filters/")) {
    Component = dynamic(
      () => import("../app/(kanzy)/filters/[slug]/FilterSlug"),
      {
        ssr: false,
        loading: () => (
          <div>
            <Loader />
          </div>
        ),
      }
    );
  }

  if (!Component && pathname.startsWith("/service/")) {
    Component = dynamic(
      () => import("../app/(kanzy)/service/[id]/ServiceSlug"),
      {
        ssr: false,
        loading: () => (
          <div>
            <Loader />
          </div>
        ),
      }
    );
  }

  if (!Component) {
    return (
      <div>
        <DataNotFound />
      </div>
    );
  }

  return (
    <Suspense fallback={<Loader />}>
      <Component />
    </Suspense>
  );
}