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";
import { Tab, Tabs } from "react-bootstrap";

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.productData;

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

const productTabs = productData?.productTabs;
    return (
      <>
        <Breadcrumb breadcrumbData={breadcrumbData} />
        <InnerBannerproduct productData={productData} />
        
        
        {productData?.isDoorAndPartitionsLayouts == true ? (
          <section className="details-tab-section">
            <div className="custom_containers">
              <div className="details-tab">
                <div className="head">Products:</div>
                <Tabs defaultActiveKey={productTabs?.[0]?.title} className="tab-01">
                    {productTabs?.map((tab) => (
                      <Tab
                        key={tab.id}
                        eventKey={tab.title}
                        title={tab.title}
                      >
                        <AboutInfo productData={tab?.aboutInfo} />

                        <CompanyOverview
                          companyOverviewData={tab?.companyOverview?.items}
                        />
                          
                         <Video productData={tab?.videoSection} />
                        
                        {tab?.technicalDetails?.length > 0 && (
                            <TechnicalDetails
                              productData={tab?.technicalDetails}
                            />
                          )}
                          {tab?.gallery?.length > 0 && (
                           <Gallery productData={tab?.gallery} /> 
                          )}
                        
                      </Tab>
                    ))}
                  </Tabs>
              </div>
            </div>
          </section>
        ) : (<>
        
        <AboutInfo productData={productData?.aboutInfo} />
        <CompanyOverview companyOverviewData={productData?.companyOverview} />
        <Video productData={productData?.video} />
          <Video productData={productData?.video} />
        {productData?.technicalDetails?.length > 0 && (
             <TechnicalDetails productData={productData?.technicalDetails} />
            )}
        <Gallery productData={productData?.gallery} />
        {/* <Explore productData={productData?.explore} /> */}
        </>)}

        {productData?.isDoorAndPartitionsLayouts && (
          <Explore productData={productData?.exploreProducts} />
        )}

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

        {/* {productData?.isDoorAndPartitionsLayouts === false && (
          <AboutInfo productData={productData?.aboutInfo} />
        )} */}
        
        {/* {productData?.isDoorAndPartitionsLayouts == false && (
          <CompanyOverview companyOverviewData={productData?.companyOverview} />
        )}
        {productData?.isDoorAndPartitionsLayouts == false && (
          <Video productData={productData?.video} />
        )}

        {productData?.isDoorAndPartitionsLayouts == false && (
          <TechnicalDetails productData={productData?.technicalDetails} />
        )}
        {productData?.isDoorAndPartitionsLayouts == false && (
          <Gallery productData={productData?.gallery} />
        )} */}

        

        <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: "/", 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 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,
    );

  

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

  

    // 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,
    };
  }
}