<!-- #region ReportsList [C:3] [TYPE Component] [SEMANTICS report, list, card, unified, mixed-type] -->
<!-- @BRIEF Component component: lib/components/reports/ReportsList.svelte -->
<!-- @LAYER UI -->
<script lang="ts">
  /**
   * @SEMANTICS: reports, list, card, unified, mixed-types
   * @PURPOSE: Render unified list of normalized reports with canonical minimum fields.
   * @LAYER UI
   * @RELATION DEPENDS_ON -> [EXT:frontend:ReportCard]
   * @RELATION DEPENDS_ON -> [EXT:frontend:i18n]
   * @INVARIANT: Every rendered row shows task_type label, status, summary, and updated_at.
   *
   * @UX_STATE: Ready -> Mixed-type list visible and scannable.
   * @UX_STATE: Empty -> No cards render when the list is empty.
   * @UX_FEEDBACK: Click on report emits select event.
   * @UX_RECOVERY: Unknown/missing values rendered with explicit placeholders.
   *
   * @TEST_CONTRACT Component_ReportsList ->
   * {
   *   required_props: {},
   *   optional_props: {reports: Array, selectedReportId: string},
   *   invariants: [
   *       "Iterates over reports and renders ReportCard for each",
   *       "Passes down selected prop based on selectedReportId",
   *       "Forwards select events from children"
   *   ]
   * }
   * @TEST_FIXTURE renders_list -> {"reports": [{"report_id": "1", "task_type": "migration", "status": "success"}, {"report_id": "2", "task_type": "backup", "status": "failed"}], "selectedReportId": "2"}
   * @TEST_EDGE empty_list -> {"reports": []}
   * @TEST_INVARIANT correct_iteration -> verifies: [renders_list, empty_list]
   */

  import ReportCard from "./ReportCard.svelte";

  let { reports = [], selectedReportId = null, onselect } = $props();

  function handleSelect(event) {
    const report = event?.detail?.report ?? event?.report ?? null;
    if (onselect && report) onselect({ report });
  }
</script>

<div class="space-y-2">
  {#each reports as report (report.report_id)}
    <ReportCard
      {report}
      selected={selectedReportId === report.report_id}
      onselect={handleSelect}
    />
  {/each}
</div>

<!-- #endregion ReportsList -->
