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;
  categoryNameOverride?: string;
}

export default function ProductCard({ product, enableQuickShop = false, categoryNameOverride }: 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 displayCategoryName = categoryNameOverride || resolveStr(product.category.name, i18n.language);

  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="ui-shell-card ui-shell-card-hover group flex cursor-pointer flex-col overflow-hidden p-2"
    >
      <div className="relative h-48 overflow-hidden rounded-xl bg-pop-black/5 md:h-64">
        <img
          src={product.images?.[0]?.url || getCategoryImage(displayCategoryName)}
          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';
          }}
        />
        <div className="ui-chip absolute left-3 top-3 border-pop-bg bg-pop-bg/90 px-2.5 py-1 text-[10px] text-pop-black shadow-sm backdrop-blur-sm">
          {displayCategoryName}
        </div>
        <button
          type="button"
          onClick={handleWishlistClick}
          className="absolute right-3 top-3 z-10 rounded-full bg-pop-bg/90 p-2 shadow-sm backdrop-blur-sm transition-transform hover:scale-110 cursor-pointer"
        >
          <Heart 
            className={`w-4 h-4 transition-colors ${isWished ? 'fill-pop-pink text-pop-pink' : 'text-pop-black/40 hover:text-pop-pink'}`} 
          />
        </button>
      </div>

      <div className="flex flex-1 flex-col p-4">
        <div className="mb-2">
          <h3 className="line-clamp-1 text-base font-bold leading-tight text-pop-black transition-colors group-hover:text-pop-pink md:text-lg">
            {displayName}
          </h3>
          <p className="mt-1 line-clamp-1 text-[10px] font-semibold uppercase tracking-widest text-pop-black/50 md:text-xs">
            {displayCategoryName}
          </p>
        </div>

        {enableQuickShop && product.variants && product.variants.length > 0 && (
          <div className="mb-1 mt-2 flex flex-wrap gap-1.5">
            {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={`rounded-full border px-3 py-1 text-[10px] font-bold uppercase tracking-wider transition-all cursor-pointer ${
                    isSelected
                      ? 'border-pop-black bg-pop-black text-pop-bg shadow-sm'
                      : 'border-pop-black/10 bg-transparent text-pop-black/70 hover:border-pop-black/30 hover:bg-pop-black/5'
                  }`}
                >
                  {variant.size}
                </button>
              );
            })}
          </div>
        )}

        <div className="mt-auto flex flex-col gap-2 pt-3">
          <div className="flex items-center justify-between">
            <span className="text-sm font-black text-pop-pink md:text-lg">
              {formatPrice(selectedVariant?.price ?? product.variants[0]?.price)}
            </span>
            {!enableQuickShop && (
              <span className="flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-pop-black transition-transform group-hover:translate-x-1 group-hover:text-pop-pink md:text-xs">
                {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(displayCategoryName)
                });
              }}
              className="ui-button-primary w-full gap-1.5 rounded-xl py-2.5 shadow-sm"
            >
              <ShoppingBag className="w-3.5 h-3.5" />
              {t('cart.addToCart')}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}