import { describe, expect, it, vi } from 'vitest'
import { flushPromises, mount } from '@vue/test-utils'
import SupplierLinkDialog from '@/components/provenance/admin/SupplierLinkDialog.vue'
import vuetify from '@/plugins/vuetify'
import { clickBody } from './helpers'

const suppliers = [
  { id: 5, name: 'Asociación Agropecuaria La Mesa' },
  { id: 9, name: 'Finca El Paraíso' },
  { id: 12, name: 'Cooperativa del Valle' },
]

function mockApi () {
  return {
    getSuppliers: vi.fn().mockResolvedValue(suppliers),
    getProduct: vi.fn().mockResolvedValue({ id: 1, name: 'Panela regional por Kg', suppliers: [5] }),
    updateProduct: vi.fn().mockResolvedValue({}),
  }
}

function mountDialog (api, props = {}) {
  return mount(SupplierLinkDialog, {
    props: { visible: true, product: { id: 1, name: 'Panela regional por Kg' }, ...props },
    global: { plugins: [vuetify], provide: { api } },
  })
}

describe('SupplierLinkDialog', () => {
  it('carga los proveedores y los suppliers actuales del producto al abrir', async () => {
    const api = mockApi()
    mountDialog(api)
    await flushPromises()

    expect(api.getSuppliers).toHaveBeenCalled()
    expect(api.getProduct).toHaveBeenCalledWith(1)
    expect(document.body.textContent).toContain('Panela regional por Kg')
  })

  it('permite cambiar la selección y guarda los proveedores', async () => {
    const api = mockApi()
    const wrapper = mountDialog(api)
    await flushPromises()

    const autocomplete = wrapper.findAllComponents({ name: 'VAutocomplete' })
      .find(component => component.props('items').some(item => item.id === 5))
    await autocomplete.vm.$emit('update:modelValue', [5, 9])

    expect(document.body.textContent).toContain('Seleccionados (2)')

    clickBody('[data-testid="supplier-link-save"]')
    await flushPromises()

    expect(api.updateProduct).toHaveBeenCalledWith(1, { suppliers: [5, 9] })
  })

  it('mantiene los proveedores seleccionados aunque el filtro no los incluya', async () => {
    const api = mockApi()
    const wrapper = mountDialog(api)
    await flushPromises()

    const autocomplete = wrapper.findAllComponents({ name: 'VAutocomplete' })
      .find(component => component.props('items').some(item => item.id === 5))
    await autocomplete.vm.$emit('update:modelValue', [5, 12])
    await autocomplete.vm.$emit('update:search', 'Finca')

    const items = autocomplete.props('items')
    expect(items.some(item => item.id === 5)).toBe(true)
    expect(items.some(item => item.id === 12)).toBe(true)
    expect(items.some(item => item.id === 9)).toBe(true)
    expect(items.some(item => item.id === 7)).toBe(false)
  })
})