<script setup>
import { computed } from 'vue'
import { Check, CheckCheck, Clock, AlertCircle, FileText } from 'lucide-vue-next'

const props = defineProps({
  message: {
    type: Object,
    required: true
  },
  isSent: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['file-click'])

// 格式化时间
const formattedTime = computed(() => {
  const date = new Date(props.message.timestamp * 1000)
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
})

// 状态图标
const statusIcon = computed(() => {
  switch (props.message.status) {
    case 'pending': return Clock
    case 'sent': return Check
    case 'delivered': return CheckCheck
    case 'read': return CheckCheck
    case 'failed': return AlertCircle
    default: return null
  }
})

const statusColor = computed(() => {
  switch (props.message.status) {
    case 'read': return 'text-primary-500'
    case 'failed': return 'text-red-500'
    default: return 'text-white/70'
  }
})

// 是否是图片消息
const isImage = computed(() => props.message.type === 'image')

// 是否是文件消息
const isFile = computed(() => props.message.type === 'file')

// 从文件消息中提取文件名（去掉 📎 前缀）
const fileName = computed(() => {
  if (isFile.value) {
    return props.message.content.replace(/^📎\s*/, '')
  }
  return ''
})

// 处理文件点击
function handleFileClick() {
  if (isFile.value && fileName.value) {
    emit('file-click', fileName.value)
  }
}
</script>

<template>
  <div 
    class="flex mb-4 animate-fade-in"
    :class="isSent ? 'justify-end' : 'justify-start'"
  >
    <div 
      class="message-bubble group"
      :class="isSent ? 'sent' : 'received'"
    >
      <!-- 图片消息 -->
      <template v-if="isImage">
        <div class="relative overflow-hidden rounded-lg cursor-pointer transition-transform hover:scale-[1.02]">
          <img 
            :src="message.content" 
            alt="图片"
            class="max-w-xs block"
            loading="lazy"
          />
          <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
        </div>
      </template>
      
      <!-- 文件消息 -->
      <template v-else-if="isFile">
        <div 
          class="flex items-center gap-3 p-1 cursor-pointer hover:opacity-90 transition-opacity"
          @click="handleFileClick"
          title="点击打开文件位置"
        >
          <div class="w-10 h-10 rounded-lg flex items-center justify-center" :class="isSent ? 'bg-white/20' : 'bg-primary-50 dark:bg-primary-900/20 text-primary-500'">
            <FileText :size="24" />
          </div>
          <div class="flex-1 min-w-0">
            <p class="font-medium text-sm truncate max-w-[200px]">{{ fileName }}</p>
            <p class="text-xs opacity-80">点击查看文件</p>
          </div>
        </div>
      </template>
      
      <!-- 文本消息 -->
      <template v-else>
        <p class="whitespace-pre-wrap">{{ message.content }}</p>
      </template>

      <!-- 时间和状态 -->
      <div 
        class="flex items-center gap-1 mt-1.5 text-[10px] select-none"
        :class="[
          isSent ? 'justify-end text-white/70' : 'text-surface-400 dark:text-surface-500',
          !isSent ? 'justify-end' : '' 
        ]"
      >
        <span>{{ formattedTime }}</span>
        <component 
          v-if="isSent && statusIcon" 
          :is="statusIcon" 
          :size="12"
          :class="statusColor"
        />
      </div>
    </div>
  </div>
</template>
