import type { ChatTimelineItem } from '../types';

import { mount } from '@vue/test-utils';

import { describe, expect, it } from 'vitest';

import { defaultAssistantAvatar } from '../assistantAvatar';
import ChatTimeline from '../ChatTimeline.vue';

function assistantMessage(): Extract<ChatTimelineItem, { type: 'message' }> {
  return {
    id: 'assistant-message',
    parts: [{ content: '已完成', id: 'text-1', type: 'text' }],
    role: 'assistant',
    type: 'message',
  };
}

describe('chat timeline assistant avatar', () => {
  it('renders the configured assistant identity in the empty state', () => {
    const wrapper = mount(ChatTimeline, {
      props: {
        assistantAvatar: '/assistant.svg',
        emptyTitle: '数据查询',
        emptyText: '输入问题开始运行',
        items: [],
      },
    });

    expect(wrapper.find('.chat-timeline__empty-title').text()).toBe('数据查询');
    expect(
      wrapper.find('.chat-timeline__empty-icon img').attributes('src'),
    ).toBe('/assistant.svg');
  });

  it('renders the assistant avatar only next to assistant messages', () => {
    const wrapper = mount(ChatTimeline, {
      props: {
        assistantAvatar: '/assistant.svg',
        items: [
          {
            id: 'user-message',
            parts: [{ content: '你好', id: 'text-2', type: 'text' }],
            role: 'user',
            type: 'message',
          },
          assistantMessage(),
        ],
      },
    });

    expect(
      wrapper.findAll('.chat-timeline-item__assistant-avatar'),
    ).toHaveLength(1);
    expect(
      wrapper
        .find('.chat-timeline-item__assistant-avatar img')
        .attributes('src'),
    ).toBe('/assistant.svg');
  });

  it('renders the assistant avatar beside inline running statuses', () => {
    const wrapper = mount(ChatTimeline, {
      props: {
        assistantAvatar: '/assistant.svg',
        items: [
          {
            id: 'running-status',
            label: '正在运行 · 大模型',
            status: 'running',
            statusKey: 'workflow-running',
            type: 'status',
          },
        ],
      },
    });

    expect(
      wrapper.findAll(
        '.chat-timeline-item__status-row .chat-timeline-item__assistant-avatar',
      ),
    ).toHaveLength(1);
    expect(
      wrapper.find('.chat-timeline-item__status-row img').attributes('src'),
    ).toBe('/assistant.svg');
  });

  it('keeps separator statuses unchanged', () => {
    const wrapper = mount(ChatTimeline, {
      props: {
        assistantAvatar: '/assistant.svg',
        items: [
          {
            id: 'separator-status',
            label: '今天',
            presentation: 'separator',
            status: 'done',
            statusKey: 'date-separator',
            type: 'status',
          },
        ],
      },
    });

    expect(
      wrapper.find('.chat-timeline-item__status-row').classes(),
    ).not.toContain('has-assistant-avatar');
    expect(
      wrapper.findAll('.chat-timeline-item__assistant-avatar'),
    ).toHaveLength(0);
  });

  it('falls back to the bundled avatar when a custom image cannot load', async () => {
    const wrapper = mount(ChatTimeline, {
      props: {
        assistantAvatar: '/broken-avatar.svg',
        items: [assistantMessage()],
      },
    });

    await wrapper
      .find('.chat-timeline-item__assistant-avatar img')
      .trigger('error');

    expect(
      wrapper
        .find('.chat-timeline-item__assistant-avatar img')
        .attributes('src'),
    ).toBe(defaultAssistantAvatar);
  });
});
