mejoras en el modelo de clarificacion de productos

public/components/products-crud.js

@@ -5,7 +5,8 @@ class ProductsCrud extends HTMLElement {
     super();
     this.attachShadow({ mode: "open" });
     this.items = [];
-    this.selected = null;
+    this.selectedItems = []; // Array de productos seleccionados
+    this.lastClickedIndex = -1; // Para Shift+Click
     this.loading = false;
     this.searchQuery = "";
     this.stockFilter = false;
@@ -29,9 +30,10 @@ class ProductsCrud extends HTMLElement {
         button.secondary:hover { background:#2d3e52; }
         
         .list { flex:1; overflow-y:auto; }
-        .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; }
+        .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; user-select:none; }
         .item:hover { border-color:#1f6feb; }
         .item.active { border-color:#1f6feb; background:#111b2a; }
+        .item.selected { border-color:#2ecc71; background:#0f2a1a; }
         .item-name { font-weight:600; color:#e7eef7; margin-bottom:4px; }
         .item-meta { font-size:12px; color:#8aa0b5; }
         .item-price { color:#2ecc71; font-weight:600; }
@@ -182,9 +184,15 @@ class ProductsCrud extends HTMLElement {
     }
 
     list.innerHTML = "";
-    for (const item of filteredItems) {
+    this._filteredItems = filteredItems; // Guardar referencia para Shift+Click
+    
+    for (let i = 0; i < filteredItems.length; i++) {
+      const item = filteredItems[i];
       const el = document.createElement("div");
-      el.className = "item" + (this.selected?.woo_product_id === item.woo_product_id ? " active" : "");
+      const isSelected = this.selectedItems.some(s => s.woo_product_id === item.woo_product_id);
+      const isSingleSelected = isSelected && this.selectedItems.length === 1;
+      el.className = "item" + (isSelected ? " selected" : "") + (isSingleSelected ? " active" : "");
+      el.dataset.index = i;
       
       const price = item.price != null ? `$${Number(item.price).toLocaleString()}` : "—";
       const sku = item.sku || "—";
@@ -192,9 +200,13 @@ class ProductsCrud extends HTMLElement {
       const stockBadge = stock === "instock" 
         ? `<span class="badge stock">En stock</span>`
         : `<span class="badge nostock">Sin stock</span>`;
+      
+      // Mostrar unidad actual si está definida
+      const unit = item.sell_unit || item.payload?._sell_unit_override;
+      const unitBadge = unit ? `<span class="badge" style="background:#1a3a5c;color:#7eb8e7;">${unit === 'unit' ? 'Unidad' : 'Kg'}</span>` : '';
 
       el.innerHTML = `
-        <div class="item-name">${item.name || "Sin nombre"} ${stockBadge}</div>
+        <div class="item-name">${item.name || "Sin nombre"} ${stockBadge} ${unitBadge}</div>
         <div class="item-meta">
           <span class="item-price">${price}</span> · 
           SKU: ${sku} · 
@@ -202,30 +214,78 @@ class ProductsCrud extends HTMLElement {
         </div>
       `;
 
-      el.onclick = () => {
-        this.selected = item;
-        this.renderList();
-        this.renderDetail();
-        // Scroll detail panel to top
-        const detail = this.shadowRoot.getElementById("detail");
-        if (detail) detail.scrollTop = 0;
-      };
+      el.onclick = (e) => this.handleItemClick(e, item, i);
 
       list.appendChild(el);
     }
   }
 
+  handleItemClick(e, item, index) {
+    if (e.shiftKey && this.lastClickedIndex >= 0) {
+      // Shift+Click: seleccionar rango
+      const start = Math.min(this.lastClickedIndex, index);
+      const end = Math.max(this.lastClickedIndex, index);
+      
+      for (let i = start; i <= end; i++) {
+        const rangeItem = this._filteredItems[i];
+        if (!this.selectedItems.some(s => s.woo_product_id === rangeItem.woo_product_id)) {
+          this.selectedItems.push(rangeItem);
+        }
+      }
+    } else if (e.ctrlKey || e.metaKey) {
+      // Ctrl+Click: toggle individual
+      const idx = this.selectedItems.findIndex(s => s.woo_product_id === item.woo_product_id);
+      if (idx >= 0) {
+        this.selectedItems.splice(idx, 1);
+      } else {
+        this.selectedItems.push(item);
+      }
+    } else {
+      // Click normal: selección única
+      this.selectedItems = [item];
+    }
+    
+    this.lastClickedIndex = index;
+    this.renderList();
+    this.renderDetail();
+    
+    // Scroll detail panel to top
+    const detail = this.shadowRoot.getElementById("detail");
+    if (detail) detail.scrollTop = 0;
+  }
+
   renderDetail() {
     const detail = this.shadowRoot.getElementById("detail");
 
-    if (!this.selected) {
+    if (!this.selectedItems.length) {
       detail.innerHTML = `<div class="detail-empty">Seleccioná un producto para ver detalles</div>`;
       return;
     }
 
-    const p = this.selected;
-    const categories = (p.payload?.categories || []).map(c => c.name).join(", ") || "—";
-    const attributes = (p.payload?.attributes || []).map(a => `${a.name}: ${a.options?.join(", ")}`).join("; ") || "—";
+    // Si hay múltiples seleccionados, mostrar vista de edición masiva
+    if (this.selectedItems.length > 1) {
+      this.renderMultiDetail();
+      return;
+    }
+
+    const p = this.selectedItems[0];
+    
+    // Categorías: pueden estar en p.categories (string JSON) o p.payload.categories (array)
+    let categoriesArray = [];
+    if (p.categories) {
+      try {
+        const cats = typeof p.categories === 'string' ? JSON.parse(p.categories) : p.categories;
+        categoriesArray = Array.isArray(cats) ? cats.map(c => c.name || c) : [String(cats)];
+      } catch { categoriesArray = [String(p.categories)]; }
+    } else if (p.payload?.categories) {
+      categoriesArray = p.payload.categories.map(c => c.name || c);
+    }
+    const categoriesText = categoriesArray.join(", ");
+    
+    const attributes = (p.attributes_normalized || p.payload?.attributes || []).map(a => `${a.name}: ${a.options?.join(", ")}`).join("; ") || "—";
+    
+    // Determinar unidad actual (de payload o inferida)
+    const currentUnit = p.sell_unit || p.payload?._sell_unit_override || this.inferUnit(p);
 
     detail.innerHTML = `
       <div class="field">
@@ -245,13 +305,31 @@ class ProductsCrud extends HTMLElement {
         <div class="field-value">${p.price != null ? `$${Number(p.price).toLocaleString()} ${p.currency || ""}` : "—"}</div>
       </div>
       <div class="field">
-        <label>Categorías</label>
-        <div class="field-value">${categories}</div>
+        <label>Unidad de venta</label>
+        <div style="display:flex;gap:8px;align-items:center;">
+          <select id="sellUnit" style="background:#0f1520;color:#e7eef7;border:1px solid #253245;border-radius:8px;padding:8px 12px;font-size:13px;">
+            <option value="kg" ${currentUnit === "kg" ? "selected" : ""}>Por peso (kg)</option>
+            <option value="unit" ${currentUnit === "unit" ? "selected" : ""}>Por unidad</option>
+          </select>
+        </div>
+        <div style="font-size:11px;color:#8aa0b5;margin-top:4px;">
+          Define si este producto se vende por peso o por unidad
+        </div>
+      </div>
+      <div class="field">
+        <label>Categorías (separadas por coma)</label>
+        <input type="text" id="categoriesInput" value="${categoriesText}" placeholder="ej: Carnes, Vacuno, Premium" style="width:100%;" />
+        <div style="font-size:11px;color:#8aa0b5;margin-top:4px;">
+          Categorías del producto, separadas por coma
+        </div>
       </div>
       <div class="field">
         <label>Atributos</label>
         <div class="field-value">${attributes}</div>
       </div>
+      <div class="field">
+        <button id="saveProduct" style="width:100%;padding:10px;">Guardar cambios</button>
+      </div>
       <div class="field">
         <label>Última actualización</label>
         <div class="field-value">${p.refreshed_at ? new Date(p.refreshed_at).toLocaleString() : "—"}</div>
@@ -261,6 +339,136 @@ class ProductsCrud extends HTMLElement {
         <div class="field-value json">${JSON.stringify(p.payload || {}, null, 2)}</div>
       </div>
     `;
+
+    // Bind save button
+    this.shadowRoot.getElementById("saveProduct").onclick = () => this.saveProduct();
+  }
+
+  async saveProduct() {
+    if (this.selectedItems.length !== 1) return;
+    
+    const p = this.selectedItems[0];
+    const btn = this.shadowRoot.getElementById("saveProduct");
+    const sellUnitSelect = this.shadowRoot.getElementById("sellUnit");
+    const categoriesInput = this.shadowRoot.getElementById("categoriesInput");
+    
+    const sell_unit = sellUnitSelect.value;
+    const categories = categoriesInput.value.split(",").map(s => s.trim()).filter(Boolean);
+    
+    btn.disabled = true;
+    btn.textContent = "Guardando...";
+    
+    try {
+      await api.updateProduct(p.woo_product_id, { sell_unit, categories });
+      
+      // Actualizar localmente
+      p.sell_unit = sell_unit;
+      p.categories = JSON.stringify(categories.map(name => ({ name })));
+      const idx = this.items.findIndex(i => i.woo_product_id === p.woo_product_id);
+      if (idx >= 0) {
+        this.items[idx].sell_unit = sell_unit;
+        this.items[idx].categories = p.categories;
+      }
+      
+      btn.textContent = "Guardado!";
+      this.renderList();
+      setTimeout(() => { btn.textContent = "Guardar cambios"; btn.disabled = false; }, 1500);
+    } catch (e) {
+      console.error("Error saving product:", e);
+      alert("Error guardando: " + (e.message || e));
+      btn.textContent = "Guardar cambios";
+      btn.disabled = false;
+    }
+  }
+
+  renderMultiDetail() {
+    const detail = this.shadowRoot.getElementById("detail");
+    const count = this.selectedItems.length;
+    const names = this.selectedItems.slice(0, 5).map(p => p.name).join(", ");
+    const moreText = count > 5 ? ` y ${count - 5} más...` : "";
+
+    detail.innerHTML = `
+      <div class="field">
+        <label>Productos seleccionados</label>
+        <div class="field-value" style="color:#2ecc71;font-weight:600;">${count} productos</div>
+        <div style="font-size:11px;color:#8aa0b5;margin-top:4px;">${names}${moreText}</div>
+      </div>
+      <div class="field">
+        <label>Unidad de venta (para todos)</label>
+        <div style="display:flex;gap:8px;align-items:center;">
+          <select id="sellUnit" style="background:#0f1520;color:#e7eef7;border:1px solid #253245;border-radius:8px;padding:8px 12px;font-size:13px;flex:1;">
+            <option value="kg">Por peso (kg)</option>
+            <option value="unit">Por unidad</option>
+          </select>
+          <button id="saveUnit" style="padding:8px 16px;">Guardar para ${count}</button>
+        </div>
+        <div style="font-size:11px;color:#8aa0b5;margin-top:4px;">
+          Se aplicará a todos los productos seleccionados
+        </div>
+      </div>
+      <div class="field">
+        <button id="clearSelection" class="secondary" style="width:100%;">Limpiar selección</button>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById("saveUnit").onclick = () => this.saveProductUnit();
+    this.shadowRoot.getElementById("clearSelection").onclick = () => {
+      this.selectedItems = [];
+      this.lastClickedIndex = -1;
+      this.renderList();
+      this.renderDetail();
+    };
+  }
+
+  inferUnit(p) {
+    const name = String(p.name || "").toLowerCase();
+    const cats = (p.payload?.categories || []).map(c => String(c.name || c.slug || "").toLowerCase());
+    const allText = name + " " + cats.join(" ");
+    
+    // Productos que típicamente se venden por unidad
+    if (/chimichurri|provoleta|queso|pan|salsa|aderezo|condimento|especias?|vino|vinos|bebida|cerveza|gaseosa|whisky|ron|gin|vodka|fernet/i.test(allText)) {
+      return "unit";
+    }
+    return "kg";
+  }
+
+  async saveProductUnit() {
+    if (!this.selectedItems.length) return;
+    
+    const select = this.shadowRoot.getElementById("sellUnit");
+    const btn = this.shadowRoot.getElementById("saveUnit");
+    const unit = select.value;
+    const count = this.selectedItems.length;
+    
+    btn.disabled = true;
+    btn.textContent = "Guardando...";
+    
+    try {
+      // IDs de todos los productos seleccionados
+      const wooProductIds = this.selectedItems.map(p => p.woo_product_id);
+      
+      // Un solo request para todos
+      await api.updateProductsUnit(wooProductIds, { sell_unit: unit });
+      
+      // Actualizar localmente
+      for (const p of this.selectedItems) {
+        p.sell_unit = unit;
+        const idx = this.items.findIndex(i => i.woo_product_id === p.woo_product_id);
+        if (idx >= 0) this.items[idx].sell_unit = unit;
+      }
+      
+      btn.textContent = `Guardado ${count}!`;
+      this.renderList(); // Actualizar badges en lista
+      setTimeout(() => { 
+        btn.textContent = count > 1 ? `Guardar para ${count}` : "Guardar"; 
+        btn.disabled = false; 
+      }, 1500);
+    } catch (e) {
+      console.error("Error saving product unit:", e);
+      alert("Error guardando: " + (e.message || e));
+      btn.textContent = count > 1 ? `Guardar para ${count}` : "Guardar";
+      btn.disabled = false;
+    }
   }
 }