import { computed } from 'vue'
import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
import ElementPlus from 'element-plus'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import DataTable from '@/shared/components/DataTable.vue'
import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'
import { listMojiaSkuSync } from '../api/mojiaSkuSync'
import MojiaSkuSyncView from './MojiaSkuSyncView.vue'

vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: () => true }) }))
vi.mock('../api/mojiaSkuSync', () => ({
  getMojiaSkuSyncConfig: vi.fn().mockResolvedValue({ autoSyncEnabled: false }),
  listMojiaSkuSync: vi.fn(), retryMojiaSkuSync: vi.fn(), updateMojiaSkuSync: vi.fn(),
  submitLingxingVerificationCode: vi.fn(), testLingxingConnection: vi.fn(),
}))
let wrapper: VueWrapper | undefined
async function mountView() {
  wrapper = mount(MojiaSkuSyncView, {
    attachTo: document.body,
    global: { plugins: [ElementPlus], provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'mojia-test') } },
  })
  await flushPromises()
  return wrapper
}
beforeEach(() => {
  vi.clearAllMocks()
  localStorage.clear()
  vi.mocked(listMojiaSkuSync).mockResolvedValue({
    records: [{ id: 'record-1', measurementKind: 'SKU', boxCode: '', skuCode: 'SKU-TEST', lengthCm: 20, widthCm: 10, heightCm: 10, weightKg: 1, revision: 1 }],
    page: 1, size: 20, total: 70, pages: 4,
  })
})
afterEach(() => { wrapper?.unmount(); wrapper = undefined; document.body.innerHTML = '' })

describe('MojiaSkuSyncView shared pagination', () => {
  it('preserves server paging and resets to page one when querying or changing page size', async () => {
    const view = await mountView()
    expect(view.get('h1').text()).toBe('称重机器')
    expect(view.getComponent(DataTable).props('pageSizes')).toEqual([10, 20, 30, 40, 50, 100])
    view.getComponent(DataTable).vm.$emit('update:page', 2)
    await flushPromises()
    expect(listMojiaSkuSync).toHaveBeenLastCalledWith(expect.objectContaining({ page: 2, size: 20 }))
    await view.get('input[placeholder="搜索箱码或 SKU"]').setValue('SKU-QUERY')
    await view.get('.sync-filters .el-button--primary').trigger('click')
    await flushPromises()
    expect(listMojiaSkuSync).toHaveBeenLastCalledWith(expect.objectContaining({ page: 1, code: 'SKU-QUERY' }))
    view.getComponent(DataTable).vm.$emit('update:page', 2)
    await flushPromises()
    vi.mocked(listMojiaSkuSync).mockClear()
    view.getComponent(DataTable).vm.$emit('update:pageSize', 50)
    await flushPromises()
    expect(listMojiaSkuSync).toHaveBeenCalledTimes(1)
    expect(listMojiaSkuSync).toHaveBeenLastCalledWith(expect.objectContaining({ page: 1, size: 50, code: 'SKU-QUERY' }))
  })

  it('restores resized columns after remount while preserving query buttons and operation permissions', async () => {
    const view = await mountView()
    expect(view.find('button[aria-label="列设置"]').exists()).toBe(true)
    expect(view.get('.sync-filters .el-button--primary').classes()).not.toContain('density-action')
    expect(view.getComponent(DataTable).props('columns')[0]).toMatchObject({ key: 'actions', fixed: 'left' })
    view.getComponent({ name: 'ElTable' }).vm.$emit('header-dragend', 260, 180, { columnKey: 'sourceCode' })
    await flushPromises()
    expect(JSON.parse(localStorage.getItem(preferenceStorageKey('table', 'mojia-test', 'mojia-sku-sync-table'))!).widths.sourceCode).toBe(260)
    view.unmount()
    wrapper = undefined
    const restored = await mountView()
    const column = restored.findAllComponents({ name: 'ElTableColumn' }).find(item => item.props('columnKey') === 'sourceCode')!
    expect(column.props('width')).toBe(260)
    expect(restored.get('.el-table__body .admin-text-actions').findAll('button').map(button => button.text())).toEqual(['编辑', '人工推送'])
  })
})