/**
 * @vitest-environment jsdom
 */
// #region ReportDetailUxTest:Module [TYPE Function]
// @SEMANTICS: reports, ux-tests, detail, diagnostics, recovery
// @PURPOSE: Test UX states and recovery for ReportDetailPanel component
// @LAYER UI
// @RELATION DEPENDS_ON -> [EXT:frontend:ReportDetailPanel]
// @INVARIANT: Detail UX tests keep placeholder-safe rendering and recovery visibility verifiable.

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

// Mock i18n
vi.mock('$lib/i18n/index.svelte.js', () => ({
  t: {
    subscribe: (fn) => {
      fn({
        reports: {
          not_provided: 'Not provided',
          view_details: 'View details'
        }
      });
      return () => {};
    }
  }
}));

describe('ReportDetailPanel UX Contract', () => {
  const mockReport = mixedTaskReports[0];
  const mockDetail = {
    report: mockReport,
    timeline: [{ event: 'started', at: mockReport.started_at }],
    diagnostics: { note: 'All systems green' },
    next_actions: []
  };

  // @UX_STATE: Ready -> Report detail content visible.
  it('should display report details in Ready state', () => {
    render(ReportDetailPanel, { detail: mockDetail });
    
    expect(screen.getByText(mockReport.report_id)).toBeDefined();
    expect(screen.getByText(mockReport.summary)).toBeDefined();
    expect(screen.getByText(/All systems green/)).toBeDefined();
  });

  // @UX_RECOVERY: Failed/partial report shows next actions and placeholder-safe diagnostics.
  it('should show recovery guidance for failed reports', () => {
    const failedReport = mixedTaskReports.find(r => r.status === 'failed');
    const failedDetail = {
      report: failedReport,
      diagnostics: { error: 'Disk full' },
      next_actions: ['Free storage', 'Retry']
    };

    render(ReportDetailPanel, { detail: failedDetail });

    expect(screen.getByText('Free storage')).toBeDefined();
    expect(screen.getByText('Retry')).toBeDefined();
  });

  it('should render placeholders when no detail is provided', () => {
    render(ReportDetailPanel, { detail: null });
    
    // Should show "Not provided" (from mocked $t)
    const placeholders = screen.getAllByText('Not provided');
    expect(placeholders.length).toBeGreaterThan(0);
  });
});

// #endregion ReportDetailUxTest:Module
