/**
 * @vitest-environment jsdom
 */
// [DEF:frontend.src.lib.components.reports.__tests__.reports_list.ux:Module]
// @TIER: STANDARD
// @SEMANTICS: reports, list, ux-tests, events, iteration
// @PURPOSE: Test ReportsList component iteration and event forwarding.
// @LAYER: UI
// @RELATION: VERIFIES -> ../ReportsList.svelte
// [/DEF:frontend.src.lib.components.reports.__tests__.reports_list.ux:Module]

import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import ReportsList from '../ReportsList.svelte';

// Mock i18n since ReportsList -> ReportCard -> i18n
vi.mock('$lib/i18n', () => ({
    t: {
        subscribe: (fn) => {
            fn({
                reports: {
                    not_provided: 'N/A',
                    status_success: 'OK',
                    status_failed: 'ERR'
                }
            });
            return () => { };
        }
    },
    _: vi.fn((key) => key)
}));

describe('ReportsList UX Contract', () => {
    const mockReports = [
        { report_id: '1', summary: 'Report One', task_type: 'migration', status: 'success' },
        { report_id: '2', summary: 'Report Two', task_type: 'backup', status: 'failed' }
    ];

    // @TEST_FIXTURE renders_list
    it('should render multiple report cards and mark the selected one', () => {
        const { container } = render(ReportsList, { reports: mockReports, selectedReportId: '2' });

        expect(screen.getByText('Report One')).toBeDefined();
        expect(screen.getByText('Report Two')).toBeDefined();

        // Check selection logic - we look for a marker or class change in the child cards
        // In our simplified test, we check if screen find two buttons
        const buttons = screen.getAllByRole('button');
        expect(buttons.length).toBe(2);
    });

    // @TEST_EDGE empty_list
    // @TEST_INVARIANT correct_iteration
    it('should render empty container for empty list', () => {
        const { container } = render(ReportsList, { reports: [] });
        // Root div should have space-y-2 class but be empty
        const div = container.querySelector('.space-y-2');
        expect(div).toBeDefined();
        expect(div.children.length).toBe(0);
    });

    // @UX_FEEDBACK: Click on report emits select event.
    // @TEST_CONTRACT Component_ReportsList -> Forwards select events from children
    it('should forward select event when a report card is clicked', async () => {
        const onSelect = vi.fn();
        const { component } = render(ReportsList, { reports: [mockReports[0]], onselect: onSelect });

        const button = screen.getByRole('button');
        await fireEvent.click(button);

        expect(onSelect).toHaveBeenCalled();
        expect(onSelect.mock.calls[0][0].report.report_id).toBe('1');
    });
});
