{% extends "base.html" %}

{% block title %}Gestión de Comentarios - Admin{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-4xl font-bold text-gray-800 mb-2">
            <i class="fas fa-comments text-purple-600"></i> Gestión de Comentarios
        </h1>
        <p class="text-gray-600">Modera los comentarios de usuarios</p>
    </div>

    <!-- Navegación de Admin -->
    <div class="admin-nav flex flex-wrap gap-2 mb-8 bg-white rounded-lg shadow p-4">
        <a href="{{ url_for('admin.dashboard') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-home mr-2"></i>Dashboard
        </a>
        <a href="{{ url_for('admin.manage_users') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-users mr-2"></i>Usuarios
        </a>
        <a href="{{ url_for('admin.manage_empresas') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-building mr-2"></i>Empresas
        </a>
        <a href="{{ url_for('admin.manage_productos') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-box mr-2"></i>Productos
        </a>
        <a href="{{ url_for('admin.manage_eventos') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-calendar mr-2"></i>Eventos
        </a>
        <a href="{{ url_for('admin.manage_comentarios') }}" class="px-4 py-2 rounded bg-purple-100 text-purple-800">
            <i class="fas fa-comments mr-2"></i>Comentarios
        </a>
        <a href="{{ url_for('admin.manage_categorias') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-tags mr-2"></i>Categorías
        </a>
        <a href="{{ url_for('admin.view_alertas') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-bell mr-2"></i>Alertas
        </a>
        <a href="{{ url_for('admin.view_logins') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-sign-in-alt mr-2"></i>Logins
        </a>
        <a href="{{ url_for('admin.view_auditoria') }}" class="px-4 py-2 rounded hover:bg-gray-100">
            <i class="fas fa-clipboard-list mr-2"></i>Auditoría
        </a>
    </div>

    <!-- Estadísticas -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow p-4">
            <p class="text-gray-600 text-sm">Total Comentarios</p>
            <p class="text-3xl font-bold text-purple-600">{{ comentarios|length }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <p class="text-gray-600 text-sm">Aprobados</p>
            <p class="text-3xl font-bold text-green-600">
                {{ comentarios|selectattr('EsAprobado', 'equalto', 1)|list|length }}
            </p>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <p class="text-gray-600 text-sm">Pendientes</p>
            <p class="text-3xl font-bold text-yellow-600">
                {{ comentarios|selectattr('EsAprobado', 'equalto', 0)|list|length }}
            </p>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <p class="text-gray-600 text-sm">Calificación Promedio</p>
            <p class="text-3xl font-bold text-blue-600">
                {% set sum_cal = comentarios|sum(attribute='Calificacion') %}
                {% if comentarios|length > 0 %}
                    {{ "%.1f"|format(sum_cal / comentarios|length) }}
                {% else %}
                    0.0
                {% endif %}
            </p>
        </div>
    </div>

    <!-- Lista de comentarios -->
    <div class="space-y-4">
        {% for comentario in comentarios %}
        <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <!-- Header del comentario -->
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <span class="text-purple-600 font-bold">
                                {{ comentario.Username[0] if comentario.Username else '?' }}
                            </span>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center">
                                <p class="font-semibold text-gray-800 mr-2">@{{ comentario.Username }}</p>
                                
                                <!-- Calificación -->
                                <div class="flex items-center">
                                    {% for i in range(1, 6) %}
                                        {% if i <= comentario.Calificacion %}
                                            <i class="fas fa-star text-yellow-400"></i>
                                        {% else %}
                                            <i class="far fa-star text-gray-300"></i>
                                        {% endif %}
                                    {% endfor %}
                                    <span class="ml-2 text-sm text-gray-600">({{ comentario.Calificacion }})</span>
                                </div>
                            </div>
                            
                            <p class="text-sm text-gray-500">
                                {% if comentario.EmpresaNombre %}
                                    Comentó sobre: <strong>{{ comentario.EmpresaNombre }}</strong> (Empresa)
                                {% elif comentario.ProductoNombre %}
                                    Comentó sobre: <strong>{{ comentario.ProductoNombre }}</strong> (Producto)
                                {% endif %}
                            </p>
                            
                            <p class="text-xs text-gray-400 mt-1">
                                <i class="far fa-clock mr-1"></i>
                                {{ comentario.FechaCreacion.strftime('%d/%m/%Y %H:%M') if comentario.FechaCreacion else 'N/A' }}
                            </p>
                        </div>
                    </div>
                    
                    <!-- Contenido del comentario -->
                    <div class="bg-gray-50 rounded-lg p-4 mb-3">
                        <p class="text-gray-700">{{ comentario.Contenido }}</p>
                    </div>
                    
                    <!-- Estado -->
                    <div class="flex items-center">
                        {% if comentario.EsAprobado %}
                            <span class="px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-1"></i> Aprobado
                            </span>
                        {% else %}
                            <span class="px-3 py-1 text-sm font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                <i class="fas fa-clock mr-1"></i> Pendiente de moderación
                            </span>
                        {% endif %}
                        
                        {% if comentario.EsVerificado %}
                            <span class="ml-2 px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800">
                                <i class="fas fa-badge-check mr-1"></i> Verificado
                            </span>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Acciones -->
                <div class="ml-4 flex flex-col space-y-2">
                    <form method="POST" action="{{ url_for('admin.toggle_comentario_status', comentario_id=comentario.ComentarioID) }}">
                        <button type="submit" 
                                class="{% if comentario.EsAprobado %}bg-yellow-500 hover:bg-yellow-600{% else %}bg-green-500 hover:bg-green-600{% endif %} text-white px-4 py-2 rounded-lg text-sm">
                            {% if comentario.EsAprobado %}
                                <i class="fas fa-times mr-1"></i> Rechazar
                            {% else %}
                                <i class="fas fa-check mr-1"></i> Aprobar
                            {% endif %}
                        </button>
                    </form>
                    
                    <button onclick="eliminarComentario({{ comentario.ComentarioID }})" 
                            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm">
                        <i class="fas fa-trash mr-1"></i> Eliminar
                    </button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    {% if not comentarios %}
    <div class="text-center py-12 bg-white rounded-lg shadow">
        <i class="fas fa-comments text-gray-400 text-6xl mb-4"></i>
        <p class="text-gray-500 text-lg">No hay comentarios para mostrar</p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    function eliminarComentario(comentarioId) {
        if (confirm('¿Estás seguro de eliminar este comentario? Esta acción no se puede deshacer.')) {
            fetch(`/admin/comentarios/${comentarioId}/delete`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Comentario eliminado correctamente');
                    location.reload();
                } else {
                    alert('Error al eliminar comentario: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al eliminar el comentario');
            });
        }
    }
</script>
{% endblock %}