Neo-ZQYY/apps/admin-web/src/pages/AIDashboard.tsx

/**
 * AI 运行总览 Dashboard 页面。
 *
 * - 顶部：门店筛选 + 刷新
 * - 第一行：4 个统计卡片（今日调用、成功率、Token 消耗、平均延迟）
 * - 第二行：7 天趋势表格 + App 调用占比表格
 * - 第三行：Token 预算进度条 + App 健康状态
 * - 第四行：告警列表
 */

import React, { useEffect, useState, useCallback } from "react";
import {
  Card, Row, Col, Statistic, Table, Tag, Badge, Progress,
  Select, Button, message, Typography, Space,
} from "antd";
import { ReloadOutlined } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import {
  getDashboard,
  type DashboardResponse, type DailyTrend, type AppDistItem,
  type AlertItem, type AppHealthItem,
} from "../api/adminAI";

const { Title } = Typography;

const ALERT_STATUS_COLOR: Record<string, string> = {
  failed: "red", timeout: "orange", circuit_open: "volcano",
};

const ALERT_MGMT_COLOR: Record<string, string> = {
  pending: "warning", acknowledged: "success", ignored: "default",
};

const HEALTH_STATUS: Record<string, "success" | "error" | "warning" | "default"> = {
  success: "success", failed: "error", timeout: "warning", circuit_open: "error",
};

function fmtTime(raw: string | null): string {
  if (!raw) return "—";
  const d = new Date(raw);
  return Number.isNaN(d.getTime()) ? raw : d.toLocaleString("zh-CN");
}

// ---- 表格列定义 ----

const trendColumns: ColumnsType<DailyTrend> = [
  { title: "日期", dataIndex: "date", key: "date", width: 120 },
  { title: "调用量", dataIndex: "calls", key: "calls", align: "right" },
  {
    title: "成功率", dataIndex: "success_rate", key: "success_rate", align: "right",
    render: (v: number) => `${(v * 100).toFixed(1)}%`,
  },
];

const distColumns: ColumnsType<AppDistItem> = [
  { title: "App 类型", dataIndex: "app_type", key: "app_type" },
  { title: "调用次数", dataIndex: "count", key: "count", align: "right" },
  {
    title: "占比", dataIndex: "percentage", key: "percentage", align: "right",
    render: (v: number) => `${(v * 100).toFixed(1)}%`,
  },
];

const alertColumns: ColumnsType<AlertItem> = [
  { title: "ID", dataIndex: "id", key: "id", width: 80 },
  { title: "App", dataIndex: "app_type", key: "app_type", width: 160 },
  {
    title: "状态", dataIndex: "status", key: "status", width: 110,
    render: (v: string) => <Tag color={ALERT_STATUS_COLOR[v] ?? "default"}>{v}</Tag>,
  },
  {
    title: "告警状态", dataIndex: "alert_status", key: "alert_status", width: 110,
    render: (v: string | null) => v ? <Tag color={ALERT_MGMT_COLOR[v] ?? "default"}>{v}</Tag> : "—",
  },
  {
    title: "错误信息", dataIndex: "error_message", key: "error_message", ellipsis: true,
    render: (v: string | null) => v ?? "—",
  },
  { title: "时间", dataIndex: "created_at", key: "created_at", width: 170, render: fmtTime },
];

// ---- 页面组件 ----

const AIDashboard: React.FC = () => {
  const [data, setData] = useState<DashboardResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [siteId, setSiteId] = useState<number | undefined>(undefined);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await getDashboard(siteId);
      setData(res);
    } catch {
      message.error("加载 Dashboard 失败");
    } finally {
      setLoading(false);
    }
  }, [siteId]);

  useEffect(() => { load(); }, [load]);

  return (
    <div>
      {/* 顶部：门店筛选 + 刷新 */}
      <Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
        <Space>
          <Title level={4} style={{ margin: 0 }}>AI 运行总览</Title>
          <Select
            allowClear placeholder="门店筛选" style={{ width: 200 }}
            value={siteId} onChange={(v) => setSiteId(v)}
            options={[{ label: "默认门店", value: 2790685415443269 }]}
          />
        </Space>
        <Button icon={<ReloadOutlined />} onClick={load} loading={loading}>刷新</Button>
      </Row>

      {/* 第一行：4 个统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={6}>
          <Card><Statistic title="今日调用次数" value={data?.today_calls ?? 0} /></Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日成功率" suffix="%"
              value={data ? (data.today_success_rate * 100).toFixed(1) : "0.0"}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card><Statistic title="今日 Token 消耗" value={data?.today_tokens ?? 0} /></Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="平均延迟" suffix="ms"
              value={data ? data.today_avg_latency_ms.toFixed(0) : "0"}
            />
          </Card>
        </Col>
      </Row>

      {/* 第二行：7 天趋势 + App 调用占比 */}
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={12}>
          <Card title="近 7 天趋势" size="small">
            <Table<DailyTrend>
              columns={trendColumns}
              dataSource={data?.trend_7d ?? []}
              rowKey="date" size="small" pagination={false}
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="App 调用占比" size="small">
            <Table<AppDistItem>
              columns={distColumns}
              dataSource={data?.app_distribution ?? []}
              rowKey="app_type" size="small" pagination={false}
              loading={loading}
            />
          </Card>
        </Col>
      </Row>

      {/* 第三行：Token 预算 + App 健康状态 */}
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={12}>
          <Card title="Token 预算" size="small">
            <div style={{ marginBottom: 12 }}>
              <span>日预算：{data?.budget.daily_used ?? 0} / {data?.budget.daily_limit ?? 0}</span>
              <Progress
                percent={data ? +(data.budget.daily_pct * 100).toFixed(1) : 0}
                status={data && data.budget.daily_pct > 0.9 ? "exception" : "active"}
              />
            </div>
            <div>
              <span>月预算：{data?.budget.monthly_used ?? 0} / {data?.budget.monthly_limit ?? 0}</span>
              <Progress
                percent={data ? +(data.budget.monthly_pct * 100).toFixed(1) : 0}
                status={data && data.budget.monthly_pct > 0.9 ? "exception" : "active"}
              />
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="App 健康状态" size="small">
            {(data?.app_health ?? []).map((item: AppHealthItem) => (
              <div key={item.app_type} style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}>
                <span>{item.app_type}</span>
                <Space>
                  <Badge status={HEALTH_STATUS[item.last_status ?? ""] ?? "default"} text={item.last_status ?? "无记录"} />
                  <span style={{ fontSize: 12, color: "#999" }}>{fmtTime(item.last_call_at)}</span>
                </Space>
              </div>
            ))}
            {(data?.app_health ?? []).length === 0 && <span style={{ color: "#999" }}>暂无数据</span>}
          </Card>
        </Col>
      </Row>

      {/* 第四行：告警列表 */}
      <Card title="告警列表" size="small">
        <Table<AlertItem>
          columns={alertColumns}
          dataSource={data?.recent_alerts ?? []}
          rowKey="id" size="small" pagination={{ pageSize: 10 }}
          loading={loading}
        />
      </Card>
    </div>
  );
};

export default AIDashboard;