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

const defaultProps = {
  open: true,
  onClose: vi.fn(),
  onConfirm: vi.fn(),
  title: 'Delete item',
  description: 'This action cannot be undone.',
}

describe('AlertDialog', () => {
  it('renders title and description when open', () => {
    render(<AlertDialog {...defaultProps} />)
    expect(screen.getByText('Delete item')).toBeInTheDocument()
    expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument()
  })

  it('does not render when closed', () => {
    render(<AlertDialog {...defaultProps} open={false} />)
    expect(screen.queryByText('Delete item')).not.toBeInTheDocument()
    expect(screen.queryByText('This action cannot be undone.')).not.toBeInTheDocument()
  })

  it('renders default button labels', () => {
    render(<AlertDialog {...defaultProps} />)
    expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
  })

  it('renders custom button labels', () => {
    render(<AlertDialog {...defaultProps} confirmLabel="Yes, delete" cancelLabel="No, keep" />)
    expect(screen.getByRole('button', { name: 'Yes, delete' })).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'No, keep' })).toBeInTheDocument()
  })

  it('calls onConfirm when confirm button is clicked', async () => {
    const onConfirm = vi.fn()
    const user = userEvent.setup()
    render(<AlertDialog {...defaultProps} onConfirm={onConfirm} />)
    await user.click(screen.getByRole('button', { name: 'Confirm' }))
    expect(onConfirm).toHaveBeenCalledOnce()
  })

  it('calls onClose when cancel button is clicked', async () => {
    const onClose = vi.fn()
    const user = userEvent.setup()
    render(<AlertDialog {...defaultProps} onClose={onClose} />)
    await user.click(screen.getByRole('button', { name: 'Cancel' }))
    expect(onClose).toHaveBeenCalledOnce()
  })

  it('calls onClose when Esc is pressed', async () => {
    const onClose = vi.fn()
    const user = userEvent.setup()
    render(<AlertDialog {...defaultProps} onClose={onClose} />)
    await user.keyboard('{Escape}')
    expect(onClose).toHaveBeenCalled()
  })

  it('disables both buttons when loading', () => {
    render(<AlertDialog {...defaultProps} loading />)
    const buttons = screen.getAllByRole('button')
    // Both cancel and confirm should be disabled
    for (const btn of buttons) {
      expect(btn).toBeDisabled()
    }
  })

  it('auto-focuses cancel button on open', async () => {
    render(<AlertDialog {...defaultProps} />)
    await waitFor(() => {
      expect(screen.getByRole('button', { name: 'Cancel' })).toHaveFocus()
    })
  })

  it('renders danger variant icon', () => {
    render(<AlertDialog {...defaultProps} variant="danger" />)
    expect(document.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('renders warning variant icon', () => {
    render(<AlertDialog {...defaultProps} variant="warning" />)
    expect(document.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('renders info variant icon', () => {
    render(<AlertDialog {...defaultProps} variant="info" />)
    expect(document.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })
})
