<!--
=============================================================================
企微IT智能服务台 — 快速回复管理页
=============================================================================
说明：管理快速回复模板审核流程
  - 左侧/顶部：分类标签筛选
  - 右侧/主体：卡片列表显示待审核模板
  - 审核操作：通过（直接生效）/ 驳回（需填原因对话框）
-->
<template>
  <div class="quick-replies-page">
    <!-- 页面标题 -->
    <div class="page-title">快速回复管理</div>
    <div class="page-desc">分类管理 + 版本历史 + 审核发布流程。坐席提交→组长审核→全员可见。</div>

    <!-- 顶部操作栏 -->
    <div class="replies-toolbar">
      <!-- 分类筛选标签 -->
      <div class="category-tabs">
        <el-button
          v-for="cat in categories"
          :key="cat"
          :type="quickReplyStore.activeCategory === cat ? 'primary' : 'default'"
          size="small"
          @click="quickReplyStore.setCategory(cat)"
        >
          {{ cat }} ({{ getCategoryCount(cat) }})
        </el-button>
      </div>

      <!-- 新增按钮 -->
      <el-button type="primary">
        <el-icon><Plus /></el-icon>
        新增模板
      </el-button>
    </div>

    <!-- 加载状态 -->
    <div v-if="quickReplyStore.loading" class="loading-state">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 模板列表 -->
    <div v-else-if="quickReplyStore.filteredReplies.length > 0">
      <QuickReplyCard
        v-for="reply in quickReplyStore.filteredReplies"
        :key="reply.id"
        :reply="reply"
        @approve="handleApprove"
        @reject="handleReject"
      />
    </div>

    <!-- 空状态 -->
    <el-empty v-else description="暂无待审核的快速回复模板" />

    <!-- ================================================================ -->
    <!-- 驳回原因对话框 -->
    <!-- ================================================================ -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="驳回快速回复"
      width="440px"
      destroy-on-close
    >
      <el-form label-position="top">
        <el-form-item label="驳回原因">
          <el-input
            v-model="rejectReason"
            type="textarea"
            :rows="4"
            placeholder="请填写驳回原因，如：内容需要更具体的操作步骤"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleRejectConfirm">确认驳回</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import QuickReplyCard from '@/components/QuickReplyCard.vue'
import { useQuickReplyStore } from '@/stores/quickReply'
import type { QuickReplyTemplate } from '@/types'
import { QUICK_REPLY_CATEGORIES } from '@/types'

// ==========================================================================
// Store
// ==========================================================================
const quickReplyStore = useQuickReplyStore()

// ==========================================================================
// 分类列表
// ==========================================================================
const categories = [...QUICK_REPLY_CATEGORIES]

// ==========================================================================
// 驳回对话框
// ==========================================================================
const rejectDialogVisible = ref<boolean>(false)
const rejectingReply = ref<QuickReplyTemplate | null>(null)
const rejectReason = ref<string>('')

// ==========================================================================
// 初始化
// ==========================================================================
onMounted(() => {
  quickReplyStore.loadReplies()
})

// ==========================================================================
// 分类计数
// ==========================================================================
function getCategoryCount(cat: string): number {
  if (cat === '全部') return quickReplyStore.replies.length
  return quickReplyStore.replies.filter((r) => r.category === cat).length
}

// ==========================================================================
// 审核操作
// ==========================================================================

/** 通过审核 */
async function handleApprove(reply: QuickReplyTemplate): Promise<void> {
  const success = await quickReplyStore.review(reply.id, 'approve')
  if (success) {
    ElMessage.success('已通过审核')
  } else {
    ElMessage.error('审核操作失败')
  }
}

/** 打开驳回对话框 */
function handleReject(reply: QuickReplyTemplate): void {
  rejectingReply.value = reply
  rejectReason.value = ''
  rejectDialogVisible.value = true
}

/** 确认驳回 */
async function handleRejectConfirm(): Promise<void> {
  if (!rejectingReply.value) return
  const success = await quickReplyStore.review(
    rejectingReply.value.id,
    'reject',
    rejectReason.value || '未填写原因'
  )
  if (success) {
    ElMessage.success('已驳回')
    rejectDialogVisible.value = false
  } else {
    ElMessage.error('驳回操作失败')
  }
}
</script>

<style scoped>
/* 工具栏 */
.replies-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 加载状态 */
.loading-state {
  padding: 24px 0;
}
</style>
