import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerDetailsSubCategory from "@/components/Collection/InnerDetailsSubCategory";
import InnerBannerproduct from "@/components/Collection/InnerBannerproduct";
import AboutInfo from "@/components/Collection/AboutInfo";
import Video from "@/components/Collection/Video";
import Gallery from "@/components/Collection/Gallery";
import Catalogues from "@/container/Home/Catalogues";
import { Contact } from "@/container/Home/Contact";
import CompanyOverview from "@/components/Collection/CompanyOverview";
import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore";

import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
import { getCataloguesBySlug } from "@/services/cataloguesApi";
import { fetchFromStrapi } from "@/services/api";

const SubCategoryOrProductPage = ({
  type,
  products,
  productData,
  activeSubCategory,
  cataloguesData,
}) => {
  const router = useRouter();
  const { category, subCategory } = router.query;
  console.log("productData -new", products);
  if (!router.isReady) return null;

  /* ======================================================
     🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
  ====================================================== */
  if (type === "product") {
    const subCategoryData = productData.productData;

    const breadcrumbData = [
      { href: "/", label: "Collections" },
      {
        href: `/collections/${category}`,
        label: category.replace(/-/g, " "),
      },
      {
        href: router.asPath,
        label: productData.title,
      },
    ];

    return (
      <>
        <Breadcrumb breadcrumbData={breadcrumbData} />
        <InnerBannerproduct productData={productData} />
        <AboutInfo productData={productData?.aboutInfo} />

        {productData?.isDoorAndPartitionsLayouts && (
          <CompanyOverview companyOverviewData={productData?.companyOverview} />
        )}
        <Video productData={productData?.video} />
        {productData?.isDoorAndPartitionsLayouts && (
          <TechnicalDetails productData={productData?.technicalDetails} />
        )}
        <Gallery productData={productData?.gallery} />
        {productData?.isDoorAndPartitionsLayouts && (
          <Explore productData={productData?.explore} />
        )}

        {!productData?.isDoorAndPartitionsLayouts && (
          <Catalogues cataloguesData={cataloguesData} />
        )}

        <Contact />
      </>
    );
  }

  /* ======================================================
     🔵 IF SUBCATEGORY (NORMAL 2 LEVEL SUBCATEGORY PAGE)
  ====================================================== */

  // if (!products || products.length === 0) {
  //   return <h1>Sub Category not found</h1>;
  // }

  const subCategoryData = products[0]?.collection_sub_category;

  console.log('subCategoryData',subCategoryData)

  const breadcrumbData = [
    // { href: "/", label: "Home" },
    { href: "/", label: "Collections" },
    {
      href: `/collections/${category}`,
      label: category.replace(/-/g, " "),
    },
    {
      href: router.asPath,
      label: subCategoryData?.title,
    },
  ];

  return (
    <>
      <Breadcrumb breadcrumbData={breadcrumbData} />
      <HeadTitle categoryData={activeSubCategory} />
      <InnerDetailsSubCategory products={products} />
    </>
  );
};

export default SubCategoryOrProductPage;

/* ======================================================
   ✅ SERVER SIDE LOGIC
====================================================== */

export async function getServerSideProps({ params }) {
  try {
    const { subCategory } = params;
    console.log("subCategory", subCategory);

    /* 1️⃣ Check if this slug is a PRODUCT */
    const productCheck = await getCollectionDetailCategoryData(subCategory);

    if (productCheck && productCheck.length > 0) {
      const cataloguesData = await getCataloguesBySlug();

      return {
        props: {
          type: "product",
          productData: productCheck[0],
          cataloguesData,
        },
      };
    }

    /* 2️⃣ Otherwise treat as SUBCATEGORY */

    const query = {
      filters: {
        collection_sub_category: {
          slug: {
            $eq: subCategory,
          },
        },
      },
      populate: {
        image: true,
        collection_sub_category: {
          populate: true,
        },
      },
       
    };

    const response = await fetchFromStrapi(
      "/api/collection-detail-categories",
      query,
    );

    // console.log('responsefsfsf',response)

    const allProducts = response?.data || [];
    const products = allProducts;

    console.log('products',products)

    // const allProducts = await getCollectionDetailCategoryData();
    const categoriesSub = await getCollectionSubCategoryData();
    const activeSubCategory =
      categoriesSub.find((item) => item.slug === subCategory) || null;

    return {
      props: {
        type: "subcategory",
        products,
        activeSubCategory,
      },
    };
  } catch (error) {
    console.error(error);
    return {
      notFound: true,
    };
  }
}