import { test, expect } from '@playwright/test';
import { BASE_URL, ADMIN, FINANCE, USER, loginAs } from '../helpers';

test.describe('WFBO Race Results', () => {

    test.beforeEach(async ({ page }) => {
        await loginAs(page, FINANCE.mobile, FINANCE.password);
    });

    // ── Page load ─────────────────────────────────────────────────────────────

    test('race results page loads with correct title', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        await expect(page.locator('[data-testid="wfbo-page-title"]')).toHaveText('Race Results');
    });

    test('race results table card is visible', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        await expect(page.locator('[data-testid="race-results-table-card"]')).toBeVisible();
        await expect(page.locator('[data-testid="race-results-table"]')).toBeVisible();
    });

    // ── Navigation ────────────────────────────────────────────────────────────

    test('race results nav link is visible in sidebar', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        await expect(page.locator('[data-testid="wfbo-nav-race-results"]')).toBeVisible();
    });

    test('race results nav link is active when on the page', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        await expect(page.locator('[data-testid="wfbo-nav-race-results"]')).toHaveClass(/is-active/);
    });

    // ── Access control ────────────────────────────────────────────────────────

    test('plain user cannot access race results page', async ({ page }) => {
        await loginAs(page, USER.mobile, USER.password);
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        await expect(page.locator('[data-testid="wfbo-sidebar"]')).not.toBeVisible();
    });

    test('admin can access race results page', async ({ page }) => {
        await loginAs(page, ADMIN.mobile, ADMIN.password);
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        await expect(page.locator('[data-testid="wfbo-page-title"]')).toHaveText('Race Results');
    });

    // ── Race rows ─────────────────────────────────────────────────────────────

    test('each race row has a pair breakdown toggle button', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        const rows = page.locator('[data-testid^="race-result-row-"]');
        const count = await rows.count();

        if (count === 0) return; // no finished races — empty state is fine

        const firstToggle = page.locator('[data-testid^="btn-pair-breakdown-"]').first();
        await expect(firstToggle).toBeVisible();
    });

    // ── Pair breakdown toggle ─────────────────────────────────────────────────

    test('pair breakdown is hidden by default and shown on toggle', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        const firstToggle = page.locator('[data-testid^="btn-pair-breakdown-"]').first();
        if (await firstToggle.count() === 0) return;

        const testId  = await firstToggle.getAttribute('data-testid') ?? '';
        const raceId  = testId.replace('btn-pair-breakdown-', '');
        const detailRow = page.locator(`[data-testid="pair-detail-${raceId}"]`);

        await expect(detailRow).not.toBeVisible();

        await firstToggle.click();
        await expect(detailRow).toBeVisible();
    });

    test('pair breakdown hides again on second toggle click', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        const firstToggle = page.locator('[data-testid^="btn-pair-breakdown-"]').first();
        if (await firstToggle.count() === 0) return;

        const testId    = await firstToggle.getAttribute('data-testid') ?? '';
        const raceId    = testId.replace('btn-pair-breakdown-', '');
        const detailRow = page.locator(`[data-testid="pair-detail-${raceId}"]`);

        await firstToggle.click();
        await expect(detailRow).toBeVisible();

        await firstToggle.click();
        await expect(detailRow).not.toBeVisible();
    });

    test('pair breakdown table shows exactly 15 rows', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        const firstToggle = page.locator('[data-testid^="btn-pair-breakdown-"]').first();
        if (await firstToggle.count() === 0) return;

        await firstToggle.click();

        const testId   = await firstToggle.getAttribute('data-testid') ?? '';
        const raceId   = testId.replace('btn-pair-breakdown-', '');
        const pairRows = page.locator(`[data-testid="pair-table-${raceId}"] tbody tr`);

        await expect(pairRows).toHaveCount(15);
    });

    test('winning pair row is marked as winner in pair breakdown', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        const firstToggle = page.locator('[data-testid^="btn-pair-breakdown-"]').first();
        if (await firstToggle.count() === 0) return;

        await firstToggle.click();

        const testId  = await firstToggle.getAttribute('data-testid') ?? '';
        const raceId  = testId.replace('btn-pair-breakdown-', '');
        const pairTable = page.locator(`[data-testid="pair-table-${raceId}"]`);

        await expect(pairTable.locator('text=✓ WINNER')).toBeVisible();
    });

    // ── Pagination ────────────────────────────────────────────────────────────

    test('pagination controls appear when there are more than 10 races', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        const pagination = page.locator('[data-testid="race-results-pagination"]');
        const rows       = page.locator('[data-testid^="race-result-row-"]');
        const count      = await rows.count();

        if (count <= 10) return; // not enough races for pagination to show

        await expect(pagination).toBeVisible();
    });

    test('page 2 loads when navigating via next link', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/race-results`);

        const nextLink = page.locator('.btn-page-next').first();
        if (await nextLink.count() === 0) return; // only one page

        await nextLink.click();
        await expect(page).toHaveURL(/page=2/);
        await expect(page.locator('[data-testid="race-results-table"]')).toBeVisible();
    });

});