// LAM Shining — Product modal + Cart drawer.

const { useState: useState_m, useEffect: useEffect_m } = React;

// ── Product Modal ────────────────────────────────────────────────────────────
function ProductModal({ product, open, onClose, onAdd, onWhatsApp }) {
  const [activeImg, setActiveImg] = useState_m(0);

  useEffect_m(() => {
    if (open) {
      setActiveImg(0);
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  useEffect_m(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!product) return null;
  const [bg, ink] = product.palette || ["#f4f2ed", "#1a1a1a"];
  const gallery = product.gallery || (product.image ? [product.image] : [null, null, null]);
  const cat = CATEGORIES.find(c => c.id === product.category);

  const renderImg = (src, key) => {
    if (src) return <img key={key} src={src} alt={product.name} />;
    return (
      <div key={key} className="placeholder" style={{ background: bg, color: ink, position: "absolute", inset: 0 }}>
        <span className="placeholder-glyph">{product.name.charAt(0)}</span>
        <div className="placeholder-label">
          <span>LAM · {product.no}</span>
          <span>{product.category.toUpperCase()}</span>
        </div>
      </div>
    );
  };

  return (
    <React.Fragment>
      <div className={`modal-scrim ${open ? "open" : ""}`} onClick={onClose} />
      <div className={`modal ${open ? "open" : ""}`} role="dialog" aria-modal="true">
        <button className="modal-x" onClick={onClose} aria-label="Close">
          <Icon.X />
        </button>
        <div className="modal-gallery">
          <div className="modal-thumbs">
            {gallery.map((g, i) => (
              <button key={i}
                      className={`modal-thumb ${activeImg === i ? "active" : ""}`}
                      onClick={() => setActiveImg(i)}>
                {g ? <img src={g} alt="" />
                   : <div className="placeholder" style={{ background: bg, color: ink, position: "absolute", inset: 0 }}>
                       <span className="placeholder-glyph" style={{ fontSize: 36 }}>{product.name.charAt(0)}</span>
                     </div>}
              </button>
            ))}
          </div>
          <div className="modal-main-img">
            {renderImg(gallery[activeImg], activeImg)}
          </div>
        </div>
        <div className="modal-info">
          <div className="modal-cat">{cat?.name} · <span className="ar">{cat?.nameAr}</span></div>
          <h2 className="modal-title">{product.name}</h2>
          <div className="modal-title-ar ar serif">{product.nameAr}</div>
          <div className="modal-price">
            <span className="current serif">EGP {product.price.toLocaleString()}</span>
            {product.originalPrice && (
              <React.Fragment>
                <span className="original">EGP {product.originalPrice.toLocaleString()}</span>
                <span className="save">
                  Save {Math.round((1 - product.price / product.originalPrice) * 100)}%
                </span>
              </React.Fragment>
            )}
          </div>
          <p className="modal-desc">
            {product.description}
            <span className="ar serif">{product.descriptionAr}</span>
          </p>
          <div className="modal-meta">
            <div className="modal-meta-row">
              <span className="k">Delivery</span>
              <span className="v">
                Cairo &amp; Giza · 1–2 days · EGP 60<br/>
                <span style={{ color: "var(--mute)", fontSize: 12 }}>Other governorates · 3–5 days · EGP 90</span>
              </span>
            </div>
            <div className="modal-meta-row">
              <span className="k">Payment</span>
              <span className="v">
                InstaPay · Vodafone Cash · Cash on Delivery<br/>
                <span style={{ color: "var(--mute)", fontSize: 12 }}>Send screenshot on WhatsApp after payment.</span>
              </span>
            </div>
            <div className="modal-meta-row">
              <span className="k">Care</span>
              <span className="v">
                Keep dry · store in pouch · avoid perfume contact.
              </span>
            </div>
          </div>
          <div className="modal-actions">
            <button className="btn-primary" onClick={() => onAdd(product)}>
              <Icon.Bag /> Add to Bag
            </button>
            <button className="btn-wa" onClick={() => onWhatsApp(product)}>
              <Icon.WhatsApp /> Order Now
            </button>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

// ── Cart Drawer ──────────────────────────────────────────────────────────────
function Cart({ open, items, onClose, onInc, onDec, onRemove, onCheckout, palettes }) {
  useEffect_m(() => {
    if (open) document.body.style.overflow = "hidden";
    else document.body.style.overflow = "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const total = items.reduce((s, it) => s + it.product.price * it.qty, 0);
  const count = items.reduce((s, it) => s + it.qty, 0);

  return (
    <React.Fragment>
      <div className={`drawer-scrim ${open ? "open" : ""}`} onClick={onClose} />
      <aside className={`cart ${open ? "open" : ""}`}>
        <div className="cart-hd">
          <h2 className="serif">Your <i>Bag</i> <span className="ar" style={{ fontSize: 14, color: "var(--mute)", marginLeft: 6 }}>الحقيبة</span></h2>
          <button className="icon-btn" onClick={onClose} aria-label="Close">
            <Icon.X />
          </button>
        </div>
        <div className="cart-body">
          {items.length === 0 ? (
            <div className="cart-empty">
              <span className="glyph serif">∅</span>
              <p>Your bag is empty. Find a piece worth keeping.</p>
              <p className="ar serif">حقيبتك فارغة. اعثري على قطعة تستحق.</p>
            </div>
          ) : (
            items.map(({ product, qty }) => {
              const [bg, ink] = product.palette || ["#f4f2ed", "#1a1a1a"];
              return (
                <div className="cart-item" key={product.id}>
                  <div className="cart-item-img">
                    {product.image ? <img src={product.image} alt="" /> :
                      <div className="placeholder" style={{ background: bg, color: ink, display: "grid", placeItems: "center", fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300, fontSize: 32, opacity: 0.35 }}>
                        {product.name.charAt(0)}
                      </div>
                    }
                  </div>
                  <div>
                    <div className="cart-item-name serif">{product.name}</div>
                    <div className="cart-item-meta">EGP {product.price.toLocaleString()}</div>
                    <div className="cart-qty">
                      <button onClick={() => onDec(product.id)}>−</button>
                      <span>{qty}</span>
                      <button onClick={() => onInc(product.id)}>+</button>
                    </div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
                    <div className="cart-item-price serif">EGP {(product.price * qty).toLocaleString()}</div>
                    <button className="cart-item-remove" onClick={() => onRemove(product.id)}>Remove</button>
                  </div>
                </div>
              );
            })
          )}
        </div>
        {items.length > 0 && (
          <div className="cart-foot">
            <div className="cart-totals">
              <span className="lbl">Total · {count} item{count !== 1 ? "s" : ""}</span>
              <span className="v">EGP {total.toLocaleString()}</span>
            </div>
            <button className="btn-wa" onClick={onCheckout}>
              <Icon.WhatsApp /> Send order on WhatsApp
            </button>
            <p className="cart-hint">
              We'll confirm availability &amp; share payment details on chat.
              <span className="ar serif">سنؤكد التوفر ونرسل تفاصيل الدفع في المحادثة.</span>
            </p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { ProductModal, Cart });