import { render, screen, fireEvent } from '@testing-library/react'
import { ErrorState } from '../states/ErrorState'
import { EmptyState } from '../states/EmptyState'

describe('ErrorState', () => {
  it('renders title and message', () => {
    render(<ErrorState message="Something broke" />)
    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
    expect(screen.getByText('Something broke')).toBeInTheDocument()
  })

  it('renders custom title', () => {
    render(<ErrorState title="Custom Error" message="Details here" />)
    expect(screen.getByText('Custom Error')).toBeInTheDocument()
  })

  it('renders with role="alert" and aria-live', () => {
    const { container } = render(<ErrorState message="Error occurred" />)
    const alertEl = container.querySelector('[role="alert"]')
    expect(alertEl).toBeInTheDocument()
    expect(alertEl).toHaveAttribute('aria-live', 'assertive')
  })

  it('renders retry button when onRetry is provided', () => {
    const onRetry = jest.fn()
    render(<ErrorState message="Failed" onRetry={onRetry} />)

    const retryButton = screen.getByLabelText('Retry loading content')
    expect(retryButton).toBeInTheDocument()

    fireEvent.click(retryButton)
    expect(onRetry).toHaveBeenCalledTimes(1)
  })

  it('does not render retry button without onRetry', () => {
    render(<ErrorState message="Failed" />)
    expect(screen.queryByText('Try Again')).not.toBeInTheDocument()
  })

  it('applies custom className', () => {
    const { container } = render(
      <ErrorState message="Error" className="custom-class" />
    )
    expect(container.firstChild).toHaveClass('custom-class')
  })
})

describe('EmptyState', () => {
  it('renders title', () => {
    render(<EmptyState title="No items" />)
    expect(screen.getByText('No items')).toBeInTheDocument()
  })

  it('renders description when provided', () => {
    render(
      <EmptyState title="No items" description="Add some items to get started" />
    )
    expect(screen.getByText('Add some items to get started')).toBeInTheDocument()
  })

  it('does not render description when not provided', () => {
    const { container } = render(<EmptyState title="No items" />)
    const paragraphs = container.querySelectorAll('p')
    expect(paragraphs).toHaveLength(0)
  })

  it('renders action button when action is provided', () => {
    const onClick = jest.fn()
    render(
      <EmptyState
        title="No items"
        action={{ label: 'Add Item', onClick }}
      />
    )

    const button = screen.getByLabelText('Add Item')
    expect(button).toBeInTheDocument()

    fireEvent.click(button)
    expect(onClick).toHaveBeenCalledTimes(1)
  })

  it('does not render action button without action', () => {
    render(<EmptyState title="No items" />)
    expect(screen.queryByRole('button')).not.toBeInTheDocument()
  })

  it('has role="status" and aria-live="polite"', () => {
    const { container } = render(<EmptyState title="Empty" />)
    const statusEl = container.querySelector('[role="status"]')
    expect(statusEl).toBeInTheDocument()
    expect(statusEl).toHaveAttribute('aria-live', 'polite')
  })
})