// @vitest-environment jsdom
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
import {cleanup, render, screen, waitFor} from '@testing-library/react';
import {MemoryRouter} from 'react-router-dom';
import PlayNextPage from './PlayNextPage.jsx';
import {fetchRoutes, json} from '../test/fetchRoutes.js';
import {PreferencesProvider} from '../context/PreferencesContext.jsx';

// react-i18next hands out a new `t` on every language change; this mock does the same on demand.
const i18n = {language: 'de', t: (key) => key};
vi.mock('react-i18next', () => ({useTranslation: () => ({t: i18n.t, i18n})}));
vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));

const game = (appid) => ({appid, name: `Game ${appid}`, playtimeMinutes: 0, status: 'BACKLOG', rating: null,
    priority: null, timeToBeatMinutes: 600});

const pickerCalls = () => globalThis.fetch.mock.calls.filter(([url]) => url.includes('/api/library/picker')).length;

describe('PlayNextPage on a language change', () => {
    beforeEach(() => {
        localStorage.setItem('tbp_session', '1');
        i18n.t = (key) => key;
        fetchRoutes({'GET /api/library/picker': json(200, {categories: [{source: 'RANDOM', games: [game(1)]}]})});
    });

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

    it('keeps the picks when the language changes', async () => {
        const {rerender} = render(<MemoryRouter><PreferencesProvider><PlayNextPage/></PreferencesProvider></MemoryRouter>);
        await screen.findByText('Game 1');
        expect(pickerCalls()).toBe(1);

        i18n.language = 'en';
        i18n.t = (key) => key;
        rerender(<MemoryRouter><PreferencesProvider><PlayNextPage/></PreferencesProvider></MemoryRouter>);

        await waitFor(() => expect(screen.getByText('Game 1')).toBeTruthy());
        expect(pickerCalls()).toBe(1);
    });
});