/* ============================================================
   PhotoFrame override with R2 image support
   ============================================================ */

function PhotoFrame({ photo, ratio, label = true, wm = true, wmPos = 'br', wmStyle = 'white',
                      temp = true, rounded = 'var(--r-md)', hover = false, className = '', style }) {
  const imageUrl = photo?.image_url || photo?.url || '';

  // When no ratio is forced and there's a real image with stored dimensions, use the
  // exact pixel ratio so objectFit:cover never clips the photo.
  let o = ratio;
  if (!o && imageUrl && photo?.res) {
    const parts = String(photo.res).split(/\s*[x×]\s*/i);
    const w = parseInt(parts[0]);
    const h = parseInt(parts[1]);
    if (w > 0 && h > 0) o = `${w}/${h}`;
  }
  if (!o) o = RATIO[photo?.o || 'v'];

  const tone = TONES[photo?.tone || 'rose'];
  const cat = (window.CATEGORIES.find(c => c.id === photo?.cat) || {}).label || 'Fotografia';

  return (
    <div className={`photo-frame ${hover ? 'pf-hover' : ''} ${className}`} style={{
      position: 'relative', width: '100%', aspectRatio: o, borderRadius: rounded,
      overflow: 'hidden', background: tone[1], ...style,
    }}>
      {imageUrl ? (
        <img
          className="pf-img"
          src={imageUrl}
          alt={photo?.alt || photo?.title || cat}
          loading="lazy"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
        />
      ) : (
        <div className="pf-img" style={{
          position: 'absolute', inset: 0,
          background: `
            radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.55), transparent 55%),
            radial-gradient(90% 80% at 85% 90%, ${hexA(tone[2], .55)}, transparent 60%),
            linear-gradient(150deg, ${tone[0]} 0%, ${tone[1]} 52%, ${tone[2]} 100%)`,
        }}>
          <div style={{ position: 'absolute', inset: 0, opacity: .14,
            backgroundImage: `repeating-linear-gradient(135deg, rgba(255,255,255,.7) 0 1.5px, transparent 1.5px 13px)` }} />
          {label && (
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', gap: 7, textAlign: 'center', padding: 16 }}>
              <Icon name="image" size={26} stroke={1.4} style={{ color: 'rgba(255,255,255,.85)' }} />
              <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 10.5,
                letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(70,50,60,.62)',
                background: 'rgba(255,255,255,.5)', padding: '4px 9px', borderRadius: 99, backdropFilter: 'blur(2px)' }}>
                {cat} - temporal
              </span>
            </div>
          )}
        </div>
      )}
      {wm && <Watermark position={wmPos} styleName={wmStyle} />}
      {temp && !imageUrl && (
        <span className="badge badge-temp" style={{ position: 'absolute', top: 10, left: 10, zIndex: 4,
          background: 'rgba(255,255,255,.82)', color: 'var(--sky-text)', backdropFilter: 'blur(3px)', fontSize: 10, padding: '4px 9px' }}>
          TEMPORAL
        </span>
      )}
    </div>
  );
}

window.PhotoFrame = PhotoFrame;