import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ObservationRow from '@/components/ObservationRow.vue'
import type { DraftObservation } from '@/types'

function makeObservation(overrides: Partial<DraftObservation> = {}): DraftObservation {
  return {
    id: 'obs-1',
    batchId: 'b1',
    observationCode: 'HEART_RATE',
    value: 72,
    unit: 'bpm',
    recordedAt: '2026-06-27T10:00:00Z',
    note: null,
    ...overrides,
  }
}

describe('ObservationRow', () => {
  it('renders observation code options', () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation() },
    })
    const options = wrapper.findAll<HTMLOptionElement>('select option')
    const values = options.map((o) => o.element.value)
    expect(values).toContain('HEART_RATE')
    expect(values).toContain('TEMP_C')
    expect(values).toContain('BP_SYSTOLIC')
    expect(values).toContain('SPO2')
    expect(values).toContain('POTASSIUM_MEQ_L')
  })

  it('renders observation values in inputs', () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation({ value: 98.6, unit: '°F' }) },
    })
    const numberInput = wrapper.find<HTMLInputElement>('input[type="number"]')
    expect(numberInput.element.value).toBe('98.6')

    const textInputs = wrapper.findAll<HTMLInputElement>('input[type="text"]')
    const unitInput = textInputs[0]
    expect(unitInput.element.value).toBe('°F')
  })

  it('emits update event on code change', async () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation() },
    })
    const select = wrapper.find('select')
    await select.setValue('TEMP_C')

    expect(wrapper.emitted('update')).toBeTruthy()
    expect(wrapper.emitted('update')![0]).toEqual(['observationCode', 'TEMP_C'])
  })

  it('emits update event on value change', async () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation() },
    })
    const numberInput = wrapper.find('input[type="number"]')
    await numberInput.setValue('80')
    await numberInput.trigger('change')

    expect(wrapper.emitted('update')).toBeTruthy()
    const emitted = wrapper.emitted('update')![0]
    expect(emitted[0]).toBe('value')
    expect(emitted[1]).toBe(80)
  })

  it('shows delete button in entry mode (not readonly)', () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation() },
    })
    const deleteBtn = wrapper.find('button')
    expect(deleteBtn.exists()).toBe(true)
    expect(deleteBtn.text()).toBe('Remove')
  })

  it('emits delete event on remove click', async () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation({ id: 'obs-42' }) },
    })
    await wrapper.find('button').trigger('click')

    expect(wrapper.emitted('delete')).toBeTruthy()
    expect(wrapper.emitted('delete')![0]).toEqual(['obs-42'])
  })

  it('disables inputs in readonly mode', () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation(), readonly: true },
    })
    const select = wrapper.find('select')
    expect(select.element.disabled).toBe(true)

    const numberInput = wrapper.find<HTMLInputElement>('input[type="number"]')
    expect(numberInput.element.disabled).toBe(true)
  })

  it('hides delete button in readonly mode', () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation(), readonly: true },
    })
    const button = wrapper.find('button')
    expect(button.exists()).toBe(false)
  })

  it('shows verification checkbox when showVerified is true', () => {
    const wrapper = mount(ObservationRow, {
      props: {
        observation: makeObservation(),
        readonly: true,
        showVerified: true,
        verified: false,
      },
    })
    const checkbox = wrapper.find<HTMLInputElement>('input[type="checkbox"]')
    expect(checkbox.exists()).toBe(true)
    expect(checkbox.element.checked).toBe(false)
  })

  it('reflects verified state in checkbox', () => {
    const wrapper = mount(ObservationRow, {
      props: {
        observation: makeObservation(),
        readonly: true,
        showVerified: true,
        verified: true,
      },
    })
    const checkbox = wrapper.find<HTMLInputElement>('input[type="checkbox"]')
    expect(checkbox.element.checked).toBe(true)
  })

  it('emits verify event when checkbox is toggled', async () => {
    const wrapper = mount(ObservationRow, {
      props: {
        observation: makeObservation({ id: 'obs-99' }),
        readonly: true,
        showVerified: true,
        verified: false,
      },
    })
    const checkbox = wrapper.find('input[type="checkbox"]')
    await checkbox.setValue(true)

    expect(wrapper.emitted('verify')).toBeTruthy()
    expect(wrapper.emitted('verify')![0]).toEqual(['obs-99', true])
  })

  it('hides verification checkbox when showVerified is false', () => {
    const wrapper = mount(ObservationRow, {
      props: { observation: makeObservation(), showVerified: false },
    })
    const checkbox = wrapper.find('input[type="checkbox"]')
    expect(checkbox.exists()).toBe(false)
  })
})
