+ {/* Toast Notification */}
+ {toastMessage && (
+
+
+ {toastMessage}
+
+ )}
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+
+ Plantillas de Mensajes & WhatsApp
+
+
+ {templates.length} Plantillas Oficiales
+
+
+
+ Personaliza los textos predeterminados de WhatsApp, OTPs de seguridad, despachos y cotizaciones con variables automáticas.
+
+
+
+
+
+ {/* Global Actions */}
+
+
+
+
+
+
+
+ {/* Categories Tabs */}
+
+
+
+ {TEMPLATE_CATEGORIES.map((cat) => {
+ const isSelected = selectedCategory === cat.key;
+ const count = categoryCounts[cat.key] || 0;
+ return (
+
+ );
+ })}
+
+
+ {/* Search Bar */}
+
+
+ setSearch(e.target.value)}
+ placeholder="Buscar plantilla por título, contenido, ID o variable (ej. cliente_nombre, orden_id, OTP)..."
+ className="w-full bg-neutral-900 border border-neutral-800 rounded-2xl pl-11 pr-4 py-3 text-xs text-white placeholder-neutral-500 focus:outline-none focus:border-purple-500 transition-colors shadow-inner"
+ />
+ {search && (
+
+ )}
+
+
+ {/* Templates Grid */}
+ {loading ? (
+
+
+
Cargando catálogo de plantillas...
+
+ ) : filteredTemplates.length === 0 ? (
+
+
+
+
+
No se encontraron plantillas
+
+ No hay plantillas que coincidan con "{search}" en la categoría seleccionada.
+
+
+
+ ) : (
+
+ {filteredTemplates.map((template) => {
+ const isCustomized = template.content !== template.defaultContent;
+ const catMeta = TEMPLATE_CATEGORIES.find((c) => c.key === template.category);
+
+ return (
+
+ {/* Card Header */}
+
+
+
+
+ {catMeta?.emoji} {catMeta?.name}
+
+
+
+
+ WhatsApp
+
+
+ {isCustomized ? (
+
+
+ Personalizado
+
+ ) : (
+
+
+ Fábrica
+
+ )}
+
+
+
+ {template.id}
+
+
+
+
+
+ {template.title}
+
+
+ {template.description}
+
+
+
+
+ {/* WhatsApp Chat Preview Snippet */}
+
+
+
+
+ Vista Previa de Mensaje
+
+
+ {template.content.length} caracteres
+
+
+
+
+ {template.content}
+
+
+
+ {/* Available Variables Chips */}
+
+
+
+
+ Variables Dinámicas ({template.availableVariables.length}):
+
+
+
+ {template.availableVariables.map((v) => (
+
+ {`{${v.key}}`}
+
+ ))}
+
+
+
+ {/* Card Action Buttons */}
+
+
+
+
+
+
+
+
+ {isCustomized && (
+
+ )}
+
+
+
+
+
+ );
+ })}
+
+ )}
+
+ {/* EDIT TEMPLATE MODAL */}
+ {editingTemplate && (
+
+
+ {/* Modal Header */}
+
+
+
+
+
+
+
+
{editTitle}
+
+ {editingTemplate.id}
+
+
+
{editDescription}
+
+
+
+
+
+
+ {/* Modal Body */}
+
+ {/* Variable Insertion Chips */}
+
+
+
+
+ Haz clic en una variable para insertarla en el texto:
+
+
+ Se reemplazará automáticamente con datos reales al enviar
+
+
+
+
+ {editingTemplate.availableVariables.map((v) => (
+
+ ))}
+
+
+
+ {/* Textarea Editor & Live Preview Grid */}
+
+ {/* Editor Textarea */}
+
+
+
+
+ {editContent.length} caracteres | {editContent.split(/\s+/).filter(Boolean).length} palabras
+
+
+
+