/* eslint-disable react/prop-types */
/**
 * ImagePlaceholder · placeholder fotográfico mientras el cliente
 * aporta foto real. Cumple la directiva "No próximamente" del Brief 1:
 * en producción se reemplaza la URL; aquí muestra una pista del
 * encuadre esperado y mantiene proporción.
 *
 * Props:
 *   src       opcional - URL real (Unsplash/Pexels/CDN)
 *   alt       descripción accesible
 *   label     pista monospace ("CALLE VIVA · MTY · 16:9")
 *   ratio     aspect-ratio CSS (default "16/9")
 *   tone      'urban' | 'aerial' | 'residential' | 'industrial' | 'people' | 'construction'
 *   overlay   booleano - aplica overlay navy (para heroes)
 *   overlayOpacity  0-1
 */

const PLACEHOLDER_TONES = {
  urban:        ['#2A3F4D', '#3A5061'],
  aerial:       ['#1F3340', '#33495A'],
  residential:  ['#2E4452', '#3D5366'],
  industrial:   ['#1E2A33', '#2D3D49'],
  people:       ['#33485A', '#465D71'],
  construction: ['#3A2E1F', '#5C4A33'],
  copper:       ['#5e3a17', '#9a5e25'],
};

function ImagePlaceholder({
  src,
  alt = '',
  label = 'IMAGEN · 16:9',
  ratio = '16 / 9',
  tone = 'urban',
  overlay = false,
  overlayOpacity = 0.35,
  style = {},
  className = '',
}) {
  const [c1, c2] = PLACEHOLDER_TONES[tone] || PLACEHOLDER_TONES.urban;

  const fallbackSvg = `data:image/svg+xml;utf8,${encodeURIComponent(`
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'>
      <defs>
        <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>
          <stop offset='0' stop-color='${c1}'/>
          <stop offset='1' stop-color='${c2}'/>
        </linearGradient>
        <pattern id='p' width='8' height='8' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>
          <rect width='8' height='8' fill='url(#g)'/>
          <line x1='0' y1='0' x2='0' y2='8' stroke='rgba(255,255,255,0.04)' stroke-width='1'/>
        </pattern>
      </defs>
      <rect width='1600' height='900' fill='url(#p)'/>
    </svg>
  `)}`;

  return (
    <div
      className={className}
      style={{
        position: 'relative',
        width: '100%',
        aspectRatio: ratio,
        overflow: 'hidden',
        background: `url("${fallbackSvg}") center/cover`,
        ...style,
      }}
      role={alt ? 'img' : 'presentation'}
      aria-label={alt || undefined}
    >
      {src && (
        <img
          src={src}
          alt={alt}
          loading="lazy"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
          }}
          onError={(e) => { e.currentTarget.style.display = 'none'; }}
        />
      )}
      {!src && (
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
          padding: '20px',
          fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
          fontSize: '11px',
          letterSpacing: '0.12em',
          color: 'rgba(250, 249, 244, 0.55)',
          textTransform: 'uppercase',
        }}>
          {label}
        </div>
      )}
      {overlay && (
        <div style={{
          position: 'absolute', inset: 0,
          background: `rgba(33, 52, 64, ${overlayOpacity})`,
        }} />
      )}
    </div>
  );
}

window.ImagePlaceholder = ImagePlaceholder;