"use client";

import React, {useState,useEffect,useCallback,useMemo,} from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useDispatch } from "react-redux";
import toast from "react-hot-toast";
import { Radio, Spin } from "antd";
import { TiStar } from "react-icons/ti";
import { IoMdInformationCircleOutline } from "react-icons/io";
import ImageCarousel from "./ImageCarousel";
import Price from "./Price";
import QuantityInput from "@/components/UiComponents/ui/QuantityInput";
import AuthWrapper from "../AuthWrapper";
import FavBtnProvider from "./FavBtn";
import ShareItemModal from "../ShareItemModal";
import { addProductToCart } from "@/store/cart";
import { AppDispatch } from "@/store/store";
import { getProductsDetails } from "@/services/ClientApiHandler";
import { ArrowLeftIcon, CartIcon, ShareIcon, ShopIcon, TruckIcon } from "@/assets/svgs/Icons";
import LocalePath from "@/components/UiComponents/LocalePath";
import { useTranslations } from "next-intl";
import ParsedDesc from "./ParsedDesc";
import { formatNumber } from "@/utils/helpers";
import { Feature, Product } from "@/interfaces/types";




type SelectedVariants = Record<string, string>; // featureName => valueId (string)

const ProductDetails = ({product,features}: {product: Product;features: Feature[]}) => {

  const router = useRouter();
  const searchParams = useSearchParams();
  const dispatch = useDispatch<AppDispatch>();
  const [productData, setProductData] = useState<Product>(product);
  const [media, setMedia] = useState<any>([]);
  const [selectedVariants, setSelectedVariants] = useState<SelectedVariants>({});
  const [quantity, setQuantity] = useState<number>(1);
  const [loading, setLoading] = useState<boolean>(false);
  const t = useTranslations();

useEffect(() => {
  const valueParam = searchParams.get("value");

  if (valueParam) {
    const variantIds = valueParam.split(",");
    const initialVariants: SelectedVariants = {};

    features.forEach((feature, index) => {
      if (variantIds[index]) {
        initialVariants[feature.name] = variantIds[index];
      }
    });

    setSelectedVariants(initialVariants);
    
  } else if (product.defautl_feature && product.defautl_feature.length > 0) {
    const defaultVariants: SelectedVariants = {};
    product.defautl_feature.forEach((feature: any) => {
      if (feature.value && feature.value.length > 0) {
        defaultVariants[feature.name] = feature.value[0].id.toString();
        fetchDataDetails(feature.value[0].id.toString())
      }
    });
    setSelectedVariants(defaultVariants);
  }else{
    setMedia([product.main])
  }
}, [searchParams, features, product]);

const fetchDataDetails = useCallback(async (default_id?:String) => {
    const value = searchParams.get("value") ?? default_id;
    
    if (!value) return;

  try {
    setLoading(true);
    const { data } = await getProductsDetails(productData.slug, { value });

    if (data?.[0]) {
      setProductData((prev) => ({
        ...prev,
        ...data[0],
      }));
      const mainImage = productData.main ?[productData.main] : [];
      const variantMedia = data[0].media ?? [];
      if(variantMedia.length){
        setMedia([...variantMedia]);
      }else{
        setMedia([...mainImage]);
      }
      setQuantity(1);
    }
  } catch (error: any) {
      toast.error(error?.response?.data?.message);
  } finally {
    setLoading(false);
  }
  }, [searchParams, productData.slug]);

  useEffect(() => {
    fetchDataDetails();
  }, [fetchDataDetails]);

  useEffect(() => {
    if (productData.min_unit_per_order) {
      const minOrder = productData.min_unit_per_order;
      if (quantity < minOrder) {
        setQuantity(minOrder);
      }
    }
  }, [quantity, productData.min_unit_per_order]);

  const handleVariantChange = (featureName: string, value: string) => {
    const updatedVariants = {
      ...selectedVariants,
      [featureName]: value,
    };
    setSelectedVariants(updatedVariants);

    const valueParam = features.map((feature) => updatedVariants[feature.name] || "").join(",");

    const params = new URLSearchParams();
    params.set("value", valueParam);
    router.push(`?${params.toString()}`);
  };

  const handleAddToCart = () => {
    const valueParam = searchParams.get("value")
    const productIdToUse = valueParam ? productData.id : productData.default_detail;
    dispatch(addProductToCart({id: productIdToUse,quantity,t}));
  };

  const renderVariantsOptions = useMemo(() => {
    if (!features || features.length === 0) return null;
    return (
      <div className="space-y-5 my-5 variants-wrapper">
        {features.map((feature) => (
          <div key={`feature-${feature.id}`} className="flex items-center gap-4">
            <p className="font-semibold min-w-[100px]">{feature.name}</p>
            <Radio.Group
              value={selectedVariants[feature.name]}
              onChange={(e) => handleVariantChange(feature.name, e.target.value)}
              className="product-size-variants"
            >
              {feature.value.map((option) => (
                <Radio.Button
                  key={`option-${option.id}`}
                  value={option.id.toString()}
                  className="px-3 py-1 leading-none border"
                >
                  {option.hex_color ? (
                    <span
                      className="inline-block w-6 h-6 rounded-full border"
                      style={{ backgroundColor: option.hex_color }}
                      title={option.value}
                    />
                  ) : (
                    option.value
                  )}
                </Radio.Button>
              ))}
            </Radio.Group>
          </div>
        ))}
      </div>
    );
  }, [features, selectedVariants]);

  return (
    <section className="product-details-content-wrapper">
      <div className="container py-10 grid-cols-1 grid lg:grid-cols-[1.5fr_2fr] lg:gap-12 gap-6">
        <Spin spinning={loading} wrapperClassName="[&_.ant-spin-container]:h-full">
          <ImageCarousel carouselImages={media} hasThumbs={!!productData.media} />
        </Spin>
        <div className="product-info-wrapper">
          {/* Brand and actions */}
          <div className="flex items-center justify-between gap-3 mb-2">
            <LocalePath href={`/traders/${productData.vendor?.company_name}`}>
              <h5 className="text-base font-medium bg-greynormal text-secondrydark p-3 rounded-lg">
                {productData.vendor?.company_name}
              </h5>
            </LocalePath>

            <div className="flex items-center gap-3">
              <FavBtnProvider type="product" className="!rounded-full" product={product} />
              <div className="relative group">
                <ShareItemModal product={product} />
              </div>
            </div>
          </div>

          {/* Title & Description */}
          <div className="flex flex-col gap-3">
            <h3 key={`product_${productData.name}`} className="text-text text-xl sm:text-3xl text-start font-semibold">
              {productData.name}
            </h3>
            <ParsedDesc desc={productData.description} className="text-sm sm:text-base"/>
          </div>

          {/* Rating */}
            <div key={`rate_${productData.rate_count}`} className="my-4 flex gap-1 items-center">
              {productData?.rate_count > 0 && <p className="text-xs text-secondrytext sm:text-sm">(+{productData?.rate_count})</p>}
              <div className="bg-[#FFB01D14] text-[#FFB01D] p-1.5 rounded-full text-sm sm:text-base font-semibold flex gap-1 items-center">
                {formatNumber(productData?.rate)}
                
                <TiStar size={25} />
              </div>
            </div>

          {/* Price */}
          <Price key={`price_${productData.id}`} product={productData} />

          {/* Vendor Info for Auth Roles */}
          {productData?.min_unit_per_order ? (
            <AuthWrapper allowedRoles={["vendor"]}  >
              <p className="mt-4 bg-greynormal px-4 py-3 rounded-xl text-sm font-semibold inline-flex items-center gap-1.5">
                <IoMdInformationCircleOutline className="text-xl" />
                {t("Text.lower_limit_order", { count: productData.min_unit_per_order })}
              </p>
            </AuthWrapper>
          ) : null}

          {/* Variants */}
          {renderVariantsOptions}

          {/* Client Info */}
          <AuthWrapper allowedRoles={["guest", "client"]}>
            <div className="mt-4 p-3 bg-greynormal rounded-lg flex items-center gap-2 my-5">
              <TruckIcon className="text-xl" />
              <span className="font-semibold">{t("Text.productShippingDate")}</span>
            </div>
            <LocalePath href={`/trader/${productData.vendor?.company_name}`}>
              <div className="flex items-center justify-between border border-platinum rounded-2xl py-4 px-6">
                <div className="flex items-start gap-2">
                  <figure className="size-12 flex-center-content rounded-full bg-secprimary">
                    <ShopIcon />
                  </figure>
                  <div className="flex flex-col gap-1">
                    <p className="text-secondrytext text-xs font-semibold">{t("Text.vendor")}</p>
                    <h5 className="text-base font-semibold">{productData.vendor?.company_name}</h5>
                    {productData.vendor?.rate ? (
                      <div className="flex gap-1 items-center">
                        <div className="bg-[#FFB01D14] text-[#FFB01D] p-1.5 rounded-full text-sm font-semibold flex gap-1 items-center">
                          {formatNumber(productData?.vendor.rate)}
                          <TiStar size={25} />
                        </div>
                        {productData?.vendor?.rate_count? <p className="text-xs text-secondrytext sm:text-sm">(+{productData?.vendor?.rate_count})</p>:""}
                      </div>
                    ) : null}
                  </div>
                </div>
                <ArrowLeftIcon className="size-5" />
              </div>
            </LocalePath>
          </AuthWrapper>

          {/* Trader Bulk Info */}
          {productData.priceing_list && productData.priceing_list.length > 0 ? (
            <AuthWrapper allowedRoles={["vendor"]}>
              <div className="space-y-4">
                <p className="font-semibold">{t("Text.wholesale_price")}</p>
                {productData.priceing_list.map((item: any) => (
                  <div 
                    key={`pricing_${item.id}`}
                    className="border flex items-center justify-between border-greynormal rounded-xl p-4 font-semibold"
                  >
                    <span>{item.min} - {item.max}</span>
                    <Price className="trader-info-price" product={item} />
                  </div>
                ))}
              </div>
            </AuthWrapper>
          ) : null}

          {/* Quantity and Add to Cart */}
          {productData.is_out_of_stock ? (
            <div className="bg-secprimary text-primary h-6 md:h-10 px-1.5 grid place-items-center rounded-lg mt-5">
              {t("Text.out_of_stock")}
            </div>
          ) : (
            <div className="flex items-center w-full gap-4 mt-4">
              <QuantityInput
                quantity={quantity}
                setQuantity={setQuantity}
                minUnitPerOrder={productData?.min_unit_per_order}
                className="flex-row-reverse !min-h-[52px]"
              />
              <button
                onClick={handleAddToCart}
                className="app-btn !flex-1 !w-full group"
                aria-label={t("buttons.addCart")}
              >
                {t("buttons.addCart")}
                <CartIcon className="*:fill-white group-hover:*:!fill-primary" />
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

export default ProductDetails;