<template>
  <a-drawer
    :visible="visible"
    :width="820"
    title="FAQ 详情"
    :footer="false"
    unmount-on-close
    @cancel="close"
    @update:visible="handleVisibleChange"
  >
    <a-spin :loading="loading" style="width: 100%">
      <template v-if="faq">
        <div class="detail-header">
          <div>
            <div class="faq-no">{{ faq.faq_no || `FAQ-${faq.id}` }}</div>
            <h2>{{ faq.question }}</h2>
            <a-space>
              <a-tag :color="getFaqStatusColor(faq.status)">{{ getFaqStatusText(faq.status) }}</a-tag>
              <a-tag :color="getFaqPriorityColor(faq.priority)">{{ getFaqPriorityText(faq.priority) }}</a-tag>
            </a-space>
          </div>
          <a-space wrap>
            <a-button :loading="favoriteLoading" @click="emit('favorite', faq)">
              <template #icon>
                <icon-star-fill v-if="faq.is_favorited" />
                <icon-star v-else />
              </template>
              {{ faq.is_favorited ? '取消收藏' : '收藏' }}
            </a-button>
            <a-button v-if="canEdit" type="primary" @click="emit('edit', faq)">编辑</a-button>
            <a-button v-if="canSubmit" :loading="actionLoading" @click="emit('submit', faq)">提交审核</a-button>
            <a-button v-if="canDelete" status="danger" :loading="actionLoading" @click="emit('delete', faq)">删除</a-button>
          </a-space>
        </div>

        <a-alert v-if="faq.status === 'rejected'" type="error" class="reject-alert">
          <template #title>审核未通过</template>
          {{ rejectionReason(faq.remarks) }}
        </a-alert>

        <section>
          <h3>基本信息</h3>
          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="公共分类">{{ categoryName || '-' }}</a-descriptions-item>
            <a-descriptions-item label="子分类">{{ faq.sub_category || '-' }}</a-descriptions-item>
            <a-descriptions-item label="问题类型">{{ faq.problem_type || '-' }}</a-descriptions-item>
            <a-descriptions-item label="作者">{{ faq.author_name || `用户 ${faq.author_id}` }}</a-descriptions-item>
            <a-descriptions-item label="更新时间">{{ formatTime(faq.updated_at) }}</a-descriptions-item>
            <a-descriptions-item label="审核人">{{ faq.reviewer_name || '-' }}</a-descriptions-item>
            <a-descriptions-item label="审核时间">{{ formatTime(faq.reviewed_at) }}</a-descriptions-item>
            <a-descriptions-item label="提交时间">{{ formatTime(faq.published_at) }}</a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ formatTime(faq.created_at) }}</a-descriptions-item>
          </a-descriptions>
        </section>

        <section>
          <h3>处理方案</h3>
          <a-descriptions :column="1" bordered>
            <a-descriptions-item label="答案">
              <div class="pre-wrap">{{ faq.answer || '-' }}</div>
            </a-descriptions-item>
            <a-descriptions-item label="详细解决方案">
              <div class="pre-wrap">{{ faq.solution || '-' }}</div>
            </a-descriptions-item>
            <a-descriptions-item label="处理步骤">
              <div class="pre-wrap">{{ faq.process_steps || '-' }}</div>
            </a-descriptions-item>
            <a-descriptions-item label="前置条件">
              <div class="pre-wrap">{{ faq.prerequisites || '-' }}</div>
            </a-descriptions-item>
          </a-descriptions>
        </section>

        <section>
          <h3>使用范围与关联</h3>
          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="适用范围" :span="2">{{ faq.applicable_scope || '-' }}</a-descriptions-item>
            <a-descriptions-item label="关键词" :span="2">{{ faq.keywords || '-' }}</a-descriptions-item>
            <a-descriptions-item label="标签" :span="2">{{ faq.tags || '-' }}</a-descriptions-item>
            <a-descriptions-item label="关联 FAQ">{{ faq.related_faqs || '-' }}</a-descriptions-item>
            <a-descriptions-item label="关联文档">{{ faq.related_docs || '-' }}</a-descriptions-item>
            <a-descriptions-item label="相关链接" :span="2">{{ faq.related_links || '-' }}</a-descriptions-item>
            <a-descriptions-item label="检测点">{{ faq.detection_point_ids || '-' }}</a-descriptions-item>
            <a-descriptions-item label="附件">{{ faq.attachments || '-' }}</a-descriptions-item>
            <a-descriptions-item label="备注" :span="2">
              <div class="pre-wrap">{{ faq.remarks || '-' }}</div>
            </a-descriptions-item>
          </a-descriptions>
        </section>

        <section>
          <h3>使用情况</h3>
          <a-descriptions :column="4" bordered>
            <a-descriptions-item label="浏览">{{ faq.view_count || 0 }}</a-descriptions-item>
            <a-descriptions-item label="使用">{{ faq.use_count || 0 }}</a-descriptions-item>
            <a-descriptions-item label="有帮助">{{ faq.helpful_count || 0 }}</a-descriptions-item>
            <a-descriptions-item label="无帮助">{{ faq.useless_count || 0 }}</a-descriptions-item>
          </a-descriptions>
        </section>
      </template>
      <a-empty v-else-if="!loading" description="未找到 FAQ" />
    </a-spin>
  </a-drawer>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { IconStar, IconStarFill } from '@arco-design/web-vue/es/icon'
import { getFaqPriorityColor, getFaqPriorityText, getFaqStatusColor, getFaqStatusText, type Faq } from '@/api/kb/faq'

interface Props {
  visible: boolean
  faq: Faq | null
  categoryName?: string
  loading?: boolean
  favoriteLoading?: boolean
  actionLoading?: boolean
  canEdit?: boolean
  canSubmit?: boolean
  canDelete?: boolean
}

withDefaults(defineProps<Props>(), {
  categoryName: '',
  loading: false,
  favoriteLoading: false,
  actionLoading: false,
  canEdit: false,
  canSubmit: false,
  canDelete: false,
})

const emit = defineEmits<{
  (event: 'update:visible', visible: boolean): void
  (event: 'edit', faq: Faq): void
  (event: 'submit', faq: Faq): void
  (event: 'favorite', faq: Faq): void
  (event: 'delete', faq: Faq): void
}>()

function close() {
  emit('update:visible', false)
}

function handleVisibleChange(visible: boolean) {
  if (!visible) close()
}

/** 将后端时间统一为列表使用的分钟精度。 */
function formatTime(value: string | null | undefined) {
  return value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'
}

/** 提取最近一次审核拒绝原因。 */
function rejectionReason(remarks: string) {
  const matches = [...remarks.matchAll(/\[审核拒绝 [^\]]+\]\s*([^\n]+)/g)]
  return matches.length ? matches[matches.length - 1][1] : remarks || '未填写原因'
}
</script>

<style scoped lang="less">
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;

  h2 {
    margin: 4px 0 12px;
    color: var(--color-text-1);
    font-size: 20px;
    line-height: 1.5;
  }
}

.faq-no {
  color: var(--color-text-3);
  font-size: 12px;
}

.reject-alert {
  margin-bottom: 20px;
}

section {
  & + & {
    margin-top: 24px;
  }

  h3 {
    margin: 0 0 12px;
    color: var(--color-text-1);
    font-size: 15px;
  }
}

.pre-wrap {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
