import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { UsageChart } from '@/pages/Stats/UsageChart';
import type { UsageStats } from '@/types';

// Mock Recharts components
vi.mock('recharts', () => ({
  ResponsiveContainer: vi.fn(({ children }) => <div data-testid="mock-chart-container">{children}</div>),
  LineChart: vi.fn(() => <div data-testid="mock-line-chart" />),
  Line: vi.fn(() => null),
  XAxis: vi.fn(() => null),
  YAxis: vi.fn(() => null),
  CartesianGrid: vi.fn(() => null),
  Tooltip: vi.fn(() => null),
}));

const mockStats: UsageStats[] = [
  {
    id: 1,
    providerId: 'openai',
    modelName: 'gpt-4o',
    requestCount: 100,
    date: '2024-01-01',
  },
  {
    id: 2,
    providerId: 'openai',
    modelName: 'gpt-3.5-turbo',
    requestCount: 200,
    date: '2024-01-01',
  },
  {
    id: 3,
    providerId: 'anthropic',
    modelName: 'claude-3',
    requestCount: 150,
    date: '2024-01-02',
  },
];

describe('UsageChart', () => {
  it('renders chart title', () => {
    render(<UsageChart stats={mockStats} />);

    expect(screen.getByText('请求趋势')).toBeInTheDocument();
  });

  it('renders with data', () => {
    const { container } = render(<UsageChart stats={mockStats} />);

    // TDesign Card component
    expect(container.querySelector('.t-card')).toBeInTheDocument();
    // Mocked chart container
    expect(screen.getByTestId('mock-chart-container')).toBeInTheDocument();
  });

  it('renders empty state when no data', () => {
    render(<UsageChart stats={[]} />);

    expect(screen.getByText('暂无数据')).toBeInTheDocument();
  });

  it('aggregates data by date correctly', () => {
    const { container } = render(<UsageChart stats={mockStats} />);

    // TDesign Card component
    expect(container.querySelector('.t-card')).toBeInTheDocument();
    // Mocked chart should render
    expect(screen.getByTestId('mock-chart-container')).toBeInTheDocument();
  });
});