<template>
  <!-- 反馈列表模态框 -->
  <a-modal v-model:open="modalVisible" title="用户反馈详情" width="1200px" :footer="null">
    <a-space style="margin-bottom: 16px">
      <a-segmented
        v-model:value="feedbackFilter"
        :options="feedbackOptions"
        @change="loadFeedbacks"
      />
    </a-space>

    <!-- 卡片列表 -->
    <div v-if="loadingFeedbacks" class="loading-container">
      <a-spin size="large" />
    </div>

    <div v-else class="feedback-cards-container">
      <div v-for="feedback in feedbacks" :key="feedback.id" class="feedback-card">
        <!-- 卡片头部：用户信息和反馈类型 -->
        <div class="card-header">
          <div class="user-info">
            <a-avatar :src="feedback.avatar" :size="32" class="user-avatar">
              {{ feedback.username ? feedback.username.charAt(0).toUpperCase() : 'U' }}
            </a-avatar>
            <div class="user-details">
              <div class="username">{{ feedback.username || '未知用户' }}</div>
            </div>
          </div>
          <a-tag
            :color="feedback.rating === 'like' ? 'green' : 'red'"
            class="rating-tag"
            size="small"
          >
            <template #icon>
              <LikeOutlined v-if="feedback.rating === 'like'" />
              <DislikeOutlined v-else />
            </template>
            {{ feedback.rating === 'like' ? '点赞' : '点踩' }}
          </a-tag>
        </div>

        <!-- 卡片内容：对话信息、消息内容和反馈原因 -->
        <div class="card-content">
          <!-- 对话标题 -->
          <div class="conversation-section" v-if="feedback.conversation_title">
            <div class="conversation-info">
              <div class="info-item">
                <span
                  class="conversation-title"
                  :class="{ collapsed: !expandedStates.get(`${feedback.id}-conversation`) }"
                >
                  标题：{{ feedback.conversation_title }}
                </span>
                <a-button
                  v-if="shouldShowConversationExpandButton(feedback.conversation_title)"
                  type="link"
                  size="small"
                  @click="toggleConversationExpand(feedback.id)"
                  class="expand-button-inline"
                >
                  {{ expandedStates.get(`${feedback.id}-conversation`) ? '收起' : '展开' }}
                </a-button>
              </div>
              <div class="info-item" v-if="!props.agentId">
                <span class="label">智能体:</span>
                <span class="value">{{ feedback.agent_id }}</span>
              </div>
            </div>
          </div>

          <!-- 消息内容 -->
          <div class="message-section">
            <div
              class="message-content"
              :class="{ collapsed: !expandedStates.get(`${feedback.id}-message`) }"
            >
              {{ feedback.message_content }}
            </div>
            <a-button
              v-if="shouldShowExpandButton(feedback.message_content)"
              type="link"
              size="small"
              @click="toggleExpand(feedback.id)"
              class="expand-button"
            >
              {{ expandedStates.get(`${feedback.id}-message`) ? '收起' : '展开全部' }}
            </a-button>
          </div>

          <!-- 反馈原因 -->
          <div v-if="feedback.reason" class="reason-section">
            <div class="reason-content">{{ feedback.reason }}</div>
          </div>
        </div>

        <!-- 卡片底部：时间信息 -->
        <div class="card-footer">
          <div class="time-info">
            <ClockCircleOutlined />
            <span>{{ formatFullDate(feedback.created_at) }}</span>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="feedbacks.length === 0" class="empty-state">
        <a-empty description="暂无反馈数据" />
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { LikeOutlined, DislikeOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
import { dashboardApi } from '@/apis/dashboard_api'
import { formatFullDateTime } from '@/utils/time'

// 常量配置
const CONFIG = {
  MESSAGE_MAX_LINES: 8, // 消息最大显示行数
  CONVERSATION_MAX_LINES: 2, // 对话标题最大显示行数
  CONVERSATION_MAX_CHARS: 60, // 对话标题字符数阈值
  AVG_CHARS_PER_LINE: 30 // 每行平均字符数（中英文混合）
}

// Props
const props = defineProps({
  agentId: {
    type: String,
    default: null
  }
})

// 模态框状态
const modalVisible = ref(false)

// 反馈相关数据
const feedbacks = ref([])
const loadingFeedbacks = ref(false)
const feedbackFilter = ref('all')
const feedbackOptions = [
  { label: '全部', value: 'all' },
  { label: '点赞', value: 'like' },
  { label: '点踩', value: 'dislike' }
]

// 展开状态映射（使用 Map 避免直接修改对象）
const expandedStates = ref(new Map())

// 显示模态框
const show = () => {
  modalVisible.value = true
  loadFeedbacks()
}

// 暴露方法给父组件
defineExpose({ show })

// 计算文本行数的辅助函数（估算）
const estimateLines = (text) => {
  if (!text) return 0
  return Math.ceil(text.length / CONFIG.AVG_CHARS_PER_LINE)
}

// 判断是否显示展开按钮
const shouldShowExpandButton = (content) => {
  return estimateLines(content) > CONFIG.MESSAGE_MAX_LINES
}

// 判断对话标题是否需要展开按钮
const shouldShowConversationExpandButton = (title) => {
  if (!title) return false
  return title.length > CONFIG.CONVERSATION_MAX_CHARS
}

// 切换展开/收起状态
const toggleExpand = (feedbackId) => {
  const key = `${feedbackId}-message`
  const currentState = expandedStates.value.get(key) ?? false
  expandedStates.value.set(key, !currentState)
}

// 切换对话标题展开/收起状态
const toggleConversationExpand = (feedbackId) => {
  const key = `${feedbackId}-conversation`
  const currentState = expandedStates.value.get(key) ?? false
  expandedStates.value.set(key, !currentState)
}

// 加载反馈列表
const loadFeedbacks = async () => {
  loadingFeedbacks.value = true
  try {
    const params = {
      rating: feedbackFilter.value === 'all' ? undefined : feedbackFilter.value,
      agent_id: props.agentId || undefined
    }

    const response = await dashboardApi.getFeedbacks(params)
    feedbacks.value = response
    // 重置展开状态
    expandedStates.value.clear()
  } catch (error) {
    console.error('加载反馈列表失败:', error)
    message.error('加载反馈列表失败，请稍后重试')
    feedbacks.value = []
  } finally {
    loadingFeedbacks.value = false
  }
}

// 格式化完整日期
const formatFullDate = (dateString) => formatFullDateTime(dateString)

// 监听 agentId 变化，重新加载数据
watch(
  () => props.agentId,
  () => {
    if (modalVisible.value) {
      loadFeedbacks()
    }
  }
)
</script>

<style scoped lang="less">
// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

// 卡片容器 - 自适应多列布局
.feedback-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 8px;

  // 滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;

    &:hover {
      background: var(--gray-400);
    }
  }
}

// 反馈卡片 - 紧凑设计
.feedback-card {
  background: var(--gray-0);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;

  &:hover {
    border-color: var(--main-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

// 卡片头部 - 紧凑
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-25);
  border-radius: 8px 8px 0 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  flex-shrink: 0;
}

.user-details {
  .username {
    font-weight: 500;
    color: var(--gray-900);
    font-size: 13px;
    line-height: 1.2;
  }
}

.rating-tag {
  font-weight: 500;
  font-size: 11px;
}

// 卡片内容 - 紧凑
.card-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-section {
  flex: 1;
}

.message-content {
  background: var(--gray-50);
  padding: 10px;
  border-radius: 6px;
  // border-left: 3px solid var(--main-color);
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray-800);
  word-break: break-word;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.message-content.collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expand-button {
  padding: 0;
  height: auto;
  font-size: 12px;
  margin-top: 8px;
  color: var(--main-color);
}

.conversation-section {
  margin: 0;
}

.conversation-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 12px;

  .label {
    color: var(--gray-600);
    margin-right: 6px;
    min-width: 50px;
    font-weight: 500;
  }

  .value {
    color: var(--gray-800);
    font-weight: 400;
    word-break: break-all;
  }

  // 对话标题样式（独立显示）
  .conversation-title {
    display: block;
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    transition: all 0.3s ease;

    &.collapsed {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // 包含对话标题的 info-item 改为垂直布局
  &:has(.conversation-title) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.expand-button-inline {
  padding: 0;
  height: auto;
  font-size: 11px;
  color: var(--main-color);
  align-self: flex-start;
}

.reason-section {
  margin: 0;
}

.reason-content {
  background: var(--color-warning-50);
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid var(--color-warning-500);
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray-800);
  word-break: break-word;
}

// 卡片底部 - 紧凑
.card-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-25);
  border-radius: 0 0 8px 8px;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-500);
}

// 空状态
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

// 响应式设计
@media (max-width: 768px) {
  .feedback-cards-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .card-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .card-content {
    padding: 12px;
    gap: 10px;
  }

  .card-footer {
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .feedback-cards-container {
    gap: 8px;
  }

  .card-header {
    padding: 8px 10px;
  }

  .card-content {
    padding: 10px;
    gap: 8px;
  }

  .message-content,
  .reason-content {
    padding: 8px;
    font-size: 12px;
  }

  .info-item {
    font-size: 11px;
  }
}
</style>
