{% extends 'manager.html' %}
{% block content %}
<div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center bg-white">
        <h4 class="card-title text-primary mb-0"><i class="fas fa-chart-line"></i> Gestión y Análisis de Clientes</h4>
        
        <div>
            <a href="{% url 'enviar_promocion_masiva' %}" class="btn btn-primary btn-sm shadow-sm mr-2">
                <i class="fas fa-envelope-open-text"></i> Redactar Campaña
            </a>
            
            <a href="{% url 'usuarios_pendientes' %}" class="btn btn-warning btn-sm shadow-sm">
                <i class="fas fa-clock"></i> Ver Nuevos Pendientes
            </a>
        </div>
    </div>

    <div class="card-body">
        <table class="table table-hover mt-3" id="tablaCorreos">
            <thead class="thead-light">
                <tr>
                    <th>Usuario</th>
                    <th>Email</th>
                    <th class="text-center">Interacción (Likes)</th> 
                    <th class="text-center">Estado</th>
                    <th class="text-center">Acción</th>
                </tr>
            </thead>
            <tbody>
                {% for user in activos %}
                <tr>
                    <td><strong>{{ user.username }}</strong></td>
                    <td>{{ user.email }}</td>
                    
                    <td class="text-center">
                        {% if user.num_likes > 0 %}
                            <span class="badge badge-info">
                                <i class="fas fa-thumbs-up"></i> {{ user.num_likes }} Likes
                            </span>
                            <div class="mt-2">
                                <small class="text-muted d-block">Lo que más le gusta:</small>
                                <strong class="text-primary">{{ user.preferencia_dinamica }}</strong>
                            </div>
                        {% else %}
                            <span class="badge badge-light text-muted border">Sin actividad</span>
                        {% endif %}
                    </td>

                    <td class="text-center">
                        {% if user.is_active %}
                            <span class="badge badge-success px-3">Activo</span>
                        {% else %}
                            <span class="badge badge-danger px-3">Suspendido</span>
                        {% endif %}
                    </td>
                    
                    <td class="text-center">
                        {% if user.is_active %}
                            <a href="{% url 'desactivar_usuario' user_id=user.id %}" 
                            class="btn btn-outline-danger btn-sm"
                            onclick="return confirm('¿Desea quitar el acceso a este usuario?')">
                                <i class="fas fa-lock"></i> Suspender
                            </a>
                            
                            <a href="{% url 'enviar_promocion' user_id=user.id %}" 
                            class="btn btn-primary btn-sm ml-1">
                                <i class="fas fa-paper-plane"></i> Enviar Promo
                            </a>
                        {% else %}
                            <a href="{% url 'activar_usuario_manual' user_id=user.id %}" 
                            class="btn btn-outline-success btn-sm">
                                <i class="fas fa-unlock"></i> Reactivar
                            </a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#tablaCorreos').DataTable({
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/2.3.1/i18n/es-ES.json"
            }
        });
    });
</script>
{% endblock %}