// @vitest-environment jsdom
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
import {cleanup, screen, waitFor} from '@testing-library/react';
import GameLibrary from './GameLibrary.jsx';
import {fetchRoutes, json} from '../test/fetchRoutes.js';
import {renderWithProviders} from '../test/renderWithProviders.jsx';
import WalletLoader from '../test/WalletLoader.jsx';

vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
vi.mock('../hooks/useLibrarySync.js', () => ({default: () => ({status: 'OK', lastSyncedAt: null, isRunning: false})}));
vi.mock('../hooks/useForceSync.js', () => ({default: () => ({trigger: vi.fn(), busy: false})}));

const games = [
    {appid: 620, name: 'Portal 2', playtimeMinutes: 0, status: 'COMPLETED'},
    {appid: 220, name: 'Half-Life 2', playtimeMinutes: 0, status: 'FINISHED'},
];

beforeEach(() => {
    localStorage.setItem('tbp_session', '1');
    fetchRoutes({
        'GET /api/users/me': json(200, {settings: {}}),
        'GET /api/rewards/wallet': json(200, {balance: 0, catalog: [], owned: [], equipped: {COMPLETED_EFFECT: 'FX_GOLD_SHINE'}, history: []}),
        'GET /api/library/games': json(200, {content: games, page: 0, size: 20, totalElements: 2, totalPages: 1}),
        'GET /api/library/games-count': json(200, {count: 2, hasSteamId: true, canSync: true}),
    });
});

afterEach(() => {
    cleanup();
    localStorage.clear();
});

describe('GameLibrary completed effect', () => {
    it('puts the worn effect on the cover of a COMPLETED game only', async () => {
        renderWithProviders(<><WalletLoader/><GameLibrary/></>, {entries: ['/library']});

        const cover = async (name) => (await screen.findByText(name)).closest('li').querySelector('img').parentElement;
        await waitFor(async () => expect((await cover('Portal 2')).classList.contains('fx-cover-gold-shine')).toBe(true));
        expect((await cover('Half-Life 2')).classList.contains('fx-cover-gold-shine')).toBe(false);
    });
});