const { test, expect } = require('@playwright/test');
const AxeBuilderImport = require('@axe-core/playwright');
const AxeBuilder = AxeBuilderImport.default || AxeBuilderImport;

test.describe('Accessibility (a11y)', () => {

    test('Display: non dovrebbe avere violazioni critiche a11y', async ({ page }) => {
        await page.goto('http://localhost:3000');
        await page.waitForTimeout(500);

        const results = await new AxeBuilder({ page })
            .withTags(['wcag2a', 'wcag2aa'])
            .disableRules(['color-contrast']) // il display ha sfondo nero con testo grande, valutato separatamente
            .analyze();

        expect(results.violations).toEqual([]);
    });

    test('Controller: non dovrebbe avere violazioni critiche a11y', async ({ page }) => {
        await page.goto('http://localhost:3001');
        await page.waitForTimeout(500);

        const results = await new AxeBuilder({ page })
            .withTags(['wcag2a', 'wcag2aa'])
            .analyze();

        // Mostra i dettagli delle violazioni se ci sono
        if (results.violations.length > 0) {
            console.log('A11y violations:', JSON.stringify(results.violations.map(v => ({
                id: v.id,
                impact: v.impact,
                description: v.description,
                nodes: v.nodes.length
            })), null, 2));
        }

        // Accettiamo solo violazioni minor (non critiche o serie)
        const serious = results.violations.filter(v =>
            v.impact === 'critical' || v.impact === 'serious'
        );
        expect(serious).toEqual([]);
    });

    test('Controller: i touch target dovrebbero avere dimensione minima', async ({ page }) => {
        await page.goto('http://localhost:3001');
        await page.waitForSelector('.conn-bar.connected');

        // Controlla che i bottoni principali abbiano dimensione minima 44x44px
        const buttons = page.locator('.btn-ctrl');
        const count = await buttons.count();

        for (let i = 0; i < count; i++) {
            const box = await buttons.nth(i).boundingBox();
            expect(box.width).toBeGreaterThanOrEqual(44);
            expect(box.height).toBeGreaterThanOrEqual(44);
        }
    });

    test('Controller: i bottoni punteggio dovrebbero avere dimensione adeguata', async ({ page }) => {
        await page.goto('http://localhost:3001');
        await page.waitForSelector('.conn-bar.connected');

        const scoreButtons = page.locator('.team-score');
        const count = await scoreButtons.count();

        for (let i = 0; i < count; i++) {
            const box = await scoreButtons.nth(i).boundingBox();
            expect(box.width).toBeGreaterThanOrEqual(100);
            expect(box.height).toBeGreaterThanOrEqual(100);
        }
    });
});