<!-- [DEF:ReportCard:Component] -->
<script>
  /**
   * @TIER: CRITICAL
   * @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 -> frontend/src/lib/components/reports/reportTypeProfiles.js
   * @RELATION: DEPENDS_ON -> frontend/src/lib/i18n/index.ts
   * @INVARIANT: Unknown task type always uses fallback profile.
   *
   * @UX_STATE: Ready -> Card displays summary/status/type.
   * @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";
  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-green-100 text-green-700 ring-1 ring-green-200";
    if (status === "failed")
      return "bg-red-100 text-red-700 ring-1 ring-red-200";
    if (status === "in_progress")
      return "bg-blue-100 text-blue-700 ring-1 ring-blue-200";
    if (status === "partial")
      return "bg-amber-100 text-amber-700 ring-1 ring-amber-200";
    return "bg-slate-100 text-slate-700 ring-1 ring-slate-200";
  }

  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-slate-300 hover:bg-slate-50 hover:shadow {selected
    ? 'border-blue-400 bg-blue-50'
    : 'border-slate-200 bg-white'}"
  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-slate-100 text-slate-700'}"
    >
      {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-slate-800">
    {report?.summary || $t.reports?.not_provided}
  </p>
  <p class="mt-1 text-xs text-slate-500">{formatDate(report?.updated_at)}</p>
</button>

<!-- [/DEF:ReportCard:Component] -->
