<script lang="ts" setup>
import type { ShadowStats } from './api';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Statistic, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { getShadowStats } from './api';
import { formOptions } from './config/search';
import { createGridOptions } from './config/table';

/**
 * AI 影子流量对比页
 *
 * 开启影子流量（ai_shadow_traffic_enabled=1）后，主链路（PHP 直连厂商）正常返回用户，
 * 同时按比例异步复制请求给 Go Agent；本页展示两条链路的 token/耗时/成功率/内容相似度对比，
 * 运维据此决定是否放量切换到 Agent 链路。只读页面，无增删改。
 */
defineOptions({ name: 'AiShadowCompare' });

/** 顶部聚合统计（与列表共用同一套筛选条件，Grid 每次查询时同步刷新） */
const stats = ref<ShadowStats>({
  count: 0,
  avg_primary_tokens: 0,
  avg_shadow_tokens: 0,
  avg_primary_duration_ms: 0,
  avg_shadow_duration_ms: 0,
  primary_success_rate: 0,
  shadow_success_rate: 0,
  avg_content_similarity: 0,
});

/** 上次统计请求的筛选条件快照：翻页时条件不变，跳过重复的 shadow-stats 请求 */
let lastStatsKey = '';

/**
 * 按当前筛选条件刷新聚合统计
 * 后端 shadowStats 只支持 store_id/scene/date_start/date_end 四个过滤维度；
 * Grid 每次查询（含翻页）都会回调进来，用条件快照去重，只有筛选变化才真正请求
 */
async function loadStats(params: Record<string, any>) {
  const query = {
    store_id: params.store_id,
    scene: params.scene,
    date_start: params.date_start,
    date_end: params.date_end,
  };
  const key = JSON.stringify(query);
  if (key === lastStatsKey) {
    return;
  }
  try {
    const res = await getShadowStats(query);
    if (res) {
      stats.value = res as unknown as ShadowStats;
      // 成功后才记快照：失败时下次查询（如翻页）还有机会重试拉到统计
      lastStatsKey = key;
    }
  } catch {
    // 统计失败不阻塞列表展示（列表由 Grid proxyConfig 独立请求）
  }
}

const [Grid] = useVbenVxeGrid({
  formOptions,
  gridOptions: createGridOptions(loadStats),
});

/** 状态码转 Tag 颜色与文案：1=成功 2=失败 其余=进行中 */
function statusInfo(status: number): { color: string; text: string } {
  if (status === 1) return { color: 'success', text: '成功' };
  if (status === 2) return { color: 'error', text: '失败' };
  return { color: 'processing', text: '进行中' };
}
</script>

<template>
  <Page auto-content-height title="AI 影子流量对比">
    <!-- 顶部统计看板：颜色走主题变量，亮/暗色自动适配 -->
    <div
      class="mb-4 grid grid-cols-2 gap-4 rounded border border-solid border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-4 md:grid-cols-4"
    >
      <Statistic :value="stats.count" title="对比次数" />
      <Statistic
        :value="stats.avg_content_similarity"
        suffix="%"
        title="平均内容相似度"
      />
      <Statistic
        :precision="0"
        :value="stats.avg_primary_tokens"
        title="主链路平均 Token"
      />
      <Statistic
        :precision="0"
        :value="stats.avg_shadow_tokens"
        title="影子链路平均 Token"
      />
      <Statistic
        :value="stats.avg_primary_duration_ms"
        title="主链路平均耗时(ms)"
      />
      <Statistic
        :value="stats.avg_shadow_duration_ms"
        title="影子链路平均耗时(ms)"
      />
      <Statistic
        :value="stats.primary_success_rate"
        suffix="%"
        title="主链路成功率"
      />
      <Statistic
        :value="stats.shadow_success_rate"
        suffix="%"
        title="影子链路成功率"
      />
    </div>

    <Grid>
      <template #primary_status="{ row }">
        <Tag :color="statusInfo(row.primary_status).color">
          {{ statusInfo(row.primary_status).text }}
        </Tag>
      </template>
      <template #shadow_status="{ row }">
        <Tag :color="statusInfo(row.shadow_status).color">
          {{ statusInfo(row.shadow_status).text }}
        </Tag>
      </template>
      <!-- 相似度：70+ 视为高度一致，50 以下通常意味着 Agent 改写了输出 -->
      <template #similarity="{ row }">
        <Tag
          :color="
            row.content_similarity >= 70
              ? 'success'
              : row.content_similarity >= 50
                ? 'warning'
                : 'error'
          "
        >
          {{ row.content_similarity }}%
        </Tag>
      </template>
    </Grid>
  </Page>
</template>
