<script setup lang="ts">
import { DataAnalysis } from '@element-plus/icons-vue'
import { computed } from 'vue'
import PageContainer from '@/components/PageContainer.vue'
import { useAnalysisContext } from '@/composables/useAnalysisContext'
import { buildComprehensiveInsightRows, groupInsightsByDimension, type InsightDimension } from '@/lib/comprehensive-insights'

const { context, loading, reload } = useAnalysisContext()

const rows = computed(() => (context.value ? buildComprehensiveInsightRows(context.value) : []))

const grouped = computed(() => (context.value ? groupInsightsByDimension(rows.value) : null))

const dimensionOrder: InsightDimension[] = ['合规', '质量', '营销', '事件实质']

const docHint =
  '结论由当前 mock 数据与规则自动生成，用于联席复盘；正式环境可接规则引擎与人工批注。口径详见《综合分析》与各维度落地文。'
</script>

<template>
  <PageContainer @refresh="reload">
    <div v-loading="loading" class="comp-inner">
      <div class="page-header">
        <div class="header-content">
          <div class="header-left">
            <h2 class="page-title">
              <el-icon><DataAnalysis /></el-icon>
              综合分析
            </h2>
            <p class="page-description">
              汇总合规、质量、营销、事件实质各页已实现图表的<strong>读数结论</strong>（列表）。{{ docHint }}
            </p>
            <p class="comp-meta">落地说明文档：仓库内《分析策略/综合分析.md》。</p>
          </div>
        </div>
      </div>

      <el-alert
        type="info"
        :closable="false"
        show-icon
        class="comp-alert"
        title="与单图说明的关系"
        description="各图卡片内的「取数范围 / 分析逻辑」描述统计口径；本页列表给出基于同一聚合结果的要点摘要，二者配合使用。"
      />

      <template v-if="grouped">
        <section v-for="dim in dimensionOrder" :key="dim" class="comp-section">
          <h3 class="comp-dim-title">{{ dim }}维度</h3>
          <el-empty v-if="!grouped[dim].length" :description="`${dim} 下暂无已接图表`" />
          <el-card v-for="item in grouped[dim]" :key="item.chartId" class="main-card comp-card" shadow="never">
            <template #header>
              <div class="comp-card-head">
                <span class="comp-page-tag">{{ item.pageTitle }}</span>
                <span class="comp-chart-title">{{ item.chartTitle }}</span>
                <el-tag size="small" type="info" effect="plain">{{ item.chartId }}</el-tag>
              </div>
            </template>
            <ul class="comp-bullets">
              <li v-for="(b, i) in item.bullets" :key="i">{{ b }}</li>
            </ul>
          </el-card>
        </section>
      </template>
    </div>
  </PageContainer>
</template>

<style scoped>
.comp-inner {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 120px;
}

.comp-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-placeholder, var(--el-text-color-placeholder));
}

.comp-alert {
  margin-top: 4px;
}

.comp-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comp-dim-title {
  margin: 12px 0 4px;
  font-size: 17px;
  border-bottom: 1px solid var(--el-border-color-light);
  padding-bottom: 6px;
}

.comp-card {
  border-radius: var(--border-radius-md, 10px);
}

.comp-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.comp-page-tag {
  font-size: 12px;
  color: var(--text-secondary, var(--el-text-color-secondary));
}

.comp-chart-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  min-width: 200px;
}

.comp-bullets {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.65;
  color: var(--el-text-color-regular);
}
</style>
