<!-- #region TaskResultPanel [C:2] [TYPE Component] [SEMANTICS task, result, summary, status, plugin] -->
<!-- @ingroup Tasks -->
<!-- @BRIEF Displays formatted task result summary with status badges and result details. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:i18n] -->
<!-- @UX_STATE Empty -> No task selected, placeholder shown. -->
<!-- @UX_STATE Loaded -> Task result displayed with status color coding. -->
<script lang="ts">
  import { t } from '$lib/i18n/index.svelte.js';
  let { task = null } = $props();

  const result = $derived(task?.result || null);
  const pluginId = $derived(task?.plugin_id || '');

  function statusColor(status) {
    switch (status) {
      case 'PASS':
      case 'SUCCESS':
        return 'bg-success-light text-success';
      case 'WARN':
      case 'PARTIAL_SUCCESS':
        return 'bg-warning-light text-warning';
      case 'FAIL':
      case 'FAILED':
        return 'bg-destructive-light text-destructive';
      default:
        return 'bg-surface-muted text-text';
    }
  }
</script>

{#if !task}
  <div class="rounded-lg border border-dashed border-border bg-surface-page p-6 text-sm text-text-muted">
    {$t.tasks?.result_select_task}
  </div>
{:else if !result}
  <div class="rounded-lg border border-border bg-surface-card p-4">
    <p class="text-sm text-text">{$t.tasks?.result_not_structured}</p>
  </div>
{:else if pluginId === 'llm_dashboard_validation'}
  <div class="space-y-4 rounded-lg border border-border bg-surface-card p-4">
    <div class="flex items-center justify-between">
      <h3 class="text-sm font-semibold text-text">{$t.tasks?.result_llm_validation}</h3>
      <span class={`rounded-full px-2 py-1 text-xs font-semibold ${statusColor(result.status)}`}>{result.status || 'UNKNOWN'}</span>
    </div>
    <p class="text-sm text-text">{result.summary || $t.tasks?.result_no_summary}</p>
    {#if result.issues?.length}
      <div>
        <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-text-muted">{$t.tasks?.issues} ({result.issues.length})</p>
        <ul class="space-y-2">
          {#each result.issues as issue}
            <li class="rounded-md border border-border bg-surface-page p-2 text-sm">
              <div class="flex items-center gap-2">
                <span class={`rounded px-2 py-0.5 text-xs font-semibold ${statusColor(issue.severity)}`}>{issue.severity}</span>
                <span class="text-text">{issue.message}</span>
              </div>
              {#if issue.location}
                <p class="mt-1 text-xs text-text-muted">{$t.tasks?.location}: {issue.location}</p>
              {/if}
            </li>
          {/each}
        </ul>
      </div>
    {/if}
  </div>
{:else if pluginId === 'superset-backup'}
  <div class="space-y-4 rounded-lg border border-border bg-surface-card p-4">
    <div class="flex items-center justify-between">
      <h3 class="text-sm font-semibold text-text">{$t.tasks?.backup_result}</h3>
      <span class={`rounded-full px-2 py-1 text-xs font-semibold ${statusColor(result.status)}`}>{result.status || 'UNKNOWN'}</span>
    </div>
    <div class="grid grid-cols-2 gap-2 text-sm text-text">
      <p>{$t.dashboard?.environment}: {result.environment || $t.common?.not_available}</p>
      <p>{$t.tasks?.total}: {result.total_dashboards ?? 0}</p>
      <p>{$t.tasks?.successful}: {result.backed_up_dashboards ?? 0}</p>
      <p>{$t.tasks?.failed}: {result.failed_dashboards ?? 0}</p>
    </div>
    {#if result.failures?.length}
      <div>
        <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-text-muted">{$t.tasks?.errors}</p>
        <ul class="space-y-2">
          {#each result.failures as failure}
            <li class="rounded-md border border-destructive-light bg-destructive-light p-2 text-sm text-destructive">
              {failure.title || failure.id}: {failure.error}
            </li>
          {/each}
        </ul>
      </div>
    {/if}
  </div>
{:else if pluginId === 'superset-migration'}
  <div class="space-y-4 rounded-lg border border-border bg-surface-card p-4">
    <div class="flex items-center justify-between">
      <h3 class="text-sm font-semibold text-text">{$t.tasks?.migration_result}</h3>
      <span class={`rounded-full px-2 py-1 text-xs font-semibold ${statusColor(result.status)}`}>{result.status || 'UNKNOWN'}</span>
    </div>
    <div class="grid grid-cols-2 gap-2 text-sm text-text">
      <p>{$t.migration?.source_env}: {result.source_environment || $t.common?.not_available}</p>
      <p>{$t.migration?.target_env}: {result.target_environment || $t.common?.not_available}</p>
      <p>{$t.tasks?.selected}: {result.selected_dashboards ?? 0}</p>
      <p>{$t.tasks?.successful}: {result.migrated_dashboards?.length ?? 0}</p>
      <p>{$t.tasks?.with_errors}: {result.failed_dashboards?.length ?? 0}</p>
      <p>{$t.tasks?.mappings}: {result.mapping_count ?? 0}</p>
    </div>
    {#if result.failed_dashboards?.length}
      <div>
        <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-text-muted">{$t.tasks?.migration_errors}</p>
        <ul class="space-y-2">
          {#each result.failed_dashboards as failed}
            <li class="rounded-md border border-destructive-light bg-destructive-light p-2 text-sm text-destructive">
              {failed.title || failed.id}: {failed.error}
            </li>
          {/each}
        </ul>
      </div>
    {/if}
  </div>
{:else}
  <div class="rounded-lg border border-border bg-surface-card p-4">
    <pre class="overflow-auto rounded bg-surface-page p-3 text-xs text-text">{JSON.stringify(result, null, 2)}</pre>
  </div>
{/if}

<!-- #endregion TaskResultPanel -->
