import { describe, expect, it, vi } from 'vitest';
import { render } from 'svelte/server';
import { writable } from 'svelte/store';
import MatchPage from '../../src/routes/matches/[id]/+page.svelte';
import ChatPanel from '../../src/lib/ui/components/ChatPanel.svelte';
import type { MatchDetail } from '../../src/lib/match-history.js';

vi.mock('$app/stores', () => ({
    page: writable({ url: new URL('http://localhost/matches/1'), data: { user: null } })
}));

const match: MatchDetail = {
    id: 1,
    server: 't5_zombie_theater_1',
    game: 't5',
    map: 'Kino Der Toten',
    observedRound: 4,
    finalRound: 4,
    status: 'completed',
    reporterMatchKey: null,
    missingReports: null,
    startObserved: true,
    startedAt: '2026-10-07T00:00:00Z',
    lastReportedAt: '2026-10-07T00:01:00Z',
    endedAt: '2026-10-07T00:01:00Z',
    durationMs: 60_000,
    startPlayers: 1,
    uniquePlayers: 1,
    endPlayers: 1,
    players: [],
    chat: [
        {
            type: 'message',
            matchId: 1,
            message: {
                time: '60:30',
                guid: 'abc',
                slot: 0,
                player: 'Player',
                message: '<script>hello</script>'
            },
            context: { realTime: '2026-10-07T00:00:30Z', matchElapsedMs: 30_000, round: 4 }
        }
    ]
};

describe('historical match chat', () => {
    it('renders saved messages with their context and no live controls on the match page', () => {
        const body = render(MatchPage, { props: { data: { match } } }).body;
        expect(body).toContain('Match history');
        expect(body).toContain('&lt;script>hello&lt;/script>');
        expect(body).toContain('Message context');
        expect(body).toContain('30s');
        expect(body.replace(/<!--.*?-->/gs, '')).toMatch(/<dt>Round<\/dt>\s*<dd[^>]*>4<\/dd>/);
        expect(body).not.toContain('Refresh chat');
        expect(body).not.toContain('Live · 5s');
        expect(body).not.toContain('Loading chat');
    });

    it('explains an offline host without claiming live updates or offering a manual refresh', () => {
        const body = render(ChatPanel, {
            props: { server: 't5_zombie_theater_1', hostOffline: true, hostName: 'Dallas 1' }
        }).body.replaceAll(/<!--.*?-->/g, '');
        expect(body).toContain('Chat resumes when Dallas 1 reconnects.');
        expect(body).not.toContain('Live ·');
        expect(body).not.toContain('Loading chat');
        expect(body).not.toContain('Refresh chat');
    });

    it('explains when a historical match has no saved messages', () => {
        const body = render(ChatPanel, { props: { history: [] } }).body;
        expect(body).toContain('No chat messages were saved for this match.');
        expect(body).not.toContain('Waiting for the game log');
    });
});