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

vi.mock('vue-chartjs', () => ({
  Line: {
    name: 'Line',
    template: '<div class="mock-chart" />',
    props: ['data', 'options'],
  },
}))

describe('QsofaHistory', () => {
  beforeEach(() => {
    window.matchMedia = vi.fn().mockReturnValue({ matches: false })
  })

  const history = [
    {
      activeCriteria: 1,
      criteria: { respRate: 24, systolicBp: null, avpu: null },
      screenAlertFired: false,
      evaluatedAt: '2026-06-23T10:00:00Z',
    },
    {
      activeCriteria: 2,
      criteria: { respRate: 24, systolicBp: 95, avpu: null },
      screenAlertFired: true,
      evaluatedAt: '2026-06-23T14:00:00Z',
    },
  ]

  it('rendersTitleAndChart', () => {
    const wrapper = mount(QsofaHistory, { props: { history } })
    expect(wrapper.text()).toContain('qSOFA Screen Over Time')
    expect(wrapper.find('.mock-chart').exists()).toBe(true)
  })

  it('sortsHistoryChronologically', () => {
    const wrapper = mount(QsofaHistory, { props: { history: [...history].reverse() } })
    const chart = wrapper.findComponent({ name: 'Line' })
    const counts = chart.props('data').datasets.find(d => d.label === 'Active criteria').data
    expect(counts).toEqual([1, 2])
  })

  it('marksAlertFiredPoints', () => {
    const wrapper = mount(QsofaHistory, { props: { history } })
    const chart = wrapper.findComponent({ name: 'Line' })
    const total = chart.props('data').datasets.find(d => d.label === 'Active criteria')
    expect(total.pointStyle).toEqual(['circle', 'star'])
  })
})
