import fetchData from "@/api/fetch-data";
import CustomBreadcrumb from "@/app/ui/shared/CustomBreadcrumb";
import TranslationFeatures from "@/app/ui/VendorUi/Features/Translation/TranslationFeatures";
import FormFilters from "@/app/ui/VendorUi/Filters/FormFilter";
import FormBuilder from "@/app/ui/VendorUi/FormBuilder/FormBuilder";
import ProductDetailsForm from "@/app/ui/VendorUi/ProductDetails/ProductDetailsForm";
import ProductMetaTags from "@/app/ui/VendorUi/ProductDetails/ProductMetaTags";
import ProductFeatures from "@/app/ui/VendorUi/ProductFeatures/ProductFeatures";
import Statistics from "@/app/ui/VendorUi/Statistics/Statistics";
import TranslateProduct from "@/app/ui/VendorUi/TranslateProduct";
import TranslateProductLabels from "@/app/ui/VendorUi/TranslateProductLabels";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { convertBackendToFrontendFormInputs } from "@/lib/utils";
import { getLocale, getTranslations } from "next-intl/server";

export default async function ProductVendorDetails({ params }) {
  const { id: productId } = params;
  const locale = await getLocale();

  const { data } = await fetchData({
    endPoint: "/user/products/form/details",
    locale,
  });

  const { data: inputFieldsData } = await fetchData({
    endPoint: `/user/products/custom-fields/${productId}`,
    locale,
  });
  const {
    data: { product },
  } = await fetchData({
    endPoint: `/user/products/data/${productId}`,
    locale,
  });

  const t = await getTranslations("vendor");

  const initState = convertBackendToFrontendFormInputs(inputFieldsData);
  return (
    <section>
      <CustomBreadcrumb subs={true} />
      <div className="container pb-36">
        <Tabs
          defaultValue="product-details"
          className="w-full mt-10"
          dir={locale == "en" ? "ltr" : "rtl"}
        >
          <TabsList className=" h-fit px-0 my-2 md:my-5  bg-transparent border-b-[3px]  gap-4 lg:gap-10  border-[#F4F4F4] rounded-none flex duration-100 transition-all w-full justify-start  flex-wrap">
            <TabsTrigger
              value="product-details"
              className=" px-0 text-sm  md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("productDetails")}
            </TabsTrigger>
            <TabsTrigger
              value="translate-product"
              className=" px-0 text-sm md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("translate-product")}
            </TabsTrigger>
            <TabsTrigger
              value="statistics"
              className=" px-0 text-sm  md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("statistics")}
            </TabsTrigger>
            <TabsTrigger
              value="advantages"
              className=" px-0 text-sm  md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("adventages")}
            </TabsTrigger>
            <TabsTrigger
              value="translate-advantages"
              className=" px-0 text-sm md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("translate-features")}
            </TabsTrigger>
            <TabsTrigger
              value="product-order-details"
              className=" px-0 text-sm  md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("productorderdetails")}
            </TabsTrigger>
            <TabsTrigger
              value="meta-tags"
              className=" px-0 text-sm  md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("metatags")}
            </TabsTrigger>
            <TabsTrigger
              value="properties"
              className=" px-0 text-sm  md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("filters")}
            </TabsTrigger>
            <TabsTrigger
              value="translations-properties"
              className=" px-0 text-sm  md:text-base text-[#9DA0A1] data-[state=active]:rounded-none  md:pb-6 data-[state=active]:border-b-[3px] duration-100 transition-all font-extrabold data-[state=active]:border-main data-[state=active]:bg-transparent data-[state=active]:shadow-none "
            >
              {t("translations-properties")}
            </TabsTrigger>
          </TabsList>
          <TabsContent value="product-details">
            <ProductDetailsForm
              value="product-details"
              productDetails={product}
              country={data?.country_of_origin}
              weightUnits={data?.weight_type}
              brands={data?.brands}
              shippingType={data?.shipping_type}
              productId={productId}
            />
          </TabsContent>
          <TabsContent value="advantages">
            <ProductFeatures productId={productId} />
          </TabsContent>
          <TabsContent value="translate-advantages">
            <TranslationFeatures productId={productId} />
          </TabsContent>
          <TabsContent value="product-order-details">
            <FormBuilder productId={productId} initState={initState} />
          </TabsContent>
          <TabsContent value="statistics">
            <Statistics id={productId} />
          </TabsContent>
          <TabsContent value="meta-tags">
            <ProductMetaTags productId={productId} />
          </TabsContent>
          <TabsContent value="properties">
            <FormFilters id={productId} />
          </TabsContent>
          <TabsContent value="translate-product">
            <TranslateProduct id={productId} />
          </TabsContent>
          <TabsContent value="translations-properties">
            <TranslateProductLabels id={productId} />
          </TabsContent>
        </Tabs>
      </div>
    </section>
  );
}
