<template>
  <div class="conversation-detail">
    <!-- 对话信息 -->
    <div class="conversation-info">
      <div class="info-row">
        <span class="info-label">创建时间:</span>
        <span class="info-value">{{ formatTime(conversation.createTime) }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">最后更新:</span>
        <span class="info-value">{{ formatTime(conversation.updateTime) }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">消息数量:</span>
        <span class="info-value">{{ conversation.messageCount || 0 }} 条</span>
      </div>
      <div class="info-row">
        <span class="info-label">对话状态:</span>
        <a-tag :color="getStatusColor(conversation.status)">
          {{ getStatusText(conversation.status) }}
        </a-tag>
      </div>
    </div>

    <!-- 消息列表 -->
    <div class="messages-section">
      <div class="section-title">
        <MessageOutlined />
        对话内容
      </div>
      
      <a-spin :spinning="loading">
        <div class="messages-list" v-if="messages.length > 0">
          <div 
            class="message-item"
            :class="message.sender"
            v-for="message in messages"
            :key="message.id"
          >
            <div class="message-header">
              <div class="message-sender">
                <UserOutlined v-if="message.sender === 'user'" />
                <RobotOutlined v-else />
                <span>{{ message.sender === 'user' ? '用户' : 'AI助手' }}</span>
              </div>
              <div class="message-time">{{ formatTime(message.timestamp) }}</div>
            </div>
            
            <div class="message-content">
              <div class="message-text" v-html="formatMessage(message.content)"></div>
              
              <!-- 情绪分析 -->
              <div class="emotion-section" v-if="message.emotionAnalysis">
                <EmotionAnalysis :analysis="message.emotionAnalysis" />
              </div>
            </div>
          </div>
        </div>
        
        <div class="empty-messages" v-else>
          <CommentOutlined class="empty-icon" />
          <p>暂无消息记录</p>
        </div>
      </a-spin>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <a-button 
        type="primary"
        class="gradient-btn"
        @click="$emit('continue')"
        v-if="conversation.status === 'active'"
      >
        <PlayCircleOutlined />
        继续对话
      </a-button>
      
      <a-button @click="exportConversation">
        <DownloadOutlined />
        导出对话
      </a-button>
      
      <a-button @click="shareConversation">
        <ShareAltOutlined />
        分享对话
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  MessageOutlined,
  UserOutlined,
  RobotOutlined,
  PlayCircleOutlined,
  DownloadOutlined,
  ShareAltOutlined,
  CommentOutlined
} from '@ant-design/icons-vue'
import { chatApi } from '@/api/chat'
import { formatTime, formatMessage } from '@/utils/format'
import EmotionAnalysis from './EmotionAnalysis.vue'

const props = defineProps({
  conversation: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['continue'])

// 响应式数据
const loading = ref(false)
const messages = ref([])

// 方法
const getStatusColor = (status) => {
  const colorMap = {
    active: 'success',
    ended: 'default',
    archived: 'warning'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status) => {
  const textMap = {
    active: '进行中',
    ended: '已结束',
    archived: '已归档'
  }
  return textMap[status] || status
}

const fetchMessages = async () => {
  try {
    loading.value = true
    const response = await chatApi.getMessages(props.conversation.conversationId)
    if (response.success) {
      messages.value = response.data || []
    }
  } catch (error) {
    console.error('获取消息失败:', error)
    message.error('获取消息失败')
  } finally {
    loading.value = false
  }
}

const exportConversation = () => {
  try {
    // 生成导出内容
    const exportContent = generateExportContent()
    
    // 创建下载链接
    const blob = new Blob([exportContent], { type: 'text/plain;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${props.conversation.title}_${formatTime(props.conversation.createTime, 'YYYY-MM-DD')}.txt`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    
    message.success('对话已导出')
  } catch (error) {
    console.error('导出对话失败:', error)
    message.error('导出失败')
  }
}

const generateExportContent = () => {
  let content = `对话标题: ${props.conversation.title}\n`
  content += `创建时间: ${formatTime(props.conversation.createTime)}\n`
  content += `更新时间: ${formatTime(props.conversation.updateTime)}\n`
  content += `消息数量: ${props.conversation.messageCount || 0}\n`
  content += `对话状态: ${getStatusText(props.conversation.status)}\n`
  content += '\n' + '='.repeat(50) + '\n\n'
  
  messages.value.forEach(msg => {
    const sender = msg.sender === 'user' ? '用户' : 'AI助手'
    content += `[${formatTime(msg.timestamp)}] ${sender}:\n`
    content += `${msg.content}\n\n`
    
    if (msg.emotionAnalysis) {
      content += `情绪分析: ${msg.emotionAnalysis.primaryEmotion || '未知'}\n\n`
    }
  })
  
  return content
}

const shareConversation = async () => {
  try {
    // 生成分享链接或内容
    const shareText = `我在情绪博物馆进行了一次有意义的AI对话：${props.conversation.title}`
    
    if (navigator.share) {
      await navigator.share({
        title: '情绪博物馆 - AI对话分享',
        text: shareText,
        url: window.location.href
      })
    } else {
      // 复制到剪贴板
      await navigator.clipboard.writeText(shareText)
      message.success('分享内容已复制到剪贴板')
    }
  } catch (error) {
    console.error('分享失败:', error)
    message.error('分享失败')
  }
}

// 组件挂载
onMounted(() => {
  fetchMessages()
})
</script>

<style lang="scss" scoped>
.conversation-detail {
  .conversation-info {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    
    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: var(--spacing-sm);
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-label {
        font-weight: 500;
        color: var(--text-secondary);
        min-width: 80px;
      }
      
      .info-value {
        color: var(--text-primary);
      }
    }
  }
  
  .messages-section {
    margin-bottom: var(--spacing-lg);
    
    .section-title {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-sm);
      border-bottom: 1px solid var(--border-color);
    }
    
    .messages-list {
      max-height: 400px;
      overflow-y: auto;
      
      .message-item {
        margin-bottom: var(--spacing-lg);
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .message-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: var(--spacing-sm);
          
          .message-sender {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            font-weight: 500;
            color: var(--text-primary);
            
            .anticon {
              font-size: 16px;
            }
          }
          
          .message-time {
            font-size: 12px;
            color: var(--text-secondary);
          }
        }
        
        .message-content {
          .message-text {
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            line-height: 1.6;
            word-wrap: break-word;
          }
          
          .emotion-section {
            margin-top: var(--spacing-sm);
          }
        }
        
        &.user {
          .message-text {
            background: var(--gradient-primary);
            color: white;
            margin-left: var(--spacing-xl);
          }
        }
        
        &.assistant {
          .message-text {
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            margin-right: var(--spacing-xl);
          }
        }
      }
    }
    
    .empty-messages {
      text-align: center;
      padding: var(--spacing-xxl);
      color: var(--text-secondary);
      
      .empty-icon {
        font-size: 48px;
        margin-bottom: var(--spacing-md);
        opacity: 0.5;
      }
    }
  }
  
  .action-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
  }
}
</style>
