import { Heart, ShoppingCart, Star, Eye } from "lucide-react";
import { Link } from "react-router-dom";
import { toast } from "sonner";
import { useCartStore } from "@/stores/cartStore";
import type { Product } from "@/types";

interface ProductCardProps {
  product: Product;
}

export default function ProductCard({ product }: ProductCardProps) {
  const { addToCart, toggleWishlist, isInWishlist } = useCartStore();
  const inWishlist = isInWishlist(product.id);
  const discount = product.originalPrice
    ? Math.round((1 - product.price / product.originalPrice) * 100)
    : 0;

  const handleAddToCart = (e: React.MouseEvent) => {
    e.preventDefault();
    if (!product.inStock) return;
    addToCart(product);
    toast.success(`تمت إضافة "${product.name}" إلى السلة`);
  };

  const handleToggleWishlist = (e: React.MouseEvent) => {
    e.preventDefault();
    toggleWishlist(product);
    toast.success(
      inWishlist ? "تمت الإزالة من المفضلة" : `تمت الإضافة إلى المفضلة`
    );
  };

  return (
    <Link to={`/products/${product.id}`} className="card-product group block">
      {/* Image */}
      <div className="relative overflow-hidden bg-gray-50 rounded-t-2xl product-img-wrapper">
        <img
          src={product.image}
          alt={product.name}
          className="w-full h-52 object-cover"
          loading="lazy"
        />

        {/* Badges */}
        <div className="absolute top-3 right-3 flex flex-col gap-1.5">
          {discount > 0 && (
            <span className="badge-discount">-{discount}%</span>
          )}
          {product.isNew && (
            <span className="bg-green-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
              جديد
            </span>
          )}
          {!product.inStock && (
            <span className="bg-gray-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
              نفدت الكمية
            </span>
          )}
        </div>

        {/* Wishlist button */}
        <button
          onClick={handleToggleWishlist}
          className={`absolute top-3 left-3 w-9 h-9 rounded-full flex items-center justify-center transition-all duration-200 shadow-md ${
            inWishlist
              ? "bg-red-500 text-white"
              : "bg-white text-gray-400 hover:text-red-500 hover:bg-red-50"
          }`}
        >
          <Heart size={16} fill={inWishlist ? "currentColor" : "none"} />
        </button>

        {/* Quick view overlay */}
        <div className="absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center">
          <span className="bg-white text-gray-700 text-xs font-semibold px-3 py-1.5 rounded-full flex items-center gap-1.5 shadow-lg">
            <Eye size={14} />
            عرض سريع
          </span>
        </div>
      </div>

      {/* Content */}
      <div className="p-4">
        <p className="text-xs text-orange-500 font-semibold mb-1">{product.category}</p>
        <h3 className="text-sm font-bold text-gray-800 mb-2 line-clamp-2 leading-relaxed">
          {product.name}
        </h3>

        {/* Rating */}
        <div className="flex items-center gap-1.5 mb-3">
          <div className="flex">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star
                key={i}
                size={12}
                className={i < Math.floor(product.rating) ? "text-amber-400" : "text-gray-200"}
                fill={i < Math.floor(product.rating) ? "currentColor" : "none"}
              />
            ))}
          </div>
          <span className="text-xs text-gray-400">({product.reviewCount})</span>
        </div>

        {/* Price */}
        <div className="flex items-center justify-between">
          <div>
            <span className="text-lg font-black text-orange-500">
              {product.price.toLocaleString()} ر.ي
            </span>
            {product.originalPrice && (
              <div className="text-xs text-gray-400 line-through">
                {product.originalPrice.toLocaleString()} ر.ي
              </div>
            )}
          </div>

          <button
            onClick={handleAddToCart}
            disabled={!product.inStock}
            className={`w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200 ${
              product.inStock
                ? "bg-orange-500 hover:bg-orange-600 text-white shadow-md hover:shadow-orange-200 hover:shadow-lg active:scale-95"
                : "bg-gray-100 text-gray-400 cursor-not-allowed"
            }`}
            title="أضف إلى السلة"
          >
            <ShoppingCart size={18} />
          </button>
        </div>
      </div>
    </Link>
  );
}
