/* --- Panos Melekkis · Collection drawer --- */

const D2 = window.PM_DATA;

function CollectionDrawer({ collectionId, onClose, onBook, currency }) {
  const open = !!collectionId;
  const collection = open ? D2.collections.find((c) => c.id === collectionId) : null;
  const drawerRef = React.useRef(null);

  React.useEffect(() => {
    if (open) document.body.classList.add("is-locked");
    else document.body.classList.remove("is-locked");
    return () => document.body.classList.remove("is-locked");
  }, [open]);

  // when collection changes, scroll drawer to top
  React.useEffect(() => {
    if (drawerRef.current) drawerRef.current.scrollTop = 0;
  }, [collectionId]);

  // Listen for esc
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <React.Fragment>
      <div className={"drawer-back " + (open ? "is-open" : "")} onClick={onClose}></div>
      <aside ref={drawerRef} className={"drawer " + (open ? "is-open" : "")} aria-hidden={!open}>
        {collection && (
          <React.Fragment>
            <button className="drawer-close" onClick={onClose} aria-label="Close collection">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
                <path d="M1 1l12 12M13 1L1 13"></path>
              </svg>
            </button>

            <header className="drawer-header">
              <img src={collection.cover} alt={collection.name + " — editorial"} />
              <div className="titles">
                <div className="meta">— {collection.eyebrow}</div>
                <div className="name">
                  <em>{collection.name}</em>
                </div>
              </div>
            </header>

            <div className="drawer-body">
              <div className="drawer-narrative">
                <div className="lead">{collection.lead}</div>
                <div className="body">
                  {collection.narrative.map((p, i) => <p key={i}>{p}</p>)}
                </div>
              </div>

              <div className="drawer-pricerange">
                <span>{collection.priceNote}</span>
                {collection.priceFrom && (
                  <span><b>From {window.PM_fmtPrice(collection.priceFrom, currency)}</b></span>
                )}
              </div>

              <div className="drawer-products">
                {collection.products.map((p) => (
                  <ProductCell key={p.sku} p={p} currency={currency} onBook={onBook} />
                ))}
              </div>

              <div className="drawer-bottom-cta">
                <div className="copy">
                  Want this piece in a different stone, gold or size? Speak to Panos directly.
                </div>
                <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <button className="btn btn-primary" onClick={onBook}>
                    Book a consultation
                    <Arrow d="up-right" />
                  </button>
                  <a className="btn" href={`https://wa.me/${D2.contact.waNumber}`} target="_blank" rel="noreferrer" style={{ color: "var(--ivory)", borderColor: "var(--ivory)" }}>
                    WhatsApp the atelier
                    <Arrow d="right" />
                  </a>
                </div>
              </div>
            </div>
          </React.Fragment>
        )}
      </aside>
    </React.Fragment>
  );
}

function ProductCell({ p, currency, onBook }) {
  const priced = p.priceAED != null;
  return (
    <article className="product">
      <div className="ph">
        <img src={p.img} alt={p.name} loading="lazy" />
        <span className="sku">{p.sku}</span>
      </div>
      <div className="name">{p.name}</div>
      <div className="row">
        {priced ? (
          <span className="price">{window.PM_fmtPrice(p.priceAED, currency)}</span>
        ) : (
          <span className="price muted">Price on request</span>
        )}
        <div className="actions">
          {priced ? (
            <a href="#shop" title="Add to bag in WooCommerce">Add to bag</a>
          ) : (
            <button onClick={onBook}>Enquire</button>
          )}
        </div>
      </div>
      {p.note && <div className="cap" style={{ opacity: 0.55, fontSize: 9, marginTop: 2 }}>{p.note}</div>}
    </article>
  );
}

window.CollectionDrawer = CollectionDrawer;