{# Vendored from opportunities/detail.html. Same shell, stat strip,
   issue cards, and improvements catalogue. Spec 149 deltas:
     - breadcrumb back to /failures
     - eyebrow "Failure detail" (vs "Recommendation")
     - "Errors observed" section heading (vs "Issues found")
     - "Slot Wasted" stat replaces "Cost (this execution)" (failures
       are billed $0)
     - new "Failed query" code block before the improvements section
       so the broken SQL is always visible. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
<div class="space-y-6">
  <div class="ui-breadcrumb">
    <a href="/failures">Failures</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
           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 '') %}
        <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 filter-pivot). Error-category + suggestion
           counts removed — they appear in the stat strip and in the
           section headings below. #}
        <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="/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 %}
        </div>
      </div>
    </div>

    {# 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-4 grid-cols-1 md:grid-cols-3">
      <div class="ui-stat-card p-6">
        <p class="ui-card-label">Failed executions</p>
        <p class="mt-2 ui-card-value text-rose-600 dark:text-rose-300">{{ visible_evidence.executions if visible_evidence else "—" }}</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 Wasted</p>
        {% if visible_evidence and visible_evidence.slot_wasted %}
          <p class="mt-2 ui-card-value text-rose-600 dark:text-rose-300">{{ visible_evidence.slot_wasted }}</p>
          <p class="ui-card-meta">summed across every failed execution</p>
        {% 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. History link is rendered inside the partial via
     ``chart_history_href``. #}
  {% 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">Errors observed</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">
          <span class="ui-signal-chip text-rose-700 dark:text-rose-300">
            <span class="ui-legend-dot bg-rose-500"></span>
            {{ issue.row.opportunity_type }}
          </span>
        </div>
        {# Each column gets its own subtle sub-card so "BigQuery error" and
           "Try this fix" are visually distinct blocks instead of running
           together inside the outer card. #}
        <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">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 class="bg-slate-100 dark:bg-slate-800 p-4">
            <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200">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">
    <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 %}