{# Vendored from opportunities/detail.html. Same shell, stat strip,
   issue cards, and improvements catalogue. Spec 149 deltas:
     - back_link to /failures (via the _page_header macro)
     - eyebrow "Failure detail" (vs "Recommendation")
     - "Errors observed" section heading (vs "Issues found")
     - "Slot Wasted" stat replaces "Cost (this execution)" (failures
       are billed $0). #}
{% extends "layout.html" %}

{% block content %}
{# Hoisted from per-section conditionals - see opportunities/detail.html
   for the same fix. Jinja {% from %} scope is the enclosing block, so
   when ``issue_cards`` is empty (suggestion-only failure) the
   section_title import never fires but the Available improvements
   block at the bottom still calls section_title and crashes. #}
{% from "components/_stat_card.html" import stat_card %}
{% from "components/_section_title.html" import section_title %}
{% from "components/_sql_panel.html" import sql_panel %}
{% from "components/_signal_chip.html" import signal_chip %}
{% from "components/_page_header.html" import back_link, header_card %}
<section class="ui-shell">
<div class="space-y-6">
  {{ back_link("/failures", "Failures") }}

  {# Title includes the dataset prefix so readers can locate the
     failed object without scanning a subtitle. The full
     project.dataset.table path lives in affected_table; the
     project context is in the global header strip. #}
  {% 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_object or 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) %}
    {# Eyebrow parallels opportunities/detail. Title-row chips carry only
       context that isn't restated below (dbt origin, author filter-pivot).
       Error-category + suggestion counts removed - they appear in the stat
       strip and in the section headings below. #}
    <span class="text-sm font-medium text-brand-600 dark:text-brand-300">Failure detail</span>
    {% if row.dbt_model_name %}
      {{ signal_chip("dbt", color="emerald", title="dbt-originated") }}
    {% endif %}
    {% if row.author_email %}
      <a href="/failures?author={{ row.author_email | urlencode }}"
         class="ui-signal-chip text-slate-600 dark:text-slate-300 hover:underline"
         title="Filter the failures workspace by this author">
        <span class="ui-legend-dot bg-slate-400 dark:bg-slate-500"></span>
        <span class="font-mono">{{ row.author_email }}</span>
      </a>
    {% endif %}
  {% endcall %}

  {# Stat strip - three operational numbers for the failed query
     group: Failed executions / Bytes / Slot wasted. The previous
     fourth card listed every error-category rule name as plain
     text, duplicating the "Errors observed" section directly below.
     Dropped to three; each remaining card carries more weight. #}
  <div class="grid gap-3 grid-cols-1 md:grid-cols-3">
    {{ stat_card("Failed executions", (visible_evidence.executions if visible_evidence else "-"), accent="rose", padding="p-6") }}
    {% if job and job.total_bytes_processed is not none %}
      {{ stat_card(
           "Bytes Processed",
           job.total_bytes_processed | format_bytes,
           meta=("billed: " ~ (job.total_bytes_billed | format_bytes)) if job.total_bytes_billed is not none else None,
           accent="brand",
           padding="p-6"
      ) }}
    {% else %}
      {{ stat_card("Bytes Processed", "-", accent="slate", padding="p-6") }}
    {% endif %}
    {% if visible_evidence and visible_evidence.slot_wasted %}
      {{ stat_card("Slot Wasted", visible_evidence.slot_wasted, meta="summed across every failed execution", accent="rose", padding="p-6") }}
    {% else %}
      {{ stat_card("Slot Wasted", "-", accent="slate", padding="p-6") }}
    {% 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. #}
  {% if chart_points_payload %}
    {% set chart_title = "Cost trend and issues" %}
    {# Subtitle is derived from the payload granularity inside the partial
       (per-execution vs daily roll-up), so we don't hard-code "per day". #}
    {% set chart_collapsible = true %}
    {% include "jobs/_cost_chart.html" %}
  {% endif %}

  {# Errors observed - one nested sub-card per error reason that fired
     on this table. Each card has a 2-column BigQuery-error / Try-this-fix
     split, so readers can pair the cause with the fix per reason. When a
     reason has no template SQL diff, Try-this-fix points to the Available
     improvements section below rather than repeating the error text
     verbatim. When zero reasons fired (suggestion-only object), this
     section is hidden. #}
  {% if issue_cards %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Errors observed",
         description="Distinct BigQuery error reasons across this group's executions. The reason code links back to Google's docs; the message is the verbatim runtime error from the most-recent failure.",
         aside=((issue_cards | length) ~ (' reason' if issue_cards | length == 1 else ' reasons'))
    ) }}
    <div class="mt-5 space-y-5">
      {% for issue in issue_cards %}
      <div class="audit-issue-card ui-subcard">
        <div class="flex flex-wrap items-center gap-2">
          {{ signal_chip(issue.row.opportunity_type, color="rose") }}
        </div>
        {# Each column reads as a distinct block - "BigQuery error" and
           "Try this fix" - inside the one nested sub-card. #}
        <div class="mt-4 grid gap-4 lg:grid-cols-2">
          <div>
            <h3 class="ui-subsection-title">BigQuery error</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>
            <h3 class="ui-subsection-title">Try this fix</h3>
            {% if improvements %}
              <p class="mt-2 text-sm text-slate-500 dark:text-slate-400 italic">See <em>Available improvements</em> below - audit found AST rewrites that may be the underlying fix.</p>
            {% else %}
              <p class="mt-2 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">No deterministic AST rewrite is available for this query. Inspect the failed SQL below and the BigQuery console for the failed job ID.</p>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

{# Failed query block removed per user feedback - the broken SQL is
   already visible in the Original SQL tab of the Available
   improvements cards below. #}

  {# 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 that fire on the failed query body. 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 ui-subcard" data-active-tab="diff">
        <div class="flex flex-wrap items-center gap-2">
          <span class="ui-subsection-title">{{ 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>
        {# Only show explanation prose when no diff renders below. See
           opportunities/detail.html for the same rationale (the diff
           tab already shows what changed). #}
        {% if imp.explanation and not (imp.diff_lines or imp.before_content) %}
        <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-3 border-b border-slate-200 dark:border-slate-800 mb-3">
            <button type="button" onclick="auditSetTab(this, 'diff')"
                    class="audit-imp-tab ui-tab -mb-px"
                    data-tab="diff">Diff</button>
            <button type="button" onclick="auditSetTab(this, 'original')"
                    class="audit-imp-tab ui-tab -mb-px"
                    data-tab="original">Original SQL</button>
            {% if imp.after_content %}
            <button type="button" onclick="auditSetTab(this, 'suggested')"
                    class="audit-imp-tab ui-tab -mb-px"
                    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 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">
                <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="ui-code-pane">
                <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 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">
                <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="ui-code-pane">
                <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 %}

  {# 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">{{ 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]``. Shared with opportunity detail 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 => {
        // ui-tab carries the inactive grey + hover styling; toggling the
        // canonical ui-tab-active class (app.css) flips it to the brand
        // underline.
        b.classList.toggle('ui-tab-active', b.dataset.tab === tab);
      });
      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 %}