import { beforeEach, describe, expect, it, vi } from 'vitest';
import { render } from 'svelte/server';
import type { ComponentProps } from 'svelte';
import { writable, type Writable } from 'svelte/store';
import { page } from '$app/stores';
import HostOperations from '../../src/routes/hosts/operations/+page.svelte';
import Hosts from '../../src/routes/hosts/+page.svelte';
import type { HostOperationSummary } from '../../src/lib/hosts.js';

vi.mock('$app/stores', () => ({
    page: writable({ url: new URL('http://localhost/hosts/operations') }),
    navigating: writable(null)
}));
vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn() }));

function setPage(path: string) {
    (page as unknown as Writable<unknown>).set({
        url: new URL(`http://localhost${path}`),
        data: { user: { role: 'viewer' } }
    });
}
beforeEach(() => setPage('/hosts/operations'));

const operation: HostOperationSummary = {
    id: 'retained-op',
    hostId: 'host-1',
    hostName: 'Dallas 1',
    kind: 'instance.inspect',
    instanceId: 'container-1',
    generation: 1,
    state: 'completed',
    error: null,
    serverName: 't6_zombie_town_1',
    targetPath: null,
    source: 'maintenance',
    routine: true,
    createdAt: '2026-10-07 17:00:00',
    updatedAt: '2026-10-07 17:00:00'
};

describe('host operation history presentation', () => {
    it('keeps fleet-wide operation history reachable even when all hosts have been deleted', () => {
        setPage('/hosts');
        const body = render(Hosts, {
            props: {
                data: { user: null, setupRequired: false, hosts: [], serverNow: Date.now() }
            }
        }).body;
        expect(body).toContain('href="/hosts/operations"');
        expect(body).toContain('Operation history');
    });

    it.each([
        [
            '/hosts/operations?operation=retained-op&host=host-1&filter=all',
            '/hosts/operations?host=host-1&amp;filter=all',
            'Back to host operation history'
        ],
        [
            '/hosts/operations?operation=retained-op&returnTo=%2Fservers%2Ftown%3Ftab%3Dhistory',
            '/servers/town?tab=history',
            'Back to server'
        ],
        [
            '/hosts/operations?operation=retained-op&returnTo=%2Factivity%3Fhost%3Dhost-1',
            '/hosts/operations?host=host-1',
            'Back to host operation history'
        ]
    ])('returns from a selected operation to existing history: %s', (path, href, label) => {
        setPage(path);
        const body = render(HostOperations, {
            props: {
                data: {
                    user: null,
                    setupRequired: false,
                    history: {
                        operations: [],
                        page: 1,
                        pageSize: 25,
                        totalPages: 1,
                        total: 0,
                        filter: 'all'
                    },
                    scope: { operation: operation.id, host: operation.hostId },
                    hostName: operation.hostName
                }
            }
        }).body;
        expect(body).toContain(`href="${href}"`);
        expect(body).toContain(label);
        expect(body).not.toContain('href="/activity');
    });

    it('uses readable operation, server and state labels while keeping identifiers in technical detail', () => {
        const body = render(HostOperations, {
            props: {
                data: {
                    history: {
                        operations: [operation],
                        page: 1,
                        pageSize: 25,
                        totalPages: 1,
                        total: 1,
                        filter: 'all'
                    },
                    scope: {},
                    hostName: null
                } as ComponentProps<typeof HostOperations>['data']
            }
        }).body;
        expect(body).toContain('Check server container');
        expect(body).toContain('Town Survival · Lobby 1');
        expect(body).toContain('Completed');
        expect(body).toContain('Technical details</summary>');
        expect(body.indexOf('instance.inspect')).toBeGreaterThan(
            body.indexOf('Technical details</summary>')
        );
        expect(body).toContain('retained-op');
        expect(body).toContain('datetime="2026-10-07T17:00:00.000Z"');
        expect(body).toContain('title="Oct 7, 2026, 1:00:00 PM EDT"');
        expect(body).toContain('Updates every 15 seconds');
        expect(body).not.toContain('>Refresh</button>');
    });
});