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

describe('Tooltip.content dual-form', () => {
  it('renders content as text via prop when slot absent', () => {
    const wrapper = mount(Tooltip, { props: { content: 'Hello', open: true } })

    expect(wrapper.find('.tooltip-content').text()).toBe('Hello')
  })

  it('renders #content slot when provided (slot wins over prop)', () => {
    const wrapper = mount(Tooltip, {
      props: { content: 'Fallback', open: true },
      slots: { content: '<em>Rich tip</em>' },
    })

    const tip = wrapper.find('.tooltip-content')
    expect(tip.html()).toContain('<em>Rich tip</em>')
    expect(tip.text()).not.toContain('Fallback')
  })

  it('keeps default slot as trigger element (no collision with content)', () => {
    const wrapper = mount(Tooltip, {
      props: { content: 'Tip', open: true },
      slots: { default: '<button>Trigger</button>' },
    })

    expect(wrapper.find('.tooltip-trigger button').text()).toBe('Trigger')
    expect(wrapper.find('.tooltip-content').text()).toBe('Tip')
  })
})

describe('Tooltip a11y (Q3 keyboard reachability)', () => {
  it('standalone anchor is keyboard-reachable: tabindex=0, no aria-hidden, aria-describedby → box id', () => {
    const wrapper = mount(BaseTooltip, { props: { content: 'Tip' } }) // no default slot → anchor branch
    const anchor = wrapper.find('.tooltip-anchor')
    expect(anchor.exists()).toBe(true)
    expect(anchor.attributes('tabindex')).toBe('0')
    expect(anchor.attributes('aria-hidden')).toBeUndefined()
    const describedBy = anchor.attributes('aria-describedby')
    expect(describedBy).toBeTruthy()
    expect(wrapper.find('.tooltip-box').attributes('id')).toBe(describedBy)
  })

  it('shows on keyboard focus and hides on blur (not hover-only)', async () => {
    const wrapper = mount(BaseTooltip, { props: { content: 'Tip' }, attachTo: document.body })
    const wrapEl = wrapper.find('.tooltip-wrap').element
    expect(wrapper.find('.tooltip-box').isVisible()).toBe(false)
    wrapEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
    await nextTick()
    expect(wrapper.find('.tooltip-box').isVisible()).toBe(true)
    wrapEl.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
    await nextTick()
    expect(wrapper.find('.tooltip-box').isVisible()).toBe(false)
    wrapper.unmount()
  })
})