import { render, screen } from '@testing-library/react'
import { RecordDetail, type RecordField } from '../RecordDetail'

const fields: RecordField[] = [
  { label: 'url', value: 'https://example.com/a', kind: 'url' },
  { label: 'source', value: 'The National', kind: 'text' },
  { label: 'content', value: 'Para one.\nPara two.', kind: 'longtext' },
  { label: 'empty', value: '', kind: 'text' },
]

describe('RecordDetail', () => {
  it('renders a url field as a new-tab clickable link', () => {
    render(<RecordDetail fields={fields} />)
    const link = screen.getByRole('link', { name: 'https://example.com/a' })
    expect(link).toHaveAttribute('href', 'https://example.com/a')
    expect(link).toHaveAttribute('target', '_blank')
    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'))
  })

  it('renders long-text as a newline-preserving prose block', () => {
    const { container } = render(<RecordDetail fields={fields} />)
    const prose = container.querySelector('.whitespace-pre-wrap')
    expect(prose).toBeInTheDocument()
    expect(prose?.textContent).toContain('Para one.')
    expect(prose?.textContent).toContain('Para two.')
  })

  it('skips empty fields', () => {
    render(<RecordDetail fields={fields} />)
    expect(screen.queryByText('empty')).not.toBeInTheDocument()
  })

  it('auto-links a text field whose value looks like a url', () => {
    render(<RecordDetail fields={[{ label: 'link', value: 'https://x.io', kind: 'text' }]} />)
    expect(screen.getByRole('link', { name: 'https://x.io' })).toBeInTheDocument()
  })

  it('shows the empty message when no field has a value', () => {
    render(<RecordDetail fields={[{ label: 'a', value: '' }]} emptyMessage="Nothing here" />)
    expect(screen.getByText('Nothing here')).toBeInTheDocument()
  })
})