<template>
  <div class="chat-message" :class="[`chat-message--${message.role}`]">
    <div class="chat-message__avatar">
      <a-avatar
        v-if="message.role === 'assistant'"
        :size="36"
        style="background-color: #1677ff"
      >
        <template #icon><RobotOutlined /></template>
      </a-avatar>
      <a-avatar
        v-else
        :size="36"
        style="background-color: #52c41a"
      >
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </div>
    <div class="chat-message__body">
      <div class="chat-message__content" :class="[`chat-message__content--${message.role}`]">
        <span v-html="renderedContent"></span>
        <a-spin v-if="isLoading" size="small" class="chat-message__loading" />
      </div>
      <div v-if="showRouting" class="chat-message__routing">
        <a-tag color="blue">
          <ThunderboltOutlined /> {{ message.matched_skill }}
        </a-tag>
        <a-tag v-if="message.confidence !== undefined" color="green">
          置信度: {{ (message.confidence * 100).toFixed(1) }}%
        </a-tag>
        <a-tag v-if="message.routing_method" color="default">
          {{ message.routing_method }}
        </a-tag>
      </div>
      <div class="chat-message__time">
        {{ formattedTime }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Avatar as AAvatar, Tag as ATag, Spin as ASpin } from 'ant-design-vue'
import { RobotOutlined, UserOutlined, ThunderboltOutlined } from '@ant-design/icons-vue'
import type { IChatMessage } from '@/api/types'

interface IProps {
  message: IChatMessage
}

const props = defineProps<IProps>()

const isLoading = computed(() => {
  return props.message.role === 'assistant' && props.message.status === 'pending' && !props.message.content
})

const showRouting = computed(() => {
  return props.message.role === 'assistant' && props.message.matched_skill
})

const formattedTime = computed(() => {
  const date = new Date(props.message.timestamp)
  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
})

const renderedContent = computed(() => {
  // Simple rendering: escape HTML and convert newlines
  const escaped = props.message.content
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
  return escaped.replace(/\n/g, '<br/>')
})
</script>

<style scoped>
.chat-message {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.chat-message--user {
  flex-direction: row-reverse;
}

.chat-message__avatar {
  flex-shrink: 0;
}

.chat-message__body {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-message--user .chat-message__body {
  align-items: flex-end;
}

.chat-message__content {
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.6;
  font-size: 14px;
  word-break: break-word;
}

.chat-message__content--user {
  background: #1677ff;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.chat-message__content--assistant {
  background: #ffffff;
  color: #333333;
  border: 1px solid #f0f0f0;
  border-bottom-left-radius: 4px;
}

.chat-message__loading {
  margin-left: 8px;
}

.chat-message__routing {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.chat-message__time {
  font-size: 12px;
  color: #999999;
}
</style>
