import { describe, test, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Title } from './title'

describe('Title', () => {
  test('renders with string children', () => {
    render(<Title>Test Title</Title>)
    expect(screen.getByText('Test Title')).toBeTruthy()
  })

  test('renders with ReactNode children', () => {
    render(
      <Title>
        <span>Complex</span> <strong>Title</strong>
      </Title>,
    )
    expect(screen.getByText('Complex')).toBeTruthy()
    expect(screen.getByText('Title')).toBeTruthy()
  })

  test('renders with custom label', () => {
    render(<Title label='Custom Label'>Display Text</Title>)
    // The component should render the children
    expect(screen.getByText('Display Text')).toBeTruthy()
  })

  test('uses children as tooltip when children is string and no label', () => {
    render(<Title>String Title</Title>)
    expect(screen.getByText('String Title')).toBeTruthy()
  })

  test('uses empty string tooltip when children is not string and no label', () => {
    render(
      <Title>
        <div>Complex Title</div>
      </Title>,
    )
    expect(screen.getByText('Complex Title')).toBeTruthy()
  })

  test('applies correct typography variant', () => {
    render(<Title>Test Title</Title>)
    const typography = screen.getByText('Test Title')
    expect(typography.tagName).toBe('H6') // subtitle1 renders as h6
  })

  test('wraps content in SmartTooltip', () => {
    render(<Title>Tooltip Title</Title>)
    expect(screen.getByText('Tooltip Title')).toBeTruthy()
  })

  test('handles empty string children', () => {
    render(<Title>{''}</Title>)
    // Should render but be empty
    const { container } = render(<Title>{''}</Title>)
    expect(container).toBeTruthy()
  })

  test('handles numeric children', () => {
    render(<Title>{123}</Title>)
    expect(screen.getByText('123')).toBeTruthy()
  })

  test('renders with multiple children', () => {
    render(
      <Title>
        <span>Part 1</span>
        <span>Part 2</span>
        <span>Part 3</span>
      </Title>,
    )
    expect(screen.getByText('Part 1')).toBeTruthy()
    expect(screen.getByText('Part 2')).toBeTruthy()
    expect(screen.getByText('Part 3')).toBeTruthy()
  })

  test('prefers label over string children for tooltip', () => {
    render(<Title label='Tooltip Text'>Display Text</Title>)
    expect(screen.getByText('Display Text')).toBeTruthy()
  })

  test('renders with undefined label and string children', () => {
    render(<Title label={undefined}>String Children</Title>)
    expect(screen.getByText('String Children')).toBeTruthy()
  })

  test('handles complex nested structure', () => {
    render(
      <Title>
        <div>
          <span>Nested</span>
          <div>Content</div>
        </div>
      </Title>,
    )
    expect(screen.getByText('Nested')).toBeTruthy()
    expect(screen.getByText('Content')).toBeTruthy()
  })

  test('ref is passed to Typography component', () => {
    const { container } = render(<Title>Title with Ref</Title>)
    expect(screen.getByText('Title with Ref')).toBeTruthy()
    // The Typography component should be in the DOM
    const typography = container.querySelector('[class*="MuiTypography"]')
    expect(typography).toBeTruthy()
  })

  test('renders with textTransform none', () => {
    render(<Title>Title Text</Title>)
    expect(screen.getByText('Title Text')).toBeTruthy()
  })

  test('handles boolean children', () => {
    render(<Title>{true}</Title>)
    // Boolean children don't render text
    const { container } = render(<Title>{false}</Title>)
    expect(container).toBeTruthy()
  })

  test('handles null children', () => {
    render(<Title>{null}</Title>)
    // Null children don't render
    const { container } = render(<Title>{null}</Title>)
    expect(container).toBeTruthy()
  })
})