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

const mockProviders: Provider[] = [
  {
    id: 'openai',
    name: 'OpenAI',
    apiKey: 'sk-test',
    baseUrl: 'https://api.openai.com/v1',
    protocol: 'openai',
    enabled: true,
    createdAt: '2024-01-01T00:00:00Z',
    updatedAt: '2024-01-01T00:00:00Z',
  },
  {
    id: 'anthropic',
    name: 'Anthropic',
    apiKey: 'sk-ant-test',
    baseUrl: 'https://api.anthropic.com',
    protocol: 'anthropic',
    enabled: true,
    createdAt: '2024-01-02T00:00:00Z',
    updatedAt: '2024-01-02T00:00:00Z',
  },
]

const mockStats: UsageStats[] = [
  {
    id: 1,
    providerId: 'openai',
    modelName: 'gpt-4o',
    requestCount: 100,
    date: '2024-01-15',
  },
  {
    id: 2,
    providerId: 'anthropic',
    modelName: 'claude-3-opus',
    requestCount: 50,
    date: '2024-01-15',
  },
]

const defaultProps = {
  providers: mockProviders,
  stats: mockStats,
  loading: false,
  providerId: undefined,
  modelName: undefined,
  dateRange: null,
  onProviderIdChange: vi.fn(),
  onModelNameChange: vi.fn(),
  onDateRangeChange: vi.fn(),
}

describe('StatsTable', () => {
  it('renders stats table with data', () => {
    render(<StatsTable {...defaultProps} />)

    expect(screen.getByText('gpt-4o')).toBeInTheDocument()
    expect(screen.getByText('claude-3-opus')).toBeInTheDocument()
    const dateCells = screen.getAllByText('2024-01-15')
    expect(dateCells.length).toBe(2)
    expect(screen.getByText('100')).toBeInTheDocument()
    expect(screen.getByText('50')).toBeInTheDocument()
  })

  it('shows provider name from providers prop instead of providerId', () => {
    render(<StatsTable {...defaultProps} />)

    expect(screen.getByText('OpenAI')).toBeInTheDocument()
    const allAnthropic = screen.getAllByText('Anthropic')
    expect(allAnthropic.length).toBeGreaterThanOrEqual(1)
  })

  it('renders filter controls with Select, Input, and DatePicker', () => {
    const { container } = render(<StatsTable {...defaultProps} />)

    // TDesign Select component
    const selects = document.querySelectorAll('.t-select')
    expect(selects.length).toBeGreaterThanOrEqual(1)

    const modelInput = screen.getByPlaceholderText('模型名称')
    expect(modelInput).toBeInTheDocument()

    // TDesign Select placeholder is shown in the input
    const selectInput = document.querySelector('.t-select .t-input__inner')
    expect(selectInput).toBeInTheDocument()

    // TDesign DateRangePicker - could be .t-date-picker or .t-range-input
    const rangePicker = container.querySelector('.t-date-picker') || container.querySelector('.t-range-input')
    expect(rangePicker).toBeInTheDocument()
  })

  it('renders table headers correctly', () => {
    render(<StatsTable {...defaultProps} />)

    expect(screen.getAllByText('供应商').length).toBeGreaterThanOrEqual(1)
    expect(screen.getAllByText('模型').length).toBeGreaterThanOrEqual(1)
    expect(screen.getAllByText('日期').length).toBeGreaterThanOrEqual(1)
    expect(screen.getAllByText('请求数').length).toBeGreaterThanOrEqual(1)
  })

  it('falls back to providerId when provider not found in providers prop', () => {
    const limitedProviders = [mockProviders[0]]
    render(<StatsTable {...defaultProps} providers={limitedProviders} />)

    expect(screen.getByText('OpenAI')).toBeInTheDocument()
    expect(screen.getByText('anthropic')).toBeInTheDocument()
  })

  it('renders with empty stats data', () => {
    render(<StatsTable {...defaultProps} stats={[]} />)

    expect(screen.getAllByText('供应商').length).toBeGreaterThanOrEqual(1)
    expect(screen.getAllByText('模型').length).toBeGreaterThanOrEqual(1)
  })

  it('shows loading state', () => {
    const { container } = render(<StatsTable {...defaultProps} loading={true} />)
    // TDesign Table loading indicator - could be .t-table__loading or .t-loading
    const loadingElement = container.querySelector('.t-table__loading') || container.querySelector('.t-loading')
    expect(loadingElement).toBeInTheDocument()
  })

  it('shows custom empty text when stats data is empty', () => {
    render(<StatsTable {...defaultProps} stats={[]} />)
    expect(screen.getByText('暂无统计数据')).toBeInTheDocument()
  })
})
