/* global React, window */
const { useState: pkS, useRef: pkR, useEffect: pkE, useMemo: pkM } = React;

function useOutside(ref, on, cb) {
  pkE(() => {
    if (!on) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) cb(); };
    document.addEventListener("mousedown", h);
    const k = (e) => { if (e.key === "Escape") cb(); };
    document.addEventListener("keydown", k);
    return () => { document.removeEventListener("mousedown", h); document.removeEventListener("keydown", k); };
  }, [on]);
}

/* ---------- + menu (grouped, Claude-style) ---------- */
function AttachMenu({ onUpload, onFolder, onLibrary, onSet, count }) {
  const [open, setOpen] = pkS(false);
  const ref = pkR(null);
  const LIB = window.PRODUCT_LIBRARY;
  useOutside(ref, open, () => setOpen(false));
  const go = (fn, arg) => { setOpen(false); fn && fn(arg); };
  return (
    <div className="plp-am" ref={ref}>
      <button className={"eh-iconb" + (open ? " on" : "")} title="Add products" onClick={() => setOpen(o => !o)}>
        <i className="ti ti-plus"></i>
      </button>
      {open && (
        <div className="plp-menu">
          <div className="plp-menu__h">Product library</div>
          <button className="plp-menu__o" onClick={() => go(onLibrary)}>
            <i className="ti ti-shirt"></i>Browse product library
            <span className="plp-menu__n">{LIB.products.length}</span>
          </button>
          {LIB.sets.map(s => (
            <button className="plp-menu__o" key={s.id} onClick={() => go(onSet, s)}>
              <i className="ti ti-tag"></i>{s.label}
              <span className="plp-menu__n">{LIB.match(s.filter).length}</span>
            </button>
          ))}
          <div className="plp-menu__sep"></div>
          <div className="plp-menu__h">Upload</div>
          <button className="plp-menu__o" onClick={() => go(onUpload)}><i className="ti ti-photo-up"></i>Product images…</button>
          <button className="plp-menu__o" onClick={() => go(onFolder)}><i className="ti ti-folder"></i>Folder…</button>
        </div>
      )}
    </div>
  );
}

/* ---------- library browser ---------- */
function ProductLibraryPanel({ onClose, onAdd, attached, initialFilter }) {
  const LIB = window.PRODUCT_LIBRARY;
  const [q, setQ] = pkS("");
  const [filter, setFilter] = pkS(initialFilter || {});
  const [sel, setSel] = pkS([]);
  const ref = pkR(null);
  useOutside(ref, true, onClose);
  const rows = pkM(() => {
    const t = q.trim().toLowerCase();
    return LIB.match(filter).filter(p => !t || p.name.toLowerCase().includes(t) || p.tags.join(" ").toLowerCase().includes(t));
  }, [q, filter]);
  const toggleTag = (k, v) => setFilter(f => {
    const cur = f[k] || [];
    const nx = cur.includes(v) ? cur.filter(x => x !== v) : [...cur, v];
    const out = { ...f }; if (nx.length) out[k] = nx; else delete out[k];
    return out;
  });
  const on = (id) => sel.includes(id);
  const toggle = (id) => setSel(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  const allShown = rows.length > 0 && rows.every(p => on(p.id));
  const activeTags = Object.keys(filter).flatMap(k => filter[k].map(v => [k, v]));
  const add = () => {
    const items = LIB.products.filter(p => sel.includes(p.id))
      .map(p => ({ id: "lib-" + p.id, pid: p.id, url: LIB.url(p.id), name: p.name, price: p.price, tags: p.tags, source: "library" }));
    onAdd(items);
  };
  return (
    <div className="plp-overlay"><div className="plp-panel" ref={ref}>
      <div className="plp-panel__hd">
        <i className="ti ti-shirt"></i>
        <span className="plp-panel__t">Product library</span>
        <label className="plp-search"><i className="ti ti-search"></i>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search name or tag" autoFocus />
        </label>
        <button className="plp-x" onClick={onClose} aria-label="Close"><i className="ti ti-x"></i></button>
      </div>
      <div className="plp-tags">
        {LIB.groups.map(g => (
          <div className="plp-tagg" key={g.key}>
            <span className="plp-tagg__l">{g.label}</span>
            {g.values.map(v => (
              <button key={v} className={"plp-tag" + ((filter[g.key] || []).includes(v) ? " on" : "")} onClick={() => toggleTag(g.key, v)}>{v}</button>
            ))}
          </div>
        ))}
      </div>
      <div className="plp-grid">
        {rows.map(p => (
          <button key={p.id} className={"plp-card" + (on(p.id) ? " on" : "") + (attached.includes(p.id) ? " is-in" : "")} onClick={() => toggle(p.id)}>
            <span className="plp-card__img">
              {LIB.url(p.id) ? <img src={LIB.url(p.id)} alt={p.name} /> : <i className="ti ti-shirt"></i>}
              <span className="plp-card__chk"><i className="ti ti-check"></i></span>
            </span>
            <span className="plp-card__n">{p.name}</span>
            <span className="plp-card__m">{p.price ? p.price + " · " : ""}{p.collection}</span>
          </button>
        ))}
        {!rows.length && <div className="plp-none">No products match those tags.</div>}
      </div>
      <div className="plp-panel__ft">
        <span className="plp-count">
          {rows.length} shown{activeTags.length ? " · " + activeTags.map(([, v]) => v).join(" + ") : ""}
        </span>
        <button className="plp-link" onClick={() => setSel(allShown ? [] : rows.map(p => p.id))}>
          {allShown ? "Clear selection" : "Select all " + rows.length}
        </button>
        <button className="plp-btn plp-btn--p" disabled={!sel.length} onClick={add}>
          Add {sel.length || ""} {sel.length === 1 ? "product" : "products"}
        </button>
      </div>
    </div></div>
  );
}

Object.assign(window, { AttachMenu, ProductLibraryPanel });