/* global React, StatusBadge, WAIcon, waLink */
const { useState: useStateM, useEffect: useEffectM } = React;

function Modal({ open, onClose, children, wide }) {
  useEffectM(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className={"modal gold-frame corners" + (wide ? " wide" : "")} onClick={(e) => e.stopPropagation()}>
        <i className="tl" /><i className="tr" /><i className="bl" /><i className="br" />
        <button className="modal-close" onClick={onClose} aria-label="Cerrar">×</button>
        {children}
      </div>
    </div>
  );
}

function EjemplarModal({ spec, onClose }) {
  const sold = spec && spec.status === "Vendido";
  return (
    <Modal open={!!spec} onClose={onClose} wide>
      {spec && (
        <div className="rm-grid">
          <div className="rm-media">
            <image-slot id={"modal-" + spec.id} class="rm-slot" shape="rect" placeholder="Foto pendiente — consultar por WhatsApp"></image-slot>
            <StatusBadge status={spec.status} />
          </div>
          <div className="rm-body">
            <p className="eyebrow">{spec.cat}</p>
            <h2 className="gold-text rm-name">{spec.code}</h2>
            <p className="rm-line">{spec.line}</p>
            <p className="rm-note">{spec.note}</p>
            <div className="rm-stats">
              <div><b>{spec.age}</b><span>Edad aprox.</span></div>
              <div><b>{spec.status}</b><span>Estado</span></div>
            </div>
            <div className="rm-fee">
              <span>Precio</span>
              <strong className="gold-text">{spec.price}<em> MXN</em></strong>
            </div>
            <p className="rm-fine">El precio no incluye envío. El traslado se cotiza por separado según destino y ruta.</p>
            {!sold ? (
              <a className="btn-gold" href={waLink("Hola, me interesa el ejemplar " + spec.code + " (" + spec.line + "). ¿Sigue disponible?")} target="_blank" rel="noopener noreferrer">
                <WAIcon size={15} /> Preguntar por este ejemplar
              </a>
            ) : (
              <a className="btn-ghost" href={waLink("Hola, vi el ejemplar " + spec.code + ". ¿Tienen ejemplares similares disponibles?")} target="_blank" rel="noopener noreferrer">
                Consultar ejemplares similares
              </a>
            )}
          </div>
        </div>
      )}
    </Modal>
  );
}

Object.assign(window, { Modal, EjemplarModal });