{% extends "base.html" %}
{% block title %}Conciliación bancaria{% endblock %}
{% block page_title %}Conciliación bancaria{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('banco.index') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-arrow-left me-1"></i>Volver
</a>
{% endblock %}

{% block content %}

<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card text-center">
      <div class="card-body py-3">
        <div class="fs-3 fw-bold text-primary">{{ total_importadas }}</div>
        <div class="text-muted small">Movimientos importados</div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card text-center">
      <div class="card-body py-3">
        <div class="fs-3 fw-bold text-success">{{ total_confirmadas }}</div>
        <div class="text-muted small">Vinculaciones confirmadas</div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card text-center">
      <div class="card-body py-3">
        <div class="fs-3 fw-bold text-warning">{{ sugerencias|length }}</div>
        <div class="text-muted small">Coincidencias pendientes de revisar</div>
      </div>
    </div>
  </div>
</div>

{% if not sugerencias %}
<div class="card">
  <div class="card-body text-center py-5 text-muted">
    <i class="bi bi-check-circle fs-1 text-success d-block mb-3"></i>
    <div class="fw-semibold">No hay coincidencias pendientes de revisar</div>
    <div class="small mt-1">
      Importa más movimientos bancarios o revisa que tus facturas pendientes tengan importes y fechas correctos.
    </div>
    <a href="{{ url_for('banco.index') }}" class="btn btn-outline-primary mt-3 btn-sm">
      <i class="bi bi-upload me-1"></i>Importar movimientos
    </a>
  </div>
</div>

{% else %}
<p class="text-muted small mb-3">
  <i class="bi bi-magic me-1"></i>
  ContaApp ha encontrado {{ sugerencias|length }} movimiento(s) bancario(s) que coinciden con facturas pendientes
  (diferencia ≤ 0,50 € y fecha ≤ 60 días). Confirma o descarta cada sugerencia.
</p>

{% for s in sugerencias %}
{% set tx = s.tx %}
<div class="card mb-3">
  <div class="card-body">
    <div class="row g-3 align-items-start">

      <!-- Movimiento bancario -->
      <div class="col-lg-4">
        <div class="d-flex align-items-center gap-2 mb-2">
          <span class="badge {% if tx.tipo == 'ingreso' %}bg-success{% else %}bg-danger{% endif %} rounded-pill">
            {{ tx.tipo }}
          </span>
          <span class="fw-bold">{{ "%.2f"|format(tx.importe) }} €</span>
          <span class="text-muted small">{{ tx.fecha }}</span>
        </div>
        <div class="text-muted small" style="word-break:break-word">{{ tx.descripcion }}</div>
        <div class="mt-2">
          <form method="post" action="{{ url_for('banco.conciliar_descartar') }}" class="d-inline">
            <input type="hidden" name="tx_id" value="{{ tx.id }}">
            <button type="submit" class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-x me-1"></i>No vincular
            </button>
          </form>
        </div>
      </div>

      <!-- Flecha -->
      <div class="col-lg-1 text-center d-flex align-items-center justify-content-center">
        <i class="bi bi-arrow-right fs-4 text-muted"></i>
      </div>

      <!-- Facturas sugeridas -->
      <div class="col-lg-7">
        <div class="small fw-semibold text-muted mb-2">
          <i class="bi bi-file-earmark-check me-1"></i>Facturas que coinciden:
        </div>
        {% for m in s.matches %}
        <div class="d-flex align-items-center gap-2 mb-2 p-2 rounded"
             style="background:#f8f9fa;border:1px solid #dee2e6">
          <div class="flex-grow-1">
            <span class="fw-semibold small">{{ m.numero }}</span>
            <span class="text-muted small ms-2">{{ m.contraparte or '—' }}</span>
            <div class="text-muted" style="font-size:.78rem">
              {{ m.fecha }} · {{ "%.2f"|format(m.total) }} €
              <span class="ms-1 {% if (m.total - tx.importe)|abs < 0.01 %}text-success{% else %}text-warning{% endif %}">
                (Δ {{ "%.2f"|format((m.total - tx.importe)|abs) }} €)
              </span>
            </div>
          </div>
          <form method="post" action="{{ url_for('banco.conciliar_confirmar') }}">
            <input type="hidden" name="tx_id" value="{{ tx.id }}">
            <input type="hidden" name="factura_id" value="{{ m.id }}">
            <input type="hidden" name="tipo" value="{{ tx.tipo }}">
            <button type="submit" class="btn btn-sm btn-success">
              <i class="bi bi-check-lg me-1"></i>Confirmar
            </button>
          </form>
        </div>
        {% endfor %}
      </div>

    </div>
  </div>
</div>
{% endfor %}
{% endif %}

{% endblock %}