import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import CardGrid from '@/components/ui/CardGrid.vue'

describe('CardGrid', () => {
  const sample = {
    title: 'Sample results',
    cards: [
      {
        id: 'c1',
        title: 'Card one',
        subtitle: 'Subtitle one',
        image: 'https://example.com/1.jpg',
        meta: [
          { label: 'Price', value: '$80k' },
          { label: 'Area', value: '58m²' }
        ],
        description: 'Short description',
        details: [
          { label: 'Address', value: 'St. One' },
          { label: 'Floor', value: '4/9' }
        ],
        actions: [{ label: 'Open', url: 'https://example.com' }]
      },
      { id: 'c2', title: 'Card two', subtitle: 'Subtitle two' },
      { id: 'c3', title: 'Card three' },
      { id: 'c4', title: 'Card four' },
      { id: 'c5', title: 'Card five' }
    ]
  }

  beforeEach(() => {
    const el = document.createElement('div')
    el.id = 'teleport-target'
    document.body.appendChild(el)
  })

  it('renders title and up to 4 cards', () => {
    const wrapper = mount(CardGrid, { props: { data: sample } })
    expect(wrapper.text()).toContain('Sample results')
    const items = wrapper.findAll('.card-grid-item')
    expect(items).toHaveLength(4)
  })

  it('shows +N more indicator when more than 4 cards', () => {
    const wrapper = mount(CardGrid, { props: { data: sample } })
    expect(wrapper.find('.card-grid-more-text').exists()).toBe(true)
    expect(wrapper.text()).toContain('+1 more')
  })

  it('renders card meta labels and values', () => {
    const wrapper = mount(CardGrid, { props: { data: sample } })
    expect(wrapper.text()).toContain('Price')
    expect(wrapper.text()).toContain('$80k')
  })

  it('opens modal on card click', async () => {
    const wrapper = mount(CardGrid, { props: { data: sample } })
    const firstCard = wrapper.find('.card-grid-item')
    await firstCard.trigger('click')
    await nextTick()
    expect(document.querySelector('.card-modal')).not.toBeNull()
    expect(document.querySelector('.card-modal-title')?.textContent).toBe('Card one')
  })

  it('sets active card on click', async () => {
    const wrapper = mount(CardGrid, { props: { data: sample }, attachTo: document.body })
    await wrapper.find('.card-grid-item').trigger('click')
    await nextTick()
    expect(wrapper.vm.activeCard?.id).toBe('c1')
  })
})