// product-visual.jsx — プレースホルダー商品ビジュアル
// プロシージャルなSVG/CSSで「液体メタル風」「ガラス風」のオブジェを描画

function ProductVisual({ product, theme = "obsidian" }) {
  const { hue, id, cat } = product;

  // テーマごとに色味を変える
  const palette = {
    obsidian: {
      base: `oklch(0.22 0.04 ${hue})`,
      mid: `oklch(0.42 0.08 ${hue})`,
      hi: `oklch(0.78 0.10 ${hue})`,
      glow: `oklch(0.88 0.14 ${hue})`,
    },
    porcelain: {
      base: `oklch(0.92 0.02 ${hue})`,
      mid: `oklch(0.78 0.04 ${hue})`,
      hi: `oklch(0.55 0.10 ${hue})`,
      glow: `oklch(0.65 0.18 ${hue})`,
    },
    hologram: {
      base: `oklch(0.30 0.08 ${hue})`,
      mid: `oklch(0.55 0.18 ${(hue + 60) % 360})`,
      hi: `oklch(0.85 0.20 ${(hue + 120) % 360})`,
      glow: `oklch(0.92 0.24 ${(hue + 180) % 360})`,
    },
  }[theme];

  // 商品IDをハッシュしてシェイプを決定
  const shapeIdx = parseInt(id.replace(/\D/g, ""), 10) % 4;

  return (
    <div className="pv-wrap">
      <svg viewBox="0 0 200 200" className="pv-svg" preserveAspectRatio="xMidYMid meet">
        <defs>
          <radialGradient id={`grad-${id}`} cx="35%" cy="30%" r="80%">
            <stop offset="0%" stopColor={palette.glow} stopOpacity="0.95" />
            <stop offset="35%" stopColor={palette.hi} stopOpacity="0.85" />
            <stop offset="70%" stopColor={palette.mid} stopOpacity="0.9" />
            <stop offset="100%" stopColor={palette.base} stopOpacity="1" />
          </radialGradient>
          <linearGradient id={`shine-${id}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.6" />
            <stop offset="40%" stopColor="#fff" stopOpacity="0" />
            <stop offset="100%" stopColor="#fff" stopOpacity="0.15" />
          </linearGradient>
          <filter id={`blur-${id}`}>
            <feGaussianBlur stdDeviation="2" />
          </filter>
        </defs>

        {/* 背景の浮遊光 */}
        <circle cx="100" cy="100" r="85" fill={palette.base} opacity="0.4" filter={`url(#blur-${id})`} />

        {shapeIdx === 0 && (
          <>
            {/* 縦長カプセル（万年筆・ボトル系） */}
            <rect x="78" y="38" width="44" height="124" rx="22" fill={`url(#grad-${id})`} />
            <rect x="86" y="46" width="14" height="80" rx="7" fill={`url(#shine-${id})`} />
            <circle cx="100" cy="50" r="8" fill={palette.glow} opacity="0.7" />
          </>
        )}
        {shapeIdx === 1 && (
          <>
            {/* 球体（香水・ディフューザー系） */}
            <circle cx="100" cy="105" r="62" fill={`url(#grad-${id})`} />
            <ellipse cx="80" cy="80" rx="22" ry="14" fill="#fff" opacity="0.35" />
            <ellipse cx="115" cy="135" rx="14" ry="6" fill={palette.glow} opacity="0.4" />
          </>
        )}
        {shapeIdx === 2 && (
          <>
            {/* 立方体・パズル系 */}
            <polygon points="100,40 160,75 160,140 100,175 40,140 40,75" fill={`url(#grad-${id})`} />
            <polygon points="100,40 160,75 100,110 40,75" fill="#fff" opacity="0.18" />
            <polygon points="100,110 100,175 40,140 40,75" fill="#000" opacity="0.18" />
          </>
        )}
        {shapeIdx === 3 && (
          <>
            {/* 有機的な液滴 */}
            <path
              d="M 100 30 C 145 30 165 70 165 110 C 165 150 135 175 100 175 C 65 175 35 150 35 110 C 35 70 55 30 100 30 Z"
              fill={`url(#grad-${id})`}
            />
            <ellipse cx="78" cy="75" rx="20" ry="30" fill="#fff" opacity="0.3" transform="rotate(-20 78 75)" />
          </>
        )}

        {/* 反射ハイライト */}
        <ellipse cx="75" cy="65" rx="10" ry="22" fill="#fff" opacity="0.45" transform="rotate(-25 75 65)" />
      </svg>
      <div className="pv-cat">{cat}</div>
    </div>
  );
}

window.ProductVisual = ProductVisual;