modificando el patron del sistema, orientado mas al usuario

public/components/takeovers-crud.js

@@ -1,5 +1,6 @@
 import { api } from "../lib/api.js";
 import { on } from "../lib/bus.js";
+import { modal } from "../lib/modal.js";
 
 class TakeoversCrud extends HTMLElement {
   constructor() {
@@ -10,6 +11,7 @@ class TakeoversCrud extends HTMLElement {
     this.loading = false;
     this.products = [];
     this.pendingCount = 0;
+    this.cartItemsToAdd = []; // Items que el humano quiere agregar al carrito
 
     this.shadowRoot.innerHTML = `
       <style>
@@ -79,6 +81,22 @@ class TakeoversCrud extends HTMLElement {
         .product-option:hover { background:#1a2535; }
         .product-option .price { font-size:11px; color:#8aa0b5; }
         
+        .cart-section { background:#0d2818; border:1px solid #2ecc71; border-radius:8px; padding:12px; margin-bottom:12px; }
+        .cart-section h4 { margin:0 0 12px; font-size:13px; color:#2ecc71; display:flex; align-items:center; gap:8px; }
+        .cart-section h4 svg { width:16px; height:16px; fill:#2ecc71; }
+        .cart-items-list { margin-bottom:12px; }
+        .cart-item-row { display:flex; align-items:center; gap:8px; padding:8px; background:#0f1520; border-radius:6px; margin-bottom:6px; }
+        .cart-item-row .name { flex:1; font-size:13px; color:#e7eef7; }
+        .cart-item-row .qty { width:60px; text-align:center; }
+        .cart-item-row .unit-select { width:80px; }
+        .cart-item-row .remove-btn { background:#e74c3c; color:#fff; border:none; border-radius:4px; padding:4px 8px; cursor:pointer; font-size:11px; }
+        .cart-item-row .remove-btn:hover { background:#c0392b; }
+        .add-cart-row { display:flex; gap:8px; align-items:flex-end; }
+        .add-cart-row .product-selector { flex:1; }
+        .add-cart-row .qty-input { width:70px; }
+        .add-cart-row .unit-select { width:80px; }
+        .add-cart-row button { white-space:nowrap; }
+        
         .no-pending { text-align:center; padding:60px 20px; color:#2ecc71; }
         .no-pending svg { width:48px; height:48px; fill:#2ecc71; margin-bottom:16px; }
       </style>
@@ -259,9 +277,30 @@ class TakeoversCrud extends HTMLElement {
         </div>
       ` : ""}
 
+      <div class="cart-section">
+        <h4>
+          <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.49 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
+          Agregar al carrito del cliente
+        </h4>
+        <div class="cart-items-list" id="cartItemsList"></div>
+        <div class="add-cart-row">
+          <div class="product-selector" id="cartProductSelector">
+            <input type="text" id="cartProductSearch" placeholder="Buscar producto..." />
+            <div class="product-dropdown" id="cartProductDropdown"></div>
+          </div>
+          <input type="number" id="cartQtyInput" class="qty-input" placeholder="Cant" min="0.1" step="0.1" value="1" />
+          <select id="cartUnitSelect" class="unit-select">
+            <option value="kg">kg</option>
+            <option value="unit">unidad</option>
+            <option value="g">gramos</option>
+          </select>
+          <button type="button" id="addCartItemBtn" class="secondary">+ Agregar</button>
+        </div>
+      </div>
+
       <div class="field" style="flex:1;">
         <label>Tu respuesta (se enviara como el bot)</label>
-        <textarea id="responseInput" placeholder="Ej: Disculpa, no tenemos ese producto. Pero tenemos..."></textarea>
+        <textarea id="responseInput" placeholder="Ej: Te anoto 2kg de vacío. ¿Algo más?"></textarea>
       </div>
 
       <div class="alias-section">
@@ -297,7 +336,148 @@ class TakeoversCrud extends HTMLElement {
       aliasSection.style.display = addAliasCheck.checked ? "block" : "none";
     };
 
+    // Limpiar items al cambiar de takeover
+    this.cartItemsToAdd = [];
+    this.renderCartItemsList();
+    
     this.setupProductSelector();
+    this.setupCartProductSelector();
+  }
+  
+  renderCartItemsList() {
+    const container = this.shadowRoot.getElementById("cartItemsList");
+    if (!container) return;
+    
+    if (this.cartItemsToAdd.length === 0) {
+      container.innerHTML = `<div style="font-size:12px;color:#8aa0b5;padding:8px;">Sin items agregados</div>`;
+      return;
+    }
+    
+    container.innerHTML = this.cartItemsToAdd.map((item, idx) => `
+      <div class="cart-item-row">
+        <span class="name">${item.name}</span>
+        <input type="number" class="qty" value="${item.qty}" min="0.1" step="0.1" data-idx="${idx}" />
+        <select class="unit-select" data-idx="${idx}">
+          <option value="kg" ${item.unit === 'kg' ? 'selected' : ''}>kg</option>
+          <option value="unit" ${item.unit === 'unit' ? 'selected' : ''}>unidad</option>
+          <option value="g" ${item.unit === 'g' ? 'selected' : ''}>gramos</option>
+        </select>
+        <button class="remove-btn" data-idx="${idx}">✕</button>
+      </div>
+    `).join("");
+    
+    // Event listeners para editar/eliminar
+    container.querySelectorAll(".qty").forEach(input => {
+      input.onchange = (e) => {
+        const idx = parseInt(e.target.dataset.idx, 10);
+        this.cartItemsToAdd[idx].qty = parseFloat(e.target.value) || 1;
+      };
+    });
+    
+    container.querySelectorAll(".unit-select").forEach(select => {
+      select.onchange = (e) => {
+        const idx = parseInt(e.target.dataset.idx, 10);
+        this.cartItemsToAdd[idx].unit = e.target.value;
+      };
+    });
+    
+    container.querySelectorAll(".remove-btn").forEach(btn => {
+      btn.onclick = (e) => {
+        const idx = parseInt(e.target.dataset.idx, 10);
+        this.cartItemsToAdd.splice(idx, 1);
+        this.renderCartItemsList();
+      };
+    });
+  }
+  
+  setupCartProductSelector() {
+    const searchInput = this.shadowRoot.getElementById("cartProductSearch");
+    const dropdown = this.shadowRoot.getElementById("cartProductDropdown");
+    const addBtn = this.shadowRoot.getElementById("addCartItemBtn");
+    const qtyInput = this.shadowRoot.getElementById("cartQtyInput");
+    const unitSelect = this.shadowRoot.getElementById("cartUnitSelect");
+    
+    if (!searchInput || !dropdown || !addBtn) return;
+    
+    let selectedProduct = null;
+    
+    const renderDropdown = (query) => {
+      const q = (query || "").toLowerCase().trim();
+      let filtered = this.products;
+      if (q) {
+        filtered = filtered.filter(p => p.name.toLowerCase().includes(q));
+      }
+      filtered = filtered.slice(0, 30);
+      
+      if (!filtered.length) {
+        dropdown.classList.remove("open");
+        return;
+      }
+      
+      dropdown.innerHTML = filtered.map(p => `
+        <div class="product-option" data-id="${p.woo_product_id}" data-name="${this.escapeHtml(p.name)}" data-unit="${p.sell_unit || 'kg'}">
+          <span>${p.name}</span>
+          <span class="price">$${p.price || 0}</span>
+        </div>
+      `).join("");
+      
+      dropdown.querySelectorAll(".product-option").forEach(opt => {
+        opt.onclick = () => {
+          selectedProduct = {
+            woo_id: parseInt(opt.dataset.id, 10),
+            name: opt.dataset.name,
+          };
+          searchInput.value = selectedProduct.name;
+          // Auto-seleccionar unidad según producto
+          const productUnit = opt.dataset.unit || "kg";
+          if (unitSelect) {
+            unitSelect.value = productUnit === "unit" || productUnit === "Unidad" ? "unit" : "kg";
+          }
+          dropdown.classList.remove("open");
+        };
+      });
+      
+      dropdown.classList.add("open");
+    };
+    
+    searchInput.oninput = () => {
+      selectedProduct = null;
+      clearTimeout(this._cartSearchTimer);
+      this._cartSearchTimer = setTimeout(() => renderDropdown(searchInput.value), 150);
+    };
+    
+    searchInput.onfocus = () => renderDropdown(searchInput.value);
+    
+    addBtn.onclick = () => {
+      if (!selectedProduct) {
+        modal.warn("Selecciona un producto primero");
+        return;
+      }
+      
+      const qty = parseFloat(qtyInput.value) || 1;
+      const unit = unitSelect.value || "kg";
+      
+      this.cartItemsToAdd.push({
+        woo_id: selectedProduct.woo_id,
+        name: selectedProduct.name,
+        qty,
+        unit,
+      });
+      
+      // Limpiar inputs
+      searchInput.value = "";
+      qtyInput.value = "1";
+      selectedProduct = null;
+      
+      this.renderCartItemsList();
+    };
+    
+    // Close dropdown on outside click
+    document.addEventListener("click", (e) => {
+      if (!this.shadowRoot.getElementById("cartProductSelector")?.contains(e.target)) {
+        dropdown.classList.remove("open");
+      }
+    });
   }
 
   escapeHtml(str) {
@@ -362,7 +542,7 @@ class TakeoversCrud extends HTMLElement {
   async respond() {
     const response = this.shadowRoot.getElementById("responseInput").value.trim();
     if (!response) {
-      alert("Escribe una respuesta");
+      modal.warn("Escribe una respuesta");
       return;
     }
 
@@ -376,32 +556,42 @@ class TakeoversCrud extends HTMLElement {
       };
     }
 
+    // Items a agregar al carrito del cliente
+    const cartItems = this.cartItemsToAdd.length > 0 ? this.cartItemsToAdd : null;
+
     try {
-      await api.respondTakeover(this.selected.id, { response, add_alias: addAlias });
-      alert("Respuesta enviada");
+      await api.respondTakeover(this.selected.id, { 
+        response, 
+        add_alias: addAlias,
+        cart_items: cartItems,
+      });
+      
+      const itemsMsg = cartItems ? ` (${cartItems.length} item(s) agregados al carrito)` : "";
+      modal.success("Respuesta enviada" + itemsMsg);
+      
       this.selected = null;
+      this.cartItemsToAdd = [];
       await this.load();
       this.renderForm();
     } catch (e) {
       console.error("Error responding:", e);
-      alert("Error: " + (e.message || e));
+      modal.error("Error: " + (e.message || e));
     }
   }
 
   async cancel() {
-    if (!confirm("Cancelar este takeover? El cliente no recibira respuesta automatica.")) {
-      return;
-    }
+    const confirmed = await modal.confirm("¿Cancelar este takeover? El cliente no recibirá respuesta automática.");
+    if (!confirmed) return;
 
     try {
       await api.cancelTakeover(this.selected.id);
-      alert("Takeover cancelado");
+      modal.success("Takeover cancelado");
       this.selected = null;
       await this.load();
       this.renderForm();
     } catch (e) {
       console.error("Error cancelling:", e);
-      alert("Error: " + (e.message || e));
+      modal.error("Error: " + (e.message || e));
     }
   }
 }