import { Tooltip } from "antd";
import { Fragment } from "react";
import { FaCoins } from "react-icons/fa";
import { FaMoneyBills } from "react-icons/fa6";
import { MdInventory2, MdOutlineInventory2 } from "react-icons/md";
import { abbreviateNumber } from "../../utils/nFormetter";
import useCurrency from "../../utils/useCurrency";
import { Link } from "react-router-dom";

export default function ProductCard({ card }) {
  const currency = useCurrency();
  return (
    <Fragment>
      <section className="grid sm:grid-cols-2 xl:grid-cols-4 gap-6 mt-5 mb-5">
        {/* Unique Product Card */}
        <div className="relative overflow-hidden rounded-2xl p-6 text-white bg-gradient-to-br from-blue-500 to-blue-700 shadow-lg">
          <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm rounded-xl p-3">
            <MdInventory2 size={28} className="text-white" />
          </div>
          <div className="relative">
            <h3 className="text-sm font-semibold uppercase tracking-wide mb-2 opacity-90">
              Unique Product
            </h3>
            <Tooltip
              title={<span className="text-lg">{card?.uniqueProduct}</span>}
            >
              <p className="text-4xl font-bold mb-1">
                {card?.uniqueProduct
                  ? abbreviateNumber(card?.uniqueProduct)
                  : 0}
              </p>
            </Tooltip>
          </div>
        </div>

        {/* Inventory Sale Value Card */}
        <div className="relative overflow-hidden rounded-2xl p-6 text-white bg-gradient-to-br from-purple-500 to-pink-600 shadow-lg">
          <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm rounded-xl p-3">
            <FaCoins size={28} className="text-white" />
          </div>
          <div className="relative">
            <h3 className="text-sm font-semibold uppercase tracking-wide mb-2 opacity-90">
              Inventory Sale Value
            </h3>
            <Tooltip
              title={
                <span className="text-lg">
                  <span
                    dangerouslySetInnerHTML={{
                      __html: currency?.currencySymbol,
                    }}
                  />
                  {card?.inventorySalesValue.toFixed(3)}
                </span>
              }
            >
              <p className="text-4xl font-bold mb-1">
                <span
                  dangerouslySetInnerHTML={{
                    __html: currency?.currencySymbol,
                  }}
                />
                {card?.inventorySalesValue
                  ? abbreviateNumber(Number(card.inventorySalesValue))
                  : 0}
              </p>
            </Tooltip>
          </div>
        </div>

        {/* Inventory Purchase Value Card */}
        <div className="relative overflow-hidden rounded-2xl p-6 text-white bg-gradient-to-br from-green-500 to-teal-600 shadow-lg">
          <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm rounded-xl p-3">
            <FaMoneyBills size={28} className="text-white" />
          </div>
          <div className="relative">
            <h3 className="text-sm font-semibold uppercase tracking-wide mb-2 opacity-90">
              Inventory Purchase 
            </h3>
            <Tooltip
              title={
                <span className="text-lg">
                  <span
                    dangerouslySetInnerHTML={{
                      __html: currency?.currencySymbol,
                    }}
                  />
                  {card?.inventoryPurchaseValue.toFixed(3)}
                </span>
              }
            >
              <p className="text-4xl font-bold mb-1">
                <span
                  dangerouslySetInnerHTML={{
                    __html: currency?.currencySymbol,
                  }}
                />
                {card?.inventoryPurchaseValue
                  ? abbreviateNumber(Number(card.inventoryPurchaseValue))
                  : 0}
              </p>
            </Tooltip>
          </div>
        </div>

        {/* Short Product Card */}
        <Link to="/admin/product-sort-list" className="block">
          <div className="relative overflow-hidden rounded-2xl p-6 text-white bg-gradient-to-br from-orange-500 to-orange-700 shadow-lg hover:shadow-xl transition-shadow">
            <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm rounded-xl p-3">
              <MdOutlineInventory2 size={28} className="text-white" />
            </div>
            <div className="relative">
              <h3 className="text-sm font-semibold uppercase tracking-wide mb-2 opacity-90">
                Short Product
              </h3>
              <Tooltip
                title={
                  <span className="text-lg">{card?.shortProductCount}</span>
                }
              >
                <p className="text-4xl font-bold mb-1">
                  {card?.shortProductCount
                    ? abbreviateNumber(card?.shortProductCount)
                    : 0}
                </p>
              </Tooltip>
              
            </div>
          </div>
        </Link>
      </section>
    </Fragment>
  );
}
