{% extends "base.html" %}
{% block title %}Run #{{ run.id }} - {{ project.name }}{% endblock %}

{% block content %}
<div class="page-header flex justify-between items-center">
  <div>
    <h2>Run #{{ run.id }}</h2>
    <p class="subtitle">{{ project.name }} - {{ run.created_at[:16] }}</p>
  </div>
  <span class="badge badge-{{ run.status }}" style="font-size: 0.85rem; padding: 0.3rem 0.8rem;">{{ run.status }}</span>
</div>

{% if run.error %}
<div class="card" style="border-color: var(--critical);">
  <h3 style="color: var(--critical);">Error</h3>
  <pre class="text-sm" style="color: var(--critical); white-space: pre-wrap;">{{ run.error }}</pre>
</div>
{% endif %}

{#
  Trend macro: render a +N / -M badge comparing current vs previous run.
  `direction` controls semantic color:
    "up_good"   → going up is good (more captures OK)
    "down_good" → going down is good (fewer discrepancies)
#}
{% macro trend(current, previous, direction='down_good') %}
  {% if previous is not none and current != previous %}
    {% set delta = current - previous %}
    {% if direction == 'up_good' %}
      {% set good = delta > 0 %}
    {% else %}
      {% set good = delta < 0 %}
    {% endif %}
    <span class="trend-badge {{ 'trend-good' if good else 'trend-bad' }}" title="Previous run #{{ previous_stats.run_id }}: {{ previous }}">
      {{ '+' if delta > 0 else '' }}{{ delta }}
    </span>
  {% endif %}
{% endmacro %}

<div class="stats-grid">
  <div class="stat-card{% if stats.captures_failed %} stat-warning{% endif %}">
    <div class="stat-value">{{ stats.captures_ok }}<span class="text-sm text-muted">/{{ stats.total_captures }}</span>
      {% if previous_stats %}{{ trend(stats.captures_ok, previous_stats.captures_ok, 'up_good') }}{% endif %}
    </div>
    <div class="stat-label">Captures OK</div>
  </div>
  {% if stats.captures_failed %}
  <div class="stat-card stat-warning">
    <div class="stat-value" style="color: #f59e0b;">{{ stats.captures_failed }}
      {% if previous_stats %}{{ trend(stats.captures_failed, previous_stats.captures_failed, 'down_good') }}{% endif %}
    </div>
    <div class="stat-label">Nav. failures</div>
  </div>
  {% endif %}
  <div class="stat-card">
    <div class="stat-value">{{ stats.total_discrepancies }}
      {% if previous_stats %}{{ trend(stats.total_discrepancies, previous_stats.total_discrepancies, 'down_good') }}{% endif %}
    </div>
    <div class="stat-label">Active discrepancies</div>
  </div>
  {% if stats.n_dismissed %}
  <div class="stat-card">
    <div class="stat-value" style="color: var(--text-muted);">{{ stats.n_dismissed }}</div>
    <div class="stat-label">Dismissed</div>
  </div>
  {% endif %}
  <div class="stat-card stat-critical">
    <div class="stat-value">{{ stats.by_severity.critical or 0 }}
      {% if previous_stats %}{{ trend(stats.by_severity.critical or 0, previous_stats.by_severity.critical or 0, 'down_good') }}{% endif %}
    </div>
    <div class="stat-label">Critical</div>
  </div>
  <div class="stat-card stat-important">
    <div class="stat-value">{{ stats.by_severity.important or 0 }}
      {% if previous_stats %}{{ trend(stats.by_severity.important or 0, previous_stats.by_severity.important or 0, 'down_good') }}{% endif %}
    </div>
    <div class="stat-label">Important</div>
  </div>
  <div class="stat-card stat-minor">
    <div class="stat-value">{{ stats.by_severity.minor or 0 }}
      {% if previous_stats %}{{ trend(stats.by_severity.minor or 0, previous_stats.by_severity.minor or 0, 'down_good') }}{% endif %}
    </div>
    <div class="stat-label">Minor</div>
  </div>
  {% if execution and execution.total_cost %}
  <div class="stat-card">
    <div class="stat-value">~${{ "%.2f" | format(execution.total_cost) }}</div>
    <div class="stat-label">API Cost</div>
  </div>
  {% endif %}
</div>

{% if run.status == 'running' %}
<div hx-get="/htmx/projects/{{ project.slug }}/runs/{{ run.id }}/progress" hx-trigger="load, every 3s" hx-swap="innerHTML">
  <div class="card"><p class="text-muted">Loading progress...</p></div>
</div>
{% endif %}

{% if execution and execution.phases and run.status != 'running' %}
<div class="card mb-2">
  <h3>Execution details</h3>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Phase</th>
        <th>Duration</th>
        <th>Detail</th>
        <th style="text-align: right;">Tokens</th>
        <th style="text-align: right;">Cost</th>
      </tr>
    </thead>
    <tbody>
      {% for phase in execution.phases %}
      <tr style="{% if phase.status == 'failed' %}color: var(--critical);{% elif phase.status == 'pending' %}color: var(--text-muted);{% endif %}">
        <td style="width: 24px; text-align: center;">
          {% if phase.status == 'completed' %}
            <span style="color: var(--good);">&#10003;</span>
          {% elif phase.status == 'failed' %}
            <span style="color: var(--critical);">&#10007;</span>
          {% else %}
            <span style="color: var(--text-muted);">&#9675;</span>
          {% endif %}
        </td>
        <td>{{ phase.label }}</td>
        <td class="mono text-sm">
          {% if phase.duration %}
            {% if phase.duration >= 60 %}{{ (phase.duration // 60) | int }}m{{ "%02d" | format((phase.duration % 60) | int) }}s{% else %}{{ "%.1f" | format(phase.duration) }}s{% endif %}
          {% else %}-{% endif %}
        </td>
        <td class="text-sm text-muted">{{ phase.detail or '-' }}</td>
        <td class="mono text-sm" style="text-align: right;">
          {% if phase.tokens %}{{ "{:,}".format(phase.tokens) }}{% else %}-{% endif %}
        </td>
        <td class="mono text-sm" style="text-align: right;">
          {% if phase.cost %}~${{ "%.3f" | format(phase.cost) }}{% else %}-{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr style="font-weight: 600; border-top: 2px solid var(--border);">
        <td></td>
        <td>Total</td>
        <td class="mono text-sm">
          {% if run.duration %}
            {% if run.duration >= 60 %}{{ (run.duration // 60) | int }}m{{ "%02d" | format((run.duration % 60) | int) }}s{% else %}{{ "%.1f" | format(run.duration) }}s{% endif %}
          {% elif execution.elapsed %}
            {% if execution.elapsed >= 60 %}{{ (execution.elapsed // 60) | int }}m{{ "%02d" | format((execution.elapsed % 60) | int) }}s{% else %}{{ "%.0f" | format(execution.elapsed) }}s{% endif %}
          {% endif %}
        </td>
        <td></td>
        <td class="mono text-sm" style="text-align: right;">
          {% if execution.total_tokens %}{{ "{:,}".format(execution.total_tokens) }}{% endif %}
        </td>
        <td class="mono text-sm" style="text-align: right;">
          {% if execution.total_cost %}~${{ "%.3f" | format(execution.total_cost) }}{% endif %}
        </td>
      </tr>
    </tfoot>
  </table>
</div>
{% endif %}

{% if failed_captures %}
<div class="card mb-2" style="border-color: #f59e0b;">
  <h3 style="color: #f59e0b;">Navigation failures ({{ failed_captures | length }})</h3>
  <p class="text-sm text-muted" style="margin-bottom: 0.75rem;">
    These pages could not be captured correctly. The screenshots were identical
    to those of other pages (silent redirect to login/home/splash) or the navigation raised an error.
    Phase 5 does not compare them — the associated Figma screens will remain unverified.
  </p>
  <table>
    <thead>
      <tr><th>Page ID</th><th>Route</th><th>Tested URL</th><th>Cause</th></tr>
    </thead>
    <tbody>
      {% for fc in failed_captures %}
      <tr>
        <td class="mono text-sm">{{ fc.page_id }}</td>
        <td class="mono text-sm text-muted">{{ fc.route }}</td>
        <td class="mono text-xs text-muted" style="word-break: break-all; max-width: 320px;">
          {{ fc.landed_url or '-' }}
        </td>
        <td class="text-sm" style="color: #f59e0b;">
          {% if fc.is_duplicate %}
            <strong>Silent redirect</strong> &mdash; {{ fc.error }}
          {% else %}
            {{ fc.error }}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% set valid_comparisons = comparisons_list | selectattr('fidelity', '!=', 'mismatch') | list %}
{% set mismatch_comparisons = comparisons_list | selectattr('fidelity', '==', 'mismatch') | list %}

{% if valid_comparisons %}
<div class="card mb-2">
  <h3>Comparisons by screen ({{ valid_comparisons | length }})</h3>
  <table>
    <thead>
      <tr><th>Figma screen</th><th>Page</th><th>Discrepancies</th><th>Fidelity</th><th></th></tr>
    </thead>
    <tbody>
      {% for comp in valid_comparisons %}
      <tr>
        <td>{{ comp.screen_name }}</td>
        <td class="mono text-sm text-muted">{{ comp.page_id }}</td>
        <td>{{ comp.count }}</td>
        <td><span class="fidelity-badge fidelity-{{ comp.fidelity }}">{{ comp.fidelity }}</span></td>
        <td>
          {% if comp.has_image %}
          <a href="/projects/{{ project.slug }}/runs/{{ run.id }}/compare/{{ comp.page_id }}{% if comp.screen_id %}?screen_id={{ comp.screen_id }}{% endif %}" class="btn btn-sm">Compare</a>
          {% else %}
          <span class="text-xs text-muted">No Figma image</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% if mismatch_comparisons %}
<div class="card mb-2">
  <h3 style="color: #f59e0b;">Uncompared screens ({{ mismatch_comparisons | length }})</h3>
  <p class="text-sm text-muted" style="margin-bottom:0.75rem;">
    These Figma screens could not be compared — wrong matching, uncaptured state, or page error.
  </p>
  <table>
    <thead>
      <tr><th>Figma screen</th><th>Associated page</th><th>Diagnostic</th><th></th></tr>
    </thead>
    <tbody>
      {% for comp in mismatch_comparisons %}
      <tr>
        <td>{{ comp.screen_name }}</td>
        <td class="mono text-sm">{{ comp.page_id }}</td>
        <td class="text-sm" style="color: #f59e0b;">{{ comp.mismatch_reason or 'Different screens' }}</td>
        <td>
          <a href="/projects/{{ project.slug }}/runs/{{ run.id }}/compare/{{ comp.page_id }}{% if comp.screen_id %}?screen_id={{ comp.screen_id }}{% endif %}" class="btn btn-sm">View</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% if discrepancies %}
<div class="card">
  <div class="flex justify-between items-center mb-1">
    <h3>Discrepancies ({{ discrepancies | length }})</h3>
    <div class="flex gap-1">
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}?severity=critical&status={{ filter_status or '' }}" class="btn btn-sm {% if filter_severity == 'critical' %}btn-primary{% endif %}">Critical</a>
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}?severity=important&status={{ filter_status or '' }}" class="btn btn-sm {% if filter_severity == 'important' %}btn-primary{% endif %}">Important</a>
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}?status={{ filter_status or '' }}" class="btn btn-sm {% if not filter_severity %}btn-primary{% endif %}">All severities</a>
      <span style="border-left: 1px solid var(--border); margin: 0 0.25rem;"></span>
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}?severity={{ filter_severity or '' }}&status=open" class="btn btn-sm {% if filter_status == 'open' %}btn-primary{% endif %}">Open</a>
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}?severity={{ filter_severity or '' }}&status=fixed" class="btn btn-sm {% if filter_status == 'fixed' %}btn-primary{% endif %}">Fixed</a>
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}?severity={{ filter_severity or '' }}&status=ignored" class="btn btn-sm {% if filter_status == 'ignored' %}btn-primary{% endif %}">Ignored/Won't fix</a>
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}?severity={{ filter_severity or '' }}" class="btn btn-sm {% if not filter_status %}btn-primary{% endif %}">Active</a>
    </div>
  </div>

  {% for d in discrepancies %}
  <div class="discrepancy {{ d.severity }}" id="disc-{{ d.id }}">
    <div class="discrepancy-header">
      <a href="/projects/{{ project.slug }}/runs/{{ run.id }}/compare/{{ d.page_id }}" class="text-xs mono" style="color: var(--text-muted); text-decoration: none;" title="View comparison">{{ d.category }} - {{ d.page_id }} ({{ d.route }})</a>
      <div class="flex gap-1 items-center">
        <span class="badge badge-{{ d.status }}">{{ d.status }}</span>
        <span class="badge badge-{{ d.severity }}">{{ d.severity }}</span>
      </div>
    </div>
    <div class="discrepancy-desc">{{ d.description }}</div>
    {% if d.figma_value or d.app_value %}
    <div class="discrepancy-values">
      {% if d.figma_value %}<span>Figma: <code>{{ d.figma_value }}</code></span>{% endif %}
      {% if d.app_value %}<span>App: <code>{{ d.app_value }}</code></span>{% endif %}
    </div>
    {% endif %}
    {% if d.status == 'open' %}
    <div class="discrepancy-actions">
      <button class="btn btn-sm" hx-post="/htmx/projects/{{ project.slug }}/discrepancies/{{ d.id }}/status/ignored" hx-target="#disc-{{ d.id }}" hx-swap="outerHTML">Ignore</button>
      <button class="btn btn-sm" hx-post="/htmx/projects/{{ project.slug }}/discrepancies/{{ d.id }}/status/wontfix" hx-target="#disc-{{ d.id }}" hx-swap="outerHTML">Won't fix</button>
      <button class="btn btn-sm" hx-post="/htmx/projects/{{ project.slug }}/discrepancies/{{ d.id }}/status/fixed" hx-target="#disc-{{ d.id }}" hx-swap="outerHTML">Fixed</button>
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endif %}
{% endblock %}