import { describe, expect, it, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { axe } from 'vitest-axe'
import { Checkbox } from './Checkbox'

describe('Checkbox', () => {
  it('exposes the checkbox role with an accessible name', () => {
    render(<Checkbox aria-label="Accept terms" />)
    expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeTruthy()
  })

  it('toggles checked on click and fires onCheckedChange', () => {
    const onCheckedChange = vi.fn()
    render(<Checkbox aria-label="Subscribe" onCheckedChange={onCheckedChange} />)
    fireEvent.click(screen.getByRole('checkbox', { name: 'Subscribe' }))
    expect(onCheckedChange).toHaveBeenCalledWith(true)
  })

  it('reflects indeterminate state as aria-checked="mixed" (edge)', () => {
    render(<Checkbox aria-label="Select all" checked="indeterminate" />)
    expect(screen.getByRole('checkbox', { name: 'Select all' }).getAttribute('aria-checked')).toBe('mixed')
  })

  it('renders no inline style (token-driven only)', () => {
    render(<Checkbox aria-label="Token" />)
    const checkbox = screen.getByRole('checkbox', { name: 'Token' })
    expect(checkbox.getAttribute('style')).toBeNull()
    expect(checkbox.className).toContain('data-[state=checked]:bg-[var(--mod-color-accent-9)]')
  })

  it('stays axe-clean for checkbox markup', async () => {
    const { container } = render(<Checkbox aria-label="Token" />)
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})