// @vitest-environment happy-dom
import { describe, expect, it, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import { StatusBadge } from '../../components/ui/StatusBadge.js'
import { FilterPill } from '../../components/ui/FilterPill.js'
import { StatPill } from '../../components/ui/StatPill.js'

describe('StatusBadge', () => {
  it('renders the label with a leading dot by default', () => {
    const { container } = render(<StatusBadge tone="success">Published</StatusBadge>)
    expect(screen.getByText('Published')).toBeTruthy()
    expect(container.querySelectorAll('[aria-hidden]')).toHaveLength(1)
  })
  it('omits the dot when dot={false}', () => {
    const { container } = render(
      <StatusBadge tone="neutral" dot={false}>
        Draft
      </StatusBadge>,
    )
    expect(container.querySelectorAll('[aria-hidden]')).toHaveLength(0)
  })
  it('forwards aria-label for screen readers', () => {
    const { container } = render(
      <StatusBadge tone="warning" aria-label="Status: Scheduled">
        Scheduled
      </StatusBadge>,
    )
    expect(container.querySelector('[aria-label="Status: Scheduled"]')).toBeTruthy()
  })
})

describe('FilterPill', () => {
  it('exposes active state via aria-pressed and fires onClick', () => {
    const onClick = vi.fn()
    render(
      <FilterPill active onClick={onClick}>
        All
      </FilterPill>,
    )
    const btn = screen.getByRole('button', { name: 'All' })
    expect(btn.getAttribute('aria-pressed')).toBe('true')
    btn.click()
    expect(onClick).toHaveBeenCalledTimes(1)
  })
  it('renders an optional count', () => {
    render(<FilterPill count={12}>Admin</FilterPill>)
    expect(screen.getByText('12')).toBeTruthy()
    expect(screen.getByRole('button', { name: /Admin/ }).getAttribute('aria-pressed')).toBe('false')
  })
})

describe('StatPill', () => {
  it('renders value and label', () => {
    render(<StatPill value={8} label="Active" />)
    expect(screen.getByText('8')).toBeTruthy()
    expect(screen.getByText('Active')).toBeTruthy()
  })
})
