<template>
  <div class="layout-container">
    <!-- Menú lateral izquierdo -->
    <ChatSidebar 
      :chats="chats"
      :current-chat-id="chatUuid"
      @select-chat="selectChat"
      @create-chat="createNewChat"
    />

    <!-- Área principal del chat -->
    <ChatMain 
      :messages="messages"
      :is-loading="isLoading"
      @send-message="sendMessage"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import ChatSidebar from './ChatSidebar.vue'
import ChatMain from './ChatMain.vue'
import {chatService} from '../services/chatService.ts'
import {dateUtils} from '../utils/dateUtils.ts'

// Estado reactivo
const chatUuid = ref('')
const chats = ref([])
const messages = ref([])
const isLoading = ref(false)

// Cargar historial de chats
const loadHistory = async () => {
  try {
    const data = await chatService.getChats()
    chats.value = data
    
    // Autoabrir primer chat si no hay chatId activo
    if (!chatUuid.value && data.length > 0) {
      chatUuid.value = data[0].conversationId
      await loadMessages(chatUuid.value)
    }
  } catch (error) {
    console.error("Error cargando historial:", error)
  }
}

// Cargar mensajes de un chat específico
const loadMessages = async (selectedChatId) => {
  try {
    const data = await chatService.getChatMessages(selectedChatId)
    messages.value = data
  } catch (error) {
    console.error("Error al cargar mensajes:", error)
  }
}

// Seleccionar un chat
const selectChat = async (selectedId) => {
  if (selectedId !== chatUuid.value) {
    chatUuid.value = selectedId
    await loadMessages(chatUuid.value)
  }
}

// Crear nuevo chat
const createNewChat = async () => {
  try {
    const response = await chatService.createChat()
    chatUuid.value = response.conversationId;
    await loadHistory()
    await loadMessages(chatUuid.value)
  } catch (error) {
    console.error("Error al crear nuevo chat:", error)
  }
}

// Enviar mensaje
const sendMessage = async (prompt) => {
  // Crear nuevo chat si no existe
  if (!chatUuid.value) {
    await createNewChat()
  }
  
  // Agregar mensaje del usuario inmediatamente
  const userMessage = {
    role: "USER",
    content: prompt,
    createdAt: dateUtils.formatDate(new Date())
  }
  messages.value.push(userMessage)
  
  isLoading.value = true
  
  try {
    const data = await chatService.sendMessage(chatUuid.value, prompt)
    chatUuid.value = data.conversationId
    
    // Agregar respuesta del bot
    const botMessage = {
      role: "ASSISTANT",
      content: data.content,
      createdAt: data.createdAt
    }
    messages.value.push(botMessage)
    
    await loadHistory()
  } catch (error) {
    console.error("Error enviando mensaje:", error)
  } finally {
    isLoading.value = false
  }
}

// Inicializar al montar el componente
onMounted(async () => {
  await loadHistory()
})
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
</style>
