/* ProductLightbox — modal de detalle de producto.
   Se abre al hacer click en cualquier foto del portafolio. Cierra con ESC,
   click en el backdrop o botón X. Lee la ficha desde window.productData. */

const ProductLightbox = ({ src, onClose, t, lang }) => {
  const data = src ? window.productData?.[src] : null;
  const open = Boolean(data);

  // ESC para cerrar + bloquear scroll del body
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open, onClose]);

  if (!open) return null;

  const pick = (field) => {
    if (!field) return '';
    if (typeof field === 'string') return field;
    return field[lang] || field.es || '';
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 1000,
        background: 'rgba(8,8,10,0.88)',
        backdropFilter: 'blur(6px)',
        WebkitBackdropFilter: 'blur(6px)',
        display: 'grid',
        placeItems: 'center',
        padding: 24,
        animation: 'lb-fade 200ms ease',
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="lightbox-card"
        style={{
          background: 'var(--bg-1)',
          color: 'var(--ink)',
          width: 'min(1200px, 100%)',
          maxHeight: 'calc(100vh - 48px)',
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
          overflow: 'hidden',
          position: 'relative',
          border: '1px solid var(--hairline)',
          boxShadow: '0 30px 80px rgba(0,0,0,0.5)',
        }}
      >
        {/* Botón cerrar */}
        <button
          onClick={onClose}
          aria-label={t('Cerrar', 'Close')}
          style={{
            position: 'absolute',
            top: 12, right: 12,
            zIndex: 2,
            width: 38, height: 38,
            borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.15)',
            background: 'rgba(0,0,0,0.55)',
            color: '#fff',
            cursor: 'pointer',
            display: 'grid',
            placeContent: 'center',
            backdropFilter: 'blur(6px)',
          }}
        >
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6">
            <line x1="2" y1="2" x2="12" y2="12" />
            <line x1="12" y1="2" x2="2" y2="12" />
          </svg>
        </button>

        {/* Imagen */}
        <div className="lightbox-image" style={{ background: '#0a0a0b', position: 'relative', minHeight: 320 }}>
          <img
            src={src}
            alt={pick(data.title)}
            style={{
              width: '100%',
              height: '100%',
              maxHeight: 'calc(100vh - 48px)',
              objectFit: 'cover',
              display: 'block',
            }}
          />
          <div style={{
            position: 'absolute', left: 12, bottom: 12,
            display: 'flex', gap: 8, flexWrap: 'wrap',
          }}>
            <span className="mono" style={{ background: 'rgba(0,0,0,0.7)', color: '#fff', padding: '4px 8px', fontSize: 10 }}>
              {pick(data.category)}
            </span>
            {data.measures && (
              <span className="mono" style={{ background: 'rgba(255,106,31,0.92)', color: '#fff', padding: '4px 8px', fontSize: 10 }}>
                {data.measures}
              </span>
            )}
          </div>
        </div>

        {/* Ficha */}
        <div className="lightbox-data" style={{ padding: 32, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div>
            <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 10, marginBottom: 10, letterSpacing: '0.14em' }}>
              {t('FICHA · ACEROLAB', 'PRODUCT · ACEROLAB')}
            </div>
            <h3 className="display" style={{
              fontSize: 'clamp(22px, 2.4vw, 32px)',
              lineHeight: 1.1,
              fontWeight: 500,
              letterSpacing: '-0.02em',
              margin: 0,
            }}>
              {pick(data.title)}
            </h3>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 1,
            background: 'var(--hairline)',
            border: '1px solid var(--hairline)',
          }}>
            {[
              { l: t('Cliente', 'Client'),       v: pick(data.client) },
              { l: t('Medidas', 'Measurements'), v: data.measures || '—' },
              { l: t('Material', 'Material'),    v: pick(data.material) },
              { l: t('Acabado', 'Finish'),       v: pick(data.finish) },
            ].map((row, i) => (
              <div key={i} style={{ background: 'var(--bg-1)', padding: '12px 14px' }}>
                <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.12em', marginBottom: 4 }}>
                  {row.l.toUpperCase()}
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.4 }}>{row.v || '—'}</div>
              </div>
            ))}
          </div>

          <div>
            <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.12em', marginBottom: 8 }}>
              {t('DESCRIPCIÓN DEL TRABAJO', 'PROJECT DESCRIPTION')}
            </div>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, margin: 0 }}>
              {pick(data.description)}
            </p>
          </div>

          {data.highlights && (
            <div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.12em', marginBottom: 8 }}>
                {t('CARACTERÍSTICAS', 'KEY FEATURES')}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {(data.highlights[lang] || data.highlights.es || []).map((h, i) => (
                  <li key={i} style={{
                    fontSize: 11,
                    padding: '5px 10px',
                    border: '1px solid var(--hairline)',
                    background: 'var(--bg-2)',
                    color: 'var(--ink)',
                  }}>
                    {h}
                  </li>
                ))}
              </ul>
            </div>
          )}

          <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 16, marginTop: 'auto', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a href="https://wa.me/525578680250?text=Hola%2C%20me%20interesa%20cotizar%20un%20producto%20similar%20al%20de%20su%20portafolio."
               target="_blank" rel="noopener"
               className="btn btn-primary"
               style={{ flex: 1, justifyContent: 'center' }}>
              {t('Cotizar similar', 'Quote similar')}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <button onClick={onClose} className="btn" style={{ flex: 1, justifyContent: 'center' }}>
              {t('Cerrar', 'Close')}
            </button>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
        @media (max-width: 800px) {
          .lightbox-card { grid-template-columns: 1fr !important; max-height: calc(100vh - 24px) !important; overflow-y: auto !important; }
          .lightbox-image { aspect-ratio: 4/3; min-height: 0 !important; }
        }
      `}</style>
    </div>
  );
};

window.ProductLightbox = ProductLightbox;