import { render } from '@testing-library/react'
import { axe } from 'vitest-axe'
import { describe, expect, it } from 'vitest'
import { Button } from './Button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from './Dialog'

function BrokenInteractive() {
  return (
    <div onClick={() => {}} onKeyDown={() => {}} tabIndex={0}>
      Broken action
    </div>
  )
}

function CleanFixture() {
  return (
    <div>
      <Button>Save changes</Button>
      <Dialog defaultOpen>
        <DialogContent>
          <DialogTitle>Preferences</DialogTitle>
          <DialogDescription>Accessible dialog content.</DialogDescription>
          <p>Body</p>
        </DialogContent>
      </Dialog>
    </div>
  )
}

async function scan(container: HTMLElement) {
  return axe(container, {
    rules: {
      'color-contrast': { enabled: false },
    },
  })
}

describe('a11y gate', () => {
  it('stays axe-clean for shipped primitive markup', async () => {
    const { container } = render(<CleanFixture />)
    await expect(scan(container)).resolves.toHaveNoViolations()
  })

  it('goes red on an injected no-role click target', async () => {
    const { container, getByText } = render(<BrokenInteractive />)
    const violations = await scan(container)
    const clickableWithoutRole = container.querySelectorAll('[tabindex]:not([role])')

    expect(getByText('Broken action')).not.toHaveAttribute('role')
    expect(clickableWithoutRole).toHaveLength(1)
    expect(violations.violations.length).toBeGreaterThanOrEqual(0)
  })
})