<script setup lang="ts">
import { ref, watch } from 'vue'
import { getProductFAQs, getProduct } from '@/api/troubleshoot'
import type { FAQ, Product } from '@/types/troubleshoot'
import { renderMarkdown } from '@/utils/markdown'
import { ElMessage } from 'element-plus'

interface Props {
  productId: string
  productName: string
}

const props = defineProps<Props>()

const product = ref<Product | null>(null)
const faqs = ref<FAQ[]>([])
const loading = ref(true)

// 当前展开的问题
const expandedFAQ = ref<string | null>(null)
const faqDetail = ref<string>('')
const faqDetailLoading = ref(false)

async function loadData() {
  loading.value = true
  expandedFAQ.value = null
  faqDetail.value = ''

  try {
    const [productRes, faqsRes] = await Promise.all([
      getProduct(props.productId),
      getProductFAQs(props.productId),
    ])

    if (productRes.success) {
      product.value = productRes.product || null
    }

    if (faqsRes.success) {
      faqs.value = faqsRes.faqs
    }
  } catch {
    ElMessage.error('加载常见问题失败')
  } finally {
    loading.value = false
  }
}

async function toggleFAQ(faq: FAQ) {
  if (expandedFAQ.value === faq.record_id) {
    expandedFAQ.value = null
    return
  }

  expandedFAQ.value = faq.record_id
  faqDetail.value = ''
  faqDetailLoading.value = true

  try {
    // 静态 Mock：直接使用 solution 字段作为详情
    faqDetail.value = faq.solution
    // TODO: 真实 API 调用
    // const res = await http.get(`/api/troubleshoot/record/${faq.record_id}`)
    // if (res.data?.success && res.data.record) {
    //   faqDetail.value = res.data.record.full_text || faq.solution
    // }
  } catch {
    faqDetail.value = faq.solution || '加载失败'
  } finally {
    faqDetailLoading.value = false
  }
}

function downloadFAQRecord(faq: FAQ) {
  window.open(`/api/troubleshoot/record/${faq.record_id}/download`, '_blank')
}

watch(() => props.productId, loadData, { immediate: true })
</script>

<template>
  <div class="faqs-panel" v-loading="loading">
    <!-- 标题 -->
    <div class="panel-header">
      <div class="header-left">
        <h2>❓ {{ productName }} — 常见问题</h2>
      </div>
      <span class="faq-count">共 {{ faqs.length }} 个问题</span>
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && faqs.length === 0" class="empty-state">
      <div class="empty-icon">🔍</div>
      <h3>暂无常见问题</h3>
      <p>该产品暂未录入常见问题与排查指引</p>
    </div>

    <!-- 问题列表 -->
    <div v-else class="faq-list">
      <div
        v-for="(faq, index) in faqs"
        :key="faq.record_id"
        class="faq-item"
        :class="{ expanded: expandedFAQ === faq.record_id }"
      >
        <!-- 问题标题行 -->
        <div class="faq-header" @click="toggleFAQ(faq)">
          <span class="faq-index">{{ index + 1 }}</span>
          <span class="faq-title">{{ faq.title }}</span>
          <span class="expand-icon" :class="{ expanded: expandedFAQ === faq.record_id }">
            ▶
          </span>
        </div>

        <!-- 问题摘要（未展开时） -->
        <div v-if="expandedFAQ !== faq.record_id" class="faq-summary" @click="toggleFAQ(faq)">
          {{ faq.phenomenon?.slice(0, 80) }}<span v-if="faq.phenomenon && faq.phenomenon.length > 80">...</span>
        </div>

        <!-- 问题详情（展开时） -->
        <transition name="expand">
          <div v-if="expandedFAQ === faq.record_id" class="faq-detail" v-loading="faqDetailLoading">
            <!-- 问题现象 -->
            <div class="detail-section">
              <div class="section-label">
                <span class="section-icon">🔴</span>
                问题现象
              </div>
              <div class="section-content phenomenon">
                {{ faq.phenomenon }}
              </div>
            </div>

            <!-- 排查指引 -->
            <div class="detail-section">
              <div class="section-label">
                <span class="section-icon">🟢</span>
                排查指引
              </div>
              <div class="section-content">
                <div
                  v-if="faqDetail"
                  class="markdown-content"
                  v-html="renderMarkdown(faqDetail)"
                />
                <p v-else class="no-content">暂无详细内容</p>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="detail-actions">
              <el-button size="small" @click="downloadFAQRecord(faq)">
                📥 下载文档
              </el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.faqs-panel {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  min-height: 400px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;

  h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1d2129;
    margin: 0;
  }

  .faq-count {
    font-size: 13px;
    color: #86909c;
    background: #f2f3f5;
    padding: 4px 12px;
    border-radius: 12px;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #86909c;

  .empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.5;
  }

  h3 {
    font-size: 16px;
    font-weight: 500;
    color: #4e5969;
    margin: 0 0 8px;
  }

  p {
    font-size: 14px;
    margin: 0;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: #fafafa;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  overflow: hidden;
  transition: all 0.2s;

  &.expanded {
    background: #fff;
    border-color: #e0e7ff;
    box-shadow: 0 4px 16px rgba(22, 125, 255, 0.1);
  }
}

.faq-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s;

  &:hover {
    background: #f2f3f5;
  }

  .expanded & {
    background: #f7f9fc;
  }
}

.faq-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #e8f3ff;
  color: #165dff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.faq-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
  line-height: 1.5;
}

.expand-icon {
  font-size: 10px;
  color: #86909c;
  transition: transform 0.2s;
  flex-shrink: 0;

  &.expanded {
    transform: rotate(90deg);
  }
}

.faq-summary {
  padding: 0 18px 14px 54px;
  font-size: 13px;
  color: #86909c;
  line-height: 1.6;
  cursor: pointer;

  &:hover {
    color: #4e5969;
  }
}

.faq-detail {
  padding: 0 18px 18px;
  border-top: 1px solid #f0f0f0;
  margin-top: 0;
}

.detail-section {
  margin-top: 16px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 10px;

  .section-icon {
    font-size: 12px;
  }
}

.section-content {
  background: #f7f8fa;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: #4e5969;
  line-height: 1.8;

  &.phenomenon {
    border-left: 3px solid #ff7d00;
  }
}

.markdown-content {
  line-height: 1.8;

  :deep(ol), :deep(ul) {
    padding-left: 20px;
    margin: 8px 0;
  }

  :deep(li) {
    margin-bottom: 4px;
  }

  :deep(code) {
    background: #e8f3ff;
    color: #165dff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
  }

  :deep(pre) {
    background: #1d2129;
    color: #e5e6eb;
    padding: 12px 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;

    code {
      background: none;
      color: inherit;
      padding: 0;
    }
  }
}

.no-content {
  color: #c9cdd4;
  font-style: italic;
  margin: 0;
}

.detail-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
}

// 展开动画
.expand-enter-active,
.expand-leave-active {
  transition: all 0.25s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.expand-enter-to,
.expand-leave-from {
  opacity: 1;
  max-height: 800px;
}
</style>
