<template>
  <v-container>
    <v-btn to="agentlist" color="primary" class="mb-4">
      Voltar para a Lista
    </v-btn>

    <v-card v-if="agent">
      <v-toolbar color="primary">
        <v-toolbar-title>Conversando com {{ agent.name }}</v-toolbar-title>
        <v-toolbar-subtitle>{{ agent.service }}</v-toolbar-subtitle>
      </v-toolbar>

      <v-card-text>
        <div class="chat-container">
          <v-list class="chat-messages">
            <v-list-item
              v-for="(message, index) in agent.chatHistory"
              :key="index"
            >
              <v-list-item-title
                :class="{
                  'user-message': message.sender === 'user',
                  'agent-message': message.sender === 'agent',
                }"
              >
                <strong>{{ message.sender }}:</strong>
                <span v-html="formatMessageText(message.text)"></span>
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </div>

        <v-text-field
          v-model="userMessage"
          label="Digite sua mensagem"
          placeholder="Pergunte algo ao agente"
          variant="outlined"
          density="compact"
          @keyup.enter="sendMessage"
        ></v-text-field>

        <v-btn
          color="primary"
          block
          @click="sendMessage"
          :disabled="!userMessage.trim()"
        >
          Enviar
        </v-btn>
      </v-card-text>
    </v-card>

    <v-alert v-else type="error" color="error">
      Agente não encontrado. Verifique o ID fornecido.
    </v-alert>
  </v-container>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useAgentStore } from '../stores/agentStore';

const route = useRoute();
const agentStore = useAgentStore();
const userMessage = ref('');

// Busca o agente pelo ID da rota
const agent = computed(() => {
  return agentStore.getAgentById(route.params.id);
});

// Formata o texto das mensagens
const formatMessageText = (text) => {
  return text.replace(/\n/g, '<br>');
};

// Envia uma mensagem para o agente
const sendMessage = () => {
  if (userMessage.value.trim()) {
    const message = {
      sender: 'user',
      text: userMessage.value.trim(),
      timestamp: new Date().toISOString(),
    };
    agent.value.chatHistory.push(message);

    // Simula uma resposta do agente
    setTimeout(() => {
      const response = {
        sender: 'agent',
        text: `Você disse: "${message.text}". Esta é uma resposta simulada.`,
        timestamp: new Date().toISOString(),
      };
      agent.value.chatHistory.push(response);
    }, 1000);

    userMessage.value = '';
  }
};

// Rolagem automática para a última mensagem
watch(
  () => agent.value.chatHistory.length,
  () => {
    setTimeout(() => {
      const container = document.querySelector('.chat-container');
      if (container) {
        container.scrollTop = container.scrollHeight;
      }
    }, 50);
  },
  { deep: true }
);
</script>

<style scoped>
.chat-container {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f5f5f5;
}

.user-message {
  text-align: right;
  background-color: #e3f2fd;
  border-radius: 8px;
  padding: 8px;
  margin: 4px 0;
}

.agent-message {
  text-align: left;
  background-color: #f3e5f5;
  border-radius: 8px;
  padding: 8px;
  margin: 4px 0;
}
</style>