import { mount } from '@vue/test-utils';
import VTooltip from './VTooltip.vue';
import { describe, it, expect } from 'vitest';

describe('VTooltip.vue', () => {
  it('renders default slot content (trigger)', () => {
    const triggerContent = '<button>Hover Me</button>';
    const wrapper = mount(VTooltip, {
      props: { text: 'Tooltip text' },
      slots: { default: triggerContent },
    });
    const trigger = wrapper.find('.tooltip-trigger');
    expect(trigger.exists()).toBe(true);
    expect(trigger.html()).toContain(triggerContent);
  });

  it('renders tooltip text with correct text prop', () => {
    const tipText = 'This is the tooltip content.';
    const wrapper = mount(VTooltip, {
      props: { text: tipText },
      slots: { default: '<span>Trigger</span>' },
    });
    const tooltipTextElement = wrapper.find('.tooltip-text');
    expect(tooltipTextElement.exists()).toBe(true);
    expect(tooltipTextElement.text()).toBe(tipText);
  });

  it('applies position-specific class to the root wrapper', () => {
    const wrapperTop = mount(VTooltip, {
      props: { text: 'Hi', position: 'top' },
      slots: { default: 'Trg' },
    });
    expect(wrapperTop.find('.tooltip-wrapper').classes()).toContain('tooltip-top');

    const wrapperBottom = mount(VTooltip, {
      props: { text: 'Hi', position: 'bottom' },
      slots: { default: 'Trg' },
    });
    expect(wrapperBottom.find('.tooltip-wrapper').classes()).toContain('tooltip-bottom');

    const wrapperLeft = mount(VTooltip, {
      props: { text: 'Hi', position: 'left' },
      slots: { default: 'Trg' },
    });
    expect(wrapperLeft.find('.tooltip-wrapper').classes()).toContain('tooltip-left');

    const wrapperRight = mount(VTooltip, {
      props: { text: 'Hi', position: 'right' },
      slots: { default: 'Trg' },
    });
    expect(wrapperRight.find('.tooltip-wrapper').classes()).toContain('tooltip-right');
  });

  it('defaults to "top" position if not specified', () => {
    const wrapper = mount(VTooltip, {
      props: { text: 'Default position' },
      slots: { default: 'Trigger' },
    });
    expect(wrapper.find('.tooltip-wrapper').classes()).toContain('tooltip-top');
  });


  it('applies provided id to tooltip-text and aria-describedby to trigger', () => {
    const customId = 'my-tooltip-123';
    const wrapper = mount(VTooltip, {
      props: { text: 'With ID', id: customId },
      slots: { default: 'Trigger Element' },
    });
    expect(wrapper.find('.tooltip-text').attributes('id')).toBe(customId);
    expect(wrapper.find('.tooltip-trigger').attributes('aria-describedby')).toBe(customId);
  });

  it('generates a unique id for tooltip-text if id prop is not provided', () => {
    const wrapper = mount(VTooltip, {
      props: { text: 'Auto ID' },
      slots: { default: 'Trigger' },
    });
    const tooltipTextElement = wrapper.find('.tooltip-text');
    const generatedId = tooltipTextElement.attributes('id');
    expect(generatedId).toMatch(/^v-tooltip-/);
    expect(wrapper.find('.tooltip-trigger').attributes('aria-describedby')).toBe(generatedId);
  });

  it('tooltip-text has role="tooltip"', () => {
    const wrapper = mount(VTooltip, {
      props: { text: 'Role test' },
      slots: { default: 'Trigger' },
    });
    expect(wrapper.find('.tooltip-text').attributes('role')).toBe('tooltip');
  });

  it('tooltip-trigger has tabindex="0"', () => {
    const wrapper = mount(VTooltip, {
      props: { text: 'Focus test' },
      slots: { default: '<span>Non-focusable by default</span>' },
    });
    expect(wrapper.find('.tooltip-trigger').attributes('tabindex')).toBe('0');
  });

  // Note: Testing CSS-driven visibility on hover/focus is generally outside the scope of JSDOM unit tests.
  // These tests would typically be done in an E2E testing environment with a real browser.
  // We can, however, test that the structure and attributes that enable this CSS are present.
});
