import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import { createVuetify } from 'vuetify';
import DealDetailHero from '../../resources/js/components/deals/DealDetailHero.vue';
import type { MockDeal } from '../../resources/js/composables/mockDeals';
import type { LeadStatus } from '../../resources/js/composables/leadStatuses';

const vuetify = createVuetify();

const statuses: LeadStatus[] = [
    { slug: 'new', nameRu: 'Новая сделка', isSystem: true, sortOrder: 1, colorHex: '#5b2db2' },
    { slug: 'viewed', nameRu: 'Просмотрено', isSystem: true, sortOrder: 2, colorHex: '#5a2db2' },
    { slug: 'won', nameRu: 'Куплено', isSystem: true, sortOrder: 3, colorHex: '#00A36C' },
];

function makeDeal(over: Partial<MockDeal> = {}): MockDeal {
    return {
        id: 1,
        name: '+79991234567',
        phone: '+79991234567',
        statusSlug: 'new',
        project: 'p',
        manager: { initials: 'A', name: 'A' },
        cost: 0,
        receivedMinutesAgo: 1,
        ...over,
    };
}

describe('DealDetailHero — inline status picker (18.05.2026)', () => {
    it('рендерит статус-chip с триггером (data-testid="status-chip-trigger")', () => {
        const w = mount(DealDetailHero, {
            props: { deal: makeDeal(), status: statuses[0], allStatuses: statuses },
            global: { plugins: [vuetify] },
        });
        expect(w.find('[data-testid="status-chip-trigger"]').exists()).toBe(true);
    });

    // V1 (UX-аудит 25.06): время было захардкожено formatRelative(28) — шапка всегда
    // показывала «28 мин назад». Теперь берём реальное deal.receivedMinutesAgo.
    it('показывает реальное время сделки, не захардкоженные 28 мин', () => {
        const w = mount(DealDetailHero, {
            props: { deal: makeDeal({ receivedMinutesAgo: 3 }), status: statuses[0] },
            global: { plugins: [vuetify] },
        });
        expect(w.text()).toContain('3 мин назад');
        expect(w.text()).not.toContain('28 мин назад');
    });

    it('реальное время в часах при больших значениях', () => {
        const w = mount(DealDetailHero, {
            props: { deal: makeDeal({ receivedMinutesAgo: 125 }), status: statuses[0] },
            global: { plugins: [vuetify] },
        });
        expect(w.text()).toContain('2 ч назад');
    });

    it('клик по chip открывает меню (data-testid="status-option-{slug}" появляются)', async () => {
        const w = mount(DealDetailHero, {
            props: { deal: makeDeal(), status: statuses[0], allStatuses: statuses },
            global: { plugins: [vuetify], stubs: { teleport: false } },
            attachTo: document.body,
        });
        await w.find('[data-testid="status-chip-trigger"]').trigger('click');
        // Give v-menu time to mount (teleport target = body).
        await new Promise((r) => setTimeout(r, 200));
        const options = document.body.querySelectorAll('[data-testid^="status-option-"]');
        expect(options.length).toBeGreaterThan(0);
        const wonOption = document.body.querySelector('[data-testid="status-option-won"]') as HTMLElement | null;
        expect(wonOption).not.toBeNull();
        wonOption?.click();
        await new Promise((r) => setTimeout(r, 30));
        expect(w.emitted('change-status')?.[0]?.[0]).toBe('won');
        w.unmount();
    });
});
