import { mount } from '@vue/test-utils';
import VTab from './VTab.vue';
import { TabsProviderKey } from './types';
import { ref } from 'vue';
import type { TabId, TabsContext } from './types';

// Mock a VTabs provider for VTab tests
const mockTabsContext = (activeTabIdValue: TabId | null = 'test1'): TabsContext => ({
  activeTabId: ref(activeTabIdValue),
  selectTab: vi.fn(),
});

describe('VTab.vue', () => {
  it('renders title prop when no default slot', () => {
    const wrapper = mount(VTab, {
      props: { id: 'tab1', title: 'My Tab Title' },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext() } },
    });
    expect(wrapper.text()).toBe('My Tab Title');
  });

  it('renders default slot content instead of title prop', () => {
    const slotContent = '<i>Custom Tab Content</i>';
    const wrapper = mount(VTab, {
      props: { id: 'tab1', title: 'Ignored Title' },
      slots: { default: slotContent },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext() } },
    });
    expect(wrapper.html()).toContain(slotContent);
    expect(wrapper.text()).not.toBe('Ignored Title');
  });

  it('computes isActive correctly', () => {
    const context = mockTabsContext('activeTab');
    const wrapper = mount(VTab, {
      props: { id: 'activeTab' },
      global: { provide: { [TabsProviderKey as any]: context } },
    });
    expect(wrapper.vm.isActive).toBe(true);
    expect(wrapper.classes()).toContain('active');
    expect(wrapper.attributes('aria-selected')).toBe('true');

    const wrapperInactive = mount(VTab, {
      props: { id: 'inactiveTab' },
      global: { provide: { [TabsProviderKey as any]: context } },
    });
    expect(wrapperInactive.vm.isActive).toBe(false);
    expect(wrapperInactive.classes()).not.toContain('active');
    expect(wrapperInactive.attributes('aria-selected')).toBe('false');
  });

  it('calls selectTab with its id on click if not disabled', async () => {
    const context = mockTabsContext('anotherTab');
    const wrapper = mount(VTab, {
      props: { id: 'clickableTab', title: 'Click Me' },
      global: { provide: { [TabsProviderKey as any]: context } },
    });
    await wrapper.trigger('click');
    expect(context.selectTab).toHaveBeenCalledWith('clickableTab');
  });

  it('does not call selectTab on click if disabled', async () => {
    const context = mockTabsContext();
    const wrapper = mount(VTab, {
      props: { id: 'disabledTab', title: 'Disabled', disabled: true },
      global: { provide: { [TabsProviderKey as any]: context } },
    });
    await wrapper.trigger('click');
    expect(context.selectTab).not.toHaveBeenCalled();
  });

  it('applies disabled attribute and class when disabled prop is true', () => {
    const wrapper = mount(VTab, {
      props: { id: 'tab1', disabled: true },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext() } },
    });
    expect(wrapper.attributes('disabled')).toBeDefined();
    expect(wrapper.classes()).toContain('disabled');
  });

  it('sets ARIA attributes correctly', () => {
    const wrapper = mount(VTab, {
      props: { id: 'contactTab' },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext('contactTab') } },
    });
    expect(wrapper.attributes('role')).toBe('tab');
    expect(wrapper.attributes('id')).toBe('tab-contactTab');
    expect(wrapper.attributes('aria-controls')).toBe('panel-contactTab');
    expect(wrapper.attributes('aria-selected')).toBe('true');
    expect(wrapper.attributes('tabindex')).toBe('0'); // Active tab should be tabbable
  });

  it('sets tabindex to -1 for inactive tabs', () => {
     const wrapper = mount(VTab, {
      props: { id: 'inactiveContactTab' },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext('activeTab') } }, // Different active tab
    });
    expect(wrapper.attributes('tabindex')).toBe('-1');
  });


  it('throws error if not used within VTabs (no context provided)', () => {
    // Prevent console error from Vue about missing provide
    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(()_ => {});
    expect(() => mount(VTab, { props: { id: 'tab1' } })).toThrow('VTab must be used within a VTabs component.');
    consoleErrorSpy.mockRestore();
  });
});
