Feature: Agregar botón para crear webhook de debug automáticamente

- Agregar botón "Crear Webhook de Debug" en WebhookReceiverSection
- Detectar si ya existe un webhook apuntando al receptor de debug
- Permitir eliminar el webhook de debug
- Incluir todos los eventos disponibles al crear el webhook
- También incluye mejoras previas de manejo de media y mensajes

app/components/debug/WebhookReceiverSection.vue

@@ -18,6 +18,32 @@
           <UIcon name="i-lucide-copy" class="w-4 h-4" />
         </button>
       </div>
+
+      <!-- Auto-create webhook button -->
+      <div class="flex items-center gap-3">
+        <UButton
+          v-if="!debugWebhookExists"
+          :loading="creatingWebhook"
+          variant="soft"
+          color="primary"
+          @click="createDebugWebhook"
+        >
+          <UIcon name="i-lucide-zap" class="w-4 h-4 mr-2" />
+          Crear Webhook de Debug
+        </UButton>
+        <div v-else class="flex items-center gap-2 text-green-400">
+          <UIcon name="i-lucide-check-circle" class="w-4 h-4" />
+          <span class="text-sm">Webhook de debug activo</span>
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="error"
+            @click="deleteDebugWebhook"
+          >
+            Eliminar
+          </UButton>
+        </div>
+      </div>
     </div>
 
     <hr class="border-[var(--wa-border)]" />
@@ -111,9 +137,29 @@ interface WebhookEvent {
   headers: Record<string, string | undefined>
 }
 
+interface Webhook {
+  id: string
+  name: string
+  url: string
+  events: string[]
+}
+
 const events = ref<WebhookEvent[]>([])
 const loading = ref(false)
 const expandedEvents = ref(new Set<string>())
+const creatingWebhook = ref(false)
+const debugWebhookId = ref<string | null>(null)
+
+// All available event types
+const allEventTypes = [
+  'message.received',
+  'message.sent',
+  'message.status',
+  'instance.connected',
+  'instance.disconnected',
+  'instance.status',
+  'instance.qr'
+]
 
 // Build receiver URL
 const receiverUrl = computed(() => {
@@ -123,6 +169,51 @@ const receiverUrl = computed(() => {
   return '/api/debug/webhook-receiver'
 })
 
+const debugWebhookExists = computed(() => !!debugWebhookId.value)
+
+// Check if debug webhook already exists
+const checkDebugWebhook = async () => {
+  try {
+    const webhooks = await $fetch<Webhook[]>('/api/webhooks')
+    const debugWh = webhooks.find(w => w.url.includes('/api/debug/webhook-receiver'))
+    debugWebhookId.value = debugWh?.id || null
+  } catch (error) {
+    console.error('Error checking webhooks:', error)
+  }
+}
+
+// Create debug webhook
+const createDebugWebhook = async () => {
+  creatingWebhook.value = true
+  try {
+    const result = await $fetch<{ id: string }>('/api/webhooks', {
+      method: 'POST',
+      body: {
+        name: 'Debug Receiver (Auto)',
+        url: receiverUrl.value,
+        events: allEventTypes,
+        instanceId: null // All instances
+      }
+    })
+    debugWebhookId.value = result.id
+  } catch (error) {
+    console.error('Error creating debug webhook:', error)
+  } finally {
+    creatingWebhook.value = false
+  }
+}
+
+// Delete debug webhook
+const deleteDebugWebhook = async () => {
+  if (!debugWebhookId.value) return
+  try {
+    await $fetch(`/api/webhooks/${debugWebhookId.value}`, { method: 'DELETE' })
+    debugWebhookId.value = null
+  } catch (error) {
+    console.error('Error deleting webhook:', error)
+  }
+}
+
 const fetchEvents = async () => {
   loading.value = true
   try {
@@ -172,6 +263,7 @@ const copyToClipboard = async (text: string) => {
 
 // Fetch events on mount and set up polling
 onMounted(() => {
+  checkDebugWebhook()
   fetchEvents()
 
   // Poll every 5 seconds