import React from "react";
import { useNavigate } from "react-router-dom";

const StatsCards = ({ stats, couponStats }) => {
  const navigate = useNavigate();
  const orderGrowth = stats?.charts?.monthlyComparison?.growth?.orders || 0;

  const cards = [
    {
      label: "Total Users",
      value: stats?.totalUsers,
      gradient: "from-white to-[#FAF7F5]",
      iconBg: "from-[#F5ECE6] to-[#E8D5C4]",
      iconColor: "text-[#704F38]",
      footer: <span className="text-xs text-gray-600">Active users</span>,
      icon: (
        <svg className="w-8 h-8 text-[#704F38]" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
        </svg>
      ),
    },
    {
      label: "Total Orders",
      value: stats?.totalOrders,
      gradient: "from-white to-[#E7F3FF]",
      iconBg: "from-[#E7F3FF] to-[#C2DFFF]",
      iconColor: "text-blue-600",
      footer: (
        <div className="flex items-center gap-2">
          <svg
            className={`w-4 h-4 ${orderGrowth >= 0 ? "text-green-500" : "text-red-500"}`}
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              fillRule="evenodd"
              d={
                orderGrowth >= 0
                  ? "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
                  : "M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586l-4.293-4.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z"
              }
              clipRule="evenodd"
            />
          </svg>
          <span className={`text-sm font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
            {orderGrowth.toFixed(1)}%
          </span>
          <p className="text-sm text-gray-600">vs last month</p>
        </div>
      ),
      icon: (
        <svg className="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
          <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
        </svg>
      ),
    },
    {
      label: "Total Products",
      value: stats?.inventory?.totalProducts || stats?.totalProducts,
      gradient: "from-white to-[#FFF3E6]",
      iconBg: "from-[#FFF3E6] to-[#FFE4B8]",
      iconColor: "text-orange-600",
      footer: (
        <div className="flex items-center gap-2">
          <span className="text-xs text-green-600">In Stock: {stats?.inventory?.inStock || 0}</span>
          {stats?.inventory?.outOfStock > 0 && (
            <span className="text-xs text-red-600">• Out: {stats.inventory.outOfStock}</span>
          )}
        </div>
      ),
      icon: (
        <svg className="w-8 h-8 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clipRule="evenodd" />
        </svg>
      ),
    },
    {
      label: "Total Coupons",
      value: couponStats?.totalCoupons ?? 0,
      gradient: "from-white to-[#EAF1FF]",
      iconBg: "from-[#EAF1FF] to-[#C7D7FE]",
      iconColor: "text-blue-600",
      footer: (
        <div className="flex items-center justify-between w-full">
          <p className="text-sm font-bold text-green-600">Active: {couponStats?.activeCoupons ?? 0}</p>
          <button
            onClick={(e) => { e.stopPropagation(); navigate("/coupon-stats"); }}
            className="text-blue-600 hover:text-blue-800 transition font-semibold"
          >
            View →
          </button>
        </div>
      ),
      icon: (
        <svg className="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
          <path d="M21 10V7a1 1 0 00-1-1h-3V4a1 1 0 00-1-1H8a1 1 0 00-1 1v2H4a1 1 0 00-1 1v3a2 2 0 010 4v3a1 1 0 001 1h3v2a1 1 0 001 1h8a1 1 0 001-1v-2h3a1 1 0 001-1v-3a2 2 0 010-4zM9 4h6v2H9V4zm6 16H9v-2h6v2z" />
        </svg>
      ),
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      {cards.map((card, i) => (
        <div
          key={i}
          className={`group bg-gradient-to-br ${card.gradient} shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer`}
        >
          <div className="flex justify-between items-start mb-4">
            <div>
              <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">{card.label}</p>
              <p className="text-4xl font-extrabold text-[#704F38] mt-2">{card.value}</p>
            </div>
            <div className={`bg-gradient-to-br ${card.iconBg} w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300`}>
              {card.icon}
            </div>
          </div>
          <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200 w-full">
            {card.footer}
          </div>
        </div>
      ))}
    </div>
  );
};

export default StatsCards;