import { describe, it, expect, beforeEach } from 'vitest';
import { mount, type VueWrapper } from '@vue/test-utils';
import { createMemoryHistory, createRouter, type Router } from 'vue-router';
import { createPinia, setActivePinia } from 'pinia';
import { createVuetify } from 'vuetify';
import AppSidebar from '../../resources/js/components/layout/AppSidebar.vue';

async function setup(initialRoute = '/deals'): Promise<{ wrapper: VueWrapper; router: Router }> {
    setActivePinia(createPinia());
    const router = createRouter({
        history: createMemoryHistory(),
        routes: [
            { path: '/dashboard', component: { template: '<div />' } },
            { path: '/deals', component: { template: '<div />' } },
            { path: '/kanban', component: { template: '<div />' } },
        ],
    });
    await router.push(initialRoute);
    await router.isReady();
    const vuetify = createVuetify();
    const wrapper = mount(AppSidebar, {
        global: {
            plugins: [router, vuetify],
            stubs: {
                RouterLink: {
                    props: ['to'],
                    template: '<a :class="$attrs.class" :href="typeof to === \'string\' ? to : \'#\'"><slot /></a>',
                    inheritAttrs: false,
                },
            },
        },
    });
    return { wrapper, router };
}

describe('AppSidebar — redesigned shell', () => {
    beforeEach(() => localStorage.clear());

    it('has cmdk stub at top of sidebar', async () => {
        const { wrapper } = await setup();
        expect(wrapper.find('.ld-cmdk-stub').exists()).toBe(true);
        expect(wrapper.find('.ld-cmdk-stub').text()).toMatch(/Поиск|команды/i);
    });

    it('renders 3 nav-groups with eyebrow labels', async () => {
        const { wrapper } = await setup();
        const eyebrows = wrapper.findAll('.ld-nav-group__eyebrow');
        expect(eyebrows.length).toBeGreaterThanOrEqual(3);
    });

    it('badge uses JetBrains Mono class', async () => {
        const { wrapper } = await setup();
        const badges = wrapper.findAll('.ld-nav-item__badge');
        expect(badges.length).toBeGreaterThan(0);
        const styleSheet = badges[0].attributes('class') ?? '';
        expect(styleSheet).toMatch(/ld-mono|nav-item__badge/);
    });

    it('active nav-item has marker pseudo-element class', async () => {
        const { wrapper } = await setup('/deals');
        const items = wrapper.findAll('.ld-nav-item');
        const active = items.find((el) => el.classes().includes('ld-nav-item--active'));
        expect(active).toBeDefined();
    });
});