<!-- [DEF:ReportDetailPanel:Component] -->
<script>
  /**
   * @TIER: CRITICAL
   * @SEMANTICS: reports, detail, diagnostics, next-actions, placeholders
   * @PURPOSE: Display detailed report context with diagnostics and actionable recovery guidance.
   * @LAYER: UI
   * @RELATION: DEPENDS_ON -> frontend/src/lib/i18n/index.ts
   * @INVARIANT: Failed/partial reports surface actionable hints when available.
   *
   * @UX_STATE: Ready -> Report detail content visible.
   * @UX_RECOVERY: Failed/partial report shows next actions and placeholder-safe diagnostics.
   *
   * @TEST_CONTRACT Component_ReportDetailPanel ->
   * {
   *   required_props: {},
   *   optional_props: {detail: Object},
   *   invariants: [
   *       "Renders properly even if detail or nested report object is null",
   *       "Displays placeholders for missing data fields",
   *       "Renders next_actions list if available either at root or inside report.error_context"
   *   ]
   * }
   * @TEST_FIXTURE valid_detail -> {"detail": {"report": {"report_id": "1", "task_type": "migration", "status": "success", "summary": "Done"}, "diagnostics": {"time": 123}, "next_actions": []}}
   * @TEST_EDGE no_detail_prop -> {"detail": null}
   * @TEST_EDGE detail_with_error_context -> {"detail": {"report": {"error_context": {"next_actions": ["Retry"]}}}}
   * @TEST_INVARIANT render_resilience -> verifies: [valid_detail, no_detail_prop, detail_with_error_context]
   */

  import { t } from "$lib/i18n";

  let { detail = null } = $props();

  function notProvided(value) {
    if (value === null || value === undefined || value === "") {
      return $t.reports?.not_provided;
    }
    return value;
  }

  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();
  }
</script>

<div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <h3 class="mb-3 text-sm font-semibold text-slate-700">
    {$t.reports?.view_details}
  </h3>

  {#if !detail || !detail.report}
    <p class="text-sm text-slate-500">{$t.reports?.not_provided}</p>
  {:else}
    <div class="space-y-2 text-sm text-slate-700">
      <p>
        <span class="text-slate-500">{$t.reports?.id}:</span>
        {notProvided(detail.report.report_id)}
      </p>
      <p>
        <span class="text-slate-500">{$t.reports?.type}:</span>
        {notProvided(detail.report.task_type)}
      </p>
      <p>
        <span class="text-slate-500">{$t.reports?.status}:</span>
        {notProvided(detail.report.status)}
      </p>
      <p>
        <span class="text-slate-500">{$t.reports?.summary}:</span>
        {notProvided(detail.report.summary)}
      </p>
      <p>
        <span class="text-slate-500">{$t.reports?.updated}:</span>
        {formatDate(detail.report.updated_at)}
      </p>
    </div>

    <div class="mt-4">
      <p class="mb-1 text-xs font-semibold uppercase text-slate-500">
        {$t.reports?.diagnostics}
      </p>
      <pre
        class="max-h-48 overflow-auto rounded-lg border border-slate-200 bg-slate-50 p-2 text-xs text-slate-700">{JSON.stringify(
          detail.diagnostics || { note: $t.reports?.not_provided },
          null,
          2,
        )}</pre>
    </div>

    {#if (detail.next_actions && detail.next_actions.length > 0) || (detail.report.error_context && detail.report.error_context.next_actions && detail.report.error_context.next_actions.length > 0)}
      <div class="mt-4">
        <p class="mb-1 text-xs font-semibold uppercase text-slate-500">
          {$t.reports?.next_actions}
        </p>
        <ul class="list-disc space-y-1 pl-5 text-sm text-slate-700">
          {#each detail.next_actions && detail.next_actions.length > 0 ? detail.next_actions : detail.report.error_context.next_actions as action}
            <li>{action}</li>
          {/each}
        </ul>
      </div>
    {/if}
  {/if}
</div>

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