// ============================================================
// ProductGlyph — editorial SVG placeholders, one per glyph type.
// Reads as gold/silver line art on Linen, with subtle hand-feel.
// Used everywhere product photography is missing.
// ============================================================

function JmProductGlyph({ glyph = 'ring', tone = 'gold', ratio = '4/5', tint = 'linen', label, className = '' }) {
  // Color tokens
  const stroke =
    tone === 'silver' ? '#9A9087' :
    tone === 'dark'   ? '#1C1412' :
                        '#B07A3F'; // warm gold tone

  const bg =
    tint === 'cream' ? '#FAF8F5' :
    tint === 'white' ? '#FFFFFF' :
    tint === 'blush' ? '#F5E8E0' :
                       '#F2EDE8'; // linen default

  // Subtle inner glow circle behind the piece
  const haloId = `halo-${glyph}-${Math.random().toString(36).slice(2,7)}`;

  const dims = { width: 400, height: 500 };

  // Glyph renderer
  function renderGlyph() {
    const sw = 1.2;
    const common = { fill: 'none', stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
    switch (glyph) {
      case 'ring': {
        return (
          <g {...common}>
            <ellipse cx="200" cy="250" rx="90" ry="92"/>
            <ellipse cx="200" cy="250" rx="78" ry="82"/>
            <path d="M180 162 Q200 156 220 162" opacity="0.5"/>
          </g>
        );
      }
      case 'ring-stone': {
        return (
          <g {...common}>
            <ellipse cx="200" cy="270" rx="88" ry="90"/>
            <ellipse cx="200" cy="270" rx="78" ry="80"/>
            <path d="M188 178 L200 158 L212 178 Z" fill={stroke} opacity="0.85"/>
            <path d="M188 178 L212 178" opacity="0.8"/>
          </g>
        );
      }
      case 'ring-twist': {
        return (
          <g {...common}>
            <path d="M120 250 Q140 200 200 200 Q260 200 280 250 Q260 300 200 300 Q140 300 120 250 Z"/>
            <path d="M132 250 Q160 218 200 220 Q240 222 268 250 Q240 282 200 282 Q160 280 132 250 Z" opacity="0.7"/>
            <path d="M152 226 Q190 246 248 226" opacity="0.4"/>
            <path d="M152 276 Q190 256 248 276" opacity="0.4"/>
          </g>
        );
      }
      case 'earring': {
        return (
          <g {...common}>
            {/* left */}
            <circle cx="155" cy="170" r="4" fill={stroke}/>
            <path d="M155 174 Q150 200 155 230 Q160 260 155 286"/>
            <ellipse cx="155" cy="310" rx="20" ry="26"/>
            {/* right */}
            <circle cx="245" cy="170" r="4" fill={stroke}/>
            <path d="M245 174 Q250 200 245 230 Q240 260 245 286"/>
            <ellipse cx="245" cy="310" rx="20" ry="26"/>
          </g>
        );
      }
      case 'hoop': {
        return (
          <g {...common}>
            <circle cx="150" cy="250" r="60"/>
            <circle cx="150" cy="250" r="54" opacity="0.5"/>
            <circle cx="250" cy="250" r="60"/>
            <circle cx="250" cy="250" r="54" opacity="0.5"/>
            <circle cx="150" cy="190" r="3" fill={stroke}/>
            <circle cx="250" cy="190" r="3" fill={stroke}/>
          </g>
        );
      }
      case 'stud': {
        return (
          <g {...common}>
            <circle cx="160" cy="250" r="22" fill={stroke} opacity="0.9"/>
            <circle cx="160" cy="250" r="14" fill={bg}/>
            <circle cx="160" cy="250" r="8" fill={stroke}/>
            <circle cx="240" cy="250" r="22" fill={stroke} opacity="0.9"/>
            <circle cx="240" cy="250" r="14" fill={bg}/>
            <circle cx="240" cy="250" r="8" fill={stroke}/>
          </g>
        );
      }
      case 'necklace': {
        return (
          <g {...common}>
            <path d="M60 150 Q200 360 340 150"/>
            <path d="M60 150 Q200 370 340 150" opacity="0.35"/>
            {Array.from({length: 22}).map((_,i)=>{
              const t = i/21;
              const x = 60 + (340-60)*t;
              // approximate y on curve y = 150 + 210*4*t*(1-t)
              const y = 150 + 210*4*t*(1-t);
              return <circle key={i} cx={x} cy={y} r="2.4" fill={stroke}/>;
            })}
          </g>
        );
      }
      case 'pendant': {
        return (
          <g {...common}>
            <path d="M60 150 Q200 320 340 150"/>
            <ellipse cx="200" cy="326" rx="18" ry="22" fill={stroke} opacity="0.9"/>
            <ellipse cx="200" cy="326" rx="11" ry="14" fill={bg}/>
            <circle cx="200" cy="326" r="4" fill={stroke}/>
          </g>
        );
      }
      case 'teardrop': {
        return (
          <g {...common}>
            <path d="M60 150 Q200 320 340 150"/>
            <path d="M200 310 Q176 340 200 372 Q224 340 200 310 Z" fill={stroke} opacity="0.9"/>
          </g>
        );
      }
      case 'bracelet': {
        return (
          <g {...common}>
            <path d="M70 250 Q200 200 330 250"/>
            <path d="M70 250 Q200 300 330 250"/>
            {Array.from({length: 14}).map((_,i)=>{
              const t = i/13;
              const x = 70 + (330-70)*t;
              return <circle key={i} cx={x} cy={250 + (i%2===0? -6 : 6)} r="2" fill={stroke}/>;
            })}
          </g>
        );
      }
      case 'chain-bracelet': {
        return (
          <g {...common}>
            {Array.from({length: 9}).map((_,i)=>{
              const x = 80 + i*30;
              return <ellipse key={i} cx={x} cy="250" rx="18" ry="11"/>;
            })}
          </g>
        );
      }
      case 'bangle': {
        return (
          <g {...common}>
            <circle cx="200" cy="250" r="110"/>
            <circle cx="200" cy="250" r="92" opacity="0.55"/>
            <path d="M200 140 Q220 142 232 152" opacity="0.7"/>
          </g>
        );
      }
      default:
        return (
          <g {...common}>
            <circle cx="200" cy="250" r="80"/>
          </g>
        );
    }
  }

  const aspect = ratio === '1/1' ? 1 : ratio === '3/4' ? 4/3 : ratio === '4/5' ? 5/4 : 1.25;
  const viewH = Math.round(dims.width * aspect);

  return (
    <svg
      className={`jm-glyph ${className}`}
      viewBox={`0 0 ${dims.width} ${viewH}`}
      preserveAspectRatio="xMidYMid meet"
      role="img"
      aria-label={label || `${glyph} placeholder`}
      style={{ width: '100%', height: '100%', display: 'block', background: bg }}
    >
      <defs>
        <radialGradient id={haloId} cx="50%" cy="48%" r="55%">
          <stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.55"/>
          <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="100%" height="100%" fill={bg}/>
      <ellipse cx={dims.width/2} cy={viewH/2 + 10} rx={dims.width*0.42} ry={viewH*0.32} fill={`url(#${haloId})`}/>
      <g transform={`translate(0, ${(viewH - 500)/2})`}>
        {renderGlyph()}
      </g>
    </svg>
  );
}

window.JmProductGlyph = JmProductGlyph;

// ============================================================
// ProductImage — ảnh sản phẩm thật khi có, nếu không thì glyph.
//   src     : đường dẫn ảnh (ưu tiên)
//   product : lấy ảnh đầu tiên của sản phẩm
// ============================================================
function JmProductImage({ src, product, glyph, material, ratio = '4/5', tint, alt = '' }) {
  const img = src || (product && product.images && product.images[0]);
  if (img) return <img className="jm-glyph jm-photo" src={img} alt={alt} loading="lazy"/>;
  const g = glyph || (product && product.glyph) || 'ring';
  const m = material || (product && product.material);
  const tone = m === 'silver-925' || m === 'platinum' ? 'silver' : 'gold';
  return <JmProductGlyph glyph={g} tone={tone} ratio={ratio} tint={tint}/>;
}

window.JmProductImage = JmProductImage;