{# 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 %}
<section class="ui-shell">
<div class="space-y-6">
  <div class="ui-breadcrumb">
    <a href="/opportunities">Opportunities</a>
    <span>›</span>
    <span class="ui-breadcrumb-current">
      {% if row.dbt_model_name %}{{ row.dbt_model_name }}{% else %}{{ row.affected_object or row.affected_table }}{% endif %}
    </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>
        {# Title includes the dataset prefix so readers can locate the
           object without scanning a subtitle. ``affected_table`` is the
           full ``project.dataset.table`` BigQuery path; we split off the
           dataset segment (index 1) and pair it with either the dbt
           model name or the bare table name. The project context lives
           in the global header strip, so we don't repeat it here. #}
        {% 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 '') %}
        <div class="flex items-center gap-2">
          <h1 class="ui-page-title mt-0"><code class="font-mono">{% if _dataset %}{{ _dataset }}.{% endif %}{{ row.dbt_model_name or _table }}</code></h1>
        </div>
        {# Title-row chips carry only context that isn't restated below
           (dbt origin, author for filter-pivot). Issue + suggestion
           counts removed — they live in the stat strip and in the
           section headings further down, so pills at the top were
           triple-presenting the same numbers. #}
        <div class="mt-3 flex flex-wrap items-center gap-2">
          {% 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 %}
        </div>
      </div>
    </div>

    {# Stat strip — three numbers describing the representative job:
       Cost / Bytes Processed / Slot Time. The previous fourth card
       ("Issues found") listed issue rule names as plain text — a wall
       of repeated information since the section directly below this
       lists them in cards. Dropped to three so each remaining card
       has more visual weight. #}
    <div class="grid gap-4 grid-cols-1 md:grid-cols-3">
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Cost (this execution)</p>
        <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ row.query_cost_value | format_usd }}</p>
      </div>
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Bytes Processed</p>
        {% if job and job.total_bytes_processed is not none %}
          <p class="mt-2 ui-card-value text-brand-500 dark:text-brand-300">{{ job.total_bytes_processed | format_bytes }}</p>
          {% if job.total_bytes_billed is not none %}
            <p class="ui-card-meta">billed: {{ job.total_bytes_billed | format_bytes }}</p>
          {% endif %}
        {% else %}
          <p class="mt-2 ui-card-value text-slate-400 dark:text-slate-500">—</p>
        {% endif %}
      </div>
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Slot Time (hours)</p>
        {% if job and job.total_slot_ms is not none %}
          <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ "%.1f" | format((job.total_slot_ms or 0) / 3600000) }}</p>
          {% if job.duration_ms is not none %}
            <p class="ui-card-meta">duration: {{ job.duration_ms | format_duration }}</p>
          {% endif %}
        {% else %}
          <p class="mt-2 ui-card-value text-slate-400 dark:text-slate-500">—</p>
        {% endif %}
      </div>
    </div>
  </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">
    <h2 class="ui-section-title">Issues found</h2>
    <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">
    <h2 class="ui-section-title">Available improvements</h2>
    <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-xs 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-[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>
          {% 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-xs 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-[13px] 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-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>
  </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 %}
    <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">BigQuery query</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>
      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        Paste this into the BigQuery console to inspect the underlying job row.
      </p>
      <div class="relative mt-3 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-auto" style="max-height: 22rem;">
        <button type="button"
                onclick="window.auditCopyJobLookupSql(this)"
                class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 px-2 py-1 text-sm hover:border-brand-500 hover:text-brand-500"
                title="Copy SQL"
                aria-label="Copy SQL">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7.5A2.5 2.5 0 0110.5 5h6A2.5 2.5 0 0119 7.5v9A2.5 2.5 0 0116.5 19h-6A2.5 2.5 0 018 16.5v-9z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 15.5H5.5A2.5 2.5 0 013 13V4.5A2.5 2.5 0 015.5 2h6A2.5 2.5 0 0114 4.5V5" />
          </svg>
          <span class="copy-label">Copy</span>
        </button>
        <pre id="job-lookup-sql" class="text-[13px] font-mono leading-relaxed p-3 m-0 whitespace-pre"><code class="text-slate-800 dark:text-slate-200">{{ job_lookup_sql }}</code></pre>
      </div>
    </details>
    <script>
      (function () {
        if (window.auditCopyJobLookupSql) return;
        window.auditCopyJobLookupSql = function (btn) {
          var pre = document.getElementById('job-lookup-sql');
          if (!pre) return;
          var text = pre.textContent || '';
          var label = btn.querySelector('.copy-label');
          var done = function () {
            if (!label) return;
            var original = label.textContent;
            label.textContent = 'Copied!';
            setTimeout(function () { label.textContent = original; }, 1500);
          };
          if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(done).catch(function () {});
          }
        };
      })();
    </script>
    {% 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 %}