<!-- #region ValidationTasksPage [C:3] [TYPE Page] [SEMANTICS validation,tasks,list,table] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Validation tasks list page — renders ValidationTasksListModel state. -->
<!-- @LAYER Page -->
<!-- @RELATION BINDS_TO -> [ValidationTasksListModel] -->
<!-- @UX_STATE loading -> Skeleton table rows matching column layout -->
<!-- @UX_STATE loaded -> Data rows with all columns -->
<!-- @UX_STATE empty -> Centered empty card with CTA -->
<!-- @UX_STATE error -> Red banner with error and retry -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { t } from '$lib/i18n/index.svelte.js';
  import { EmptyState, Pagination, Skeleton, Icon } from '$lib/ui';
  import { ValidationTasksListModel } from '$lib/models/ValidationTasksListModel.svelte';

  let { data } = $props();

  const m = new ValidationTasksListModel();
  m.initFromLoad(data);

  onMount(() => {
    return () => { m.destroy(); };
  });

  function formatSchedule(input: string | null | undefined): string {
    if (!input) return $t.validation?.manual || 'Manual';
    return input;
  }

  function formatTimestamp(ts: unknown): string {
    if (!ts) return '\u2014';
    try { return new Date(ts as string).toLocaleString(); }
    catch { return String(ts); }
  }

  function formatLastRunSummary(summary: { pass?: number; warn?: number; fail?: number } | null | undefined): string {
    if (!summary) return '\u2014';
    const parts: string[] = [];
    if (summary.pass) parts.push(`${summary.pass} PASS`);
    if (summary.warn) parts.push(`${summary.warn} WARN`);
    if (summary.fail) parts.push(`${summary.fail} FAIL`);
    return parts.join('\u2022') || '\u2014';
  }

  function getSummaryBadgeClass(summary: { fail?: number; warn?: number; pass?: number } | null | undefined): string {
    if (!summary) return 'bg-surface-muted text-text-muted';
    if (summary.fail && summary.fail > 0) return 'bg-destructive-light text-destructive';
    if (summary.warn && summary.warn > 0) return 'bg-warning-light text-warning';
    if (summary.pass && summary.pass > 0) return 'bg-success-light text-success';
    return 'bg-surface-muted text-text-muted';
  }

  function getEnvLabel(task: Record<string, unknown>): string {
    return String(task.environment_name || task.environment_id || '\u2014');
  }

  // ── Pagination bridge (0-indexed ↔ 1-indexed) ──
  let pageZero = $state(m.currentPage - 1);

  $effect(() => {
    if (pageZero + 1 !== m.currentPage) {
      m.goToPage(pageZero + 1);
    }
  });

  $effect(() => {
    if (m.currentPage - 1 !== pageZero) {
      pageZero = m.currentPage - 1;
    }
  });
</script>

<div class="max-w-7xl mx-auto px-4 py-6">
  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-text">{$t.validation?.title || 'Validation Tasks'}</h1>
    <button onclick={() => m.navToNew()} class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors font-medium text-sm">
      <Icon name="plus" size={20} class="mr-1.5" />
      {$t.validation?.new_task || '+ New Task'}
    </button>
  </div>

  <!-- Search -->
  <div class="mb-4">
    <div class="relative max-w-sm">
      <Icon name="search" size={16} class="absolute left-3 top-1/2 -translate-y-1/2 text-text-subtle" />
      <input type="text" placeholder={$t.common?.search || 'Search tasks...'} value={m.searchQuery} oninput={(e) => m.handleSearchInput((e.target as HTMLInputElement).value)} class="w-full pl-10 pr-4 py-2 border border-border-strong rounded-lg text-sm focus:ring-2 focus:ring-primary-ring focus:border-primary-ring outline-none" aria-label={$t.common?.search} />
    </div>
  </div>

  <!-- Error -->
  {#if m.error && !m.isLoading}
    <div class="bg-destructive-light border border-destructive-ring rounded-lg p-4 mb-6 flex items-center justify-between" role="alert">
      <div class="flex items-center gap-2 text-destructive">
        <Icon name="warning" size={20} class="flex-shrink-0" />
        <span class="text-sm">{m.error}</span>
      </div>
      <button onclick={() => m.loadTasks()} class="px-3 py-1.5 text-sm bg-destructive text-white rounded-lg hover:bg-destructive transition-colors">{$t.validation?.retry}</button>
    </div>
  {/if}

  <!-- Loading -->
  {#if m.isLoading}
    <div class="bg-surface-card border border-border rounded-lg overflow-hidden p-6">
      <Skeleton variant="row" cols={6} rows={5} />
    </div>

  <!-- Empty -->
  {:else if !m.error && m.tasks.length === 0}
    <EmptyState
      title={$t.validation?.no_tasks || 'No validation tasks yet'}
      description={$t.validation?.create_first || 'Create your first task'}
      actionLabel={$t.validation?.new_task || '+ New Task'}
      onAction={() => m.navToNew()}
    />

  <!-- Loaded: table -->
  {:else}
    <div class="bg-surface-card border border-border rounded-lg overflow-hidden shadow-sm">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-border">
          <thead class="bg-surface-muted"><tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{$t.validation?.task_name}</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{$t.validation?.environment}</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{$t.validation?.schedule}</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{$t.validation?.last_run}</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{$t.validation?.status}</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">{$t.validation?.actions}</th>
          </tr></thead>
          <tbody class="bg-surface-card divide-y divide-border">
            {#each m.tasks as task (task.id)}
              <tr class="hover:bg-surface-muted transition-colors">
                <td class="px-6 py-4 whitespace-nowrap">
                  <button onclick={() => m.navToDetail(task.id)} class="text-sm font-medium text-primary hover:text-primary hover:underline text-left">{task.name || '\u2014'}</button>
                </td>
                <td class="px-6 py-4 whitespace-nowrap"><span class="text-sm text-text">{getEnvLabel(task)}</span></td>
                <td class="px-6 py-4 whitespace-nowrap">
                  {#if task.schedule}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-light text-primary">{formatSchedule((task as Record<string,unknown>).schedule_description as string || task.schedule)}</span>
                  {:else}
                    <span class="text-sm text-text-subtle">{$t.validation?.manual || 'Manual'}</span>
                  {/if}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  {#if task.last_run_at || task.last_run_summary}
                    <div class="flex flex-col gap-0.5">
                      {#if task.last_run_at}<span class="text-xs text-text-muted">{formatTimestamp(task.last_run_at)}</span>{/if}
                      {#if task.last_run_summary}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {getSummaryBadgeClass(task.last_run_summary as { pass?: number; warn?: number; fail?: number } | null)}">{formatLastRunSummary(task.last_run_summary as { pass?: number; warn?: number; fail?: number } | null)}</span>{/if}
                    </div>
                  {:else}<span class="text-sm text-text-subtle">\u2014</span>{/if}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <button onclick={() => m.handleToggleStatus(task)} class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-ring focus:ring-offset-2" class:bg-primary={task.is_active !== false} class:bg-surface-muted={task.is_active === false} role="switch" aria-checked={task.is_active !== false}>
                    <span class="inline-block h-4 w-4 transform rounded-full bg-surface-card transition-transform" class:translate-x-6={task.is_active !== false} class:translate-x-1={task.is_active === false}></span>
                  </button>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right">
                  <div class="flex items-center justify-end gap-1">
                    <button onclick={() => m.handleRunNow(task.id)} disabled={m.runningTasks[task.id]} class="p-2 text-text-subtle hover:text-primary rounded-lg hover:bg-primary-light transition-colors disabled:opacity-40 disabled:cursor-not-allowed" title={$t.validation?.run_now}>
                      {#if m.runningTasks[task.id]}
                        <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                      {:else}
                        <Icon name="play" size={16} />
                      {/if}
                    </button>
                    <button onclick={() => m.navToEdit(task.id)} class="p-2 text-text-subtle hover:text-primary rounded-lg hover:bg-primary-light transition-colors" title={$t.validation?.edit}>
                      <Icon name="edit" size={16} />
                    </button>
                    {#if m.deleteConfirmId === task.id}
                      <div class="flex items-center gap-1">
                        <button onclick={() => m.handleDelete(task.id)} class="px-2 py-1 text-xs bg-destructive text-white rounded hover:bg-destructive transition-colors">{$t.validation?.confirm_delete}</button>
                        <button onclick={() => { m.deleteConfirmId = null; }} class="px-2 py-1 text-xs bg-surface-muted text-text rounded hover:bg-surface-muted transition-colors">{$t.common?.cancel}</button>
                      </div>
                    {:else}
                      <button onclick={() => { m.deleteConfirmId = task.id; }} class="p-2 text-text-subtle hover:text-destructive rounded-lg hover:bg-destructive-light transition-colors" title={$t.validation?.delete}>
                        <Icon name="trash" size={16} />
                      </button>
                    {/if}
                  </div>
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    {#if m.totalPages > 1}
      <Pagination
        bind:page={pageZero}
        pageSize={m.pageSize}
        total={m.total}
      />
    {/if}
  {/if}
</div>
<!-- #endregion ValidationTasksPage -->
