┌─────────────────────────────────────────────────────────────┐
│                    图表组件层 (Chart Components)              │
│  UserStatisticsChart / RateLimitEventsChart / LaneChart    │
├─────────────────────────────────────────────────────────────┤
│                    容器封装层 (ChartContainer)                │
│  ResponsiveContainer / 主题管理 / CSS 变量注入               │
├─────────────────────────────────────────────────────────────┤
│                    图表库层 (Recharts)                        │
│  AreaChart / LineChart / PieChart / ComposedChart          │
├─────────────────────────────────────────────────────────────┤
│                    数据转换层 (Server Actions)                │
│  原始数据 → ChartDataItem 格式转换                           │
├─────────────────────────────────────────────────────────────┤
│                    数据库聚合层 (PostgreSQL)                  │
│  generate_series CTEs / 时区感知查询 / 权限过滤              │
└─────────────────────────────────────────────────────────────┘

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode;
    icon?: React.ComponentType;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  );
};

const chartConfig = {
  p50: { label: "P50", color: "var(--chart-2)" },
  p95: { label: "P95", color: "var(--chart-4)" },
  p99: { label: "P99", color: "var(--chart-1)" },
} satisfies ChartConfig;

const USER_COLOR_PALETTE = [
  "var(--chart-1)", "var(--chart-2)", "var(--chart-3)",
  "var(--chart-4)", "var(--chart-5)",
  // ... 共 24 个颜色（5 个 CSS 变量 + 19 个 HSL 值）
  "hsl(295, 85%, 70%)",
] as const;

export type TimeRange = "today" | "7days" | "30days" | "thisMonth";

export interface TimeRangeConfig {
  label: string;
  key: TimeRange;
  resolution: "hour" | "day";
  description?: string;
}

export const TIME_RANGE_OPTIONS: TimeRangeConfig[] = [
  { label: "today", key: "today", resolution: "hour",
    description: "todayDescription" },
  { label: "7days", key: "7days", resolution: "day",
    description: "7daysDescription" },
  { label: "30days", key: "30days", resolution: "day",
    description: "30daysDescription" },
  { label: "thisMonth", key: "thisMonth", resolution: "day",
    description: "thisMonthDescription" },
];

export interface ChartDataItem {
  date: string;  // ISO 格式日期字符串
  [key: string]: string | number;  // 动态键: "user-1_cost", "user-1_calls"
}

export interface UserStatisticsData {
  chartData: ChartDataItem[];
  users: StatisticsUser[];
  timeRange: TimeRange;
  resolution: "hour" | "day";
  mode: "users" | "keys" | "mixed";
}

export interface StatisticsUser {
  id: number;
  name: string;
  dataKey: string;  // 格式: "user-{id}" 或 "key-{id}"
}

export type RateLimitType =
  | "rpm"
  | "usd_5h"
  | "usd_weekly"
  | "usd_monthly"
  | "usd_total"
  | "concurrent_sessions"
  | "daily_quota";

export interface RateLimitEventStats {
  total_events: number;
  events_by_type: Record<RateLimitType, number>;
  events_by_user: Record<number, number>;
  events_by_provider: Record<number, number>;
  events_timeline: EventTimeline[];
  avg_current_usage: number;
}

-- 今天（小时分辨率）
WITH hour_range AS (
  SELECT generate_series(
    DATE_TRUNC('day', TIMEZONE(${timezone}, NOW())),
    DATE_TRUNC('day', TIMEZONE(${timezone}, NOW())) + INTERVAL '23 hours',
    '1 hour'::interval
  ) AS hour
)

-- 7天/30天（天分辨率）
WITH date_range AS (
  SELECT generate_series(
    (CURRENT_TIMESTAMP AT TIME ZONE ${timezone})::date - INTERVAL '6 days',
    (CURRENT_TIMESTAMP AT TIME ZONE ${timezone})::date,
    '1 day'::interval
  )::date AS date
)

SELECT
  u.id AS user_id,
  u.name AS user_name,
  hr.hour,
  COUNT(mr.id) AS api_calls,
  COALESCE(SUM(mr.cost_usd), 0) AS total_cost
FROM users u
CROSS JOIN hour_range hr
LEFT JOIN message_request mr ON u.id = mr.user_id
  AND DATE_TRUNC('hour', mr.created_at AT TIME ZONE ${timezone}) = hr.hour
  AND mr.deleted_at IS NULL
  AND (mr.blocked_by IS NULL OR mr.blocked_by <> 'warmup')
WHERE u.deleted_at IS NULL
GROUP BY u.id, u.name, hr.hour
ORDER BY hour ASC, user_name ASC

// 时区感知的日期格式化
export function formatDate(
  date: Date | number | string,
  formatString: string,
  locale: string = "zh-CN",
  timezone?: string
): string {
  const dateObj = typeof date === "string" ? new Date(date) : date;
  const dateFnsLocale = getDateFnsLocale(locale);

  if (timezone) {
    return formatInTimeZone(dateObj, timezone, formatString, {
      locale: dateFnsLocale,
    });
  }
  return format(dateObj, formatString, { locale: dateFnsLocale });
}

// 使用 Decimal.js 防止浮点精度问题
const costDecimal = toDecimal(day[costKey]);
normalized[costKey] = costDecimal
  ? Number(costDecimal.toDecimalPlaces(6).toString())
  : 0;

if (chartData.length === 0) {
  return (
    <div className="flex items-center justify-center h-[300px]
                    text-muted-foreground">
      {t("noData")}
    </div>
  );
}

if (errorMessage.includes("numeric field overflow")) {
  return {
    ok: false,
    error: "数据金额过大，请检查数据库中的费用记录",
  };
}

const toggleUserSelection = (userId: number) => {
  setSelectedUserIds((prev) => {
    const next = new Set(prev);
    if (next.has(userId)) {
      if (next.size > 1) {  // 防止取消最后一个
        next.delete(userId);
      }
    } else {
      next.add(userId);
    }
    return next;
  });
};

const timeZone = useTimeZone() ?? "UTC";

{
  "timeRange": "today" | "7days" | "30days" | "thisMonth"
}

{
  "chartData": [
    { "date": "2024-01-01T00:00:00.000Z", "user-1_cost": 1.23,
      "user-1_calls": 100 }
  ],
  "users": [{ "id": 1, "name": "User1", "dataKey": "user-1" }],
  "timeRange": "today",
  "resolution": "hour",
  "mode": "users"
}

{
  "user_id?": number,
  "provider_id?": number,
  "limit_type?": RateLimitType,
  "start_time?": Date,
  "end_time?": Date
}