{% extends 'base.html' %}
{% block title %}Licencia — ContaApp{% endblock %}

{% block content %}
<div class="row justify-content-center" style="max-width:700px;margin:0 auto">

  <!-- Cabecera -->
  <div class="col-12 mb-4">
    <h4 class="fw-bold mb-1" style="color:#0f2744">
      <i class="bi bi-shield-check me-2" style="color:#fbbf24"></i>Licencia de uso
    </h4>
    <p class="text-muted mb-0" style="font-size:.85rem">Estado de tu licencia ContaApp.</p>
  </div>

  {% with msgs = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in msgs %}
      <div class="col-12">
        <div class="alert alert-{{ cat }} alert-dismissible fade show">
          {{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      </div>
    {% endfor %}
  {% endwith %}

  <!-- Tarjeta de estado -->
  <div class="col-12 mb-4">
    {% if lic.status == 'active' %}
    <div class="card border-0" style="background:linear-gradient(135deg,#064e3b,#065f46);color:#fff">
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <i class="bi bi-patch-check-fill" style="font-size:2.2rem;color:#6ee7b7"></i>
          <div>
            <div class="fw-bold" style="font-size:1.1rem">Licencia activa</div>
            <div style="font-size:.85rem;opacity:.8">{{ lic.plan_name }}</div>
          </div>
        </div>
        <table class="table table-sm mb-0" style="color:#fff;font-size:.88rem">
          <tr><td style="opacity:.7;width:130px">Titular</td><td class="fw-bold">{{ lic.holder }}</td></tr>
          <tr><td style="opacity:.7">Email</td><td>{{ lic.email }}</td></tr>
          <tr><td style="opacity:.7">Válida hasta</td><td class="fw-bold">{{ lic.expiry }}</td></tr>
          <tr><td style="opacity:.7">Días restantes</td>
              <td><span class="badge" style="background:#6ee7b7;color:#064e3b">{{ lic.days_left }} días</span></td>
          </tr>
        </table>
      </div>
    </div>

    {% elif lic.status == 'trial' %}
    <div class="card border-0" style="background:linear-gradient(135deg,#1e3a8a,#1d4ed8);color:#fff">
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <i class="bi bi-hourglass-split" style="font-size:2.2rem;color:#93c5fd"></i>
          <div>
            <div class="fw-bold" style="font-size:1.1rem">Período de prueba</div>
            <div style="font-size:.85rem;opacity:.8">Acceso completo durante 7 días</div>
          </div>
        </div>
        <div class="mb-3">
          <div style="font-size:.8rem;opacity:.7;margin-bottom:6px">Tiempo restante</div>
          <div class="progress" style="height:10px;background:rgba(255,255,255,.2)">
            <div class="progress-bar" style="width:{{ [lic.days_left / 7 * 100, 100]|min }}%;background:#93c5fd"></div>
          </div>
          <div class="mt-1 fw-bold" style="font-size:1.4rem">{{ lic.days_left }} días</div>
        </div>
        <div style="font-size:.82rem;opacity:.8">
          Prueba gratuita hasta <strong>{{ lic.expiry }}</strong>.
          Activa tu licencia antes de que expire para no perder el acceso.
        </div>
      </div>
    </div>

    {% else %}
    <div class="card border-0" style="background:linear-gradient(135deg,#7f1d1d,#991b1b);color:#fff">
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <i class="bi bi-shield-x" style="font-size:2.2rem;color:#fca5a5"></i>
          <div>
            <div class="fw-bold" style="font-size:1.1rem">
              {% if lic.status == 'expired' %}Licencia expirada{% else %}Sin licencia válida{% endif %}
            </div>
            <div style="font-size:.85rem;opacity:.8">{{ lic.get('error', 'Activa tu licencia para continuar.') }}</div>
          </div>
        </div>
        <div style="font-size:.82rem;opacity:.8">
          Importa tu archivo de licencia (.lic) para reactivar el acceso completo.
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Formulario de activación -->
  {% if lic.status != 'active' %}
  <div class="col-12 mb-4">
    <div class="card">
      <div class="card-header fw-semibold">
        <i class="bi bi-key me-2" style="color:#fbbf24"></i>Activar licencia
      </div>
      <div class="card-body">
        <p style="font-size:.85rem;color:#64748b">
          Si has adquirido ContaApp, habrás recibido un archivo <strong>.lic</strong> por email.
          Selecciónalo aquí para activar tu licencia.
        </p>
        <form method="post" action="{{ url_for('licencia.activar') }}" enctype="multipart/form-data">
          <div class="mb-3">
            <label class="form-label" style="font-size:.85rem">Archivo de licencia (.lic)</label>
            <input type="file" name="archivo_lic" accept=".lic" class="form-control" required>
          </div>
          <button class="btn btn-primary">
            <i class="bi bi-upload me-1"></i>Activar licencia
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-12">
    <div class="card" style="border-color:#cbd5e1">
      <div class="card-header fw-semibold" style="font-size:.9rem">
        <i class="bi bi-cart3 me-2" style="color:#fbbf24"></i>¿Quieres adquirir ContaApp?
      </div>
      <div class="card-body">
        <p style="font-size:.84rem;color:#64748b;margin-bottom:1rem">
          Déjanos tus datos y nos pondremos en contacto contigo en menos de 24 horas.
        </p>
        <form method="post" action="{{ url_for('licencia.contacto') }}">
          <div class="row g-3">
            <div class="col-sm-6">
              <label class="form-label" style="font-size:.82rem">Nombre completo <span class="text-danger">*</span></label>
              <input type="text" name="nombre" class="form-control form-control-sm" required
                     placeholder="Juan García">
            </div>
            <div class="col-sm-6">
              <label class="form-label" style="font-size:.82rem">Email de contacto <span class="text-danger">*</span></label>
              <input type="email" name="email" class="form-control form-control-sm" required
                     placeholder="juan@empresa.com">
            </div>
            <div class="col-sm-6">
              <label class="form-label" style="font-size:.82rem">Empresa</label>
              <input type="text" name="empresa" class="form-control form-control-sm"
                     placeholder="Mi Empresa SL">
            </div>
            <div class="col-sm-6">
              <label class="form-label" style="font-size:.82rem">Teléfono</label>
              <input type="tel" name="telefono" class="form-control form-control-sm"
                     placeholder="+34 600 000 000">
            </div>
          </div>
          <div class="d-flex justify-content-end mt-3">
            <button type="submit" class="btn btn-primary btn-sm px-4">
              <i class="bi bi-send me-1"></i>Solicitar información
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Soporte técnico — siempre visible -->
  <div class="col-12 mt-3">
    <div class="card" style="border-color:#e2e8f0">
      <div class="card-body py-3 px-4">
        <div class="d-flex align-items-center gap-3">
          <i class="bi bi-headset" style="font-size:1.6rem;color:#4f86f7;flex-shrink:0"></i>
          <div>
            <div class="fw-semibold mb-1" style="font-size:.9rem">Soporte técnico</div>
            <div style="font-size:.83rem;color:#64748b">
              ¿Tienes algún problema o pregunta?
              Escríbenos a
              <a href="mailto:soporte@contaapp.es?subject=Soporte%20ContaApp%20v{{ _version }}">soporte@contaapp.es</a>
              e intentaremos responderte en menos de 48&nbsp;h.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if lic.status == 'active' %}
  <!-- Renovar / soporte cuando la licencia está activa pero queda poco tiempo -->
  {% if lic.days_left < 30 %}
  <div class="col-12 mt-2">
    <div class="alert alert-warning py-2" style="font-size:.83rem">
      <i class="bi bi-exclamation-triangle me-1"></i>
      Tu licencia expira pronto. Contacta con soporte para renovarla:
      <a href="mailto:soporte@contaapp.es?subject=Renovaci%C3%B3n%20ContaApp" class="alert-link ms-1">soporte@contaapp.es</a>
    </div>
  </div>
  {% endif %}

  <!-- Formulario para actualizar/reemplazar licencia -->
  <div class="col-12 mt-3">
    <div class="card">
      <div class="card-header fw-semibold" style="font-size:.85rem">
        <i class="bi bi-arrow-repeat me-1"></i>Actualizar o sustituir licencia
      </div>
      <div class="card-body py-3">
        <form method="post" action="{{ url_for('licencia.activar') }}" enctype="multipart/form-data"
              class="d-flex gap-2 align-items-end">
          <div class="flex-grow-1">
            <label class="form-label" style="font-size:.82rem">Nuevo archivo .lic</label>
            <input type="file" name="archivo_lic" accept=".lic" class="form-control form-control-sm" required>
          </div>
          <button class="btn btn-outline-primary btn-sm">
            <i class="bi bi-upload me-1"></i>Actualizar
          </button>
        </form>
      </div>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}