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

describe('LimelightButton', () => {
  it('renders slot content', () => {
    const wrapper = mount(LimelightButton, { slots: { default: 'Click me' } });
    expect(wrapper.text()).toContain('Click me');
  });

  it('renders a <button> element', () => {
    const wrapper = mount(LimelightButton, { slots: { default: 'Test' } });
    expect(wrapper.element.tagName).toBe('BUTTON');
  });

  it('applies the variant class', () => {
    const wrapper = mount(LimelightButton, {
      props: { variant: 'danger' },
      slots: { default: 'Delete' },
    });
    expect(wrapper.classes()).toContain('btn--danger');
  });

  it.each(['primary', 'outline', 'ghost', 'danger'] as const)(
    'applies btn--%s class for variant %s',
    (variant) => {
      const wrapper = mount(LimelightButton, {
        props: { variant },
        slots: { default: 'Btn' },
      });
      expect(wrapper.classes()).toContain(`btn--${variant}`);
    },
  );

  it('is disabled when disabled prop is true', () => {
    const wrapper = mount(LimelightButton, {
      props: { disabled: true },
      slots: { default: 'Disabled' },
    });
    expect((wrapper.element as HTMLButtonElement).disabled).toBe(true);
    expect(wrapper.classes()).toContain('btn--disabled');
  });

  it('emits click when clicked', async () => {
    const wrapper = mount(LimelightButton, { slots: { default: 'Click' } });
    await wrapper.trigger('click');
    expect(wrapper.emitted('click')).toBeTruthy();
  });

  it('does not emit click when disabled', async () => {
    const wrapper = mount(LimelightButton, {
      props: { disabled: true },
      slots: { default: 'Click' },
    });
    await wrapper.trigger('click');
    // Native disabled button blocks the click event
    expect((wrapper.element as HTMLButtonElement).disabled).toBe(true);
  });

  it('always has the btn base class', () => {
    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
    expect(wrapper.classes()).toContain('btn');
  });

  it('has type="button" to prevent accidental form submission', () => {
    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
    expect((wrapper.element as HTMLButtonElement).type).toBe('button');
  });

  it('does not add a variant class when variant is omitted', () => {
    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
    const variantClasses = wrapper.classes().filter((c) => c.startsWith('btn--'));
    expect(variantClasses).toEqual([]);
  });

  it('keeps the variant class when also disabled', () => {
    const wrapper = mount(LimelightButton, {
      props: { variant: 'primary', disabled: true },
      slots: { default: 'Btn' },
    });
    expect(wrapper.classes()).toContain('btn--primary');
    expect(wrapper.classes()).toContain('btn--disabled');
  });

  it('is not disabled by default', () => {
    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
    expect((wrapper.element as HTMLButtonElement).disabled).toBe(false);
    expect(wrapper.classes()).not.toContain('btn--disabled');
  });

  it('renders HTML slot content', () => {
    const wrapper = mount(LimelightButton, {
      slots: { default: '<strong>Bold</strong>' },
    });
    expect(wrapper.find('strong').exists()).toBe(true);
    expect(wrapper.find('strong').text()).toBe('Bold');
  });
});
