import { Suspense } from "react";
import ImageGallery from "@/modules/products-details/components/image-gallery";
import ProductSelection from "./components/product-selection";
import productService from "@/lib/services/product";

import { ProductBySlugResponse } from "@/lib/types/models";
import { notFound } from "next/navigation";
import ProductActions from "@/modules/products-details/components/product-actions";
import FAQs from "@/modules/products-details/components/product-faqs";
import RecentlyViewedItems from "@/modules/home/components/recently-viewed-items";
import StickyBox from "@/modules/ui/sticky-box";
import SimilarProducts from "./components/similar-products";
import ProductReviews from "./components/product-reviews";
import Breadcrumbs from "../common/breadcrumbs";
import AddRecent from "./components/add-recent";

export default async function Page({
  category,
  slug
}: {
  category: string;
  slug: string;
}) {
  const response: ProductBySlugResponse =
    await productService.fetchProductBySlug(slug);
  const data = response?.data;
  if (!data?._id) {
    notFound();
  }
  const averageRating = 5;
  const totalReviews = 10;
  return (
    <div className="my-2">
      <AddRecent id={data?.category?._id} />
      <div className="main-container mobile-container relative">
        <Breadcrumbs
          item={[
            {
              link: `/${category}`,
              name: category
                ?.replace(/-/g, " ")
                ?.replace(/\b\w/g, (char) => char?.toUpperCase())
            },
            { name: data?.category?.name }
          ]}
        />
        <div className="flex flex-col lg:flex-row gap-[21px] relative">
          <div className="w-full max-w-[720px]">
            <StickyBox offsetTop={0} offsetBottom={0}>
              <ImageGallery media={data.images} />
            </StickyBox>
          </div>
          <div className="w-full p-[12px] lg:p-[20px] rounded-[8px] border bg-white border-[#E0E0E0] shadow-[0px_2px_8px_0px_#00000014]">
            <ProductSelection
              categoryData={data.category}
              productData={data.options}
              variantGroups={data.variantGroups}
              averageRating={averageRating}
              totalReviews={totalReviews}
            />
          </div>
        </div>
        <Suspense fallback={<div>Loading...</div>}>
          <div className="pt-6 lg:pt-10">
            <ProductActions data={data} />
          </div>
        </Suspense>
      </div>
      {data?.category?.parentId?._id && (
        <Suspense fallback={<div>Loading...</div>}>
          <SimilarProducts id={data?.category?._id} parentId={data?.category?.parentId?._id || ""} />
        </Suspense>
      )}
      <Suspense fallback={<div>Loading...</div>}>
        <RecentlyViewedItems />
      </Suspense>
      <Suspense fallback={<div>Loading...</div>}>
        <div className="main-container mobile-container py-[20px] relative">
          <FAQs faqs={data.faqs || []} />
        </div>
      </Suspense>
      <Suspense fallback={<div>Loading...</div>}>
        <div className="main-container mobile-container py-[20px] relative">
          {/* <ProductReviews reviewData={data?.reviews} productId={data?.category?._id} /> */}
        </div>
      </Suspense>
    </div>
  );
}