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

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

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

import ChatTimelineStatusRow from '../ChatTimelineStatusRow.vue';

describe('ChatTimelineStatusRow', () => {
  it('uses shimmer text while running and static text after done', async () => {
    const item: ChatTimelineStatusItem = {
      id: 'knowledge-retrieval',
      label: '正在检索知识库',
      status: 'running',
      statusKey: 'knowledge-retrieval',
      type: 'status',
    };
    const wrapper = mount(ChatTimelineStatusRow, {
      props: { item },
    });

    expect(wrapper.text()).toContain('正在检索知识库');
    expect(wrapper.find('.chat-timeline-status-row__line').exists()).toBe(false);
    expect(wrapper.find('.chat-timeline-status-row__icon').exists()).toBe(true);
    expect(wrapper.find('.chat-shimmer-text').classes()).toContain('is-active');

    await wrapper.setProps({
      item: {
        ...item,
        label: '已检索知识库',
        status: 'done',
      },
    });

    expect(wrapper.text()).toContain('已检索知识库');
    expect(wrapper.find('.chat-shimmer-text').classes()).not.toContain('is-active');
  });

  it('renders memory compression status as a separator row', () => {
    const item: ChatTimelineStatusItem = {
      id: 'memory-compression',
      label: '正在整理上下文',
      presentation: 'separator',
      status: 'running',
      statusKey: 'memory-compression',
      type: 'status',
    };
    const wrapper = mount(ChatTimelineStatusRow, {
      props: { item },
    });

    expect(wrapper.classes()).toContain('is-separator');
    expect(wrapper.text()).toContain('正在整理上下文');
    expect(wrapper.findAll('.chat-timeline-status-row__line')).toHaveLength(2);
    expect(wrapper.find('.chat-timeline-status-row__content').exists()).toBe(true);
    expect(wrapper.find('.chat-timeline-status-row__icon').exists()).toBe(true);
    expect(wrapper.find('.chat-shimmer-text').classes()).toContain('is-active');
  });

  it('uses the shared event label style', () => {
    const item: ChatTimelineStatusItem = {
      id: 'knowledge-retrieval',
      label: '已检索知识库',
      status: 'done',
      statusKey: 'knowledge-retrieval',
      type: 'status',
    };
    const wrapper = mount(ChatTimelineStatusRow, {
      props: { item },
    });

    expect(wrapper.find('.chat-event-label').exists()).toBe(true);
    expect(wrapper.find('.chat-timeline-status-row__icon').exists()).toBe(true);
    expect(wrapper.find('.chat-shimmer-text').classes()).not.toContain('is-active');
  });
});
