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";

const SubCategoryOrProductPage = ({
  type,
  products,
  productData,
  activeSubCategory,
  cataloguesData,
}) => {
  const router = useRouter();
  const { category, subCategory } = router.query;

  if (!router.isReady) return null;

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

    const breadcrumbData = [
      { href: "/collections", 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 />}
        <Video productData={productData?.video} />
        {productData?.isDoorAndPartitionsLayouts && <TechnicalDetails />}
        <Gallery productData={productData?.gallery} />
        {productData?.isDoorAndPartitionsLayouts && <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;

  const breadcrumbData = [
    { href: "/", label: "Home" },
    { href: "/collections", 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;

    /* 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 categoriesSub = await getCollectionSubCategoryData();
    const allProducts = await getCollectionDetailCategoryData();

    const products = allProducts.filter(
      (item) => item.collection_sub_category?.slug === subCategory
    );

    const activeSubCategory =
      categoriesSub.find((item) => item.slug === subCategory) || null;

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