import { LocalMessage } from 'stream-chat'
import { describe, expect, it } from 'vitest'

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

import { MessageTag } from './MessageTag'

interface MockMessageOptions {
  metadata?: {
    custom_type?: 'MESSAGE_CHATBOT' | 'MESSAGE_PAID'
    amount_text?: string
  }
  text?: string
}

const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
  ({
    id: 'msg-1',
    text: options?.text ?? 'Hello world',
    type: 'regular',
    created_at: new Date(),
    updated_at: new Date(),
    metadata: options?.metadata,
  }) as LocalMessage

describe('MessageTag', () => {
  it('renders receiver chatbot text variant with DM Agent copy and icon first', () => {
    renderWithProviders(
      <MessageTag
        message={createMockMessage({
          metadata: { custom_type: 'MESSAGE_CHATBOT' },
        })}
      />
    )

    const indicator = screen.getByTestId('message-chatbot-indicator')
    expect(indicator).toHaveTextContent('Sent by AI Assistant')

    // icon first, then label
    expect(indicator.children[0].querySelector('svg')).not.toBeNull()
    expect(indicator.children[1]).toHaveTextContent('Sent by AI Assistant')
  })

  it('renders sender chatbot text variant with mirrored order', () => {
    renderWithProviders(
      <MessageTag
        message={createMockMessage({
          metadata: { custom_type: 'MESSAGE_CHATBOT' },
        })}
        isMyMessage
      />
    )

    const indicator = screen.getByTestId('message-chatbot-indicator')
    expect(indicator).toHaveTextContent('Sent by AI Assistant')

    // label first, then icon (mirrored)
    expect(indicator.children[0]).toHaveTextContent('Sent by AI Assistant')
    expect(indicator.children[1].querySelector('svg')).not.toBeNull()
  })

  it('renders sender attachment chatbot variant outside-footer copy', () => {
    renderWithProviders(
      <MessageTag
        message={createMockMessage({
          metadata: { custom_type: 'MESSAGE_CHATBOT' },
        })}
        hasAttachment
        isMyMessage
      />
    )

    const indicator = screen.getByTestId('message-chatbot-indicator')
    expect(indicator).toHaveTextContent('Sent with AI')

    // icon first, then label
    expect(indicator.children[0].querySelector('svg')).not.toBeNull()
    expect(indicator.children[1]).toHaveTextContent('Sent with AI')
  })

  it('renders the "Delivered with $X message" paid tag', () => {
    renderWithProviders(
      <MessageTag
        message={createMockMessage({
          metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
        })}
      />
    )

    const paidTag = screen.getByText('Delivered with $10.00 message')
    expect(paidTag.closest('.message-tag--paid')).not.toBeNull()
  })

  it('returns null for a paid message with no amount_text', () => {
    const { container } = renderWithProviders(
      <MessageTag
        message={createMockMessage({
          metadata: { custom_type: 'MESSAGE_PAID' },
        })}
      />
    )

    expect(container.firstChild).toBeNull()
  })

  it('returns null for non-custom messages', () => {
    const { container } = renderWithProviders(
      <MessageTag message={createMockMessage()} />
    )

    expect(container.firstChild).toBeNull()
  })
})