mejoras en el modelo de clarificacion de productos

public/components/recommendations-crud.js

@@ -9,12 +9,20 @@ class RecommendationsCrud extends HTMLElement {
     this.loading = false;
     this.searchQuery = "";
     this.editMode = null; // 'create' | 'edit' | null
+    
+    // Cache de productos para el selector
+    this.allProducts = [];
+    this.productsLoaded = false;
+    
+    // Productos seleccionados en el formulario
+    this.selectedTriggerProducts = [];
+    this.selectedRecommendedProducts = [];
 
     this.shadowRoot.innerHTML = `
       <style>
         :host { display:block; height:100%; padding:16px; overflow:hidden; }
         * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
-        .container { display:grid; grid-template-columns:1fr 450px; gap:16px; height:100%; }
+        .container { display:grid; grid-template-columns:1fr 500px; gap:16px; height:100%; }
         .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; }
         .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
         
@@ -55,6 +63,38 @@ class RecommendationsCrud extends HTMLElement {
         
         .toggle { display:flex; align-items:center; gap:8px; cursor:pointer; }
         .toggle input { width:auto; }
+        
+        /* Product selector styles */
+        .product-selector { position:relative; }
+        .product-search { margin-bottom:8px; }
+        .product-dropdown { 
+          position:absolute; top:100%; left:0; right:0; z-index:100;
+          background:#0f1520; border:1px solid #253245; border-radius:8px;
+          max-height:200px; overflow-y:auto; display:none;
+        }
+        .product-dropdown.open { display:block; }
+        .product-option { 
+          padding:8px 12px; cursor:pointer; font-size:13px; color:#e7eef7;
+          display:flex; justify-content:space-between; align-items:center;
+        }
+        .product-option:hover { background:#1a2535; }
+        .product-option.selected { background:#1a3a5c; }
+        .product-option .price { font-size:11px; color:#8aa0b5; }
+        
+        .selected-products { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; min-height:30px; }
+        .product-chip {
+          display:inline-flex; align-items:center; gap:4px;
+          background:#253245; color:#e7eef7; padding:4px 8px 4px 12px;
+          border-radius:999px; font-size:12px;
+        }
+        .product-chip .remove {
+          cursor:pointer; width:16px; height:16px; border-radius:50%;
+          background:#e74c3c; color:#fff; font-size:10px;
+          display:flex; align-items:center; justify-content:center;
+        }
+        .product-chip .remove:hover { background:#c0392b; }
+        
+        .empty-hint { color:#8aa0b5; font-size:12px; font-style:italic; }
       </style>
 
       <div class="container">
@@ -72,7 +112,7 @@ class RecommendationsCrud extends HTMLElement {
         <div class="panel">
           <div class="panel-title" id="formTitle">Detalle</div>
           <div class="form" id="form">
-            <div class="form-empty">Seleccioná una regla o creá una nueva</div>
+            <div class="form-empty">Selecciona una regla o crea una nueva</div>
           </div>
         </div>
       </div>
@@ -89,6 +129,19 @@ class RecommendationsCrud extends HTMLElement {
     this.shadowRoot.getElementById("newBtn").onclick = () => this.showCreateForm();
 
     this.load();
+    this.loadProducts();
+  }
+
+  async loadProducts() {
+    if (this.productsLoaded) return;
+    try {
+      const data = await api.products({ limit: 2000 });
+      this.allProducts = (data.items || []).filter(p => p.stock_status === "instock");
+      this.productsLoaded = true;
+    } catch (e) {
+      console.error("Error loading products:", e);
+      this.allProducts = [];
+    }
   }
 
   async load() {
@@ -108,6 +161,11 @@ class RecommendationsCrud extends HTMLElement {
     }
   }
 
+  getProductName(id) {
+    const p = this.allProducts.find(x => x.woo_product_id === id);
+    return p?.name || `Producto #${id}`;
+  }
+
   renderList() {
     const list = this.shadowRoot.getElementById("list");
 
@@ -126,10 +184,15 @@ class RecommendationsCrud extends HTMLElement {
       const el = document.createElement("div");
       el.className = "item" + (this.selected?.id === item.id ? " active" : "");
       
-      const trigger = item.trigger || {};
-      const keywords = (trigger.keywords || []).join(", ") || "—";
-      const queries = (item.queries || []).slice(0, 3).join(", ");
-      const hasMore = (item.queries || []).length > 3;
+      // Mostrar productos trigger
+      const triggerIds = item.trigger_product_ids || [];
+      const triggerNames = triggerIds.slice(0, 3).map(id => this.getProductName(id)).join(", ");
+      const triggerMore = triggerIds.length > 3 ? ` (+${triggerIds.length - 3})` : "";
+      
+      // Mostrar productos recomendados
+      const recoIds = item.recommended_product_ids || [];
+      const recoNames = recoIds.slice(0, 3).map(id => this.getProductName(id)).join(", ");
+      const recoMore = recoIds.length > 3 ? ` (+${recoIds.length - 3})` : "";
 
       el.innerHTML = `
         <div class="item-key">
@@ -137,13 +200,15 @@ class RecommendationsCrud extends HTMLElement {
           <span class="badge ${item.active ? "active" : "inactive"}">${item.active ? "Activa" : "Inactiva"}</span>
           <span class="badge priority">P: ${item.priority}</span>
         </div>
-        <div class="item-trigger">Keywords: ${keywords}</div>
-        <div class="item-queries">→ ${queries}${hasMore ? "..." : ""}</div>
+        <div class="item-trigger">Cuando piden: ${triggerNames || "—"}${triggerMore}</div>
+        <div class="item-queries">→ Recomendar: ${recoNames || "—"}${recoMore}</div>
       `;
 
       el.onclick = () => {
         this.selected = item;
         this.editMode = "edit";
+        this.selectedTriggerProducts = [...(item.trigger_product_ids || [])];
+        this.selectedRecommendedProducts = [...(item.recommended_product_ids || [])];
         this.renderList();
         this.renderForm();
       };
@@ -155,6 +220,8 @@ class RecommendationsCrud extends HTMLElement {
   showCreateForm() {
     this.selected = null;
     this.editMode = "create";
+    this.selectedTriggerProducts = [];
+    this.selectedRecommendedProducts = [];
     this.renderList();
     this.renderForm();
   }
@@ -165,7 +232,7 @@ class RecommendationsCrud extends HTMLElement {
 
     if (!this.editMode) {
       title.textContent = "Detalle";
-      form.innerHTML = `<div class="form-empty">Seleccioná una regla o creá una nueva</div>`;
+      form.innerHTML = `<div class="form-empty">Selecciona una regla o crea una nueva</div>`;
       return;
     }
 
@@ -173,31 +240,20 @@ class RecommendationsCrud extends HTMLElement {
     title.textContent = isCreate ? "Nueva Regla" : "Editar Regla";
 
     const rule_key = this.selected?.rule_key || "";
-    const trigger = this.selected?.trigger || {};
-    const queries = this.selected?.queries || [];
-    const ask_slots = this.selected?.ask_slots || [];
     const active = this.selected?.active !== false;
     const priority = this.selected?.priority || 100;
 
-    // Convert arrays to comma-separated strings for display
-    const triggerKeywords = (trigger.keywords || []).join(", ");
-    const queriesText = (queries || []).join(", ");
-    const askSlotsText = Array.isArray(ask_slots) 
-      ? ask_slots.map(s => typeof s === "string" ? s : s?.slot || s?.keyword || "").filter(Boolean).join(", ")
-      : "";
-
     form.innerHTML = `
       <div class="field">
-        <label>Rule Key (identificador unico)</label>
-        <input type="text" id="ruleKeyInput" value="${rule_key}" ${isCreate ? "" : "disabled"} placeholder="ej: asado_core, alcohol_yes" />
-        <div class="field-hint">Sin espacios, en minusculas con guiones bajos</div>
+        <label>Nombre de la regla</label>
+        <input type="text" id="ruleKeyInput" value="${rule_key}" ${isCreate ? "" : "disabled"} placeholder="ej: asado_recos, vinos_con_carne" />
+        <div class="field-hint">Identificador unico, sin espacios</div>
       </div>
       
       <div class="field-row">
         <div class="field">
           <label>Prioridad</label>
           <input type="number" id="priorityInput" value="${priority}" min="1" max="1000" />
-          <div class="field-hint">Mayor = primero</div>
         </div>
         <div class="field">
           <label>Estado</label>
@@ -209,21 +265,23 @@ class RecommendationsCrud extends HTMLElement {
       </div>
       
       <div class="field">
-        <label>Trigger (palabras clave)</label>
-        <textarea id="triggerInput" placeholder="asado, parrilla, carne, bife...">${triggerKeywords}</textarea>
-        <div class="field-hint">Palabras que activan esta regla, separadas por coma</div>
+        <label>Cuando el cliente pide...</label>
+        <div class="product-selector" id="triggerSelector">
+          <input type="text" class="product-search" id="triggerSearch" placeholder="Buscar producto..." />
+          <div class="product-dropdown" id="triggerDropdown"></div>
+          <div class="selected-products" id="triggerSelected"></div>
+        </div>
+        <div class="field-hint">Productos que activan esta recomendacion</div>
       </div>
       
       <div class="field">
-        <label>Productos a recomendar</label>
-        <textarea id="queriesInput" placeholder="provoleta, chimichurri, ensalada...">${queriesText}</textarea>
-        <div class="field-hint">Productos a buscar cuando se activa la regla, separados por coma</div>
-      </div>
-      
-      <div class="field">
-        <label>Preguntar sobre... (opcional)</label>
-        <textarea id="askSlotsInput" placeholder="achuras, cerdo, vino...">${askSlotsText}</textarea>
-        <div class="field-hint">El bot preguntara al usuario sobre estos temas de forma natural</div>
+        <label>Recomendar estos productos...</label>
+        <div class="product-selector" id="recoSelector">
+          <input type="text" class="product-search" id="recoSearch" placeholder="Buscar producto..." />
+          <div class="product-dropdown" id="recoDropdown"></div>
+          <div class="selected-products" id="recoSelected"></div>
+        </div>
+        <div class="field-hint">Productos a sugerir al cliente</div>
       </div>
       
       <div class="actions">
@@ -233,48 +291,145 @@ class RecommendationsCrud extends HTMLElement {
       </div>
     `;
 
+    // Setup event handlers
     this.shadowRoot.getElementById("saveBtn").onclick = () => this.save();
     this.shadowRoot.getElementById("cancelBtn").onclick = () => this.cancel();
     if (!isCreate) {
       this.shadowRoot.getElementById("deleteBtn").onclick = () => this.delete();
     }
+
+    // Setup product selectors
+    this.setupProductSelector("trigger", this.selectedTriggerProducts);
+    this.setupProductSelector("reco", this.selectedRecommendedProducts);
   }
 
-  parseCommaSeparated(str) {
-    return String(str || "")
-      .split(",")
-      .map(s => s.trim().toLowerCase())
-      .filter(Boolean);
+  setupProductSelector(type, selectedIds) {
+    const searchInput = this.shadowRoot.getElementById(`${type}Search`);
+    const dropdown = this.shadowRoot.getElementById(`${type}Dropdown`);
+    const selectedContainer = this.shadowRoot.getElementById(`${type}Selected`);
+
+    const renderSelected = () => {
+      const ids = type === "trigger" ? this.selectedTriggerProducts : this.selectedRecommendedProducts;
+      if (!ids.length) {
+        selectedContainer.innerHTML = `<span class="empty-hint">Ningun producto seleccionado</span>`;
+        return;
+      }
+      selectedContainer.innerHTML = ids.map(id => {
+        const name = this.getProductName(id);
+        return `<span class="product-chip" data-id="${id}">${name}<span class="remove">×</span></span>`;
+      }).join("");
+
+      selectedContainer.querySelectorAll(".remove").forEach(btn => {
+        btn.onclick = (e) => {
+          e.stopPropagation();
+          const id = parseInt(btn.parentElement.dataset.id, 10);
+          if (type === "trigger") {
+            this.selectedTriggerProducts = this.selectedTriggerProducts.filter(x => x !== id);
+          } else {
+            this.selectedRecommendedProducts = this.selectedRecommendedProducts.filter(x => x !== id);
+          }
+          renderSelected();
+          renderDropdown(searchInput.value);
+        };
+      });
+    };
+
+    const renderDropdown = (query) => {
+      const q = (query || "").toLowerCase().trim();
+      const selectedSet = new Set(type === "trigger" ? this.selectedTriggerProducts : this.selectedRecommendedProducts);
+      
+      let filtered = this.allProducts;
+      if (q) {
+        filtered = filtered.filter(p => p.name.toLowerCase().includes(q));
+      }
+      filtered = filtered.slice(0, 50); // Limit for performance
+
+      if (!q && !filtered.length) {
+        dropdown.classList.remove("open");
+        return;
+      }
+
+      dropdown.innerHTML = filtered.map(p => {
+        const isSelected = selectedSet.has(p.woo_product_id);
+        return `
+          <div class="product-option ${isSelected ? "selected" : ""}" data-id="${p.woo_product_id}">
+            <span>${p.name}</span>
+            <span class="price">$${p.price || 0}</span>
+          </div>
+        `;
+      }).join("");
+
+      dropdown.querySelectorAll(".product-option").forEach(opt => {
+        opt.onclick = () => {
+          const id = parseInt(opt.dataset.id, 10);
+          if (type === "trigger") {
+            if (!this.selectedTriggerProducts.includes(id)) {
+              this.selectedTriggerProducts.push(id);
+            }
+          } else {
+            if (!this.selectedRecommendedProducts.includes(id)) {
+              this.selectedRecommendedProducts.push(id);
+            }
+          }
+          searchInput.value = "";
+          dropdown.classList.remove("open");
+          renderSelected();
+        };
+      });
+
+      dropdown.classList.add("open");
+    };
+
+    searchInput.oninput = () => {
+      clearTimeout(this[`_${type}Timer`]);
+      this[`_${type}Timer`] = setTimeout(() => renderDropdown(searchInput.value), 150);
+    };
+
+    searchInput.onfocus = () => {
+      if (searchInput.value || this.allProducts.length) {
+        renderDropdown(searchInput.value);
+      }
+    };
+
+    // Close dropdown on outside click
+    document.addEventListener("click", (e) => {
+      if (!this.shadowRoot.getElementById(`${type}Selector`)?.contains(e.target)) {
+        dropdown.classList.remove("open");
+      }
+    });
+
+    renderSelected();
   }
 
   async save() {
     const ruleKey = this.shadowRoot.getElementById("ruleKeyInput").value.trim().toLowerCase().replace(/\s+/g, "_");
     const priority = parseInt(this.shadowRoot.getElementById("priorityInput").value, 10) || 100;
     const active = this.shadowRoot.getElementById("activeInput").checked;
-    
-    // Parse comma-separated values into arrays
-    const triggerKeywords = this.parseCommaSeparated(this.shadowRoot.getElementById("triggerInput").value);
-    const queries = this.parseCommaSeparated(this.shadowRoot.getElementById("queriesInput").value);
-    const askSlotsKeywords = this.parseCommaSeparated(this.shadowRoot.getElementById("askSlotsInput").value);
 
     if (!ruleKey) {
-      alert("El rule_key es requerido");
+      alert("El nombre de la regla es requerido");
       return;
     }
 
-    // Build trigger object with keywords array
-    const trigger = triggerKeywords.length > 0 ? { keywords: triggerKeywords } : {};
-    
-    // Ask slots as simple array of keywords (LLM will formulate questions naturally)
-    const ask_slots = askSlotsKeywords;
+    if (!this.selectedTriggerProducts.length) {
+      alert("Selecciona al menos un producto trigger");
+      return;
+    }
+
+    if (!this.selectedRecommendedProducts.length) {
+      alert("Selecciona al menos un producto para recomendar");
+      return;
+    }
 
     const data = {
       rule_key: ruleKey,
-      trigger,
-      queries,
-      ask_slots,
+      trigger: {}, // Legacy field, keep empty
+      queries: [], // Legacy field, keep empty
+      ask_slots: [],
       active,
       priority,
+      trigger_product_ids: this.selectedTriggerProducts,
+      recommended_product_ids: this.selectedRecommendedProducts,
     };
 
     try {
@@ -312,6 +467,8 @@ class RecommendationsCrud extends HTMLElement {
   cancel() {
     this.editMode = null;
     this.selected = null;
+    this.selectedTriggerProducts = [];
+    this.selectedRecommendedProducts = [];
     this.renderList();
     this.renderForm();
   }