import { flushPromises, mount } from '@vue/test-utils';
import { defineComponent, h } from 'vue';

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

import StepSettingsDrawer from '../StepSettingsDrawer.vue';

const apiMocks = vi.hoisted(() => ({
  getTemplateSteps: vi.fn(),
  saveTemplateSteps: vi.fn(),
}));
const drawerState = vi.hoisted(() => ({ init: undefined as any }));
const drawerActions = vi.hoisted(() => ({
  changeLoading: vi.fn(),
  changeOkLoading: vi.fn(),
  close: vi.fn(),
}));
const messageMocks = vi.hoisted(() => ({ error: vi.fn(), success: vi.fn(), warning: vi.fn() }));
const modalActions = vi.hoisted(() => ({ close: vi.fn(), open: vi.fn() }));

const configuration = {
  singleStep: false,
  steps: [
    { id: 'step-2', name: '记录结果', order: 2 },
    { id: 'step-1', name: '准备样品', order: 1 },
  ],
};

const InputStub = defineComponent({
  name: 'AInput',
  inheritAttrs: false,
  props: { value: String },
  emits: ['update:value'],
  setup(props, { attrs, emit }) {
    return () =>
      h('input', {
        ...attrs,
        value: props.value,
        onInput: (event: Event) => emit('update:value', (event.target as HTMLInputElement).value),
      });
  },
});

const SelectStub = defineComponent({
  name: 'ASelect',
  inheritAttrs: false,
  props: { options: { type: Array, default: () => [] }, value: String },
  emits: ['update:value'],
  setup(props, { attrs, emit }) {
    return () =>
      h(
        'select',
        {
          ...attrs,
          value: props.value,
          onChange: (event: Event) => emit('update:value', (event.target as HTMLSelectElement).value || undefined),
        },
        [h('option', { value: '' }), ...props.options.map((item: any) => h('option', { value: item.value }, item.label))],
      );
  },
});

const ButtonStub = defineComponent({
  name: 'AButton',
  inheritAttrs: false,
  props: { disabled: Boolean },
  emits: ['click'],
  setup(props, { attrs, emit, slots }) {
    return () => h('button', { ...attrs, disabled: props.disabled, onClick: () => emit('click') }, [slots.icon?.(), slots.default?.()]);
  },
});

vi.mock('#/api/x/eln/templates', () => ({
  getTemplateSteps: apiMocks.getTemplateSteps,
  saveTemplateSteps: apiMocks.saveTemplateSteps,
}));

vi.mock('@jnpf/hooks', () => ({
  useMessage: () => ({ createMessage: messageMocks }),
}));

vi.mock('@jnpf/ui/drawer', async () => {
  const { defineComponent, h } = await import('vue');
  return {
    BasicDrawer: defineComponent({
      name: 'BasicDrawer',
      inheritAttrs: false,
      props: { showFooter: Boolean, title: String },
      emits: ['ok', 'register'],
      setup(_, { slots }) {
        return () => h('div', { 'data-test': 'basic-drawer' }, slots.default?.());
      },
    }),
    useDrawerInner: (init: any) => {
      drawerState.init = init;
      return [
        vi.fn(),
        {
          changeLoading: drawerActions.changeLoading,
          changeOkLoading: drawerActions.changeOkLoading,
          closeDrawer: drawerActions.close,
        },
      ];
    },
  };
});

vi.mock('@jnpf/ui/modal', async () => {
  const { defineComponent, h } = await import('vue');
  return {
    BasicModal: defineComponent({
      name: 'BasicModal',
      emits: ['ok', 'register'],
      setup(_, { slots }) {
        return () => h('div', { 'data-test': 'basic-modal' }, slots.default?.());
      },
    }),
    useModal: () => [vi.fn(), { closeModal: modalActions.close, openModal: modalActions.open }],
  };
});

vi.mock('vuedraggable', async () => {
  const { defineComponent, h } = await import('vue');
  return {
    default: defineComponent({
      name: 'DraggableStub',
      inheritAttrs: false,
      props: { disabled: Boolean, modelValue: { type: Array, default: () => [] } },
      emits: ['update:modelValue'],
      setup(props, { attrs, slots }) {
        return () =>
          h(
            'div',
            { ...attrs, 'data-disabled': String(props.disabled) },
            props.modelValue.map((element, index) => slots.item?.({ element, index })),
          );
      },
    }),
  };
});

function mountDrawer() {
  return mount(StepSettingsDrawer, {
    global: {
      stubs: {
        'a-button': ButtonStub,
        'a-form-item': defineComponent({ name: 'AFormItem', template: '<div><slot /></div>' }),
        'a-input': InputStub,
        'a-select': SelectStub,
        'a-tooltip': defineComponent({ name: 'ATooltip', template: '<span><slot /></span>' }),
      },
    },
  });
}

describe('eLN template step settings drawer', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    apiMocks.getTemplateSteps.mockResolvedValue({ data: structuredClone(configuration) });
    apiMocks.saveTemplateSteps.mockResolvedValue({ data: structuredClone(configuration) });
  });

  it('标题展示模板编号和模板版本', async () => {
    const wrapper = mountDrawer();

    await drawerState.init({
      version: { bizEnabled: 'enabled', bizStatus: 'DRAFT', id: 'template-1', mubanBanben: 'R01', mubanBianhao: 'TMP-001' },
    });
    await wrapper.vm.$nextTick();

    expect(wrapper.findComponent({ name: 'BasicDrawer' }).props('title')).toBe('步骤设置 - TMP-001 - R01');
  });

  it('加载已发布版本时按顺序只读展示', async () => {
    const wrapper = mountDrawer();

    await drawerState.init({
      version: { bizEnabled: 'enabled', bizStatus: 'PUBLISHED', id: 'template-1', mubanBanben: 'R01', mubanBianhao: 'TMP-001' },
    });
    await wrapper.vm.$nextTick();

    expect(apiMocks.getTemplateSteps).toHaveBeenCalledWith('template-1');
    expect(drawerActions.changeLoading.mock.calls).toEqual([[true], [false]]);
    expect(wrapper.findComponent({ name: 'BasicDrawer' }).props('showFooter')).toBe(false);
    expect(wrapper.findComponent('[data-test="step-list"]').attributes('data-disabled')).toBe('true');
    expect(wrapper.find('[data-test="step-list"]').text().indexOf('准备样品')).toBeLessThan(wrapper.find('[data-test="step-list"]').text().indexOf('记录结果'));
  });

  it('按拖动顺序保存步骤', async () => {
    const wrapper = mountDrawer();
    await drawerState.init({
      version: { bizEnabled: 'enabled', bizStatus: 'DRAFT', id: 'template-1', mubanBanben: 'R01', mubanBianhao: 'TMP-001' },
    });
    await wrapper.vm.$nextTick();

    const stepList = wrapper.findComponent({ name: 'DraggableStub' });
    stepList.vm.$emit('update:modelValue', [...(stepList.props('modelValue') as any[])].reverse());
    await wrapper.vm.$nextTick();

    wrapper.findComponent({ name: 'BasicDrawer' }).vm.$emit('ok');
    await flushPromises();

    expect(apiMocks.saveTemplateSteps).toHaveBeenCalledWith('template-1', {
      stepMigrations: {},
      steps: [
        { id: 'step-2', name: '记录结果' },
        { id: 'step-1', name: '准备样品' },
      ],
    });
    expect(drawerActions.changeOkLoading.mock.calls).toEqual([[true], [false]]);
    expect(drawerActions.close).toHaveBeenCalledOnce();
    expect(wrapper.emitted('saved')).toEqual([['template-1']]);
  });

  it('删除已有步骤时记录迁移目标', async () => {
    const wrapper = mountDrawer();
    await drawerState.init({
      version: { bizEnabled: 'enabled', bizStatus: 'DRAFT', id: 'template-1', mubanBanben: 'R01', mubanBianhao: 'TMP-001' },
    });
    await wrapper.vm.$nextTick();

    await wrapper.find('[data-test="add-step"]').trigger('click');
    await wrapper.find('[data-test="delete-step-step-1"]').trigger('click');
    expect(modalActions.open).toHaveBeenCalledWith(true);
    const migrationTarget = wrapper.findAllComponents(SelectStub).find((item) => item.attributes('data-test') === 'migration-target')!;
    expect(migrationTarget.props('options')).toEqual([{ label: '记录结果', value: 'step-2' }]);
    migrationTarget.vm.$emit('update:value', 'step-2');
    await wrapper.vm.$nextTick();
    wrapper.findComponent({ name: 'BasicModal' }).vm.$emit('ok');
    await wrapper.vm.$nextTick();
    await wrapper.find('[data-test="delete-step-local-step-1"]').trigger('click');
    wrapper.findComponent({ name: 'BasicDrawer' }).vm.$emit('ok');
    await flushPromises();

    expect(apiMocks.saveTemplateSteps).toHaveBeenCalledWith(
      'template-1',
      expect.objectContaining({
        stepMigrations: { 'step-1': 'step-2' },
        steps: [{ id: 'step-2', name: '记录结果' }],
      }),
    );
  });

  it('保存失败后恢复按钮 loading 并保持抽屉打开', async () => {
    apiMocks.saveTemplateSteps.mockRejectedValueOnce(new Error('保存失败'));
    const wrapper = mountDrawer();
    await drawerState.init({
      version: { bizEnabled: 'enabled', bizStatus: 'DRAFT', id: 'template-1', mubanBanben: 'R01', mubanBianhao: 'TMP-001' },
    });
    await wrapper.vm.$nextTick();

    wrapper.findComponent({ name: 'BasicDrawer' }).vm.$emit('ok');
    await flushPromises();

    expect(messageMocks.error).toHaveBeenCalledWith('保存失败');
    expect(drawerActions.changeOkLoading.mock.calls).toEqual([[true], [false]]);
    expect(drawerActions.close).not.toHaveBeenCalled();
  });
});