<script setup lang="ts">
import { renderMarkdown, type ChatMessage, type Agent } from '@/composables/useChat'

defineProps<{
  message: ChatMessage
  selectedAgent: Agent | null
}>()

// 创建消息内容的函数
const getMessageContent = (content: string, isUser: boolean) => {
  if (isUser) return content
  return renderMarkdown(content)
}
</script>

<template>
  <div
    class="flex items-end gap-2 mb-4"
    :class="message.role === 'user' ? 'flex-row-reverse' : ''"
  >
    <!-- 头像 -->
    <div
      class="w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center"
      :class="message.role === 'user' ? 'bg-gradient-to-br from-orange-500 to-amber-600' : ''"
      :style="message.role === 'assistant' && selectedAgent ? {
        backgroundColor: selectedAgent.accentColor + '20',
        color: selectedAgent.accentColor
      } : {}"
    >
      <span v-if="message.role === 'user'" class="text-white text-sm">👤</span>
      <span v-else class="text-base">{{ selectedAgent?.avatar || '🧠' }}</span>
    </div>

    <!-- 消息容器 -->
    <div class="flex flex-col max-w-[70%]" :class="message.role === 'user' ? 'items-end' : 'items-start'">
      <!-- 消息气泡 -->
      <div
        class="px-4 py-3 rounded-2xl text-[14px] leading-relaxed markdown-body"
        :class="message.role === 'user'
          ? 'bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-br-sm'
          : 'bg-[#1e1e28] text-gray-100 rounded-bl-sm'"
      >
        <span v-html="getMessageContent(message.content, message.role === 'user')"></span>
        <span v-if="message.isStreaming" class="inline-block w-0.5 h-4 ml-0.5 bg-orange-300 cursor-blink align-middle"></span>
      </div>
      <!-- 时间戳 -->
      <span class="text-[11px] text-gray-500 mt-1 px-1">
        {{ message.timestamp.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) }}
      </span>
    </div>
  </div>
</template>

<style scoped>
.markdown-body {
  word-wrap: break-word;
  text-wrap: balance;
}

.markdown-body :deep(p) {
  margin: 0 0 6px 0;
}

.markdown-body :deep(p:last-child) {
  margin-bottom: 0;
}

.markdown-body :deep(code) {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
}

.markdown-body :deep(pre) {
  background: rgba(0, 0, 0, 0.4);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
}

.markdown-body :deep(pre code) {
  background: transparent;
  padding: 0;
}

.markdown-body :deep(ul), .markdown-body :deep(ol) {
  margin: 6px 0;
  padding-left: 18px;
}

.markdown-body :deep(li) {
  margin: 3px 0;
}

.markdown-body :deep(blockquote) {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  margin: 6px 0;
  padding-left: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.markdown-body :deep(a) {
  color: #60a5fa;
  text-decoration: underline;
}

.markdown-body :deep(h1), .markdown-body :deep(h2), .markdown-body :deep(h3) {
  margin: 10px 0 6px 0;
  font-weight: 600;
  color: #fff;
}

.markdown-body :deep(h1) { font-size: 1.2em; }
.markdown-body :deep(h2) { font-size: 1.1em; }
.markdown-body :deep(h3) { font-size: 1em; }

.markdown-body :deep(table) {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}

.markdown-body :deep(th), .markdown-body :deep(td) {
  border: 1px solid rgba(255, 255, .2255, 0);
  padding: 6px 10px;
  text-align: left;
}

.markdown-body :deep(th) {
  background: rgba(0, 0, 0, 0.2);
}
</style>
