zclaw_openfang/admin-v2/src/pages/Usage.tsx

// ============================================================
// 用量统计 + 转化漏斗
// ============================================================

import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Card, Col, Row, Select, Statistic } from 'antd'
import { ThunderboltOutlined, ColumnWidthOutlined, UserOutlined, TeamOutlined } from '@ant-design/icons'
import type { ProColumns } from '@ant-design/pro-components'
import { ProTable } from '@ant-design/pro-components'
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  FunnelChart, Funnel, LabelList,
} from 'recharts'
import { telemetryService } from '@/services/telemetry'
import { statsService } from '@/services/stats'
import { PageHeader } from '@/components/PageHeader'
import { ErrorState } from '@/components/ErrorState'
import type { DailyUsageStat, ModelUsageStat } from '@/types'

// ─── Conversion Funnel Data ───

interface FunnelStep {
  name: string
  value: number
  fill: string
}

function buildFunnelData(
  totalAccounts: number,
  activeAccounts: number,
  dailyData?: DailyUsageStat[],
  modelData?: ModelUsageStat[],
): FunnelStep[] {
  const activeDevicesToday = dailyData?.length
    ? dailyData.reduce((s, d) => s + d.unique_devices, 0)
    : 0
  const activeModels = modelData?.filter((m) => m.request_count > 0).length ?? 0

  return [
    { name: '注册用户', value: totalAccounts, fill: '#8c8c8c' },
    { name: '活跃用户', value: activeAccounts, fill: '#863bff' },
    { name: '今日使用', value: Math.max(activeDevicesToday, 0), fill: '#47bfff' },
    { name: '使用多模型', value: activeModels, fill: '#10b981' },
  ]
}

// ─── Daily Trend Bar Data ───

interface DailyTrend {
  day: string
  requests: number
  inputTokens: number
  outputTokens: number
}

function buildDailyTrend(data?: DailyUsageStat[]): DailyTrend[] {
  if (!data) return []
  return data.map((d) => ({
    day: d.day.slice(5), // MM-DD
    requests: d.request_count,
    inputTokens: Math.round(d.input_tokens / 1000), // K tokens
    outputTokens: Math.round(d.output_tokens / 1000),
  }))
}

// ─── Main Component ───

export default function Usage() {
  const [days, setDays] = useState(30)

  const {
    data: dailyData,
    isLoading: dailyLoading,
    error: dailyError,
    refetch,
  } = useQuery({
    queryKey: ['usage-daily', days],
    queryFn: ({ signal }) => telemetryService.dailyStats({ days }, signal),
  })

  const { data: modelData, isLoading: modelLoading } = useQuery({
    queryKey: ['usage-model', days],
    queryFn: ({ signal }) => telemetryService.modelStats({}, signal),
  })

  const { data: dashboardStats } = useQuery({
    queryKey: ['stats-dashboard'],
    queryFn: ({ signal }) => statsService.dashboard(signal),
  })

  if (dailyError) {
    return (
      <>
        <PageHeader title="用量统计" description="查看模型使用情况和 Token 消耗" />
        <ErrorState message={(dailyError as Error).message} onRetry={() => refetch()} />
      </>
    )
  }

  const totalRequests = dailyData?.reduce((s, d) => s + d.request_count, 0) ?? 0
  const totalTokens = dailyData?.reduce((s, d) => s + d.input_tokens + d.output_tokens, 0) ?? 0

  const totalAccounts = dashboardStats?.total_accounts ?? 0
  const activeAccounts = dashboardStats?.active_accounts ?? 0

  const funnelData = buildFunnelData(totalAccounts, activeAccounts, dailyData, modelData)
  const trendData = buildDailyTrend(dailyData)

  const dailyColumns: ProColumns<DailyUsageStat>[] = [
    { title: '日期', dataIndex: 'day', width: 120 },
    {
      title: '请求数',
      dataIndex: 'request_count',
      width: 100,
      render: (_, r) => r.request_count.toLocaleString(),
    },
    {
      title: '输入 Token',
      dataIndex: 'input_tokens',
      width: 120,
      render: (_, r) => r.input_tokens.toLocaleString(),
    },
    {
      title: '输出 Token',
      dataIndex: 'output_tokens',
      width: 120,
      render: (_, r) => r.output_tokens.toLocaleString(),
    },
    { title: '设备数', dataIndex: 'unique_devices', width: 80 },
  ]

  const modelColumns: ProColumns<ModelUsageStat>[] = [
    { title: '模型', dataIndex: 'model_id', width: 200 },
    {
      title: '请求数',
      dataIndex: 'request_count',
      width: 100,
      render: (_, r) => r.request_count.toLocaleString(),
    },
    {
      title: '输入 Token',
      dataIndex: 'input_tokens',
      width: 120,
      render: (_, r) => r.input_tokens.toLocaleString(),
    },
    {
      title: '输出 Token',
      dataIndex: 'output_tokens',
      width: 120,
      render: (_, r) => r.output_tokens.toLocaleString(),
    },
    {
      title: '平均延迟',
      dataIndex: 'avg_latency_ms',
      width: 100,
      render: (_, r) => (r.avg_latency_ms ? `${Math.round(r.avg_latency_ms)}ms` : '-'),
    },
    {
      title: '成功率',
      dataIndex: 'success_rate',
      width: 100,
      render: (_, r) => `${(r.success_rate * 100).toFixed(1)}%`,
    },
  ]

  return (
    <div>
      <PageHeader
        title="用量统计"
        description="查看模型使用情况、Token 消耗和用户转化"
        actions={
          <Select
            value={days}
            onChange={setDays}
            options={[
              { value: 7, label: '最近 7 天' },
              { value: 30, label: '最近 30 天' },
              { value: 90, label: '最近 90 天' },
            ]}
            className="w-36"
          />
        }
      />

      {/* Summary Cards */}
      <Row gutter={[16, 16]} className="mb-6">
        <Col xs={24} sm={12} md={6}>
          <Card className="hover:shadow-md transition-shadow duration-200">
            <Statistic
              title={
                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
                  总请求数
                </span>
              }
              value={totalRequests}
              prefix={<ThunderboltOutlined style={{ color: '#863bff' }} />}
              valueStyle={{ fontWeight: 600, color: '#863bff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="hover:shadow-md transition-shadow duration-200">
            <Statistic
              title={
                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
                  总 Token 数
                </span>
              }
              value={totalTokens}
              prefix={<ColumnWidthOutlined style={{ color: '#47bfff' }} />}
              valueStyle={{ fontWeight: 600, color: '#47bfff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="hover:shadow-md transition-shadow duration-200">
            <Statistic
              title={
                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
                  注册用户
                </span>
              }
              value={totalAccounts}
              prefix={<UserOutlined style={{ color: '#10b981' }} />}
              valueStyle={{ fontWeight: 600, color: '#10b981' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="hover:shadow-md transition-shadow duration-200">
            <Statistic
              title={
                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
                  活跃用户
                </span>
              }
              value={activeAccounts}
              prefix={<TeamOutlined style={{ color: '#f59e0b' }} />}
              valueStyle={{ fontWeight: 600, color: '#f59e0b' }}
            />
          </Card>
        </Col>
      </Row>

      {/* Conversion Funnel + Daily Trend */}
      <Row gutter={[16, 16]} className="mb-6">
        <Col xs={24} lg={10}>
          <Card
            title={
              <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
                用户转化漏斗
              </span>
            }
            size="small"
          >
            <ResponsiveContainer width="100%" height={260}>
              <FunnelChart>
                <Tooltip
                  formatter={(value: number) => [value.toLocaleString(), '数量']}
                />
                <Funnel
                  dataKey="value"
                  data={funnelData}
                  isAnimationActive
                >
                  <LabelList
                    position="right"
                    dataKey="name"
                    fill="#555"
                    stroke="none"
                    fontSize={12}
                  />
                </Funnel>
              </FunnelChart>
            </ResponsiveContainer>
          </Card>
        </Col>
        <Col xs={24} lg={14}>
          <Card
            title={
              <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
                每日趋势
              </span>
            }
            size="small"
          >
            <ResponsiveContainer width="100%" height={260}>
              <BarChart data={trendData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                <XAxis dataKey="day" tick={{ fontSize: 11 }} />
                <YAxis tick={{ fontSize: 11 }} />
                <Tooltip
                  formatter={(value: number, name: string) => {
                    const labels: Record<string, string> = {
                      requests: '请求数',
                      inputTokens: '输入 Token(K)',
                      outputTokens: '输出 Token(K)',
                    }
                    return [value.toLocaleString(), labels[name] ?? name]
                  }}
                />
                <Bar dataKey="requests" fill="#863bff" radius={[4, 4, 0, 0]} barSize={8} />
                <Bar dataKey="inputTokens" fill="#47bfff" radius={[4, 4, 0, 0]} barSize={8} />
                <Bar dataKey="outputTokens" fill="#10b981" radius={[4, 4, 0, 0]} barSize={8} />
              </BarChart>
            </ResponsiveContainer>
          </Card>
        </Col>
      </Row>

      {/* Daily Stats */}
      <Card
        title={
          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
            每日统计
          </span>
        }
        className="mb-6"
        size="small"
        styles={{ body: { padding: 0 } }}
      >
        <ProTable<DailyUsageStat>
          columns={dailyColumns}
          dataSource={dailyData ?? []}
          loading={dailyLoading}
          rowKey="day"
          search={false}
          toolBarRender={false}
          pagination={false}
          size="small"
        />
      </Card>

      {/* Model Stats */}
      <Card
        title={
          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
            按模型统计
          </span>
        }
        size="small"
        styles={{ body: { padding: 0 } }}
      >
        <ProTable<ModelUsageStat>
          columns={modelColumns}
          dataSource={modelData ?? []}
          loading={modelLoading}
          rowKey="model_id"
          search={false}
          toolBarRender={false}
          pagination={false}
          size="small"
        />
      </Card>
    </div>
  )
}