<template>
  <div class="kp-panel" :class="{ 'kp-collapsed': collapsed }">
    <div class="kp-header" @click="toggleCollapse">
      <span class="kp-icon">{{ icon }}</span>
      <span class="kp-title">📖 CMA知识点</span>
      <span class="kp-toggle">{{ collapsed ? '展开' : '收起' }}</span>
    </div>
    <div v-if="!collapsed" class="kp-body">
      <div v-if="loading" style="padding:12px;text-align:center;color:#999;">加载中...</div>
      <div v-else-if="articles.length === 0" style="padding:12px;text-align:center;color:#ccc;">暂无关联知识</div>
      <template v-else>
        <div v-for="(article, idx) in articles" :key="article.id" class="kp-article" :class="{ 'kp-first': idx === 0 }">
          <div class="kp-article-head" @click="toggleArticle(idx)">
            <span class="kp-article-icon">{{ article.icon || '📖' }}</span>
            <span class="kp-article-title">{{ article.title }}</span>
            <span class="kp-article-arrow">{{ expandedArticle === idx ? '▼' : '▶' }}</span>
          </div>
          <div v-if="expandedArticle === idx" class="kp-article-body" v-html="renderedContent(article.content)"></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { knowledgeArticleApi } from '../api/index'
import { marked } from 'marked'

const props = defineProps<{
  relatedPage: string
  icon?: string
  defaultCollapsed?: boolean
}>()

const collapsed = ref(props.defaultCollapsed !== false)
const loading = ref(false)
const articles = ref<any[]>([])
const expandedArticle = ref<number | null>(0)

// 首次使用tooltip引导
const hasSeenTooltip = ref(localStorage.getItem('cma_kb_tooltip_seen') === '1')

onMounted(() => {
  if (!hasSeenTooltip.value) {
    collapsed.value = false
    localStorage.setItem('cma_kb_tooltip_seen', '1')
    ElMessage.info('💡 右侧面板展示了关联的CMA知识点，可收起不干扰操作')
  }
  loadArticles()
})

watch(() => props.relatedPage, () => {
  loadArticles()
})

function toggleCollapse() {
  collapsed.value = !collapsed.value
}

function toggleArticle(idx: number) {
  expandedArticle.value = expandedArticle.value === idx ? null : idx
}

function renderedContent(content: string) {
  if (!content) return ''
  try {
    return marked(content)
  } catch {
    return content
  }
}

async function loadArticles() {
  if (!props.relatedPage) return
  loading.value = true
  try {
    const r: any = await knowledgeArticleApi.list({ related_page: props.relatedPage })
    articles.value = r.data || []
  } catch {
    articles.value = []
  }
  loading.value = false
}
</script>

<style scoped>
.kp-panel {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: all 0.3s;
  font-size: 13px;
}
.kp-panel.kp-collapsed {
  max-height: 36px;
}
.kp-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef1f5 100%);
  user-select: none;
}
.kp-icon { font-size: 16px; }
.kp-title { flex: 1; font-weight: 600; font-size: 13px; color: #555; }
.kp-toggle { font-size: 11px; color: #999; }
.kp-body { max-height: 400px; overflow-y: auto; }
.kp-article { border-top: 1px solid #f0f0f0; }
.kp-article.kp-first { border-top: none; }
.kp-article-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.kp-article-head:hover { background: #f5f8ff; }
.kp-article-icon { font-size: 14px; }
.kp-article-title { flex: 1; font-size: 13px; color: #409eff; }
.kp-article-arrow { font-size: 10px; color: #999; }
.kp-article-body {
  padding: 4px 12px 12px;
  line-height: 1.7;
  color: #555;
  font-size: 12px;
}
.kp-article-body :deep(h4) { margin: 8px 0 4px; font-size: 13px; color: #333; }
.kp-article-body :deep(h5) { margin: 6px 0 3px; font-size: 12px; color: #666; }
.kp-article-body :deep(ul),
.kp-article-body :deep(ol) { padding-left: 16px; }
.kp-article-body :deep(li) { margin-bottom: 2px; }
.kp-article-body :deep(code) { background: #f5f5f5; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.kp-article-body :deep(table) { width: 100%; border-collapse: collapse; margin: 8px 0; }
.kp-article-body :deep(th),
.kp-article-body :deep(td) { border: 1px solid #e0e0e0; padding: 4px 6px; text-align: left; font-size: 11px; }
.kp-article-body :deep(th) { background: #f5f5f5; font-weight: 600; }
</style>
