/* Portada de libro (placeholder editorial + carga de /covers/{asin}.{ext} si existe)
   y BookCard. */
(function () {
  const { useState } = React;

  // Motivo decorativo por categoría dentro del placeholder
  function Motif({ icon, color }) {
    return <span style={{ color }} aria-hidden="true"><Icon name={icon} size={46} strokeWidth={2.2} /></span>;
  }

  // Portada: intenta la imagen real; si no existe, placeholder con el título.
  // ↓ Pon COVERS_READY = true cuando las portadas estén en /public/covers/{ASIN}.{ext}
  const COVERS_READY = window.FUN_COVERS_READY === true;
  function Cover({ book, eager }) {
    const [ok, setOk] = useState(false);
    const [ratio, setRatio] = useState(null); // ancho/alto real de la portada
    const c = book.cat;
    return (
      <div className={"cover" + (ok ? " has-img" : "")}
        style={{ "--cc": c.color, "--ct": c.tint, aspectRatio: ratio || undefined }}>
        {/* Placeholder editorial */}
        <div className="cover-ph" style={{ display: ok ? "none" : "flex" }} aria-hidden={ok}>
          <div className="cover-ph-spine"></div>
          <div className="cover-ph-top">
            <span className="mono cover-ph-cat">{book.category}</span>
            <Motif icon={c.icon} color={c.color} />
          </div>
          <div className="cover-ph-title display">{book.title}</div>
          <div className="cover-ph-foot">
            <span className="mono">FUN · {book.asin}</span>
          </div>
        </div>
        {/* Imagen real (aparece sola al subirla a /public/covers) */}
        {COVERS_READY && (
          <img
            src={book.cover_image_url}
            alt={`${book.title} — Libro educativo para niños de ${book.age_range} años`}
            loading={eager ? "eager" : "lazy"}
            onLoad={(e) => { setOk(true); setRatio(e.target.naturalWidth + " / " + e.target.naturalHeight); }}
            onError={(e) => { e.currentTarget.style.display = "none"; }}
            style={{ opacity: ok ? 1 : 0 }}
            className="cover-img"
          />
        )}
      </div>
    );
  }

  function BookCard({ book, onOpen, eager }) {
    return (
      <article className="bookcard card-hover" onClick={() => onOpen(book)}>
        <button className="bookcard-cover" aria-label={`Ver ${book.title}`} onClick={(e) => { e.stopPropagation(); onOpen(book); }}>
          <Cover book={book} eager={eager} />
        </button>
        <div className="bookcard-body">
          <div className="bookcard-tags">
            <span className="pill pill-age">{book.age_range} años</span>
            <span className="pill" style={{ borderColor: book.cat.color, color: book.cat.color }}>{book.category}</span>
          </div>
          <h3 className="bookcard-title">{book.title}</h3>
          <div className="bookcard-meta">
            <Stars value={book.rating_value} size={15} />
            <span className="bookcard-rate">{book.rating_value.toFixed(1).replace(".", ",")}</span>
            <span className="bookcard-count">· {book.rating_count} reseñas</span>
          </div>
          <span className="bookcard-link">
            Ver libro <Icon name="arrow-right" size={17} />
          </span>
        </div>
      </article>
    );
  }

  window.Cover = Cover;
  window.BookCard = BookCard;
})();