import { describe, it, expect, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import BaseButton from '../../../src/components/shared/BaseButton.vue';

describe('BaseButton', () => {
  describe('Rendering', () => {
    it('renders with default props', () => {
      const wrapper = mount(BaseButton, {
        slots: {
          default: 'Click me'
        }
      });

      expect(wrapper.find('button').exists()).toBe(true);
      expect(wrapper.text()).toBe('Click me');
      expect(wrapper.classes()).toContain('base-button--primary');
      expect(wrapper.classes()).toContain('base-button--medium');
    });

    it('renders all button variants', () => {
      const variants = ['primary', 'secondary', 'danger', 'ghost', 'icon-only'];

      variants.forEach(variant => {
        const wrapper = mount(BaseButton, {
          props: { variant },
          slots: { default: 'Button' }
        });

        expect(wrapper.classes()).toContain(`base-button--${variant}`);
      });
    });

    it('renders all button sizes', () => {
      const sizes = ['small', 'medium', 'large'];

      sizes.forEach(size => {
        const wrapper = mount(BaseButton, {
          props: { size },
          slots: { default: 'Button' }
        });

        expect(wrapper.classes()).toContain(`base-button--${size}`);
      });
    });

    it('renders with icon on left', () => {
      const wrapper = mount(BaseButton, {
        props: {
          icon: '🚀',
          iconPosition: 'left'
        },
        slots: { default: 'Launch' }
      });

      const icons = wrapper.findAll('.icon');
      expect(icons.length).toBe(1);
      expect(icons[0].classes()).toContain('icon-left');
      expect(icons[0].text()).toBe('🚀');
    });

    it('renders with icon on right', () => {
      const wrapper = mount(BaseButton, {
        props: {
          icon: '→',
          iconPosition: 'right'
        },
        slots: { default: 'Next' }
      });

      const icons = wrapper.findAll('.icon');
      expect(icons.length).toBe(1);
      expect(icons[0].classes()).toContain('icon-right');
      expect(icons[0].text()).toBe('→');
    });

    it('renders as icon-only button when no slot content', () => {
      const wrapper = mount(BaseButton, {
        props: {
          icon: '×'
        }
      });

      expect(wrapper.classes()).toContain('base-button--icon-only');
      expect(wrapper.text()).toBe('×');
    });

    it('renders as full width', () => {
      const wrapper = mount(BaseButton, {
        props: { fullWidth: true },
        slots: { default: 'Button' }
      });

      expect(wrapper.classes()).toContain('base-button--full-width');
    });
  });

  describe('Button Types', () => {
    it('renders with button type by default', () => {
      const wrapper = mount(BaseButton);
      expect(wrapper.attributes('type')).toBe('button');
    });

    it('renders with submit type', () => {
      const wrapper = mount(BaseButton, {
        props: { type: 'submit' }
      });
      expect(wrapper.attributes('type')).toBe('submit');
    });

    it('renders with reset type', () => {
      const wrapper = mount(BaseButton, {
        props: { type: 'reset' }
      });
      expect(wrapper.attributes('type')).toBe('reset');
    });
  });

  describe('Loading State', () => {
    it('shows spinner when loading', () => {
      const wrapper = mount(BaseButton, {
        props: { loading: true },
        slots: { default: 'Loading...' }
      });

      expect(wrapper.find('.spinner').exists()).toBe(true);
      expect(wrapper.classes()).toContain('base-button--loading');
    });

    it('hides icon when loading', () => {
      const wrapper = mount(BaseButton, {
        props: {
          loading: true,
          icon: '🚀'
        },
        slots: { default: 'Launch' }
      });

      expect(wrapper.find('.icon').exists()).toBe(false);
      expect(wrapper.find('.spinner').exists()).toBe(true);
    });

    it('makes button text screen-reader only when loading', () => {
      const wrapper = mount(BaseButton, {
        props: { loading: true },
        slots: { default: 'Processing' }
      });

      const textSpan = wrapper.find('span:not(.spinner)');
      expect(textSpan.classes()).toContain('sr-only');
    });

    it('does not emit click when loading', async () => {
      const wrapper = mount(BaseButton, {
        props: { loading: true },
        slots: { default: 'Button' }
      });

      await wrapper.trigger('click');
      expect(wrapper.emitted('click')).toBeUndefined();
    });
  });

  describe('Disabled State', () => {
    it('applies disabled class', () => {
      const wrapper = mount(BaseButton, {
        props: { disabled: true },
        slots: { default: 'Button' }
      });

      expect(wrapper.classes()).toContain('base-button--disabled');
      expect(wrapper.attributes('disabled')).toBeDefined();
    });

    it('does not emit click when disabled', async () => {
      const wrapper = mount(BaseButton, {
        props: { disabled: true },
        slots: { default: 'Button' }
      });

      await wrapper.trigger('click');
      expect(wrapper.emitted('click')).toBeUndefined();
    });
  });

  describe('Click Events', () => {
    it('emits click event when clicked', async () => {
      const wrapper = mount(BaseButton, {
        slots: { default: 'Button' }
      });

      await wrapper.trigger('click');
      expect(wrapper.emitted('click')).toBeTruthy();
      expect(wrapper.emitted('click')).toHaveLength(1);
    });

    it('passes event to click handler', async () => {
      const wrapper = mount(BaseButton, {
        slots: { default: 'Button' }
      });

      await wrapper.trigger('click');
      const clickEvents = wrapper.emitted('click');
      expect(clickEvents[0][0]).toBeInstanceOf(Event);
    });

    it('can be clicked multiple times', async () => {
      const wrapper = mount(BaseButton, {
        slots: { default: 'Button' }
      });

      await wrapper.trigger('click');
      await wrapper.trigger('click');
      await wrapper.trigger('click');

      expect(wrapper.emitted('click')).toHaveLength(3);
    });
  });

  describe('Accessibility', () => {
    it('has proper focus-visible styling', () => {
      const wrapper = mount(BaseButton, {
        slots: { default: 'Button' }
      });

      // Check that focus-visible class exists in CSS (component has focus styling)
      expect(wrapper.html()).toContain('button');
    });

    it('spinner has aria-hidden', () => {
      const wrapper = mount(BaseButton, {
        props: { loading: true },
        slots: { default: 'Loading' }
      });

      const spinner = wrapper.find('.spinner');
      expect(spinner.attributes('aria-hidden')).toBe('true');
    });

    it('maintains text for screen readers when loading', () => {
      const wrapper = mount(BaseButton, {
        props: { loading: true },
        slots: { default: 'Submit Form' }
      });

      expect(wrapper.text()).toContain('Submit Form');
    });
  });

  describe('Edge Cases', () => {
    it('handles empty slot gracefully', () => {
      const wrapper = mount(BaseButton);
      expect(wrapper.find('button').exists()).toBe(true);
    });

    it('handles both loading and disabled', () => {
      const wrapper = mount(BaseButton, {
        props: {
          loading: true,
          disabled: true
        },
        slots: { default: 'Button' }
      });

      expect(wrapper.classes()).toContain('base-button--loading');
      expect(wrapper.classes()).toContain('base-button--disabled');
      expect(wrapper.attributes('disabled')).toBeDefined();
    });

    it('validates variant prop', () => {
      // Valid variants should not throw
      expect(() => {
        mount(BaseButton, {
          props: { variant: 'primary' }
        });
      }).not.toThrow();

      // Invalid variant should fail validation (but mount won't throw, just warn)
      const wrapper = mount(BaseButton, {
        props: { variant: 'invalid' }
      });
      expect(wrapper.exists()).toBe(true);
    });

    it('validates size prop', () => {
      expect(() => {
        mount(BaseButton, {
          props: { size: 'medium' }
        });
      }).not.toThrow();
    });

    it('validates type prop', () => {
      expect(() => {
        mount(BaseButton, {
          props: { type: 'submit' }
        });
      }).not.toThrow();
    });
  });
});