{# 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/_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) %}
    {% set _workload_label = "build" if job.workload_kind == "build" else ("consumption" if job.workload_kind == "consumption" else none) %}
    <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 job.reservation_id else "on demand", color="slate", title=("reservation_id: " ~ job.reservation_id) if job.reservation_id else "No reservation_id on this job.") }}
    </div>
    <p class="w-full text-base leading-relaxed text-slate-700 dark:text-slate-300">
      {{ job_header_summary }}
    </p>
  {% 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 -%}

  {# 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, query_improvements | length, query_improvements) }}
    </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"), open=True) %}
        {% 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 }}"
                 target="_blank" rel="noopener"
                 class="mt-2 inline-flex text-sm text-brand-600 dark:text-brand-300 hover:underline"
                 aria-label="Open opportunity in a new tab">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 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.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>

  {# Technical details - same BigQuery record table + lookup SQL as Opportunity detail. #}
  {% 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>

<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 %}