<template>
  <!-- ================================================================== -->
  <!-- 会话审计页面 — 历史会话查看与筛选                                    -->
  <!-- ================================================================== -->
  <div class="session-audit">
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-input
        v-model="filters.keyword"
        placeholder="搜索员工姓名/消息摘要"
        :prefix-icon="Search"
        clearable
        style="width: 240px"
        @keyup.enter="handleSearch"
      />
      <el-select v-model="filters.status" placeholder="会话状态" clearable style="width: 140px">
        <el-option label="全部" value="" />
        <el-option label="AI处理中" value="ai_handling" />
        <el-option label="排队中" value="queued" />
        <el-option label="服务中" value="serving" />
        <el-option label="已结单" value="resolved" />
      </el-select>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        style="width: 280px"
        @change="handleSearch"
      />
      <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
      <el-button :icon="Refresh" @click="handleReset">重置</el-button>
    </div>

    <!-- 会话列表 -->
    <el-table
      :data="conversations"
      v-loading="loading"
      stripe
      style="width: 100%"
      @row-click="handleRowClick"
      row-class-name="clickable-row"
    >
      <el-table-column prop="employee_name" label="员工姓名" width="120" />
      <el-table-column prop="department" label="部门" width="150" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)" size="small">
            {{ statusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="assigned_agent_name" label="负责坐席" width="100">
        <template #default="{ row }">
          {{ row.assigned_agent_name || '—' }}
        </template>
      </el-table-column>
      <el-table-column prop="urgency_score" label="紧急度" width="80" align="center">
        <template #default="{ row }">
          <span :style="{ color: urgencyColor(row.urgency_score) }">
            {{ row.urgency_score }}/5
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="last_message_summary" label="最近消息" min-width="200" show-overflow-tooltip />
      <el-table-column prop="created_at" label="创建时间" width="170">
        <template #default="{ row }">
          {{ formatTime(row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click.stop="showDetail(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-bar">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="loadConversations"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 详情抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      :title="`会话详情 — ${selectedConversation?.employee_name || ''}`"
      size="500px"
      direction="rtl"
    >
      <div v-if="detailLoading" v-loading="true" style="height: 200px" />
      <div v-else-if="conversationDetail" class="detail-content">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h4>基本信息</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="员工姓名">{{ conversationDetail.employee_name }}</el-descriptions-item>
            <el-descriptions-item label="员工ID">{{ conversationDetail.employee_id }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ conversationDetail.department || '—' }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ conversationDetail.position || '—' }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="statusTagType(conversationDetail.status)" size="small">
                {{ statusLabel(conversationDetail.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="负责坐席">{{ conversationDetail.assigned_agent_name || '—' }}</el-descriptions-item>
            <el-descriptions-item label="创建时间" :span="2">{{ formatTime(conversationDetail.created_at) }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 消息列表 -->
        <div class="detail-section">
          <h4>消息记录 ({{ conversationDetail.messages?.length || 0 }})</h4>
          <div class="message-list">
            <div
              v-for="msg in conversationDetail.messages"
              :key="msg.id"
              class="message-item"
              :class="`sender-${msg.sender_type}`"
            >
              <div class="message-header">
                <el-tag :type="senderTagType(msg.sender_type)" size="small">
                  {{ senderLabel(msg.sender_type) }}
                </el-tag>
                <span class="sender-name">{{ msg.sender_name }}</span>
                <span class="message-time">{{ formatTime(msg.created_at) }}</span>
              </div>
              <div class="message-content">{{ msg.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
// =============================================================================
// 会话审计页面逻辑
// =============================================================================
import { ref, reactive, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getAuditConversations, getAuditConversationDetail } from '@/api/admin'
import { ElMessage } from 'element-plus'

// ---------- 状态 ----------
const loading = ref(false)
const detailLoading = ref(false)
const drawerVisible = ref(false)
const conversations = ref<any[]>([])
const selectedConversation = ref<any>(null)
const conversationDetail = ref<any>(null)
const dateRange = ref<[string, string] | null>(null)

const filters = reactive({
  keyword: '',
  status: '',
})

const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0,
})

// ---------- 数据加载 ----------
async function loadConversations() {
  loading.value = true
  try {
    const params: any = {
      page: pagination.page,
      page_size: pagination.pageSize,
    }
    if (filters.keyword) params.keyword = filters.keyword
    if (filters.status) params.status = filters.status
    if (dateRange.value) {
      params.date_from = dateRange.value[0]
      params.date_to = dateRange.value[1]
    }

    const { data } = await getAuditConversations(params)
    if (data.code === 0) {
      conversations.value = data.data.items || []
      pagination.total = data.data.total || 0
    }
  } catch (err: any) {
    ElMessage.error('加载会话列表失败')
  } finally {
    loading.value = false
  }
}

async function showDetail(row: any) {
  selectedConversation.value = row
  drawerVisible.value = true
  detailLoading.value = true
  try {
    const { data } = await getAuditConversationDetail(row.id)
    if (data.code === 0) {
      conversationDetail.value = data.data
    }
  } catch (err: any) {
    ElMessage.error('加载会话详情失败')
  } finally {
    detailLoading.value = false
  }
}

// ---------- 事件处理 ----------
function handleSearch() {
  pagination.page = 1
  loadConversations()
}

function handleReset() {
  filters.keyword = ''
  filters.status = ''
  dateRange.value = null
  pagination.page = 1
  loadConversations()
}

function handleSizeChange() {
  pagination.page = 1
  loadConversations()
}

function handleRowClick(row: any) {
  showDetail(row)
}

// ---------- 工具函数 ----------
function statusTagType(status: string): '' | 'success' | 'warning' | 'info' | 'danger' {
  const map: Record<string, '' | 'success' | 'warning' | 'info' | 'danger'> = {
    ai_handling: 'info',
    queued: 'warning',
    serving: '',
    resolved: 'success',
  }
  return map[status] || 'info'
}

function statusLabel(status: string): string {
  const map: Record<string, string> = {
    ai_handling: 'AI处理中',
    queued: '排队中',
    serving: '服务中',
    resolved: '已结单',
  }
  return map[status] || status
}

function urgencyColor(score: number): string {
  if (score >= 4) return '#f56c6c'
  if (score >= 3) return '#e6a23c'
  return '#67c23a'
}

function senderTagType(type: string): '' | 'success' | 'warning' | 'info' | 'danger' {
  const map: Record<string, '' | 'success' | 'warning' | 'info' | 'danger'> = {
    employee: 'info',
    agent: 'success',
    ai: 'warning',
    system: 'danger',
  }
  return map[type] || 'info'
}

function senderLabel(type: string): string {
  const map: Record<string, string> = {
    employee: '员工',
    agent: '坐席',
    ai: 'AI',
    system: '系统',
  }
  return map[type] || type
}

function formatTime(iso: string): string {
  if (!iso) return '—'
  const d = new Date(iso)
  return d.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// ---------- 生命周期 ----------
onMounted(() => loadConversations())
</script>

<style scoped>
.session-audit {
  padding: 0;
}

.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.clickable-row {
  cursor: pointer;
}

.detail-content {
  padding: 0 4px;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.message-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5f7fa;
}

.message-item.sender-employee {
  background: #ecf5ff;
  border-left: 3px solid #409eff;
}

.message-item.sender-agent {
  background: #f0f9eb;
  border-left: 3px solid #67c23a;
}

.message-item.sender-ai {
  background: #fdf6ec;
  border-left: 3px solid #e6a23c;
}

.message-item.sender-system {
  background: #f4f4f5;
  border-left: 3px solid #909399;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.sender-name {
  color: #606266;
  font-weight: 500;
}

.message-time {
  color: #909399;
  margin-left: auto;
}

.message-content {
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
