import React from 'react';
import { ShoppingCart, Eye, Zap, Check, ArrowUpLeft } from 'lucide-react';
import type { Product } from '../types';
import { formatPrice, toPersianDigits } from '../utils/formatters';
import { useCart } from '../context/CartContext';

interface ProductCardProps {
  product: Product;
  onViewDetails: (product: Product) => void;
}

export const ProductCard: React.FC<ProductCardProps> = ({ product, onViewDetails }) => {
  const { addToCart, items } = useCart();
  const inCart = items.some(item => item.product.id === product.id);

  const handleAddToCart = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (product.regions?.length) {
      onViewDetails(product);
      return;
    }
    addToCart(product, 1);
  };

  return (
    <div
      onClick={() => onViewDetails(product)}
      className="bento-card flex flex-col justify-between overflow-hidden cursor-pointer hover:-translate-y-1 group"
    >
      {/* Product Image Box */}
      <div className="relative aspect-[16/9] w-full overflow-hidden bg-[#050505]">
        <img
          src={product.image}
          alt={product.title}
          loading="lazy"
          referrerPolicy="no-referrer"
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
        />

        <div className="absolute inset-0 bg-gradient-to-t from-[#0F0F12] via-transparent to-transparent opacity-80" />

        {/* Top Badges */}
        <div className="absolute top-2.5 right-2.5 flex flex-col gap-1 items-end z-10">
          {product.badge && (
            <span className="px-2.5 py-1 rounded-lg bg-purple-600/90 backdrop-blur-md text-white text-[11px] font-bold shadow-md">
              {product.badge}
            </span>
          )}
          {product.discountPercent ? (
            <span className="px-2 py-0.5 rounded-lg bg-rose-600/90 text-white text-[11px] font-black shadow-md">
              {toPersianDigits(product.discountPercent)}٪ تخفیف
            </span>
          ) : null}
        </div>

        {/* Category Label */}
        {product.regions?.length ? (
          <div className="absolute bottom-2.5 left-2.5 item-tag !mb-0 !bg-purple-950/80 !border-purple-500/30 !text-purple-200">
            {product.regions.length} ریجن
          </div>
        ) : null}

        {product.categoryName && (
          <div className="item-tag absolute bottom-2.5 right-2.5 !mb-0 !bg-[#050505]/80 !border-purple-500/30">
            {product.categoryName}
          </div>
        )}

        {/* Quick View Button on Image Hover */}
        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 backdrop-blur-xs">
          <span className="px-3.5 py-1.5 rounded-xl bg-white/90 text-zinc-900 text-xs font-bold flex items-center gap-1 shadow-lg">
            <Eye className="w-3.5 h-3.5" />
            مشاهده سریع
          </span>
        </div>
      </div>

      {/* Card Content */}
      <div className="p-4 flex-1 flex flex-col justify-between text-right space-y-3">
        <div>
          <h3 className="text-sm sm:text-base font-bold text-zinc-100 group-hover:text-purple-300 transition-colors line-clamp-2 leading-snug">
            {product.title}
          </h3>

          <p className="text-xs text-zinc-400 line-clamp-2 mt-1.5 leading-relaxed">
            {product.description}
          </p>
        </div>

        {/* Price & Action Section */}
        <div className="pt-3 border-t border-purple-500/15 flex items-center justify-between gap-2">
          
          {/* Price Container */}
          <div className="text-right">
            {product.originalPrice && product.originalPrice > product.price && (
              <div className="text-xs text-zinc-500 line-through font-normal">
                {product.originalPrice.toLocaleString('fa-IR')}
              </div>
            )}
            <div className="text-sm sm:text-base font-black text-purple-300 font-vazir">
              {formatPrice(product.price)}
            </div>
          </div>

          {/* Add to Cart CTA */}
          {product.inStock ? (
            <button
              onClick={handleAddToCart}
              className={`p-2.5 rounded-xl font-medium transition-all shadow-md flex items-center gap-1.5 text-xs ${
                inCart
                  ? 'bg-emerald-600 text-white hover:bg-emerald-500'
                  : 'bg-purple-600 hover:bg-purple-500 text-white hover:shadow-purple-600/40 active:scale-95'
              }`}
              title={inCart ? 'در سبد خرید موجود است (افزودن مجدد)' : 'افزودن به سبد خرید'}
            >
              {product.regions?.length ? (
                <>
                  <Eye className="w-4 h-4" />
                  <span className="hidden sm:inline">انتخاب ریجن</span>
                </>
              ) : inCart ? (
                <>
                  <Check className="w-4 h-4" />
                  <span className="hidden sm:inline">در سبد</span>
                </>
              ) : (
                <>
                  <ShoppingCart className="w-4 h-4" />
                  <span className="hidden sm:inline">خرید</span>
                </>
              )}
            </button>
          ) : (
            <span className="text-[11px] px-2.5 py-1 rounded-lg bg-zinc-900 text-zinc-400 border border-zinc-800">
              ناموجود
            </span>
          )}

        </div>
      </div>
    </div>
  );
};
