{% extends "base.html" %}
{% block title %}{{ screen.name }} vs {{ capture.page_id }} - figma-audit{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex justify-between items-center">
    <div>
      <h2>{{ screen.name }}</h2>
      <p class="subtitle">
        <span class="mono">{{ capture.route }}</span>
        <span class="fidelity-badge fidelity-{{ fidelity }}">{{ fidelity }}</span>
        <span class="text-muted">- {{ discrepancies | length }} discrepancy(ies)</span>
      </p>
      {% if capture.landed_url %}
      <p class="text-xs text-muted mono" style="margin-top: 0.25rem; word-break: break-all;">
        Tested URL: <a href="{{ capture.landed_url }}" target="_blank" rel="noopener" style="color: var(--text-muted);">{{ capture.landed_url }}</a>
      </p>
      {% endif %}
    </div>
    <a href="/projects/{{ project.slug }}/runs/{{ run_id }}" class="btn">Back to run</a>
  </div>
</div>

{% if fidelity == 'mismatch' %}
<div class="card" style="border-color: #f59e0b; background: rgba(245, 158, 11, 0.1); margin-bottom: 1rem;">
  <div style="color: #f59e0b; font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem;">Suspect matching</div>
  <p class="text-sm" style="color: #fbbf24; margin: 0;">
    These two screens do not seem to match. The comparison below is not reliable.
    Check the mapping in <code>screen_mapping.yaml</code> and rerun if necessary.
  </p>
</div>
{% endif %}

<div class="side-by-side">
  <div class="image-col">
    <div class="image-label">Figma (reference)</div>
    {% if screen.image_path %}
    <img src="/files/{{ project.slug }}/{{ screen.image_path }}" alt="Figma: {{ screen.name }}">
    {% else %}
    <div class="card" style="height:400px;display:flex;align-items:center;justify-content:center;">
      <span class="text-muted">Image not available</span>
    </div>
    {% endif %}
  </div>
  <div class="image-col">
    <div class="image-label">Application</div>
    {% if capture.screenshot_path %}
    <img src="/files/{{ project.slug }}/{{ capture.screenshot_path }}" alt="App: {{ capture.page_id }}">
    {% else %}
    <div class="card" style="height:400px;display:flex;align-items:center;justify-content:center;">
      <span class="text-muted">Image not available</span>
    </div>
    {% endif %}
  </div>
</div>

{% if fidelity != 'mismatch' and discrepancies %}
<div style="margin-bottom: 1rem;">
  <button class="btn"
    hx-get="/htmx/projects/{{ project.slug }}/runs/{{ run_id }}/fix-prompt/{{ capture.page_id }}{% if screen.id %}?screen_id={{ screen.id }}{% endif %}"
    hx-target="#fix-prompt-area"
    hx-swap="innerHTML">Generate fix prompt</button>
  <div id="fix-prompt-area"></div>
</div>
{% endif %}

<div class="card">
  <h3>Discrepancies ({{ discrepancies | length }})</h3>

  {% for d in discrepancies %}
  <div class="discrepancy {{ d.severity }}" id="disc-{{ d.id }}">
    <div class="discrepancy-header">
      <span class="text-xs text-muted mono">{{ d.category }}{% if d.location %} - {{ d.location }}{% endif %}</span>
      <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>
{% endblock %}