import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerDetailsSubCategory from "@/components/Collection/InnerDetailsSubCategory";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";

const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => {
  console.log("products9999", categoriesSub)
  const router = useRouter();
  const { category, subCategory } = router.query;
  console.log("subCategory", subCategory)

  if (!router.isReady) return null;

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

  // ✅ Sub-category info
  const subCategoryData = products[0].collection_sub_category;

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

  // ✅ Head title
  // const headTitleData = {
  //   title: subCategoryData.title,
  //   descrition1: "",
  //   descrition2: "",
  // };

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

export async function getServerSideProps({ params }) {
  try {
    const { subCategory } = params;

    const categoriesSub = await getCollectionSubCategoryData();
    const allProducts = await getCollectionDetailCategoryData();

    // ✅ Filter products by subCategory slug
    const products = allProducts.filter(
      (item) => item.collection_sub_category?.slug === subCategory
    );

    // ✅ Filter sub-category data for HeadTitle
    const activeSubCategory =
      categoriesSub.find((item) => item.slug === subCategory) || null;

    return {
      props: {
        products,
        activeSubCategory, // 👈 single object
      },
    };
  } catch (error) {
    console.error(error);
    return {
      props: {
        products: [],
        activeSubCategory: null,
      },
    };
  }
}


export default SubCategoryPage;