Feature: Conectar pagina de mensajes con API

app/pages/messages/index.vue

@@ -93,24 +93,91 @@ definePageMeta({
   icon: 'i-lucide-message-square'
 })
 
-const selectedInstance = ref(null)
+const { instances, fetchInstances } = useInstances()
+
+const selectedInstance = ref<string | null>(null)
 const searchQuery = ref('')
 const selectedChat = ref<any>(null)
-
-// TODO: Conectar con API real
-const instanceOptions = ref<any[]>([])
 const chats = ref<any[]>([])
 const messages = ref<any[]>([])
+const loadingChats = ref(false)
+const loadingMessages = ref(false)
+
+// Instance options for selector
+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].value
+  }
+}, { immediate: true })
+
+// Load chats when instance changes
+watch(selectedInstance, async (instanceId) => {
+  if (!instanceId) {
+    chats.value = []
+    return
+  }
+
+  loadingChats.value = true
+  try {
+    chats.value = await $fetch(`/api/messages/${instanceId}/chats`)
+  } catch (e) {
+    console.error('Error loading chats:', e)
+    chats.value = []
+  } finally {
+    loadingChats.value = false
+  }
+})
+
+// Load messages when chat changes
+watch(selectedChat, async (chat) => {
+  if (!chat || !selectedInstance.value) {
+    messages.value = []
+    return
+  }
+
+  loadingMessages.value = true
+  try {
+    messages.value = await $fetch(`/api/messages/${selectedInstance.value}/${chat.id}`)
+  } catch (e) {
+    console.error('Error loading messages:', e)
+    messages.value = []
+  } finally {
+    loadingMessages.value = false
+  }
+})
 
 const filteredChats = computed(() => {
   if (!searchQuery.value) return chats.value
   return chats.value.filter(chat =>
-    chat.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    chat.name?.toLowerCase().includes(searchQuery.value.toLowerCase())
   )
 })
 
 const handleSendMessage = async (content: string) => {
-  console.log('Sending:', content)
-  // TODO: Implementar envio de mensajes
+  if (!selectedInstance.value || !selectedChat.value) return
+
+  try {
+    await $fetch(`/api/messages/${selectedInstance.value}/${selectedChat.value.id}/send`, {
+      method: 'POST',
+      body: { content }
+    })
+
+    // Reload messages
+    messages.value = await $fetch(`/api/messages/${selectedInstance.value}/${selectedChat.value.id}`)
+  } catch (e) {
+    console.error('Error sending message:', e)
+  }
 }
+
+// Load instances on mount
+onMounted(() => {
+  fetchInstances()
+})
 </script>