import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Table from '../src/components/Table/Table.vue'

const columns = [
  { key: 'name', title: 'Name', align: 'left' as const },
  { key: 'role', title: 'Role', align: 'center' as const },
  { key: 'status', title: 'Status', align: 'right' as const },
]
const data = [
  { name: 'Alice', role: 'Admin', status: 'Active' },
  { name: 'Bob', role: 'Editor', status: 'Inactive' },
]

describe('Table', () => {
  it('renders a <table> element', () => {
    const wrapper = mount(Table, { props: { columns, data } })
    expect(wrapper.element.tagName).toBe('TABLE')
  })

  it('renders column titles in thead', () => {
    const wrapper = mount(Table, { props: { columns, data } })
    const headers = wrapper.findAll('thead th')
    expect(headers).toHaveLength(3)
    expect(headers[0].text()).toBe('Name')
    expect(headers[1].text()).toBe('Role')
    expect(headers[2].text()).toBe('Status')
  })

  it('renders one row per data item in tbody', () => {
    const wrapper = mount(Table, { props: { columns, data } })
    expect(wrapper.findAll('tbody tr')).toHaveLength(2)
  })

  it('renders correct cell values in each row', () => {
    const wrapper = mount(Table, { props: { columns, data } })
    const firstRowCells = wrapper.findAll('tbody tr')[0].findAll('td')
    expect(firstRowCells[0].text()).toBe('Alice')
    expect(firstRowCells[1].text()).toBe('Admin')
    expect(firstRowCells[2].text()).toBe('Active')
  })

  it('applies alignment class to header cells', () => {
    const wrapper = mount(Table, { props: { columns, data } })
    const headers = wrapper.findAll('thead th')
    expect(headers[0].classes()).toContain('tbl-cell--left')
    expect(headers[1].classes()).toContain('tbl-cell--center')
    expect(headers[2].classes()).toContain('tbl-cell--right')
  })

  it('applies alignment class to body cells', () => {
    const wrapper = mount(Table, { props: { columns, data } })
    const cells = wrapper.findAll('tbody tr')[0].findAll('td')
    expect(cells[0].classes()).toContain('tbl-cell--left')
    expect(cells[1].classes()).toContain('tbl-cell--center')
    expect(cells[2].classes()).toContain('tbl-cell--right')
  })

  it('renders empty tbody when data is empty', () => {
    const wrapper = mount(Table, { props: { columns, data: [] } })
    expect(wrapper.findAll('tbody tr')).toHaveLength(0)
  })

  it('applies striped class when striped prop is true', () => {
    const wrapper = mount(Table, { props: { columns, data, striped: true } })
    expect(wrapper.classes()).toContain('tbl--striped')
  })

  it('defaults to left alignment when align is not specified', () => {
    const colsNoAlign = [{ key: 'name', title: 'Name' }]
    const wrapper = mount(Table, { props: { columns: colsNoAlign, data: [{ name: 'Alice' }] } })
    expect(wrapper.find('thead th').classes()).toContain('tbl-cell--left')
  })
})