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

// CANONICAL-028: 1:1 to published Figma `Pill Status` (8 variants Status×Active).
// Token SoT (theme-aware): Active=True → hue (red/brand/blue/grey-7) for
// border/dot/text + bg=hue@18% (Inactive bg=--line-deep@18%);
// Active=False → muted (bg=--bg-layer3, border=--line-deep, dot=--color-grey-7,
// text=--text-tips). We assert structure + resolved token expressions, not pixels.

const STATUSES = ['On-air', 'Preview', 'Analyzing', 'Inactive'] as const

// Active=True per-status hue token used for border/dot/text.
const HUE: Record<(typeof STATUSES)[number], string> = {
  'On-air': 'var(--red)',
  Preview: 'var(--brand)',
  Analyzing: 'var(--blue)',
  Inactive: 'var(--color-grey-7)',
}

// Active=True background base (hue @18%, except Inactive uses --line-deep @18%).
const BG_BASE: Record<(typeof STATUSES)[number], string> = {
  'On-air': 'var(--red)',
  Preview: 'var(--brand)',
  Analyzing: 'var(--blue)',
  Inactive: 'var(--line-deep)',
}

describe('PillStatus — trace attributes', () => {
  it('defaults to On-air / active=true', () => {
    const wrapper = mount(PillStatus)
    expect(wrapper.attributes('data-figma-component')).toBe('Pill Status')
    expect(wrapper.attributes('data-figma-status')).toBe('On-air')
    expect(wrapper.attributes('data-figma-active')).toBe('true')
    expect(wrapper.text()).toContain('On-air')
  })

  for (const status of STATUSES) {
    for (const active of [true, false]) {
      it(`emits trace attrs for ${status} / active=${active}`, () => {
        const wrapper = mount(PillStatus, { props: { status, active } })
        expect(wrapper.attributes('data-figma-component')).toBe('Pill Status')
        expect(wrapper.attributes('data-figma-status')).toBe(status)
        expect(wrapper.attributes('data-figma-active')).toBe(String(active))
      })
    }
  }
})

describe('PillStatus — resolved hue tokens (Active=True)', () => {
  for (const status of STATUSES) {
    it(`${status} binds hue border/dot/text + hue@18% bg`, () => {
      const html = mount(PillStatus, { props: { status, active: true } }).html()
      const hue = HUE[status]
      expect(html).toContain(`--pill-border: ${hue}`)
      expect(html).toContain(`--pill-dot: ${hue}`)
      expect(html).toContain(`--pill-text: ${hue}`)
      expect(html).toContain(`--pill-bg: color-mix(in srgb, ${BG_BASE[status]} 18%, transparent)`)
      // No raw hex (硬规则 #4).
      expect(html).not.toMatch(/#[0-9a-fA-F]{6}/)
    })
  }
})

describe('PillStatus — muted tokens (Active=False)', () => {
  for (const status of STATUSES) {
    it(`${status} is muted/neutral`, () => {
      const html = mount(PillStatus, { props: { status, active: false } }).html()
      expect(html).toContain('--pill-bg: var(--bg-layer3)')
      expect(html).toContain('--pill-border: var(--line-deep)')
      expect(html).toContain('--pill-dot: var(--color-grey-7)')
      expect(html).toContain('--pill-text: var(--text-tips)')
      expect(html).not.toMatch(/#[0-9a-fA-F]{6}/)
    })
  }
})

describe('PillStatus — count + label', () => {
  it('renders count when provided', () => {
    const wrapper = mount(PillStatus, { props: { status: 'On-air', count: 12 } })
    expect(wrapper.find('.pill__count').exists()).toBe(true)
    expect(wrapper.find('.pill__count').text()).toBe('12')
  })

  it('omits count when not provided', () => {
    const wrapper = mount(PillStatus, { props: { status: 'On-air' } })
    expect(wrapper.find('.pill__count').exists()).toBe(false)
  })

  it('accepts string count', () => {
    const wrapper = mount(PillStatus, { props: { status: 'Preview', count: '99+' } })
    expect(wrapper.find('.pill__count').text()).toBe('99+')
  })

  it('slot overrides default label', () => {
    const wrapper = mount(PillStatus, {
      props: { status: 'Analyzing' },
      slots: { default: 'Custom Label' },
    })
    expect(wrapper.text()).toContain('Custom Label')
  })
})