import { describe, expect, it } from 'vitest'
import { mountWithVuexy } from '../utils/mountWithVuexy'
import Wachtrij from '@/components/timetable/Wachtrij.vue'
import { ArtistEngagementStatus, type Performance } from '@/types/timetable'

function parked(id: string, name: string, status = ArtistEngagementStatus.REQUESTED): Performance {
  return {
    id,
    engagement_id: `e_${id}`,
    event_id: 'ev1',
    stage_id: null,
    lane: 0,
    lane_resolved: 0,
    start_at: null,
    end_at: null,
    version: 1,
    notes: null,
    warnings: [],
    engagement: {
      booking_status: { value: status, label: status },
      artist: { name } as Performance['engagement']['artist'],
    } as Performance['engagement'],
    stage: null,
    created_at: null,
    updated_at: null,
    deleted_at: null,
  }
}

describe('Wachtrij — parked-card list', () => {
  it('renders one card per parked performance', () => {
    const { wrapper } = mountWithVuexy(Wachtrij, {
      props: {
        performances: [parked('p1', 'Devin Wild'), parked('p2', 'Da Tweekaz')],
        selectedId: null,
      },
    })

    expect(wrapper.findAll('[data-perf-id]')).toHaveLength(2)
  })

  it('renders the empty-state copy when no performances are parked', () => {
    const { wrapper } = mountWithVuexy(Wachtrij, {
      props: { performances: [], selectedId: null },
    })

    expect(wrapper.text()).toMatch(/Geen optredens/i)
  })

  it('forwards a card pointerdown as cardPointerdown', async () => {
    const { wrapper } = mountWithVuexy(Wachtrij, {
      props: {
        performances: [parked('p1', 'Devin Wild')],
        selectedId: null,
      },
    })

    await wrapper.find('[data-perf-id="p1"]').trigger('pointerdown')

    expect(wrapper.emitted('cardPointerdown')).toHaveLength(1)
  })

  it('forwards a card click as cardSelect with performance + DOMRect', async () => {
    const { wrapper } = mountWithVuexy(Wachtrij, {
      props: {
        performances: [parked('p1', 'Devin Wild')],
        selectedId: null,
      },
    })

    await wrapper.find('[data-perf-id="p1"]').trigger('click')

    const events = wrapper.emitted('cardSelect')

    expect(events).toHaveLength(1)
    expect(events![0][0]).toMatchObject({ id: 'p1' })
  })

  it('shows the wachtrij item count badge', () => {
    const { wrapper } = mountWithVuexy(Wachtrij, {
      props: {
        performances: [parked('a', 'A'), parked('b', 'B'), parked('c', 'C')],
        selectedId: null,
      },
    })

    expect(wrapper.find('.tt-wachtrij__count').text()).toBe('3')
  })
})