/**
 * YYShop 商品视觉占位卡片
 * 用 CSS/SVG 绘制风格化商品图（不使用 emoji）
 */
window.ProductVisual = function ProductVisual({ product, size = 'md' }) {
  const { imgStyle, color, name, image_url } = product;

  // If the product has a real generated image, use it. SVG remains a fallback.
  if (image_url) {
    return (
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '3/4',
        background: color, overflow: 'hidden',
        borderRadius: 'var(--radius-lg)',
      }}>
        <img
          src={image_url}
          alt={(name && (name.en || Object.values(name)[0])) || ''}
          loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          onError={(e) => { e.currentTarget.style.display = 'none'; }}
        />
      </div>
    );
  }

  const styles = {
    wrap: {
      position: 'relative',
      width: '100%', aspectRatio: '3/4',
      background: color,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
      borderRadius: 'var(--radius-lg)',
    },
    label: {
      position: 'absolute', top: 12, left: 12,
      fontSize: 10, fontWeight: 600, letterSpacing: '0.1em',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)',
    }
  };

  // 风格化视觉 - 用 SVG 绘制
  const visuals = {
    silk: (
      <svg viewBox="0 0 100 140" width="70%" height="70%" style={{ filter: 'drop-shadow(0 8px 20px rgba(0,0,0,0.25))' }}>
        <defs>
          <linearGradient id={`g-${product.id}`} x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stopColor="rgba(255,255,255,0.4)"/>
            <stop offset="50%" stopColor="rgba(255,255,255,0.15)"/>
            <stop offset="100%" stopColor="rgba(0,0,0,0.3)"/>
          </linearGradient>
        </defs>
        <path d="M 30 10 Q 50 5 70 10 L 75 40 Q 85 60 80 100 L 75 130 L 25 130 L 20 100 Q 15 60 25 40 Z" fill={color} stroke="rgba(0,0,0,0.15)" strokeWidth="0.5"/>
        <path d="M 30 10 Q 50 5 70 10 L 75 40 Q 85 60 80 100 L 75 130 L 25 130 L 20 100 Q 15 60 25 40 Z" fill={`url(#g-${product.id})`} opacity="0.6"/>
        <path d="M 35 25 Q 45 40 40 70 M 60 25 Q 55 45 62 75" stroke="rgba(0,0,0,0.1)" fill="none" strokeWidth="0.5"/>
      </svg>
    ),
    clay: (
      <svg viewBox="0 0 100 100" width="75%" height="75%" style={{ filter: 'drop-shadow(0 8px 20px rgba(0,0,0,0.35))' }}>
        <ellipse cx="50" cy="60" rx="35" ry="25" fill={color}/>
        <ellipse cx="50" cy="50" rx="25" ry="6" fill="rgba(0,0,0,0.4)"/>
        <rect x="45" y="40" width="10" height="8" rx="2" fill={color}/>
        <path d="M 85 55 Q 95 55 90 68 Q 88 72 82 70" fill="none" stroke={color} strokeWidth="5" strokeLinecap="round"/>
        <ellipse cx="45" cy="55" rx="20" ry="3" fill="rgba(255,255,255,0.2)"/>
      </svg>
    ),
    porcelain: (
      <svg viewBox="0 0 100 140" width="60%" height="80%" style={{ filter: 'drop-shadow(0 10px 24px rgba(0,0,0,0.3))' }}>
        <path d="M 40 10 L 60 10 L 62 20 Q 85 35 80 80 Q 75 125 50 130 Q 25 125 20 80 Q 15 35 38 20 Z" fill="#fafaf7"/>
        <g opacity="0.85" fill="#1e3a8a">
          <circle cx="50" cy="55" r="3"/>
          <path d="M 35 60 Q 40 50 45 60 Q 50 70 55 60 Q 60 50 65 60" stroke="#1e3a8a" strokeWidth="1.2" fill="none"/>
          <path d="M 40 75 Q 50 68 60 75 Q 55 85 50 85 Q 45 85 40 75" />
          <circle cx="42" cy="95" r="2"/>
          <circle cx="58" cy="95" r="2"/>
          <path d="M 35 100 Q 50 108 65 100" stroke="#1e3a8a" strokeWidth="1" fill="none"/>
        </g>
      </svg>
    ),
    jade: (
      <svg viewBox="0 0 100 100" width="55%" height="55%" style={{ filter: 'drop-shadow(0 6px 16px rgba(0,0,0,0.25))' }}>
        <defs>
          <radialGradient id={`jg-${product.id}`}>
            <stop offset="0%" stopColor="#d9e8d4"/>
            <stop offset="70%" stopColor={color}/>
            <stop offset="100%" stopColor="#7a9884"/>
          </radialGradient>
        </defs>
        <circle cx="50" cy="50" r="38" fill={`url(#jg-${product.id})`}/>
        <circle cx="50" cy="50" r="14" fill="none" stroke="rgba(0,0,0,0.3)" strokeWidth="1"/>
        <circle cx="50" cy="50" r="14" fill={color === '#b8d4c1' ? '#fff4e6' : '#fff'} opacity="0.3"/>
        <circle cx="42" cy="42" r="6" fill="rgba(255,255,255,0.4)"/>
      </svg>
    ),
    brush: (
      <svg viewBox="0 0 100 140" width="55%" height="85%" style={{ filter: 'drop-shadow(0 6px 16px rgba(0,0,0,0.3))' }}>
        <rect x="44" y="10" width="12" height="80" fill={color} rx="1"/>
        <rect x="42" y="85" width="16" height="8" fill="#c9a961"/>
        <path d="M 46 93 Q 50 130 54 93 Q 56 115 50 125 Q 44 115 46 93" fill="#3d2818"/>
        <rect x="46" y="20" width="8" height="60" fill="rgba(255,255,255,0.1)"/>
      </svg>
    ),
    gift: (
      <svg viewBox="0 0 100 100" width="70%" height="70%" style={{ filter: 'drop-shadow(0 10px 22px rgba(0,0,0,0.3))' }}>
        <rect x="15" y="30" width="70" height="55" fill={color}/>
        <rect x="45" y="30" width="10" height="55" fill="#c9a961"/>
        <rect x="15" y="50" width="70" height="6" fill="#c9a961"/>
        <path d="M 40 30 Q 30 15 25 20 Q 30 30 45 30 Q 40 25 35 20 Q 45 25 50 30 Q 55 25 65 20 Q 60 30 55 30 Q 70 30 75 20 Q 70 15 60 30" fill="#c9a961"/>
      </svg>
    ),
    coat: (
      <svg viewBox="0 0 100 140" width="72%" height="80%" style={{ filter: 'drop-shadow(0 10px 24px rgba(0,0,0,0.25))' }}>
        <path d="M 28 18 L 40 12 L 50 18 L 60 12 L 72 18 L 82 35 L 76 45 L 76 128 L 24 128 L 24 45 L 18 35 Z" fill={color}/>
        <path d="M 40 12 L 50 26 L 60 12" fill="none" stroke="rgba(0,0,0,0.2)" strokeWidth="0.7"/>
        <line x1="50" y1="26" x2="50" y2="120" stroke="rgba(0,0,0,0.25)" strokeWidth="0.5"/>
        <circle cx="50" cy="45" r="1.2" fill="rgba(0,0,0,0.4)"/>
        <circle cx="50" cy="65" r="1.2" fill="rgba(0,0,0,0.4)"/>
        <circle cx="50" cy="85" r="1.2" fill="rgba(0,0,0,0.4)"/>
      </svg>
    ),
    linen: (
      <svg viewBox="0 0 100 140" width="70%" height="80%" style={{ filter: 'drop-shadow(0 8px 20px rgba(0,0,0,0.15))' }}>
        <path d="M 30 20 L 45 15 L 55 15 L 70 20 L 72 50 L 76 130 L 52 130 L 50 70 L 48 130 L 24 130 L 28 50 Z" fill={color}/>
        <line x1="50" y1="70" x2="50" y2="130" stroke="rgba(0,0,0,0.12)" strokeWidth="0.5"/>
      </svg>
    ),
    shirt: (
      <svg viewBox="0 0 100 140" width="72%" height="80%" style={{ filter: 'drop-shadow(0 8px 18px rgba(0,0,0,0.1))' }}>
        <path d="M 28 20 L 42 14 L 50 22 L 58 14 L 72 20 L 82 38 L 74 44 L 74 120 L 26 120 L 26 44 L 18 38 Z" fill={color} stroke="rgba(0,0,0,0.1)" strokeWidth="0.5"/>
        <path d="M 42 14 L 50 28 L 58 14" fill="none" stroke="rgba(0,0,0,0.15)" strokeWidth="0.6"/>
      </svg>
    ),
    lip: (
      <svg viewBox="0 0 100 140" width="45%" height="85%" style={{ filter: 'drop-shadow(0 10px 22px rgba(0,0,0,0.3))' }}>
        <rect x="35" y="60" width="30" height="65" fill="#1a1a1a" rx="2"/>
        <rect x="37" y="80" width="26" height="4" fill="#c9a961"/>
        <path d="M 38 10 L 62 10 L 60 60 L 40 60 Z" fill={color}/>
        <path d="M 38 10 L 62 10 L 50 5 Z" fill={color}/>
        <rect x="38" y="12" width="24" height="46" fill="rgba(255,255,255,0.15)"/>
      </svg>
    ),
    serum: (
      <svg viewBox="0 0 100 140" width="55%" height="85%" style={{ filter: 'drop-shadow(0 10px 22px rgba(0,0,0,0.3))' }}>
        <rect x="30" y="10" width="40" height="15" fill="#2a2a2a" rx="1"/>
        <rect x="33" y="25" width="34" height="100" fill={color} rx="2"/>
        <rect x="36" y="45" width="28" height="20" fill="rgba(255,255,255,0.12)"/>
        <text x="50" y="90" fill="rgba(255,255,255,0.6)" fontSize="6" textAnchor="middle" fontFamily="serif">YY</text>
      </svg>
    ),
    powder: (
      <svg viewBox="0 0 100 100" width="70%" height="70%" style={{ filter: 'drop-shadow(0 6px 16px rgba(0,0,0,0.2))' }}>
        <circle cx="50" cy="50" r="38" fill="#c9a961"/>
        <circle cx="50" cy="50" r="33" fill={color}/>
        <circle cx="50" cy="50" r="20" fill="rgba(255,255,255,0.2)"/>
      </svg>
    ),
    perfume: (
      <svg viewBox="0 0 100 140" width="55%" height="85%" style={{ filter: 'drop-shadow(0 10px 24px rgba(0,0,0,0.35))' }}>
        <rect x="42" y="5" width="16" height="20" fill="#c9a961" rx="1"/>
        <path d="M 30 30 L 70 30 L 75 50 L 75 125 L 25 125 L 25 50 Z" fill={color} opacity="0.85"/>
        <rect x="38" y="70" width="24" height="14" fill="rgba(255,255,255,0.4)"/>
        <rect x="42" y="72" width="16" height="10" fill="#1a1a1a"/>
      </svg>
    ),
  };

  return (
    <div style={styles.wrap}>
      {product.tag && <span style={{...styles.label, color: color === '#eaeaea' || color === '#b8d4c1' || color === '#e8cfa8' || color === '#f0d896' || color === '#d4c5a8' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.85)'}}>{product.tag}</span>}
      {visuals[imgStyle] || visuals.shirt}
    </div>
  );
};