<!-- #region ReportCard [C:3] [TYPE Component] [SEMANTICS report, card, type-profile, status, summary] -->
<!-- @ingroup Components -->
<!-- @BRIEF Component component: lib/components/reports/ReportCard.svelte -->
<!-- @LAYER UI -->
<script lang="ts">
  /**
   * @SEMANTICS: reports, card, type-profile, accessibility, fallback
   * @PURPOSE: Render one report with explicit textual type label and profile-driven visual variant.
   * @LAYER UI
   * @RELATION DEPENDS_ON -> [EXT:frontend:ReportTypeProfiles]]
   * @RELATION DEPENDS_ON -> [EXT:frontend:i18n]
   * @INVARIANT: Unknown task type always uses fallback profile.
   *
   * @UX_STATE: Ready -> Card displays summary/status/type.
   * @UX_STATE: Fallback -> Missing fields are rendered with explicit placeholder text.
   * @UX_RECOVERY: Missing fields are rendered with explicit placeholder text.
   *
   * @TEST_CONTRACT Component_ReportCard ->
   * {
   *   required_props: {report: Object},
   *   optional_props: {selected: boolean, onselect: function},
   *   invariants: [
   *       "Renders properly even if report fields are missing",
   *       "Fires select event when clicked with the report payload",
   *       "Applies selected styling when selected prop is true"
   *   ]
   * }
   * @TEST_FIXTURE valid_report_card -> {"report": {"task_type": "migration", "status": "success", "summary": "Test", "updated_at": "2024-01-01"}}
   * @TEST_EDGE empty_report_object -> {"report": {}}
   * @TEST_EDGE random_status -> {"report": {"status": "unknown_status_code"}}
   * @TEST_INVARIANT render_resilience -> verifies: [valid_report_card, empty_report_object, random_status]
   */

  import { t } from "$lib/i18n/index.svelte.js";
  import { getReportTypeProfile } from "./reportTypeProfiles.js";

  let { report, selected = false, onselect = () => {} } = $props();

  const profile = $derived(getReportTypeProfile(report?.task_type));
  const profileLabel = $derived(
    typeof profile?.label === "function" ? profile.label() : profile?.label,
  );

  function getStatusClass(status) {
    if (status === "success")
      return "bg-success-light text-success ring-1 ring-success-ring";
    if (status === "failed")
      return "bg-destructive-light text-destructive ring-1 ring-destructive-ring";
    if (status === "in_progress")
      return "bg-primary-light text-primary ring-1 ring-primary-ring";
    if (status === "partial")
      return "bg-warning-light text-warning ring-1 ring-warning-ring";
    return "bg-surface-muted text-text ring-1 ring-secondary-ring";
  }

  function getStatusLabel(status) {
    if (status === "success") return $t.reports?.status_success;
    if (status === "failed") return $t.reports?.status_failed;
    if (status === "in_progress") return $t.reports?.status_in_progress;
    if (status === "partial") return $t.reports?.status_partial;
    return status || $t.reports?.not_provided;
  }

  function formatDate(value) {
    if (!value) return $t.reports?.not_provided;
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return $t.reports?.not_provided;
    return date.toLocaleString();
  }

  function onSelect() {
    onselect({ report });
  }
</script>

<button
  class="w-full rounded-xl border p-4 text-left shadow-sm transition hover:border-border-strong hover:bg-surface-page hover:shadow {selected
    ? 'border-primary-ring bg-primary-light'
    : 'border-border bg-surface-card'}"
  onclick={onSelect}
  aria-label={`${$t.reports?.title} ${report?.report_id || ""} ${$t.reports?.type} ${profileLabel || $t.reports?.unknown_type}`}
>
  <div class="mb-2 flex items-center justify-between gap-2">
    <span
      class="rounded px-2 py-0.5 text-xs font-semibold {profile?.variant ||
        'bg-surface-muted text-text'}"
    >
      {profileLabel || $t.reports?.unknown_type}
    </span>
    <span
      class="rounded px-2 py-0.5 text-xs font-semibold {getStatusClass(
        report?.status,
      )}"
    >
      {getStatusLabel(report?.status)}
    </span>
  </div>
  <p class="text-sm font-medium text-text">
    {report?.summary || $t.reports?.not_provided}
  </p>
  <p class="mt-1 text-xs text-text-muted">{formatDate(report?.updated_at)}</p>
</button>

<!-- #endregion ReportCard -->
