// Preorder modal (Režim A — vyprodáno s termínem, platba předem).
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Photo, Button, QuantityStepper, Tag } = DS;
  const Icon = window.VNIcon;

  function Preorder({ product, onClose, onAddToCart, onBuyNow, onContact }) {
    const open = !!product;
    const p = product || {};
    const variants = p.variants && p.variants.length ? p.variants : null;
    const [vIdx, setVIdx] = React.useState(0);
    const [qty, setQty] = React.useState(1);
    React.useEffect(() => { setVIdx(0); 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 variant = variants ? variants[Math.min(vIdx, variants.length - 1)] : null;
    const price = variant ? variant.price : p.price;
    const weight = variant ? variant.w : p.weight;
    const restock = (variant && variant.restock) || p.restock || "brzy";
    const item = { ...p, id: variant ? p.id + "-" + weight : p.id, price, weight, preorder: restock };

    return (
      <div className="vn-sheet" data-open={open} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
        <div className="vn-sheet__panel" role="dialog" aria-modal="true" aria-label={"Předobjednávka — " + p.name}>
          <button className="vn-sheet__close" onClick={onClose} aria-label="Zavřít"><Icon name="close" size={20} /></button>
          {open && (
            <div className="vn-sheet__body">
              <div className="vn-sheet__head">
                <div className="vn-sheet__thumb"><Photo src={p.image} ratio="1 / 1" label={weight} /></div>
                <div>
                  <Tag icon={<Icon name="pin" size={13} />}>{p.region}</Tag>
                  <h3 className="vn-sheet__name">{p.name}</h3>
                  <span className="vn-stock vn-stock--out"><span className="vn-stock__dot" /> Vyprodáno</span>
                </div>
              </div>

              <div className="vn-sheet__notice">
                <Icon name="truck" size={18} />
                <p><strong>Platba předem.</strong> Matku nebo včelstvo expedujeme po naskladnění — orientačně <strong>{restock}</strong>, nejpozději do {p.latest || "—"}.{" "}
                  <a href="#" onClick={(e)=>{e.preventDefault();}}>Podmínky předobjednávky</a></p>
              </div>

              {variants && (
                <div className="vn-sheet__row">
                  <span className="vn-sheet__label">Balení</span>
                  <div className="kit-pdp__pills">
                    {variants.map((v, i) => (
                      <button key={i} type="button" className="kit-pill" data-active={i === vIdx} onClick={() => setVIdx(i)}>{v.w}</button>
                    ))}
                  </div>
                </div>
              )}

              <div className="vn-sheet__buyrow">
                <div className="vn-sheet__price"><b>{price * qty} Kč</b><span>vč. DPH{weight ? " · " + weight : ""}</span></div>
                <QuantityStepper value={qty} onChange={setQty} max={20} />
              </div>

              <div className="vn-sheet__actions">
                <Button variant="primary" size="lg" block onClick={() => onBuyNow(item, qty)} iconStart={<Icon name="check" size={18} />}>Koupit ihned</Button>
                <Button variant="secondary" size="lg" block onClick={() => { onAddToCart(item, qty); onClose(); }} iconStart={<Icon name="cart" size={18} />}>Přidat do košíku</Button>
              </div>
              <button className="vn-sheet__contact" onClick={() => { onClose(); onContact(); }}>Dotaz k předobjednávce? Napište nám</button>
            </div>
          )}
        </div>
      </div>
    );
  }
  window.VNPreorder = Preorder;
})();