import { describe, expect, it, vi } from 'vitest';
import { render } from 'svelte/server';
import type { ComponentProps } from 'svelte';
import { writable } from 'svelte/store';
import HostOperations from '../../src/routes/hosts/operations/+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() }));

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('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>');
    });
});