import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { LogViewer, type LogEntry } from './LogViewer'

const entries: LogEntry[] = [
  { timestamp: '2024-01-15T10:30:00Z', level: 'info', message: 'Server started' },
  { timestamp: '2024-01-15T10:30:05Z', level: 'warn', message: 'High memory usage' },
  { timestamp: '2024-01-15T10:30:10Z', level: 'error', message: 'Connection failed' },
  { timestamp: '2024-01-15T10:30:15Z', level: 'debug', message: 'Query executed in 3ms' },
  { timestamp: '2024-01-15T10:30:20Z', level: 'trace', message: 'Entering handleRequest()' },
]

describe('LogViewer', () => {
  it('renders entries with timestamps and messages', () => {
    render(<LogViewer entries={entries} />)
    expect(screen.getByText('Server started')).toBeInTheDocument()
    expect(screen.getByText('High memory usage')).toBeInTheDocument()
    expect(screen.getByText('Connection failed')).toBeInTheDocument()
    expect(screen.getByText('Query executed in 3ms')).toBeInTheDocument()
    expect(screen.getByText('Entering handleRequest()')).toBeInTheDocument()
  })

  it('renders level badges with correct text (INFO, WARN, ERROR, DEBUG, TRACE)', () => {
    render(<LogViewer entries={entries} />)
    expect(screen.getByText('INFO')).toBeInTheDocument()
    expect(screen.getByText('WARN')).toBeInTheDocument()
    expect(screen.getByText('ERROR')).toBeInTheDocument()
    expect(screen.getByText('DEBUG')).toBeInTheDocument()
    expect(screen.getByText('TRACE')).toBeInTheDocument()
  })

  it('renders with custom maxHeight (number)', () => {
    const { container } = render(<LogViewer entries={entries} maxHeight={300} />)
    const el = container.firstElementChild as HTMLElement
    expect(el.style.maxHeight).toBe('300px')
  })

  it('renders with string maxHeight', () => {
    const { container } = render(<LogViewer entries={entries} maxHeight="50vh" />)
    const el = container.firstElementChild as HTMLElement
    expect(el.style.maxHeight).toBe('50vh')
  })

  it('handles empty entries', () => {
    render(<LogViewer entries={[]} />)
    expect(screen.getByText('No log entries.')).toBeInTheDocument()
  })

  it('accepts className prop', () => {
    const { container } = render(<LogViewer entries={entries} className="custom-class" />)
    const el = container.firstElementChild as HTMLElement
    expect(el.classList.contains('custom-class')).toBe(true)
  })

  it('has role="log" for accessibility', () => {
    render(<LogViewer entries={entries} />)
    expect(screen.getByRole('log')).toBeInTheDocument()
  })
})
