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

const TABS = [
  { label: 'Users', value: 'users' },
  { label: 'Groups', value: 'groups', count: 4 },
  { label: 'Roles', value: 'roles' },
]

describe('SegmentedTabs', () => {
  it('renders all tabs', () => {
    render(<SegmentedTabs tabs={TABS} active="users" onChange={vi.fn()} />)
    expect(screen.getByRole('tab', { name: /Users/ })).toBeInTheDocument()
    expect(screen.getByRole('tab', { name: /Groups/ })).toBeInTheDocument()
    expect(screen.getByRole('tab', { name: /Roles/ })).toBeInTheDocument()
  })

  it('marks the active tab with aria-selected', () => {
    render(<SegmentedTabs tabs={TABS} active="groups" onChange={vi.fn()} />)
    expect(screen.getByRole('tab', { name: /Groups/ })).toHaveAttribute('aria-selected', 'true')
    expect(screen.getByRole('tab', { name: /Users/ })).toHaveAttribute('aria-selected', 'false')
  })

  it('calls onChange when a tab is clicked', async () => {
    const onChange = vi.fn()
    const user = userEvent.setup()
    render(<SegmentedTabs tabs={TABS} active="users" onChange={onChange} />)
    await user.click(screen.getByRole('tab', { name: /Roles/ }))
    expect(onChange).toHaveBeenCalledWith('roles')
  })

  it('renders count badge when provided', () => {
    render(<SegmentedTabs tabs={TABS} active="users" onChange={vi.fn()} />)
    expect(screen.getByText('4')).toBeInTheDocument()
  })

  it('has tablist role on container', () => {
    render(<SegmentedTabs tabs={TABS} active="users" onChange={vi.fn()} />)
    expect(screen.getByRole('tablist')).toBeInTheDocument()
  })
})
