{# Cohort view for /jobs/{destination_table}.

   Renders every cached execution of one BigQuery destination_table
   as a single page: cost-trend chart + Available improvements
   (latest version's suggestions only) + chronological Query versions
   list. See specs/146-audit-job-history-trend/. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
<div class="space-y-6">
  <div class="ui-breadcrumb">
    <a href="/dashboard">Dashboard</a>
    <span>›</span>
    <span>Jobs</span>
    <span>›</span>
    <span class="ui-breadcrumb-current font-mono">{{ view.destination_table }}</span>
  </div>

  <div class="ui-surface p-6 md:p-7 space-y-6">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <p class="ui-eyebrow">Job history</p>
        <h1 class="ui-page-title mt-2"><code class="font-mono">{{ view.destination_table }}</code></h1>
        <p class="ui-card-meta mt-3">
          {{ view.total_executions }} execution{% if view.total_executions != 1 %}s{% endif %}
          across {{ view.versions | length }} query version{% if view.versions | length != 1 %}s{% endif %}
          · {{ view.days_with_executions }} day{% if view.days_with_executions != 1 %}s{% endif %} with executions
        </p>
      </div>
    </div>

    {# Stat strip — Total cost / Executions / Versions / Days. Mirrors
       the opportunity-detail stat-card layout for visual consistency. #}
    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Total Cost</p>
        <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ view.total_cost_usd | format_usd }}</p>
        <p class="ui-card-meta">summed across executions</p>
      </div>
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Executions</p>
        <p class="mt-2 ui-card-value text-brand-500 dark:text-brand-300">{{ view.total_executions }}</p>
      </div>
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Query Versions</p>
        <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ view.versions | length }}</p>
        {% if view.versions | length > 1 %}
          <p class="ui-card-meta">{{ view.versions | length - 1 }} change{% if view.versions | length != 2 %}s{% endif %} in window</p>
        {% endif %}
      </div>
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Days with executions</p>
        <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ view.days_with_executions }}</p>
      </div>
    </div>
  </div>

  {# Cost-trend chart — line + version-change scatter overlay. #}
  {% set chart_points_payload = view.chart_points_payload() %}
  {% include "jobs/_cost_chart.html" %}

  {# Available improvements — only the LATEST version's suggestions.
     Mirrors the same card stack /opportunities/{id} renders so the
     visual idiom + tab toggling stay identical. #}
  <div class="ui-surface p-6">
    <div class="flex flex-wrap items-center gap-3">
      <h2 class="ui-section-title">Available improvements</h2>
      {% if view.latest_suggestions %}
        <span class="ui-pill ui-pill-neutral">{{ view.latest_suggestions | length }} for current version</span>
      {% endif %}
    </div>
    {% if view.latest_suggestions %}
      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        SQL-rewrite suggestions for the current query version
        (<span class="font-mono">v{{ view.versions[-1].version_index }}</span>).
        Earlier versions' suggestions don't render — see Query versions below for what was resolved.
      </p>
      <div class="mt-5 space-y-5">
        {% for imp in view.latest_suggestions %}
          <div class="audit-imp-card border border-slate-200 dark:border-slate-800 rounded-sm p-4 bg-slate-50/40 dark:bg-slate-950/20" data-active-tab="diff">
            <div class="flex flex-wrap items-center gap-2">
              <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ imp.display_name }}</span>
              {% if imp.template_id %}
                <span class="ui-pill ui-pill-success">deterministic rewrite</span>
              {% endif %}
            </div>
            {% if imp.explanation %}
              <p class="mt-3 text-sm text-slate-700 dark:text-slate-200 leading-relaxed whitespace-pre-line">{{ imp.explanation }}</p>
            {% endif %}
            {% if imp.diff_lines or imp.before_content %}
              <div class="mt-4">
                <div class="audit-imp-tabs flex items-center gap-1 border-b border-slate-200 dark:border-slate-800 mb-3">
                  <button type="button" onclick="auditSetTab(this, 'diff')"
                          class="audit-imp-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
                          data-tab="diff">Diff</button>
                  <button type="button" onclick="auditSetTab(this, 'original')"
                          class="audit-imp-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
                          data-tab="original">Original SQL</button>
                </div>
                <div class="audit-imp-pane" data-tab-pane="diff">
                  {% if imp.diff_lines %}
                    {% set diff_lines = imp.diff_lines %}
                    {% set file_path = imp.template_id %}
                    {% include "components/code_diff.html" %}
                  {% else %}
                    <p class="text-sm text-slate-500 dark:text-slate-400 italic">No diff available — template did not produce a change.</p>
                  {% endif %}
                </div>
                <div class="audit-imp-pane hidden" data-tab-pane="original">
                  <div class="border border-slate-200 dark:border-slate-800 rounded-sm overflow-hidden font-mono text-sm">
                    <div class="overflow-auto" style="max-height: 24rem;">
                      <pre class="text-[13px] leading-relaxed p-0 m-0"><code>{% for line in (imp.before_content or '').split('\n') %}<span class="inline-block w-12 text-right pr-3 select-none text-slate-400 dark:text-slate-600 bg-slate-50 dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800">{{ loop.index }}</span><span class="pl-3 text-slate-800 dark:text-slate-200">{{ line }}</span>
{% endfor %}</code></pre>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if imp.rollback %}
              <details class="mt-3 group">
                <summary class="cursor-pointer text-xs text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">Rollback instructions</summary>
                <p class="mt-2 text-xs text-slate-600 dark:text-slate-300 whitespace-pre-line">{{ imp.rollback }}</p>
              </details>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="mt-3 text-sm text-slate-500 dark:text-slate-400">
        No suggestions for the current query version.
        {% if view.versions | length > 1 %}
          Earlier versions may have had findings — see <em>Query versions</em> below for what was resolved.
        {% endif %}
      </p>
    {% endif %}
  </div>

  {# Query versions — chronological history of distinct query bodies. #}
  <div class="ui-surface p-6">
    <div class="flex flex-wrap items-center gap-3">
      <h2 class="ui-section-title">Query versions</h2>
      <span class="ui-pill ui-pill-neutral">{{ view.versions | length }} in window</span>
    </div>
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
      Each distinct query body BigQuery executed in this scan window. Click a chart marker above to drill into a specific execution.
    </p>
    <div class="mt-5 space-y-5">
      {% for version in view.versions %}
        {% include "jobs/_version_card.html" %}
      {% endfor %}
    </div>
  </div>

</div>
</section>

{# Generic tab toggler — picks up any descendant with [data-tab] /
   [data-tab-pane] inside an ancestor that has [data-active-tab].
   Works for both Available improvements (.audit-imp-card) and the
   version cards (.audit-version-card) without coupling to the class
   name. #}
<script>
  if (typeof window.auditSetTab !== 'function') {
    window.auditSetTab = function(button, tab) {
      const card = button.closest('[data-active-tab]');
      if (!card) return;
      card.dataset.activeTab = tab;
      card.querySelectorAll('[data-tab]').forEach(b => {
        const active = b.dataset.tab === tab;
        b.classList.toggle('border-brand-500', active);
        b.classList.toggle('text-brand-500', active);
        b.classList.toggle('dark:text-brand-300', active);
        b.classList.toggle('border-transparent', !active);
        b.classList.toggle('text-slate-500', !active);
        b.classList.toggle('dark:text-slate-400', !active);
        b.classList.toggle('hover:text-slate-800', !active);
        b.classList.toggle('dark:hover:text-slate-200', !active);
      });
      card.querySelectorAll('[data-tab-pane]').forEach(p => {
        p.classList.toggle('hidden', p.dataset.tabPane !== tab);
      });
    };
  }
  // Initialise default-active button styling on every card.
  document.querySelectorAll('[data-active-tab]').forEach(card => {
    const initial = card.dataset.activeTab || 'diff';
    const btn = card.querySelector('[data-tab="' + initial + '"]');
    if (btn) window.auditSetTab(btn, initial);
  });

  // If we arrived here via a chart click that included a fragment
  // (#execution-<job_id>), scroll to the matching anchor after layout.
  if (window.location.hash) {
    requestAnimationFrame(() => {
      const target = document.querySelector(window.location.hash);
      if (target && target.scrollIntoView) {
        target.scrollIntoView({ behavior: 'auto', block: 'center' });
      }
    });
  }
</script>
{% endblock %}