import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ChatBubble } from './chat-bubble';

describe('ChatBubble', () => {
  it('renders user message correctly', () => {
    const { container } = render(
      <ChatBubble
        role="user"
        content="Hello world"
      />
    );
    expect(screen.getByText('Hello world')).toBeInTheDocument();
    // Check for user-specific classes (ShadCN primary color usually implies dark text on light or vice versa depending on theme, but we check justification)
    expect(container.querySelector('.justify-end')).toBeInTheDocument();
    expect(container.querySelector('.bg-primary')).toBeInTheDocument();
  });

  it('renders assistant message correctly', () => {
    const { container } = render(
      <ChatBubble
        role="assistant"
        content="AI response"
      />
    );
    expect(screen.getByText('AI response')).toBeInTheDocument();
    expect(container.querySelector('.justify-start')).toBeInTheDocument();
    expect(container.querySelector('.bg-card')).toBeInTheDocument();
  });

  it('renders system message correctly', () => {
    // System isn't explicitly handled differently in class logic other than being treated as "not user" (so left aligned), 
    // but let's verify it renders.
    render(
      <ChatBubble
        role="system"
        content="System message"
      />
    );
    expect(screen.getByText('System message')).toBeInTheDocument();
  });

  it('renders markdown code blocks', () => {
    const { container } = render(
      <ChatBubble
        role="assistant"
        content={"Check this code:\n\n```\nconst x = 1;\n```"}
      />
    );
    expect(screen.getByText('const x = 1;')).toBeInTheDocument();
    // Check for pre tag
    expect(container.querySelector('pre')).toBeInTheDocument();
  });

  it('handles non-string content gracefully', () => {
    // Imitate the bug where content is an object (cast to any to bypass TS)
    const badContent = { foo: 'bar' } as any;

    // This should NOT throw "Unexpected value" error
    render(
      <ChatBubble
        role="assistant"
        content={badContent}
      />
    );

    // It should render "[object Object]" literally
    expect(screen.getByText('[object Object]')).toBeInTheDocument();
  });
});
