// Pull-City — TCG Card + Slab visuals + ProductCard component
// All cards are drawn entirely in CSS; placeholder iconography only.
// User will replace with real renders / Higgsfield videos later.

const { useRef, useEffect, useState } = React;

// A single decorative card glyph used as art focal (large italic letter)
function CardGlyph({ ch }) {
  return <span className="glyph">{ch}</span>;
}

// Yu-Gi-Oh flavored card visual (warm gold / arcane purple)
function YgoCard({ name = "Dragone Azzurro", atk = "ATK 3000", type = "Drago / Effetto", desc = "Una creatura leggendaria scolpita nella luce.", lv = 8, glyph = "λ", holo = false }) {
  return (
    <div className={"tcg" + (holo ? " tcg--holo" : "")}>
      <div className="inner">
        <div className="top">
          <span className="name">{name}</span>
          <span className="atk">{atk}</span>
        </div>
        <div className="art"><CardGlyph ch={glyph} /></div>
        <div className="type">{type}</div>
        <div className="desc">{desc}</div>
        <div className="foot">
          <span>SET · LC-04</span>
          <span className="star">{"★".repeat(Math.min(lv, 8))}</span>
        </div>
      </div>
    </div>
  );
}

// One Piece flavored card visual (warm crimson / ocean blue)
function OpCard({ name = "Marea Cremisi", atk = "PWR 9000", type = "Personaggio · Pirata", desc = "Il vento dell'arcipelago piega ogni vela.", lv = 6, glyph = "Φ", holo = false }) {
  return (
    <div className={"tcg tcg--op" + (holo ? " tcg--holo" : "")}>
      <div className="inner">
        <div className="top">
          <span className="name">{name}</span>
          <span className="atk">{atk}</span>
        </div>
        <div className="art"><CardGlyph ch={glyph} /></div>
        <div className="type">{type}</div>
        <div className="desc">{desc}</div>
        <div className="foot">
          <span>OP-07 · ROMANCE</span>
          <span className="star">{"●".repeat(Math.min(lv, 5))}</span>
        </div>
      </div>
    </div>
  );
}

// PSA-style slab — wraps any card visual inside the case
function Slab({ grade = "10", grader = "PCG", cert = "84412091", children }) {
  return (
    <div className="slab">
      <div className="slab-header">
        <span className="grader">{grader} Authenticated</span>
        <span className="grade">GEM MT {grade}</span>
      </div>
      <div className="slab-body">
        {children}
      </div>
      <div className="slab-footer">
        <span>CERT · {cert}</span>
        <span>VAULT</span>
      </div>
    </div>
  );
}

// Booster box face — premium product-box look (no wrapper)
function BoxFace({ variant = "", name = "", franchise = "", glyph = "✦", label = "" }) {
  return (
    <div className={"box " + variant}>
      <div className="box-shine" />
      <div className="box-band top">
        <span>{franchise || label}</span>
      </div>
      <div className="box-window">
        <div className="box-art-bg" />
        <div className="box-glyph">{glyph}</div>
        <div className="box-art-rays" />
      </div>
      <div className="box-name">
        <span className="box-name-1">{name || label}</span>
      </div>
      <div className="box-band bot">
        <span>EDIZIONE LIMITATA</span>
        <span className="box-mark">·</span>
        <span>VAULT</span>
      </div>
      <div className="box-edge" />
    </div>
  );
}

// Booster pack visual — BoxFace inside a staged imgwrap (for cart, quickview, standalone usage)
function BoosterBox({ label = "Edizione", variant = "", name = "", franchise = "", glyph = "✦" }) {
  return (
    <div className="imgwrap box-art">
      <BoxFace variant={variant} name={name} franchise={franchise} glyph={glyph} label={label} />
    </div>
  );
}

// Product card — a uniform tile used in drop grids
function ProductCard({ product, onQuick, onAdd, size = "" }) {
  const ref = useRef(null);
  const tiltRef = useRef(null);
  function onMove(e) {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width) * 100;
    const y = ((e.clientY - r.top) / r.height) * 100;
    el.style.setProperty("--mx", x + "%");
    el.style.setProperty("--my", y + "%");
    if (tiltRef.current) {
      const rx = (y - 50) / -8;
      const ry = (x - 50) / 8;
      tiltRef.current.style.transform = `rotate(0deg) scale(1.06) rotateX(${rx}deg) rotateY(${ry}deg) translateY(-2%)`;
    }
  }
  function onLeave() {
    if (tiltRef.current) tiltRef.current.style.transform = "";
  }
  return (
    <a className={"pcard " + size} onMouseMove={onMove} onMouseLeave={onLeave} onClick={(e) => { e.preventDefault(); onQuick && onQuick(product); }}>
      <div className="frame" ref={ref}>
        {product.badges && product.badges.length > 0 && (
          <div className="badges">
            {product.badges.map((b, i) => (
              <span key={i} className={"badge " + (b.kind || "")}>{b.label}</span>
            ))}
          </div>
        )}
        <div className="tilt" ref={tiltRef} style={{ "--rot": product.rot || "-2deg" }}>
          {product.render
            ? product.render(product)
            : (product.slab
              ? <Slab grade={product.grade} grader={product.grader} cert={product.cert}>
                  {product.universe === "op"
                    ? <OpCard {...(product.cardProps || {})} />
                    : <YgoCard {...(product.cardProps || {})} />}
                </Slab>
              : (product.universe === "op"
                  ? <OpCard {...(product.cardProps || {})} />
                  : <YgoCard {...(product.cardProps || {})} />))}
        </div>
        <div className="quick">
          <button className="pill" onClick={(e) => { e.stopPropagation(); onQuick && onQuick(product); }}>Quick view</button>
          <button className="pill gold" onClick={(e) => { e.stopPropagation(); onAdd && onAdd(product); }}>Aggiungi</button>
        </div>
      </div>
      <div className="meta">
        <span className="nm">{product.name}</span>
        <span className="pr">€ {product.price.toLocaleString("it-IT")}</span>
        <span className="sub">{product.sub}</span>
      </div>
    </a>
  );
}

Object.assign(window, { YgoCard, OpCard, Slab, BoosterBox, BoxFace, ProductCard });