// Art tile — renders real IG artwork when available, falls back to swatch.

const ArtPlaceholder = ({ artist, variant = 0, showTag = true, forceBlock = false, imageField = 'image_local' }) => {
  const imgSrc = !forceBlock && artist[imageField] ? artist[imageField] : null;
  if (imgSrc) {
    return (
      <div className="art-image">
        <img src={imgSrc} alt={(artist.name || artist.instagram_handle) + ' — recent work'} loading="lazy" />
      </div>
    );
  }
  const [c1, c2, c3] = artist.swatch;
  const seed = hashString(artist.id) + variant;
  const v = seed % 6;

  let bgStyle = {};
  let shapes = [];

  // Background treatments
  if (v === 0) {
    bgStyle = { background: `linear-gradient(135deg, ${c1} 0%, ${c1} 55%, ${c2} 55%, ${c2} 100%)` };
  } else if (v === 1) {
    bgStyle = { background: `linear-gradient(180deg, ${c2} 0%, ${c1} 100%)` };
  } else if (v === 2) {
    bgStyle = { background: c1 };
  } else if (v === 3) {
    bgStyle = {
      background: `repeating-linear-gradient(110deg, ${c1} 0 24px, ${darken(c1, 0.08)} 24px 48px)`,
    };
  } else if (v === 4) {
    bgStyle = { background: `radial-gradient(circle at 32% 38%, ${c2} 0%, ${c1} 60%, ${darken(c1, 0.15)} 100%)` };
  } else {
    bgStyle = { background: c1 };
  }

  // Shape overlays
  if (v === 0) {
    shapes.push({ type: 'circle', size: 62, x: 22, y: 58, color: c3 });
  } else if (v === 1) {
    shapes.push({ type: 'rect', w: 46, h: 72, x: 26, y: 14, color: c3 });
  } else if (v === 2) {
    shapes.push({ type: 'circle', size: 52, x: 30, y: 34, color: c2 });
    shapes.push({ type: 'circle', size: 28, x: 60, y: 68, color: c3 });
  } else if (v === 3) {
    shapes.push({ type: 'rect', w: 70, h: 36, x: 15, y: 44, color: c3 });
  } else if (v === 4) {
    shapes.push({ type: 'circle', size: 44, x: 52, y: 54, color: c3 });
  } else {
    shapes.push({ type: 'rect', w: 100, h: 38, x: 0, y: 31, color: c2 });
    shapes.push({ type: 'circle', size: 28, x: 64, y: 26, color: c3 });
  }

  return (
    <div className="art-placeholder">
      <div className="ap-bg" style={bgStyle} />
      {shapes.map((s, i) => (
        <div
          key={i}
          className="ap-shape"
          style={{
            left: `${s.x}%`,
            top: `${s.y}%`,
            width: s.type === 'circle' ? `${s.size}%` : `${s.w}%`,
            height: s.type === 'circle' ? `${s.size}%` : `${s.h}%`,
            background: s.color,
            borderRadius: s.type === 'circle' ? '50%' : '0',
            transform: s.type === 'rect' && v === 1 ? 'rotate(-2deg)' : 'none',
          }}
        />
      ))}
      {showTag && (
        <div className="art-tag">
          {artist.medium.replace('-', ' ')} · placeholder
        </div>
      )}
    </div>
  );
};

function hashString(s) {
  let h = 0;
  for (let i = 0; i < s.length; i++) {
    h = ((h << 5) - h) + s.charCodeAt(i);
    h |= 0;
  }
  return Math.abs(h);
}

function darken(hex, amt) {
  const c = hex.replace('#', '');
  const r = Math.max(0, parseInt(c.slice(0, 2), 16) - Math.round(255 * amt));
  const g = Math.max(0, parseInt(c.slice(2, 4), 16) - Math.round(255 * amt));
  const b = Math.max(0, parseInt(c.slice(4, 6), 16) - Math.round(255 * amt));
  return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
}

window.ArtPlaceholder = ArtPlaceholder;