import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'

import type { AdminChatMessage } from '@/services/adminChat'

import AdminMessageBubble from './AdminMessageBubble'

vi.mock('@/app/(dashboard)/chat-oversight/[id]/_components/ChatImagePreviewModal', () => ({
  default: ({ imageUrl, isOpen }: { imageUrl: string | null; isOpen: boolean }) =>
    isOpen ? <div data-testid="image-preview">{imageUrl}</div> : null,
}))

const message: AdminChatMessage = {
  id: 'message-1',
  conversationId: 'conversation-1',
  senderId: 'user-1',
  senderMobile: '09121234567',
  senderFirstName: 'سارا',
  senderLastName: 'احمدی',
  senderAvatarUrl: null,
  senderGender: 'female',
  body: 'سلام، این یک پیام آزمایشی است.',
  imageUrl: 'https://example.com/message.jpg',
  createdAt: '2026-08-01T12:30:00.000Z',
}

describe('AdminMessageBubble', () => {
  it('shows oversight identity and opens the shared image preview', () => {
    render(
      <AdminMessageBubble
        isClusterEnd
        isClusterStart
        showAvatar
        showSenderName
        message={message}
        side="primary"
      />
    )

    expect(screen.getByText('سارا احمدی')).toBeInTheDocument()
    expect(screen.getByText('سلام، این یک پیام آزمایشی است.')).toBeInTheDocument()
    expect(screen.getByText(/0912/)).toBeInTheDocument()
    expect(screen.queryByTestId('image-preview')).not.toBeInTheDocument()

    fireEvent.click(screen.getByRole('button', { name: 'مشاهده تصویر' }))

    expect(screen.getByTestId('image-preview')).toHaveTextContent(message.imageUrl ?? '')
  })
})