{# Single-job detail. Layout matches governor_web idioms:
   - Tiny text-link back nav (NOT a giant pill button)
   - `ui-stat-card` strip for cost / bytes / slot time / statement type
   - `ui-pane` for metadata, referenced tables, issues, and SQL
   - Expandable+copy SQL viewer adapted from
     packages/web/src/governor_web/templates/components/code_viewer.html. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="mb-3">
    <a href="/dashboard" class="inline-block text-sm text-brand-500 dark:text-brand-300 hover:underline">
      &larr; Back to dashboard
    </a>
  </div>

  <div class="ui-page-header">
    <p class="ui-eyebrow">Job</p>
    <h1 class="text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 font-mono break-all leading-tight">{{ job.destination_table }}</h1>
    <p class="ui-page-subtitle font-mono text-sm break-all mt-2">{{ job.job_id }}</p>
  </div>

  {# ── Stat strip ── #}
  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
    <div class="ui-stat-card p-6">
      <p class="ui-card-label">Cost</p>
      <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ job.cost_usd | format_usd }}</p>
    </div>
    <div class="ui-stat-card p-6">
      <p class="ui-card-label">Bytes Processed</p>
      <p class="mt-2 ui-card-value text-brand-500 dark:text-brand-300">{{ job.bytes_processed | format_bytes }}</p>
      <p class="ui-card-meta">billed: {{ job.bytes_billed | format_bytes }}</p>
    </div>
    <div class="ui-stat-card p-6">
      <p class="ui-card-label">Slot Time (hours)</p>
      <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ "%.1f" | format((job.slot_time_ms or 0) / 3600000) }}</p>
      <p class="ui-card-meta">duration: {{ job.duration_ms | format_duration }}</p>
    </div>
    <div class="ui-stat-card p-6 min-w-0">
      <p class="ui-card-label">Statement Type</p>
      <p class="mt-2 ui-card-value-lg font-mono truncate text-slate-900 dark:text-slate-100" title="{{ job.statement_type }}">{{ job.statement_type }}</p>
      <p class="ui-card-meta flex flex-wrap gap-1">
        {% if job.workload_kind == "build" %}
          <span class="ui-pill ui-pill-blue">build</span>
        {% elif job.workload_kind == "consumption" %}
          <span class="ui-pill ui-pill-success">consumption</span>
        {% endif %}
        {% if job.is_dbt_originated %}
          <span class="ui-pill ui-pill-success">dbt</span>
        {% else %}
          <span class="ui-pill ui-pill-neutral">other</span>
        {% endif %}
        {% if job.cache_hit %}
          <span class="ui-pill ui-pill-blue">cache hit</span>
        {% endif %}
      </p>
    </div>
  </div>

  {# ── Main grid ── #}
  <div class="mt-8 grid gap-6 lg:grid-cols-2">
    {# Metadata #}
    <div class="ui-pane lg:col-span-1">
      <h2 class="ui-section-title">Metadata</h2>
      <dl class="mt-4 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
        <dt class="text-slate-500 dark:text-slate-400">Created</dt>
        <dd class="font-mono text-slate-700 dark:text-slate-200">{{ job.creation_time.strftime("%Y-%m-%d %H:%M:%S") }} UTC</dd>
        {% if job.start_time %}
          <dt class="text-slate-500 dark:text-slate-400">Started</dt>
          <dd class="font-mono text-slate-700 dark:text-slate-200">{{ job.start_time.strftime("%Y-%m-%d %H:%M:%S") }} UTC</dd>
        {% endif %}
        {% if job.end_time %}
          <dt class="text-slate-500 dark:text-slate-400">Finished</dt>
          <dd class="font-mono text-slate-700 dark:text-slate-200">{{ job.end_time.strftime("%Y-%m-%d %H:%M:%S") }} UTC</dd>
        {% endif %}
        <dt class="text-slate-500 dark:text-slate-400">User</dt>
        <dd class="font-mono text-slate-700 dark:text-slate-200 break-all">{{ job.user_email }}</dd>
        <dt class="text-slate-500 dark:text-slate-400">Job state</dt>
        <dd class="font-mono text-slate-700 dark:text-slate-200">{{ job.job_state }}</dd>
        <dt class="text-slate-500 dark:text-slate-400">Job type</dt>
        <dd class="font-mono text-slate-700 dark:text-slate-200">{{ job.job_type }}</dd>
        {% if job.query_hash %}
          <dt class="text-slate-500 dark:text-slate-400">Query hash</dt>
          <dd class="font-mono text-sm text-slate-700 dark:text-slate-200 break-all">{{ job.query_hash }}</dd>
        {% endif %}
      </dl>
    </div>

    {# Referenced tables #}
    <div class="ui-pane lg:col-span-1">
      <h2 class="ui-section-title">Referenced Tables</h2>
      {% if job.referenced_tables %}
        <ul class="mt-4 space-y-1 text-sm font-mono text-slate-700 dark:text-slate-300">
          {% for ref in job.referenced_tables %}
            <li class="break-all">
              {% if ref is mapping %}
                {{ ref.get("project_id") or ref.get("projectId", "") }}.{{ ref.get("dataset_id") or ref.get("datasetId", "") }}.{{ ref.get("table_id") or ref.get("tableId", "") }}
              {% else %}
                {{ ref }}
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="mt-4 text-sm text-slate-500 dark:text-slate-400">No referenced tables recorded.</p>
      {% endif %}
    </div>
  </div>

  {# ── Issues found by detection rules ── #}
  {% if issues %}
  <div class="mt-6 ui-pane">
    <div class="flex items-center justify-between mb-4">
      <div>
        <h2 class="ui-section-title">Issues Found ({{ issues | length }})</h2>
        <p class="ui-card-meta mt-1">Detection rules that flagged this job</p>
      </div>
    </div>
    <div class="ui-table-wrap">
      <table class="ui-table" style="table-layout: fixed; width: 100%;">
        <colgroup>
          <col style="width: 220px;" />
          <col />
          <col style="width: 280px;" />
          <col style="width: 100px;" />
          <col style="width: 130px;" />
        </colgroup>
        <thead>
          <tr class="ui-table-head-row">
            <th class="ui-table-th ui-table-th-left">Rule</th>
            <th class="ui-table-th ui-table-th-left">Detail</th>
            <th class="ui-table-th ui-table-th-left">Affected Table</th>
            <th class="ui-table-th ui-table-th-right">Severity</th>
            <th class="ui-table-th ui-table-th-right">Current Cost</th>
          </tr>
        </thead>
        <tbody>
          {% for issue in issues %}
          <tr class="ui-table-row align-top">
            <td class="ui-table-td">
              <span class="ui-cell-title">{{ issue.display_name }}</span>
            </td>
            <td class="ui-table-td">
              {% if issue.explanation %}
                <p class="text-sm text-slate-600 dark:text-slate-300 leading-snug">{{ issue.explanation }}</p>
              {% else %}
                <span class="text-slate-400 dark:text-slate-600">—</span>
              {% endif %}
            </td>
            <td class="ui-table-td p-0">
              <div class="overflow-x-auto whitespace-nowrap px-3 py-2 max-w-[280px]" title="{{ issue.affected_table }}">
                <span class="font-mono text-sm">{{ issue.affected_table }}</span>
              </div>
            </td>
            <td class="ui-table-td ui-table-td-right whitespace-nowrap">
              {% if issue.severity >= 80 %}
                <span class="ui-pill ui-pill-danger">{{ issue.severity }}</span>
              {% elif issue.severity >= 50 %}
                <span class="ui-pill ui-pill-warning">{{ issue.severity }}</span>
              {% else %}
                <span class="ui-pill ui-pill-neutral">{{ issue.severity }}</span>
              {% endif %}
            </td>
            <td class="ui-table-td ui-table-td-right whitespace-nowrap font-mono text-sm">{{ issue.current_cost | format_usd }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  {# ── SQL viewer (expandable + copy, same pattern as governor_web/components/code_viewer.html) ── #}
  <div class="mt-6">
    <div class="border border-slate-200 dark:border-slate-800 rounded-sm overflow-x-auto bg-white dark:bg-slate-950">
      <div class="flex items-center justify-between bg-slate-50 dark:bg-slate-900 px-3 py-1.5 border-b border-slate-200 dark:border-slate-800">
        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">SQL</span>
        <div class="flex items-center gap-3">
          <span class="text-sm text-slate-400 dark:text-slate-500">{{ job.query | length }} chars</span>
          <button
            type="button"
            onclick="auditToggleExpandableCode(this, 'job-sql-wrap')"
            class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100"
            aria-expanded="false"
            data-expand-label="Expand SQL"
            data-collapse-label="Collapse SQL"
          >
            Expand SQL
          </button>
          <button
            type="button"
            onclick="auditCopySql(this)"
            class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100 flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
            Copy
          </button>
        </div>
      </div>
      <div
        id="job-sql-wrap"
        class="overflow-auto"
        style="max-height: 28rem;"
        data-expandable-code
        data-collapsed-max-height="28rem"
      >
        <pre class="text-[14px] font-mono leading-relaxed p-0 m-0" data-copyable="job-sql"><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 data-code-line class="pl-3 text-slate-800 dark:text-slate-200">{{ line }}</span>
{% endfor %}</code></pre>
      </div>
    </div>
  </div>

  {# ── Performance insights (raw payload, collapsible) ── #}
  {% if job.performance_insights %}
  <div class="mt-6 ui-pane">
    <h2 class="ui-section-title">Performance Insights</h2>
    <p class="mt-1 ui-card-meta">Raw payload from <code class="font-mono">query_info.performance_insights</code>.</p>
    <pre class="mt-3 overflow-x-auto rounded-sm border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 p-4 text-sm font-mono whitespace-pre-wrap break-all text-slate-800 dark:text-slate-200">{{ job.performance_insights | tojson(indent=2) }}</pre>
  </div>
  {% endif %}

</section>

<script>
  function auditToggleExpandableCode(btn, targetId) {
    var target = document.getElementById(targetId);
    if (!target) return;
    var collapsedMaxHeight = target.dataset.collapsedMaxHeight || '28rem';
    var isExpanded = btn.getAttribute('aria-expanded') === 'true';
    if (isExpanded) {
      target.style.maxHeight = collapsedMaxHeight;
      btn.setAttribute('aria-expanded', 'false');
      btn.textContent = btn.dataset.expandLabel || 'Expand SQL';
    } else {
      target.style.maxHeight = 'none';
      btn.setAttribute('aria-expanded', 'true');
      btn.textContent = btn.dataset.collapseLabel || 'Collapse SQL';
    }
  }

  function auditCopySql(btn) {
    var pre = document.querySelector('[data-copyable="job-sql"]');
    if (!pre) return;
    var spans = pre.querySelectorAll('[data-code-line]');
    var lines = [];
    for (var i = 0; i < spans.length; i++) lines.push(spans[i].textContent);
    var text = lines.length ? lines.join('\n') : pre.textContent;
    var copied = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Copied!';
    var defaultHtml = btn.dataset.copyDefaultHtml || btn.innerHTML;
    btn.dataset.copyDefaultHtml = defaultHtml;

    function done() {
      btn.innerHTML = copied;
      setTimeout(function() { btn.innerHTML = btn.dataset.copyDefaultHtml; }, 2000);
    }

    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done).catch(function() {
        var ta = document.createElement('textarea');
        ta.value = text; ta.style.position = 'fixed'; ta.style.top = '-9999px';
        document.body.appendChild(ta); ta.select();
        try { document.execCommand('copy'); done(); } catch (e) {}
        document.body.removeChild(ta);
      });
    } else {
      var ta = document.createElement('textarea');
      ta.value = text; ta.style.position = 'fixed'; ta.style.top = '-9999px';
      document.body.appendChild(ta); ta.select();
      try { document.execCommand('copy'); done(); } catch (e) {}
      document.body.removeChild(ta);
    }
  }
</script>
{% endblock %}