/* eslint-disable vue/one-component-per-file -- Inline stubs keep this search test isolated. */
import { mount } from '@vue/test-utils';
import { defineComponent, h } from 'vue';

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

import SysAccountList from './SysAccountList.vue';

const pageDataMocks = vi.hoisted(() => ({
  setQuery: vi.fn(),
}));
const dictStoreMocks = vi.hoisted(() => ({
  fetchDictionary: vi.fn(),
}));

vi.mock('#/api/request', () => ({
  api: {
    get: vi.fn(),
    post: vi.fn(),
  },
}));
vi.mock('#/locales', () => ({
  $t: (key: string) => {
    if (key === 'sysAccount.searchPlaceholder') {
      return '搜索账号、昵称、电话、邮件或角色';
    }
    return key;
  },
}));
vi.mock('#/store', () => ({
  useDictStore: () => dictStoreMocks,
}));
vi.mock('#/components/headerSearch/HeaderSearch.vue', () => ({
  default: defineComponent({
    name: 'HeaderSearch',
    props: {
      buttons: {
        type: Array,
        default: () => [],
      },
      searchPlaceholder: {
        type: String,
        default: '',
      },
    },
    emits: ['buttonClick', 'search'],
    setup(props, { emit }) {
      return () =>
        h(
          'button',
          {
            'data-placeholder': props.searchPlaceholder,
            'data-testid': 'account-search',
            onClick: () => emit('search', '  alice@example.com  '),
          },
          props.searchPlaceholder,
        );
    },
  }),
}));
vi.mock('#/components/page/ListPageShell.vue', () => ({
  default: defineComponent({
    name: 'ListPageShell',
    setup(_, { slots }) {
      return () => h('div', [slots.filters?.(), slots.default?.()]);
    },
  }),
}));
vi.mock('#/components/page/PageData.vue', () => ({
  default: defineComponent({
    name: 'PageData',
    setup(_, { expose }) {
      expose(pageDataMocks);
      return () => h('div');
    },
  }),
}));
vi.mock('./SysAccountImportModal.vue', () => ({
  default: defineComponent({
    name: 'SysAccountImportModal',
    setup: () => () => h('div'),
  }),
}));
vi.mock('./SysAccountModal.vue', () => ({
  default: defineComponent({
    name: 'SysAccountModal',
    setup: () => () => h('div'),
  }),
}));
vi.mock('./SysAccountPasswordResultModal.vue', () => ({
  default: defineComponent({
    name: 'SysAccountPasswordResultModal',
    setup: () => () => h('div'),
  }),
}));

describe('sysAccountList search', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('submits a trimmed unified keyword and describes searchable fields', async () => {
    const wrapper = mount(SysAccountList, {
      global: {
        directives: {
          access: {},
          loading: {},
        },
      },
    });
    const search = wrapper.get('[data-testid="account-search"]');

    expect(search.attributes('data-placeholder')).toBe(
      '搜索账号、昵称、电话、邮件或角色',
    );
    await search.trigger('click');

    expect(pageDataMocks.setQuery).toHaveBeenCalledWith({
      keyword: 'alice@example.com',
    });
    wrapper.unmount();
  });
});
