{# Single-execution detail page.

   This intentionally follows opportunities/detail.html's visual grammar:
   back link, header card, one-line summary, cohesive stat strip, trend,
   issue rows, query, and evidence panels. The content stays job-specific,
   but the page should feel like the same product surface. #}
{% extends "layout.html" %}

{% block content %}
{% from "components/_page_header.html" import back_link, header_card %}
{% from "components/_signal_chip.html" import signal_chip %}
{% from "components/_sql_panel.html" import sql_panel %}
{% 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">
  <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
    {{ back_link("/dashboard", "Dashboard") }}
  </div>

  {% if job.destination_table and job.destination_table != '-' %}
    {% set _title %}<code class="font-mono break-all">{{ job.destination_short }}</code>{% endset %}
  {% else %}
    {% set _title %}<code class="font-mono break-all">{{ job.job_id }}</code>{% endset %}
  {% endif %}

  {% call header_card(_title) %}
    {% if job.workload_kind == "build" %}
      {{ signal_chip("Build", color="brand", title="Build - this query writes a destination table") }}
    {% elif job.workload_kind == "consumption" %}
      {{ signal_chip("Consumption", color="teal", title="Consumption - read-only query, no destination written") }}
    {% endif %}
    {% if job.is_dbt_originated or job.origin_tool == "dbt" %}
      <span class="text-sm font-medium text-emerald-600 dark:text-emerald-400">dbt</span>
    {% endif %}
    {% if job.user_email and job.user_email != "-" %}
      {% set _author_label %}<span class="font-mono">{{ job.user_email }}</span>{% endset %}
      <a href="/opportunities?author={{ job.user_email | urlencode }}"
         class="hover:underline"
         title="Filter the workspace by this author's findings">
        {{ signal_chip(_author_label, color="slate") }}
      </a>
    {% endif %}
    {% if job.origin_tool and job.origin_tool != "ad_hoc" and not (job.origin_tool == "dbt" and job.is_dbt_originated) %}
      {% set _origin_label %}<span class="font-mono">{{ job.origin_tool | replace('_', ' ') }}</span>{% endset %}
      <a href="/opportunities?origin={{ job.origin_tool | urlencode }}"
         class="hover:underline"
         title="Filter the workspace by jobs from {{ job.origin_tool }}">
        {{ signal_chip(_origin_label, color="slate") }}
      </a>
    {% endif %}
    <span class="font-mono text-sm break-all text-slate-700 dark:text-slate-300">{{ job.job_id }}</span>
    <span class="font-mono text-sm text-slate-700 dark:text-slate-300">{{ job.statement_type }}</span>
    {% if job.cache_hit %}
      {{ signal_chip("Cache hit", color="slate") }}
    {% endif %}
  {% endcall %}

  {%- set _scan_cost = cohort_aggregates.cost_usd if cohort_aggregates else job.cost_usd -%}
  {%- set _runs = cohort_aggregates.execution_count if (cohort_aggregates and cohort_aggregates.execution_count) else 1 -%}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    <span class="{{ 'text-rose-700 dark:text-rose-300 font-medium' if issue_count else '' }}">{{ issue_count }} issue{{ '' if issue_count == 1 else 's' }}</span>
    &middot; {{ suggestion_count }} suggestion{{ '' if suggestion_count == 1 else 's' }}
    &middot; {{ _scan_cost | format_usd }} in the scan window
  </p>

  {# Same four-column stat grammar as opportunity detail. The primary
     values are aggregated across the destination table when a cohort
     exists; the muted line shows the latest execution snapshot. #}
  {%- set _last_ts = latest_execution.creation_time.strftime("%Y-%m-%d %H:%M UTC") if (latest_execution and latest_execution.creation_time) else "" -%}
  {%- set _agg_bytes = cohort_aggregates.bytes_processed if cohort_aggregates else job.bytes_processed -%}
  {%- set _agg_slot_ms = cohort_aggregates.slot_time_ms if cohort_aggregates else job.slot_time_ms -%}
  {%- set _cost_meta = (
        "last " ~ (latest_execution.cost_usd | format_usd) ~ ((" / " ~ _last_ts) if _last_ts else "")
      ) if latest_execution else None -%}
  {%- set _bytes_meta = (
        "last " ~ (latest_execution.bytes_processed | format_bytes) ~ ((" / billed " ~ (latest_execution.bytes_billed | format_bytes)) if latest_execution.bytes_billed is not none else "")
      ) if (latest_execution and latest_execution.bytes_processed is not none) else None -%}
  {%- set _slot_meta = (
        ("last " ~ (latest_execution.duration_ms | format_duration) ~ " wall") if (latest_execution and latest_execution.duration_ms is not none) else None
      ) -%}
  <div class="ui-stat-strip" style="--strip-cols: 4">
    <div>
      <p class="ui-card-label">Cost</p>
      <p class="ui-card-value mt-1">{{ _scan_cost | 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</p>
    </div>
  </div>

  {% 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 = 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, improvements | length) }}
    </div>

    <div class="space-y-3 min-w-0" data-detail-side-stack>
      {% call detail_side_card("Issues", issue_count ~ (" issue" if issue_count == 1 else " issues")) %}
        {% if issue_count %}
        <div class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for issue in issues %}
          {% if issue.is_issue %}
          <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 job") }}
                {% if issue.explanation %}
                  <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 leading-relaxed">{{ issue.explanation }}</p>
                {% endif %}
              </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">
              {% if issue.rule_description %}
                <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{{ issue.rule_description }}</p>
              {% endif %}
              <a href="/opportunities/{{ issue.id }}" class="mt-2 inline-flex text-sm text-brand-600 dark:text-brand-300 hover:underline">View opportunity</a>
            </div>
          </details>
          {% endif %}
          {% endfor %}
        </div>
        {% else %}
        <p class="ui-card-meta">No issue rules fired for this job.</p>
        {% endif %}
      {% endcall %}

      {% set _job_sql_suggestion_total = improvements | length %}
      {% call detail_side_card("SQL Suggestions", _job_sql_suggestion_total ~ (" suggestion" if _job_sql_suggestion_total == 1 else " suggestions")) %}
        {% 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 primary_query_improvement and imp.rule_type == primary_query_improvement.rule_type %}
                <span class="ui-pill ui-pill-neutral">shown in query</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.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>
            {% elif imp.explanation %}
              <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-line">{{ imp.explanation }}</p>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        {% else %}
        <p class="ui-card-meta">No deterministic SQL rewrite suggestions are attached to this job.</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_side_content(audit_mv_candidates, bq_mv_recommendations) }}
      {% endcall %}
    </div>
  </div>

  {% 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) }}
    {% endif %}
  </div>
  {% endif %}

</div>
</section>

<script>
  if (typeof window.auditCopyFromSibling !== 'function') {
    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('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 || 'original';
    const btn = card.querySelector('[data-tab="' + initial + '"]');
    if (btn) window.auditSetTab(btn, initial);
  });
</script>
{% endblock %}