import { reactive } from 'vue'

export const tooltipState = reactive({
  isVisible: false,
  text: '',
  targetRect: null
})

export function showTooltip(el, text) {
  if (!text) return;

  if (!el.hasAttribute('aria-label')) {
    el.setAttribute('aria-label', text);
  }

  const rect = el.getBoundingClientRect();
  tooltipState.targetRect = {
    top: rect.top,
    left: rect.left,
    width: rect.width,
    bottom: rect.bottom
  };
  tooltipState.text = text;
  tooltipState.isVisible = true;
}

// Hide tooltip on any scroll event to avoid floating detached tooltips
if (typeof window !== 'undefined') {
  window.addEventListener('scroll', hideTooltip, { passive: true, capture: true })
}

export function hideTooltip() {
  tooltipState.isVisible = false;
}