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

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

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

  const history = [
    {
      eyeScore: 4,
      verbalScore: 5,
      motorScore: 6,
      totalScore: 15,
      classification: 'MILD',
      calculatedAt: '2026-06-23T10:00:00Z',
    },
    {
      eyeScore: 2,
      verbalScore: 3,
      motorScore: 3,
      totalScore: 8,
      classification: 'SEVERE',
      calculatedAt: '2026-06-23T14:00:00Z',
    },
  ]

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

  it('sortsHistoryChronologically', () => {
    const wrapper = mount(GcsHistory, { props: { history: [...history].reverse() } })
    const chart = wrapper.findComponent({ name: 'Line' })
    const totals = chart.props('data').datasets.find(d => d.label === 'GCS Total').data
    expect(totals).toEqual([15, 8])
  })

  it('includesComponentDatasets', () => {
    const wrapper = mount(GcsHistory, { props: { history } })
    const chart = wrapper.findComponent({ name: 'Line' })
    const labels = chart.props('data').datasets.map(d => d.label)
    expect(labels).toContain('Eye')
    expect(labels).toContain('Verbal')
    expect(labels).toContain('Motor')
    expect(labels).toContain('GCS Total')
  })
})