<!-- #region TranslateHistoryPage [C:3] [TYPE Page] [SEMANTICS sveltekit, translate, history, run, metrics] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Translation run history — renders TranslateHistoryModel state. -->
<!-- @LAYER Page -->
<!-- @RELATION BINDS_TO -> [TranslateHistoryModel] -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { t, _ } from '$lib/i18n/index.svelte.js';
  import { TranslateHistoryModel } from '$lib/models/TranslateHistoryModel.svelte';

  const m = new TranslateHistoryModel();

  onMount(() => {
    m.loadRuns();
    m.loadMetrics();
    m.loadJobs();
  });
</script>

<div class="container mx-auto px-4 py-6">
  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold text-text">{$t.translate?.history?.title}</h1>
      <p class="text-sm text-text-muted mt-1">{$t.translate?.history?.subtitle}</p>
    </div>
    <button onclick={() => { m.currentPage = 1; m.applyFilters(); }} class="px-4 py-2 text-sm text-white bg-primary rounded-lg hover:bg-primary-hover">{$t.translate?.history?.refresh}</button>
  </div>

  <!-- Metrics -->
  {#if m.totalMetric}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
      <div class="bg-surface-muted rounded-lg p-3"><p class="text-xs text-text-muted uppercase">{$t.translate?.history?.total_runs}</p><p class="text-xl font-bold text-text">{m.totalMetric.total_runs}</p></div>
      <div class="bg-success-light rounded-lg p-3"><p class="text-xs text-success uppercase">{$t.translate?.history?.successful}</p><p class="text-xl font-bold text-success">{m.totalMetric.successful_runs}</p></div>
      <div class="bg-destructive-light rounded-lg p-3"><p class="text-xs text-destructive uppercase">{$t.translate?.history?.failed}</p><p class="text-xl font-bold text-destructive">{m.totalMetric.failed_runs}</p></div>
      <div class="bg-primary-light rounded-lg p-3"><p class="text-xs text-primary uppercase">{$t.translate?.history?.records}</p><p class="text-xl font-bold text-primary">{m.totalMetric.total_records}</p></div>
    </div>
  {/if}

  <!-- Filters -->
  <div class="bg-surface-card border border-border rounded-lg p-4 mb-4">
    <div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
      <select bind:value={m.filterJobId} class="px-3 py-2 border border-border-strong rounded-lg text-sm">
        <option value="">{$t.translate?.history?.all_jobs}</option>
        {#each m.jobs as job}<option value={job.id}>{job.name}</option>{/each}
      </select>
      <select bind:value={m.filterStatus} class="px-3 py-2 border border-border-strong rounded-lg text-sm">
        <option value="">{$t.translate?.history?.all_status}</option>
        <option value="PENDING">{$t.translate?.history?.status_pending}</option>
        <option value="RUNNING">{$t.translate?.history?.status_running}</option>
        <option value="COMPLETED">{$t.translate?.history?.status_completed}</option>
        <option value="FAILED">{$t.translate?.history?.status_failed}</option>
        <option value="CANCELLED">{$t.translate?.history?.status_cancelled}</option>
      </select>
      <select bind:value={m.filterTrigger} class="px-3 py-2 border border-border-strong rounded-lg text-sm">
        <option value="">{$t.translate?.history?.all_triggers}</option>
        <option value="manual">{$t.translate?.history?.trigger_manual}</option>
        <option value="scheduled">{$t.translate?.history?.trigger_scheduled}</option>
        <option value="baseline_expired">{$t.translate?.history?.trigger_baseline_expired}</option>
      </select>
      <input type="date" bind:value={m.filterDateFrom} class="px-3 py-2 border border-border-strong rounded-lg text-sm" placeholder={$t.translate?.common?.from} />
      <button onclick={() => m.applyFilters()} class="px-4 py-2 text-sm bg-primary text-white rounded-lg hover:bg-primary-hover">{$t.translate?.history?.filter}</button>
    </div>
  </div>

  <!-- Loading -->
  {#if m.isLoading}
    <div class="space-y-3">{#each Array(5) as _}<div class="h-16 bg-surface-muted rounded-lg animate-pulse"></div>{/each}</div>

  <!-- Empty -->
  {:else if m.uxState === 'empty'}
    <div class="bg-surface-muted border border-dashed border-border-strong rounded-lg p-12 text-center">
      <svg class="w-16 h-16 text-text-subtle mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
      <p class="text-text-muted mb-2">{$t.translate?.history?.no_runs}</p>
      <p class="text-xs text-text-subtle">{$t.translate?.history?.no_runs_hint}</p>
    </div>

  <!-- Populated / Detail -->
  {:else if m.uxState === 'populated' || m.uxState === 'detail_open'}
    <div class="space-y-2">
      {#each m.runs as run}
        <div onclick={() => m.openDetail(run)} class="bg-surface-card border border-border rounded-lg p-3 hover:shadow-sm hover:border-border-strong transition-all cursor-pointer">
          <div class="flex items-center justify-between">
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2 mb-1">
                <span class="text-sm font-medium text-text">{m.getJobName(run.job_id as string)}</span>
                <span class="inline-flex px-2 py-0.5 text-xs rounded-full {m.getStatusClass(run.status as string)}">{run.status}</span>
                {#if run.trigger_type}<span class="text-xs text-text-subtle bg-surface-muted px-2 py-0.5 rounded">{run.trigger_type}</span>{/if}
              </div>
              <div class="flex items-center gap-3 text-xs text-text-subtle">
                <span>{run.created_at ? new Date(run.created_at as string).toLocaleString() : ''}</span>
                <span>{_('translate.history.records_label').replace('{count}', String(run.total_records || 0))}</span>
                <span>{_('translate.history.ok_label').replace('{count}', String(run.successful_records || 0))}</span>
                <span>{_('translate.history.fail_label').replace('{count}', String(run.failed_records || 0))}</span>
                <span class="text-info">Cache: {run.cache_hits || 0}</span>
                {#if run.created_by}<span>{_('translate.history.by_label').replace('{user}', String(run.created_by))}</span>{/if}
              </div>
              {#if (run.target_languages as string[])?.length > 0}
                <div class="flex gap-1 mt-1">
                  {#each run.target_languages as lang}<span class="px-1.5 py-0.5 text-xs rounded bg-primary-light text-primary">{lang}</span>{/each}
                </div>
              {/if}
            </div>
            <div class="flex items-center gap-2 ml-2" onclick={(e) => e.stopPropagation()}>
              {#if run.status === 'PENDING' || run.status === 'RUNNING'}
                <button onclick={() => m.handleCancelRun(run.id as string)} disabled={m.cancellingRunId === run.id} class="px-2 py-1 text-xs bg-destructive-light text-destructive rounded hover:bg-destructive-light disabled:opacity-50 transition-colors">
                  {m.cancellingRunId === run.id ? ($t.translate?.run?.cancelling || '...') : ($t.translate?.run?.cancel || 'Cancel')}
                </button>
              {/if}
              {#if run.status === 'FAILED'}
                <button onclick={() => m.handleRetryRun(run.id as string)} disabled={m.retryingRunId === run.id} class="px-2 py-1 text-xs bg-warning-light text-warning rounded hover:bg-warning-light disabled:opacity-50 transition-colors">
                  {m.retryingRunId === run.id ? ($t.translate?.run?.retrying || '...') : ($t.translate?.run?.retry_failed || 'Retry')}
                </button>
              {/if}
              {#if run.status === 'COMPLETED' && (run.skipped_records as number || 0) > 0}
                <button onclick={() => m.handleDownloadSkipped(run.id as string)} class="text-xs text-primary hover:text-primary-hover">{$t.translate?.history?.skipped_csv}</button>
              {/if}
              {#if run.status === 'FAILED' && (run.successful_records as number || 0) > 0}
                <button onclick={() => m.handleDownloadFailed(run.id as string)} class="text-xs text-primary hover:text-primary-hover">{$t.translate?.history?.failed_csv}</button>
              {/if}
              <svg class="w-4 h-4 text-text-subtle" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
            </div>
          </div>
        </div>
      {/each}
    </div>

    <!-- Pagination -->
    <div class="flex items-center justify-between mt-4">
      <p class="text-sm text-text-muted">{_('translate.history.showing').replace('{count}', String(m.runs.length)).replace('{total}', String(m.total))}</p>
      <div class="flex gap-2">
        <button onclick={() => { m.currentPage--; m.loadRuns(); }} disabled={m.currentPage <= 1} class="px-3 py-1.5 text-sm border border-border rounded-lg disabled:opacity-50">{$t.translate?.history?.previous}</button>
        <button onclick={() => { m.currentPage++; m.loadRuns(); }} disabled={m.currentPage * m.pageSize >= m.total} class="px-3 py-1.5 text-sm border border-border rounded-lg disabled:opacity-50">{$t.translate?.history?.next}</button>
      </div>
    </div>
  {/if}

  <!-- Detail panel -->
  {#if m.uxState === 'detail_open' && m.selectedRunDetail}
    <div class="fixed inset-0 z-50 bg-black/30" onclick={() => m.closeDetail()}></div>
    <div class="fixed right-0 top-0 h-full w-full max-w-2xl bg-surface-card shadow-xl z-50 overflow-y-auto">
      <div class="p-6">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-xl font-bold text-text">{$t.translate?.history?.run_detail}</h2>
          <button onclick={() => m.closeDetail()} class="text-text-subtle hover:text-text-muted">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>
        <!-- Status -->
        <div class="grid grid-cols-2 gap-4 mb-6">
          <div><p class="text-xs text-text-muted uppercase">{$t.translate?.history?.status}</p><span class="inline-flex px-2 py-1 text-sm rounded-full {m.getStatusClass(m.selectedRunDetail.status as string)}">{m.selectedRunDetail.status}</span></div>
          <div><p class="text-xs text-text-muted uppercase">{$t.translate?.history?.trigger}</p><p class="text-sm font-medium text-text">{m.selectedRunDetail.trigger_type || 'manual'}</p></div>
          <div><p class="text-xs text-text-muted uppercase">{$t.translate?.history?.started}</p><p class="text-sm text-text">{m.selectedRunDetail.started_at ? new Date(m.selectedRunDetail.started_at as string).toLocaleString() : '-'}</p></div>
          <div><p class="text-xs text-text-muted uppercase">{$t.translate?.history?.completed}</p><p class="text-sm text-text">{m.selectedRunDetail.completed_at ? new Date(m.selectedRunDetail.completed_at as string).toLocaleString() : '-'}</p></div>
        </div>
        <!-- Stats -->
        <div class="grid grid-cols-5 gap-3 mb-6">
          <div class="bg-surface-muted rounded p-3 text-center"><p class="text-lg font-bold text-text">{m.selectedRunDetail.total_records || 0}</p><p class="text-xs text-text-muted">{$t.translate?.history?.total}</p></div>
          <div class="bg-success-light rounded p-3 text-center"><p class="text-lg font-bold text-success">{m.selectedRunDetail.successful_records || 0}</p><p class="text-xs text-success">{$t.translate?.history?.success}</p></div>
          <div class="bg-destructive-light rounded p-3 text-center"><p class="text-lg font-bold text-destructive">{m.selectedRunDetail.failed_records || 0}</p><p class="text-xs text-destructive">{$t.translate?.history?.failed}</p></div>
          <div class="bg-warning-light rounded p-3 text-center"><p class="text-lg font-bold text-warning">{m.selectedRunDetail.skipped_records || 0}</p><p class="text-xs text-warning">{$t.translate?.history?.skipped}</p></div>
          <div class="bg-info-light rounded p-3 text-center"><p class="text-lg font-bold text-info">{m.selectedRunDetail.cache_hits || 0}</p><p class="text-xs text-info">Cache</p></div>
        </div>
        <!-- Per-language -->
        {#if m.selectedRunDetail.language_stats && Object.keys(m.selectedRunDetail.language_stats as Record<string, unknown>).length > 0}
          <div class="mb-6">
            <h3 class="text-sm font-semibold text-text mb-2">{$t.translate?.run?.per_language}</h3>
            <div class="space-y-2">
              {#each Object.entries(m.selectedRunDetail.language_stats as Record<string, unknown>) as [lang, stats]}
                <div class="bg-surface-muted rounded-lg p-3">
                  <div class="flex items-center justify-between mb-1"><span class="text-sm font-medium text-text">{lang}</span></div>
                  <div class="grid grid-cols-4 gap-2 text-xs text-text-muted">
                    <span>{_('translate.run.translated_label').replace('{count}', String((stats as Record<string, unknown>).translated_rows))}</span>
                    <span>{_('translate.run.failed_label').replace('{count}', String((stats as Record<string, unknown>).failed_rows))}</span>
                    <span>{_('translate.run.skipped_label').replace('{count}', String((stats as Record<string, unknown>).skipped_rows))}</span>
                    <span>{_('translate.run.tokens_label').replace('{count}', String((stats as Record<string, unknown>).token_count))}</span>
                  </div>
                </div>
              {/each}
            </div>
          </div>
        {/if}
        <!-- Actions -->
        <div class="flex items-center gap-3 mb-6">
          {#if m.selectedRunDetail.status === 'PENDING' || m.selectedRunDetail.status === 'RUNNING'}
            <button onclick={() => m.handleCancelRun(m.selectedRunDetail!.id as string)} disabled={m.cancellingRunId === m.selectedRunDetail!.id} class="px-4 py-2 text-sm bg-destructive text-white rounded-lg hover:bg-destructive-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
              {m.cancellingRunId === m.selectedRunDetail!.id ? ($t.translate?.run?.cancelling || 'Cancelling...') : ($t.translate?.run?.cancel || 'Cancel')}
            </button>
          {/if}
          {#if m.selectedRunDetail.status === 'FAILED'}
            <button onclick={() => m.handleRetryRun(m.selectedRunDetail!.id as string)} disabled={m.retryingRunId === m.selectedRunDetail!.id} class="px-4 py-2 text-sm bg-warning text-white rounded-lg hover:bg-warning disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
              {m.retryingRunId === m.selectedRunDetail!.id ? ($t.translate?.run?.retrying || 'Retrying...') : ($t.translate?.run?.retry_failed || 'Retry Failed')}
            </button>
          {/if}
        </div>
        <!-- Config snapshot -->
        {#if m.selectedRunDetail.config_snapshot}
          <div class="mb-6"><h3 class="text-sm font-semibold text-text mb-2">{$t.translate?.history?.config_snapshot}</h3><div class="bg-surface-muted rounded-lg p-3"><pre class="text-xs text-text-muted overflow-x-auto">{JSON.stringify(m.selectedRunDetail.config_snapshot, null, 2)}</pre></div></div>
        {/if}
        <!-- Hashes -->
        {#if m.selectedRunDetail.config_hash || m.selectedRunDetail.dict_snapshot_hash}
          <div class="mb-6"><h3 class="text-sm font-semibold text-text mb-2">{$t.translate?.history?.snapshots}</h3>
            <div class="grid grid-cols-3 gap-2 text-xs font-mono text-text-muted">
              {#if m.selectedRunDetail.config_hash}<div class="bg-surface-muted rounded p-2">Config: {m.selectedRunDetail.config_hash}</div>{/if}
              {#if m.selectedRunDetail.dict_snapshot_hash}<div class="bg-surface-muted rounded p-2">Dict: {m.selectedRunDetail.dict_snapshot_hash}</div>{/if}
              {#if m.selectedRunDetail.key_hash}<div class="bg-surface-muted rounded p-2">Key: {m.selectedRunDetail.key_hash}</div>{/if}
            </div></div>
        {/if}
        <!-- Events -->
        {#if (m.selectedRunDetail.events as unknown[])?.length > 0}
          <div class="mb-6"><h3 class="text-sm font-semibold text-text mb-2">{($t.translate?.history?.events as string)?.replace('{count}', String((m.selectedRunDetail.events as unknown[]).length))}</h3>
            <div class="space-y-1 max-h-48 overflow-y-auto">
              {#each m.selectedRunDetail.events as evt}
                <div class="flex items-center gap-2 text-xs text-text-muted bg-surface-muted rounded px-2 py-1">
                  <span class="font-medium text-text">{(evt as Record<string, unknown>).event_type}</span>
                  <span class="text-text-subtle">|</span>
                  <span>{(evt as Record<string, unknown>).created_at ? new Date((evt as Record<string, unknown>).created_at as string).toLocaleString() : ''}</span>
                </div>
              {/each}
            </div></div>
        {/if}
        <!-- Error -->
        {#if m.selectedRunDetail.error_message}
          <div class="bg-destructive-light border border-destructive-light rounded-lg p-3 mb-6"><p class="text-xs font-medium text-destructive">{$t.translate?.history?.error}</p><p class="text-xs text-destructive mt-1">{m.selectedRunDetail.error_message}</p></div>
        {/if}
        {#if m.selectedRunDetail.superset_execution_id}
          <div class="bg-primary-light rounded-lg p-3 mb-6"><p class="text-xs font-medium text-primary">{$t.translate?.history?.superset_query_id}</p><p class="text-xs font-mono text-primary mt-1">{m.selectedRunDetail.superset_execution_id}</p></div>
        {/if}
      </div>
    </div>
  {/if}
</div>
<!-- #endregion TranslateHistoryPage -->
