import React from 'react'
import { describe, expect, it } from 'vitest'

import { renderWithProviders, screen } from '../../test/utils'

import MessageBubble from '.'

describe('MessageBubble', () => {
  it('renders the message text', () => {
    renderWithProviders(<MessageBubble.Sent text="Hello there" />)
    expect(screen.getByText('Hello there')).toBeInTheDocument()
  })

  it('preserves newlines with whitespace-pre-wrap', () => {
    renderWithProviders(<MessageBubble.Sent text={'line one\nline two'} />)
    const paragraph = screen.getByText(/line one/)
    expect(paragraph.textContent).toBe('line one\nline two')
    expect(paragraph.className).toContain('whitespace-pre-wrap')
  })

  it('draws the tail by default and omits it when tail is false', () => {
    const { rerender } = renderWithProviders(
      <MessageBubble.Sent text="tailed" />
    )
    // The bubble box wraps the text; its last child is the tail <span>.
    const bubble = screen.getByText('tailed').parentElement as HTMLElement
    expect(bubble.querySelector('span[aria-hidden="true"]')).not.toBeNull()

    rerender(<MessageBubble.Sent text="tailed" tail={false} />)
    const bubbleNoTail = screen.getByText('tailed').parentElement as HTMLElement
    expect(bubbleNoTail.querySelector('span[aria-hidden="true"]')).toBeNull()
  })

  it('renders the optional header on the received variant', () => {
    renderWithProviders(
      <MessageBubble.Received header="Brie" text="How much for a feature?" />
    )
    expect(screen.getByTestId('message-bubble-header')).toHaveTextContent(
      'Brie'
    )
  })

  it('does not render a header slot when no header is provided', () => {
    renderWithProviders(<MessageBubble.Received text="no header" />)
    expect(screen.queryByTestId('message-bubble-header')).toBeNull()
  })

  it('applies the sent and received surface treatments from theme vars', () => {
    const { rerender } = renderWithProviders(<MessageBubble.Sent text="mine" />)
    const sent = screen.getByText('mine').parentElement as HTMLElement
    expect(sent.style.backgroundColor).toBe(
      'var(--str-chat__own-message-bubble-background-color, #1e2330)'
    )

    rerender(<MessageBubble.Received text="theirs" />)
    const received = screen.getByText('theirs').parentElement as HTMLElement
    expect(received.style.backgroundColor).toBe(
      'var(--str-chat__message-bubble-background-color, #f1f0ee)'
    )
  })

  it('masks message content from session replay by default', () => {
    renderWithProviders(<MessageBubble.Received header="Brie" text="secret" />)
    const bubble = screen.getByText('secret').parentElement as HTMLElement
    expect(bubble.getAttribute('data-dd-privacy')).toBe('mask')
  })

  it('forwards width/className onto the bubble box (width is caller-controlled)', () => {
    renderWithProviders(
      <MessageBubble.Sent text="wide" className="w-fit max-w-[520px]" />
    )
    const bubble = screen.getByText('wide').parentElement as HTMLElement
    expect(bubble.classList.contains('w-fit')).toBe(true)
    expect(bubble.className).toContain('max-w-[520px]')
  })
})