<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';
import {
  Card,
  Col,
  Row,
  Statistic,
  Table,
  Tabs,
  TabPane,
  DatePicker,
  Space,
  Tag,
  Progress,
  Empty,
  Alert,
  Divider,
  Select,
  Button,
  Spin,
  message,
  Switch,
  InputNumber,
  Tooltip,
} from 'ant-design-vue';
import { ref, onMounted, computed, watch, onUnmounted } from 'vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { apiConfigList, apiConfigStats, apiConfigErrorLog } from '#/api/erp/api';
import type { ErpApiConfigVO } from '#/api/erp/api';
import ErrorDetailModal from './error-detail-modal.vue';

// 时间范围选择
const timeRange = ref<any[]>([]);
const startTime = computed(() => timeRange.value[0] || undefined);
const endTime = computed(() => timeRange.value[1] || undefined);

// API列表（用于选择查看统计）
const apiList = ref<ErpApiConfigVO[]>([]);
const selectedApiId = ref<number>();

// Loading状态
const loading = ref(false);

// 慢查询阈值（毫秒）
const slowQueryThreshold = ref<number>(1000);

// 自动刷新配置
const autoRefreshEnabled = ref(false);
const refreshInterval = ref<number>(30); // 刷新间隔（秒）
let refreshTimer: number | null = null;

// 错误详情弹窗
const errorDetailVisible = ref(false);
const selectedErrorRecord = ref<any>(null);

// 加载API列表
onMounted(async () => {
  try {
    const response = await apiConfigList({ pageNum: 1, pageSize: 100 });
    apiList.value = response.rows || [];
    if (apiList.value.length > 0) {
      selectedApiId.value = apiList.value[0].apiId;
      await loadStats();
    }
  } catch (error) {
    console.error('加载API列表失败', error);
    message.error('加载API列表失败');
  }
});

// 统计数据
const statsData = ref({
  totalCalls: 0,
  successCalls: 0,
  errorCalls: 0,
  avgResponseTime: 0,
  maxResponseTime: 0,
  minResponseTime: 0,
  errorRate: 0,
  slowCalls: 0, // 慢查询数量
  cacheEnabled: false, // 是否启用缓存
});

// 加载统计数据
async function loadStats() {
  if (!selectedApiId.value) {
    message.warning('请先选择API');
    return;
  }

  loading.value = true;
  try {
    const stats = await apiConfigStats(
      selectedApiId.value,
      startTime.value,
      endTime.value
    );

    console.log('统计数据:', stats);

    // 获取选中的API配置，检查是否启用缓存
    const selectedApi = apiList.value.find(api => api.apiId === selectedApiId.value);

    statsData.value = {
      totalCalls: stats.totalCalls || 0,
      successCalls: stats.successCalls || 0,
      errorCalls: stats.errorCalls || 0,
      avgResponseTime: stats.avgResponseTime || 0,
      maxResponseTime: stats.maxResponseTime || 0,
      minResponseTime: stats.minResponseTime || 0,
      errorRate: stats.errorRate || 0,
      slowCalls: stats.slowCalls || 0, // TODO: 后端需要添加慢查询统计
      cacheEnabled: selectedApi?.enableCache === 1,
    };

    // 同时加载错误日志
    await loadErrorLog();

    message.success('统计数据已更新');
  } catch (error) {
    console.error('加载统计数据失败', error);
    message.error('加载统计数据失败');
  } finally {
    loading.value = false;
  }
}

// 错误日志表格配置
const errorLogColumns = [
  { title: '调用时间', dataIndex: 'callTime', width: 180 },
  { title: '响应时间', dataIndex: 'responseTime', width: 100, customRender: ({ text }) => `${text}ms` },
  { title: '客户端IP', dataIndex: 'clientIp', width: 150 },
  { title: '用户ID', dataIndex: 'userId', width: 120 },
  { title: '错误消息', dataIndex: 'errorMessage', ellipsis: true, width: 200 },
  { title: '操作', dataIndex: 'action', width: 80, fixed: 'right' as const },
];

const errorLogData = ref<any[]>([]);

// 加载错误日志
async function loadErrorLog() {
  if (!selectedApiId.value) return;

  try {
    const logs = await apiConfigErrorLog(selectedApiId.value, 50);
    console.log('错误日志:', logs);
    errorLogData.value = logs || [];
  } catch (error) {
    console.error('加载错误日志失败', error);
    errorLogData.value = [];
  }
}

// API选择变化
function handleApiChange(apiId: number) {
  selectedApiId.value = apiId;
}

// 查询按钮
function handleQuery() {
  loadStats();
}

// 刷新按钮
async function handleRefresh() {
  message.info('正在刷新统计数据...');
  await loadStats();
}

// 重置时间范围
function handleResetTimeRange() {
  timeRange.value = [];
  loadStats();
}

// 查看错误详情
function viewErrorDetail(record: any) {
  selectedErrorRecord.value = record;
  errorDetailVisible.value = true;
}

// 关闭错误详情弹窗
function closeErrorDetail() {
  errorDetailVisible.value = false;
  selectedErrorRecord.value = null;
}

// 开启/关闭自动刷新
function toggleAutoRefresh(enabled: boolean) {
  autoRefreshEnabled.value = enabled;

  if (enabled) {
    startAutoRefresh();
    message.success(`已开启自动刷新，每${refreshInterval.value}秒刷新一次`);
  } else {
    stopAutoRefresh();
    message.info('已关闭自动刷新');
  }
}

// 启动自动刷新定时器
function startAutoRefresh() {
  if (refreshTimer) {
    clearInterval(refreshTimer);
  }

  refreshTimer = window.setInterval(() => {
    if (selectedApiId.value && !loading.value) {
      loadStats();
    }
  }, refreshInterval.value * 1000);
}

// 停止自动刷新
function stopAutoRefresh() {
  if (refreshTimer) {
    clearInterval(refreshTimer);
    refreshTimer = null;
  }
}

// 监听刷新间隔变化
watch(refreshInterval, (newInterval) => {
  if (autoRefreshEnabled.value) {
    stopAutoRefresh();
    startAutoRefresh();
  }
});

// 组件卸载时清理定时器
onMounted(() => {
  // ... existing code
});

onUnmounted(() => {
  stopAutoRefresh();
});

// 当前Tab
const currentTab = ref('overview');

// 汇总统计（所有API）- 使用computed自动计算
const overallStats = computed(() => {
  return {
    totalApis: apiList.value.length,
    enabledApis: apiList.value.filter(api => api.status === 1).length,
    disabledApis: apiList.value.filter(api => api.status === 0).length,
    cachedApis: apiList.value.filter(api => api.enableCache === 1).length,
  };
});

// 计算性能健康度（0-100）
function calculateHealthScore(): number {
  if (statsData.value.totalCalls === 0) return 100;

  // 综合考虑错误率和响应时间
  const errorScore = Math.max(0, 100 - statsData.value.errorRate * 10); // 错误率影响（每1%扣10分）
  const timeScore = Math.max(0, 100 - (statsData.value.avgResponseTime / slowQueryThreshold.value) * 20); // 响应时间影响

  return Math.round((errorScore + timeScore) / 2);
}

// 获取健康度颜色
function getHealthColor(): string {
  const score = calculateHealthScore();
  if (score >= 80) return '#3f8600'; // 优秀
  if (score >= 60) return '#faad14'; // 一般
  return '#cf1322'; // 差
}

// 获取健康度描述
function getHealthDescription(): string {
  const score = calculateHealthScore();
  if (score >= 80) return '性能优秀，系统运行正常';
  if (score >= 60) return '性能一般，建议优化';
  if (score >= 40) return '性能较差，需要优化';
  return '性能很差，紧急优化';
}

// 计算响应时间评分（0-100）
function calculateResponseTimeScore(): number {
  if (statsData.value.maxResponseTime === 0) return 100;

  const avgRatio = statsData.value.avgResponseTime / slowQueryThreshold.value;
  return Math.max(0, Math.min(100, 100 - avgRatio * 50));
}

// 获取响应时间颜色
function getResponseTimeColor(): string {
  const score = calculateResponseTimeScore();
  if (score >= 80) return '#3f8600';
  if (score >= 60) return '#1890ff';
  if (score >= 40) return '#faad14';
  return '#cf1322';
}
</script>

<template>
  <Page :auto-content-height="true">
    <!-- 上方：汇总统计卡片 -->
    <Card title="API概览" size="small" class="mb-4">
      <Row :gutter="16">
        <Col :span="6">
          <Statistic title="API总数" :value="overallStats.totalApis" />
        </Col>
        <Col :span="6">
          <Statistic title="启用API" :value="overallStats.enabledApis" :value-style="{ color: '#3f8600' }" />
        </Col>
        <Col :span="6">
          <Statistic title="禁用API" :value="overallStats.disabledApis" :value-style="{ color: '#cf1322' }" />
        </Col>
        <Col :span="6">
          <Statistic title="启用缓存" :value="overallStats.cachedApis" :value-style="{ color: '#1890ff' }" />
        </Col>
      </Row>
    </Card>

    <!-- 下方：详细统计 -->
    <Card size="small">
      <!-- API选择和时间范围 -->
      <div class="filter-section mb-4">
        <Space wrap>
          <span>选择API：</span>
          <Select
            v-model:value="selectedApiId"
            style="width: 300px"
            placeholder="请选择API"
          >
            <Select.Option v-for="api in apiList" :key="api.apiId" :value="api.apiId">
              {{ api.apiName }} ({{ api.apiPath }})
            </Select.Option>
          </Select>

          <span>时间范围：</span>
          <DatePicker.RangePicker
            v-model:value="timeRange"
            style="width: 240px"
          />

          <Button type="primary" :loading="loading" @click="handleQuery">
            查询
          </Button>

          <Button :loading="loading" @click="handleRefresh">
            刷新
          </Button>

          <Button @click="handleResetTimeRange">
            重置
          </Button>

          <Divider type="vertical" />

          <Tooltip title="开启后将按设定的间隔自动刷新统计数据">
            <Space>
              <span>自动刷新：</span>
              <Switch v-model:checked="autoRefreshEnabled" @change="toggleAutoRefresh" />
            </Space>
          </Tooltip>

          <Tooltip title="自动刷新的时间间隔（秒）">
            <Space v-if="autoRefreshEnabled">
              <span>间隔：</span>
              <InputNumber
                v-model:value="refreshInterval"
                :min="10"
                :max="300"
                :step="10"
                style="width: 80px"
              />
              <span>秒</span>
            </Space>
          </Tooltip>

          <Tooltip title="响应时间超过此阈值的调用视为慢查询">
            <Space>
              <span>慢查询阈值：</span>
              <InputNumber
                v-model:value="slowQueryThreshold"
                :min="100"
                :max="10000"
                :step="100"
                style="width: 100px"
              />
              <span>ms</span>
            </Space>
          </Tooltip>
        </Space>
      </div>

      <!-- Loading提示 -->
      <Spin :spinning="loading" tip="正在加载统计数据...">
        <!-- 统计卡片 -->
        <Row :gutter="16" class="mb-4">
          <Col :span="3">
            <Statistic title="总调用次数" :value="statsData.totalCalls" />
          </Col>
          <Col :span="3">
            <Statistic title="成功次数" :value="statsData.successCalls" :value-style="{ color: '#3f8600' }" />
          </Col>
          <Col :span="3">
            <Statistic title="错误次数" :value="statsData.errorCalls" :value-style="{ color: '#cf1322' }" />
          </Col>
          <Col :span="3">
            <Statistic title="错误率" :value="statsData.errorRate.toFixed(2)" suffix="%" :value-style="{ color: statsData.errorRate > 5 ? '#cf1322' : '#3f8600' }" />
          </Col>
          <Col :span="3">
            <Statistic title="平均响应时间" :value="statsData.avgResponseTime" suffix="ms" :value-style="{ color: statsData.avgResponseTime > slowQueryThreshold ? '#faad14' : '#1890ff' }" />
          </Col>
          <Col :span="3">
            <Statistic title="最大响应时间" :value="statsData.maxResponseTime" suffix="ms" :value-style="{ color: statsData.maxResponseTime > slowQueryThreshold ? '#cf1322' : '#1890ff' }" />
          </Col>
          <Col :span="3">
            <Statistic title="最小响应时间" :value="statsData.minResponseTime" suffix="ms" />
          </Col>
          <Col :span="3">
            <Statistic title="慢查询次数" :value="statsData.slowCalls" :value-style="{ color: '#faad14' }">
              <template #suffix>
                <Tooltip title="响应时间超过阈值的调用">
                  <Tag color="warning">>{{ slowQueryThreshold }}ms</Tag>
                </Tooltip>
              </template>
            </Statistic>
          </Col>
        </Row>

        <!-- 性能指标卡片 -->
        <Row :gutter="16" class="mb-4">
          <Col :span="6">
            <Card size="small" title="性能健康度" :bordered="false">
              <Progress
                :percent="calculateHealthScore()"
                :stroke-color="getHealthColor()"
                trail-color="#f0f0f0"
              />
              <div class="metric-desc">{{ getHealthDescription() }}</div>
            </Card>
          </Col>
          <Col :span="6">
            <Card size="small" title="成功率" :bordered="false">
              <Progress
                :percent="100 - statsData.errorRate"
                :stroke-color="{ '0%': '#87d068', '100%': '#3f8600' }"
                trail-color="#f0f0f0"
              />
              <div class="metric-desc">成功 {{ statsData.successCalls }} / 总计 {{ statsData.totalCalls }}</div>
            </Card>
          </Col>
          <Col :span="6">
            <Card size="small" title="响应时间分布" :bordered="false">
              <Progress
                :percent="calculateResponseTimeScore()"
                :stroke-color="getResponseTimeColor()"
                trail-color="#f0f0f0"
              />
              <div class="metric-desc">平均 {{ statsData.avgResponseTime }}ms / 最大 {{ statsData.maxResponseTime }}ms</div>
            </Card>
          </Col>
          <Col :span="6">
            <Card size="small" title="缓存状态" :bordered="false">
              <Statistic :value="statsData.cacheEnabled ? '已启用' : '未启用'" :value-style="{ color: statsData.cacheEnabled ? '#3f8600' : '#8c8c8c' }" />
              <div class="metric-desc">缓存可提升查询性能</div>
            </Card>
          </Col>
        </Row>

        <!-- 错误率进度条 -->
        <div class="mb-4">
          <Progress
            :percent="100 - statsData.errorRate"
            :stroke-color="{ '0%': '#3f8600', '100%': '#87d068' }"
            :trail-color="statsData.errorRate > 10 ? '#cf1322' : '#f0f0f0'"
          />
        </div>

        <!-- Tabs切换 -->
        <Tabs v-model:activeKey="currentTab">
          <TabPane key="overview" tab="统计概览">
            <Empty v-if="!selectedApiId" description="请选择API查看统计" />
            <Alert v-else-if="statsData.totalCalls === 0" type="info">
              <template #message>
                <div>
                  <strong>该API暂无调用记录</strong>
                  <br />
                  <small>请先调用动态API触发统计记录，然后刷新监控页面查看数据</small>
                </div>
              </template>
            </Alert>
            <div v-else>
              <Alert type="success" message="统计功能已完善，包含性能健康度、成功率、响应时间分布等多维度分析" />

              <!-- 性能建议 -->
              <Card size="small" title="性能优化建议" class="mt-4" v-if="statsData.totalCalls > 0">
                <div v-if="statsData.errorRate > 5">
                  <Tag color="error">高错误率</Tag>
                  <span>错误率超过5%，建议检查API配置和SQL语句</span>
                </div>
                <div v-if="statsData.avgResponseTime > slowQueryThreshold">
                  <Tag color="warning">慢查询较多</Tag>
                  <span>平均响应时间超过阈值，建议优化SQL查询或启用缓存</span>
                </div>
                <div v-if="!statsData.cacheEnabled && statsData.totalCalls > 10">
                  <Tag color="info">未启用缓存</Tag>
                  <span>调用次数较多但未启用缓存，建议启用缓存以提升性能</span>
                </div>
                <div v-if="statsData.errorRate <= 1 && statsData.avgResponseTime <= slowQueryThreshold / 2">
                  <Tag color="success">性能优秀</Tag>
                  <span>API运行状态良好，继续保持</span>
                </div>
              </Card>
            </div>
          </TabPane>

          <TabPane key="errorLog" tab="错误日志">
            <Empty v-if="errorLogData.length === 0" description="暂无错误日志" />
            <div v-else>
              <Alert type="warning" class="mb-2">
                <template #message>
                  <span>最近发现 {{ errorLogData.length }} 条错误记录，建议及时处理</span>
                </template>
              </Alert>
              <Table
                :columns="errorLogColumns"
                :data-source="errorLogData"
                :pagination="{ pageSize: 20 }"
                size="small"
                :scroll="{ x: 1000 }"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex === 'callTime'">
                    {{ record.callTime }}
                  </template>
                  <template v-if="column.dataIndex === 'errorMessage'">
                    <Tooltip :title="record.errorMessage">
                      <Tag color="error">{{ record.errorMessage.substring(0, 50) }}...</Tag>
                    </Tooltip>
                  </template>
                  <template v-if="column.dataIndex === 'action'">
                    <Button type="link" size="small" @click="viewErrorDetail(record)">
                      详情
                    </Button>
                  </template>
                </template>
              </Table>
            </div>
          </TabPane>
        </Tabs>
      </Spin>
    </Card>

    <!-- 错误详情弹窗 -->
    <ErrorDetailModal
      v-model:visible="errorDetailVisible"
      :record="selectedErrorRecord"
      @close="closeErrorDetail"
    />
  </Page>
</template>

<style scoped>
.filter-section {
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.metric-desc {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 8px;
}
</style>