<script lang="ts" setup>
/**
 * AI 生成记录详情弹窗
 * 展示 input_snapshot / result_json / 错误与耗时，便于排障
 */
import { ref } from 'vue';

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

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

import { getAiGenerationDetail } from '../api';

const loading = ref(false);
const detail = ref<Record<string, any>>({});

const [Modal, modalApi] = useVbenModal({
  title: '生成记录详情',
  class: 'w-[820px]',
  showConfirmButton: false,
  cancelText: '关闭',
  async onOpenChange(isOpen) {
    if (!isOpen) {
      detail.value = {};
      return;
    }
    const data = modalApi.getData<{ id: number }>();
    const id = Number(data?.id || 0);
    if (!id) return;
    loading.value = true;
    try {
      const res = await getAiGenerationDetail(id);
      detail.value = res?.data || res || {};
    } finally {
      loading.value = false;
    }
  },
});

function formatDuration(ms: number) {
  const n = Number(ms || 0);
  if (n <= 0) return '—';
  if (n < 1000) return `${n} ms`;
  return `${(n / 1000).toFixed(1)} s`;
}

function statusColor(status: number) {
  if (status === 1) return 'success';
  if (status === 2) return 'error';
  return 'processing';
}

function prettyJson(v: any) {
  try {
    return JSON.stringify(v ?? {}, null, 2);
  } catch {
    return String(v ?? '');
  }
}
</script>

<template>
  <Modal>
    <Spin :spinning="loading">
      <Descriptions bordered size="small" :column="2" class="text-sm">
        <Descriptions.Item label="ID">{{ detail.id || '—' }}</Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag :color="statusColor(Number(detail.status))">
            {{ detail.status_txt || detail.status }}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label="场景">{{ detail.scene_txt || detail.scene }}</Descriptions.Item>
        <Descriptions.Item label="名称">{{ detail.name || '—' }}</Descriptions.Item>
        <Descriptions.Item label="供应商">{{ detail.provider || '—' }}</Descriptions.Item>
        <Descriptions.Item label="模型">{{ detail.model || '—' }}</Descriptions.Item>
        <Descriptions.Item label="平台">
          {{ detail.platform_name || detail.platform_code || '—' }}
        </Descriptions.Item>
        <Descriptions.Item label="密钥">{{ detail.api_key_name || detail.api_key_id || '—' }}</Descriptions.Item>
        <Descriptions.Item label="Tokens">
          总 {{ detail.total_tokens || 0 }}
          （P {{ detail.prompt_tokens || 0 }} / C {{ detail.completion_tokens || 0 }}）
        </Descriptions.Item>
        <Descriptions.Item label="耗时">
          {{ formatDuration(Number(detail.duration_ms || 0)) }}
        </Descriptions.Item>
        <Descriptions.Item label="错误" :span="2">
          {{ detail.error_msg || '—' }}
        </Descriptions.Item>
        <Descriptions.Item label="输入快照" :span="2">
          <pre class="max-h-40 overflow-auto whitespace-pre-wrap text-xs">{{
            prettyJson(detail.input_snapshot)
          }}</pre>
        </Descriptions.Item>
        <Descriptions.Item label="结果 JSON" :span="2">
          <pre class="max-h-56 overflow-auto whitespace-pre-wrap text-xs">{{
            prettyJson(detail.result_json)
          }}</pre>
        </Descriptions.Item>
      </Descriptions>
    </Spin>
  </Modal>
</template>
