import { useSelector } from "react-redux";
import {
  HiOutlineTicket,
  HiOutlineCheckCircle,
  HiOutlineXCircle,
  HiOutlineLightningBolt,
} from "react-icons/hi";

const CouponStats = () => {
  const { couponStats, loading } = useSelector((state) => state.dashboard);

  if (loading) {
    return (
      <div className="p-6">
        <div className="animate-pulse grid grid-cols-1 md:grid-cols-4 gap-6">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="h-32 rounded-xl bg-gray-200" />
          ))}
        </div>
      </div>
    );
  }

  if (!couponStats) return null;

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-800">
          Coupon Statistics 🎟️
        </h1>
        <p className="text-gray-500 text-sm mt-1">
          Overview of coupon usage and performance
        </p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
        <StatCard
          title="Total Coupons"
          value={couponStats.totalCoupons}
          icon={HiOutlineTicket}
          gradient="from-indigo-500 to-purple-600"
        />
        <StatCard
          title="Active Coupons"
          value={couponStats.activeCoupons}
          icon={HiOutlineCheckCircle}
          gradient="from-emerald-500 to-green-600"
        />
        <StatCard
          title="Expired Coupons"
          value={couponStats.expiredCoupons}
          icon={HiOutlineXCircle}
          gradient="from-rose-500 to-red-600"
        />
        <StatCard
          title="Total Redemptions"
          value={couponStats.totalRedemptions}
          icon={HiOutlineLightningBolt}
          gradient="from-amber-500 to-orange-600"
        />
      </div>
    </div>
  );
};

/* =========================
   Reusable Stat Card
========================= */

const StatCard = ({ title, value, icon: Icon, gradient }) => {
  return (
    <div
      className={`
        relative overflow-hidden rounded-2xl p-5 text-white
        bg-gradient-to-br ${gradient}
        shadow-lg hover:shadow-2xl
        transform transition-all duration-300 hover:-translate-y-1
      `}
    >
      {/* Icon */}
      <div className="absolute right-4 top-4 opacity-20">
        <Icon size={64} />
      </div>

      <p className="text-sm font-medium opacity-90">{title}</p>
      <p className="text-3xl font-bold mt-3">{value}</p>

      {/* Decorative Glow */}
      <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-white/10 rounded-full blur-2xl" />
    </div>
  );
};

export default CouponStats;
