/* =====================================================================
   PageCatalogo.jsx (PgCatalogo) — Catalogo de productos
   Render function: recibe app con state/setters/helpers de App
   ===================================================================== */

function PgCatalogo(app) {
const {
    D, setD, view, setView, modal, setModal, edt, setEdt, search, setSearch,
    cotFEstado, setCotFEstado, cotFCliente, setCotFCliente,
    catFTipo, setCatFTipo, catFTextil, setCatFTextil,
    eu, setEu, nu, setNu,
    dDesde, setDDesde, dHasta, setDHasta, filtroEst, setFiltroEst,
    editMq, setEditMq, ep, setEp, newPago, setNewPago, stab, setStab,
    saved, setSaved, ok,
    pdfCot, setPdfCot, pdfKind, setPdfKind, pdfPaperSize, setPdfPaperSize, pdfHtml,
    emailModal, setEmailModal, session, setSession, loginErr, setLoginErr,
    convertCot, setConvertCot, convertTipo, setConvertTipo,
    up, filt, del, openNew, openEd, saveForm,
    cotNombre, genCotNum, nuevaCot, saveCot, cotAPedido,
    tbl, verPDF, verPedPDF, openEmail, doLogin,
    menu, menuFull,
    showBulk, setShowBulk, bulkText, setBulkText,
    showBulkIns, setShowBulkIns, bulkTextIns, setBulkTextIns,
    showBulkProv, setShowBulkProv, bulkTextProv, setBulkTextProv,
    bulkMsg, setBulkMsg,
    splitLine, doBulkImport, doBulkImportIns, doBulkImportProv,
    mc,
  } = app;


    const cat = D.catalogo || [];
    const allTipos = Array.from(new Set(cat.map(p => p.tipoPrenda).filter(Boolean))).sort();
    const allTextiles = Array.from(new Set(cat.map(p => p.textilNombre).filter(Boolean))).sort();
    const s = search.trim().toLowerCase();
    const filtered = cat.filter(p => {
      if (catFTipo && p.tipoPrenda !== catFTipo) return false;
      if (catFTextil && p.textilNombre !== catFTextil) return false;
      if (s) {
        const est = (p.estampados || []).map(e => e.tecnica).join(" ");
        const hay = [p.nombreComercial, p.tipoPrenda, p.desc, p.textilNombre, p.color, est].filter(Boolean).join(" ").toLowerCase();
        if (!hay.includes(s)) return false;
      }
      return true;
    });
    const filtersActive = !!(s || catFTipo || catFTextil);
    return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <h2 style={{ margin: 0, color: "#0a2540", fontFamily: "Georgia,serif" }}>Catálogo de Productos</h2>
      </div>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", marginBottom: 12, padding: "8px 10px", background: "#faf9f7", border: "1px solid #e5e1d8", borderRadius: 6 }}>
        <input style={{ ...S.inp, width: 220 }} placeholder="Buscar por nombre, textil, estampado..." value={search} onChange={e => setSearch(e.target.value)} />
        <select style={{ ...S.sel, width: 160 }} value={catFTipo} onChange={e => setCatFTipo(e.target.value)}>
          <option value="">Todos los tipos</option>
          {allTipos.map(t => <option key={t} value={t}>{t}</option>)}
        </select>
        <select style={{ ...S.sel, width: 180 }} value={catFTextil} onChange={e => setCatFTextil(e.target.value)}>
          <option value="">Todos los textiles</option>
          {allTextiles.map(t => <option key={t} value={t}>{t}</option>)}
        </select>
        {filtersActive && <button style={S.btn2} onClick={() => { setSearch(""); setCatFTipo(""); setCatFTextil(""); }}>Limpiar</button>}
        <span style={{ marginLeft: "auto", fontSize: 11, color: "#6b7280" }}>{filtered.length} de {cat.length}</span>
      </div>
      {cat.length === 0 ? <div style={{ ...S.card, textAlign: "center", padding: 36, color: "#9ca3af" }}>Aún no hay productos. Guarda ítems desde el cotizador con el botón "★ Guardar en Catálogo".</div> :
        filtered.length === 0 ? <div style={{ ...S.card, textAlign: "center", padding: 36, color: "#9ca3af" }}>No hay productos que coincidan con los filtros.</div> :
        <div style={S.card}>{tbl([{ l: "Producto" }, { l: "Tipo" }, { l: "Textil" }, { l: "Estampados" }, { l: "Costo", a: "right" }],
          filtered.map(p => {
            const rc = motorCosteo(p, D.insumos);
            return (
              <tr key={p.id}>
                <td style={S.td}><strong>{p.nombreComercial || p.tipoPrenda}</strong>{p.desc ? <br /> : ""}{p.desc && <span style={{ fontSize: 10, color: "#9ca3af" }}>{p.desc}</span>}</td>
                <td style={S.td}>{p.tipoPrenda}</td>
                <td style={S.td}>{p.textilNombre || "—"}</td>
                <td style={S.td}><span style={{ fontSize: 10 }}>{(p.estampados || []).map(e => e.tecnica).join(", ") || "—"}</span></td>
                <td style={{ ...S.td, textAlign: "right" }}>{fmt(rc._subDirecto)}</td>
                <td style={S.td}><button style={S.btnD} onClick={() => up("catalogo", D.catalogo.filter(x => x.id !== p.id))}><Ic name="trash" size={12} /></button></td>
              </tr>);
          }), true)}</div>
      }
    </div>
    );

}

// ── Exports a global scope (Babel standalone aisla cada <script>) ──
window.PgCatalogo  = PgCatalogo;