import React from 'react'
import { render, screen } from '@testing-library/react'
import { KeywordsDisplay } from '../../components/KeywordsDisplay'

describe('KeywordsDisplay', () => {
  it('returns null when keywords empty and not loading', () => {
    const { container } = render(<KeywordsDisplay keywords={[]} isLoading={false} />)
    expect(container).toBeEmptyDOMElement()
  })

  it('returns null when keywords is undefined and not loading', () => {
    const { container } = render(<KeywordsDisplay keywords={undefined} isLoading={false} />)
    expect(container).toBeEmptyDOMElement()
  })

  it('shows loading skeletons when isLoading is true', () => {
    render(<KeywordsDisplay keywords={[]} isLoading={true} />)
    
    // Check for 3 animated placeholder pills
    const skeletons = screen.getAllByTestId('keyword-skeleton')
    expect(skeletons).toHaveLength(3)
    
    // Check that they have the animate-pulse class
    skeletons.forEach((skeleton) => {
      expect(skeleton).toHaveClass('animate-pulse')
    })
  })

  it('renders keyword chips when keywords provided', () => {
    const keywords = ['RAG', 'retrieval', 'question answering']
    render(<KeywordsDisplay keywords={keywords} isLoading={false} />)
    
    // Check that all keywords are rendered
    expect(screen.getByText('RAG')).toBeInTheDocument()
    expect(screen.getByText('retrieval')).toBeInTheDocument()
    expect(screen.getByText('question answering')).toBeInTheDocument()
    
    // Check that chips have the correct styling
    const chips = screen.getAllByRole('listitem')
    chips.forEach((chip) => {
      expect(chip).toHaveClass('inline-block', 'rounded-full', 'px-3', 'py-1', 'text-sm', 'font-medium', 'bg-blue-100', 'text-blue-800')
    })
  })

  it('shows "Extracted Keywords" label', () => {
    const keywords = ['test']
    render(<KeywordsDisplay keywords={keywords} isLoading={false} />)
    
    const label = screen.getByText(/extracted keywords:/i)
    expect(label).toBeInTheDocument()
    expect(label).toHaveClass('text-xs', 'text-gray-500', 'uppercase', 'tracking-wide')
  })

  it('renders chips in a flex container with flex-wrap', () => {
    const keywords = ['keyword1', 'keyword2', 'keyword3']
    render(<KeywordsDisplay keywords={keywords} isLoading={false} />)
    
    const container = screen.getByTestId('keywords-section')
    expect(container).toBeInTheDocument()
    
    const innerContainer = screen.getByTestId('keywords-container')
    expect(innerContainer).toHaveClass('flex', 'flex-wrap')
  })

  it('has smooth transition classes on keywords section', () => {
    const keywords = ['test']
    render(<KeywordsDisplay keywords={keywords} isLoading={false} />)
    
    const section = screen.getByTestId('keywords-section')
    expect(section).toHaveClass('transition-all', 'duration-300', 'ease-in-out')
  })

  it('renders each keyword chip with mr-2 mb-2 spacing', () => {
    const keywords = ['keyword1', 'keyword2']
    render(<KeywordsDisplay keywords={keywords} isLoading={false} />)
    
    const chips = screen.getAllByRole('listitem')
    chips.forEach((chip) => {
      expect(chip).toHaveClass('mr-2', 'mb-2')
    })
  })

  it('does not render loading state when keywords are provided', () => {
    const keywords = ['test']
    render(<KeywordsDisplay keywords={keywords} isLoading={false} />)
    
    const skeletons = screen.queryAllByTestId('keyword-skeleton')
    expect(skeletons).toHaveLength(0)
  })
})
