<template>
  <!-- 消息显示区域 - 优化的卡片设计 -->
  <div class="w-full h-full flex flex-col">
    <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl flex flex-col border border-gray-100 h-full">
      <!-- 消息头部 -->
      <div class="p-4 border-b border-gray-100 bg-gray-50/80 backdrop-blur-sm">
        <h2 class="font-semibold text-lg flex items-center">
          <i class="fa-solid fa-comments text-primary mr-2"></i>
          <span>消息记录</span>
          <span class="ml-2 text-xs text-gray-500 px-2 py-0.5 rounded-full bg-gray-200">
            {{ messages.length }}
          </span>
        </h2>
      </div>
      
      <!-- 消息列表区域 - 增强的滚动体验 -->
      <div ref="messageContainer" class="flex-grow h-full p-4 min-h-0 overflow-y-auto">
        <!-- 自定义滚动条 -->
        <div class="scrollbar-thin scrollbar-thumb-primary/30 scrollbar-track-gray-100">
          <!-- 消息列表 -->
          <div class="space-y-1">
            <div 
              v-for="message in messages" 
              :key="message.id" 
              class="flex items-start animate-fadeIn"
              :class="{ 'justify-end': message.sender === 'me', 'delay-300': message.isSystem }"
            >
              <!-- 系统消息 -->
              <template v-if="message.isSystem">
                <div class="w-full flex justify-start my-4">
                  <div class="bg-primary/5 px-4 py-2 rounded-full inline-flex items-center max-w-md border border-primary/10 transition-all duration-300 hover:bg-primary/10">
                    <i class="fa-solid fa-info-circle text-primary mr-2"></i>
                    <span class="text-sm text-gray-600">{{ message.content }}</span>
                  </div>
                </div>
              </template>
              
              <!-- 普通消息 -->
              <template v-else>
                <!-- 对方头像 -->
                <template v-if="message.sender !== 'me'">
                  <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3 flex-shrink-0 border border-gray-200 shadow-sm transition-all duration-300 hover:bg-gray-200">
                    <i class="fa-solid fa-user text-primary"></i>
                  </div>
                </template>
                
                <!-- 消息气泡 -->
                <div class="flex flex-col" :class="{ 'items-end': message.sender === 'me' }">
                  <div class="flex items-center space-x-2 mb-1">
                    <span class="text-xs font-medium text-gray-500">{{ message.sender === 'me' ? '我' : message.sender }}</span>
                    <span class="text-xs text-gray-400">{{ message.time }}</span>
                  </div>
                  <div 
                    :class="message.sender === 'me' ? 'bg-[#165DFF] text-white shadow-lg shadow-[#165DFF]/20 !important' : 'bg-gray-100 shadow-sm border border-gray-200'" 
                    class="px-4 py-3 rounded-2xl max-w-md word-wrap break-word transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl"
                    style="background-color: #165DFF !important; color: white !important;"
                  >
                    {{ message.content }}
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';

// Props
const props = defineProps({
  messages: {
    type: Array,
    required: true
  }
});

// Refs
const messageContainer = ref(null);

// 监听消息变化，自动滚动到底部
watch(() => props.messages, () => {
  nextTick(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
    }
  });
}, { deep: true });
</script>