import { test, expect, type Page } from './fixtures';

// The author page streams its manga grid: the cheap author header renders
// immediately while the (potentially large) grid shows a skeleton, then swaps
// in without a layout shift.

const authorId = 'a1111111-1111-1111-1111-111111111111';

async function mockCommon(page: Page) {
    await page.route('**/api/v1/auth/config', (r) =>
        r.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ self_register_enabled: true, private_mode: false })
        })
    );
    await page.route('**/api/v1/auth/me', (r) =>
        r.fulfill({ status: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
    );
    await page.route('**/api/v1/auth/me/preferences', (r) =>
        r.fulfill({ status: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
    );
    await page.route(`**/api/v1/authors/${authorId}`, (r) =>
        r.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ id: authorId, name: 'Kentaro Miura', manga_count: 1 })
        })
    );
}

test('shows a grid skeleton while the author mangas stream, then the grid', async ({ page }) => {
    await mockCommon(page);

    let release: () => void = () => {};
    const gate = new Promise<void>((resolve) => {
        release = resolve;
    });
    await page.route(`**/api/v1/authors/${authorId}/mangas*`, async (route) => {
        await gate;
        await route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                items: [
                    {
                        id: 'm1', title: 'Berserk', status: 'ongoing', alt_titles: [], description: null,
                        cover_image_path: null, created_at: '2026-01-01T00:00:00Z', updated_at: '2026-01-01T00:00:00Z'
                    }
                ],
                page: { limit: 50, offset: 0, total: 1 }
            })
        });
    });

    await page.goto(`/authors/${authorId}`);
    // Header renders immediately (not blocked on the grid).
    await expect(page.getByTestId('author-name')).toHaveText('Kentaro Miura');
    // Grid skeleton stands in while the stream is pending.
    await expect(page.getByTestId('manga-grid-skeleton')).toBeVisible();
    await expect(page.getByTestId('author-manga-list')).toHaveCount(0);

    release();
    await expect(page.getByTestId('author-manga-list')).toContainText('Berserk');
    await expect(page.getByTestId('manga-grid-skeleton')).toHaveCount(0);
});