import { describe, it, expect, beforeEach, vi } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import FeedbackButtons from '@/components/feedback/FeedbackButtons.vue'

const { feedbackByAlert } = vi.hoisted(() => {
  const { ref } = require('vue')
  return { feedbackByAlert: ref({}) }
})

vi.mock('@/stores/alertQuality', () => ({
  useAlertQualityStore: () => ({
    async submitFeedback(alertId, rating, comment = '') {
      feedbackByAlert.value = {
        ...feedbackByAlert.value,
        [alertId]: { rating, comment, submittedAt: '2026-06-23T00:00:00Z' },
      }
      return { id: 'fb-1', createdAt: '2026-06-23T00:00:00Z' }
    },
    getFeedback: (alertId) => feedbackByAlert.value[alertId] ?? null,
  }),
}))

const defaultProps = {
  alertId: 'alert-1',
  alertType: 'SepsisWarning',
  severity: 'Critical',
}

function ratingButtons(wrapper) {
  return wrapper.findAll('[role="radio"]')
}

function ratingButton(wrapper, label) {
  return ratingButtons(wrapper).find(b => b.text() === label)
}

describe('FeedbackButtons', () => {
  beforeEach(() => {
    feedbackByAlert.value = {}
    setActivePinia(createPinia())
  })

  it('rendersAllSixRatingButtons', () => {
    const wrapper = mount(FeedbackButtons, { props: defaultProps })
    expect(ratingButtons(wrapper)).toHaveLength(6)
  })

  it('hidesRatingButtonsWhenCannotSubmit', () => {
    const wrapper = mount(FeedbackButtons, {
      props: { ...defaultProps, canSubmit: false },
    })

    expect(ratingButtons(wrapper)).toHaveLength(0)
    expect(wrapper.text()).toContain('Acknowledge this alert to rate it.')
  })

  it('selectingRatingHighlightsButton', async () => {
    const wrapper = mount(FeedbackButtons, { props: defaultProps })
    const usefulBtn = ratingButton(wrapper, 'Useful')

    await usefulBtn.trigger('click')
    await flushPromises()

    expect(usefulBtn.classes()).toContain('ring-2')
    expect(usefulBtn.classes()).toContain('bg-green-100')
  })

  it('showNotesFieldOnPlusNote', async () => {
    const wrapper = mount(FeedbackButtons, { props: defaultProps })
    await ratingButton(wrapper, 'Useful').trigger('click')
    await flushPromises()

    const noteBtn = wrapper.findAll('button').find(b => b.text() === '+ Note')
    await noteBtn.trigger('click')

    expect(wrapper.find('input').exists()).toBe(true)
  })

  it('ariaCheckedOnSelectedRating', async () => {
    const wrapper = mount(FeedbackButtons, { props: defaultProps })
    const usefulBtn = ratingButton(wrapper, 'Useful')
    const fpBtn = ratingButton(wrapper, 'False positive')

    await usefulBtn.trigger('click')
    await flushPromises()

    expect(usefulBtn.attributes('aria-checked')).toBe('true')
    expect(fpBtn.attributes('aria-checked')).toBe('false')
  })

  it('keyboardNavigationWorks', async () => {
    const wrapper = mount(FeedbackButtons, { props: defaultProps })
    const buttons = ratingButtons(wrapper)

    expect(buttons.every(b => b.element.tagName === 'BUTTON')).toBe(true)

    await ratingButton(wrapper, 'Useful').trigger('click')
    await flushPromises()
    expect(ratingButton(wrapper, 'Useful').attributes('aria-checked')).toBe('true')

    await ratingButton(wrapper, 'Too early').trigger('click')
    await flushPromises()
    expect(ratingButton(wrapper, 'Too early').attributes('aria-checked')).toBe('false')
    expect(ratingButton(wrapper, 'Useful').attributes('aria-checked')).toBe('true')

    const noteBtn = wrapper.findAll('button').find(b => b.text() === '+ Note')
    await noteBtn.trigger('click')

    const input = wrapper.get('input')
    await input.setValue('Expected after metoprolol')
    await input.trigger('keydown.enter')
    await flushPromises()

    expect(wrapper.find('input').exists()).toBe(false)
  })
})