/**
 * @vitest-environment jsdom
 */
// #region ReportsListTest:Module [TYPE Function]
// @SEMANTICS: reports, list, ux-tests, events, iteration
// @PURPOSE: Test ReportsList component iteration and event forwarding.
// @LAYER UI
// @RELATION DEPENDS_ON -> [EXT:frontend:ReportsList]
// @TEST_CONTRACT: ReportsListProps -> rendered cards and forwarded select events
// @TEST_SCENARIO: renders_report_cards_for_each_item -> Each report becomes one rendered selectable card.
// @TEST_SCENARIO: renders_empty_list_container -> Empty input keeps stable container without child cards.
// @TEST_SCENARIO: forwards_select_event -> Child click forwards select payload to parent listener.
// @TEST_FIXTURE: reports_list_examples -> INLINE_JSON
// @TEST_INVARIANT: report_iteration_and_select_contract -> VERIFIED_BY: [renders_report_cards_for_each_item, renders_empty_list_container, forwards_select_event]

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/index.svelte.js', () => ({
    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 -> INLINE_JSON
    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 -> Empty reports array keeps container stable.
    // @TEST_INVARIANT: correct_iteration -> VERIFIED_BY: [renders_report_cards_for_each_item, renders_empty_list_container]
    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');
    });
});
// #endregion ReportsListTest:Module
