<script lang="ts" setup>
import {computed, nextTick, onMounted, ref} from 'vue'
import {Send, X} from 'lucide-vue-next'
import {useChatService} from '@/services/ChatService.ts'
import avatarUser from '@/assets/avatar-user.jpg'
import avatarBot from '@/assets/avatar-bot.png'

const props = defineProps({
  chatConfig: Object
})

defineEmits(['close'])

const {messages, input, isLoading, sendMessage: sendChatMessage} = useChatService(props.chatConfig)
const messagesContainer = ref(null)

const showQuickActions = computed(() => {
  return messages.value.length <= 1 && props.chatConfig?.welcome?.quickActions
})

function sendMessage(text) {
  sendChatMessage(text)
  nextTick(() => scrollToBottom())
}

function handleSubmit() {
  if (input.value.trim()) {
    sendMessage(input.value)
  }
}

function scrollToBottom() {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

onMounted(() => {
  // Send welcome message
  if (props.chatConfig?.welcome?.message) {
    setTimeout(() => {
      messages.value.push({
        id: Date.now(),
        role: 'assistant',
        content: props.chatConfig.welcome.message
      })
      nextTick(() => scrollToBottom())
    }, 500)
  }
})
</script>

<template>
  <div class="fixed inset-0 z-50 flex items-end justify-end p-4">
    <!-- Backdrop -->
    <div 
      class="absolute inset-0 bg-black/20 backdrop-blur-sm"
      @click="$emit('close')"
    ></div>
    
    <!-- Chat Window -->
    <div class="relative w-full max-w-md h-96 bg-white dark:bg-gray-800 rounded-xl shadow-2xl flex flex-col">
      <!-- Header -->
      <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center space-x-3">
          <img
            :src="avatarBot"
            alt="Assistant"
            class="w-8 h-8 rounded-full"
          />
          <div>
            <h3 class="font-semibold text-gray-900 dark:text-white">Asistente Virtual</h3>
            <p class="text-xs text-green-500">En línea</p>
          </div>
        </div>
        <button
          @click="$emit('close')"
          class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors"
        >
          <X class="w-5 h-5" />
        </button>
      </div>

      <!-- Messages -->
      <div class="flex-1 overflow-y-auto p-4 space-y-4" ref="messagesContainer">
        <div
          v-for="message in messages"
          :key="message.id"
          class="flex items-start space-x-2"
          :class="message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''"
        >
          <img
            :src="message.role === 'user' ? avatarUser : avatarBot"
            alt="avatar"
            class="w-6 h-6 rounded-full flex-shrink-0"
          />
          <div
            class="max-w-xs px-3 py-2 rounded-lg text-sm"
            :class="message.role === 'user' 
              ? 'bg-purple-600 text-white' 
              : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white'"
          >
            <div v-if="message.typing" class="flex space-x-1">
              <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
              <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
              <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
            </div>
            <div v-else v-html="message.content"></div>
          </div>
        </div>
      </div>

      <!-- Quick Actions -->
      <div v-if="showQuickActions" class="px-4 pb-2">
        <div class="flex flex-wrap gap-2">
          <button
            v-for="action in chatConfig.welcome.quickActions"
            :key="action.text"
            @click="sendMessage(action.text)"
            class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-xs hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors"
          >
            {{ action.text }}
          </button>
        </div>
      </div>

      <!-- Input -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <div class="flex space-x-2">
          <input
            v-model="input"
            @keydown.enter="handleSubmit"
            :disabled="isLoading"
            placeholder="Escribe tu pregunta..."
            class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm"
          />
          <button
            @click="handleSubmit"
            :disabled="isLoading || !input.trim()"
            class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white rounded-lg transition-colors"
          >
            <Send class="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>