import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Alert } from './Alert'

describe('Alert', () => {
  it('renders children', () => {
    render(<Alert>Something went wrong</Alert>)
    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
  })

  it('renders title when provided', () => {
    render(<Alert title="Heads up">Body text</Alert>)
    expect(screen.getByText('Heads up')).toBeInTheDocument()
    expect(screen.getByText('Body text')).toBeInTheDocument()
  })

  it('renders without title', () => {
    render(<Alert>Just a message</Alert>)
    expect(screen.getByText('Just a message')).toBeInTheDocument()
  })

  it('uses role="alert" for error variant', () => {
    render(<Alert variant="error">Error message</Alert>)
    expect(screen.getByRole('alert')).toBeInTheDocument()
  })

  it('uses role="alert" for warning variant', () => {
    render(<Alert variant="warning">Warning message</Alert>)
    expect(screen.getByRole('alert')).toBeInTheDocument()
  })

  it('uses role="status" for info variant', () => {
    render(<Alert variant="info">Info message</Alert>)
    expect(screen.getByRole('status')).toBeInTheDocument()
  })

  it('uses role="status" for success variant', () => {
    render(<Alert variant="success">Success message</Alert>)
    expect(screen.getByRole('status')).toBeInTheDocument()
  })

  it('defaults to info variant (role="status")', () => {
    render(<Alert>Default alert</Alert>)
    expect(screen.getByRole('status')).toBeInTheDocument()
  })

  it('shows default icon for each variant', () => {
    const { container, rerender } = render(<Alert variant="info">msg</Alert>)
    // Each variant should render an SVG icon in the icon slot
    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()

    rerender(<Alert variant="success">msg</Alert>)
    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()

    rerender(<Alert variant="warning">msg</Alert>)
    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()

    rerender(<Alert variant="error">msg</Alert>)
    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('renders a custom icon when provided', () => {
    render(<Alert icon={<span data-testid="custom-icon">★</span>}>Custom icon alert</Alert>)
    expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
  })

  it('does not show dismiss button when dismissible is false', () => {
    render(<Alert>Non-dismissible</Alert>)
    expect(screen.queryByRole('button', { name: /dismiss/i })).not.toBeInTheDocument()
  })

  it('shows dismiss button when dismissible is true', () => {
    render(<Alert dismissible>Dismissible alert</Alert>)
    expect(screen.getByRole('button', { name: /dismiss/i })).toBeInTheDocument()
  })

  it('calls onDismiss when dismiss button is clicked', async () => {
    const onDismiss = vi.fn()
    render(
      <Alert dismissible onDismiss={onDismiss}>
        Dismissible alert
      </Alert>,
    )
    const user = userEvent.setup()
    await user.click(screen.getByRole('button', { name: /dismiss/i }))
    expect(onDismiss).toHaveBeenCalledTimes(1)
  })

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

  it('applies the correct variant class', () => {
    const { container } = render(<Alert variant="error">Error</Alert>)
    expect(container.firstChild).toHaveClass('error')
  })
})
