import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'

import FigmaMembersGrid from '../playground/docs/components/FigmaMembersGrid.vue'
import StatusMatrix from '../playground/docs/components/StatusMatrix.vue'
import Progress from '../src/canonical/Progress.vue'
import { progressFigmaMembers } from '../figma-data/normalized/docs-figma-members/progress'

describe('FigmaMembersGrid (single-sourced via computeCoverageView)', () => {
  it('renders axis chips, dark-theme variant cells, and the shared chip class', () => {
    const wrapper = mount(FigmaMembersGrid, {
      props: { members: progressFigmaMembers, component: Progress },
    })

    expect(wrapper.find('.figma-members-grid__axes').exists()).toBe(true)
    expect(wrapper.findAll('.figma-members-grid__chip').length).toBeGreaterThan(0)
    // renamed away from the old .coverage-chip (global-class collision fix)
    expect(wrapper.find('.coverage-chip').exists()).toBe(false)

    const cells = wrapper.findAll('.figma-members-grid__cell')
    expect(cells).toHaveLength(8) // 8 dark-theme members out of 16 total
    expect(wrapper.text()).toContain('source=Progress · nodeId=4915:7287 · variant count=8')
  })
})

describe('StatusMatrix (single-sourced via computeStatusMatrixView)', () => {
  it('renders state-axis chips and one cell per state, size held constant', () => {
    const wrapper = mount(StatusMatrix, {
      props: { members: progressFigmaMembers, component: Progress },
    })

    expect(wrapper.find('.status-matrix__axes').exists()).toBe(true)
    expect(wrapper.findAll('.status-matrix__chip').length).toBe(4) // default/success/error/warning

    const cells = wrapper.findAll('.status-matrix__cell')
    expect(cells).toHaveLength(4)
    expect(wrapper.text()).toContain('Held constant: size=M')
    expect(wrapper.text()).toContain('states=4')
  })

  it('renders the no-state-axis note when the component has no Figma state axis', () => {
    const membersWithNoStateAxis = {
      ...progressFigmaMembers,
      axes: progressFigmaMembers.axes.filter((axis) => axis.codeProp !== 'status'),
    }
    const wrapper = mount(StatusMatrix, {
      props: { members: membersWithNoStateAxis, component: Progress },
    })

    expect(wrapper.find('.status-matrix__cell').exists()).toBe(false)
    expect(wrapper.find('.status-matrix__empty').text()).toContain(
      'has no Figma-defined interaction/state axis',
    )
  })
})