{# 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>

  {# Consolidated header: title + a thin inline stat row so the page
     starts with content (chart + versions) above the fold rather than
     four large stat cards repeating what the breadcrumb already says.
     Total Cost lives in the chart's panel; we keep the executions /
     versions counts as plain text in the subtitle. #}
  <div class="ui-surface p-6 md:p-7">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <h1 class="ui-page-title mt-0"><code class="font-mono">{{ view.destination_table }}</code></h1>
        <p class="ui-card-meta mt-2 text-sm">
          {{ view.total_executions }} execution{% if view.total_executions != 1 %}s{% endif %}
          &middot; {{ view.versions | length }} query version{% if view.versions | length != 1 %}s{% endif %}{% if view.versions | length > 1 %} ({{ view.versions | length - 1 }} change{% if view.versions | length != 2 %}s{% endif %} in window){% endif %}
          &middot; {{ view.days_with_executions }} active day{% if view.days_with_executions != 1 %}s{% endif %}
        </p>
      </div>
      <div class="text-right">
        <p class="ui-card-label">Total cost</p>
        <p class="ui-card-value text-slate-900 dark:text-slate-100 mt-1">{{ view.total_cost_usd | format_usd }}</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 - collapsed by default. The page's
     primary surfaces are the cost-trend chart + Query versions; the
     suggestions belong to the *current* version and are reachable
     from /opportunities/{id} too, so we don't need to default-render
     full diff cards on this page. Expand on demand. #}
  <details class="ui-surface p-6 group">
    <summary class="cursor-pointer select-none list-none [&amp;::-webkit-details-marker]:hidden flex items-center justify-between gap-3">
      <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>
        {% else %}
          <span class="text-sm text-slate-500 dark:text-slate-400">none for current version</span>
        {% endif %}
      </div>
      <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </summary>
    {% if view.latest_suggestions %}
      <p class="mt-3 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 <em>Query versions</em> 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 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 overflow-hidden font-mono text-sm">
                    <div class="overflow-auto" style="max-height: 24rem;">
                      <pre class="text-sm 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-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">Rollback instructions</summary>
                <p class="mt-2 text-sm 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 %}
  </details>

  {# Query versions - chronological history of distinct query bodies.
     Each version is collapsed by default; the latest opens
     automatically because that's the one users came here to read. #}
  {% from "components/_section_title.html" import section_title %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Query versions",
         description="Chronological history of distinct query bodies for this destination. Each version's card is collapsed; the latest opens automatically because that's the one users came here to read.",
         aside=((view.versions | length) ~ " in window &middot; latest is open &middot; click to expand others")
    ) }}
    <div class="mt-5 space-y-3">
      {% for version in view.versions %}
        {% set is_latest = loop.last %}
        {% 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 %}