{% extends "base.html" %}
{% block title %}Sraosha — Run {{ run.id | string | truncate(8, true, '') }}{% endblock %}

{% block breadcrumbs %}
<h1 class="truncate text-sm font-semibold text-gray-900 dark:text-white">Run detail</h1>
<p class="truncate font-mono text-xs text-gray-500 dark:text-gray-400">{{ run.id }}</p>
{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <div class="flex flex-wrap items-center gap-3">
      {% if contract %}
      <a href="/ui/contracts/{{ contract.contract_id }}" class="text-sm text-indigo-600 hover:underline dark:text-indigo-400">&larr; {{ contract.title }}</a>
      {% else %}
      <a href="/ui/contracts" class="text-sm text-indigo-600 hover:underline dark:text-indigo-400">&larr; Contracts</a>
      {% endif %}
      {% if run.status == "passed" %}
      <span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">passed</span>
      {% elif run.status == "failed" %}
      <span class="inline-flex items-center rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-800 dark:bg-rose-950 dark:text-rose-200">failed</span>
      {% else %}
      <span class="inline-flex items-center rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-200">{{ run.status }}</span>
      {% endif %}
      <span class="text-sm text-gray-500 dark:text-gray-400">{{ run.run_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}</span>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      {% if prev_run_id %}
      <a href="/ui/runs/{{ prev_run_id }}" class="rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800">Older run</a>
      {% endif %}
      {% if next_run_id %}
      <a href="/ui/runs/{{ next_run_id }}" class="rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800">Newer run</a>
      {% endif %}
      <button type="button" id="run-validation-again"
              class="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50">
        Re-run validation
      </button>
    </div>
  </div>

  {% if run.checks_total %}
  {% set pct_pass = (run.checks_passed / run.checks_total * 100) | round(1) %}
  {% set pct_fail = (run.checks_failed / run.checks_total * 100) | round(1) %}
  <div class="card rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
    <div class="mb-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
      <span>Checks</span>
      <span>{{ run.checks_passed }} / {{ run.checks_total }} passed</span>
    </div>
    <div class="flex h-3 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
      <div class="bg-emerald-500 transition-all" style="width: {{ pct_pass }}%"></div>
      <div class="bg-rose-500 transition-all" style="width: {{ pct_fail }}%"></div>
    </div>
  </div>
  {% endif %}

  <div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
    <div class="card rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
      <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Duration</dt>
      <dd class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ "%dms" % run.duration_ms if run.duration_ms else "—" }}</dd>
    </div>
    <div class="card rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
      <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Triggered by</dt>
      <dd class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ run.triggered_by or "—" }}</dd>
    </div>
    <div class="card rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
      <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Server</dt>
      <dd class="mt-1 truncate text-lg font-semibold text-gray-900 dark:text-white">{{ run.server or "—" }}</dd>
    </div>
  </div>

  <div class="card rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
    <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Metadata</h2>
    <dl class="grid grid-cols-2 gap-4 text-sm md:grid-cols-4">
      <div>
        <dt class="text-gray-500 dark:text-gray-400">Contract</dt>
        <dd class="text-gray-900 dark:text-white">
          {% if contract %}
          <a href="/ui/contracts/{{ contract.contract_id }}" class="text-indigo-600 hover:underline dark:text-indigo-400">{{ contract.title }}</a>
          {% else %}
          {{ run.contract_id }}
          {% endif %}
        </dd>
      </div>
      <div>
        <dt class="text-gray-500 dark:text-gray-400">Enforcement</dt>
        <dd>
          {% if run.enforcement_mode == "block" %}
          <span class="inline-flex rounded bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-700 dark:bg-rose-950 dark:text-rose-200">block</span>
          {% elif run.enforcement_mode == "warn" %}
          <span class="inline-flex rounded bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-950 dark:text-amber-200">warn</span>
          {% else %}
          <span class="inline-flex rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">log</span>
          {% endif %}
        </dd>
      </div>
    </dl>
  </div>

  {% if run.error_message %}
  <div class="rounded-xl border border-rose-200 bg-rose-50 p-6 dark:border-rose-900 dark:bg-rose-950/30">
    <h3 class="text-sm font-semibold text-rose-800 dark:text-rose-200">Error</h3>
    <p class="mt-1 whitespace-pre-wrap font-mono text-sm text-rose-700 dark:text-rose-300">{{ run.error_message }}</p>
  </div>
  {% endif %}

  {% if run.failures %}
  <div class="card rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
    <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Failed checks <span class="text-sm font-normal text-gray-500">({{ run.failures | length }})</span></h2>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-800/80">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Check</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Field</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Message</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          {% for f in run.failures %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
            <td class="px-4 py-3 font-mono text-xs text-rose-700 dark:text-rose-300">{{ f.check or "—" }}</td>
            <td class="px-4 py-3 font-mono text-gray-700 dark:text-gray-300">{{ f.field or "—" }}</td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ f.message or "—" }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <div class="card overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
    <div class="flex flex-col gap-3 border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/80 sm:flex-row sm:items-center sm:justify-between">
      <h2 class="text-sm font-semibold text-gray-800 dark:text-gray-100">Validation log</h2>
      <div class="flex flex-wrap items-center gap-2">
        {% if run.run_log %}
        <input type="search" id="log-filter" placeholder="Filter log…"
               class="min-w-[8rem] rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-xs dark:border-gray-600 dark:bg-gray-900 dark:text-white" />
        <button type="button" onclick="copyLog(this)" class="text-xs font-medium text-indigo-600 dark:text-indigo-400">Copy</button>
        {% endif %}
      </div>
    </div>
    {% if run.run_log %}
    <div class="max-h-[560px] overflow-auto bg-gray-950 p-4">
      <pre id="log-content" class="whitespace-pre-wrap font-mono text-xs leading-relaxed text-gray-200">{{ run.run_log }}</pre>
    </div>
    <p id="log-filter-hint" class="hidden border-t border-gray-200 px-4 py-2 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-400">
      Showing filtered lines; copy uses the full log.
    </p>
    {% else %}
    <div class="p-8 text-center text-sm text-gray-400">No log captured for this run.</div>
    {% endif %}
  </div>
</div>

{% if run.run_log %}
<script>
function copyLog(btn) {
  var el = document.getElementById('log-content');
  var full = window.__runLogFull;
  if (!el) return;
  var text = full != null ? full : el.textContent;
  navigator.clipboard.writeText(text).then(function () {
    var orig = btn.textContent;
    btn.textContent = 'Copied!';
    setTimeout(function () { btn.textContent = orig; }, 2000);
  });
}
document.addEventListener('DOMContentLoaded', function () {
  var pre = document.getElementById('log-content');
  var input = document.getElementById('log-filter');
  var hint = document.getElementById('log-filter-hint');
  if (!pre || !input) return;
  window.__runLogFull = pre.textContent;
  input.addEventListener('input', function () {
    var q = input.value.trim().toLowerCase();
    if (!q) {
      pre.textContent = window.__runLogFull;
      if (hint) hint.classList.add('hidden');
      return;
    }
    var lines = window.__runLogFull.split('\n');
    var kept = lines.filter(function (line) { return line.toLowerCase().indexOf(q) !== -1; });
    pre.textContent = kept.length ? kept.join('\n') : '(no matching lines)';
    if (hint) hint.classList.remove('hidden');
  });
});
</script>
{% endif %}

<script>
(function () {
  var btn = document.getElementById('run-validation-again');
  if (!btn) return;
  btn.addEventListener('click', function () {
    btn.disabled = true;
    fetch('/api/v1/contracts/{{ run.contract_id }}/run', { method: 'POST' })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (data.id) {
          window.location.href = '/ui/runs/' + data.id;
        } else {
          btn.disabled = false;
        }
      })
      .catch(function () { btn.disabled = false; });
  });
})();
</script>
{% endblock %}