{# 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.
   Historical query-version issue executions are marked in the cost trend.
   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 %}
{# Detail-level UI macros. Import once at top-level so suggestion-only
   opportunities and issue-bearing opportunities share the same surface. #}
{% from "components/_signal_chip.html" import signal_chip %}
{% from "components/_detail_side_card.html" import detail_side_card %}
{% from "components/_materialization_side.html" import materialization_side_content %}
{% from "components/_query_review.html" import query_review_card %}
<section class="ui-shell">
<div class="space-y-6">
  {{ back_link("/opportunities", "Issues & Suggestions") }}

  {% 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) %}
    {% set _workload_label = "build" if row.query_workload_kind == "build" else ("consumption" if row.query_workload_kind == "consumption" else none) %}
    {% set _reservation_id = latest_job.reservation_id if (latest_job and latest_job.reservation_id) else (job.reservation_id if (job and job.reservation_id) else "") %}
    <div class="w-full flex flex-wrap items-center gap-2">
      {% if _workload_label %}
        {{ signal_chip(_workload_label, color="slate", title="Build writes a destination table; consumption is read-only.") }}
      {% endif %}
      {{ signal_chip("slot reservation" if _reservation_id else "on demand", color="slate", title=("reservation_id: " ~ _reservation_id) if _reservation_id else "No reservation_id on the representative job.") }}
    </div>
    <p class="w-full text-base leading-relaxed text-slate-700 dark:text-slate-300">
      {{ header_summary }}
    </p>
  {% endcall %}

  {# "What changed" signal for the current query version - the same chips
     the /jobs version cards show. A resolved rule (e.g. "cross join
     unaggregated resolved") is good news: it fired on an earlier version
     and the current query no longer triggers it. This is why the
     suggestion count can be 0 here while /jobs' history shows the rule -
     it was already fixed. #}
  {% if resolved_rules_current or new_rules_current %}
  <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
    {% for rt in resolved_rules_current %}
      <span class="inline-flex items-center gap-1 text-emerald-700 dark:text-emerald-300"
            title="Fired on an earlier query version; the current version no longer triggers it.">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
        <span>{{ rt | replace('_', ' ') }} resolved in current version</span>
      </span>
    {% endfor %}
    {% for rt in new_rules_current %}
      <span class="inline-flex items-center gap-1 text-amber-700 dark:text-amber-300"
            title="Newly introduced in the current query version.">
        <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
        <span>{{ rt | replace('_', ' ') }} new in current version</span>
      </span>
    {% endfor %}
  </div>
  {% endif %}

  {%- set _runs = row.execution_count or 1 -%}
  {%- set _last_ts = latest_job.creation_time.strftime("%Y-%m-%d %H:%M UTC") if (latest_job and latest_job.creation_time) else "" -%}
  {%- set _agg_bytes = row.aggregated_bytes_processed or (job.total_bytes_processed if job else none) -%}
  {%- set _agg_slot_ms = row.aggregated_slot_time_ms or (job.total_slot_ms if job else none) -%}
  {%- set _cost_meta = (
        "last " ~ ((latest_job.total_cost or 0) | float | format_usd) ~ ((" · " ~ _last_ts) if _last_ts else "")
      ) if latest_job else None -%}
  {%- set _bytes_meta = (
        "last " ~ (latest_job.total_bytes_processed | format_bytes) ~ ((" · billed " ~ (latest_job.total_bytes_billed | format_bytes)) if latest_job.total_bytes_billed is not none else "")
      ) if (latest_job and latest_job.total_bytes_processed is not none) else None -%}
  {%- set _slot_meta = (
        ("last " ~ (latest_job.duration_ms | format_duration) ~ " wall") if (latest_job and latest_job.duration_ms is not none) else None
      ) -%}

  {# Cohesive metric strip - one connected band of columns (cost / bytes /
     slot / executions) rather than separate boxes. Big aggregated value
     up top, latest-execution detail on the muted line beneath. #}
  <div class="ui-stat-strip" style="--strip-cols: 4">
    <div>
      <p class="ui-card-label">Cost</p>
      <p class="ui-card-value mt-1">{{ row.query_cost_value | format_usd }}</p>
      {% if _cost_meta %}<p class="ui-card-meta mt-0.5">{{ _cost_meta }}</p>{% endif %}
    </div>
    <div>
      <p class="ui-card-label">Bytes processed</p>
      <p class="ui-card-value mt-1 text-brand-500 dark:text-brand-300">{{ (_agg_bytes | format_bytes) if _agg_bytes is not none else "-" }}</p>
      {% if _bytes_meta %}<p class="ui-card-meta mt-0.5">{{ _bytes_meta }}</p>{% endif %}
    </div>
    <div>
      <p class="ui-card-label">Slot time</p>
      <p class="ui-card-value mt-1">{{ ("%.1f" | format((_agg_slot_ms or 0) / 3600000) ~ " hrs") if _agg_slot_ms is not none else "-" }}</p>
      {% if _slot_meta %}<p class="ui-card-meta mt-0.5">{{ _slot_meta }}</p>{% endif %}
    </div>
    <div>
      <p class="ui-card-label">Executions</p>
      <p class="ui-card-value mt-1">{{ "{:,}".format(_runs) }}</p>
      <p class="ui-card-meta mt-0.5">
        in scan window{% if issue_execution_count %} &middot;
        <span class="text-rose-600 dark:text-rose-400 font-medium">{{ "{:,}".format(issue_execution_count) }} tripped an issue</span>
        {%- endif %}
      </p>
    </div>
  </div>

  {# Cost trend stays expanded: the chart is useful context rather than
     noisy forensic detail. #}
  {% 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). The chart spans every query
       version. Amber rings mark version changes; red points tripped a
       detection rule. #}
    {% set chart_collapsible = false %}
    {% include "jobs/_cost_chart.html" %}
  {% endif %}

  <div class="ui-detail-review-grid">
    <div class="min-w-0">
      {{ query_review_card(primary_query_improvement, job.query if job else "", query_improvements | length, query_improvements) }}
    </div>

    <div class="space-y-3 min-w-0" data-detail-side-stack>
      {% call detail_side_card("Issues", (issue_cards | length) ~ (' issue' if issue_cards | length == 1 else ' issues'), "findings", open=True) %}
        {% if issue_cards %}
        <div class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for issue in issue_cards %}
          <details class="group py-3 first:pt-0 last:pb-0">
            <summary class="flex items-start justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
              <div class="min-w-0">
                {{ signal_chip(issue.display_name, color="rose", title="Issue found on this object") }}
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 leading-relaxed" style="overflow-wrap: anywhere;">
                  {{ issue.evidence_text }}
                </p>
              </div>
              <svg class="w-4 h-4 mt-1 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>
            <div class="mt-3 space-y-3">
              <div>
                <p class="ui-card-label">Action</p>
                <p class="mt-1 text-sm text-slate-700 dark:text-slate-200 leading-relaxed" style="overflow-wrap: anywhere;">{{ issue.action_text }}</p>
              </div>
              <div>
                <p class="ui-card-label">Impact</p>
                <p class="mt-1 text-sm text-emerald-700 dark:text-emerald-300 leading-relaxed" style="overflow-wrap: anywhere;">{{ issue.impact_text }}</p>
              </div>
            </div>
          </details>
          {% endfor %}
        </div>
        {% else %}
        <p class="ui-card-meta">No issue rules fired for this object.</p>
        {% endif %}
      {% endcall %}

      {% call detail_side_card("SQL Suggestions", (improvements | length) ~ (' suggestion' if improvements | length == 1 else ' suggestions'), "sql-changes") %}
        {% if improvements %}
        <div class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for imp in improvements %}
          <div class="py-3 first:pt-0 last:pb-0">
            <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.diff_lines or imp.before_content or imp.after_content %}
                <span class="ui-pill ui-pill-neutral">in query selector</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 and not (imp.diff_lines or imp.before_content) %}
              <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-line">{{ imp.explanation }}</p>
            {% elif imp.diff_lines or imp.before_content %}
              <p class="ui-card-meta mt-2">Original, suggested, and diff views are available in the query panel.</p>
            {% endif %}
            {% if imp.rollback %}
            <details class="mt-2 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="ui-card-meta">No deterministic SQL rewrite suggestions are available for this object.</p>
        {% endif %}
      {% endcall %}

      {% set _materialization_count = (audit_mv_candidates | length) + (bq_mv_recommendations | length) %}
      {% call detail_side_card("Materialization Suggestion", _materialization_count ~ (' candidate' if _materialization_count == 1 else ' candidates'), "materialization-suggestion") %}
        {{ materialization_side_content(audit_mv_candidates, bq_mv_recommendations) }}
      {% endcall %}
    </div>
  </div>

  {% if layout_chip_targets or unused_candidates %}
  <div id="recommendations" class="space-y-6">
    {# 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" %}

    {# Spec 155 - Unused destination table section. Renders when the
       anchor opportunity_type is "unused_destination_table". The
       partial gates on a non-empty input list so it produces zero
       markup otherwise. Kept separate from the Materialization section
       because the question is different (should the table exist at
       all? vs. how should it be persisted?). #}
    {% include "opportunities/_unused_table.html" %}
  </div>
  {% endif %}

  {# Technical details - cached BigQuery records plus the lookup SQL. #}
  {% if job_lookup_sql or job_lookup_rows %}
  <details id="technical-details" class="ui-surface p-6 group" open>
    <summary class="flex flex-wrap items-center justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
      <div class="min-w-0">
        <div class="flex items-center gap-2">
          <h2 class="ui-section-title mt-0 mb-0">Technical details</h2>
          <svg class="w-3.5 h-3.5 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>
        </div>
        <p class="ui-card-meta mt-2">Cached BigQuery job records and lookup SQL for verification.</p>
      </div>
    </summary>

    {% include "components/_job_records_table.html" %}

    {% if job_lookup_sql %}
    <details class="mt-5 min-w-0 group border border-slate-200 dark:border-slate-800">
      <summary class="flex items-center justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden px-4 py-3">
        <h3 class="ui-card-label">Job lookup SQL</h3>
        <svg class="w-3.5 h-3.5 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>
      <div class="border-t border-slate-200 dark:border-slate-800">
        <div class="relative 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">{{ job_lookup_sql }}</textarea>
          <div class="ui-code-pane">
            <pre id="job-lookup-sql" class="text-sm leading-relaxed p-4 m-0 whitespace-pre-wrap"><code>{{ job_lookup_sql }}</code></pre>
          </div>
        </div>
      </div>
    </details>
    {% endif %}
  </details>
  {% endif %}

</div>
</section>

{# Generic tab toggler - picks up every ``[data-tab]`` /
   ``[data-tab-pane]`` pair inside an ancestor with
   ``[data-active-tab]``. Kept local to this detail surface 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;
        // Active styling lives in the canonical .ui-tab-active CSS rule
        // (app.css); the inactive state is the bare .ui-tab default, so
        // toggling that single class is all that's needed here.
        b.classList.toggle('ui-tab-active', active);
        b.setAttribute('aria-selected', active ? 'true' : 'false');
      });
      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 %}