import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import ProductTagFilter from '../app/components/product/ProductTagFilter.vue';
import type { Tag, TagGroup } from '../app/composables/useProductCenter';

const tagGroups: TagGroup[] = [
  { id: 'shipping', name: '物流渠道', icon: null, color: null, sortOrder: 1 },
  { id: 'position', name: '印刷位置', icon: null, color: null, sortOrder: 2 },
  { id: 'craft', name: '印刷工艺', icon: null, color: null, sortOrder: 3 },
];

const tags: Tag[] = [
  {
    id: 'free-shipping',
    name: '包邮',
    color: null,
    fontColor: null,
    group: { id: 'shipping', name: '物流渠道', sortOrder: 1 },
  },
  {
    id: 'heat-transfer',
    name: '烫画',
    color: null,
    fontColor: null,
    group: { id: 'craft', name: '印刷工艺', sortOrder: 3 },
  },
];

describe('ProductTagFilter', () => {
  it('renders selected logistics and craft tags and removes them through the existing event', async () => {
    const wrapper = mount(ProductTagFilter, {
      props: {
        tags,
        tagGroups,
        selectedTagIds: ['free-shipping', 'heat-transfer'],
      },
    });

    const selectedTags = wrapper.findAll('.selected-tag');
    expect(selectedTags.map((tag) => tag.text())).toEqual(['包邮', '烫画']);

    await selectedTags[0]?.find('.selected-tag-remove').trigger('click');
    expect(wrapper.emitted('toggle-tag')).toEqual([['free-shipping']]);
  });

  it('places a craft-only selection at the left edge of the selected tag row', () => {
    const wrapper = mount(ProductTagFilter, {
      props: { tags, tagGroups, selectedTagIds: ['heat-transfer'] },
    });

    const selectedRow = wrapper.get('.selected-tags');
    expect(selectedRow.findAll('.selected-tag')).toHaveLength(1);
    expect(selectedRow.get('.selected-tag').text()).toBe('烫画');
    expect(selectedRow.classes()).toContain('craft-only');
  });

  it('closes the dropdown after selection and when clicking outside', async () => {
    const wrapper = mount(ProductTagFilter, {
      attachTo: document.body,
      props: { tags, tagGroups, selectedTagIds: [] },
    });

    await wrapper.findAll('.filter-button')[0]?.trigger('click');
    expect(wrapper.find('.menu').exists()).toBe(true);
    await wrapper.get('.menu button').trigger('click');
    expect(wrapper.find('.menu').exists()).toBe(false);

    await wrapper.findAll('.filter-button')[0]?.trigger('click');
    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    await wrapper.vm.$nextTick();
    expect(wrapper.find('.menu').exists()).toBe(false);
    wrapper.unmount();
  });

  it('uses backend group membership and excludes the print-position group', async () => {
    const craftTags: Tag[] = ['烫画', '直喷', '不打印'].map((name, index) => ({
      id: `craft-${index}`,
      name,
      color: null,
      fontColor: null,
      group: { id: 'craft', name: '印刷工艺', sortOrder: 3 },
    }));
    const positionTag: Tag = {
      id: 'single-side', name: '单面印', color: null, fontColor: null,
      group: { id: 'position', name: '印刷位置', sortOrder: 2 },
    };
    const wrapper = mount(ProductTagFilter, {
      props: { tags: [tags[0]!, ...craftTags, positionTag], tagGroups, selectedTagIds: [] },
    });

    expect(wrapper.findAll('.filter-button').map((item) => item.text())).toEqual(['物流', '工艺']);
    await wrapper.findAll('.filter-button')[1]?.trigger('click');

    expect(wrapper.findAll('.menu button').map((item) => item.text())).toEqual([
      '烫画',
      '直喷',
      '不打印',
    ]);
  });
});
