/**
 * @vitest-environment jsdom
 */
// [DEF:frontend.src.lib.components.reports.__tests__.report_card.ux:Module]
// @TIER: STANDARD
// @SEMANTICS: reports, ux-tests, card, states, recovery
// @PURPOSE: Test UX states and transitions for ReportCard component
// @LAYER: UI
// @RELATION: VERIFIES -> ../ReportCard.svelte
// @INVARIANT: Each test asserts at least one observable UX contract outcome.

import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import ReportCard from '../ReportCard.svelte';
import { mixedTaskReports } from './fixtures/reports.fixtures.js';

// Mock i18n
vi.mock('$lib/i18n', () => ({
  t: {
    subscribe: (fn) => {
      fn({
        reports: {
          not_provided: 'Not provided',
          unknown_type: 'Other / Unknown Type',
          status_success: 'Success',
          status_failed: 'Failed',
          status_in_progress: 'In Progress',
          status_partial: 'Partial'
        }
      });
      return () => { };
    }
  },
  _: vi.fn((key) => key)
}));

describe('ReportCard UX Contract', () => {
  const mockReport = mixedTaskReports[0]; // Success report

  // @UX_STATE: Ready -> Card displays summary/status/type.
  it('should display summary, status and type in Ready state', () => {
    render(ReportCard, { report: mockReport });
    expect(screen.getByText(mockReport.summary)).toBeDefined();
    // mockReport.status is "success", getStatusLabel(status) returns $t.reports?.status_success
    expect(screen.getByText('Success')).toBeDefined();
    // Profile label for llm_verification is 'LLM'
    expect(screen.getByText('LLM')).toBeDefined();
  });

  // @UX_FEEDBACK: Click on report emits select event.
  it('should emit select event on click', async () => {
    const onSelect = vi.fn();
    render(ReportCard, { report: mockReport, onselect: onSelect });

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

    expect(onSelect).toHaveBeenCalled();
  });

  // @UX_RECOVERY: Missing fields are rendered with explicit placeholder text.
  it('should render placeholders for missing fields', () => {
    const partialReport = { report_id: 'partial-1' };
    render(ReportCard, { report: partialReport });

    // Check placeholders (using text from mocked $t)
    const placeholders = screen.getAllByText('Not provided');
    expect(placeholders.length).toBeGreaterThan(0);

    // Check fallback type (the profile itself returns 'reports.unknown_type' string which doesn't get translated by $t in the mock if it's returning the key)
    expect(screen.getByText('reports.unknown_type')).toBeDefined();
  });
});

// [/DEF:frontend.src.lib.components.reports.__tests__.report_card.ux:Module]