import { test, expect } from '@playwright/test';
import {
    BASE_URL,
    USER,
    ADMIN,
    loginAs,
    ensureLiveRacingEnabled,
    createArena,
    createEventShowUrl,
    addRace,
    addHorses,
    offerSingleBetTypes,
    offerMultiBetTypeCombos,
    publishEvent,
} from '../helpers';

// Regression guard for the mobile betting wizard: selecting a multi-combo bet
// type (Daily Double offered as several race pairs) must not make the document
// wider than the viewport / let the page pan sideways into dead space.
// Root cause was `.visually-hidden-input` (the wrapped combo radios) sitting at
// its static x≈800px position inside the horizontally-scrolled .wizard-combo-tabs
// — see templates/play/live-racing/event.html.twig.

test.describe('Live Racing wizard — no horizontal page scroll on mobile', () => {
    test.setTimeout(180_000);
    test.use({ viewport: { width: 390, height: 844 } });

    test('multi-combo Daily Double panel does not widen the page', async ({ page }) => {
        await loginAs(page, ADMIN.mobile, ADMIN.password);
        await ensureLiveRacingEnabled(page);

        const arena = await createArena(page, 'LRHScroll', { win: '10', daily_double: '10' });
        const { eventUrl, eventId } = await createEventShowUrl(page, arena);
        const r1 = await addRace(page, eventUrl, 1);
        const r2 = await addRace(page, eventUrl, 2);
        const r3 = await addRace(page, eventUrl, 3);
        await addHorses(page, r1.raceUrl, 6);
        await addHorses(page, r2.raceUrl, 6);
        await addHorses(page, r3.raceUrl, 6);
        await offerSingleBetTypes(page, eventUrl, [{ key: 'win', raceId: r1.raceId }]);
        // Two combos → .wizard-combo-tabs renders (the case that reproduced the bug).
        await offerMultiBetTypeCombos(page, eventUrl, 'daily_double', [
            [r1.raceId, r2.raceId],
            [r2.raceId, r3.raceId],
        ]);
        await publishEvent(page, eventUrl);

        await loginAs(page, USER.mobile, USER.password);
        await page.goto(`${BASE_URL}/play/live-racing/${eventId}`);

        await page.click('[data-testid="tab-bet-key-daily_double"]');
        await expect(page.locator('[data-testid="tab-bet-key-daily_double"]')).toHaveClass(/is-active/);
        await expect(page.locator('[data-testid^="wizard-combo-tabs-"]')).toBeVisible();

        const metrics = await page.evaluate(() => {
            const de = document.documentElement;
            de.scrollLeft = 9999;
            const clampedScrollLeft = de.scrollLeft;
            de.scrollLeft = 0;
            return {
                clampedScrollLeft,
                scrollWidth: de.scrollWidth,
                clientWidth: de.clientWidth,
                overflowX: getComputedStyle(document.body).overflowX,
                walletExceedsViewport:
                    document.querySelector('.wallet-bar')!.getBoundingClientRect().width >
                    de.clientWidth + 1,
            };
        });

        // The real fix: the document itself is not wider than the viewport.
        expect(metrics.scrollWidth).toBe(metrics.clientWidth);
        expect(metrics.clampedScrollLeft).toBe(0);
        expect(metrics.overflowX).toBe('hidden');
        expect(metrics.walletExceedsViewport).toBe(false);
    });
});