/* ============================================
   Retratos: foto real (img/[id].jpg|png|webp) si existe,
   si no, silueta SVG editorial con iniciales.
   SUBIR FOTOS: carpeta img/ con el nombre del personaje
   en minúsculas: lucia.jpg, mateo.jpg, carmen.jpg...
   ============================================ */

// Cache global: probamos cada foto UNA sola vez por sesión
const PHOTO_CACHE = {};

function probePhoto(id) {
  if (PHOTO_CACHE[id]) return Promise.resolve(PHOTO_CACHE[id]);
  const exts = ['jpg', 'png', 'webp'];
  return new Promise(resolve => {
    let i = 0;
    const tryNext = () => {
      if (i >= exts.length) { PHOTO_CACHE[id] = null; return resolve(null); }
      const url = 'img/' + id + '.' + exts[i++];
      const im = new Image();
      im.onload = () => { PHOTO_CACHE[id] = url; resolve(url); };
      im.onerror = tryNext;
      im.src = url;
    };
    tryNext();
  });
}

function usePhoto(id) {
  const [url, setUrl] = useState(PHOTO_CACHE[id] !== undefined ? PHOTO_CACHE[id] : undefined);
  useEffect(() => {
    let alive = true;
    if (PHOTO_CACHE[id] !== undefined) { setUrl(PHOTO_CACHE[id]); return; }
    probePhoto(id).then(u => { if (alive) setUrl(u); });
    return () => { alive = false; };
  }, [id]);
  return url;
}

const PORTRAIT_PALETTES = {
  lucia:  { bg1: '#E7D9C6', bg2: '#C9A97A', ink: '#3D2E1E', init: 'L' },
  mateo:  { bg1: '#C4826B', bg2: '#8F4A3A', ink: '#2A1610', init: 'M' },
  carmen: { bg1: '#D69C7A', bg2: '#B15839', ink: '#3D1E10', init: 'C' },
  pablo:  { bg1: '#B5A88A', bg2: '#7A6E52', ink: '#26221A', init: 'P' },
  nerea:  { bg1: '#A8B5B8', bg2: '#5F7378', ink: '#1F2A2D', init: 'N' },
  diego:  { bg1: '#9CAF8B', bg2: '#4A5D3A', ink: '#1E2617', init: 'D' },
  alba:   { bg1: '#E4DBCB', bg2: '#B8A98F', ink: '#3A342A', init: 'A' },
  javier: { bg1: '#C7A97C', bg2: '#8F6E3D', ink: '#2E2416', init: 'J' },
  sara:   { bg1: '#D8B4B4', bg2: '#A66565', ink: '#3D1F1F', init: 'S' },
  raul:   { bg1: '#9FA8B5', bg2: '#5A6373', ink: '#1E2530', init: 'R' },
  elena:  { bg1: '#D4C4A8', bg2: '#9A7F52', ink: '#332815', init: 'E' },
  ivan:   { bg1: '#BFA890', bg2: '#7D6549', ink: '#2A2015', init: 'I' },
};

// IDs conocidos (personajes demo). IDs reales de usuario ('u3', …) usan
// paleta derivada por hash + inicial de su nombre (prop `label`).
const FALLBACK_IDS = Object.keys(PORTRAIT_PALETTES);
function hashId(s) { let h = 0; s = String(s); for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return Math.abs(h); }

// Silueta abstracta editorial (cabeza + hombros)
function SilhouetteSvg({ ink, opacity = 0.28 }) {
  return (
    <svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
      <defs>
        <linearGradient id="silGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={ink} stopOpacity="0"/>
          <stop offset="60%" stopColor={ink} stopOpacity={opacity * 0.6}/>
          <stop offset="100%" stopColor={ink} stopOpacity={opacity}/>
        </linearGradient>
      </defs>
      {/* hombros */}
      <path d="M 20 400 C 30 300, 90 260, 150 260 C 210 260, 270 300, 280 400 Z" fill="url(#silGrad)"/>
      {/* cuello */}
      <rect x="128" y="220" width="44" height="55" rx="8" fill={ink} opacity={opacity * 0.8}/>
      {/* cabeza */}
      <ellipse cx="150" cy="165" rx="62" ry="72" fill={ink} opacity={opacity}/>
    </svg>
  );
}

function Portrait({ id, tag, label, size = 'md', className = '', style = {}, showTag = true, children }) {
  const known = PORTRAIT_PALETTES[id];
  const p = known || PORTRAIT_PALETTES[FALLBACK_IDS[hashId(id) % FALLBACK_IDS.length]];
  const initSize = { xs: 40, sm: 56, md: 88, lg: 120, xl: 160 }[size] || 88;
  const photo = usePhoto(id);

  return (
    <div className={`portrait ${className}`}
         style={{
           background: photo ? '#141210' : `linear-gradient(140deg, ${p.bg1}, ${p.bg2})`,
           ...style,
         }}>
      {photo ? (
        <>
          <img src={photo} alt={id} style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}}/>
          {/* vignette suave sobre la foto real */}
          <div style={{
            position:'absolute', inset:0, pointerEvents:'none',
            background: 'radial-gradient(ellipse at 50% 30%, transparent 45%, rgba(0,0,0,.22) 100%)',
          }}/>
        </>
      ) : (
        <>
          <SilhouetteSvg ink={p.ink} opacity={0.32}/>
          <div className="portrait-init"
               style={{
                 fontSize: initSize,
                 color: p.ink,
                 mixBlendMode: 'multiply',
                 opacity: 0.85,
               }}>
            {known ? p.init : (label || id || '?').charAt(0).toUpperCase()}
          </div>
          {/* grano de foto */}
          <div style={{
            position:'absolute', inset:0, pointerEvents:'none',
            backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>\")",
            opacity: .35, mixBlendMode: 'multiply',
          }}/>
          {/* vignette */}
          <div style={{
            position:'absolute', inset:0, pointerEvents:'none',
            background: 'radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0,0,0,.18) 100%)',
          }}/>
        </>
      )}
      {showTag && tag && <div className="portrait-tag">{tag}</div>}
      {children}
    </div>
  );
}

window.Portrait = Portrait;
window.PORTRAIT_PALETTES = PORTRAIT_PALETTES;