// Quick View modal — product detail without leaving the catalog.
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Photo, Button, Badge, Tag, Rating, QuantityStepper } = DS;
  const Icon = window.VNIcon;

  function QuickView({ product, onClose, onAdd, onOpenFull }) {
    const [qty, setQty] = React.useState(1);
    React.useEffect(() => { setQty(1); }, [product && product.id]);
    React.useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      document.addEventListener("keydown", onKey);
      return () => document.removeEventListener("keydown", onKey);
    }, [onClose]);

    const open = !!product;
    const p = product || {};
    const soldOut = p.stock === "out";

    return (
      <div className="vn-qv" data-open={open} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
        <div className="vn-qv__panel" role="dialog" aria-modal="true" aria-label={p.name}>
          <button className="vn-qv__close" onClick={onClose} aria-label="Zavřít náhled"><Icon name="close" size={20} /></button>
          {open && (
            <div className="vn-qv__grid">
              <div className="vn-qv__media"><Photo src={p.image} ratio="1 / 1" alt={p.name} label={"Foto · " + p.weight} /></div>
              <div className="vn-qv__info">
                {p.region && <Tag icon={<Icon name="pin" size={14} />}>{p.region}</Tag>}
                <h3 className="vn-qv__name">{p.name}</h3>
                <div className="vn-qv__rrow">
                  {window.VNStock && <window.VNStock status={p.stock || "in"} />}
                </div>
                {p.taste && <p className="vn-qv__taste">{p.taste}</p>}
                {window.VNTasteProfile && p.profile && (p.profile.color > 0 || p.profile.sweet > 0 || (p.profile.traits && p.profile.traits.length)) && <window.VNTasteProfile profile={p.profile} />}
                <p className="vn-qv__desc">{p.desc}</p>
                <div className="vn-qv__price"><b>{p.variants && p.variants.length ? "od " + Math.min.apply(null, p.variants.map(v => v.price)) : p.price} Kč</b><span>vč. DPH{p.variants && p.variants.length ? "" : " · " + p.weight}</span></div>
                {soldOut ? (
                  <Button variant="secondary" size="lg" block iconStart={<Icon name="mail" size={18} />}>Upozornit, až naskladníme</Button>
                ) : (
                  <div className="vn-qv__buy">
                    <QuantityStepper value={qty} onChange={setQty} max={20} />
                    <Button variant="primary" size="lg" onClick={() => { onAdd(p, qty); onClose(); }} iconStart={<Icon name="calendar" size={18} />} style={{ flex: 1 }}>Rezervovat</Button>
                  </div>
                )}
                <button className="vn-qv__full" onClick={() => { onClose(); onOpenFull(p); }}>Zobrazit celý detail <Icon name="arrowRight" size={15} /></button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
  window.VNQuickView = QuickView;
})();