import ElementPlus from 'element-plus'
import { createPinia, setActivePinia } from 'pinia'
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { nextTick } from 'vue'
import ExpressCompaniesView from './ExpressCompaniesView.vue'

class ResizeObserverStub implements ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

async function mountView() {
  const pinia = createPinia()
  setActivePinia(pinia)
  const wrapper = mount(ExpressCompaniesView, {
    attachTo: document.body,
    global: { plugins: [pinia, ElementPlus] },
  })
  await flushPromises()
  return wrapper
}

async function filterByKeyword(value: string) {
  const input = document.querySelector<HTMLInputElement>('input[placeholder="公司名称、编码、官网或电话"]')
  expect(input).not.toBeNull()
  if (!input) return
  input.value = value
  input.dispatchEvent(new Event('input', { bubbles: true }))
  await nextTick()
}

enableAutoUnmount(afterEach)

describe('ExpressCompaniesView', () => {
  beforeEach(() => {
    vi.stubGlobal('ResizeObserver', ResizeObserverStub)
    document.body.innerHTML = ''
  })

  it('renders the prototype-backed company records and public fields', async () => {
    const wrapper = await mountView()

    expect(wrapper.text()).toContain('DHL')
    expect(wrapper.text()).toContain('www.dhl.com')
    expect(wrapper.text()).toContain('95380')
    expect(wrapper.text()).toContain('已终止')
    const actions = wrapper.findAll('button').map((button) => button.text().trim())
    expect(actions).not.toContain('新增')
    expect(actions).not.toContain('编辑')
  })

  it('filters by company name or code and renders an actionable empty state', async () => {
    const wrapper = await mountView()

    await filterByKeyword('YTO')
    expect(wrapper.text()).toContain('圆通速递')
    expect(wrapper.text()).not.toContain('顺丰速运')

    await filterByKeyword('不存在的公司')
    expect(wrapper.text()).toContain('没有符合条件的快递公司')
    expect(wrapper.text()).toContain('共 0 条')
  })

  it('opens a detail drawer without exposing maintenance actions to an unauthorized role', async () => {
    const wrapper = await mountView()
    const detail = wrapper.findAll('button').find((button) => button.text().trim() === '详情')
    expect(detail).toBeDefined()

    await detail?.trigger('click')
    await flushPromises()

    expect(document.body.textContent).toContain('快递公司详情')
    expect(document.body.textContent).toContain('公开联系信息')
    expect(document.body.textContent).not.toContain('保存快递公司')
  })
})