import { mount } from '@vue/test-utils';
import Antd from 'ant-design-vue';
import { describe, expect, it } from 'vitest';

import DocumentFieldList from '../../src/components/DocumentFieldList.vue';
import type { OfficeContentControl } from '../../src/onlyoffice/types';

const controls: OfficeContentControl[] = [
  { Alias: '样品编号', ControlType: 'text', InternalId: 'single-1', Tag: 'eln.field.sample_id' },
  { Alias: '检测结果', ControlType: 'dropdown', InternalId: 'repeat-1', Tag: 'eln.repeat.results.row_01.value' },
  { Alias: '', InternalId: 'other-1', Tag: 'custom.control' },
  { InternalId: '', Tag: '' },
];

function mountList(props: { controls?: OfficeContentControl[]; disabled?: boolean; status?: 'initializing' | 'ready' | 'working' | 'error' } = {}) {
  return mount(DocumentFieldList, {
    props: { controls: props.controls ?? [], status: props.status ?? 'ready', disabled: props.disabled },
    global: { plugins: [Antd] },
  });
}

describe('DocumentFieldList', () => {
  it('为空列表提供摘要和明确空状态', () => {
    const wrapper = mountList();

    expect(wrapper.get('[data-test="control-summary"]').text()).toBe('控件 0，普通 0，表格 0');
    expect(wrapper.get('[data-test="empty-controls"]').text()).toBe('当前文档没有内容控件');
  });

  it.each(['initializing', 'working', 'error'] as const)('%s 且列表为空时不下空文档结论', (status) => {
    const wrapper = mountList({ status });

    expect(wrapper.find('[data-test="empty-controls"]').exists()).toBe(false);
    expect(wrapper.find('[data-test="empty-search-result"]').exists()).toBe(false);
  });

  it('按 Tag 分类并显示字段位置、具体类型与精确摘要', () => {
    const wrapper = mountList({ controls });

    expect(wrapper.get('[data-test="control-summary"]').text()).toBe('控件 4，普通 1，表格 1');
    const metadata = wrapper.findAll('[data-test="control-metadata"]').map((item) => item.text());
    expect(metadata).toEqual(['sample_id · 单行文本', '重复表格 · results · row_01 · value · 下拉选择', '非 ELN 内容控件', '非 ELN 内容控件']);
    expect(wrapper.get('[data-test="control-list"]').attributes('role')).toBe('list');
  });

  it('显示五种具体类型并为缺失类型的 ELN 控件提供兜底', () => {
    const typedControls: OfficeContentControl[] = [
      { Alias: '文本', ControlType: 'text', InternalId: '1', Tag: 'eln.field.text' },
      { Alias: '下拉', ControlType: 'dropdown', InternalId: '2', Tag: 'eln.field.dropdown' },
      { Alias: '复选', ControlType: 'checkbox', InternalId: '3', Tag: 'eln.field.checkbox' },
      { Alias: '日期', ControlType: 'date', InternalId: '4', Tag: 'eln.field.date' },
      { Alias: '多行', ControlType: 'multiline', InternalId: '5', Tag: 'eln.field.multiline' },
      { Alias: '旧字段', InternalId: '6', Tag: 'eln.field.legacy' },
    ];

    const wrapper = mountList({ controls: typedControls });

    expect(wrapper.findAll('[data-test="control-metadata"]').map((item) => item.text())).toEqual([
      'text · 单行文本',
      'dropdown · 下拉选择',
      'checkbox · 复选框',
      'date · 日期',
      'multiline · 多行文本',
      'legacy · 未知类型',
    ]);
  });

  it('显示 Alias/Tag fallback，缺少 InternalId 的项目不可定位', () => {
    const wrapper = mountList({ controls });
    const items = wrapper.findAll('[data-test="control-item"]');

    expect(items[0]!.text()).toContain('样品编号');
    expect(items[0]!.text()).toContain('eln.field.sample_id');
    expect(items[2]!.text()).toContain('未命名字段 3');
    expect(items[3]!.text()).toContain('未命名字段 4');
    expect(items[3]!.text()).toContain('无 Tag');
    expect(items[3]!.attributes('disabled')).toBeDefined();
  });

  it.each([
    ['名称', '样品编号', ['样品编号']],
    ['完整 Tag', 'ELN.FIELD.SAMPLE_ID', ['样品编号']],
    ['重复组编码', 'RESULTS', ['检测结果']],
    ['重复行 ID', 'ROW_01', ['检测结果']],
    ['重复字段编码', 'VALUE', ['检测结果']],
    ['具体类型', '下拉选择', ['检测结果']],
  ])('按%s进行不区分大小写的包含搜索', async (_label, keyword, expectedAliases) => {
    const wrapper = mountList({ controls });

    await wrapper.get('[data-test="field-search"]').setValue(keyword);

    expect(wrapper.findAll('[data-test="control-item"]').map((item) => item.text())).toEqual(
      expectedAliases.map((alias) => expect.stringContaining(alias)),
    );
    expect(wrapper.get('[data-test="control-summary"]').text()).toBe('控件 4，普通 1，表格 1');
  });

  it('有内容控件但搜索无匹配时显示明确空状态', async () => {
    const wrapper = mountList({ controls });

    await wrapper.get('[data-test="field-search"]').setValue('不存在的字段');

    expect(wrapper.find('[data-test="control-list"]').exists()).toBe(false);
    expect(wrapper.get('[data-test="empty-search-result"]').text()).toBe('没有匹配的文档字段');
  });

  it('点击项目只发出 select，disabled 时所有项目不可定位', async () => {
    const wrapper = mountList({ controls });

    await wrapper.findAll('[data-test="control-item"]')[1]!.trigger('click');
    expect(wrapper.emitted('select')).toEqual([['repeat-1']]);

    await wrapper.setProps({ disabled: true });
    expect(wrapper.findAll('[data-test="control-item"]').every((item) => item.attributes('disabled') !== undefined)).toBe(true);
  });

  it('只为 ELN 字段提供解除确认，确认后只发出 delete', async () => {
    const wrapper = mountList({ controls });
    const deletes = wrapper.findAll('[data-test="delete-control"]');

    expect(deletes).toHaveLength(2);
    expect(deletes[0]!.attributes()).toMatchObject({ 'aria-label': '解除标注：样品编号', title: '解除标注' });
    const confirms = wrapper.findAllComponents({ name: 'APopconfirm' });
    expect(confirms[0]!.props()).toMatchObject({ title: '解除该字段标注并保留内容？', okText: '解除', cancelText: '取消' });

    confirms[0]!.vm.$emit('confirm');
    await wrapper.vm.$nextTick();
    expect(wrapper.emitted('delete')).toEqual([['single-1']]);
    expect(wrapper.emitted('select')).toBeUndefined();
  });

  it('disabled 和 working 时禁用删除入口', async () => {
    const wrapper = mountList({ controls, disabled: true });
    expect(wrapper.findAll('[data-test="delete-control"]').every((button) => button.attributes('disabled') !== undefined)).toBe(true);

    await wrapper.setProps({ disabled: false, status: 'working' });
    expect(wrapper.findAll('[data-test="delete-control"]').every((button) => button.attributes('disabled') !== undefined)).toBe(true);
  });

  it('刷新按钮有稳定标识，working 和 disabled 时禁用且只发出 refresh', async () => {
    const wrapper = mountList({ controls });
    const refresh = wrapper.get('[data-test="refresh-controls"]');

    expect(refresh.attributes()).toMatchObject({ 'aria-label': '刷新内容控件', title: '刷新内容控件' });
    await refresh.trigger('click');
    expect(wrapper.emitted('refresh')).toHaveLength(1);

    await wrapper.setProps({ status: 'working' });
    expect(wrapper.get('[data-test="refresh-controls"]').attributes('disabled')).toBeDefined();
    await wrapper.setProps({ status: 'ready', disabled: true });
    expect(wrapper.get('[data-test="refresh-controls"]').attributes('disabled')).toBeDefined();
  });
});