{# Audit's object-overview detail page. Lists EVERY active issue +
   EVERY available SQL-rewrite suggestion for the requested
   opportunity's destination_table - not just one rule's findings.
   The cohort view at /jobs/{table} stays as the deep-dive (cost
   chart, Query versions). PR / dry-run / shadow surfaces are
   deliberately absent - audit is read-only and never generates
   solutions. #}
{% extends "layout.html" %}

{% block content %}
{% from "components/_page_header.html" import back_link, header_card %}
{# Hoisted from per-section conditional blocks because Jinja {% from %}
   scope is the enclosing block: when issue_cards is empty (suggestion-
   only opportunity) the issue-section's import never fires, but later
   sections like Available improvements still reference the macro -
   produces ``'section_title' is undefined``. Hoisting once at the top
   of the content block makes the macro available everywhere below. #}
{% from "components/_section_title.html" import section_title %}
{% from "components/_sql_panel.html" import sql_panel %}
<section class="ui-shell">
<div class="space-y-6">
  {{ back_link("/opportunities", "Opportunities") }}

  {% set _path_parts = (row.affected_table or '').split('.') %}
  {% set _dataset = _path_parts[1] if _path_parts | length >= 2 else '' %}
  {% set _table = _path_parts[2] if _path_parts | length >= 3 else (row.affected_table or '') %}
  {% set _title %}<code class="font-mono">{% if _dataset %}{{ _dataset }}.{% endif %}{{ row.dbt_model_name or _table }}</code>{% endset %}
  {% call header_card(_title) %}
    {% if row.dbt_model_name %}
      <span class="text-sm font-medium text-emerald-600 dark:text-emerald-400">dbt</span>
    {% endif %}
    {% if row.author_email %}
      <a href="/opportunities?author={{ row.author_email | urlencode }}"
         class="ui-signal-chip text-slate-600 dark:text-slate-300 hover:underline"
         title="Filter the workspace by this author's findings">
        <span class="ui-legend-dot bg-slate-400 dark:bg-slate-500"></span>
        <span class="font-mono">{{ row.author_email }}</span>
      </a>
    {% endif %}
  {% endcall %}

  {# Six-card stat strip - aggregated lifetime metrics on the left
     half, last-execution snapshot on the right half. Lives outside
     the ``ui-surface`` header so the cards read as a standalone strip
     (mirrors the dashboard's cost-summary row). ``grid-cols-6`` isn't
     in the pre-compiled Tailwind bundle (same constraint as
     ``_cost_summary.html``), so we inline the 6-column rule below
     the xl breakpoint and rely on Tailwind's built-in 1/2/3 cols at
     smaller widths. #}
  <style>
    @media (min-width: 1280px) {
      .audit-detail-stat-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }
  </style>
  {% from "components/_stat_card.html" import stat_card %}
  {%- set _exec_meta = ("across " ~ row.execution_count ~ " executions") if (row.execution_count and row.execution_count > 1) else None -%}
  <div class="audit-detail-stat-row grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
    {{ stat_card("Cost (aggregated)", row.query_cost_value | format_usd, meta=_exec_meta) }}
    {% if row.aggregated_bytes_processed %}
      {{ stat_card("Bytes Processed (aggregated)", row.aggregated_bytes_processed | format_bytes, meta=_exec_meta, accent="brand") }}
    {% elif job and job.total_bytes_processed is not none %}
      {{ stat_card("Bytes Processed (aggregated)", job.total_bytes_processed | format_bytes, accent="brand") }}
    {% else %}
      {{ stat_card("Bytes Processed (aggregated)", "-", accent="slate") }}
    {% endif %}
    {% if row.aggregated_slot_time_ms %}
      {{ stat_card("Slot Time (aggregated, hours)", "%.1f" | format((row.aggregated_slot_time_ms or 0) / 3600000), meta=_exec_meta) }}
    {% elif job and job.total_slot_ms is not none %}
      {{ stat_card("Slot Time (aggregated, hours)", "%.1f" | format((job.total_slot_ms or 0) / 3600000)) }}
    {% else %}
      {{ stat_card("Slot Time (aggregated, hours)", "-", accent="slate") }}
    {% endif %}
    {# Last-execution trio - same three metrics for the most-recent
       cached run so the user can compare the freshest point against
       the aggregated lifetime view to its left. Hidden when no
       cached execution exists for the affected_table. #}
    {% if latest_job %}
      {{ stat_card(
           "Last Execution Cost",
           (latest_job.total_cost or 0) | float | format_usd,
           meta=latest_job.creation_time.strftime("%Y-%m-%d %H:%M UTC") if latest_job.creation_time else None
      ) }}
      {% if latest_job.total_bytes_processed is not none %}
        {{ stat_card(
             "Last Execution Bytes",
             latest_job.total_bytes_processed | format_bytes,
             meta=("billed: " ~ (latest_job.total_bytes_billed | format_bytes)) if latest_job.total_bytes_billed is not none else None,
             accent="brand"
        ) }}
      {% else %}
        {{ stat_card("Last Execution Bytes", "-", accent="slate") }}
      {% endif %}
      {% if latest_job.total_slot_ms is not none %}
        {{ stat_card(
             "Last Execution Slot (hours)",
             "%.1f" | format((latest_job.total_slot_ms or 0) / 3600000),
             meta=("duration: " ~ (latest_job.duration_ms | format_duration)) if latest_job.duration_ms is not none else None
        ) }}
      {% else %}
        {{ stat_card("Last Execution Slot (hours)", "-", accent="slate") }}
      {% endif %}
    {% endif %}
  </div>

  {# Cost trend collapsible. "Cost trend" (not "for this table") because
     the same partial is used for consumption queries that have no
     destination table. The full job-history cohort link is passed into
     the partial as ``chart_history_href`` so it renders inside the
     collapsible's expanded body. #}
  {% if chart_points_payload %}
    {% set chart_title = "Cost trend" %}
    {% set chart_subtitle = "One point per day across the scan window. Days without executions are skipped." %}
    {% set chart_collapsible = true %}
    {% set chart_history_href = "/jobs/" ~ row.affected_table %}
    {% include "jobs/_cost_chart.html" %}
  {% endif %}

  {# Issues found - one bordered card per issue rule that fired on
     this table. Each card has a 2-column Why-this-fired / Recommended-
     fix split, so readers can pair the cause with the fix per rule.
     When a rule has no template SQL diff, Recommended-fix points to
     the Available improvements section below rather than repeating
     the Why-this-fired text verbatim. When zero issues fired
     (suggestion-only object), this section is hidden. #}
  {% if issue_cards %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Issues found",
         description="One card per detection rule that fired on this table. Each card pairs the rule's evidence (slot contention, shuffle spill, etc.) with a recommended fix.",
         aside=((issue_cards | length) ~ (' rule' if issue_cards | length == 1 else ' rules'))
    ) }}
    <div class="mt-5 space-y-5">
      {% for issue in issue_cards %}
      <div class="audit-issue-card border border-slate-200 dark:border-slate-800 p-5 bg-white dark:bg-slate-950">
        <div class="flex flex-wrap items-center gap-2">
          {# Red issue pill - matches the red "issue count" pill in the
             dashboard's Top Cost Drivers table so the visual grammar
             is consistent across pages. #}
          <span class="ui-pill ui-pill-danger">{{ issue.row.opportunity_type | replace('_', ' ') }}</span>
        </div>
        {# Each column gets its own sub-card so "Why this fired" and
           "Recommended fix" are visually distinct blocks. Background
           is one full step darker than the outer card (slate-100 /
           dark:slate-800) so the separation reads clearly. #}
        <div class="mt-4 grid gap-4 lg:grid-cols-2">
          <div class="bg-slate-100 dark:bg-slate-800 p-4">
            <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200">Why this fired</h3>
            <p class="mt-2 text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-line">{{ issue.row.explanation }}</p>
            {% if issue.rule_meta and issue.rule_meta.description %}
              <p class="mt-2 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{{ issue.rule_meta.description }}</p>
            {% endif %}
          </div>
          <div class="bg-slate-100 dark:bg-slate-800 p-4">
            <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200">Recommended fix</h3>
            {% if issue.template_result %}
              <p class="mt-2 text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-line">{{ issue.template_result.explanation }}</p>
              {% if issue.diff_lines %}
                <p class="mt-2 text-sm text-slate-500 dark:text-slate-400 italic">SQL diff in <em>Available improvements</em> below.</p>
              {% endif %}
            {% elif improvements %}
              <p class="mt-2 text-sm text-slate-500 dark:text-slate-400 italic">See <em>Available improvements</em> below for the SQL-rewrite catalogue.</p>
            {% else %}
              <p class="mt-2 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">This issue type doesn't have a single-query SQL rewrite. The fix is at the workload-scheduling or schema layer.</p>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# Spec 148 - Recommended physical layout. Read-only suggestion of
     partition + cluster keys based on how the table is queried.
     The partial gates on ``layout_recommendation`` so a None recommendation
     produces zero markup. #}
  {% include "opportunities/_layout_recommendation.html" %}

  {# Available improvements - every SQL-rewrite suggestion that
     fired on any opportunity for this table, deduped by rule_type.
     Each is a deterministic rewrite (no LLM) and renders inline as
     its own green/red diff. #}
  {% if improvements %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Available improvements",
         description="Deterministic SQL rewrites the audit can suggest for this table. Each card carries a green/red diff plus a rollback path.",
         aside=((improvements | length) ~ (' suggestion' if improvements | length == 1 else ' suggestions'))
    ) }}
    <div class="mt-5 space-y-5">
      {% for imp in improvements %}
      <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 %}
          {% if imp.occurrences and imp.occurrences > 1 %}
            <span class="ui-pill ui-pill-neutral" title="This pattern was detected {{ imp.occurrences }} times in this query">
              ×{{ imp.occurrences }}
            </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>
            {% if imp.after_content %}
            <button type="button" onclick="auditSetTab(this, 'suggested')"
                    class="audit-imp-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
                    data-tab="suggested">Suggested SQL</button>
            {% endif %}
          </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="relative border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm">
              {# Copy button - sits in the top-right of the SQL pane.
                 The full SQL text lives in a hidden ``data-copy-source``
                 sibling so the JS handler can read it without scraping
                 the rendered DOM (which has line-number prefixes). #}
              <button type="button"
                      onclick="auditCopyFromSibling(this)"
                      class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                <span>Copy</span>
              </button>
              <textarea data-copy-source class="hidden">{{ imp.before_content or '' }}</textarea>
              <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>
          {% if imp.after_content %}
          <div class="audit-imp-pane hidden" data-tab-pane="suggested">
            {# Suggested SQL - the full source with the rule's
               recommended changes applied (i.e. the "after" side of the
               diff, rendered as a complete file). Same structure as the
               Original tab so the copy button reads the raw SQL from
               the hidden textarea. #}
            <div class="relative border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm">
              <button type="button"
                      onclick="auditCopyFromSibling(this)"
                      class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                <span>Copy</span>
              </button>
              <textarea data-copy-source class="hidden">{{ imp.after_content or '' }}</textarea>
              <div class="overflow-auto" style="max-height: 24rem;">
                <pre class="text-sm leading-relaxed p-0 m-0"><code>{% for line in (imp.after_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>
          {% endif %}
        </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>
  </div>
  {% endif %}

  {# Query fallback - when no SQL-rewrite suggestions fired on this
     opportunity, the user still needs to see the underlying query so
     they can manually inspect what's running. Suggestion cards already
     include an "Original SQL" tab; this block is the fallback path
     when ``improvements`` is empty. Renders only when we have a
     representative job with a query body. #}
  {% if not improvements and job and job.query %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Query",
         description="The latest execution of this query. No deterministic SQL-rewrite suggestion is available for this opportunity - the fix is at the workload-scheduling or schema layer."
    ) }}
    <div class="relative mt-4 border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm" data-active-tab="query">
      <button type="button"
              onclick="auditCopyFromSibling(this)"
              class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
        <span>Copy</span>
      </button>
      <textarea data-copy-source class="hidden">{{ job.query }}</textarea>
      <div class="overflow-auto" style="max-height: 28rem;">
        <pre class="text-sm leading-relaxed p-0 m-0"><code>{% for line in job.query.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>
  {% endif %}

  {# Evidence + BigQuery query lookup - two side-by-side cards on
     >=lg, stacked on smaller screens. Each card collapses
     independently. The right-hand card renders the
     ``INFORMATION_SCHEMA.JOBS_BY_PROJECT`` SELECT pre-filtered by
     job_id so the user can paste it into the BigQuery console and
     inspect the row themselves. Evidence + lookup come from the
     representative opportunity (highest-priority for this table). #}
  {% if visible_evidence or job_lookup_sql %}
  <div class="grid gap-6 lg:grid-cols-2">
    {% if visible_evidence %}
    <details class="ui-surface p-6 group min-w-0" open>
      <summary class="flex items-center justify-between cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
        <h2 class="ui-section-title">Evidence</h2>
        <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180" 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>
      <dl class="mt-4 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
        {% for key, value in visible_evidence.items() %}
          <dt class="text-slate-500 dark:text-slate-400 font-mono">{{ key }}</dt>
          <dd class="font-mono text-slate-700 dark:text-slate-200 break-all">
            {% if value is mapping or (value is iterable and value is not string) %}
              {{ value | tojson }}
            {% else %}
              {{ value }}
            {% endif %}
          </dd>
        {% endfor %}
      </dl>
    </details>
    {% endif %}
    {% if job_lookup_sql %}
      {{ sql_panel("job-lookup-sql", "BigQuery query", job_lookup_sql,
                   caption="Paste this into the BigQuery console to inspect the underlying job row.") }}
    {% endif %}
  </div>
  {% endif %}

</div>
</section>

{# Generic tab toggler - picks up every ``[data-tab]`` /
   ``[data-tab-pane]`` pair inside an ancestor with
   ``[data-active-tab]``. Same script as the cohort page so
   suggestion cards' Diff / Original SQL tabs work without coupling
   to the class name. #}
<script>
  if (typeof window.auditCopyFromSibling !== 'function') {
    // Copies the text of the nearest ``[data-copy-source]`` element
    // inside the same parent as the clicked button. Used by the
    // Original SQL / Suggested SQL panes - each pane has a hidden
    // ``<textarea data-copy-source>`` holding the raw SQL so the
    // copy reads source-of-truth text without line-number prefixes.
    window.auditCopyFromSibling = function(button) {
      const container = button.parentElement;
      if (!container) return;
      const source = container.querySelector('[data-copy-source]');
      if (!source) return;
      const text = source.value !== undefined ? source.value : source.textContent;
      navigator.clipboard.writeText(text).then(() => {
        const label = button.querySelector('span');
        if (!label) return;
        const orig = label.textContent;
        label.textContent = 'Copied';
        setTimeout(() => { label.textContent = orig; }, 1500);
      }).catch(() => { /* noop */ });
    };
  }
  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);
      });
    };
  }
  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);
  });
</script>
{% endblock %}