"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { Button, message, Modal, Tooltip } from "antd";
import { useRouter } from "next/navigation";
import { IoMdHeartEmpty } from "react-icons/io";
import { IoMdHeart } from "react-icons/io";
import { useTranslations, useLocale } from "next-intl";

import Link from "next/link";
import { fetchFavouritesLength } from "@/store/cart/actions";
import { PiShareFatFill } from "react-icons/pi";
import { PiShareFatLight } from "react-icons/pi";
import { CgShoppingCart } from "react-icons/cg";
import { useDispatch, useSelector } from "react-redux";
import { saveProduct, saveProductId } from "@/store/product/actions";
import { useMutation } from "@tanstack/react-query";
import axios from "@/utils/axios-config";
import { fetchCartLength } from "@/store/cart/actions";
import { usePathname } from "next/navigation";
import { FaStar } from "react-icons/fa";
import { Swiper, SwiperSlide } from "swiper/react";
import { set } from "zod";
type product = {
  id: number;
  image: string;
  name: string;
  sub_category_id: number;
  brand_name: string;
  requires_prescription: number;
  price: string;
  offer_id: null;
  offer_price: string;
  offer_title: string;
  is_favourite?: number;
  is_favorite?: number;
  is_cart?: number;
  rate_avg?: string;
  rate_count?: number;
};
export interface DataType {
  products: product[];
  title?: string;
}

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

export default function Product({ products }: { products: product[] }) {
  const [hoveredItemId, setHoveredItemId] = useState<any>(undefined);
  const [productHover, setProductHover] = useState(false);
  const [productFavHover, setProductFavHover] = useState(false);
  const [productShareHover, setProductShareHover] = useState(false);
  const [favouritesProducts, setFavouritesProducts] = useState<any>([]);
  const [favouriteLoading, setFavouriteLoading] = useState(false);
  const [cartProducts, setCartProducts] = useState<any>([]);
  const [loginModalOpen, setLoginModalOpen] = useState(false);
  const [productId, setProductId] = useState<undefined | number>(undefined);
  const [imageErrors, setImageErrors] = useState<Record<number, boolean>>({});
  const [imageLoaded, setImageLoaded] = useState<Record<number, boolean>>({});
  const { cartLength } = useSelector((state: { Cart: any }) => state.Cart);
  const { idToken } = useSelector((state: { Auth: any }) => state.Auth);
  const router = useRouter();
  const t = useTranslations();
  const dispatch = useDispatch();
  const locale = useLocale();
  const pathname = usePathname();
  const [imageSrc, setImageSrc] = useState(
    ""
    // item.image || "/images/fallback.png"
  );
  /// 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: any) => {
      console.log(res.data);

      dispatch(fetchCartLength(cartLength + 1));
      message.success(res.data.message);
      setCartProducts([...cartProducts, productId]);
    },
    onError: (err: any) => {
      const {
        status,
        data: { message },
      } = (err as any).response;

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

  useEffect(() => {
    if (idToken) {
      fetchFavorites();
    }
  }, []);
  useEffect(() => {
    const arr = [];
    //  console.log("products", products);
    for (let i = 0; i <= products.length; i++) {
      if (products[i]?.is_cart) {
        arr.push(products[i].id);
      }
      setCartProducts([...arr]);
    }
    //  console.log('arr',arr)
  }, [products]);

  /// toggle favourite
  const toggleFavorite = async (item: any) => {
    if (!idToken) {
      setLoginModalOpen(true);
      return;
    }
    try {
      setFavouriteLoading(true);
      const response = await axios.post("/favorites", {
        product_id: item?.id,
      });

      //if (response?.data?.status) {
      // const product = favouritesProducts?.filter((ele:any)=>ele.id===item?.id);
      // const remainingElements = favouritesProducts?.filter((ele:any)=>ele.id!==item?.id);

      // if(product?.is_favorite===1){
      //   setFavouritesProducts([...remainingElements,{id:item?.id,is_favorite:0}])
      // }else {
      //   setFavouritesProducts([...remainingElements,{id:item?.id,is_favorite:1}])
      // }

      // }
      message.success(response?.data?.message);

      fetchFavorites();
    } catch (error: any) {
      message.error(error?.message);
    } finally {
      setFavouriteLoading(false);
    }
  };
  const fetchFavorites = async () => {
    try {
      const response = await axios.get("/favorites");
      if (response?.data?.status) {
        const favList = await response?.data?.data;
        setFavouritesProducts([...favList]);
        dispatch(fetchFavouritesLength(favList?.length));

        //  console.log((favouritesProducts?.filter((ele:any)=>ele.product_id===9035).length>0))    // 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 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>
    );
  };
  return (
    <>
      {/* <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 min-[1280px]:grid-cols-5 min-[1550px]:grid-cols-6 min-[1825px]:grid-cols-7 gap-x-3 gap-y-[50px]"> */}
        {products.map((item: any) => (
          <div
            key={item.id}
            className={`z-[20]  product-item cursor-pointer flex  flex-col md:w-[200px]  w-[220px] h-full ${
              hoveredItemId === item.id ? "hovered" : undefined
            }`}
            onClick={() => {
              dispatch(saveProductId(item.id));
              dispatch(saveProduct(item));
              sessionStorage.setItem("currentProductId", item.id.toString());
            }}
          >
            {/* Product Image Section - Fixed height */}
            <div
              className="relative w-full aspect-[1/1] flex justify-center items-center rounded-[10px] shadow-sm cursor-pointer"
              onMouseOver={(e) => {
                setProductHover(true);
                setHoveredItemId(item.id);
              }}
              onMouseLeave={() => {
                setHoveredItemId("");
                setProductHover(false);
              }}
            >
              <Link
                href={`/${locale}/products/${(item?.name)
                  .replace(/[^a-zA-Z0-9\u0600-\u06FF]+/g, "-")
                  .replace(/^-+|-+$/g, "")
                  .toLowerCase()}?id=${item.id}`}
                locale={false}
                className="absolute w-full h-full top-0 left-0 z-[40]"
              ></Link>

              {item?.offer_title && (
                <p className="absolute z-[20] gap-2 w-fit bg-red-500 text-white py-1 rounded-ss-[5px] text-[11px] top-[0px] start-[0px] px-1 text-wrap opacity-80 max-w-[160px]">
                  {offerDiscreption(
                    item?.offer_buy_quantity,
                    item?.offer_free_quantity,
                    item?.offer_discount_type,
                    item?.offer_discount_value
                  )}
                </p>
              )}

              <div className="relative w-full h-full">
                {!imageLoaded[item.id] && !imageErrors[item.id] && (
                  <div className="absolute inset-0 bg-gray-200 animate-pulse rounded-lg" />
                )}
                <Image
                  src={
                    imageErrors[item.id]
                      ? "/images/no-data.png"
                      : item.image || "/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.id] ? "opacity-100" : "opacity-0"
                  }`}
                  onError={() =>
                    setImageErrors((prev) => ({ ...prev, [item.id]: true }))
                  }
                  onLoadingComplete={() =>
                    setImageLoaded((prev) => ({ ...prev, [item.id]: true }))
                  }
                />
              </div>

              {productHover && hoveredItemId === item.id && (
                <>
                  <div className="absolute top-0 left-0 h-full w-full bg-[#F6F5FA] opacity-50 z-[20]"></div>

                  <div className="absolute flex">
                    <div
                      className={`${
                        !favouriteLoading
                          ? "pointer-events-auto opacity-100"
                          : "pointer-events-none opacity-35"
                      } p-3 m-1 rounded-[50%] bg-[#EDF4F6] flex justify-center items-center z-[50]`}
                      onMouseOver={() => setProductFavHover(true)}
                      onMouseLeave={() => setProductFavHover(false)}
                      onClick={() => toggleFavorite(item)}
                    >
                      {productFavHover ||
                      favouritesProducts.filter(
                        (ele: any) => ele.product_id === item.id
                      ).length > 0 ? (
                        <IoMdHeart className="text-[30px] text-red-600" />
                      ) : (
                        <IoMdHeartEmpty className="text-[30px]" />
                      )}
                    </div>
                  </div>
                </>
              )}

              {item?.requires_prescription === 1 && (
                <div
                  className={`absolute bottom-0 ${
                    locale === "ar" ? "right-0" : "left-0"
                  } flex items-center justify-center gap-1 px-2 py-1 opacity-80 rounded-es-[5px] w-fit h-fit bg-[#FBC43A] text-white`}
                >
                  <Image
                    src={"/images/prescription-icon.svg"}
                    alt="prescription icon"
                    width={18}
                    height={18}
                  />
                  <p className="text-[11px]">{t("prescription")}</p>
                </div>
              )}
            </div>

            {/* Product Info Section - Flexible height */}
            <div className="flex flex-col flex-grow w-full mt-2">
              {/* Product Name */}
              <Tooltip title={item?.name} color="rgba(3,184,158,0.6)" overlayInnerStyle={{ fontSize: 12, padding: "4px 8px" }}>
                <Link
                  href={`/${locale}/products/${(item?.name)
                    .replace(/[^a-zA-Z0-9\u0600-\u06FF]+/g, "-")
                    .replace(/^-+|-+$/g, "")
                    .toLowerCase()}?id=${item.id}`}
                  locale={false}
                  className="text-productNameColor max-w-full block font-sans   line-clamp-2 min-h-[48px]"
                >
                  {item?.name}
                </Link>
              </Tooltip>

              {/* Rating and Favorite */}
              <div className="flex justify-between items-center my-1">
                <div className="flex items-center">
                  <StarRating rating={item.rate_avg ? item.rate_avg : 0} />
                  <span className="mx-1">{item?.rate_avg}</span>
                  <span>({item?.rate_count})</span>
                </div>
                {favouritesProducts?.filter(
                  (ele: any) => ele.product_id === item.id
                ).length > 0 && (
                  <IoMdHeart className="text-[24px] ms-1 text-red-600" />
                )}
              </div>

              {/* Price Section */}
              <div className="flex py-1 mb-2">
                {(Number(item?.offer_price) &&
                  (Number(item?.offer_price) < Number(item?.price))) ? (
                    <div className="flex items-center">
                      <p className="text-secondary ms-2">{item?.offer_price}</p>
                      <span className="inline-block">
                        <Image
                          src={"/images/ryial.svg"}
                          alt="currency icon"
                          width={12}
                          height={12}
                          className="ms-1"
                        />
                      </span>
                    </div>
                  ):null}
                <div className="flex items-center">
                  <p
                    className={`${
                      Number(item?.offer_price) &&
                      Number(item?.offer_price) < Number(item?.price)
                        ? "line-through text-gray-400"
                        : "text-secondary"
                    } ms-2`}
                  >
                    {item?.price}
                  </p>
                  <span className="inline-block">
                    <Image
                      src={"/images/ryial.svg"}
                      alt="currency icon"
                      width={12}
                      height={12}
                      className="ms-1"
                    />
                  </span>
                </div>
              </div>

              {/* Offer Label - Pushed to bottom with mt-auto */}
              {Number(item?.offer_free_quantity) > 0 ? (
                <div className="mt-auto w-fit bg-primary bg-opacity-50 px-2  rounded-[5px]">
                  {offerCalcLabel(
                    item?.price,
                    item?.offer_buy_quantity,
                    item?.offer_free_quantity,
                    item?.offer_discount_type,
                    item?.offer_discount_value
                  )}
                </div>
              ) : null}
            </div>

            {/* Add to Cart Button - Fixed at bottom */}
            <Button
              onClick={() => addToCartFunc(item)}
              disabled={
                cartProducts?.filter((ele: any) => ele === item.id).length > 0
              }
              loading={productId === item?.id && mutation.isPending}
              className={`rounded-[72px] mt-4 ${
                cartProducts?.filter((ele: any) => ele === item.id).length > 0
                  ? "!text-primary"
                  : "!text-secondary"
              } min-h-[44px] !border-none !outline-none bg-[#EDF4F6] p-4 w-full hover:!bg-[#EDF4F6] transition-colors duration-200`}
            >
              <div className="flex items-center justify-center gap-2">
                <CgShoppingCart className="text-[20px]" />
                <p className="font-medium">
                  {cartProducts?.filter((ele: any) => ele === item.id).length >
                  0
                    ? t("added-to-cart")
                    : t("add-to-cart")}
                </p>
              </div>
            </Button>
          </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>
    </>
  );
}