"use client";
import { useTranslations } from "next-intl";
import { Cart5, RS } from "../Icons";
import AppButton from "../buttons/AppButton";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/store/store";
import { UseMutate } from "@/hooks/UseMutate";
import ShowAlertMixin from "../ShowAlertMixin";
import { getAllCartItems } from "@/store/cart.slice";
import LocalePath from "../LocalePath";
import { useEffect, useState } from "react";
import { products } from "@/interfaces/types";
import MediaWithFallback from "../MediaWithFallback";
import {
  WhatsappShareButton,
  FacebookShareButton,
  InstapaperShareButton,
  TwitterShareButton,
} from "next-share";
export default function ProductCard({ product }: { product: products }) {
  const t = useTranslations();
  const [shareUrl, setShareUrl] = useState("");
  const dispatch = useDispatch<AppDispatch>();
  const [modalOpen, setModalOpen] = useState(false);
  const { mutate, isLoading: addToCartLoading } = UseMutate({
    endpoint: "client/carts/add",
    onSuccess: (responseData: any) => {
      ShowAlertMixin({
        icon: "success",
        title: responseData?.message,
      });
      dispatch(getAllCartItems());
    },
  });
  const handleaddToCart = async (product: any) => {
    const finalOut = {
      amount: 1,
      product_id: product?.id,
    };
    mutate({ ...finalOut });
  };
  useEffect(() => {
    if (typeof window !== "undefined") {
      setShareUrl(new URL(window.location.href).toString());
    }
  }, []);
  if (!product) return null;
  return (
    <div
      key={`book_${product?.id}`}
      className="bg-white rounded-3xl overflow-hidden cursor-pointer group relative h-full flex flex-col"
    >
      <div className="absolute top-4 left-4 z-50">
        <button
          onClick={() => setModalOpen(!modalOpen)}
          className="cursor-pointer w-11 h-11 rounded-full flex items-center justify-center bg-white/95 backdrop-blur-sm shadow-xl group-hover:opacity-100 opacity-0 transition-opacity duration-300"
        >
          {!modalOpen ? (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-share2 lucide-share-2 *:stroke-primary"
            >
              <circle cx="18" cy="5" r="3"></circle>
              <circle cx="6" cy="12" r="3"></circle>
              <circle cx="18" cy="19" r="3"></circle>
              <line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
              <line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
            </svg>
          ) : (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-x *:stroke-text-secondary"
            >
              <path d="M18 6 6 18"></path>
              <path d="m6 6 12 12"></path>
            </svg>
          )}
        </button>
        {modalOpen && (
          <>
            <div
              className="fixed inset-0 z-40"
              onClick={() => setModalOpen(false)}
            />
            <div className="flex flex-col gap-1 absolute top-12 left-0 bg-white/98 backdrop-blur-md rounded-2xl shadow-2xl p-3 z-[60] min-w-[220px] border-2 border-primary/10 animate-in fade-in-0 zoom-in-95 duration-200">
              <WhatsappShareButton url={shareUrl} title={product?.name}>
                <div className="w-48 flex items-center gap-3 px-5 py-4 rounded-xl hover:bg-gradient-to-r hover:from-green-50 hover:to-green-100 transition-all duration-200">
                  <span className="text-2xl">💬</span>
                  <span className="text-base text-text-primary">
                    {t("Text.whatsapp")}
                  </span>
                </div>
              </WhatsappShareButton>
              <TwitterShareButton url={shareUrl} title={product?.name}>
                <div className="w-48 bg-accent flex items-center gap-3 px-5 py-4 rounded-xl hover:bg-gradient-to-r hover:from-pink-50 hover:to-purple-100 transition-all duration-200">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-twitter text-text-primary"
                  >
                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                  </svg>
                  <span className="text-base text-text-primary">
                    {t("Text.twitter")}
                  </span>
                </div>
              </TwitterShareButton>
              <FacebookShareButton url={shareUrl} title={product?.name}>
                <div className="w-48 flex items-center gap-3 px-5 py-4 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-blue-100 transition-all duration-200">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-facebook text-text-primary"
                  >
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                  </svg>
                  <span className="text-base text-text-primary">
                    {t("Text.facebook")}
                  </span>
                </div>
              </FacebookShareButton>

              <div className="my-2 border-t border-gray-200"></div>
              <button
                onClick={() => {
                  navigator.clipboard.writeText(window.location.href);
                  setModalOpen(false);
                  ShowAlertMixin({
                    icon: "success",
                    title: t("copied_successfully"),
                    duration: 2000,
                  });
                }}
                className="w-full flex items-center gap-3 px-5 py-4 rounded-xl hover:bg-gradient-to-r hover:from-primary hover:to-secondary transition-all duration-200"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-link text-text-primary"
                >
                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                </svg>
                <span className="text-base text-text-primary">
                  {t("Text.copy_link")}
                </span>
              </button>
            </div>
          </>
        )}
      </div>
      <div className="relative overflow-hidden aspect-square bg-primary">
        <LocalePath href={`/products/${product?.id}`} className="relative z-40">
          <MediaWithFallback
            src={product?.image}
            alt={product?.name}
            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
          />
        </LocalePath>
        <div
          className="absolute inset-0 bg-gradient-to-t from-primary/20 via-transparent to-transparent"
          style={{ opacity: 0.2 }}
        ></div>
        <div className="absolute bottom-0 left-0 right-0 p-4 z-40">
          <h3 className="text-white text-lg drop-shadow-lg">{product?.name}</h3>
        </div>
      </div>
      <div className="p-6 bg-gradient-to-b from-white to-[#FEFBF9]">
        <div className="mb-3 flex items-center gap-2">
          <RS className="*:fill-text-primary" />
          <span className="text-text-primary text-2xl tracking-tight">
            {product?.price}
          </span>
        </div>
        <div className="mb-4">
          <span className="inline-block px-3 py-1 bg-gradient-to-r from-primary/10 to-secondary/10 text-primary text-xs rounded-full border border-primary/20">
            {product?.category?.name}
          </span>
        </div>
        <AppButton
          onClick={() => handleaddToCart(product)}
          title={t("BUTTONS.addToCart")}
          buttonType="button"
          loader={addToCartLoading}
          disabled={addToCartLoading}
          button
          className=" !w-full !h-[56px] !rounded-xl lg:!mt-[20px] !mt-[10px] !font-medium !text-base"
          rightIcon={<Cart5 className="size-6" />}
        />
      </div>
    </div>
  );
}