import { MessageCircle } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { useRouter } from "next/navigation";
import { toast } from "react-toastify";
import { removeFromWishlistThunk } from "@/app/store/slices/wishlistSlice";
import { useTranslations } from "next-intl";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import ChatButton from "./chat/ChatButton";
import { RootState } from "@/app/store/store";
import { intializeChat } from "@/lib/actions/chatActions";
import { getImageUrl } from "@/hooks/useImageUrl";
import { AttributeKeys, OtherAttribute } from "../../types/common-types";

interface WishlistCardProps {
  product: {
    productId: string;
    title: string;
    price: string | number | null;
    file_url: string | null;
    distance: number;
    views: number;
    otherAttribute:
      | OtherAttribute<"mobile_number">
      | OtherAttribute<"vehicle_number_plate">
      | null;
    productType: "product" | AttributeKeys;
    creator: {
      first_name: string;
      last_name: string;
      _id: string;
      profile_image: string | null;
    } | null;
  };
  onRemove?: (productId: string) => void;
}

export default function WishlistCard({ product, onRemove }: WishlistCardProps) {
  const t = useTranslations();
  const { token } = useAppSelector((state) => state.auth.user || {});
  const dispatch = useAppDispatch();
  const router = useRouter();
  const [isRemoving, setIsRemoving] = useState(false);
  const [imageError, setImageError] = useState(false);
  const { user } = useAppSelector((state: RootState) => state.auth);
  const handleRemoveFromWishlist = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    setIsRemoving(true);
    try {
      if (onRemove) {
        onRemove(product.productId);
      }
      toast.success(t("wishlist_page.wishlist_remove_success"));

      try {
        await dispatch(
          removeFromWishlistThunk({
            productId: product.productId,
            token: token || null,
          }),
        );
      } catch (error: any) {
        if (token && checkAuthErrorGet(error, dispatch, router)) return;
        toast.error(t("wishlist_page.wishlist_remove_error"));
      }
    } catch (error: any) {
      if (token && checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(t("wishlist_page.wishlist_remove_error"));
    } finally {
      setIsRemoving(false);
    }
  };
  const { productId, title, price, file_url, distance, creator } = product;
  const creatorName = creator
    ? `${creator.first_name} ${creator.last_name}`.trim()
    : t("product_page.user");

  const handleCardClick = (e: React.MouseEvent) => {
    const target = e.target as HTMLElement;
    if (target.closest('button[aria-label="Remove from wishlist"]')) {
      return;
    }
    router.push(`/products/${productId}`);
  };
  const [errorInput, setErrorInput] = useState<boolean>(false);
  const handleChat = async (data: any, makeAnOffer: boolean = false) => {
    try {
      const { initialOffer, text } = data;

      if (makeAnOffer) {
        if (!text || Number(initialOffer) === 0) {
          setErrorInput(true);
          return;
        }
      }
      const imagePath =
        product.file_url || product?.creator?.profile_image || "";

      const payload = {
        initialOffer: Number(initialOffer),
        initialMessage: text,
        productId: product.productId,
        buyer: user.id,
        seller: product?.creator?._id || "",
        productSnapshot: {
          title: product.title,
          price: Number(product.price),
          image: `${imagePath}`,
        },
      };

      await intializeChat(user.token, payload);
      router.push(`/chat?id=${product.productId}`);
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;

      const errorMsg =
        error?.response?.data?.message || t("validation.error_msg");
      toast.error(errorMsg);
    } finally {
      // setIsLoading(false);
    }
  };

  if (product.otherAttribute && product.productType === "mobile_number") {
    const mobileAttr =
      product.otherAttribute as OtherAttribute<"mobile_number">;
    return (
      <div className="bg-white rounded-[8px] overflow-hidden border border-primary200 sm:border-neutrals100 hover:border-primary200 hover:shadow-Shadow3 transition-all relative p-0 block h-full dark:bg-card dark:border-darkborder">
        <div className="w-full relative">
          <img
            src={getImageUrl(mobileAttr?.content[0]?.cardImage)}
            alt={title}
            onError={(e) => {
              e.currentTarget.onerror = null;
              e.currentTarget.src = "/default.jpg";
            }}
            className="!w-full !h-[214px] object-cover max-lg:!h-[248px] max-[1600px]:!h-[187px] max-[1539px]:!h-[193px] max-[1535px]:!h-[224px] max-[1441px]:!h-[200px] max-[1325px]:!h-[199px] max-[1279px]:!h-[318px] max-[1200px]:!h-[260px] max-[991px]:!h-[240px] max-[945px]:!h-[222px] max-[850px]:!h-[200px] max-[800px]:!h-[185px] max-md:!h-[290px] max-[728px]:!h-[260px] max-[660px]:!h-[230px] max-[600px]:!h-[430px] max-sm:!h-[360px] max-[490px]:!h-[330px] max-[450px]:!h-[300px] max-[415px]:!h-[280px] max-[390px]:!h-[251px] max-[370px]:!h-[210px]"
          />

          <button
            className="absolute top-2 left-auto right-2.5 bg-white bg-opacity-80 rounded-lg flex items-center justify-center h-8 w-8 rtl:sm:left-2.5 rtl:sm:right-auto rtl:right-2.5 rtl:left-auto shadow-sm"
            onClick={handleRemoveFromWishlist}
            disabled={isRemoving}
            aria-label="Remove from wishlist"
          >
            <svg
              width="14"
              height="14"
              viewBox="0 0 14 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
                fill="#04196C"
              />
            </svg>
          </button>
        </div>
        <div className="pt-2 px-4 pb-11 flex-1">
          <div className="flex flex-col justify-between h-full pb-0.5">
            <div>
              <div className="hidden sm:flex items-center justify-between mb-2.5">
                <div className="flex items-center gap-1 text-sm text-primary800">
                  <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center">
                    <img
                      src="/noto_fire.svg"
                      alt="noto_fire"
                      width={18}
                      height={18}
                    />
                  </div>
                  <span className="text-neutrals900 text-sm flex items-center gap-1 dark:text-neutrals100">
                    {product.views}
                  </span>
                </div>
                <div className="text-neutrals900 text-sm flex items-center gap-1 dark:text-white">
                  {creator?.profile_image && !imageError ? (
                    <div className="rounded-full h-5 w-5 overflow-hidden">
                      <img
                        src={creator.profile_image}
                        alt="Profile"
                        width={20}
                        height={20}
                        className="w-full h-full object-cover"
                        onError={() => setImageError(true)}
                      />
                    </div>
                  ) : (
                    <div className="rounded-full h-5 w-5 bg-primary100 flex items-center justify-center text-xs font-medium text-white bg-primary400 dark:bg-primary400">
                      {creator?.first_name?.charAt(0) || "U"}
                    </div>
                  )}
                  <div>{creatorName || t("product_page.user")}</div>
                </div>
              </div>
              <h3 className="font-bold text-base text-neutrals800 dark:text-white mb-2 sm:text-sm sm:mb-1">
                <Link href={`/products/${productId}`} className="line-clamp-2">
                  {title}
                </Link>
              </h3>
              <p className="text-primary500 font-bold text-lg mb-3 sm:text-base sm:mt-1 sm:mb-2.5 dark:text-neutrals400">
                {process.env.NEXT_PUBLIC_CURRENCY_TYPE}{" "}
                {price ? `${price}` : t("product_page.price_on_request")}
              </p>
            </div>
            <div className="flex items-center gap-2.5 my-2.5 max-sm:mt-0">
              <ChatButton
                userId={user?.id || ""}
                productOwnerId={product?.creator?._id || ""}
                onChat={handleChat}
                t={t}
              />
            </div>
          </div>

          <div className="absolute bottom-3 left-3 w-[calc(100%-24px)] sm:w-[calc(100%-32px)] sm:bottom-3 sm:left-4 flex items-center justify-between border-t border-neutrals100 pt-2 dark:border-darkborder">
            <div className="flex sm:hidden items-center gap-2 text-sm text-neutrals800 dark:text-white">
              <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center dark:bg-darkbg">
                <img
                  src="/noto_fire.svg"
                  alt="noto_fire"
                  width={18}
                  height={18}
                />
              </div>
              <span className="font-medium">3</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-neutrals800 dark:bg-darkbg dark:text-neutrals400 sm:gap-1">
              <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center dark:bg-darkbg">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M3.375 6.50391C3.375 3.50906 5.92109 1.125 9 1.125C12.0789 1.125 14.625 3.50906 14.625 6.50391C14.625 8.19227 13.7121 10.2811 12.7122 12.0867C11.6966 13.9204 10.5268 15.5723 9.90029 16.4184C9.79701 16.5591 9.66219 16.6736 9.50663 16.7528C9.34969 16.8326 9.17609 16.8743 9 16.8743C8.82391 16.8743 8.65031 16.8326 8.49337 16.7528C8.33721 16.6733 8.20196 16.5582 8.09853 16.4168C7.47171 15.5699 6.30281 13.9183 5.28782 12.0854C4.28789 10.2798 3.375 8.19107 3.375 6.50391ZM9 2.25C6.48906 2.25 4.5 4.18242 4.5 6.50391C4.5 7.87534 5.27461 9.73939 6.27199 11.5404C7.25166 13.3095 8.38638 14.9145 9 15.7437C9.61359 14.9149 10.7483 13.3104 11.728 11.5416C12.7254 9.74087 13.5 7.8766 13.5 6.50391C13.5 4.18242 11.5109 2.25 9 2.25Z"
                    fill="currentColor"
                  />
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M9 5.625C8.37868 5.625 7.875 6.12868 7.875 6.75C7.875 7.37132 8.37868 7.875 9 7.875C9.62132 7.875 10.125 7.37132 10.125 6.75C10.125 6.12868 9.62132 5.625 9 5.625ZM6.75 6.75C6.75 5.50736 7.75736 4.5 9 4.5C10.2426 4.5 11.25 5.50736 11.25 6.75C11.25 7.99264 10.2426 9 9 9C7.75736 9 6.75 7.99264 6.75 6.75Z"
                    fill="currentColor"
                  />
                </svg>
              </div>
              <span className="font-medium">
                {distance
                  ? `${distance} ${t("product_page.km_away")}`
                  : t("product_page.location_not_available")}
              </span>
            </div>
            <div className="text-primary900 sm:hidden text-sm flex items-center gap-2 dark:text-white">
              {creator?.profile_image && !imageError ? (
                <div className="rounded-full h-5 w-5 overflow-hidden">
                  <img
                    src={creator.profile_image}
                    alt="Profile"
                    width={20}
                    height={20}
                    className="w-full h-full object-cover"
                    onError={() => setImageError(true)}
                  />
                </div>
              ) : (
                <div className="rounded-full h-6 w-6 bg-primary100 flex items-center justify-center text-xs font-medium text-white bg-primary400 dark:bg-primary400">
                  {creator?.first_name?.charAt(0) || "U"}
                </div>
              )}
              <span className="font-medium">{creatorName}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (
    product.otherAttribute &&
    product.productType === "vehicle_number_plate"
  ) {
    const vehicleAttr =
      product.otherAttribute as OtherAttribute<"vehicle_number_plate">;
    return (
      <div className="bg-white rounded-[24px_24px_8px_8px] overflow-hidden border border-primary200 sm:border-neutrals100 hover:border-primary200 hover:shadow-Shadow3 transition-all relative p-2.5 pt-0 pb-12 sm:p-0 flex sm:block h-full dark:bg-card dark:border-darkborder">
        <div className="w-full relative">
          <img
            src={getImageUrl(vehicleAttr?.content[0]?.cardImage)}
            alt={title}
            onError={(e) => {
              e.currentTarget.onerror = null;
              e.currentTarget.src = "/default.jpg";
            }}
            className="w-full h-[180px] object-contain object-center p-1"
          />
          <button
            className="absolute top-2 left-2 right-auto sm:left-auto sm:right-2.5 bg-white bg-opacity-80 rounded-lg flex items-center justify-center h-8 w-8 rtl:sm:left-2.5 rtl:sm:right-auto rtl:right-2.5 rtl:left-auto shadow-sm"
            onClick={handleRemoveFromWishlist}
            disabled={isRemoving}
            aria-label="Remove from wishlist"
          >
            <svg
              width="14"
              height="14"
              viewBox="0 0 14 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
                fill="#04196C"
              />
            </svg>
          </button>
        </div>
        <div className="ps-2 sm:pt-2 sm:px-4 sm:pb-11 flex-1">
          <div className="flex flex-col justify-between h-full pb-0.5">
            <div>
              <div className="hidden sm:flex items-center justify-between mb-2.5">
                <div className="flex items-center gap-1 text-sm text-primary800">
                  <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center">
                    <img
                      src="/noto_fire.svg"
                      alt="noto_fire"
                      width={18}
                      height={18}
                    />
                  </div>
                  <span className="text-neutrals900 text-sm flex items-center gap-1 dark:text-neutrals100">
                    {product.views}
                  </span>
                </div>
                <div className="text-neutrals900 text-sm flex items-center gap-1 dark:text-white">
                  {creator?.profile_image && !imageError ? (
                    <div className="rounded-full h-5 w-5 overflow-hidden">
                      <img
                        src={creator.profile_image}
                        alt="Profile"
                        width={20}
                        height={20}
                        className="w-full h-full object-cover"
                        onError={() => setImageError(true)}
                      />
                    </div>
                  ) : (
                    <div className="rounded-full h-5 w-5 bg-primary100 flex items-center justify-center text-xs font-medium text-white bg-primary400 dark:bg-primary400">
                      {creator?.first_name?.charAt(0) || "U"}
                    </div>
                  )}
                  <div>{creatorName || t("product_page.user")}</div>
                </div>
              </div>
              <h3 className="font-bold text-base text-neutrals800 dark:text-white mb-2 sm:text-sm sm:mb-1">
                <Link href={`/products/${productId}`} className="line-clamp-2">
                  {title}
                </Link>
              </h3>
              <p className="text-primary500 font-bold text-lg mb-3 sm:text-base sm:mt-1 sm:mb-2.5 dark:text-neutrals400">
                {process.env.NEXT_PUBLIC_CURRENCY_TYPE}{" "}
                {price ? `${price}` : t("product_page.price_on_request")}
              </p>
            </div>
            <div className="flex items-center gap-3 sm:gap-2.5 sm:my-2.5">
              <ChatButton
                userId={user?.id || ""}
                productOwnerId={product?.creator?._id || ""}
                onChat={handleChat}
                t={t}
              />
            </div>
          </div>

          <div className="absolute bottom-3 left-3 w-[calc(100%-24px)] sm:w-[calc(100%-32px)] sm:bottom-3 sm:left-4 flex items-center justify-between border-t border-neutrals100 pt-2 dark:border-darkborder">
            <div className="flex sm:hidden items-center gap-2 text-sm text-neutrals800 dark:text-white">
              <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center dark:bg-darkbg">
                <img
                  src="/noto_fire.svg"
                  alt="noto_fire"
                  width={18}
                  height={18}
                />
              </div>
              <span className="font-medium">3</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-neutrals800 dark:bg-darkbg dark:text-neutrals400 sm:gap-1">
              <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center dark:bg-darkbg">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M3.375 6.50391C3.375 3.50906 5.92109 1.125 9 1.125C12.0789 1.125 14.625 3.50906 14.625 6.50391C14.625 8.19227 13.7121 10.2811 12.7122 12.0867C11.6966 13.9204 10.5268 15.5723 9.90029 16.4184C9.79701 16.5591 9.66219 16.6736 9.50663 16.7528C9.34969 16.8326 9.17609 16.8743 9 16.8743C8.82391 16.8743 8.65031 16.8326 8.49337 16.7528C8.33721 16.6733 8.20196 16.5582 8.09853 16.4168C7.47171 15.5699 6.30281 13.9183 5.28782 12.0854C4.28789 10.2798 3.375 8.19107 3.375 6.50391ZM9 2.25C6.48906 2.25 4.5 4.18242 4.5 6.50391C4.5 7.87534 5.27461 9.73939 6.27199 11.5404C7.25166 13.3095 8.38638 14.9145 9 15.7437C9.61359 14.9149 10.7483 13.3104 11.728 11.5416C12.7254 9.74087 13.5 7.8766 13.5 6.50391C13.5 4.18242 11.5109 2.25 9 2.25Z"
                    fill="currentColor"
                  />
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M9 5.625C8.37868 5.625 7.875 6.12868 7.875 6.75C7.875 7.37132 8.37868 7.875 9 7.875C9.62132 7.875 10.125 7.37132 10.125 6.75C10.125 6.12868 9.62132 5.625 9 5.625ZM6.75 6.75C6.75 5.50736 7.75736 4.5 9 4.5C10.2426 4.5 11.25 5.50736 11.25 6.75C11.25 7.99264 10.2426 9 9 9C7.75736 9 6.75 7.99264 6.75 6.75Z"
                    fill="currentColor"
                  />
                </svg>
              </div>
              <span className="font-medium">
                {distance
                  ? `${distance} ${t("product_page.km_away")}`
                  : t("product_page.location_not_available")}
              </span>
            </div>
            <div className="text-primary900 sm:hidden text-sm flex items-center gap-2 dark:text-white">
              {creator?.profile_image && !imageError ? (
                <div className="rounded-full h-5 w-5 overflow-hidden">
                  <img
                    src={creator.profile_image}
                    alt="Profile"
                    width={20}
                    height={20}
                    className="w-full h-full object-cover"
                    onError={() => setImageError(true)}
                  />
                </div>
              ) : (
                <div className="rounded-full h-6 w-6 bg-primary100 flex items-center justify-center text-xs font-medium text-white bg-primary400 dark:bg-primary400">
                  {creator?.first_name?.charAt(0) || "U"}
                </div>
              )}
              <span className="font-medium">{creatorName}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      onClick={handleCardClick}
      className="group bg-white rounded-lg overflow-hidden border border-primary200 sm:border-neutrals100 hover:border-primary200 hover:shadow-Shadow3 transition-all relative p-3 pb-[50px] sm:p-0 flex sm:block h-full dark:bg-card dark:border-darkborder cursor-pointer"
    >
      <div className="relative min-w-40 sm:min-w-0 overflow-hidden rounded-lg sm:rounded-none">
        <img
          src={file_url || "/placeholder-product.jpg"}
          alt={title}
          width={407}
          height={149}
          onError={(e) => {
            e.currentTarget.onerror = null;
            e.currentTarget.src = "/default.jpg";
          }}
          className="!w-full !h-[214px] object-cover max-lg:!h-[248px] max-[1600px]:!h-[187px] max-[1539px]:!h-[193px] max-[1535px]:!h-[224px] max-[1441px]:!h-[200px] max-[1325px]:!h-[199px] max-[1279px]:!h-[318px] max-[1200px]:!h-[260px] max-[991px]:!h-[240px] max-[945px]:!h-[222px] max-[850px]:!h-[200px] max-[800px]:!h-[185px] max-md:!h-[290px] max-[728px]:!h-[260px] max-[660px]:!h-[230px] max-[600px]:!h-[430px] max-sm:!h-[360px] max-[490px]:!h-[330px] max-[450px]:!h-[300px] max-[415px]:!h-[280px] max-[390px]:!h-[251px] max-[370px]:!h-[210px]"
        />
        <button
          className="absolute top-2 left-2 right-auto sm:left-auto sm:right-2.5 bg-white bg-opacity-80 rounded-lg flex items-center justify-center h-8 w-8 rtl:sm:left-2.5 rtl:sm:right-auto rtl:right-2.5 rtl:left-auto shadow-sm"
          onClick={handleRemoveFromWishlist}
          disabled={isRemoving}
          aria-label="Remove from wishlist"
        >
          <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
              fill="#04196C"
            />
          </svg>
        </button>
      </div>
      <div className="ps-2 sm:pt-2 sm:px-4 sm:pb-11 flex-1">
        <div className="flex flex-col justify-between h-full pb-0.5">
          <div>
            <div className="hidden sm:flex items-center justify-between mb-2.5">
              <div className="flex items-center gap-1 text-sm text-primary800">
                <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center">
                  <img
                    src="/noto_fire.svg"
                    alt="noto_fire"
                    width={18}
                    height={18}
                  />
                </div>
                <span className="text-neutrals900 text-sm flex items-center gap-1 dark:text-neutrals100">
                  {product.views}
                </span>
              </div>
              <div className="text-neutrals900 text-sm flex items-center gap-1 dark:text-white">
                {creator?.profile_image && !imageError ? (
                  <div className="rounded-full h-5 w-5 overflow-hidden">
                    <img
                      src={creator.profile_image}
                      alt="Profile"
                      width={20}
                      height={20}
                      className="w-full h-full object-cover"
                      onError={() => setImageError(true)}
                    />
                  </div>
                ) : (
                  <div className="rounded-full h-5 w-5 bg-primary100 flex items-center justify-center text-xs font-medium text-white bg-primary400 dark:bg-primary400">
                    {creator?.first_name?.charAt(0) || "U"}
                  </div>
                )}
                <div>{creatorName || t("product_page.user")}</div>
              </div>
            </div>
            <h3 className="font-bold text-base text-neutrals800 dark:text-white mb-2 sm:text-sm sm:mb-1">
              <Link href={`/products/${productId}`} className="line-clamp-2">
                {title}
              </Link>
            </h3>
            <p className="text-primary500 font-bold text-lg mb-3 sm:text-base sm:mt-1 sm:mb-2.5 dark:text-neutrals400">
              {process.env.NEXT_PUBLIC_CURRENCY_TYPE}{" "}
              {price ? `${price}` : t("product_page.price_on_request")}
            </p>
          </div>
          <div className="flex items-center gap-3 sm:gap-2.5 sm:my-2.5">
            {/* <button className="w-10 h-10 bg-primary500 rounded-lg flex items-center justify-center dark:bg-primary400 sm:w-11 sm:h-11">
              <MessageCircle className="text-white w-6 h-6" />
            </button>
            <button className="flex-1 h-10 border border-primary500 rounded-lg text-primary500 hover:bg-primary500 hover:text-white font-medium text-base transition-all dark:text-primary400 dark:border-primary400 dark:hover:bg-primary400 dark:hover:text-white sm:h-11 sm:font-normal">
              {t("product_page.make_an_offer")}
            </button> */}
            <ChatButton
              userId={user?.id || ""}
              productOwnerId={product?.creator?._id || ""}
              onChat={handleChat}
              t={t}
            />
          </div>
        </div>

        <div className="absolute bottom-3 left-3 w-[calc(100%-24px)] sm:w-[calc(100%-32px)] sm:bottom-3 sm:left-4 flex items-center justify-between border-t border-neutrals100 pt-2 dark:border-darkborder">
          <div className="flex sm:hidden items-center gap-2 text-sm text-neutrals800 dark:text-white">
            <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center dark:bg-darkbg">
              <img
                src="/noto_fire.svg"
                alt="noto_fire"
                width={18}
                height={18}
              />
            </div>
            <span className="font-medium">3</span>
          </div>
          <div className="flex items-center gap-2 text-sm text-neutrals800 dark:bg-darkbg dark:text-neutrals400 sm:gap-1">
            <div className="w-6 h-6 min-w-6 bg-neutrals50 rounded flex items-center justify-center dark:bg-darkbg">
              <svg
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M3.375 6.50391C3.375 3.50906 5.92109 1.125 9 1.125C12.0789 1.125 14.625 3.50906 14.625 6.50391C14.625 8.19227 13.7121 10.2811 12.7122 12.0867C11.6966 13.9204 10.5268 15.5723 9.90029 16.4184C9.79701 16.5591 9.66219 16.6736 9.50663 16.7528C9.34969 16.8326 9.17609 16.8743 9 16.8743C8.82391 16.8743 8.65031 16.8326 8.49337 16.7528C8.33721 16.6733 8.20196 16.5582 8.09853 16.4168C7.47171 15.5699 6.30281 13.9183 5.28782 12.0854C4.28789 10.2798 3.375 8.19107 3.375 6.50391ZM9 2.25C6.48906 2.25 4.5 4.18242 4.5 6.50391C4.5 7.87534 5.27461 9.73939 6.27199 11.5404C7.25166 13.3095 8.38638 14.9145 9 15.7437C9.61359 14.9149 10.7483 13.3104 11.728 11.5416C12.7254 9.74087 13.5 7.8766 13.5 6.50391C13.5 4.18242 11.5109 2.25 9 2.25Z"
                  fill="currentColor"
                />
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M9 5.625C8.37868 5.625 7.875 6.12868 7.875 6.75C7.875 7.37132 8.37868 7.875 9 7.875C9.62132 7.875 10.125 7.37132 10.125 6.75C10.125 6.12868 9.62132 5.625 9 5.625ZM6.75 6.75C6.75 5.50736 7.75736 4.5 9 4.5C10.2426 4.5 11.25 5.50736 11.25 6.75C11.25 7.99264 10.2426 9 9 9C7.75736 9 6.75 7.99264 6.75 6.75Z"
                  fill="currentColor"
                />
              </svg>
            </div>
            <span className="font-medium">
              {distance
                ? `${distance} ${t("product_page.km_away")}`
                : t("product_page.location_not_available")}
            </span>
          </div>
          <div className="text-primary900 sm:hidden text-sm flex items-center gap-2 dark:text-white">
            {creator?.profile_image && !imageError ? (
              <div className="rounded-full h-5 w-5 overflow-hidden">
                <img
                  src={creator.profile_image}
                  alt="Profile"
                  width={20}
                  height={20}
                  className="w-full h-full object-cover"
                  onError={() => setImageError(true)}
                />
              </div>
            ) : (
              <div className="rounded-full h-6 w-6 bg-primary100 flex items-center justify-center text-xs font-medium text-white bg-primary400 dark:bg-primary400">
                {creator?.first_name?.charAt(0) || "U"}
              </div>
            )}
            <span className="font-medium">{creatorName}</span>
          </div>
        </div>
      </div>
    </div>
  );
}