import { Tooltip } from "antd";
import { BiCartAdd, BiCartDownload } from "react-icons/bi";
import { FaMoneyBills } from "react-icons/fa6";
import { MdPointOfSale, MdTrendingUp } from "react-icons/md";
import { abbreviateNumber } from "../../../utils/nFormetter";
import useCurrency from "../../../utils/useCurrency";

const NewDashboardCard = ({ information }) => {
  const currency = useCurrency();
  
  // Get current month name
  const currentMonth = new Date().toLocaleString('default', { month: 'long' });

  // Dashboard cards configuration
  const dashboardCards = [
    {
      id: 'total-sales',
      title: 'Total Sales',
      amount: information?.totalSaleAmount,
      count: information?.totalSaleInvoice,
      subtitle: 'Overall Sales',
      icon: MdPointOfSale,
      gradient: 'from-blue-500 via-blue-600 to-indigo-700',
      showCount: true
    },
    {
      id: 'sale-due',
      title: 'Total Sale Due',
      amount: information?.totalSaleDue,
      subtitle: 'Pending Payments',
      icon: FaMoneyBills,
      gradient: 'from-purple-500 to-rose-600',
      showCount: false
    },
    {
      id: 'total-purchases',
      title: 'Total Purchases',
      amount: information?.totalPurchaseAmount,
      count: information?.totalPurchaseInvoice,
      subtitle: 'Total Spending',
      icon: BiCartDownload,
      gradient: 'from-emerald-500 via-teal-500 to-cyan-600',
      showCount: true
    },
    {
      id: 'purchase-due',
      title: 'Total Purchase Due',
      amount: information?.totalPurchaseDue,
      subtitle: 'Outstanding Payables',
      icon: FaMoneyBills,
      gradient: 'from-orange-500 via-amber-500 to-yellow-500',
      showCount: false
    }
  ];

  return (
    <section className="grid sm:grid-cols-2 xl:grid-cols-4 gap-6 mt-5 mb-5">
      {dashboardCards.map((card) => {
        const IconComponent = card.icon;
        
        return (
          <div 
            key={card.id}
            className={`group relative overflow-hidden bg-gradient-to-br ${card.gradient} rounded-3xl shadow-xl hover:shadow-1xl transition-all duration-500 transform hover:-translate-y-2`}
          >
            {/* Animated Background Elements */}
            <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20 group-hover:scale-150 transition-transform duration-700"></div>
            <div className="absolute bottom-0 left-0 w-32 h-32 bg-white/5 rounded-full -ml-16 -mb-16 group-hover:scale-125 transition-transform duration-700"></div>
            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            
            {/* Sparkle Effect */}
            <div className="absolute top-4 right-4 w-2 h-2 bg-white rounded-full animate-pulse"></div>
            <div className="absolute top-8 right-12 w-1 h-1 bg-white/70 rounded-full animate-pulse delay-300"></div>
            
            <div className="p-6 relative z-10 flex flex-col justify-between h-full">
              {/* Header with Icon */}
              <div className="flex items-start justify-between ">
                <div>
                  <span className="text-xs font-bold tracking-widest text-white/80 uppercase block mb-1">
                    {card.title}
                  </span>
                  <div className="w-12 h-1 bg-white/40 rounded-full"></div>
                </div>
                <div className="p-3 bg-white/20 backdrop-blur-sm rounded-2xl shadow-lg group-hover:scale-110 group-hover:rotate-6 transition-all duration-500">
                  <IconComponent className="text-white text-2xl drop-shadow-lg" />
                </div>
              </div>
              
              {/* Main Amount */}
              <div className="flex-grow flex flex-col justify-center">
                <Tooltip
                  title={
                    <span className="text-lg">
                      <span dangerouslySetInnerHTML={{ __html: currency?.currencySymbol }} />
                      {card.amount?.toFixed(3)}
                    </span>
                  }
                >
                  <div className="">
                    <span className="text-4xl font-black text-white drop-shadow-2xl tracking-tight block">
                      <span dangerouslySetInnerHTML={{ __html: currency?.currencySymbol }} />
                      {card.amount
                        ? abbreviateNumber(Number(card.amount))
                        : 0}
                    </span>
                    <span className="text-sm font-medium text-white/70 mt-1 block">
                      {card.subtitle}
                    </span>
                  </div>
                </Tooltip>
                
                {/* Count Display */}
                {card.showCount && (
                  <div className="flex items-center gap-2 mt-2">
                  </div>
                )}
              </div>
            </div>
          </div>
        );
      })}
    </section>
  );
};

export default NewDashboardCard;