import { act } from 'react';
import { createRoot } from 'react-dom/client';
import { Bubble } from '@ant-design/x';
import { afterEach, describe, expect, it } from 'vitest';
import { aiBubbleRoles } from './AiChatDrawer';
import type { AiChatMessage } from './types';

let container: HTMLDivElement | null = null;
let root: ReturnType<typeof createRoot> | null = null;

afterEach(async () => {
  if (root) await act(async () => root?.unmount());
  container?.remove();
  root = null;
  container = null;
});

describe('AI chat bubble rendering', () => {
  it('renders a structured user message instead of passing the object to React', async () => {
    const message: AiChatMessage = {
      role: 'user',
      content: '查询今天的系统概览',
      reasoningContent: '',
      toolRuns: [],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(
        <Bubble.List
          role={aiBubbleRoles}
          items={[{ key: 'user-1', role: 'user', status: 'local', content: message }]}
        />,
      );
    });

    expect(container.textContent).toContain('查询今天的系统概览');
  });
});