import { describe, it, expect, beforeEach, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import { MarkdownRenderer } from '@/components/markdown-renderer'
import { registerRuntimeFlags, resetFlagsCache } from '@/lib/flags'

// Mock the useFlags hook
vi.mock('@/lib/use-flags', () => ({
  useFlags: () => ({ flags: { IMAGE_UPLOADS_ENABLED: true, DIFF_TOOL_ENABLED: true }, isLoading: false, error: null }),
}))

describe('MarkdownRenderer', () => {
  beforeEach(() => {
    resetFlagsCache()
  })

  it('renders basic markdown content', () => {
    render(<MarkdownRenderer content="Hello **world**" />)
    expect(screen.getByText(/Hello/)).toBeInTheDocument()
    expect(screen.getByText(/world/)).toBeInTheDocument()
  })

  it('renders code blocks', () => {
    const content = '```javascript\nconst x = 1\n```'
    render(<MarkdownRenderer content={content} />)
    const codeElement = screen.getByText(/const x = 1/)
    expect(codeElement).toBeInTheDocument()
  })

  it('renders inline code', () => {
    render(<MarkdownRenderer content="Use `console.log()` to debug" />)
    expect(screen.getByText('console.log()')).toBeInTheDocument()
  })

  it('renders lists', () => {
    const content = '- Item 1\n- Item 2\n- Item 3'
    render(<MarkdownRenderer content={content} />)
    expect(screen.getByText('Item 1')).toBeInTheDocument()
    expect(screen.getByText('Item 2')).toBeInTheDocument()
    expect(screen.getByText('Item 3')).toBeInTheDocument()
  })

  it('renders links', () => {
    const content = '[Click here](https://example.com)'
    render(<MarkdownRenderer content={content} />)
    const link = screen.getByRole('link', { name: 'Click here' })
    expect(link).toHaveAttribute('href', 'https://example.com')
    expect(link).toHaveAttribute('target', '_blank')
  })

  it('renders blockquotes', () => {
    const content = '> This is a quote'
    render(<MarkdownRenderer content={content} />)
    expect(screen.getByText(/This is a quote/)).toBeInTheDocument()
  })

  it('renders tables', () => {
    const content = `
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
    `
    render(<MarkdownRenderer content={content} />)
    expect(screen.getByText('Header 1')).toBeInTheDocument()
    expect(screen.getByText('Header 2')).toBeInTheDocument()
    expect(screen.getByText('Cell 1')).toBeInTheDocument()
    expect(screen.getByText('Cell 2')).toBeInTheDocument()
  })
})