new-api-analytics/components/charts/TrendChart.tsx

"use client";

import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";
import { formatTokens } from "@/lib/utils";
import { useI18n } from "@/lib/i18n";

interface TrendPoint { date: string; calls: number; total_tokens: number; prompt_tokens: number; completion_tokens: number; }

export function TrendChart({ data, metric = "total_tokens" }: { data: TrendPoint[]; metric?: "total_tokens" | "calls" }) {
  const { t, locale } = useI18n();

  if (!data.length)
    return <div className="flex h-64 items-center justify-center" style={{ color: "var(--text-muted)" }}>{t("common.noData")}</div>;

  // 本地化日期格式
  const formatDateLabel = (dateStr: string) => {
    const d = new Date(dateStr);
    if (locale === "zh") {
      return `${d.getMonth() + 1}/${d.getDate()}`;
    }
    return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
  };

  const tooltipStyle = {
    background: "var(--surface)",
    border: "1px solid var(--surface-border)",
    borderRadius: "8px",
    color: "var(--foreground)",
    fontSize: "12px",
    backdropFilter: "blur(16px)",
  };

  // Token 模式：输入和输出数量级差距大，用双 Y 轴
  if (metric === "total_tokens") {
    return (
      <ResponsiveContainer width="100%" height={320}>
        <LineChart data={data} margin={{ top: 5, right: 60, left: 10, bottom: 5 }}>
          <defs>
            <linearGradient id="gradCyan" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="var(--accent)" />
              <stop offset="100%" stopColor="var(--accent-purple)" />
            </linearGradient>
            <linearGradient id="gradPurple" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="var(--accent-purple)" />
              <stop offset="100%" stopColor="var(--accent-pink)" />
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
          <XAxis dataKey="date" tickFormatter={formatDateLabel} tick={{ fontSize: 11 }} stroke="var(--chart-grid)" />
          {/* 左 Y 轴：输入 */}
          <YAxis
            yAxisId="left"
            tickFormatter={(v) => formatTokens(v)}
            tick={{ fontSize: 10 }}
            stroke="var(--chart-grid)"
            label={{ value: t("th.input"), angle: -90, position: "insideLeft", style: { fontSize: 10, fill: "var(--text-muted)" } }}
          />
          {/* 右 Y 轴：输出 */}
          <YAxis
            yAxisId="right"
            orientation="right"
            tickFormatter={(v) => formatTokens(v)}
            tick={{ fontSize: 10 }}
            stroke="var(--chart-grid)"
            label={{ value: t("th.output"), angle: 90, position: "insideRight", style: { fontSize: 10, fill: "var(--text-muted)" } }}
          />
          <Tooltip
            contentStyle={tooltipStyle}
            labelFormatter={(label) => {
              const d = new Date(String(label));
              return locale === "zh"
                ? `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`
                : d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
            }}
            formatter={(value, name) => [
              formatTokens(Number(value)),
              name === t("th.input") ? t("th.input") : t("th.output"),
            ]}
          />
          <Legend />
          <Line yAxisId="left" type="monotone" dataKey="prompt_tokens" name={t("th.input")} stroke="url(#gradCyan)" strokeWidth={2} dot={false} />
          <Line yAxisId="right" type="monotone" dataKey="completion_tokens" name={t("th.output")} stroke="url(#gradPurple)" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    );
  }

  // 调用量模式：单 Y 轴
  return (
    <ResponsiveContainer width="100%" height={320}>
      <LineChart data={data} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
        <XAxis dataKey="date" tickFormatter={formatDateLabel} tick={{ fontSize: 11 }} stroke="var(--chart-grid)" />
        <YAxis tickFormatter={(v) => formatTokens(v)} tick={{ fontSize: 11 }} stroke="var(--chart-grid)" />
        <Tooltip
          contentStyle={tooltipStyle}
          labelFormatter={(label) => {
            const d = new Date(String(label));
            return locale === "zh"
              ? `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`
              : d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
          }}
          formatter={(value, name) => [
            formatTokens(Number(value)),
            name === t("th.calls") ? t("th.calls") : String(name),
          ]}
        />
        <Legend />
        <Line type="monotone" dataKey="calls" name={t("th.calls")} stroke="var(--accent)" strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}