import React, { useState } from 'react';
import { ShoppingCart, Star, Heart } from 'lucide-react';
import { Product, PriceConfig } from '../types';
import { getDisplayName } from '../lib/displayName';

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

const ProductCard: React.FC<ProductCardProps> = ({ product, onSelect, addToCart }) => {
  const [imageLoaded, setImageLoaded] = useState(false);
  const originalPrice = (product.priceConfigs && (Object.values(product.priceConfigs) as PriceConfig[])[0]?.originalPrice) || Math.round(product.price * 1.2);
  const discountPercent = Math.round(((originalPrice - product.price) / originalPrice) * 100);

  return (
    <div
      onClick={() => onSelect(product)}
      className="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-themePrimary transition-all duration-300 flex flex-col cursor-pointer h-full relative shadow-sm hover:shadow-md active:scale-[0.98]"
    >
      {/* Badges */}
      <div className="absolute top-2 left-2 z-10 flex flex-col gap-1 items-start">
        {discountPercent > 0 && (
          <span className="bg-themePrimary text-white text-[9px] font-bold px-1.5 py-0.5 rounded-sm shadow-sm">
            {discountPercent}%
          </span>
        )}
        <span className="bg-green-100 text-green-700 font-bold px-1.5 py-0.5 text-[8px] rounded-sm uppercase tracking-wider">
          {product.category || 'ORGANIC'}
        </span>
      </div>

      {/* Wishlist — always visible on mobile, hover on desktop */}
      <div className="absolute top-2 right-2 z-10">
        <button
          onClick={(e) => { e.stopPropagation(); }}
          className="text-gray-300 hover:text-red-500 bg-white/90 backdrop-blur-sm p-1.5 rounded-full shadow-sm transition-colors md:opacity-0 md:group-hover:opacity-100"
        >
          <Heart size={14} strokeWidth={2.5} />
        </button>
      </div>

      {/* Image — square on mobile */}
      <div className="relative aspect-square w-full overflow-hidden p-4 flex items-center justify-center bg-gray-50/30">
        <img
          src={product.image}
          alt={product.name}
          loading="lazy"
          onLoad={() => setImageLoaded(true)}
          className={`max-w-full max-h-full object-contain transition-all duration-500 group-hover:scale-110 drop-shadow-sm ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
        />
      </div>

      {/* Info */}
      <div className="p-3 flex flex-col flex-grow text-left border-t border-gray-50">
        <h2 className="text-[12px] md:text-[13px] font-bold mb-1 text-[#202342] line-clamp-2 leading-tight">
          {getDisplayName(product.nameBangla, product.name)}
        </h2>

        {/* Rating */}
        <div className="flex items-center gap-0.5 mb-1.5">
          {[1, 2, 3, 4, 5].map(star => (
            <Star key={star} size={9} className={star <= 4 ? "text-amber-400 fill-amber-400" : "text-gray-300 fill-gray-300"} />
          ))}
          <span className="text-[8px] text-gray-500 ml-0.5">(12)</span>
        </div>

        <div className="mt-auto pt-1 flex flex-col gap-1.5">
          <div className="flex items-center gap-1.5">
            <span className="text-sm font-black text-themePrimary">৳{product.price}</span>
            {originalPrice > product.price && (
              <span className="text-[10px] text-gray-400 line-through font-semibold">৳{originalPrice}</span>
            )}
          </div>

          {/* Add to Cart — large touch target */}
          <button
            onClick={(e) => { e.stopPropagation(); addToCart(product); }}
            className="w-full py-2.5 bg-transparent text-themePrimary border-2 border-themePrimary hover:bg-themePrimary hover:text-white rounded-xl flex items-center justify-center gap-1.5 transition-all font-bold text-[11px] active:scale-95"
          >
            <ShoppingCart size={13} />
            <span>কার্টে যোগ করুন</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;
