{# 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/_section_title.html" import section_title %}
{% from "components/_signal_chip.html" import signal_chip %}
{% from "components/_sql_panel.html" import sql_panel %}

<section class="ui-shell">
<div class="space-y-6">
  <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
    {% if request.query_params.get('from') == 'cohort' and job.destination_table and job.destination_table != '-' %}
      {{ back_link("/jobs/" ~ job.destination_table ~ "#execution-" ~ job.job_id, "Back to job history") }}
    {% endif %}
    {{ 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 = true %}
    {% set chart_history_href = "/jobs/" ~ job.destination_table %}
    {% include "jobs/_cost_chart.html" %}
  {% endif %}

  {% if issue_count %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Issues found",
         description="One card per issue that fired on this job. Each row pairs the issue's evidence with the related opportunity.",
         aside=(issue_count ~ (" issue" if issue_count == 1 else " issues"))
    ) }}
    <div class="mt-5 space-y-4">
      {% for issue in issues %}
      {% if issue.is_issue %}
      <article class="min-w-0 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-5">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2">
              <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">{{ issue.display_name | upper }}</h3>
            </div>
          </div>
        </div>

        <div class="mt-4 space-y-4">
          <div class="min-w-0">
            <p class="ui-card-label">Why it fired</p>
            {% if issue.explanation %}
              <p class="mt-2 text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-normal">{{ issue.explanation }}</p>
            {% endif %}
            {% if issue.rule_description %}
              <p class="mt-3 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{{ issue.rule_description }}</p>
            {% endif %}
          </div>

          <div class="min-w-0">
            <p class="ui-card-label">Recommended response</p>
            {% if suggestion_count %}
              <p class="mt-2 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">Review the available improvements below for the matching rewrite or structural recommendation.</p>
            {% else %}
              <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 leading-relaxed">No single-query SQL rewrite applies. The fix is at the workload-scheduling, slot-reservation, or schema layer.</p>
            {% endif %}
            <a href="/opportunities/{{ issue.id }}" class="mt-3 inline-flex text-sm text-brand-600 dark:text-brand-300 hover:underline">View opportunity</a>
          </div>
        </div>
      </article>
      {% endif %}
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% if suggestion_count %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Available improvements",
         description="Suggestion-class opportunities associated with this job.",
         aside=(suggestion_count ~ (" suggestion" if suggestion_count == 1 else " suggestions"))
    ) }}
    <div class="mt-5 space-y-5">
      {% for issue in issues %}
      {% if not issue.is_issue %}
      <div class="ui-subcard">
        <div class="flex flex-wrap items-center gap-2">
          <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ issue.display_name }}</span>
          <span class="ui-pill ui-pill-success">suggestion</span>
          <span class="ui-pill ui-pill-neutral">{{ issue.current_cost | format_usd }}</span>
        </div>
        {% if issue.explanation %}
          <p class="mt-3 text-sm text-slate-700 dark:text-slate-200 leading-relaxed whitespace-pre-line">{{ issue.explanation }}</p>
        {% endif %}
        {% if issue.rule_description %}
          <p class="mt-2 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{{ issue.rule_description }}</p>
        {% endif %}
        <a href="/opportunities/{{ issue.id }}" class="mt-3 inline-flex text-sm text-brand-600 dark:text-brand-300 hover:underline">View opportunity</a>
      </div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% if job.query %}
  {% set _minimize_query = not suggestion_count %}
  {% if _minimize_query %}
  <details class="ui-surface p-6 group">
    <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">Query</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">No deterministic SQL rewrite is available. Expand only when you need to inspect this execution.</p>
      </div>
      <span class="ui-pill ui-pill-neutral">minimized</span>
    </summary>
  {% else %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Query",
         description="The SQL text cached for this execution."
    ) }}
  {% endif %}
    <div class="relative mt-4 border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm" data-active-tab="query">
      <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.query }}</textarea>
      <div class="ui-code-pane">
        <pre class="text-sm leading-relaxed p-0 m-0"><code>{% for line in job.query.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>
  {% if _minimize_query %}
  </details>
  {% else %}
  </div>
  {% endif %}
  {% endif %}

  {% 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 */ });
    };
  }
</script>
{% endblock %}