homaroma/apps/spa/src/components/ProductCard.tsx

import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import type { Product, TranslatableString } from '../types';
import { getCategoryImage, formatPrice } from '../types';
import { Heart, ShoppingBag } from 'lucide-react';
import { useWishlistStore } from '../store/wishlistStore';
import { useCartStore } from '../store/cartStore';
import { useTranslation } from 'react-i18next';

function resolveStr(v: TranslatableString | null | undefined, lang: string): string {
  if (!v) return ''
  if (typeof v === 'string') return v
  return v[lang] ?? v[lang.slice(0, 2)] ?? v['th'] ?? v['en'] ?? Object.values(v)[0] ?? ''
}

interface ProductCardProps {
  product: Product;
  enableQuickShop?: boolean;
}

export default function ProductCard({ product, enableQuickShop = false }: ProductCardProps) {
  const navigate = useNavigate();
  const { addItem, removeItem, isInWishlist } = useWishlistStore();
  const { addToCart } = useCartStore();
  const { i18n, t } = useTranslation();
  const isWished = isInWishlist(product.id);
  const [selectedVariant, setSelectedVariant] = useState(product.variants?.[0] || null);
  const displayName = resolveStr(product.name, i18n.language) || product.scent.name;

  const handleWishlistClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (isWished) {
      removeItem(product.id);
    } else {
      addItem(product);
    }
  };

  const handleCardClick = () => {
    navigate(`/products/${product.id}`);
  };

  return (
    <div 
      onClick={handleCardClick}
      className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl overflow-hidden flex flex-col group p-2 transition-all duration-300 hover:shadow-lg hover:border-spa-forest/30 cursor-pointer"
    >
      {/* Image Area */}
      <div className="h-48 md:h-64 overflow-hidden rounded-xl relative bg-spa-sage/20">
        <img
          src={product.images?.[0]?.url || getCategoryImage(product.category.name)}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
          alt={product.scent.name}
          onError={(e) => {
            (e.target as HTMLImageElement).style.display = 'none';
          }}
        />
        {/* Category badge */}
        <div className="absolute top-3 left-3 bg-white/90 backdrop-blur-sm px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-widest text-spa-forest shadow-sm">
          {product.category.name}
        </div>
        {/* Wishlist Button */}
        <button
          type="button"
          onClick={handleWishlistClick}
          className="absolute top-3 right-3 p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:scale-110 transition-transform z-10 cursor-pointer"
        >
          <Heart 
            className={`w-4 h-4 transition-colors ${isWished ? 'fill-rose-500 text-rose-500' : 'text-spa-stone/60 hover:text-rose-500'}`} 
          />
        </button>
      </div>

      {/* Content Area */}
      <div className="p-4 flex flex-col flex-1">
        <div className="mb-2">
          <h3 className="text-base md:text-lg font-bold text-pop-black leading-tight line-clamp-1 group-hover:text-spa-forest transition-colors">
            {displayName}
          </h3>
          <p className="text-[10px] md:text-xs text-spa-stone/60 mt-1 uppercase tracking-widest line-clamp-1 font-semibold">
            {product.category.name}
          </p>
        </div>

        {/* Quick Shop Variant Swatches */}
        {enableQuickShop && product.variants && product.variants.length > 0 && (
          <div className="flex flex-wrap gap-1.5 mt-2 mb-1">
            {product.variants.map((variant) => {
              const isSelected = selectedVariant?.id === variant.id;
              return (
                <button
                  key={variant.id}
                  type="button"
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    setSelectedVariant(variant);
                  }}
                  className={`px-3 py-1 rounded-full text-[10px] font-bold tracking-wider uppercase border transition-all cursor-pointer ${
                    isSelected
                      ? 'bg-spa-forest border-spa-forest text-white shadow-sm'
                      : 'bg-white border-spa-stone/10 text-spa-stone hover:border-spa-forest/30'
                  }`}
                >
                  {variant.size}
                </button>
              );
            })}
          </div>
        )}

        {/* Bottom Area */}
        <div className="mt-auto pt-3 flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <span className="text-rose-500 font-black text-sm md:text-lg">
              {formatPrice(selectedVariant?.price ?? product.variants[0]?.price)}
            </span>
            {!enableQuickShop && (
              <span className="text-[10px] md:text-xs font-bold text-spa-forest uppercase tracking-widest flex items-center gap-1 group-hover:translate-x-1 transition-transform">
                {t('product.viewDetails')}
              </span>
            )}
          </div>

          {enableQuickShop && selectedVariant && (
            <button
              type="button"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                addToCart({
                  productId: product.id,
                  variantId: selectedVariant.id,
                  quantity: 1,
                  price: selectedVariant.price || 0,
                  productName: displayName,
                  variantSize: selectedVariant.size,
                  productImage: product.images?.[0]?.url || getCategoryImage(product.category.name)
                });
              }}
              className="w-full py-2.5 bg-spa-forest text-white hover:bg-spa-forest/90 rounded-xl font-bold text-xs uppercase tracking-widest transition-all shadow-sm hover:shadow flex items-center justify-center gap-1.5 cursor-pointer"
            >
              <ShoppingBag className="w-3.5 h-3.5" />
              Add to Cart
            </button>
          )}
        </div>
      </div>
    </div>
  );
}