<!-- #region ValidationTaskReport [C:2] [TYPE Component] [SEMANTICS llm, validation, report] -->
<!-- @BRIEF Simple validation report display component — shows status badge and summary text. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";

  interface ValidationReport {
    status: string;
    summary?: string;
    issues?: Array<{ severity: string; message: string; location?: string }>;
  }

  let { result }: { result: ValidationReport | null } = $props();

  function getStatusColor(status: string): string {
    switch (status) {
      case 'PASS': return 'text-green-600 bg-green-100';
      case 'WARN': return 'text-yellow-600 bg-yellow-100';
      case 'FAIL': return 'text-red-600 bg-red-100';
      default: return 'text-gray-600 bg-gray-100';
    }
  }
</script>

<div class="bg-white shadow rounded-lg p-6 space-y-6">
  {#if result}
    <div class="flex items-center justify-between">
      <h2 class="text-xl font-bold text-gray-900">{$t.validation?.report_title || "Validation Report"}</h2>
      <span class={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(result.status)}`}>
        {result.status}
      </span>
    </div>
    {#if result.summary}
      <p class="text-gray-700">{result.summary}</p>
    {/if}
  {:else}
    <p class="text-gray-500">{$t.validation?.no_report || "No report data"}</p>
  {/if}
</div>
<!-- #endregion ValidationTaskReport -->
