{% extends "base.html" %}
{% block title %}Actualizaciones{% endblock %}
{% block page_title %}Actualizaciones de ContaApp{% endblock %}

{% block content %}
<div style="max-width:600px;margin:0 auto">

<!-- Versión instalada -->
<div class="card mb-4 border-0" style="background:linear-gradient(135deg,#0f2744,#1e3a8a);color:#fff">
  <div class="card-body p-4">
    <div class="d-flex align-items-center gap-3">
      <div style="width:56px;height:56px;background:rgba(255,255,255,.15);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
        <i class="bi bi-box-seam" style="font-size:1.8rem"></i>
      </div>
      <div class="flex-grow-1">
        <div style="opacity:.75;font-size:.82rem">Versión instalada</div>
        <div class="fw-bold" style="font-size:1.6rem;letter-spacing:.02em">v{{ version_actual }}</div>
      </div>
      {% if hay_actualizacion %}
      <span class="badge" style="background:#f59e0b;color:#0f1623;font-size:.8rem;padding:6px 14px">
        <i class="bi bi-arrow-up-circle me-1"></i>Actualización disponible
      </span>
      {% elif checked and remote and not remote.get('error') %}
      <span class="badge bg-success" style="font-size:.8rem;padding:6px 14px">
        <i class="bi bi-check-circle me-1"></i>Al día
      </span>
      {% endif %}
    </div>
  </div>
</div>

<!-- Resultado -->
{% if not checked %}
<div class="alert alert-secondary mb-4">
  <i class="bi bi-arrow-repeat me-2"></i>Comprobando actualizaciones en segundo plano...
</div>
{% elif remote and remote.get('error') %}
<div class="alert alert-warning mb-4">
  <i class="bi bi-exclamation-triangle me-2"></i>No se pudo conectar al servidor de actualizaciones. Verifica tu conexión a internet.
</div>
{% elif hay_actualizacion %}
<div class="card mb-4 border-0" style="border-left:4px solid #f59e0b !important;background:#fffbeb">
  <div class="card-body p-4">
    <div class="fw-bold mb-1" style="color:#92400e;font-size:1.05rem">
      <i class="bi bi-arrow-up-circle me-2" style="color:#d97706"></i>
      Nueva versión — v{{ remote.version }}
      {% if remote.fecha %}
      <span class="fw-normal text-muted ms-2" style="font-size:.85rem">{{ remote.fecha }}</span>
      {% endif %}
    </div>
    {% if remote.novedades %}
    <div class="mt-3 mb-4" style="color:#78350f;line-height:1.7">
      {% for linea in remote.novedades.split('\n') %}
        {% if linea.strip() %}
        <div class="d-flex align-items-start gap-2">
          <i class="bi bi-check2 mt-1 flex-shrink-0" style="color:#d97706"></i>
          <span>{{ linea.strip().lstrip('-').strip() }}</span>
        </div>
        {% endif %}
      {% endfor %}
    </div>
    {% endif %}
    <a href="{{ url_for('actualizaciones.descargar') }}" class="btn btn-warning">
      <i class="bi bi-download me-2"></i>Descargar e instalar v{{ remote.version }}
    </a>
    <p class="text-muted mt-2 mb-0" style="font-size:.8rem">
      Se descargará el instalador y se ejecutará automáticamente. La app puede permanecer abierta.
    </p>
  </div>
</div>
{% else %}
<div class="alert alert-success mb-4">
  <i class="bi bi-check-circle me-2"></i>
  Tienes la última versión instalada.
  {% if remote and remote.fecha %}
  <span class="text-muted ms-1" style="font-size:.88rem">Publicada el {{ remote.fecha }}.</span>
  {% endif %}
</div>
{% endif %}

<!-- Comprobación manual -->
<div class="card">
  <div class="card-body d-flex align-items-center justify-content-between gap-3 p-4">
    <div>
      <div class="fw-semibold" style="font-size:.92rem">Comprobar ahora</div>
      <div class="text-muted" style="font-size:.82rem">ContaApp comprueba actualizaciones automáticamente al arrancar.</div>
    </div>
    <button class="btn btn-outline-secondary flex-shrink-0" id="btnComprobar">
      <i class="bi bi-arrow-repeat me-1"></i>Comprobar
    </button>
  </div>
  <div id="checkResult" class="px-4 pb-3 text-muted small" style="display:none"></div>
</div>

</div>
{% endblock %}

{% block extra_scripts %}
<script>
document.getElementById('btnComprobar')?.addEventListener('click', function() {
  const btn = this;
  const res = document.getElementById('checkResult');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Comprobando...';
  res.style.display = 'none';
  fetch('{{ url_for("actualizaciones.comprobar") }}')
    .then(r => r.json())
    .then(d => {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-arrow-repeat me-1"></i>Comprobar';
      res.style.display = 'block';
      if (d.error) {
        res.textContent = 'No se pudo conectar al servidor.';
      } else if (d.hay_actualizacion) {
        res.innerHTML = '<i class="bi bi-arrow-up-circle text-warning me-1"></i>Nueva versión disponible: v' + d.version + '. Recarga la página para ver los detalles.';
      } else {
        res.innerHTML = '<i class="bi bi-check-circle text-success me-1"></i>Al día — tienes la versión más reciente (v' + d.version_actual + ').';
      }
    })
    .catch(() => {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-arrow-repeat me-1"></i>Comprobar';
      res.style.display = 'block';
      res.textContent = 'Error de conexión.';
    });
});
</script>
{% endblock %}