import { mount } from '@vue/test-utils';
import VAvatar from './VAvatar.vue';
import VIcon from './VIcon.vue'; // For testing slot content with an icon
import { describe, it, expect, vi } from 'vitest';

describe('VAvatar.vue', () => {
  it('renders an image when src is provided', () => {
    const src = 'https://via.placeholder.com/40';
    const wrapper = mount(VAvatar, { props: { src, alt: 'Test Alt' } });
    const img = wrapper.find('img');
    expect(img.exists()).toBe(true);
    expect(img.attributes('src')).toBe(src);
    expect(img.attributes('alt')).toBe('Test Alt');
  });

  it('renders initials when src is not provided but initials are', () => {
    const wrapper = mount(VAvatar, { props: { initials: 'JD' } });
    expect(wrapper.find('img').exists()).toBe(false);
    const initialsSpan = wrapper.find('.avatar-initials');
    expect(initialsSpan.exists()).toBe(true);
    expect(initialsSpan.text()).toBe('JD');
  });

  it('renders slot content when src and initials are not provided', () => {
    const wrapper = mount(VAvatar, {
      slots: {
        default: '<VIcon name="user" />', // Using VIcon for a more realistic slot
      },
      global: {
        components: { VIcon } // Register VIcon locally for this test
      }
    });
    expect(wrapper.find('img').exists()).toBe(false);
    expect(wrapper.find('.avatar-initials').exists()).toBe(false);
    const icon = wrapper.findComponent(VIcon);
    expect(icon.exists()).toBe(true);
    expect(icon.props('name')).toBe('user');
  });

  it('renders initials if image fails to load and initials are provided', async () => {
    const wrapper = mount(VAvatar, {
      props: { src: 'invalid-image-url.jpg', initials: 'FL' },
    });
    const img = wrapper.find('img');
    expect(img.exists()).toBe(true); // Image still exists in DOM initially

    // Trigger the error event on the image
    await img.trigger('error');

    // Now it should render initials
    expect(wrapper.find('img').exists()).toBe(false); // This depends on implementation (v-if vs display:none)
                                                      // Current VAvatar.vue removes img with v-if
    const initialsSpan = wrapper.find('.avatar-initials');
    expect(initialsSpan.exists()).toBe(true);
    expect(initialsSpan.text()).toBe('FL');
  });

  it('renders slot content if image fails to load and no initials are provided but slot is', async () => {
    const wrapper = mount(VAvatar, {
      props: { src: 'another-invalid.jpg' },
      slots: { default: '<span>Fallback Slot</span>' },
    });
    const img = wrapper.find('img');
    expect(img.exists()).toBe(true);

    await img.trigger('error');

    expect(wrapper.find('img').exists()).toBe(false); // Assuming v-if removes it
    expect(wrapper.find('.avatar-initials').exists()).toBe(false);
    expect(wrapper.text()).toBe('Fallback Slot');
  });

  it('renders nothing (or only .avatar div) if image fails, no initials, and no slot', async () => {
    const wrapper = mount(VAvatar, {
      props: { src: 'failure.jpg' },
    });
    const img = wrapper.find('img');
    expect(img.exists()).toBe(true);
    await img.trigger('error');
    expect(wrapper.find('img').exists()).toBe(false);
    expect(wrapper.find('.avatar-initials').exists()).toBe(false);
    expect(wrapper.find('.avatar').element.innerHTML).toBe(''); // Check if it's empty
  });


  it('applies the base avatar class', () => {
    const wrapper = mount(VAvatar, { props: { initials: 'T' } });
    expect(wrapper.classes()).toContain('avatar');
  });

  it('uses the alt prop for the image', () => {
    const wrapper = mount(VAvatar, { props: { src: 'image.png', alt: 'My Avatar' } });
    expect(wrapper.find('img').attributes('alt')).toBe('My Avatar');
  });

  it('defaults alt prop to "Avatar"', () => {
    const wrapper = mount(VAvatar, { props: { src: 'image.png' } });
    expect(wrapper.find('img').attributes('alt')).toBe('Avatar');
  });

  it('resets image error state when src changes', async () => {
    const wrapper = mount(VAvatar, {
      props: { src: 'invalid.jpg', initials: 'IE' }
    });
    let img = wrapper.find('img');
    await img.trigger('error'); // Image fails, initials should show
    expect(wrapper.find('.avatar-initials').exists()).toBe(true);

    await wrapper.setProps({ src: 'valid.jpg' }); // Change src to a new one
    img = wrapper.find('img'); // Re-find img
    expect(img.exists()).toBe(true); // Image should now be shown
    expect(img.attributes('src')).toBe('valid.jpg');
    expect(wrapper.find('.avatar-initials').exists()).toBe(false); // Initials should be hidden
  });
});
