// Isometric SVG drawings. Data comes from the API.

const IsoShadow = ({ cx = 70, cy = 118, rx = 48, ry = 6, opacity = 0.18 }) => (
  <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill="rgba(21,19,14,1)" opacity={opacity} />
);

const ProductArt = {
  box: () => (
    <g>
      <IsoShadow />
      <g>
        <path d="M22 76 L70 56 L118 76 L70 96 Z" fill="#E8D9BC" stroke="#15130E" strokeWidth="1"/>
        <path d="M22 76 L22 92 L70 112 L70 96 Z" fill="#C9A77A" stroke="#15130E" strokeWidth="1"/>
        <path d="M118 76 L118 92 L70 112 L70 96 Z" fill="#B28F63" stroke="#15130E" strokeWidth="1"/>
      </g>
      <g transform="translate(0,-28)">
        <path d="M22 76 L70 56 L118 76 L70 96 Z" fill="#F2E6CC" stroke="#15130E" strokeWidth="1"/>
        <path d="M22 76 L22 82 L70 102 L70 96 Z" fill="#D9BC8F" stroke="#15130E" strokeWidth="1"/>
        <path d="M118 76 L118 82 L70 102 L70 96 Z" fill="#C4A271" stroke="#15130E" strokeWidth="1"/>
        <rect x="60" y="56" width="20" height="3" fill="#15130E" opacity="0.5" transform="skewY(-22)"/>
      </g>
    </g>
  ),
  paper: () => (
    <g>
      <IsoShadow rx={44} />
      {[0,1,2].map(i => (
        <g key={i} transform={`translate(0 ${-i*3})`}>
          <path d={`M24 86 L70 66 L116 86 L70 106 Z`} fill={i===2?'#FAF5EA':'#F0E8D4'} stroke="#15130E" strokeWidth="0.8"/>
          {i===2 && <path d="M50 80 L90 80 M46 86 L94 86 M50 92 L90 92" stroke="#15130E" strokeWidth="0.5" opacity="0.25"/>}
        </g>
      ))}
    </g>
  ),
  frybox: () => (
    <g>
      <IsoShadow rx={38} />
      <path d="M38 104 L46 48 L94 48 L102 104 Z" fill="#E8D9BC" stroke="#15130E" strokeWidth="1"/>
      <path d="M38 104 L46 48 L78 44 L98 70 L102 104 Z" fill="#F2E6CC" stroke="#15130E" strokeWidth="1"/>
      <path d="M48 54 L76 50 L94 72 L96 92 Z" fill="#15130E" opacity="0.12"/>
      <rect x="55" y="78" width="24" height="10" fill="var(--accent)" opacity="0.85" rx="1"/>
    </g>
  ),
  bucket: () => (
    <g>
      <IsoShadow rx={42} />
      <path d="M32 52 L38 108 L102 108 L108 52 Z" fill="#F2E6CC" stroke="#15130E" strokeWidth="1"/>
      <ellipse cx="70" cy="52" rx="38" ry="10" fill="#FAF5EA" stroke="#15130E" strokeWidth="1"/>
      <ellipse cx="70" cy="52" rx="32" ry="7" fill="none" stroke="#15130E" strokeWidth="0.5" opacity="0.3"/>
      <path d="M35 76 L105 76" stroke="var(--accent)" strokeWidth="4" opacity="0.85"/>
      <path d="M35 82 L105 82" stroke="#15130E" strokeWidth="0.8" opacity="0.4"/>
    </g>
  ),
  nuggetbox: () => (
    <g>
      <IsoShadow rx={40} />
      <path d="M26 84 L70 66 L114 84 L70 102 Z" fill="#F2E6CC" stroke="#15130E" strokeWidth="1"/>
      <path d="M26 84 L26 92 L70 110 L70 102 Z" fill="#D9BC8F" stroke="#15130E" strokeWidth="1"/>
      <path d="M114 84 L114 92 L70 110 L70 102 Z" fill="#C4A271" stroke="#15130E" strokeWidth="1"/>
      <path d="M46 80 L70 70 L94 80" stroke="#15130E" strokeWidth="0.6" fill="none" opacity="0.3"/>
    </g>
  ),
  bag: () => (
    <g>
      <IsoShadow rx={36} />
      <path d="M36 50 L36 108 L80 120 L80 62 Z" fill="#C9A77A" stroke="#15130E" strokeWidth="1"/>
      <path d="M80 62 L80 120 L108 108 L108 50 Z" fill="#B28F63" stroke="#15130E" strokeWidth="1"/>
      <path d="M36 50 L80 62 L108 50 L70 40 Z" fill="#DCBF94" stroke="#15130E" strokeWidth="1"/>
      <path d="M46 46 Q54 28 62 46" stroke="#15130E" strokeWidth="1.2" fill="none"/>
      <path d="M84 45 Q92 29 100 46" stroke="#15130E" strokeWidth="1.2" fill="none"/>
      <path d="M80 62 L80 120" stroke="#15130E" strokeWidth="0.6" opacity="0.4"/>
    </g>
  ),
  wipe: () => (
    <g>
      <IsoShadow rx={32} />
      <path d="M32 80 L70 68 L108 80 L70 92 Z" fill="#FAF5EA" stroke="#15130E" strokeWidth="1"/>
      <path d="M32 80 L32 84 L70 96 L70 92 Z" fill="#E8DFC8" stroke="#15130E" strokeWidth="1"/>
      <path d="M108 80 L108 84 L70 96 L70 92 Z" fill="#D4C9AC" stroke="#15130E" strokeWidth="1"/>
      <rect x="56" y="78" width="28" height="6" fill="var(--accent)" opacity="0.85" transform="skewY(-12) translate(0 -4)"/>
    </g>
  ),
  napkin: () => (
    <g>
      <IsoShadow rx={38} />
      <path d="M30 82 L70 62 L110 82 L70 102 Z" fill="#FAF5EA" stroke="#15130E" strokeWidth="1"/>
      <path d="M30 82 L30 88 L70 108 L70 102 Z" fill="#E8DFC8" stroke="#15130E" strokeWidth="1"/>
      <path d="M110 82 L110 88 L70 108 L70 102 Z" fill="#D4C9AC" stroke="#15130E" strokeWidth="1"/>
      <path d="M50 72 L90 72" stroke="#15130E" strokeWidth="0.5" opacity="0.3"/>
      <circle cx="70" cy="82" r="4" fill="var(--accent)" opacity="0.85"/>
    </g>
  ),
  saucecup: () => (
    <g>
      <IsoShadow rx={26} />
      <path d="M48 70 L54 104 L86 104 L92 70 Z" fill="#F2E6CC" stroke="#15130E" strokeWidth="1"/>
      <ellipse cx="70" cy="70" rx="22" ry="6" fill="#FAF5EA" stroke="#15130E" strokeWidth="1"/>
      <ellipse cx="70" cy="70" rx="18" ry="4" fill="var(--accent)" opacity="0.6"/>
    </g>
  ),
  liner: () => (
    <g>
      <IsoShadow rx={46} />
      <path d="M18 84 L60 64 L122 80 L80 100 Z" fill="#FAF5EA" stroke="#15130E" strokeWidth="1"/>
      <path d="M18 84 L18 88 L80 104 L80 100 Z" fill="#E8DFC8" stroke="#15130E" strokeWidth="1"/>
      <path d="M122 80 L122 84 L80 104 L80 100 Z" fill="#D4C9AC" stroke="#15130E" strokeWidth="1"/>
      <path d="M44 80 L92 78 M40 86 L96 84 M38 92 L94 90" stroke="#15130E" strokeWidth="0.4" opacity="0.3"/>
    </g>
  ),
};

const ProductThumb = ({ kind, size = 44 }) => {
  const Art = ProductArt[kind] || ProductArt.box;
  return (
    <svg width={size} height={size} viewBox="0 0 140 140" style={{display:'block'}}>
      <Art />
    </svg>
  );
};

// Prefers the uploaded hero photo; falls back to the isometric illustration
// if no photo exists or the URL fails to load.
const ProductImage = ({ product, size = 44, round = 0, fit = 'cover' }) => {
  const url = product?.hero?.url || product?.images?.[0]?.url || product?.hero_url || null;
  const [broken, setBroken] = React.useState(false);
  if (url && !broken) {
    return (
      <img
        src={url}
        alt={product.name || ''}
        onError={() => setBroken(true)}
        style={{ width: size, height: size, objectFit: fit, borderRadius: round, display: 'block' }}
      />
    );
  }
  return <ProductThumb kind={product?.kind || 'box'} size={size} />;
};

// Large scene rendering — uses photo when present, filling the slot while
// keeping the shadow feel via a subtle gradient backdrop.
const ProductScenePicture = ({ product, size }) => {
  const url = product?.hero?.url || product?.images?.[0]?.url || null;
  const [broken, setBroken] = React.useState(false);
  if (url && !broken) {
    return (
      <div style={{ position: 'relative', width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img
          src={url}
          alt={product.name || ''}
          onError={() => setBroken(true)}
          style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain', filter: 'drop-shadow(0 10px 20px rgba(21,19,14,0.18))' }}
        />
      </div>
    );
  }
  const Art = ProductArt[product?.kind] || ProductArt.box;
  return (
    <svg viewBox="0 0 140 140" width="100%" height="100%" style={{ maxWidth: 180 }}>
      <Art />
    </svg>
  );
};

const tierPrice = (base) => [
  { qty: 10000,  unit: +(base * 1.00).toFixed(3) },
  { qty: 20000,  unit: +(base * 0.82).toFixed(3) },
  { qty: 50000,  unit: +(base * 0.66).toFixed(3) },
  { qty: 100000, unit: +(base * 0.52).toFixed(3) },
];

Object.assign(window, { ProductArt, ProductThumb, ProductImage, ProductScenePicture, tierPrice });