// Rich catalog product card for the e-shop kit (kit-level so it compiles fresh
// into the standalone). Composes DS Photo/Rating/Badge/Tag/Button + kit Bits.
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Photo, Rating, Badge, Tag } = DS;
  const Icon = window.VNIcon;

  function ProductCardPro({ product, onOpen, onAdd, onQuickView, onNotify, onPreorder }) {
    const p = product;
    const soldOut = p.stock === "out";
    const restock = p.restock || null;
    const [added, setAdded] = React.useState(false);
    const addedTimer = React.useRef(null);
    const handleAdd = (e) => {
      e.stopPropagation();
      onAdd && onAdd(p);
      setAdded(true);
      clearTimeout(addedTimer.current);
      addedTimer.current = setTimeout(() => setAdded(false), 1500);
    };
    React.useEffect(() => () => clearTimeout(addedTimer.current), []);
    return (
      <article className={"vn-pcardx" + (soldOut ? " vn-pcardx--out" : "")}>
        <div className="vn-pcardx__media" onClick={() => onOpen && onOpen(p)}>
          <Photo src={p.image} ratio="1 / 1" alt={p.name} label={"Foto · " + p.weight} className="vn-pcardx__img" />
          {/* hover second layer — warm "in use" treatment over the same shot */}
          <div className="vn-pcardx__hoverimg" aria-hidden="true">
            <Photo src={p.image} ratio="1 / 1" label="Detail" />
          </div>
          <div className="vn-pcardx__corner">
            {p.badge && (
              <span className={"vn-chip vn-chip--" + (p.badge.tone === "green" ? "green" : "gold")}>
                <span className="vn-chip__dot" />{p.badge.label}
              </span>
            )}
          </div>
          <span className={"vn-pcardx__status vn-chip vn-chip--" + (p.stock === "out" ? "red" : p.stock === "low" ? "gold" : "green")}>
            <span className="vn-chip__dot" />{p.stock === "out" ? "Vyprodáno" : p.stock === "low" ? "Poslední kusy" : "Skladem"}
          </span>
        </div>

        <div className="vn-pcardx__body">
          {p.region && <Tag>{p.region}</Tag>}
          <h3 className="vn-pcardx__name" onClick={() => onOpen && onOpen(p)}>{p.name}</h3>

          {window.VNTasteProfile && p.profile && (p.profile.color > 0 || p.profile.sweet > 0) && (
            <window.VNTasteProfile profile={p.profile} compact />
          )}

          <div className="vn-pcardx__foot">
            <span className="vn-pcardx__price">
              {p.price > 0 ? (
                <><b>{p.variants && p.variants.length ? "od " + Math.min.apply(null, p.variants.map(v => v.price)) : p.price} Kč</b><span className="vn-pcardx__vat">· vč. DPH</span></>
              ) : (
                <b>Cena na dotaz</b>
              )}
            </span>
            {soldOut ? (
              restock ? (
                <button className="vn-pcardx__add" onClick={(e) => { e.stopPropagation(); onPreorder && onPreorder(p); }}>
                  <Icon name="check" size={15} /> Předobjednat
                </button>
              ) : (
                <button className="vn-pcardx__notify" onClick={(e) => { e.stopPropagation(); onNotify && onNotify(p); }}>
                  <Icon name="mail" size={15} /> Upozornit
                </button>
              )
            ) : (
              <button className={"vn-pcardx__add" + (added ? " is-added" : "")} onClick={handleAdd} aria-label={"Přidat " + p.name + " rezervovat"}>
                {added
                  ? <><Icon name="check" size={16} /> Otevřeno</>
                  : <><Icon name="calendar" size={16} /> {p.price > 0 ? "Rezervovat" : "Objednat na dotaz"}</>}
              </button>
            )}
          </div>
        </div>
      </article>
    );
  }

  window.VNProductCard = ProductCardPro;
})();