import { mount, shallowMount } from '@vue/test-utils';
import { nextTick, reactive, watch } from 'vue';

import { Input as AInput } from 'ant-design-vue';
import { describe, expect, it, vi } from 'vitest';

import ParameterTable from '../ParameterTable.vue';
import tableSource from '../ParameterTable.vue?raw';

const tableState = vi.hoisted(() => ({ config: undefined as any }));

vi.mock('@jnpf/ui/vxeTable', () => ({
  BasicVxeTable: {
    name: 'BasicVxeTable',
    props: ['dataSource'],
    template:
      '<div><slot v-if="dataSource?.length" name="canshuMingcheng" :record="dataSource[0]" /><slot v-if="dataSource?.length" name="shujuLeixing" :record="dataSource[0]" /><slot v-if="dataSource?.length" name="danwei" :record="dataSource[0]" /></div>',
  },
  useVxeTable: (config: any) => {
    tableState.config = config;
    return [vi.fn()];
  },
}));

describe('eLN formula parameter table', () => {
  it('only allows draft slots to be edited or removed', () => {
    const wrapper = mount(ParameterTable, {
      props: { modelValue: [], readonly: true, status: 'PRE_RELEASE' },
      global: {
        stubs: {
          'a-alert': { props: ['message'], template: '<span>{{ message }}</span>' },
          'a-button': true,
          'a-input': true,
          'a-input-number': true,
          'a-select': true,
          'a-switch': true,
          'a-tag': true,
        },
      },
    });
    expect(wrapper.text()).toContain('集合参数仅支持映射重复区域的数值字段，不支持普通字段或逐行公式');
    expect(tableSource).toContain("status === 'DRAFT'");
    expect(tableSource).toContain('canshuBianma');
    expect(tableSource).toContain('DECIMAL_LIST');
  });

  it('adds only business properties and leaves the generated code to the backend', () => {
    expect(tableSource).toContain("canshuMingcheng: ''");
    expect(tableSource).not.toContain("canshuBianma: ''");
  });

  it('uses a stable client key for unsaved parameter rows', () => {
    expect(tableSource).toContain('row._clientKey || row.id');
    expect(tableSource).toContain('_clientKey:');
  });

  it('uses a stable height when embedded in a formula modal', () => {
    shallowMount(ParameterTable, {
      props: { modelValue: [], status: 'DRAFT' },
      global: { stubs: { 'a-alert': true, 'a-button': true, 'a-input': true, 'a-input-number': true, 'a-select': true, 'a-switch': true } },
    });

    expect(tableState.config.height).toBe(220);
  });

  it('uses its own stable height when it replaces the formula workspace', () => {
    const wrapper = shallowMount(ParameterTable, {
      props: { fullHeight: true, modelValue: [], status: 'DRAFT' },
      global: { stubs: { 'a-alert': true, 'a-button': true, 'a-input': true, 'a-input-number': true, 'a-select': true, 'a-switch': true } },
    });

    expect(typeof tableState.config.height).toBe('number');
    expect(tableState.config.height).toBeGreaterThanOrEqual(360);
    expect(wrapper.classes()).toContain('is-full-height');
  });

  it('maps parameter type option labels and values for the native select', () => {
    const wrapper = mount(ParameterTable, {
      props: {
        modelValue: [{ canshuBianma: 'amount', canshuMingcheng: '含量', paixu: 1, shifouBitian: 1, shujuLeixing: 'DECIMAL' }],
        status: 'DRAFT',
      },
      global: {
        stubs: {
          'a-alert': true,
          'a-button': true,
          'a-input': true,
          'a-input-number': true,
          'a-select': { name: 'ASelect', props: ['fieldNames', 'options', 'value'], template: '<div />' },
          'a-switch': true,
        },
      },
    });

    const typeSelect = wrapper.findComponent({ name: 'ASelect' });
    expect(typeSelect.props('fieldNames')).toEqual({ label: 'fullName', value: 'id' });
    expect(typeSelect.props('options')).toContainEqual({ fullName: '数值', id: 'DECIMAL' });
  });

  it('provides prompts for editable parameter fields and enough room for sorting', () => {
    shallowMount(ParameterTable, {
      props: { modelValue: [], status: 'DRAFT' },
      global: { stubs: { 'a-alert': true, 'a-button': true, 'a-input': true, 'a-input-number': true, 'a-select': true, 'a-switch': true } },
    });

    expect(tableSource).toContain('placeholder="请输入参数名称"');
    expect(tableSource).toContain('placeholder="请选择类型"');
    expect(tableSource).toContain('placeholder="请输入单位"');
    expect(tableSource).toContain('placeholder="请输入排序"');
    expect(tableState.config.columns.find((column: any) => column.dataIndex === 'paixu').width).toBe(110);
  });

  it('uses a compact action header without adding space below the notice', () => {
    expect(tableSource).not.toContain('<span>参数槽</span>');
    expect(tableSource).toContain('<a-button v-if="editable" type="default"');
    expect(tableSource).toContain('<a-alert banner class="parameter-table__notice"');
    expect(tableSource).toMatch(/\.parameter-table__notice\s*\{[^}]*margin-top: 8px/);
    expect(tableSource).not.toMatch(/\.parameter-table__notice\s*\{[^}]*margin-bottom:/);
  });

  it('updates a unit without triggering a reactive table refresh', async () => {
    const parameter = reactive({
      _clientKey: 'row-1',
      canshuMingcheng: '含量',
      danwei: undefined as string | undefined,
      paixu: 1,
      shifouBitian: 1 as const,
      shujuLeixing: 'DECIMAL' as const,
    });
    let reactiveUpdates = 0;
    watch(
      () => parameter.danwei,
      () => reactiveUpdates++,
    );
    const wrapper = mount(ParameterTable, {
      props: { modelValue: [parameter], status: 'DRAFT' },
      global: {
        stubs: {
          'a-alert': true,
          'a-button': true,
          'a-input': { name: 'AInput', props: ['value'], template: '<input />' },
          'a-input-number': true,
          'a-select': true,
          'a-switch': true,
        },
      },
    });

    const unitInput = wrapper.findAllComponents({ name: 'AInput' }).find((input) => input.props('value') === undefined)!;
    unitInput.vm.$emit('update:value', 'mg/mL');
    await nextTick();

    expect(unitInput.props('value')).toBe('mg/mL');
    expect(parameter.danwei).toBe('mg/mL');
    expect(reactiveUpdates).toBe(0);
    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
  });

  it('updates a parameter name without triggering a reactive table refresh', async () => {
    const parameter = reactive({
      _clientKey: 'row-1',
      canshuMingcheng: '含量',
      danwei: undefined as string | undefined,
      paixu: 1,
      shifouBitian: 1 as const,
      shujuLeixing: 'DECIMAL' as const,
    });
    let reactiveUpdates = 0;
    watch(
      () => parameter.canshuMingcheng,
      () => reactiveUpdates++,
    );
    const wrapper = mount(ParameterTable, {
      props: { modelValue: [parameter], status: 'DRAFT' },
      global: {
        stubs: {
          'a-alert': true,
          'a-button': true,
          'a-input': { name: 'AInput', props: ['value'], template: '<input />' },
          'a-input-number': true,
          'a-select': true,
          'a-switch': true,
        },
      },
    });

    const nameInput = wrapper.findAllComponents({ name: 'AInput' }).find((input) => input.props('value') === '含量')!;
    nameInput.vm.$emit('update:value', '水分');
    await nextTick();

    expect(nameInput.props('value')).toBe('水分');
    expect(parameter.canshuMingcheng).toBe('水分');
    expect(reactiveUpdates).toBe(0);
    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
  });

  it('keeps real Ant inputs interactive while synchronizing submitted text values', async () => {
    const parameter = reactive({
      _clientKey: 'row-1',
      canshuMingcheng: '',
      danwei: undefined as string | undefined,
      paixu: 1,
      shifouBitian: 1 as const,
      shujuLeixing: 'DECIMAL' as const,
    });
    const wrapper = mount(ParameterTable, {
      props: { modelValue: [parameter], status: 'DRAFT' },
      global: {
        components: { AInput },
        stubs: {
          'a-alert': true,
          'a-button': true,
          'a-input-number': true,
          'a-select': true,
          'a-switch': true,
        },
      },
    });

    const nameInput = wrapper.find('input[placeholder="请输入参数名称"]');
    const unitInput = wrapper.find('input[placeholder="请输入单位"]');
    await nameInput.setValue('水分');
    await unitInput.setValue('mg/mL');

    expect((nameInput.element as HTMLInputElement).value).toBe('水分');
    expect((unitInput.element as HTMLInputElement).value).toBe('mg/mL');
    expect(parameter.canshuMingcheng).toBe('水分');
    expect(parameter.danwei).toBe('mg/mL');
  });
});