import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'

import { PerCaseStatsTable } from '../per-case-stats-table'

const columnDefs = [
  { key: 'pass', label: 'Pass', format: 'percent' as const },
  { key: 'count', label: 'Count', format: 'number' as const },
  { key: 'raw', label: 'Raw' },
]

describe('PerCaseStatsTable', () => {
  it('renders the empty state when rows is empty', () => {
    const { container, getByText } = render(
      <PerCaseStatsTable rows={[]} columnDefs={columnDefs} emptyMessage="Nothing yet." />
    )
    expect(container.querySelector('[data-slot="per-case-stats-table-empty"]')).toBeTruthy()
    expect(getByText('Nothing yet.')).toBeTruthy()
  })

  it('uses the default empty message when none is provided', () => {
    const { getByText } = render(<PerCaseStatsTable rows={[]} columnDefs={columnDefs} />)
    expect(getByText('No test cases yet.')).toBeTruthy()
  })

  it('renders one row per case with columns and the runs cell', () => {
    const { container, getAllByRole } = render(
      <PerCaseStatsTable
        rows={[
          { id: 'case-a', runs: 3, runsTotal: 10, columns: { pass: 0.5, count: 1234, raw: 7 } },
          { id: 'case-b', runs: 2, columns: { pass: 80, count: 5000, raw: 9 } },
        ]}
        columnDefs={columnDefs}
      />
    )
    expect(container.querySelector('[data-slot="per-case-stats-table"]')).toBeTruthy()
    const rows = getAllByRole('row')
    // 1 header row + 2 body rows
    expect(rows.length).toBe(3)
    expect(container.textContent).toContain('case-a')
    expect(container.textContent).toContain('3 / 10')
    expect(container.textContent).toContain('case-b')
    // case-b runs cell shows just `2` since runsTotal is omitted
    expect(container.textContent).toMatch(/case-b[\s\S]*?2/)
    // percent fractional, percent absolute, number locale-grouped
    expect(container.textContent).toContain('50.0%')
    expect(container.textContent).toContain('80.0%')
    expect(container.textContent).toContain('1,234')
    expect(container.textContent).toContain('5,000')
  })

  it('renders em dash for missing column values and missing runs', () => {
    const { container } = render(
      <PerCaseStatsTable
        rows={[{ id: 'case-x', columns: { pass: undefined, count: undefined, raw: undefined } }]}
        columnDefs={columnDefs}
      />
    )
    expect(container.textContent).toContain('—')
  })

  it('marks the current row with aria-current and data-current', () => {
    const { container } = render(
      <PerCaseStatsTable
        rows={[
          { id: 'a', columns: { pass: 1 } },
          { id: 'b', columns: { pass: 1 } },
        ]}
        columnDefs={[{ key: 'pass', label: 'Pass', format: 'percent' }]}
        currentId="b"
      />
    )
    const current = container.querySelector('[aria-current="true"]')
    expect(current).toBeTruthy()
    expect(current?.getAttribute('data-current')).toBe('true')
  })

  it('forwards className to the wrapper', () => {
    const { container } = render(
      <PerCaseStatsTable rows={[{ id: 'a', columns: {} }]} columnDefs={[]} className="custom-pcs" />
    )
    expect(container.querySelector('.custom-pcs')).toBeTruthy()
  })
})
