"use client";
import React, { useEffect, useState } from "react";
import axios from "@/utils/axios-config";
import Slider from "react-slick";
import { Button, message, Modal } from "antd";
import Image from "next/image";
import Link from "next/link";
import { useLocale } from "next-intl";
import { useSelector, useDispatch } from "react-redux";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { Breadcrumb } from "antd";
import { HomeOutlined } from "@ant-design/icons";
import { CgShoppingCart } from "react-icons/cg";
import { IoMdHeartEmpty } from "react-icons/io";
import { IoMdHeart } from "react-icons/io";
import { useMutation } from "@tanstack/react-query";
import { fetchCartLength } from "@/store/cart/actions";
import { ProductSkeletonDetails } from "@/components/skeletons/skeleton-details";
import ReviewSection from "@/components/reviews";
import { FaStar } from "react-icons/fa";
import { fetchFavouritesLength } from "@/store/cart/actions";
import Barcode from "react-barcode";
import ProductList from "@/components/product-list";

export interface product {
  id: number;
  image: string;
  name: string;
  sub_category_id: number;
  sub_category_name: string;
  category_id: number;
  category_name: string;
  brand_name: string;
  barcode: string;
  requires_prescription: number;
  offer_discount_value: any;
  offer_discount_type: any;
  offer_buy_quantity: any;
  offer_free_quantity: any;
  price: any;
  offer_id: null;
  offer_price: string;
  offer_title: string;
  is_favorite: number;
  is_cart: number;
  is_cart_amount: number;
  specifications: string;
  rate_avg: string;
  rate_count: number;
  list_images: [];
  rate_details: [];
  rates: [];
  is_rated: number;
}
export default function Product() {
  const [activeTab, setActiveTab] = useState<"info" | "reviews">("info");
  const { cartLength } = useSelector((state: { Cart: any }) => state.Cart);
  const [productFavHover, setProductFavHover] = useState(false);
  const [productLoading, setProductLoading] = useState(false);
  const [FavouriteLoading, setFavouriteLoading] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const [productData, setProductData] = useState<product>();
  const [similarProductsData, setSimilarProductsData] = useState<any>([]);
  const [loginModalOpen, setLoginModalOpen] = useState(false);
  const [imageErrors, setImageErrors] = useState<Record<number, boolean>>({});
  const [imageLoaded, setImageLoaded] = useState<Record<number, boolean>>({});
  const { product } = useSelector((state: { Product: any }) => state.Product);
  const { favouritesLength } = useSelector(
    (state: { Cart: any }) => state.Cart
  );
  const searchParams = useSearchParams();
  const productId = searchParams.get("id");
  const { idToken } = useSelector((state: { Auth: any }) => state.Auth);
  const [addedToCart, setAddedToCart] = useState(false);
  const dispatch = useDispatch();
  const locale = useLocale();

  const fetchCartData = async () => {
    //  setCartLoading(true);
    try {
      const response = await axios.get("/my-cart");
      const data = response?.data?.data;
      console.log(data);
      //setCartData(data)
    } catch (err: any) {
      //console.error(err?.data?.message);
      message.error(err?.message);
    }
  };
  const fetchProductData = async () => {
    //  console.log("proooduct", product);
    setProductLoading(true);
    try {
      const response = await axios.get(`/products/${productId}`);
      const data = response?.data?.data;
      console.log("product", data);
      setProductData(data);
      fetchSimilarProductsData(data?.sub_category_id);
      setProductLoading(false);
    } catch (err: any) {
      setProductLoading(false);
    }
  };

  //// fetch similar products
  const fetchSimilarProductsData = async (subCategoryId: number) => {
    try {
      const response = await axios.get(
        `/products?skip=${0}&take=${10}&filter[sub_category_id]=${subCategoryId}`
      );

      const data = await response?.data;
      setSimilarProductsData(data?.data);
    } catch (err: any) {}
  };
  useEffect(() => {
    // fetchCartData();
    fetchProductData();
    //   return () => {
    //     dispatch(saveProduct({}))}
  }, []);
  // Star Rating Component
  const StarRating = ({ rating }: { rating: number }) => {
    return (
      <div className="flex">
        {[...Array(5)].map((_, i) => (
          <span key={i}>
            {i < rating ? (
              <FaStar className="text-yellow-400 w-5 h-5" />
            ) : (
              <FaStar className="text-gray-300 w-5 h-5" />
            )}
          </span>
        ))}
      </div>
    );
  };

  const fetchFavorites = async () => {
    try {
      const response = await axios.get("/favorites");
      if (response?.data?.status) {
        console.log("favorites", response?.data?.data);
        const favList = await response?.data?.data;

        dispatch(fetchFavouritesLength(favList?.length));
        const isFav = favList.some(
          (fav: any) => Number(fav?.product_id) === Number(productId)
        );

        //console.log('isFav',isFav,productId)
        setProductData((prevData) =>
          prevData ? { ...prevData, is_favorite: isFav ? 1 : 0 } : prevData
        );
        //}
      }
    } catch (error) {
      // console.error("Failed to fetch favorites:", error);
    }
  };

  const toggleFavorite = async () => {
    if (!productId) {
      console.error("Error: productData is not loaded or ID is missing!");
      return;
    }

    try {
      setFavouriteLoading(true);
      const response = await axios.post("/favorites", {
        product_id: productId,
      });

      if (response?.data?.status) {
        setProductData((prevData) =>
          prevData
            ? { ...prevData, is_favorite: prevData.is_favorite === 1 ? 0 : 1 }
            : prevData
        );
      }
      dispatch(
        fetchFavouritesLength(
          productData?.is_favorite === 1
            ? favouritesLength - 1
            : favouritesLength + 1
        )
      );
      message.success(response?.data?.message);

      //  fetchFavorites();
    } catch (error: any) {
      message.error(error?.message);
    } finally {
      setFavouriteLoading(false);
    }
  };

  // useEffect(() => {
  //   //if (productId) {
  //   if(idToken){

  //     fetchFavorites();
  //   }
  //   // }
  // }, []);

  const t = useTranslations();
  // const settings = {
  //   dots: false,
  //   arrows: false,
  //   infinite: false,
  //   speed: 500,
  //   slidesToShow: 1,
  //   slidesToScroll: 1,
  // };

  const settings = {
    dots: true,

    // customPaging: () => (
    //     <div className="w-10 h-1  mx-auto"></div>
    //   ),
    customPaging: () => (
      <div className="w-10 h-1 bg-gray-200 mx-auto transition-colors duration-300"></div>
    ),
    dotsClass: "slick-dots custom-dots",
    infinite:
      productData?.list_images?.length && productData?.list_images?.length === 1
        ? false
        : true,
    arrows: false,
    autoplay: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  /// add product to cart
  const mutation = useMutation({
    mutationFn: (values: any) =>
      axios["post"]("/add-to-cart", values, {
        // headers: {
        //   "Accept-Language": `${locale === "en" ? "en-US" : "ar-SA"}`,
        // },
      }),
    onSuccess: (res) => {
      //console.log(res.data);
      message.success(res.data.message);
      setAddedToCart(true);
      dispatch(fetchCartLength(cartLength + 1));
    },
    onError: (err) => {
      const {
        status,
        data: { message },
      } = (err as any).response;

      message.error(message, {
        position: "top-center",
        duration: 5000,
      });
    },
  });
  const addToCartFunc = () => {
    // setProductId(item?.id);
    // console.log("product", item);
    if (!idToken) {
      setLoginModalOpen(true);
      return;
    }
    mutation.mutate({
      product_id: productId,
      offer_id: productData?.offer_id,
      quantity: quantity,
    });
  };
  useEffect(() => {
    //console.log("productData", productData?.list_images);
  }, [productData]);

  const offerDiscreption = (
    buyQuantity: number,
    freeQuantity: number,
    discountType: number,
    discountValue: number
  ) => {
    return (
      <>
        {freeQuantity === 0 ? (
          <div
            className={`${
              locale === "en" ? "flex-row-reverse" : "flex-row"
            } flex items-center`}
          >
            <span className={`${locale === "en" ? "ms-2" : "me-2"}`}>
              {t("off")}{" "}
            </span>

            {discountValue}
            {discountType === 1 ? (
              <Image
                src={"/images/ryial.svg"}
                alt="currancy icon"
                width={12}
                height={12}
                className="ms-1"
              />
            ) : (
              "%"
            )}
          </div>
        ) : discountValue === 100 && discountType === 2 ? (
          ` ${buyQuantity} + ${freeQuantity} ${t("for-free")}`
        ) : (
          <>
            {/* {t("buy")} {buyQuantity} + {freeQuantity} {t("and-get")} */}
            <>
              {" "}
              <span className="ps-[2px]">{discountValue}</span>
              {discountType === 1 ? (
                <Image
                  src={"/images/currancy-white.svg"}
                  alt="currency icon"
                  width={15}
                  height={15}
                  className="inline"
                />
              ) : (
                "%"
              )}{" "}
              {Number(buyQuantity) === 1
                ? t("off-on-second-item")
                : t("off-on-third-item")}
            </>
          </>
        )}
      </>
    );
  };
    const offerCalcLabel = (
    price: number,
    buyQuantity: number,
    freeQuantity: number,
    discountType: number,
    discountValue: number
  ) => {
    return (
      <div className="flex items-center">
      <span className="me-1  text-[12px]">{t("offer-price")}</span>
        {freeQuantity === 0 ? (
          <></>
        ) : discountValue === 100 && discountType === 2 ? (
          // ` ${buyQuantity} + ${freeQuantity} ${t("for-free")}`
          <div className="flex items-center gap-1">
            <p className="text-white">{(Number(buyQuantity) * Number(price)).toFixed(2)}</p>
            <p className="text-white opacity-70 line-through">
              {((Number(buyQuantity) + Number(freeQuantity)) * Number(price)).toFixed(2)}
            </p>
          </div>
        ) : (
          <>
            {/* {t("buy")} {buyQuantity} + {freeQuantity} {t("and-get")} */}
            <>
              {/* {" "}
              <span className="ps-[2px]">{discountValue}</span>
              {discountType === 1 ? (
                <Image
                  src={"/images/currancy-white.svg"}
                  alt="currency icon"
                  width={15}
                  height={15}
                  className="inline"
                />
              ) : (
                "%"
              )}{" "}
              {Number(buyQuantity) === 1
                ? t("off-on-second-item")
                : t("off-on-third-item")} */}
              <div className="flex items-center gap-1">
                <p className="text-white">
                  {(Number(discountType) === 1
                    ? Number(buyQuantity) * Number(price) +
                      Number(freeQuantity) *
                        (Number(price) - Number(discountValue))
                    : (Number(buyQuantity) * Number(price)) +
                      Number(freeQuantity) *
                        ((Number(price) / 100) * (100-Number(discountValue)))).toFixed(2)}
                </p>
                <p className="text-white opacity-70 line-through">
                  {((Number(freeQuantity) + Number(buyQuantity)) * Number(price)).toFixed(2)}
                </p>
              </div>
            </>
          </>
        )}
      </div>
    );
  };

  if (productLoading) {
    return (
      <div className="container px-4 mx-auto pt-[200px]">
        <ProductSkeletonDetails />
      </div>
    );
  }
  return (
    <>
      <div className="container px-4 mx-auto ">
        {/* Breadcrumb Navigation */}
        {productData && (
          <Breadcrumb
            className="mt-4 mb-2"
            items={[
              {
                title: (
                  <Link href={`/${locale}`} className="flex items-center gap-1 hover:!text-primary !bg-transparent ">
                    <HomeOutlined className="!text-[20px] hover:!text-primary"/>
                  </Link>
                ),
              },
              {
                title: (
                  <Link

                    href={`/${locale}/categories/${productData.category_name?.replace(/ /g, "_")}?id=${productData.category_id}`}
                    className="!bg-transparent hover:!text-primary text-[16px]"
                  >
                    {productData.category_name}
                  </Link>
                ),
              },
              {
                title: (
                  <Link
                    href={`/${locale}/categories/${productData.category_name?.replace(/ /g, "_")}/subcategories/${productData.sub_category_name?.replace(/ /g, "_")}?id=${productData.category_id}&subId=${productData.sub_category_id}`}
                    className="text-[16px] !bg-transparent hover:!text-primary"
                  >
                    {productData.sub_category_name}
                  </Link>
                ),
              },
              {
                title: <span className="text-gray-500 text-[16px]">{productData.name}</span>,
              },
            ]}
          />
        )}

        <div className="flex flex-wrap md:flex-nowrap mt-5">
          <div className="slider-container max-[678px]:w-full  w-full md:w-[40%] relative">
            <Slider
              {...settings}
              // className="w-[200px] h-[300px] md:w-[250px] md:h-[350px] lg:h-[500px] lg:w-[350px]"
              className="flex justify-center items-center mx-auto p-2 w-[200px] min-h-[250px] md:w-[250px] md:min-h-[300px] lg:min-h-[450px] lg:w-[350px]"
            >
              {productData?.list_images?.map((item: any, index: number) => (
                <div className="relative w-full  aspect-[1/1] " key={index}>
                  {/* <Image
                  src={item}
                  alt="currancy icon"
                  // layout="fill"
                  fill
                  className="mx-auto"
                  loading="lazy"
                /> */}

                  <Image
                    src={
                      imageErrors[item]
                        ? "/images/no-data.png"
                        : item || "/images/no-data.png"
                    }
                    alt={item.name || "Product"}
                    fill
                    sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, 25vw"
                    className={`rounded-lg object-contain transition-opacity duration-200 ${
                      imageLoaded[item] ? "opacity-100" : "opacity-0"
                    }`}
                    onError={() =>
                      setImageErrors((prev) => ({ ...prev, [item]: true }))
                    }
                    onLoadingComplete={() =>
                      setImageLoaded((prev) => ({ ...prev, [item]: true }))
                    }
                  />
                </div>
              ))}
            </Slider>
          </div>
          <div className="px-4 ps-8 md:ps-[30px] lg:ps-[100px] flex flex-grow flex-col justify-center">
            {productData?.requires_prescription === 1 && (
              <div className="flex items-center justify-center min-w-fit gap-1 px-3 py-1 mt-2 w-fit h-fit bg-[#FBC43A] text-white rounded-[5px]">
                <Image
                  src={"/images/prescription-icon.svg"}
                  alt="prescription icon"
                  width={20}
                  height={20}
                />
                <p className="text-[12px] md:text-[14px]">
                  {t("prescription")}
                </p>
              </div>
            )}
            <div className="flex flex-col md:flex-row justify-between py-2 gap-2 ">
              <p className=" text-third text-[18px] md:text-[28px]">
                {productData?.name}
              </p>
            </div>
            {/* {productData?.offer_title && (
            <span className=" z-[40] bg-red-500 text-white rounded-full text-xs  py-1 px-3 text-wrap opacity-90 w-fit">
              {productData?.offer_title}
            </span>
          )} */}
            {productData?.offer_title && (
              <p className="flex items-center gap-1 z-[40] bg-red-500 text-white rounded-[5px] text-xs  py-1 px-3 text-wrap opacity-90 w-fit">
                {/* <span>{productData?.offer_title}</span>
                {productData?.offer_discount_value ? (
                  <span className="flex items-center font-medium  rounded-full   text-center   ">
                    {productData?.offer_discount_value}{" "}
                    {productData?.offer_discount_type === 1 ? (
                      <Image
                        src={"/images/ryial.svg"}
                        alt="currancy icon"
                        width={25}
                        height={25}
                        className=""
                      />
                    ) : (
                      "%"
                    )}{" "}
                  </span>
                ) : null} */}
                {offerDiscreption(
                  productData?.offer_buy_quantity,
                  productData?.offer_free_quantity,
                  productData?.offer_discount_type,
                  productData?.offer_discount_value
                )}
              </p>
            )}
            <div className="flex items-center ">
              <div className="flex items-center me-5 md:me-20">
                <StarRating rating={Number(productData?.rate_avg) ?? 0} />{" "}
                <span className="mx-1">{productData?.rate_avg} </span> (
                {productData?.rate_count})
              </div>
              {productData?.barcode ? (
                <Barcode
                  value={productData?.barcode}
                  width={1}
                  height={40}
                  textMargin={1}
                  fontSize={12}
                />
              ) : null}
            </div>
            <div className="flex  items-center">
              <div className="flex py-2">
                {productData?.offer_price &&
                  productData?.offer_price < productData?.price && (
                    <div className="flex items-center">
                      <p className="text-secondary text-[20px] md:text-[32px] me-2">
                        {" "}
                        {productData?.offer_price}{" "}
                      </p>
                      <span className="inline-block ">
                        <Image
                          src={"/images/ryial.svg"}
                          alt="currancy icon"
                          width={12}
                          height={12}
                          className="ms-1"
                        />
                      </span>
                    </div>
                  )}
                <div className="flex items-center">
                  <p
                    className={`${
                      productData?.offer_price &&
                      productData?.offer_price < productData?.price
                        ? "line-through text-gray-400"
                        : "text-secondary"
                    }  text-[20px] md:text-[32px] mx-2`}
                  >
                    {" "}
                    {productData?.price}{" "}
                  </p>
                  <span className="inline-block ">
                    <Image
                      src={"/images/ryial.svg"}
                      alt="currancy icon"
                      width={12}
                      height={12}
                      className="ms-1"
                    />
                  </span>
                  {/* {t("sar")} */}{" "}
                </div>
              </div>
              <div className=" flex mx-4">
                {idToken ? (
                  <div
                    className={`${
                      !FavouriteLoading
                        ? "pointer-events-auto opacity-100"
                        : "pointer-events-none opacity-35"
                    } p-3 m-1 rounded-[50%] cursor-pointer bg-[#EDF4F6] flex justify-center items-center`}
                    onClick={toggleFavorite}
                    onMouseOver={() => setProductFavHover(true)}
                    onMouseLeave={() => setProductFavHover(false)}
                  >
                    {productData?.is_favorite === 1 ? (
                      <IoMdHeart className="text-[24px] text-red-600" />
                    ) : (
                      <IoMdHeartEmpty className="text-[24px]" />
                    )}
                  </div>
                ) : null}
              </div>
            </div>
            {Number(productData?.offer_free_quantity) > 0 ? (
              <div className=" w-fit bg-primary bg-opacity-50 px-2  rounded-[5px]">
                {offerCalcLabel(
                  productData?.price,
                  productData?.offer_buy_quantity,
                  productData?.offer_free_quantity,
                  productData?.offer_discount_type,
                  productData?.offer_discount_value
                )}
              </div>
            ) : null}
            <div className="flex py-4">
              <Button
                loading={mutation.isPending}
                disabled={!!productData?.is_cart || addedToCart}
                onClick={addToCartFunc}
                className="rounded-[72px] !text-white  w-[48%] sm:w-[200px] min-h-[40px] me-2 !border-none !outline-none !bg-primary p-4  hover:!bg-primary"
              >
                <CgShoppingCart className="text-white text-[20px]" />
                <p className="text-[18px] font-semibold">
                  {" "}
                  {productData?.is_cart || addedToCart
                    ? t("added-to-cart")
                    : t("add-to-cart")}
                </p>
              </Button>
              <div className="mx-2 rounded-[72px] flex justify-end w-[48%] sm:w-[200px] ">
                <Button
                  className="!bg-secondary !border-none text-[20px] !outline-none p-4 min-h-[40px] w-[25%] rounded-s-[72px] !text-white font-semibold"
                  disabled={!!productData?.is_cart || addedToCart}
                  onClick={() => {
                    if (quantity === 1) {
                      return;
                    } else {
                      setQuantity(quantity - 1);
                    }
                  }}
                >
                  -
                </Button>
                <p className="min-h-[40px] w-[50%] flex justify-center items-center bg-[#EDF4F6] text-secondary text-center">
                  {quantity}
                </p>
                <Button
                  disabled={!!productData?.is_cart || addedToCart}
                  className="!bg-secondary !border-none text-[20px] !outline-none p-4 min-h-[40px] w-[25%] rounded-e-[72px] !text-white font-semibold"
                  onClick={() => setQuantity(quantity + 1)}
                >
                  +
                </Button>
              </div>
            </div>
          </div>
        </div>

        <div className="product-detail-tabs mt-10">
          <div className={`flex `}>
            <button
              className={`p-4 w-[50%] border-solid border-b-[2px] cursor-pointer text-[18px] md:text-[20px] ${
                activeTab === "info"
                  ? "border-primary text-primary"
                  : " border-gray-300"
              } text-start`}
              onClick={() => setActiveTab("info")}
            >
              {t("Specifications")}
            </button>

            <button
              className={`p-4 w-[50%] border-solid border-b-[2px] cursor-pointer text-[18px] md:text-[20px] ${
                activeTab === "reviews"
                  ? "border-primary text-primary"
                  : " border-gray-300"
              } text-start`}
              onClick={() => setActiveTab("reviews")}
            >
              {t("Reviews")}
            </button>
            {/* } */}
          </div>

          {/* Tab Content */}
          <div className="tabs-content">
            {activeTab === "info" && (
              <div className="tab-pane py-4">
                <h3 className="inline font-semibold text[16px] md:text-[18px] text-secondary">
                  {t("Product Description")} :
                </h3>
                <p className="inline mx-2 py-1 text[14px] md:text-[16px] text-secondary pt-6">
                  {productData?.specifications}
                </p>
              </div>
            )}

            {activeTab === "reviews" && (
              <div className="tab-pane py-4">
                <ReviewSection
                  productId={productId?.toString() || ""}
                  rateAvg={productData?.rate_avg?.toString() || ""}
                  rateCount={productData?.rate_count || 0}
                  rates={productData?.rates || []}
                  rateDetails={[productData?.rate_details]}
                  isRated={productData?.is_rated ?? 0}
                />
              </div>
            )}
          </div>
        </div>
        <div className="mt-10">
          <ProductList
            title={t("similar-products")}
            products={similarProductsData}
          />
        </div>
      </div>

      <Modal
        className="confirm-pickup"
        open={loginModalOpen}
        onCancel={() => setLoginModalOpen(false)}
        footer={null}
      >
        <div className="flex flex-col items-center py-8">
          <Image
            src={"/images/login-first.png"}
            width={160}
            height={160}
            style={
              {
                // objectFit:"contain"
              }
            }
            alt="image"
          />

          <p className="font-semibold py-4 text-[16px] md:text-[20px] text-gray-700">
            {t("build-your-profile")}
          </p>
          <Button
            onClick={() => setLoginModalOpen(false)}
            className="relative !text-primary !bg-white !border-primary !outline-none flex justify-center items-center text-[20px] font-semibold mx-auto mt-[30px] mb-[10px] min-h-[50px] w-[70%]  !rounded-[12px]"
          >
            <Link
              href={`/${locale}/login`}
              locale={false}
              className="absolute w-full h-full top-0 left-0 flex justify-center items-center rtl:!text-[13px]"
            >
              {t("log-in")}
            </Link>
          </Button>
          <Button
            onClick={() => setLoginModalOpen(false)}
            className="relative !text-white !bg-primary !border-none !outline-none flex justify-center items-center text-[20px] font-semibold mx-auto my-[10px] min-h-[50px] w-[70%]  !rounded-[12px]"
          >
            <Link
              href={`/${locale}/signup`}
              locale={false}
              className="absolute w-full h-full top-0 left-0 flex justify-center items-center rtl:!text-[13px]"
            >
              {t("sign-up")}
            </Link>
          </Button>
        </div>
      </Modal>
    </>
  );
}

// "use client";
// import React, { useEffect, useState } from "react";
// import axios from "@/utils/axios-config";
// import Slider from "react-slick";
// import { Button, message } from "antd";
// import Image from "next/image";
// import { useSelector, useDispatch } from "react-redux";
// import { useTranslations } from "next-intl";
// import { CgShoppingCart } from "react-icons/cg";
// import { IoMdHeartEmpty } from "react-icons/io";
// import { IoMdHeart } from "react-icons/io";
// import { useMutation } from "@tanstack/react-query";
// import { fetchCartLength } from "@/store/cart/actions";
// import { ProductSkeletonDetails } from "@/components/skeletons/skeleton-details";
// import ReviewSection from "@/components/reviews";
// import { FaStar } from "react-icons/fa";
// import { fetchFavouritesLength } from "@/store/cart/actions";
// import Barcode from "react-barcode";
// import ProductList from "@/components/product-list";
// import { useSearchParams } from 'next/navigation';

// export interface product {
//   id: number;
//   image: string;
//   name: string;
//   sub_category_id: number;
//   brand_name: string;
//   barcode: string;
//   requires_prescription: number;
//   price: string;
//   offer_id: null;
//   offer_price: string;
//   offer_title: string;
//   is_favourite: number;
//   is_cart: number;
//   is_cart_amount: number;
//   specifications: string;
//   rate_avg: string;
//   rate_count: number;
//   list_images: [];
//   rate_details: [];
//   rates: [];
//   is_rated: number;
// }

// export default function Product() {
//   const searchParams = useSearchParams();
//   const productId = searchParams.get('id');

//   const [activeTab, setActiveTab] = useState<"info" | "reviews">("info");
//   const [productLoading, setProductLoading] = useState(false);
//   const [FavouriteLoading, setFavouriteLoading] = useState(false);
//   const [quantity, setQuantity] = useState(1);
//   const [productData, setProductData] = useState<product>();
//   const [similarProductsData, setSimilarProductsData] = useState<any>([]);
//   const [imageErrors, setImageErrors] = useState<Record<number, boolean>>({});
//   const [imageLoaded, setImageLoaded] = useState<Record<number, boolean>>({});

//   const { idToken } = useSelector((state: { Auth: any }) => state.Auth);
//   const { cartLength } = useSelector((state: { Cart: any }) => state.Cart);
//   const [addedToCart, setAddedToCart] = useState(false);
//   const dispatch = useDispatch();

//   const fetchCartData = async () => {
//     try {
//       await axios.get("/my-cart");
//     } catch (err: any) {
//       console.error("Cart fetch error:", err.message);
//     }
//   };

//   const fetchProductData = async (targetProductId: number) => {
//     if (!targetProductId) {
//       message.error("Invalid product ID");
//       return;
//     }

//     setProductLoading(true);
//     try {
//       const response = await axios.get(`/products/${targetProductId}`);
//       const data = response?.data?.data;

//       if (!data) {
//         throw new Error("Product data not found");
//       }

//       setProductData(data);

//       if (data?.sub_category_id) {
//         fetchSimilarProductsData(data.sub_category_id);
//       }
//       setProductLoading(false);
//     } catch (err: any) {
//       setProductLoading(false);
//       message.error(err.response?.data?.message || "Product not found");
//     }
//   };

//   const fetchSimilarProductsData = async (subCategoryId: number) => {
//     try {
//       const response = await axios.get(
//         `/products?skip=0&take=10&filter[sub_category_id]=${subCategoryId}`
//       );
//       const data = await response?.data;
//       setSimilarProductsData(data?.data || []);
//     } catch (err: any) {
//       console.error("Similar products error:", err);
//     }
//   };
//   useEffect(() => {
//     if (productData) {
//       fetchFavorites();
//     }
//   }, [productId]);
//   // useEffect(() => {
//   //   const loadProduct = async () => {
//   //     console.log('Product ID from URL:', productId);

//   //     if (!productId) {
//   //       message.error("Product ID not found in URL");
//   //       setProductLoading(false);
//   //       return;
//   //     }

//   //     const targetProductId = parseInt(productId);
//   //     if (isNaN(targetProductId)) {
//   //       message.error("Invalid product ID format");
//   //       setProductLoading(false);
//   //       return;
//   //     }

//   //     await fetchCartData();
//   //     await fetchProductData(targetProductId);
//   //   };

//   //   if (productId) {
//   //     loadProduct();
//   //   }
//   // }, [productId]);

//   useEffect(() => {
//     return () => {
//       setProductData(undefined);
//     };
//   }, []);

//   // Star Rating Component
//   const StarRating = ({ rating }: { rating: number }) => {
//     return (
//       <div className="flex">
//         {[...Array(5)].map((_, i) => (
//           <span key={i}>
//             {i < rating ? (
//               <FaStar className="text-yellow-400 w-5 h-5" />
//             ) : (
//               <FaStar className="text-gray-300 w-5 h-5" />
//             )}
//           </span>
//         ))}
//       </div>
//     );
//   };

//   const fetchFavorites = async () => {
//     if (!productData?.id) return;

//     try {
//       const response = await axios.get("/favorites");
//       if (response?.data?.status) {
//         const favList = await response?.data?.data;
//         dispatch(fetchFavouritesLength(favList?.length));
//         const isFav = favList.some(
//           (fav: any) => fav?.product_id === productData?.id
//         );

//         setProductData((prevData) =>
//           prevData ? { ...prevData, is_favourite: isFav ? 1 : 0 } : prevData
//         );
//       }
//     } catch (error) {
//       console.error("Failed to fetch favorites:", error);
//     }
//   };

//   const toggleFavorite = async () => {
//     if (!productData?.id) return;

//     try {
//       setFavouriteLoading(true);
//       const response = await axios.post("/favorites", {
//         product_id: productData.id,
//       });

//       if (response?.data?.status) {
//         setProductData((prevData) =>
//           prevData
//             ? { ...prevData, is_favourite: prevData.is_favourite === 1 ? 0 : 1 }
//             : prevData
//         );
//       }
//       message.success(response?.data?.message);
//       fetchFavorites();
//     } catch (error: any) {
//       message.error(error?.message);
//     } finally {
//       setFavouriteLoading(false);
//     }
//   };

//   useEffect(() => {
//     if (productData?.id) {
//       fetchFavorites();
//     }
//   }, [productData?.id]);

//   const t = useTranslations();

//   const settings = {
//     dots: true,
//     customPaging: () => (
//       <div className="w-10 h-1 bg-gray-200 mx-auto transition-colors duration-300"></div>
//     ),
//     dotsClass: "slick-dots custom-dots",
//     infinite: productData?.list_images.length? productData?.list_images.length> 1:false,
//     arrows: false,
//     autoplay: true,
//     speed: 500,
//     slidesToShow: 1,
//     slidesToScroll: 1,
//   };

//   const mutation = useMutation({
//     mutationFn: (values: any) => axios.post("/add-to-cart", values),
//     onSuccess: (res) => {
//       message.success(res.data.message);
//       setAddedToCart(true);
//       dispatch(fetchCartLength(cartLength + 1));
//     },
//     onError: (err) => {
//       message.error("Error adding to cart");
//     },
//   });

//   const addToCartFunc = () => {
//     if (!productData?.id) return;

//     mutation.mutate({
//       product_id: productData.id,
//       offer_id: productData?.offer_id,
//       quantity: quantity,
//     });
//   };

//   if (productLoading) {
//     return (
//       <div className="container px-4 mx-auto pt-[200px]">
//         <ProductSkeletonDetails />
//       </div>
//     );
//   }

//   // if (!productData && !productLoading) {
//   //   return (
//   //     <div className="container px-4 mx-auto pt-[200px] text-center">
//   //       <div>Product not found</div>
//   //     </div>
//   //   );
//   // }

//   return (
//     <div className="container px-4 mx-auto ">
//       <div className="flex flex-wrap md:flex-nowrap mt-5">
//         <div className="slider-container max-[678px]:w-full  w-full md:w-[40%] relative">
//           <Slider
//             {...settings}
//             className="flex justify-center items-center mx-auto p-2 w-[200px] min-h-[250px] md:w-[250px] md:min-h-[300px] lg:min-h-[450px] lg:w-[350px]"
//           >
//             {productData?.list_images?.map((item: any, index: number) => (
//               <div className="relative w-full aspect-[1/1]" key={index}>
//                 <Image
//                   src={
//                     imageErrors[item]
//                       ? "/images/no-data.png"
//                       : item || "/images/no-data.png"
//                   }
//                   alt={productData?.name || "Product"}
//                   fill
//                   sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, 25vw"
//                   className={`rounded-lg object-contain transition-opacity duration-200 ${
//                     imageLoaded[item] ? "opacity-100" : "opacity-0"
//                   }`}
//                   onError={() =>
//                     setImageErrors((prev) => ({ ...prev, [item]: true }))
//                   }
//                   onLoadingComplete={() =>
//                     setImageLoaded((prev) => ({ ...prev, [item]: true }))
//                   }
//                 />
//               </div>
//             ))}
//           </Slider>
//         </div>
//         <div className="px-4 ps-8 md:ps-[30px] lg:ps-[100px] flex flex-grow flex-col justify-center">
//           <div className="flex flex-col md:flex-row justify-between py-2 gap-2">
//             <p className="text-third text-[18px] md:text-[28px]">
//               {productData?.name}
//             </p>
//             {productData?.requires_prescription === 1 && (
//               <div className="flex items-center justify-center min-w-fit gap-1 px-3 py-1 mt-2 w-fit h-fit bg-primary text-white rounded-[5px]">
//                 <Image
//                   src={"/images/prescription-icon.svg"}
//                   alt="prescription icon"
//                   width={20}
//                   height={20}
//                 />
//                 <p className="text-[12px] md:text-[14px]">{t("prescription")}</p>
//               </div>
//             )}
//           </div>

//           <div className="flex items-center">
//             <div className="flex items-center me-5 md:me-20">
//               <StarRating rating={Number(productData?.rate_avg) ?? 0} />
//               <span className="mx-1">{productData?.rate_avg}</span> (
//               {productData?.rate_count})
//             </div>
//             {productData?.barcode && (
//               <Barcode
//                 value={productData.barcode}
//                 width={1}
//                 height={40}
//                 textMargin={1}
//                 fontSize={12}
//               />
//             )}
//           </div>
//           <div className="flex items-center">
//             <div className="flex py-2">
//               {productData?.offer_price &&
//                 productData.offer_price < productData.price && (
//                   <div className="flex items-center">
//                     <p className="text-secondary text-[20px] md:text-[32px] me-2">
//                       {productData.offer_price}
//                     </p>
//                     <span className="inline-block">
//                       <Image
//                         src={"/images/ryial.svg"}
//                         alt="currency icon"
//                         width={25}
//                         height={25}
//                       />
//                     </span>
//                   </div>
//                 )}
//               <div className="flex items-center">
//                 <p
//                   className={`${
//                     productData?.offer_price &&
//                     productData.offer_price < productData.price
//                       ? "line-through text-gray-400"
//                       : "text-secondary"
//                   } text-[20px] md:text-[32px] mx-2`}
//                 >
//                   {productData?.price}
//                 </p>
//                 <span className="inline-block">
//                   <Image
//                     src={"/images/ryial.svg"}
//                     alt="currency icon"
//                     width={25}
//                     height={25}
//                   />
//                 </span>
//               </div>
//             </div>
//             <div className="flex mx-4">
//               {idToken && (
//                 <div
//                   className={`${
//                     !FavouriteLoading
//                       ? "pointer-events-auto opacity-100"
//                       : "pointer-events-none opacity-35"
//                   } p-3 m-1 rounded-[50%] cursor-pointer bg-[#EDF4F6] flex justify-center items-center`}
//                   onClick={toggleFavorite}
//                 >
//                   {productData?.is_favourite === 1 ? (
//                     <IoMdHeart className="text-[24px] text-red-600" />
//                   ) : (
//                     <IoMdHeartEmpty className="text-[24px]" />
//                   )}
//                 </div>
//               )}
//             </div>
//           </div>
//           <div className="flex py-4">
//             <Button
//               loading={mutation.isPending}
//               disabled={!!productData?.is_cart || addedToCart}
//               onClick={addToCartFunc}
//               className="rounded-[72px] !text-white w-[48%] sm:w-[200px] min-h-[40px] me-2 !border-none !outline-none !bg-primary p-4 hover:!bg-primary"
//             >
//               <CgShoppingCart className="text-white text-[20px]" />
//               <p className="text-[18px] font-semibold">
//                 {productData?.is_cart || addedToCart
//                   ? t("added-to-cart")
//                   : t("add-to-cart")}
//               </p>
//             </Button>
//             <div className="mx-2 rounded-[72px] flex justify-end w-[48%] sm:w-[200px]">
//               <Button
//                 className="!bg-secondary !border-none text-[20px] !outline-none p-4 min-h-[40px] w-[25%] rounded-s-[72px] !text-white font-semibold"
//                 onClick={() => quantity > 1 && setQuantity(quantity - 1)}
//                 disabled={quantity === 1}
//               >
//                 -
//               </Button>
//               <p className="min-h-[40px] w-[50%] flex justify-center items-center bg-[#EDF4F6] text-secondary text-center">
//                 {quantity}
//               </p>
//               <Button
//                 className="!bg-secondary !border-none text-[20px] !outline-none p-4 min-h-[40px] w-[25%] rounded-e-[72px] !text-white font-semibold"
//                 onClick={() => setQuantity(quantity + 1)}
//               >
//                 +
//               </Button>
//             </div>
//           </div>
//         </div>
//       </div>

//       <div className="product-detail-tabs mt-10">
//         <div className="flex">
//           <button
//             className={`p-4 w-[50%] border-solid border-b-[2px] cursor-pointer text-[18px] md:text-[20px] ${
//               activeTab === "info"
//                 ? "border-primary text-primary"
//                 : "border-gray-300"
//             } text-start`}
//             onClick={() => setActiveTab("info")}
//           >
//             {t("Specifications")}
//           </button>
//           <button
//             className={`p-4 w-[50%] border-solid border-b-[2px] cursor-pointer text-[18px] md:text-[20px] ${
//               activeTab === "reviews"
//                 ? "border-primary text-primary"
//                 : "border-gray-300"
//             } text-start`}
//             onClick={() => setActiveTab("reviews")}
//           >
//             {t("Reviews")}
//           </button>
//         </div>

//         <div className="tabs-content">
//           {activeTab === "info" && (
//             <div className="tab-pane py-4">
//               <h3 className="inline font-semibold text[16px] md:text-[18px] text-secondary">
//                 {t("Product Description")} :
//               </h3>
//               <p className="inline mx-2 py-1 text[14px] md:text-[16px] text-secondary pt-6">
//                 {productData?.specifications}
//               </p>
//             </div>
//           )}

//           {activeTab === "reviews" && (
//             <div className="tab-pane py-4">
//               <ReviewSection
//                 productId={productData?.id?.toString() || ""}
//                 rateAvg={productData?.rate_avg?.toString() || ""}
//                 rateCount={productData?.rate_count || 0}
//                 rates={productData?.rates || []}
//                 rateDetails={productData?.rate_details || []}
//                 isRated={productData?.is_rated ?? 0}
//               />
//             </div>
//           )}
//         </div>
//       </div>

//       {similarProductsData.length > 0 && (
//         <div className="mt-10">
//           <ProductList
//             title={t("similar-products")}
//             products={similarProductsData}
//           />
//         </div>
//       )}
//     </div>
//   );
// }