/* Sweet Haven — ProductDetail modal + CartDrawer */

const { useState: useStateCart } = React;

function ProductDetail({ p, onClose, onAdd }) {
  const [size, setSize] = useStateCart(null);
  const [cream, setCream] = useStateCart(CREAM_OPTIONS[0]);
  React.useEffect(() => {
    if (p) { setSize(p.sizes[0]); setCream(CREAM_OPTIONS[0]); }
  }, [p && p.id]);
  // While the popup is open, freeze the page behind it so your finger scrolls
  // the popup — not the page underneath. position:fixed is the iOS-safe lock;
  // we restore the exact previous style and scroll position on close.
  React.useEffect(() => {
    if (!p) return;
    const scrollY = window.scrollY;
    const b = document.body;
    const prev = b.getAttribute("style") || "";
    b.style.position = "fixed";
    b.style.top = `-${scrollY}px`;
    b.style.left = "0";
    b.style.right = "0";
    b.style.width = "100%";
    return () => { b.setAttribute("style", prev); window.scrollTo(0, scrollY); };
  }, [p]);
  if (!p || !size) return null;
  return (
    <div className="sh-modal-scrim" onClick={onClose}>
      <div className="sh-modal" onClick={(e) => e.stopPropagation()}>
        <button className="sh-modal-close" onClick={onClose}><Icon name="x" size={20} /></button>
        <div className="sh-modal-photo"><Photo src={p.img} name={p.name} /></div>
        <div className="sh-modal-body">
          <div className="sh-overline"><span className="sh-rule" />{p.cat}</div>
          <h2 className="sh-section-title" style={{ marginTop: 6 }}>{p.name}</h2>
          <p className="sh-modal-desc">{p.desc} Baked from scratch and finished by hand.</p>

          <div className="sh-option">
            <div className="sh-option-label">{p.cat === "Cookies" ? "Box size" : "Size"}</div>
            <div className="sh-size-row">
              {p.sizes.map((s) => (
                <button key={s.id} className={"sh-size-card" + (size.id === s.id ? " is-active" : "")} onClick={() => setSize(s)}>
                  <span className="sh-size-label">{s.label}</span>
                  <span className="sh-size-serves">{s.note}</span>
                  <span className="sh-size-price">{money(s.price)}</span>
                </button>
              ))}
            </div>
          </div>

          {p.cream && (
            <div className="sh-option">
              <div className="sh-option-label">Choose your finish</div>
              <div className="sh-segment">
                {CREAM_OPTIONS.map((c) => (
                  <button
                    key={c}
                    className={"sh-seg-btn" + (cream === c ? " is-active" : "")}
                    onClick={() => setCream(c)}
                  >{c}</button>
                ))}
              </div>
            </div>
          )}

          <div className="sh-modal-foot">
            <span className="sh-price big">{money(size.price)}</span>
            <button className="sh-btn primary" onClick={() => { onAdd(p, size, p.cream ? cream : null); onClose(); }}>
              Add to box
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function CartDrawer({ open, items, onClose, onInc, onDec, onCheckout, onBrowse }) {
  const entries = Object.values(items);
  const total = entries.reduce((s, e) => s + e.price * e.qty, 0);
  return (
    <>
      <div className={"sh-drawer-scrim" + (open ? " open" : "")} onClick={onClose} />
      <div className="sh-drawer-clip">
      <aside className={"sh-drawer" + (open ? " open" : "")}>
        <div className="sh-drawer-head">
          <h3 className="sh-section-title" style={{ fontSize: 28 }}>Your box</h3>
          <button className="sh-icon-btn" onClick={onClose}><Icon name="x" size={20} /></button>
        </div>
        <div className="sh-drawer-items">
          {entries.length === 0 && (
            <div className="sh-empty">
              <Icon name="shopping-bag" size={30} stroke={1.4} />
              <p>Your box is empty — let's fix that.</p>
              <button className="sh-btn secondary" onClick={onBrowse}>Browse the menu</button>
            </div>
          )}
          {entries.map((e) => (
            <div className="sh-line" key={e.key}>
              <div className="sh-line-photo"><Photo src={e.p.img} name={e.p.name} /></div>
              <div className="sh-line-info">
                <div className="sh-line-name">{e.p.name}</div>
                {e.opt && <div className="sh-line-opt">{e.opt}</div>}
                <div className="sh-price sm">{money(e.price * e.qty)}</div>
              </div>
              <div className="sh-stepper">
                <button onClick={() => onDec(e)} aria-label="Less"><Icon name="minus" size={14} stroke={2} /></button>
                <span>{e.qty}</span>
                <button onClick={() => onInc(e)} aria-label="More"><Icon name="plus" size={14} stroke={2} /></button>
              </div>
            </div>
          ))}
        </div>
        {entries.length > 0 && (
          <div className="sh-drawer-foot">
            <div className="sh-total"><span>Subtotal</span><span className="sh-price">{money(total)}</span></div>
            <button className="sh-btn dark full" onClick={onCheckout}>Place your order</button>
            <p className="sh-foot-note">Free pickup · ready same day</p>
          </div>
        )}
      </aside>
      </div>
    </>
  );
}

Object.assign(window, { ProductDetail, CartDrawer });