// ============================================================
// ProductCard — Linen tile, product photo (or glyph), name + price.
// Hover: 2px lift + soft warm shadow + second photo + "Add" affordance.
// ============================================================

function JmProductCard({ product, lang, onOpen, onAdd, large = false }) {
  const t = JM.t[lang];
  const name = lang === 'vi' ? product.name : product.enName;
  const material = JM.materials.find(m => m.id === product.material);
  const materialLabel = material ? (lang === 'vi' ? material.vi : material.en) : '';
  const variants = JM.variantsOf(product);
  const hoverImg = (product.modelImages && product.modelImages[0]) || (product.images && product.images[1]);

  function badgeLabel() {
    if (!product.badge) return null;
    const map = {
      vi: { 'Bestseller': 'Bestseller', 'Mới': 'Mới', 'Limited': 'Phiên bản giới hạn' },
      en: { 'Bestseller': 'Bestseller', 'Mới': 'New', 'Limited': 'Limited edition' },
    };
    return map[lang][product.badge] || product.badge;
  }

  return (
    <article className={`jm-pcard ${large ? 'jm-pcard--lg' : ''}`} onClick={() => onOpen && onOpen(product)} data-screen-label={`Product card · ${product.id}`}>
      <div className="jm-pcard__img">
        <JmProductImage product={product} ratio="4/5" alt={name}/>
        {hoverImg && <img className="jm-pcard__hover jm-photo" src={hoverImg} alt="" loading="lazy"/>}
        {product.badge && (
          <span className={`jm-badge ${product.badge === 'Limited' ? 'jm-badge-solid' : ''} jm-pcard__badge`}>
            {badgeLabel()}
          </span>
        )}
        {JM.orderingOn()
          ? <button className="jm-pcard__quick" onClick={(e) => { e.stopPropagation(); JM.needsChoice(product) ? (onOpen && onOpen(product)) : (onAdd && onAdd(product)); }} aria-label={t['cta.add']}>
              + {t['cta.add']}
            </button>
          : <button className="jm-pcard__quick" onClick={(e) => { e.stopPropagation(); onOpen && onOpen(product); }} aria-label={t['cta.view']}>
              {t['cta.view']}
            </button>}
      </div>
      <div className="jm-pcard__info">
        <div className="jm-pcard__title">{name}</div>
        {JM.soldLabel(product, lang) && <div className="jm-pcard__sold">{JM.soldLabel(product, lang)}</div>}
        <div className="jm-pcard__meta">
          <span className="jm-pcard__price">
            {JM.formatPrice(product.price)}
            {product.listPrice > product.price && <s className="jm-pcard__list">{JM.formatPrice(product.listPrice)}</s>}
          </span>
          {variants.length > 1
            ? <span className="jm-pcard__material jm-pcard__swatches" title={variants.map(v => lang === 'vi' ? v.label : v.enLabel).join(' / ')}>
                {variants.map(v => <span key={v.key} className="jm-swatch" style={{ background: JM.swatch(v.key) }}></span>)}
              </span>
            : <span className="jm-pcard__material">{materialLabel}</span>}
        </div>
      </div>
    </article>
  );
}

window.JmProductCard = JmProductCard;