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

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

import TemplatePage from '../index.vue';
import pageSource from '../index.vue?raw';

const apiMocks = vi.hoisted(() => ({
  getTemplateCategoryTree: vi.fn(),
  getTemplateDirectory: vi.fn(),
}));
const localFormOpenMock = vi.hoisted(() => vi.fn());
const messageMocks = vi.hoisted(() => ({ error: vi.fn(), success: vi.fn(), warning: vi.fn() }));
const formState = vi.hoisted(() => ({ resetFields: vi.fn(), values: {} as Record<string, unknown> }));
const tableState = vi.hoisted(() => ({
  actions: [] as any[],
  config: undefined as any,
  reload: vi.fn(),
  row: {
    bizEnabled: 'enabled',
    bizStatus: 'PUBLISHED',
    mubanBianhao: 'TMP-001',
    shengxiaoMubanBanben: 'R01',
    shengxiaoMubanId: 'template-1',
  } as any,
}));
const modalState = vi.hoisted(() => ({
  opened: [] as Array<{ data?: any; key: string }>,
}));

const ButtonStub = defineComponent({
  name: 'AButton',
  emits: ['click'],
  setup(_, { emit, slots }) {
    return () => h('button', { onClick: () => emit('click'), type: 'button' }, slots.default?.());
  },
});
vi.mock('#/api/x/eln/templates', () => ({
  getTemplateCategoryTree: apiMocks.getTemplateCategoryTree,
  getTemplateDirectory: apiMocks.getTemplateDirectory,
}));

vi.mock('@jnpf/ui', async () => {
  const { defineComponent, h } = await import('vue');
  return {
    BasicLeftTree: defineComponent({
      name: 'BasicLeftTree',
      props: {
        fieldNames: { default: () => ({}), type: Object },
        loading: Boolean,
        showReset: Boolean,
        title: { default: '', type: String },
        treeData: { default: () => [], type: Array },
      },
      emits: ['reload', 'reset', 'select'],
      setup(props) {
        return () => h('div', { 'data-test': 'template-category-tree' }, JSON.stringify(props.treeData));
      },
    }),
  };
});

vi.mock('#/components/GlobalFormModal/index.vue', async () => {
  const { defineComponent, h } = await import('vue');
  return {
    default: defineComponent({
      name: 'GlobalFormModal',
      props: { listenGlobal: Boolean },
      setup(_, { expose }) {
        expose({ open: localFormOpenMock });
        return () => h('div', { 'data-test': 'local-form-modal' });
      },
    }),
  };
});

vi.mock('../VersionDrawer.vue', async () => {
  const { defineComponent, h } = await import('vue');
  return { default: defineComponent({ name: 'VersionDrawer', setup: () => () => h('div') }) };
});

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

vi.mock('@jnpf/ui/form', () => ({
  BasicForm: { name: 'BasicForm', template: '<div />' },
  useForm: () => [vi.fn(), { getFieldsValue: () => formState.values, resetFields: formState.resetFields }],
}));

vi.mock('@jnpf/ui/drawer', () => ({
  useDrawer: () => [vi.fn(), { openDrawer: (open: boolean, data?: any) => open && modalState.opened.push({ data, key: 'versionList' }) }],
}));

vi.mock('@jnpf/ui/vxeTable', async () => {
  const { defineComponent, h } = await import('vue');
  return {
    BasicVxeTable: defineComponent({
      name: 'BasicVxeTable',
      setup(_, { slots }) {
        return () =>
          h('div', [
            slots.tableTitle?.(),
            slots.jianyanXiangmu?.({ record: tableState.row }),
            slots.mubanFenlei?.({ record: tableState.row }),
            slots.shengxiaoMubanBanben?.({ record: tableState.row }),
            slots.action?.({ record: tableState.row }),
          ]);
      },
    }),
    TableAction: defineComponent({
      name: 'TableAction',
      props: { actions: Array },
      setup(props) {
        tableState.actions = props.actions as any[];
        return () => h('div');
      },
    }),
    useVxeTable: (config: any) => {
      tableState.config = config;
      return [vi.fn(), { reload: tableState.reload }];
    },
  };
});

describe('eLN template page', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    localFormOpenMock.mockResolvedValue(undefined);
    tableState.actions = [];
    tableState.row = {
      bizEnabled: 'enabled',
      bizStatus: 'PUBLISHED',
      mubanBianhao: 'TMP-001',
      shengxiaoMubanBanben: 'R01',
      shengxiaoMubanId: 'template-1',
    };
    modalState.opened = [];
    formState.values = {};
    apiMocks.getTemplateDirectory.mockResolvedValue({ data: { list: [], pagination: { currentPage: 1, pageSize: 20, total: 0 } } });
    apiMocks.getTemplateCategoryTree.mockResolvedValue({ data: [{ f_id: 'category-1', fenlei_mingcheng: '检验记录' }] });
  });

  it('加载电子记录分类树', async () => {
    const wrapper = mount(TemplatePage, {
      global: {
        stubs: {
          'a-button': true,
          'a-form-item': true,
          'a-tag': true,
          'a-textarea': true,
          VersionModal: true,
        },
      },
    });

    await vi.waitFor(() => expect(apiMocks.getTemplateCategoryTree).toHaveBeenCalledOnce());
    const tree = wrapper.findComponent({ name: 'BasicLeftTree' });
    await vi.waitFor(() => expect(tree.props('treeData')).toEqual([{ f_id: 'category-1', fenlei_mingcheng: '检验记录' }]));
    expect(tree.props()).toMatchObject({
      fieldNames: { children: 'children', key: 'f_id', title: 'fenlei_mingcheng' },
      showReset: true,
      title: '电子记录分类',
      treeData: [{ f_id: 'category-1', fenlei_mingcheng: '检验记录' }],
    });
  });

  it('兼容分类树接口返回 JSON 字符串', async () => {
    apiMocks.getTemplateCategoryTree.mockResolvedValueOnce({
      data: JSON.stringify([{ f_id: 'category-2', fenlei_mingcheng: '原始记录' }]),
    });
    const wrapper = mount(TemplatePage, {
      global: {
        stubs: {
          'a-button': true,
          'a-form-item': true,
          'a-tag': true,
          'a-textarea': true,
          VersionModal: true,
        },
      },
    });
    const tree = wrapper.findComponent({ name: 'BasicLeftTree' });

    await vi.waitFor(() => expect(tree.props('treeData')).toEqual([{ f_id: 'category-2', fenlei_mingcheng: '原始记录' }]));
  });

  it('刷新分类树时重新请求分类数据', async () => {
    const wrapper = mount(TemplatePage, {
      global: {
        stubs: {
          'a-button': true,
          'a-form-item': true,
          'a-tag': true,
          'a-textarea': true,
          VersionModal: true,
        },
      },
    });
    const tree = wrapper.findComponent({ name: 'BasicLeftTree' });

    await vi.waitFor(() => expect(apiMocks.getTemplateCategoryTree).toHaveBeenCalledOnce());
    tree.vm.$emit('reload');

    await vi.waitFor(() => expect(apiMocks.getTemplateCategoryTree).toHaveBeenCalledTimes(2));
  });

  it('点击分类后与当前搜索条件组合查询并回到第一页', async () => {
    formState.values = { bizEnabled: 'enabled', bizStatus: 'PUBLISHED', keyword: '无菌' };
    const wrapper = mount(TemplatePage, {
      global: {
        stubs: {
          'a-button': true,
          'a-form-item': true,
          'a-tag': true,
          'a-textarea': true,
          VersionModal: true,
        },
      },
    });

    wrapper.findComponent({ name: 'BasicLeftTree' }).vm.$emit('select', 'category-1');

    expect(tableState.reload).toHaveBeenCalledWith({
      page: 1,
      searchInfo: { bizEnabled: 'enabled', bizStatus: 'PUBLISHED', keyword: '无菌', mubanFenlei: 'category-1' },
    });
  });

  it('重置分类树时清空分类并保留搜索条件', () => {
    formState.values = { bizEnabled: 'enabled', keyword: '无菌' };
    const wrapper = mount(TemplatePage, {
      global: {
        stubs: {
          'a-button': true,
          'a-form-item': true,
          'a-tag': true,
          'a-textarea': true,
          VersionModal: true,
        },
      },
    });
    const tree = wrapper.findComponent({ name: 'BasicLeftTree' });
    tree.vm.$emit('select', 'category-1');
    tableState.reload.mockClear();

    tree.vm.$emit('reset');

    expect(tableState.reload).toHaveBeenCalledWith({
      page: 1,
      searchInfo: { bizEnabled: 'enabled', keyword: '无菌' },
    });
  });

  it('重置顶部搜索表单时保留当前分类', async () => {
    formState.values = { bizStatus: 'PUBLISHED', keyword: '无菌' };
    formState.resetFields.mockImplementationOnce(async () => {
      formState.values = {};
    });
    const wrapper = mount(TemplatePage, {
      global: {
        stubs: {
          'a-button': true,
          'a-form-item': true,
          'a-tag': true,
          'a-textarea': true,
          VersionModal: true,
        },
      },
    });
    wrapper.findComponent({ name: 'BasicLeftTree' }).vm.$emit('select', 'category-1');
    tableState.reload.mockClear();

    wrapper.findComponent({ name: 'BasicForm' }).vm.$emit('reset');

    await vi.waitFor(() =>
      expect(tableState.reload).toHaveBeenCalledWith({
        page: 1,
        searchInfo: { mubanFenlei: 'category-1' },
      }),
    );
  });

  it('uses the low-code page skeleton and required columns without cards', () => {
    shallowMount(TemplatePage, { global: { stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true } } });
    const titles = tableState.config.columns.map((column: any) => column.title);
    const testDefinitionColumn = tableState.config.columns.find((column: any) => column.title === '检验项目');
    const templateCategoryColumn = tableState.config.columns.find((column: any) => column.title === '模板分类');

    expect(pageSource).toContain('<div class="jnpf-content-wrapper">');
    expect(pageSource).toContain('<BasicForm');
    expect(pageSource).toContain('<BasicVxeTable');
    expect(pageSource).toContain('<TableAction');
    expect(pageSource).not.toContain('<BasicModal');
    expect(pageSource).not.toContain('a-card');
    expect(titles).toEqual(['模板编号', '检验项目', '模板分类', '生效版本', '发布状态', '启用状态', '生效时间', '字段数', '更新时间', '创建时间']);
    expect(testDefinitionColumn.dataIndex).toBe('jianyanXiangmuMingcheng');
    expect(templateCategoryColumn.dataIndex).toBe('mubanFenleiMingcheng');
  });

  it('主列表按模板编号请求目录聚合结果', async () => {
    shallowMount(TemplatePage, { global: { stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true } } });
    const query = tableState.config.beforeFetch({ currentPage: 1, pageSize: 20 });

    await tableState.config.api(query);

    expect(apiMocks.getTemplateDirectory).toHaveBeenCalledWith({ currentPage: 1, pageSize: 20 });
  });

  it('显示生效版本，无当前版本时显示未生效', () => {
    const effective = mount(TemplatePage, {
      global: { stubs: { 'a-button': true, 'a-tag': true } },
    });
    expect(effective.text()).toContain('R01');

    tableState.row = {
      bizEnabled: undefined,
      bizStatus: undefined,
      mubanBianhao: 'TMP-001',
      shengxiaoMubanBanben: undefined,
      shengxiaoMubanId: undefined,
    };
    const inactive = mount(TemplatePage, {
      global: { stubs: { 'a-button': true, 'a-tag': true } },
    });
    expect(inactive.text()).toContain('未生效');
  });

  it('shows the test definition name and falls back to its id', () => {
    tableState.row = { ...tableState.row, jianyanXiangmu: 'item-1' };
    const fallback = mount(TemplatePage, {
      global: { stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true, HealthDrawer: true, VersionModal: true } },
    });
    expect(fallback.text()).toContain('item-1');

    tableState.row = { ...tableState.row, jianyanXiangmuMingcheng: '无菌检查' };
    const resolved = mount(TemplatePage, {
      global: { stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true, HealthDrawer: true, VersionModal: true } },
    });
    expect(resolved.text()).toContain('无菌检查');
  });

  it('shows the template category name and falls back to its id', () => {
    tableState.row = { ...tableState.row, mubanFenlei: 'category-1' };
    const fallback = mount(TemplatePage, {
      global: { stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true, HealthDrawer: true, VersionModal: true } },
    });
    expect(fallback.text()).toContain('category-1');

    tableState.row = { ...tableState.row, mubanFenleiMingcheng: '检验记录' };
    const resolved = mount(TemplatePage, {
      global: { stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true, HealthDrawer: true, VersionModal: true } },
    });
    expect(resolved.text()).toContain('检验记录');
  });

  it('主列表只保留模板目录级操作', () => {
    mount(TemplatePage, {
      global: { stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true, HealthDrawer: true, VersionModal: true } },
    });

    expect(tableState.actions.map((action) => action.label)).toEqual(['版本']);
  });

  it('从操作列打开指定模板的版本列表', async () => {
    mount(TemplatePage, {
      global: {
        stubs: { 'a-button': true, 'a-form-item': true, 'a-tag': true, 'a-textarea': true, HealthDrawer: true, VersionDrawer: true, VersionModal: true },
      },
    });

    const versions = tableState.actions.find((action) => action.label === '版本');
    expect(versions).toBeTruthy();
    await versions.onClick();

    expect(modalState.opened).toContainEqual({
      data: { mubanBianhao: 'TMP-001' },
      key: 'versionList',
    });
  });

  it('在列表内容区使用低代码平台默认容器打开新增表单', async () => {
    const wrapper = mount(TemplatePage, {
      global: { stubs: { 'a-button': ButtonStub, 'a-form-item': true, 'a-tag': true, 'a-textarea': true, HealthDrawer: true, VersionModal: true } },
    });
    const localForm = wrapper.findComponent({ name: 'GlobalFormModal' });

    expect(localForm.exists()).toBe(true);
    expect(localForm.props('listenGlobal')).toBe(false);
    expect(localForm.element.closest('.jnpf-content-wrapper')).not.toBeNull();

    const addButton = wrapper.findAll('button').find((button) => button.text() === '新增模板');
    expect(addButton).toBeTruthy();
    await addButton!.trigger('click');

    expect(localFormOpenMock).toHaveBeenCalledWith({
      modelId: '854727805680747141',
      onConfirm: expect.any(Function),
      title: '新增电子记录模板',
    });
    expect(pageSource).not.toMatch(/type: '(?:modal|drawer|fullScreen)'/);
  });
});