whatsappNucleo/app/pages/debug/index.vue

<template>
  <div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-[var(--wa-text)]">Debug</h1>
        <p class="text-[var(--wa-text-muted)]">Herramientas de depuracion para Baileys</p>
      </div>
    </div>

    <!-- Warning Banner -->
    <div class="p-4 rounded-lg bg-yellow-900/20 border border-yellow-600/50">
      <div class="flex items-center gap-2 text-yellow-400">
        <UIcon name="i-lucide-alert-triangle" class="w-5 h-5" />
        <span class="font-medium">Modo Debug</span>
      </div>
      <p class="text-sm text-yellow-300/80 mt-1">
        Estas funciones ejecutan comandos raw de Baileys. Usar con precaucion.
      </p>
    </div>

    <!-- Instance Selector -->
    <div class="flex items-center gap-4">
      <USelectMenu
        v-model="selectedInstance"
        :items="instanceOptions"
        placeholder="Seleccionar instancia conectada"
        class="w-64"
      />
      <span v-if="!selectedInstance" class="text-sm text-[var(--wa-text-muted)]">
        Selecciona una instancia para usar las herramientas de debug
      </span>
    </div>

    <!-- Tabs -->
    <div v-if="selectedInstance" class="instance-card">
      <UTabs :items="tabs" class="w-full">
        <template #blocklist>
          <DebugBlocklistSection
            :instance-id="selectedInstance?.value"
            @response="handleResponse"
          />
        </template>
        <template #privacy>
          <DebugPrivacySection
            :instance-id="selectedInstance?.value"
            @response="handleResponse"
          />
        </template>
        <template #groups>
          <DebugGroupsSection
            :instance-id="selectedInstance?.value"
            @response="handleResponse"
          />
        </template>
        <template #history>
          <DebugHistorySection
            :instance-id="selectedInstance?.value"
            @response="handleResponse"
          />
        </template>
        <template #chat>
          <DebugChatSection
            :instance-id="selectedInstance?.value"
            @response="handleResponse"
          />
        </template>
        <template #media>
          <DebugMediaSection
            :instance-id="selectedInstance?.value"
            @response="handleResponse"
          />
        </template>
      </UTabs>
    </div>

    <!-- Response Viewer -->
    <div v-if="lastResponse" class="instance-card p-4">
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm font-medium text-[var(--wa-text)]">Ultima Respuesta</span>
        <div class="flex items-center gap-2">
          <span class="text-xs text-[var(--wa-text-muted)]">{{ lastResponseTime }}</span>
          <UButton size="xs" variant="ghost" color="neutral" @click="lastResponse = null">
            Limpiar
          </UButton>
        </div>
      </div>
      <pre
        class="text-xs font-mono p-4 rounded overflow-auto max-h-96"
        :class="lastResponse.success ? 'text-green-400 bg-green-900/20' : 'text-red-400 bg-red-900/20'"
      >{{ JSON.stringify(lastResponse, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard',
  title: 'Debug',
  icon: 'i-lucide-bug'
})

const { instances, fetchInstances } = useInstances()

const selectedInstance = ref<{ label: string; value: string } | null>(null)
const lastResponse = ref<any>(null)
const lastResponseTime = ref<string>('')

// Instance options for selector (only connected instances)
const instanceOptions = computed(() =>
  instances.value
    .filter(i => i.status === 'connected')
    .map(i => ({ label: i.name, value: i.id }))
)

// Auto-select first connected instance
watch(instanceOptions, (opts) => {
  if (opts.length > 0 && !selectedInstance.value) {
    selectedInstance.value = opts[0]
  }
}, { immediate: true })

const tabs = [
  { label: 'Blocklist', slot: 'blocklist', icon: 'i-lucide-ban' },
  { label: 'Privacy', slot: 'privacy', icon: 'i-lucide-shield' },
  { label: 'Groups', slot: 'groups', icon: 'i-lucide-users' },
  { label: 'History', slot: 'history', icon: 'i-lucide-history' },
  { label: 'Chat', slot: 'chat', icon: 'i-lucide-message-circle' },
  { label: 'Media', slot: 'media', icon: 'i-lucide-image' },
]

const handleResponse = (response: any) => {
  lastResponse.value = response
  lastResponseTime.value = new Date().toLocaleTimeString()
}

// Load instances on mount
onMounted(() => {
  fetchInstances()
})
</script>