<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Soporte técnico — ContaApp</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
    body { background:#0f1623; min-height:100vh; display:flex; align-items:center; justify-content:center; }
    .soporte-card { background:#0f2744; border:2px solid #f59e0b; border-radius:16px; padding:2rem; max-width:600px; width:100%; }
    .empresa-row { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px;
                   padding:14px 18px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
    .empresa-row:hover { background:rgba(255,255,255,.07); }
    .badge-soporte { background:#f59e0b; color:#0f1623; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; }
  </style>
</head>
<body>
<div class="soporte-card">

  <!-- Header -->
  <div class="d-flex align-items-center gap-3 mb-4">
    <div style="background:#f59e0b;border-radius:10px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <i class="bi bi-headset" style="font-size:1.5rem;color:#0f1623"></i>
    </div>
    <div>
      <div class="d-flex align-items-center gap-2">
        <span style="color:#f8fafc;font-size:1.15rem;font-weight:700">Soporte técnico</span>
        <span class="badge-soporte">SUPERADMIN</span>
      </div>
      <div style="color:#94a3b8;font-size:.82rem">Selecciona la empresa a la que vas a acceder</div>
    </div>
  </div>

  <!-- Aviso ético -->
  <div style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:8px;padding:10px 14px;margin-bottom:20px;font-size:.8rem;color:#fcd34d">
    <i class="bi bi-exclamation-triangle me-1"></i>
    <strong>Accede únicamente cuando el cliente lo haya solicitado.</strong>
    El cliente ha aceptado este acceso en la política de privacidad.
    No modifiques ni exportes datos sin su conocimiento.
  </div>

  {% with msgs = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in msgs %}
    <div class="alert alert-{{ cat }} py-2 mb-3" style="font-size:.85rem">{{ msg }}</div>
    {% endfor %}
  {% endwith %}

  <!-- Lista de empresas -->
  {% if empresas %}
  <div style="color:#94a3b8;font-size:.78rem;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px">
    {{ empresas|length }} empresa(s) registrada(s)
  </div>
  {% for e in empresas %}
  <div class="empresa-row">
    <div>
      <div style="color:#f8fafc;font-weight:600;font-size:.95rem">{{ e.nombre }}</div>
      <div style="color:#64748b;font-size:.75rem;font-family:monospace">{{ e.slug }}</div>
    </div>
    <div class="d-flex align-items-center gap-2">
      {% if e.db_ok %}
        <span style="color:#4ade80;font-size:.75rem"><i class="bi bi-circle-fill" style="font-size:.5rem;vertical-align:middle"></i> BD OK</span>
        <form method="post" action="{{ url_for('soporte.entrar', empresa_id=e.id) }}"
              onsubmit="return confirm('¿Entrar en ' + {{ e.nombre | tojson }} + '?\n\nSolo procede si el cliente ha solicitado soporte.')">
          <button class="btn btn-sm" style="background:#f59e0b;color:#0f1623;font-weight:600;font-size:.8rem">
            <i class="bi bi-box-arrow-in-right me-1"></i>Entrar
          </button>
        </form>
      {% else %}
        <span style="color:#64748b;font-size:.75rem"><i class="bi bi-circle" style="font-size:.5rem;vertical-align:middle"></i> Sin BD</span>
        <button class="btn btn-sm btn-outline-secondary" disabled style="font-size:.8rem">Sin acceso</button>
      {% endif %}
    </div>
  </div>
  {% endfor %}

  {% else %}
  <div style="text-align:center;padding:40px;color:#64748b">
    <i class="bi bi-building-x" style="font-size:2rem;opacity:.3;display:block;margin-bottom:8px"></i>
    No hay empresas registradas en esta instalación.
  </div>
  {% endif %}

  <!-- Solicitudes de contacto -->
  {% if contactos %}
  <div class="mt-4">
    <div style="color:#94a3b8;font-size:.78rem;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px">
      <i class="bi bi-envelope me-1" style="color:#f59e0b"></i>{{ contactos|length }} solicitud(es) de compra
    </div>
    {% for c in contactos|reverse %}
    <div style="background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:.8rem;color:#e2e8f0">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <span style="font-weight:600;color:#fcd34d">{{ c.nombre }}</span>
          {% if c.empresa %}<span style="color:#94a3b8"> · {{ c.empresa }}</span>{% endif %}
        </div>
        <span style="color:#64748b;font-size:.73rem">{{ c.fecha[:10] }}</span>
      </div>
      <div style="margin-top:3px">
        <a href="mailto:{{ c.email }}" style="color:#93c5fd">{{ c.email }}</a>
        {% if c.telefono %}<span style="color:#64748b;margin-left:10px"><i class="bi bi-telephone me-1"></i>{{ c.telefono }}</span>{% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- Herramientas de administración -->
  <div class="mt-4" style="border-top:1px solid rgba(255,255,255,.07);padding-top:14px">
    <div style="color:#64748b;font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px">
      Herramientas
    </div>
    <div class="d-flex flex-wrap gap-2 mb-3">
      <a href="{{ url_for('soporte.generar_licencia') }}"
         class="btn btn-sm"
         style="background:rgba(79,134,247,.15);border:1px solid rgba(79,134,247,.35);color:#93c5fd;font-size:.8rem">
        <i class="bi bi-key me-1"></i>Generar licencia .lic
      </a>
      <a href="{{ url_for('soporte.licencias_emitidas') }}"
         class="btn btn-sm"
         style="background:rgba(79,134,247,.08);border:1px solid rgba(79,134,247,.2);color:#60a5fa;font-size:.8rem">
        <i class="bi bi-clock-history me-1"></i>Historial licencias
      </a>
      <a href="{{ url_for('soporte.venta_licencia') }}"
         class="btn btn-sm"
         style="background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#fcd34d;font-size:.8rem">
        <i class="bi bi-file-earmark-pdf me-1"></i>Factura de venta
      </a>
    </div>
    <div class="text-end">
      <a href="{{ url_for('auth.logout') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-door-open me-1"></i>Cerrar sesión
      </a>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
