import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { DataTable } from './DataTable'

const columns = [
  { key: 'name', header: 'Name' },
  { key: 'status', header: 'Status' },
]

const data = [
  { id: '1', name: 'Route A', status: 'ok' },
  { id: '2', name: 'Route B', status: 'error' },
  { id: '3', name: 'Route C', status: 'ok' },
]

describe('DataTable', () => {
  it('renders column headers', () => {
    render(<DataTable columns={columns} data={data} />)
    expect(screen.getByText('Name')).toBeInTheDocument()
    expect(screen.getByText('Status')).toBeInTheDocument()
  })

  it('renders all data rows', () => {
    render(<DataTable columns={columns} data={data} />)
    expect(screen.getByText('Route A')).toBeInTheDocument()
    expect(screen.getByText('Route C')).toBeInTheDocument()
  })

  it('calls onRowClick when a row is clicked', async () => {
    const onRowClick = vi.fn()
    const user = userEvent.setup()
    render(<DataTable columns={columns} data={data} onRowClick={onRowClick} />)
    await user.click(screen.getByText('Route B'))
    expect(onRowClick).toHaveBeenCalledWith(data[1])
  })

  it('highlights selected row', () => {
    const { container } = render(
      <DataTable columns={columns} data={data} selectedId="2" />,
    )
    const rows = container.querySelectorAll('tbody tr')
    expect(rows[1]).toHaveClass('selected')
  })

  it('sorts when header clicked', async () => {
    const user = userEvent.setup()
    render(
      <DataTable
        columns={[{ key: 'name', header: 'Name', sortable: true }, ...columns.slice(1)]}
        data={data}
        sortable
      />,
    )
    await user.click(screen.getByText('Name'))
    expect(screen.getByText('Name').closest('th')).toHaveAttribute('aria-sort')
  })

  it('applies error accent class when rowAccent returns error', () => {
    const { container } = render(
      <DataTable
        columns={columns}
        data={data}
        rowAccent={(row) => (row.status === 'error' ? 'error' : undefined)}
      />,
    )
    const rows = container.querySelectorAll('tbody tr')
    expect(rows[1]).toHaveClass('accentError')
  })

  it('shows expanded content when row is clicked with expandedContent', async () => {
    const user = userEvent.setup()
    render(
      <DataTable
        columns={columns}
        data={data}
        expandedContent={(row) =>
          row.status === 'error' ? <div>Error details</div> : null
        }
      />,
    )
    await user.click(screen.getByText('Route B'))
    expect(screen.getByText('Error details')).toBeInTheDocument()
  })

  it('shows pagination info', () => {
    render(<DataTable columns={columns} data={data} pageSize={25} />)
    expect(screen.getByText(/1–3 of 3/)).toBeInTheDocument()
  })

  it('paginates data when pageSize is smaller than data length', () => {
    const manyRows = Array.from({ length: 30 }, (_, i) => ({
      id: String(i),
      name: `Row ${i}`,
      status: 'ok',
    }))
    render(<DataTable columns={columns} data={manyRows} pageSize={10} />)
    expect(screen.getByText(/1–10 of 30/)).toBeInTheDocument()
    expect(screen.queryByText('Row 10')).not.toBeInTheDocument()
  })
})
