<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { api } from "../services/api";
import type { AttentionItem } from "../types/api";
import AdminPagination from "./AdminPagination.vue";
import ChatDetailDrawer from "./ChatDetailDrawer.vue";

const loading = ref(false);
const records = ref<AttentionItem[]>([]);
const pager = reactive({ page: 1, pageSize: 20, total: 0 });
const chatDetailOpen = ref(false);
const sessionId = ref<number | null>(null);
onMounted(() => loadRecords());
async function loadRecords(page = 1, pageSize = pager.pageSize) {
  loading.value = true;
  try {
    const result = await api.attentionList({ page, pageSize });
    records.value = result.items;
    Object.assign(pager, {
      page: result.page,
      pageSize: result.pageSize,
      total: result.total,
    });
  } finally {
    loading.value = false;
  }
}
async function updateStatus(row: AttentionItem, status: string) {
  await api.updateAttention(row.id, status);
  ElMessage.success("人工关注状态已更新");
  await loadRecords(pager.page, pager.pageSize);
}
async function deleteRecord(row: AttentionItem) {
  try {
    await ElMessageBox.confirm(
      "确定删除这条人工关注记录吗？操作将写入审计日志。",
      "删除人工关注记录",
      {
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
        type: "warning",
      },
    );
  } catch {
    return;
  }
  await api.deleteAttention(row.id);
  ElMessage.success("人工关注记录已删除");
  await loadRecords(pager.page, pager.pageSize);
}
function openChat(id: number) {
  sessionId.value = id;
  chatDetailOpen.value = true;
}
function priorityLabel(priority: string) {
  return (
    { urgent: "紧急", important: "重要", normal: "普通" }[
      priority as "urgent" | "important" | "normal"
    ] || priority
  );
}
</script>

<template>
  <section v-loading="loading" class="feature-page">
    <div class="page-head">
      <h2>人工关注</h2>
      <p>处理安全风险、复杂卡住、知识缺失和用户主动求助记录。</p>
    </div>
    <el-table :data="records" stripe
      ><el-table-column label="优先级" width="100"
        ><template #default="{ row }"
          ><el-tag
            :type="
              row.priority === 'urgent'
                ? 'danger'
                : row.priority === 'important'
                  ? 'warning'
                  : 'info'
            "
            >{{ priorityLabel(row.priority) }}</el-tag
          ></template
        ></el-table-column
      ><el-table-column
        prop="problemSummary"
        label="问题摘要"
        min-width="220"
      /><el-table-column
        prop="triggerReason"
        label="触发原因"
        min-width="220"
      /><el-table-column
        prop="userId"
        label="用户"
        width="80"
      /><el-table-column
        prop="sessionId"
        label="会话"
        width="80"
      /><el-table-column label="状态" width="150"
        ><template #default="{ row }"
          ><el-select
            :model-value="row.status"
            size="small"
            @change="updateStatus(row, $event)"
            ><el-option label="待处理" value="pending" /><el-option
              label="处理中"
              value="processing" /><el-option
              label="已处理"
              value="resolved" /><el-option
              label="无需处理"
              value="ignored" /></el-select></template></el-table-column
      ><el-table-column
        prop="createdAt"
        label="创建时间"
        width="180"
      /><el-table-column label="操作" width="130" fixed="right"
        ><template #default="{ row }"
          ><el-button link type="primary" @click="openChat(row.sessionId)"
            >原会话</el-button
          ><el-button link type="danger" @click="deleteRecord(row)"
            >删除</el-button
          ></template
        ></el-table-column
      ></el-table
    ><AdminPagination
      :page="pager.page"
      :page-size="pager.pageSize"
      :total="pager.total"
      @change="loadRecords"
    /><ChatDetailDrawer v-model="chatDetailOpen" :session-id="sessionId" />
  </section>
</template>
