<!-- #region DashboardTaskHistory [C:3] [TYPE Component] [SEMANTICS sveltekit, dashboard, task, history, recent] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Displays recent task history for a dashboard with status and action details. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:DashboardDetailPage]] -->
<!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
<script lang="ts">
  /**
   * @PURPOSE: Block for recent tasks table.
   * @LAYER UI
   */
  import { t } from "$lib/i18n/index.svelte.js";

  let {
    isTaskHistoryLoading,
    taskHistoryError,
    taskHistory,
    loadTaskHistory,
    getValidationStatus,
    toTaskTypeLabel,
    getTaskStatusClasses,
    getValidationStatusClasses,
    formatDate,
    openLlmReport = () => {}
  } = $props();
</script>

<div class="rounded-xl border border-border bg-surface-card p-4">
  <div class="mb-3 flex items-center justify-between">
    <h2 class="text-sm font-semibold uppercase tracking-wide text-text-muted">
      {$t.tasks?.recent}
    </h2>
    <button
      class="rounded-md border border-border-strong px-2 py-1 text-xs text-text hover:bg-surface-page"
      onclick={loadTaskHistory}
      disabled={isTaskHistoryLoading}
    >
      {$t.common?.refresh}
    </button>
  </div>
  {#if isTaskHistoryLoading}
    <div class="space-y-2">
      {#each Array(4) as _}
        <div class="h-10 animate-pulse rounded bg-surface-muted"></div>
      {/each}
    </div>
  {:else if taskHistoryError}
    <div class="rounded-lg border border-destructive-ring bg-destructive-light px-3 py-2 text-sm text-destructive">
      {taskHistoryError}
    </div>
  {:else if taskHistory.length === 0}
    <div class="rounded-lg border border-border bg-surface-page px-3 py-6 text-center text-sm text-text-muted">
      {$t.tasks?.select_task}
    </div>
  {:else}
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-border text-sm">
        <thead class="bg-surface-page">
          <tr>
            <th class="px-3 py-2 text-left font-semibold text-text-muted">{$t.common?.type}</th>
            <th class="px-3 py-2 text-left font-semibold text-text-muted">{$t.common?.status}</th>
            <th class="px-3 py-2 text-left font-semibold text-text-muted">{$t.tasks?.result}</th>
            <th class="px-3 py-2 text-left font-semibold text-text-muted">{$t.common?.started}</th>
            <th class="px-3 py-2 text-left font-semibold text-text-muted">{$t.common?.finished}</th>
            <th class="px-3 py-2 text-left font-semibold text-text-muted">{$t.common?.actions}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-border">
          {#each taskHistory as task}
            {@const validation = getValidationStatus(task)}
            <tr>
              <td class="px-3 py-2 text-text">{toTaskTypeLabel(task.plugin_id)}</td>
              <td class="px-3 py-2">
                <span class={`rounded-full px-2 py-1 text-xs font-semibold uppercase ${getTaskStatusClasses(task.status)}`}>
                  {task.status}
                </span>
              </td>
              <td class="px-3 py-2">
                <span class={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-semibold uppercase ${getValidationStatusClasses(validation.level)}`}>
                  {#if validation.icon}
                    <span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-surface-card/70 px-1 text-[10px] font-bold">
                      {validation.icon}
                    </span>
                  {/if}
                  {validation.label}
                </span>
              </td>
              <td class="px-3 py-2 text-text">{formatDate(task.started_at)}</td>
              <td class="px-3 py-2 text-text">{formatDate(task.finished_at)}</td>
              <td class="px-3 py-2">
                <div class="flex flex-wrap items-center gap-1">
                  {#if task.plugin_id === "llm_dashboard_validation"}
                    <button
                      class="inline-flex items-center gap-1 rounded-md border border-primary-ring bg-primary-light px-2 py-1 text-xs text-primary hover:bg-primary-light"
                      onclick={() => openLlmReport(task.id)}
                    >
                      {$t.tasks?.open_llm_report}
                    </button>
                  {/if}
                </div>
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  {/if}
</div>
<!-- #endregion DashboardTaskHistory -->