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

const props = defineProps<{ canDelete: boolean }>();
const loading = ref(false);
const items = ref<FeedbackItem[]>([]);
const total = ref(0);
const page = ref(1);
const readStatus = ref("all");
const detail = ref<FeedbackDetail | null>(null);

async function load() {
  loading.value = true;
  try {
    const result = await api.feedbackList({ readStatus: readStatus.value, page: page.value, pageSize: 20 });
    items.value = result.items;
    total.value = result.total;
  } catch (error) { ElMessage.error(error instanceof Error ? error.message : "反馈列表加载失败"); }
  finally { loading.value = false; }
}

async function open(item: FeedbackItem) {
  detail.value = await api.feedbackDetail(item.id);
  item.isRead = true;
}

async function remove(item: FeedbackItem) {
  await ElMessageBox.confirm("确认删除这条用户反馈？删除后不可恢复。", "删除反馈", { type: "warning" });
  await api.deleteFeedback(item.id);
  if (detail.value?.id === item.id) detail.value = null;
  ElMessage.success("反馈已删除");
  await load();
}

onMounted(load);
</script>

<template>
  <section class="feedback-page">
    <header><div><h2>反馈管理</h2><p>查看用户针对 AI 回答提交的问题与当时对话。</p></div><el-segmented v-model="readStatus" :options="[{ label: '全部', value: 'all' }, { label: '未读', value: 'unread' }, { label: '已读', value: 'read' }]" @change="page=1; load()" /></header>
    <el-table v-loading="loading" :data="items" stripe>
      <el-table-column label="状态" width="88"><template #default="{ row }"><el-tag :type="row.isRead ? 'info' : 'danger'">{{ row.isRead ? '已读' : '未读' }}</el-tag></template></el-table-column>
      <el-table-column prop="userName" label="用户" width="130" />
      <el-table-column prop="content" label="反馈内容" min-width="240" show-overflow-tooltip />
      <el-table-column prop="messageContent" label="反馈的 AI 回答" min-width="280" show-overflow-tooltip />
      <el-table-column prop="createdAt" label="提交时间" width="180" />
      <el-table-column label="操作" width="150" fixed="right"><template #default="{ row }"><el-button link type="primary" @click="open(row)">查看</el-button><el-button v-if="canDelete" link type="danger" @click="remove(row)">删除</el-button></template></el-table-column>
    </el-table>
    <el-pagination v-if="total > 20" v-model:current-page="page" :page-size="20" :total="total" layout="prev, pager, next, total" @current-change="load" />
    <el-drawer :model-value="Boolean(detail)" title="反馈详情" size="620px" @close="detail = null">
      <template v-if="detail">
        <section class="feedback-summary"><span>用户反馈</span><strong>{{ detail.content }}</strong><small>{{ detail.userName }} · {{ detail.createdAt }}</small></section>
        <h3>当时对话记录</h3>
        <div class="feedback-history"><article v-for="message in detail.messages" :key="message.id" :class="[message.role, { target: message.isTarget }]">
          <div><b>{{ message.role === 'user' ? '用户' : 'AI' }}</b><el-tag v-if="message.isTarget" type="warning">用户反馈的这条回答</el-tag></div><p>{{ message.content }}</p>
        </article></div>
      </template>
    </el-drawer>
  </section>
</template>

<style scoped>
.feedback-page header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:22px; }
.feedback-page h2 { margin:0 0 6px; }.feedback-page header p { margin:0; color:#7b8494; }
.feedback-summary { display:grid; gap:9px; padding:16px; border-radius:12px; background:#f7f9fc; }.feedback-summary span,.feedback-summary small { color:#87909f; }
.feedback-history { display:grid; gap:12px; }.feedback-history article { padding:14px 16px; border:1px solid #e6eaf0; border-radius:12px; }.feedback-history article.user { margin-left:42px; background:#f5f8ff; }.feedback-history article.assistant { margin-right:42px; }.feedback-history article.target { border:2px solid #f0a020; background:#fffaf0; }.feedback-history article div { display:flex; align-items:center; justify-content:space-between; }.feedback-history p { white-space:pre-wrap; line-height:1.65; margin:8px 0 0; }
</style>
