/* ============================================================
   PLP "emplatada" — el card con la pizza sobresaliendo por arriba
   Reemplaza ProductCard solo en la versión animada.
   ============================================================ */

/* foto real (top-down, fondo transparente) por pizza */
const PH_PLP_PHOTO = {
  mitad: "assets/img-png/supreme.png",
  smokey: "assets/img-png/meatlovers.png",
  cheeseburger: "assets/img-png/cheeseburger.png",
  bourbon: "assets/img-png/bourbon.png",
  supreme: "assets/img-png/supreme.png",
  americana: "assets/img-png/meatlovers.png",
  veggie: "assets/img-png/supreme.png",
  margherita: "assets/img-png/quesos.png",
  bbqdeluxe: "assets/img-png/bourbon.png",
  hawaiana: "assets/img-png/barbacoa.png",
  carbonara: "assets/img-png/kebah.png",
  diavola: "assets/img-png/meatlovers.png",
};

function platePhoto(item) {
  return PH_PLP_PHOTO[item.id] || "assets/img-png/supreme.png";
}

function tagClass(tag) {
  if (tag === "Premium" || tag === "Greatest Hits") return " gold";
  return "";
}

/* one plated card */
function PlatedCard({ item, onOpen, onAdd }) {
  const mediaRef = useRef(null);
  const open = () => onOpen(item);

  const quickAdd = (e) => {
    e.stopPropagation();
    const med = window.PHData.SIZES.find(s => s.id === "med");
    onAdd({ ...item, _size: med.name, _dough: "Masa Tradicional", price: item.price, qty: 1 });
    /* little spin + fly */
    if (mediaRef.current) {
      mediaRef.current.classList.remove("just-added");
      void mediaRef.current.offsetWidth;
      mediaRef.current.classList.add("just-added");
    }
    if (window.flyPlateToCart) window.flyPlateToCart(mediaRef.current);
  };

  return (
    <article className="plate-card">
      {item.tags && item.tags[0] && (
        <span className={"tag" + tagClass(item.tags[0])}>{item.tags[0]}</span>
      )}

      <div className="plate-photo" ref={mediaRef} onClick={open} role="button" aria-label={item.name}>
        <span className="plate-shadow" />
        <img src={window.__asset(platePhoto(item))} alt={item.name} loading="lazy" />
      </div>

      <div className="plate-body">
        <h3 className="plate-title" onClick={open} role="button">{item.name}</h3>
        <p className="plate-sub">{item.sub}</p>
        <div className="plate-foot">
          <span className="plate-price">
            {item.from && <span className="from">Desde</span>}
            <span className="pp-num">{item.price.toFixed(2).replace(".", ",")} €</span>
          </span>
          <button className="plate-add" onClick={quickAdd} aria-label={"Añadir " + item.name}>
            <Icon name="plus" size={26} />
          </button>
        </div>
      </div>
    </article>
  );
}

/* fly a plated pizza clone into the cart button */
function flyPlateToCart(srcEl) {
  const cart = document.querySelector(".cart-btn");
  const img = srcEl && srcEl.querySelector("img");
  if (!cart || !img) return;
  const s = img.getBoundingClientRect(), c = cart.getBoundingClientRect();
  const clone = img.cloneNode(true);
  clone.className = "fly-plate";
  clone.style.left = s.left + "px"; clone.style.top = s.top + "px";
  clone.style.width = s.width + "px"; clone.style.height = s.height + "px";
  document.body.appendChild(clone);
  const dx = (c.left + c.width / 2) - (s.left + s.width / 2);
  const dy = (c.top + c.height / 2) - (s.top + s.height / 2);
  clone.animate([
    { transform: "translate(0,0) scale(1) rotate(0deg)", opacity: 1 },
    { transform: `translate(${dx * 0.55}px, ${dy * 0.5 - 70}px) scale(.6) rotate(140deg)`, opacity: 1, offset: .55 },
    { transform: `translate(${dx}px, ${dy}px) scale(.12) rotate(330deg)`, opacity: .3 },
  ], { duration: 720, easing: "cubic-bezier(.5,.05,.7,1)" }).onfinish = () => {
    clone.remove();
    cart.classList.add("bump");
    setTimeout(() => cart.classList.remove("bump"), 520);
  };
}

/* swap the global ProductCard used by MenuScreen for the plated one */
window.ProductCard = PlatedCard;
ProductCard = PlatedCard;
window.flyPlateToCart = flyPlateToCart;