import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';

jest.mock('next-intl', () => ({ useTranslations: () => (k: string) => k, useLocale: () => 'en' }));

import AdminMessageBubble from './AdminMessageBubble';
import type { AdminTicketMessage } from '@/services/tickets/types';

const baseMsg: AdminTicketMessage = {
  id: 1,
  ticketId: 12,
  body: 'hello there',
  authorRole: 'admin',
  createdAt: '2026-01-01T00:00:00Z',
  isMine: true,
  isInternal: false,
  sendStatus: 'sent',
};

describe('<AdminMessageBubble/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);

  it('renders the body and author label', () => {
    const { container } = wrap(<AdminMessageBubble message={baseMsg} authorLabel="Support" />);
    expect(screen.getByText('hello there')).toBeInTheDocument();
    expect(screen.getByText('Support')).toBeInTheDocument();
    expect(container.querySelector('[data-internal="false"]')).toBeInTheDocument();
  });

  it('marks an internal note distinctly with the internal badge', () => {
    const { container } = wrap(
      <AdminMessageBubble message={{ ...baseMsg, isInternal: true }} authorLabel="Support" />,
    );
    expect(container.querySelector('[data-internal="true"]')).toBeInTheDocument();
    expect(screen.getByText('ticket_internal_badge')).toBeInTheDocument();
  });
});