import { render, screen } from '@testing-library/react'
import { DashboardSkeleton } from '../DashboardSkeleton'
import { TableSkeleton } from '../TableSkeleton'

// ---------------------------------------------------------------------------
// DashboardSkeleton
// ---------------------------------------------------------------------------

describe('DashboardSkeleton', () => {
  it('renders 4 skeleton cards by default', () => {
    const { container } = render(<DashboardSkeleton />)
    // Each card is a direct child of the grid container
    const grid = container.firstChild as HTMLElement
    expect(grid.children).toHaveLength(4)
  })

  it('renders the specified number of cards', () => {
    const { container } = render(<DashboardSkeleton cards={3} />)
    const grid = container.firstChild as HTMLElement
    expect(grid.children).toHaveLength(3)
  })

  it('renders 0 cards when cards=0', () => {
    const { container } = render(<DashboardSkeleton cards={0} />)
    const grid = container.firstChild as HTMLElement
    expect(grid.children).toHaveLength(0)
  })

  it('renders animated pulse elements inside each card', () => {
    const { container } = render(<DashboardSkeleton cards={1} />)
    const pulseEls = container.querySelectorAll('.animate-pulse')
    // Each card has 4 pulse elements
    expect(pulseEls.length).toBe(4)
  })

  it('applies custom className to the grid', () => {
    const { container } = render(<DashboardSkeleton className="my-skeleton" />)
    expect(container.firstChild).toHaveClass('my-skeleton')
  })

  it('renders with 8 cards', () => {
    const { container } = render(<DashboardSkeleton cards={8} />)
    const grid = container.firstChild as HTMLElement
    expect(grid.children).toHaveLength(8)
  })
})

// ---------------------------------------------------------------------------
// TableSkeleton
// ---------------------------------------------------------------------------

describe('TableSkeleton', () => {
  it('renders a table', () => {
    render(<TableSkeleton />)
    expect(screen.getByRole('table')).toBeInTheDocument()
  })

  it('renders default 5 rows', () => {
    render(<TableSkeleton />)
    const rows = screen.getAllByRole('row')
    // 1 header row + 5 body rows
    expect(rows).toHaveLength(6)
  })

  it('renders the specified number of body rows', () => {
    render(<TableSkeleton rows={3} />)
    const rows = screen.getAllByRole('row')
    // 1 header row + 3 body rows
    expect(rows).toHaveLength(4)
  })

  it('renders default 4 columns in the header', () => {
    render(<TableSkeleton />)
    const headerCells = screen.getAllByRole('columnheader')
    expect(headerCells).toHaveLength(4)
  })

  it('renders the specified number of columns', () => {
    render(<TableSkeleton columns={6} />)
    const headerCells = screen.getAllByRole('columnheader')
    expect(headerCells).toHaveLength(6)
  })

  it('renders correct number of data cells (rows * columns)', () => {
    render(<TableSkeleton rows={3} columns={2} />)
    const cells = screen.getAllByRole('cell')
    expect(cells).toHaveLength(6)
  })

  it('renders animated pulse elements in header cells', () => {
    const { container } = render(<TableSkeleton columns={2} rows={0} />)
    const headerPulse = container.querySelectorAll('thead .animate-pulse')
    expect(headerPulse.length).toBe(2)
  })

  it('applies custom className to the container', () => {
    const { container } = render(<TableSkeleton className="my-table-skeleton" />)
    expect(container.firstChild).toHaveClass('my-table-skeleton')
  })

  it('renders a header skeleton area above the table', () => {
    const { container } = render(<TableSkeleton />)
    // Header search/filter area has a border-b
    const headerArea = container.querySelector('.p-4.border-b')
    expect(headerArea).toBeInTheDocument()
  })

  it('renders a pagination skeleton area below the table', () => {
    const { container } = render(<TableSkeleton />)
    // Pagination area has border-t
    const paginationArea = container.querySelector('.p-4.border-t')
    expect(paginationArea).toBeInTheDocument()
  })
})