{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}

{% block content %}
<div class="container">
  <h1 class="page-title">Source Normalizer — Results</h1>

  <div class="card" style="padding:16px; margin-bottom:16px;">
    <div class="meta-grid">
      <div>
        <div class="meta-label">Mode</div>
        <div class="subject-title" style="margin:0">
          {% if applied %}Applied to Database{% else %}Preview (dry‑run){% endif %}
        </div>
      </div>
      <div>
        <div class="meta-label">Entries {% if applied %}changed{% else %}that would change{% endif %}</div>
        <div class="subject-title" style="margin:0">{{ changed }}</div>
      </div>
      <div>
        <div class="meta-label">Preview Count</div>
        <div class="subject-title" style="margin:0">{{ preview|length }}</div>
      </div>
    </div>
    {% if limit %}
      <div class="small muted" style="margin-top:8px;">
        Preview limited to first {{ limit }} entries matched.
      </div>
    {% endif %}
  </div>

  <div class="card" style="padding:16px; margin-bottom:16px;">
    <div class="meta-label">Preview of Changes (first {{ preview|length }})</div>
    {% if preview %}
      <div style="overflow:auto; border:1px solid var(--border); border-radius:12px;">
        <table style="width:100%; border-collapse:collapse; min-width:720px;">
          <thead>
            <tr style="background:#f8fafc;">
              <th style="text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); width:80px;">ID</th>
              <th style="text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);">Original</th>
              <th style="text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);">Normalized</th>
              <th style="text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); width:110px;">View</th>
            </tr>
          </thead>
          <tbody>
            {% for id, original, normalized in preview %}
              <tr>
                <td style="padding:10px 12px; border-bottom:1px solid var(--border); color:#64748b;">{{ id }}</td>
                <td style="padding:10px 12px; border-bottom:1px solid var(--border); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;">
                  {{ original|default:"—" }}
                </td>
                <td style="padding:10px 12px; border-bottom:1px solid var(--border); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-weight:600;">
                  {{ normalized|default:"—" }}
                </td>
                <td style="padding:10px 12px; border-bottom:1px solid var(--border);">
                  <a class="btn btn-secondary" href="{% url 'entry_view' id %}">Open</a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="small muted" style="margin-top:8px;">
        Table shows up to the first 100 changes for readability.
      </div>
    {% else %}
      <div class="empty-state">
        <div class="empty-title">No differences found</div>
        <div class="empty-subtitle">Nothing would change with the current normalization rules.</div>
      </div>
    {% endif %}
  </div>

  <div style="display:flex; gap:10px; flex-wrap:wrap;">
    <a class="btn btn-secondary" href="{% url 'stats' %}">← Back to Statistics</a>

    {% if not applied %}
      <form method="post" action="{% url 'normalize_source' %}">
        {% csrf_token %}
        <button class="btn btn-danger"
                onclick="return confirm('Apply normalization to ALL entries? This will modify source fields. Make a backup first.');">
          Apply to all
        </button>
      </form>
    {% endif %}
  </div>
</div>
{% endblock %}