import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import MessageBubble from './MessageBubble';
import type { TicketMessage } from '@/services/tickets/types';

const base: TicketMessage = {
  id: 1,
  ticketId: 10,
  body: 'سلام، ساعت ویزیت را تغییر دهید',
  authorRole: 'admin',
  createdAt: '2026-07-01T10:00:00Z',
  isMine: false,
  sendStatus: 'sent',
};

function renderBubble(overrides: Partial<TicketMessage>) {
  return render(
    <ThemeProvider>
      <MessageBubble
        message={{ ...base, ...overrides }}
        authorLabel="پشتیبانی"
        timeLabel="۱۰:۰۰"
        sendingLabel="در حال ارسال…"
      />
    </ThemeProvider>,
  );
}

describe('<MessageBubble/> component', () => {
  it("aligns others' messages to the start and shows the author label + time", () => {
    renderBubble({ isMine: false });
    expect(screen.getByTestId('message-bubble')).toHaveAttribute('data-mine', 'false');
    expect(screen.getByText('پشتیبانی')).toBeInTheDocument();
    expect(screen.getByText('سلام، ساعت ویزیت را تغییر دهید')).toBeInTheDocument();
    expect(screen.getByText('۱۰:۰۰')).toBeInTheDocument();
  });

  it('marks my messages as mine and never shows an author label', () => {
    renderBubble({ isMine: true });
    expect(screen.getByTestId('message-bubble')).toHaveAttribute('data-mine', 'true');
    expect(screen.queryByText('پشتیبانی')).not.toBeInTheDocument();
  });

  it('shows the sending label (not the time) while a message is pending', () => {
    renderBubble({ isMine: true, id: null, clientMessageId: 'c1', sendStatus: 'sending' });
    expect(screen.getByText('در حال ارسال…')).toBeInTheDocument();
    expect(screen.queryByText('۱۰:۰۰')).not.toBeInTheDocument();
  });
});
