import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { BrowserRouter } from 'react-router-dom'
import { EmptyState } from '../EmptyState'
import { FlowIllustration } from '../EmptyStateIllustrations'

function renderWithRouter(ui: React.ReactElement) {
  return render(<BrowserRouter>{ui}</BrowserRouter>)
}

describe('EmptyState', () => {
  it('renders title and description', () => {
    renderWithRouter(
      <EmptyState
        title="No items found"
        description="Try adjusting your filters."
      />
    )

    expect(screen.getByText('No items found')).toBeInTheDocument()
    expect(screen.getByText('Try adjusting your filters.')).toBeInTheDocument()
  })

  it('renders illustration when provided', () => {
    const { container } = renderWithRouter(
      <EmptyState
        title="Empty"
        illustration={<FlowIllustration />}
      />
    )

    const svg = container.querySelector('svg')
    expect(svg).toBeInTheDocument()
  })

  it('renders action button', () => {
    renderWithRouter(
      <EmptyState
        title="No data"
        action={<button>Create New</button>}
      />
    )

    expect(screen.getByRole('button', { name: 'Create New' })).toBeInTheDocument()
  })

  it('renders learn more link with correct href', () => {
    renderWithRouter(
      <EmptyState
        title="Get started"
        learnMoreLink="/guides/creating-flows"
      />
    )

    const link = screen.getByText(/Learn more/i)
    expect(link).toBeInTheDocument()
    expect(link).toHaveAttribute('href', '/guides/creating-flows')
  })

  it('renders custom learn more text', () => {
    renderWithRouter(
      <EmptyState
        title="Get started"
        learnMoreLink="/guides/test"
        learnMoreText="View guide"
      />
    )

    expect(screen.getByText(/View guide/i)).toBeInTheDocument()
  })

  it('renders without optional props', () => {
    renderWithRouter(<EmptyState title="Just a title" />)

    expect(screen.getByText('Just a title')).toBeInTheDocument()
    expect(screen.queryByRole('button')).not.toBeInTheDocument()
    expect(screen.queryByRole('link')).not.toBeInTheDocument()
  })

  it('prefers illustration over icon when both provided', () => {
    const { container } = renderWithRouter(
      <EmptyState
        title="Test"
        icon={<span data-testid="icon">icon</span>}
        illustration={<FlowIllustration />}
      />
    )

    expect(container.querySelector('svg')).toBeInTheDocument()
    expect(screen.queryByTestId('icon')).not.toBeInTheDocument()
  })
})
