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

describe('Checkbox', () => {
  it('labels the control and reports the toggled state', () => {
    const onCheckedChange = vi.fn()
    render(<Checkbox label="Unsafe" checked={false} onCheckedChange={onCheckedChange} />)

    const box = screen.getByRole('checkbox', { name: 'Unsafe' })
    expect(box).not.toBeChecked()
    fireEvent.click(box)
    expect(onCheckedChange).toHaveBeenCalledWith(true)
  })

  it('carries its warning as visible text linked by aria-describedby, not colour alone', () => {
    render(
      <Checkbox
        label="Unsafe"
        checked
        onCheckedChange={vi.fn()}
        hint="Runs the CLI in its registered bypass mode for this attempt."
      />,
    )
    const box = screen.getByRole('checkbox', { name: 'Unsafe' })
    expect(box).toBeChecked()
    const describedId = box.getAttribute('aria-describedby')
    expect(document.getElementById(describedId!)?.textContent).toBe(
      'Runs the CLI in its registered bypass mode for this attempt.',
    )
  })

  it('links its error text and marks the field invalid', () => {
    render(<Checkbox label="Unsafe" checked={false} onCheckedChange={vi.fn()} error="This CLI has no safe mode." />)
    const box = screen.getByRole('checkbox', { name: 'Unsafe' })
    expect(box).toHaveAttribute('aria-invalid', 'true')
    const describedId = box.getAttribute('aria-describedby')
    expect(document.getElementById(describedId!)?.textContent).toBe('This CLI has no safe mode.')
  })
})