import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import ErrorDisplay from '../ErrorDisplay'

describe('ErrorDisplay', () => {
    describe('error message rendering', () => {
        it('renders error string message', () => {
            render(<ErrorDisplay error="Test error message" />)
            expect(screen.getByText('Test error message')).toBeInTheDocument()
        })

        it('renders Error object message', () => {
            const error = new Error('Error object message')
            render(<ErrorDisplay error={error} />)
            expect(screen.getByText('Error object message')).toBeInTheDocument()
        })

        it('renders default title', () => {
            render(<ErrorDisplay error="Test error" />)
            expect(screen.getByText('Error')).toBeInTheDocument()
        })

        it('renders custom title', () => {
            render(<ErrorDisplay error="Test error" title="Custom Error Title" />)
            expect(screen.getByText('Custom Error Title')).toBeInTheDocument()
        })
    })

    describe('retry functionality', () => {
        it('does not show retry button when onRetry is not provided', () => {
            render(<ErrorDisplay error="Test error" />)
            expect(screen.queryByText('Retry')).not.toBeInTheDocument()
        })

        it('shows retry button when onRetry is provided', () => {
            const onRetry = vi.fn()
            render(<ErrorDisplay error="Test error" onRetry={onRetry} />)
            expect(screen.getByText('Retry')).toBeInTheDocument()
        })

        it('calls onRetry when retry button is clicked', () => {
            const onRetry = vi.fn()
            render(<ErrorDisplay error="Test error" onRetry={onRetry} />)

            fireEvent.click(screen.getByText('Retry'))

            expect(onRetry).toHaveBeenCalledTimes(1)
        })
    })

    describe('technical details', () => {
        it('shows technical details section for Error object with stack', () => {
            const error = new Error('Error with stack')
            render(<ErrorDisplay error={error} />)

            expect(screen.getByText('Technical Details')).toBeInTheDocument()
        })

        it('does not show technical details for string errors', () => {
            render(<ErrorDisplay error="String error" />)

            expect(screen.queryByText('Technical Details')).not.toBeInTheDocument()
        })
    })
})
