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

import TierPricesPanel from '../../resources/js/components/billing/TierPricesPanel.vue';

const vuetify = createVuetify();

const tiers = [
    { tier_no: 1, leads_in_tier: 50, price_rub: '120.00' },
    { tier_no: 2, leads_in_tier: 100, price_rub: '100.00' },
    { tier_no: 3, leads_in_tier: 200, price_rub: '80.00' },
    { tier_no: 4, leads_in_tier: 300, price_rub: '70.00' },
    { tier_no: 5, leads_in_tier: 400, price_rub: '65.00' },
    { tier_no: 6, leads_in_tier: 500, price_rub: '62.00' },
    { tier_no: 7, leads_in_tier: null, price_rub: '60.00' },
];

describe('TierPricesPanel', () => {
    it('renders all 7 tiers as rows', () => {
        const w = mount(TierPricesPanel, { props: { tiers, currentTierNo: 1 }, global: { plugins: [vuetify] } });
        expect(w.findAll('[data-test="tier-row"]')).toHaveLength(7);
    });

    it('highlights current tier with «вы здесь» chip', () => {
        const w = mount(TierPricesPanel, { props: { tiers, currentTierNo: 3 }, global: { plugins: [vuetify] } });
        const currentRow = w.find('[data-test-row="tier-row-3"]');
        expect(currentRow.text()).toContain('вы здесь');
    });

    it('renders «1551+» open-ended range for tier 7 (leads_in_tier=null)', () => {
        const w = mount(TierPricesPanel, { props: { tiers, currentTierNo: 1 }, global: { plugins: [vuetify] } });
        // sum of tiers 1-6: 50+100+200+300+400+500 = 1550 → tier 7 starts at 1551
        expect(w.find('[data-test-row="tier-row-7"]').text()).toMatch(/1551\+/);
    });

    it('renders prices with ₽ suffix on each row', () => {
        const w = mount(TierPricesPanel, { props: { tiers, currentTierNo: 1 }, global: { plugins: [vuetify] } });
        expect(w.find('[data-test-row="tier-row-1"]').text()).toContain('120.00');
        expect(w.find('[data-test-row="tier-row-1"]').text()).toContain('₽');
    });
});