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

// The overflowTooltip action sets a native `title` on a manga card's title
// only when it's actually truncated. Verified in a real browser (jsdom can't
// lay out, so scrollWidth/clientWidth are meaningless there).

const LONG_TITLE =
    'An Extraordinarily Long Manga Title That Cannot Possibly Fit Within Two Clamped Lines Of A Narrow Card';
const SHORT_TITLE = 'Bleach';

function manga(id: string, title: string) {
    return {
        id,
        title,
        status: 'ongoing',
        alt_titles: [],
        description: null,
        cover_image_path: null,
        created_at: '2026-01-01T00:00:00Z',
        updated_at: '2026-01-01T00:00:00Z',
        authors: [],
        genres: []
    };
}

async function mockHome(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: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } }) })
    );
    await page.route('**/api/v1/auth/me/preferences', (r) =>
        r.fulfill({ status: 401, contentType: 'application/json', body: '{}' })
    );
    await page.route('**/api/v1/genres*', (r) =>
        r.fulfill({ status: 200, contentType: 'application/json', body: '[]' })
    );
    await page.route('**/api/v1/me/read-progress*', (r) =>
        r.fulfill({ status: 401, contentType: 'application/json', body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } }) })
    );
    await page.route('**/api/v1/mangas*', (r) =>
        r.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                items: [manga('m1', LONG_TITLE), manga('m2', SHORT_TITLE)],
                page: { limit: 50, offset: 0, total: 2 }
            })
        })
    );
}

test('adds a title tooltip to truncated card titles but not to ones that fit', async ({ page }) => {
    await mockHome(page);
    // Narrow (mobile) grid so the long title clamps and overflows.
    await page.setViewportSize({ width: 390, height: 844 });
    await page.goto('/');

    const longLink = page.getByRole('link', { name: LONG_TITLE });
    await expect(longLink).toBeVisible();
    await expect(longLink).toHaveAttribute('title', LONG_TITLE);

    const shortLink = page.getByRole('link', { name: SHORT_TITLE });
    await expect(shortLink).not.toHaveAttribute('title');
});