import { describe, expect, it, vi } from 'vitest';
import { render } from 'svelte/server';
import SettingsEditor from '../../src/lib/ui/components/SettingsEditor.svelte';
import { defaultFleetSettings } from '../../src/lib/fleet-settings.js';

vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
const html = (initial = defaultFleetSettings) =>
    render(SettingsEditor, { props: { initial } }).body.replaceAll(/<!--.*?-->/g, '');

describe('grouped Settings editor', () => {
    it('shows one section with meaningful defaults, and keeps every category reachable from the rail and mobile selector', () => {
        const body = html();
        expect(body).toContain('aria-label="Settings sections"');
        expect(body).toContain('aria-label="Settings section"');
        expect(body).toContain('href="#settings-group-matches-players"');
        expect(body).toContain('href="#settings-group-files-versions"');
        expect(body).toContain('id="setting-restartConcurrency"');
        expect(body).not.toContain('id="setting-matchKeepDays"');
        expect(body).toContain('1 operation');
        expect(body).toContain('No limit');
        expect(body).not.toMatch(/<input[^>]*value="0"/);
    });

    it('compares with the saved baseline rather than factory defaults and disables Save and Discard when unchanged', () => {
        const body = html({ ...defaultFleetSettings, preparationConcurrency: 7 });
        expect(body).toContain('All changes saved');
        expect(body).not.toContain('unsaved changes');
        expect(body).not.toContain('class="changed-marker"');
        expect(body).toMatch(/<input[^>]*id="setting-preparationConcurrency"[^>]*value="7"/);
        expect(body).toMatch(/<button[^>]*disabled[^>]*>[\s\S]*?<span[^>]*>Discard<\/span>/);
        expect(body).toMatch(
            /<button[^>]*type="submit"[^>]*form="[^"]+"[^>]*disabled[^>]*>Save changes<\/button>/
        );
    });

    it('keeps zero-mode controls labelled and cleanup tools outside the one settings form', () => {
        const body = html();
        expect(body).toMatch(/<label[^>]*for="setting-restartConcurrencyPerHost-zero"/);
        expect(body).toMatch(/<input[^>]*id="setting-restartConcurrencyPerHost-zero"[^>]*checked/);
        expect(body.match(/<form\b/g)).toHaveLength(1);
        expect(body.indexOf('</form>')).toBeLessThan(
            body.indexOf('Cleanup preview and protected records')
        );
        expect(body).toContain('Expired data cannot be restored by increasing retention.');
        expect(body).toContain('Player safety checks still apply.');
    });

    it('keeps settings navigation and cleanup previews available without offering mutations in read-only mode', () => {
        const body = render(SettingsEditor, {
            props: {
                initial: { ...defaultFleetSettings, preparationConcurrency: 7 },
                readOnly: true
            }
        }).body.replaceAll(/<!--.*?-->/g, '');
        expect(body).toContain('aria-label="Settings sections"');
        expect(body.match(/<input[^>]*id="settings-search"[^>]*>/)?.[0]).not.toContain('disabled');
        expect(body).toMatch(/<fieldset[^>]*disabled[^>]*><legend[^>]*>Fleet settings/);
        expect(body).toMatch(/<input[^>]*id="setting-preparationConcurrency"[^>]*value="7"/);
        expect(body).toContain('Refresh cleanup preview');
        expect(body).not.toContain('Save changes');
        expect(body).not.toContain('Discard');
        expect(body).not.toContain('Protect record');
        expect(body).not.toContain('Mark failure resolved');
        expect(body).not.toContain('All changes saved');
    });
});