import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import ProvenanceDetailModal from '@/components/provenance/ProvenanceDetailModal.vue'
import vuetify from '@/plugins/vuetify'

const supplier = {
  id: 'supplier:5',
  kind: 'supplier',
  label: 'Asociación Agropecuaria La Mesa',
  image: null,
  entity: {
    id: 5,
    name: 'Asociación Agropecuaria La Mesa',
    description: 'Cooperativa de campesinos',
    website: 'https://agro.example.org',
    contact_email: 'contacto@agro.example.org',
    contact_phone: '300 123 4567',
    kind: 'supplier',
  },
}

const product = {
  id: 'product:1',
  kind: 'product',
  label: 'Panela regional por Kg',
  image: 'http://localhost/media/panela.jpg',
  entity: { id: 1, name: 'Panela regional por Kg', kind: 'product' },
}

function mountModal (props) {
  return mount(ProvenanceDetailModal, {
    props,
    global: { plugins: [vuetify] },
  })
}

function bodyText () {
  return document.body.textContent
}

describe('ProvenanceDetailModal', () => {
  it('muestra la información detallada del proveedor seleccionado', () => {
    mountModal({ visible: true, selected: supplier })

    expect(bodyText()).toContain('Proveedor')
    expect(bodyText()).toContain('Asociación Agropecuaria La Mesa')
    expect(bodyText()).toContain('Cooperativa de campesinos')
    expect(bodyText()).toContain('https://agro.example.org')
    expect(bodyText()).toContain('contacto@agro.example.org')
    expect(bodyText()).toContain('300 123 4567')
  })

  it('muestra la imagen del producto cuando existe', () => {
    mountModal({ visible: true, selected: product })

    expect(document.querySelector('img').getAttribute('src')).toBe(
      'http://localhost/media/panela.jpg'
    )
  })

  it('no muestra contenido cuando no hay entidad seleccionada', () => {
    mountModal({ visible: true, selected: null })

    expect(bodyText()).not.toContain('Proveedor')
    expect(bodyText()).not.toContain('Asociación')
  })

  it('no muestra el diálogo cuando visible es false', () => {
    mountModal({ visible: false, selected: supplier })

    expect(bodyText()).not.toContain('Asociación Agropecuaria La Mesa')
  })

  it('omite los campos vacíos', () => {
    const minimal = {
      id: 'country:1',
      kind: 'country',
      label: 'Colombia',
      image: null,
      entity: { id: 1, name: 'Colombia', kind: 'country' },
    }
    mountModal({ visible: true, selected: minimal })

    expect(bodyText()).toContain('Colombia')
    expect(bodyText()).not.toContain('Descripción')
    expect(bodyText()).not.toContain('Sitio web')
  })
})