// placeholders.jsx
// Oil-painting-feel placeholders. No hand-drawn figures — just layered radial
// gradients + noise + paper texture to evoke the feel of a painting plate.
// Each placeholder shows a small monospace label describing the painting it stands in for.

const PAINT_PALETTES = {
  'portrait-warm':   ['#d89a82', '#b86a58', '#5c2a26', '#f0d6c2', '#2a1715'],
  'portrait-cool':   ['#a8b8c0', '#5e6f7a', '#2b3840', '#e8d6c8', '#3d2a26'],
  'still-pear':      ['#c8a868', '#8a6a3a', '#3d3220', '#e8d8b8', '#1f1a10'],
  'still-pome':      ['#a84040', '#702020', '#2a1010', '#e8c4b0', '#1a0806'],
  'abstract-blush':  ['#e8b4a8', '#c88878', '#8c5a4a', '#f5ddd0', '#4a2a22'],
  'abstract-sage':   ['#9da890', '#6a7560', '#3d4838', '#d8dcc8', '#28302a'],
  'abstract-ochre':  ['#d8a858', '#a07838', '#584020', '#e8d8b0', '#2a1e10'],
  'figure-rose':     ['#d08878', '#8a4a3a', '#3d1e18', '#e8c8b8', '#1f0e08'],
  'figure-indigo':   ['#6878a0', '#3a4868', '#1a2038', '#c8c8d8', '#0f1020'],
  'landscape-dusk':  ['#d8a890', '#a07868', '#4a3828', '#f0d0b8', '#2a1a0f'],
  'floral-peach':    ['#f0c0a8', '#d89080', '#a06050', '#fae0d0', '#5a3028'],
};

// Turn a palette into a multi-layer "painterly" background.
function paintBg(key) {
  const p = PAINT_PALETTES[key] || PAINT_PALETTES['abstract-blush'];
  const [a, b, c, d, e] = p;
  // Layer radial blobs at irregular positions — feels like brushed paint.
  return `
    radial-gradient(ellipse 60% 80% at 28% 35%, ${a} 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 75% 65%, ${b} 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 55% 20%, ${d} 0%, transparent 50%),
    radial-gradient(ellipse 45% 35% at 20% 85%, ${c} 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 90% 15%, ${a} 0%, transparent 50%),
    linear-gradient(135deg, ${e} 0%, ${c} 100%)
  `;
}

// A reusable SVG noise/brushstroke overlay — creates the canvas/oil texture feel.
const BRUSH_NOISE_SVG = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'>
  <filter id='n'>
    <feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/>
    <feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.35 0'/>
  </filter>
  <filter id='b'>
    <feTurbulence type='turbulence' baseFrequency='0.015' numOctaves='2' seed='2'/>
    <feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.12 0'/>
  </filter>
  <rect width='100%' height='100%' filter='url(%23n)'/>
  <rect width='100%' height='100%' filter='url(%23b)'/>
</svg>
`)}`;

const CANVAS_WEAVE_SVG = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'>
  <rect width='6' height='6' fill='transparent'/>
  <path d='M0 3 L6 3 M3 0 L3 6' stroke='rgba(255,255,255,0.04)' stroke-width='0.5'/>
</svg>
`)}`;

function PaintedPlaceholder({
  palette = 'abstract-blush',
  label,
  aspect = '3 / 4',
  seed = 0,
  showLabel = true,
  style = {},
  className = '',
  onClick,
  src,                 // real painting image; falls back to the painterly gradient
  fit = 'cover',       // 'cover' for grids, 'contain' to show a whole framed piece
  alt = '',
}) {
  // Per-instance slight rotation of the blob layers via CSS custom props
  const rot = (seed * 37) % 360;
  const shift = ((seed * 13) % 40) - 20;

  // When a real image is provided, render it (with a graceful fallback to the
  // gradient if it fails to load) inside the same framed, labelled container.
  if (src) {
    return (
      <div
        className={`painted-ph has-image ${className}`}
        onClick={onClick}
        style={{
          position: 'relative',
          aspectRatio: aspect,
          width: '100%',
          background: fit === 'contain' ? 'var(--cream, #EFE4D6)' : paintBg(palette),
          borderRadius: 2,
          overflow: 'hidden',
          boxShadow:
            '0 1px 2px rgba(60,35,25,0.08), 0 12px 28px -12px rgba(60,35,25,0.18), inset 0 0 0 1px rgba(255,255,255,0.04)',
          cursor: onClick ? 'pointer' : 'default',
          ...style,
        }}
      >
        <img
          src={src}
          alt={alt}
          loading="lazy"
          onError={(e) => { e.currentTarget.style.display = 'none'; }}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: fit,
            display: 'block',
          }}
        />
        {showLabel && label && (
          <div
            style={{
              position: 'absolute', left: 10, bottom: 10,
              fontFamily: "'JetBrains Mono', ui-monospace, monospace",
              fontSize: 9, letterSpacing: '0.08em',
              color: 'rgba(255,244,235,0.92)', textTransform: 'uppercase',
              padding: '3px 6px', background: 'rgba(20,10,8,0.42)',
              backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)',
              borderRadius: 2, maxWidth: 'calc(100% - 20px)', pointerEvents: 'none',
            }}
          >
            {label}
          </div>
        )}
      </div>
    );
  }

  return (
    <div
      className={`painted-ph ${className}`}
      onClick={onClick}
      style={{
        position: 'relative',
        aspectRatio: aspect,
        width: '100%',
        background: paintBg(palette),
        backgroundBlendMode: 'multiply, screen, normal, normal, normal, normal',
        borderRadius: 2,
        overflow: 'hidden',
        boxShadow:
          '0 1px 2px rgba(60,35,25,0.08), 0 12px 28px -12px rgba(60,35,25,0.18), inset 0 0 0 1px rgba(255,255,255,0.04)',
        transform: `rotate(${shift * 0.02}deg)`,
        cursor: onClick ? 'pointer' : 'default',
        ...style,
      }}
    >
      {/* canvas weave */}
      <div
        style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url("${CANVAS_WEAVE_SVG}")`,
          backgroundSize: '6px 6px',
          opacity: 0.6,
          mixBlendMode: 'overlay',
          pointerEvents: 'none',
        }}
      />
      {/* brush noise */}
      <div
        style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url("${BRUSH_NOISE_SVG}")`,
          backgroundSize: '220px 220px',
          opacity: 0.55,
          mixBlendMode: 'multiply',
          transform: `rotate(${rot}deg) scale(1.3)`,
          pointerEvents: 'none',
        }}
      />
      {/* soft edge vignette to feel like paint fading to linen */}
      <div
        style={{
          position: 'absolute', inset: 0,
          background:
            'radial-gradient(ellipse at center, transparent 55%, rgba(247,241,234,0.35) 100%)',
          pointerEvents: 'none',
        }}
      />
      {/* monospace label */}
      {showLabel && label && (
        <div
          style={{
            position: 'absolute',
            left: 10, bottom: 10,
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
            fontSize: 9,
            letterSpacing: '0.08em',
            color: 'rgba(255,244,235,0.78)',
            textTransform: 'uppercase',
            padding: '3px 6px',
            background: 'rgba(20,10,8,0.32)',
            backdropFilter: 'blur(4px)',
            WebkitBackdropFilter: 'blur(4px)',
            borderRadius: 2,
            maxWidth: 'calc(100% - 20px)',
            pointerEvents: 'none',
          }}
        >
          {label}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PaintedPlaceholder, PAINT_PALETTES });