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

// When a Live Racing event has no stream video URL, the video slot shows a
// carousel of assets/images/live-racing-banner/*. See event.html.twig +
// PlayController::liveRacingBannerImages() (reuses the site-banner-slider
// Stimulus controller).

test.describe('Live Racing event — banner carousel when there is no video', () => {
    test.setTimeout(120_000);

    test('shows the banner slider (and not the YouTube player) on a video-less event', async ({ page }) => {
        await loginAs(page, ADMIN.mobile, ADMIN.password);
        await ensureLiveRacingEnabled(page);
        const arena = await createArena(page, 'LRBanner', { win: '10' });
        const { eventUrl, eventId } = await createEventShowUrl(page, arena);
        const race = await addRace(page, eventUrl, 1);
        await addHorses(page, race.raceUrl, 4);
        await offerSingleBetTypes(page, eventUrl, [{ key: 'win', raceId: race.raceId }]);
        await publishEvent(page, eventUrl); // createEventShowUrl sets no videoUrl

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

        const slider = page.locator('[data-testid="live-racing-banner-slider"]');
        await expect(slider).toBeVisible();
        await expect(page.locator('#yt-player')).toHaveCount(0);

        // One slide per file in the folder (>= 1).
        const slides = page.locator('[data-testid^="live-racing-banner-slide-"]');
        const count = await slides.count();
        expect(count).toBeGreaterThanOrEqual(1);
        await expect(slides.first()).toBeVisible();

        // Arrows/dots only when there is more than one banner (desktop viewport).
        if (count > 1) {
            await expect(page.locator('[data-testid="live-racing-banner-dot-0"]')).toHaveClass(/is-active/);

            // Auto-advances on its own (no interaction).
            await expect(page.locator('[data-testid="live-racing-banner-dot-1"]'))
                .toHaveClass(/is-active/, { timeout: 12_000 });

            // Loops: from the last banner it wraps back to the first.
            await page.click(`[data-testid="live-racing-banner-dot-${count - 1}"]`);
            await expect(page.locator(`[data-testid="live-racing-banner-dot-${count - 1}"]`)).toHaveClass(/is-active/);
            await expect(page.locator('[data-testid="live-racing-banner-dot-0"]'))
                .toHaveClass(/is-active/, { timeout: 12_000 });
        } else {
            await expect(page.locator('[data-testid="live-racing-banner-dots"]')).toHaveCount(0);
        }

        // Mobile: the slider is full-bleed (spans the viewport, wider than the
        // padded page container) and doesn't cause a horizontal page scroll.
        await page.setViewportSize({ width: 390, height: 844 });
        const metrics = await page.evaluate(() => {
            const el = document.querySelector('[data-testid="live-racing-banner-slider"]')!;
            return {
                sliderWidth: Math.round(el.getBoundingClientRect().width),
                viewport: document.documentElement.clientWidth,
                pageScrollable: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
            };
        });
        expect(metrics.sliderWidth).toBe(metrics.viewport);
        expect(metrics.pageScrollable).toBe(false);
    });
});