{% extends "dashboard/base_dashboard.html" %}

{% block title %}Moderação de Avaliações — Dra. Mariela Moreno Autie{% endblock %}
{% block panel_title %}Moderação de Avaliações{% endblock %}

{% block panel_content %}
<!-- Filtros -->
<div class="bg-white rounded-xl p-4 sm:p-6 border border-gray-100 shadow-sm mb-6">
    <form method="get" class="flex flex-col sm:flex-row items-start sm:items-end gap-3 sm:gap-4">
        <div class="w-full sm:w-auto">
            <label class="block text-xs text-gray-400 mb-1">Estado</label>
            <select name="estado" class="w-full sm:w-auto px-4 py-2 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-rosa/30 focus:border-rosa outline-none">
                <option value="">Todos</option>
                {% for val, label in estados %}
                <option value="{{ val }}" {% if estado_filtro == val %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="w-full sm:w-auto">
            <label class="block text-xs text-gray-400 mb-1">Estrelas</label>
            <select name="estrellas" class="w-full sm:w-auto px-4 py-2 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-rosa/30 focus:border-rosa outline-none">
                <option value="">Todas</option>
                {% for i in "54321" %}
                <option value="{{ i }}" {% if estrellas_filtro == i %}selected{% endif %}>{{ i }}★</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="btn-rosa px-6 py-2 bg-rosa text-white font-semibold rounded-[20px] text-sm shadow hover:shadow-md">
            Filtrar
        </button>
    </form>
</div>

<!-- Lista de valoraciones -->
{% if valoraciones %}
<div class="space-y-4">
    {% for v in valoraciones %}
    <div class="bg-white rounded-xl p-5 sm:p-6 border border-gray-100 shadow-sm">
        <div class="flex flex-col sm:flex-row items-start justify-between gap-3 mb-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-rosa-bg rounded-full flex items-center justify-center flex-shrink-0">
                    <span class="text-rosa font-semibold text-sm">{{ v.paciente.nombre.0 }}{{ v.paciente.apellido.0 }}</span>
                </div>
                <div>
                    <p class="text-dark font-semibold text-sm">{{ v.paciente.nombre }} {{ v.paciente.apellido }}</p>
                    <p class="text-gray-400 text-xs">{{ v.cita.servicio.nombre }} · {{ v.cita.fecha_hora|date:"d/m/Y" }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <!-- Estrellas -->
                <div class="flex gap-0.5">
                    {% for i in "12345" %}
                    <svg class="w-4 h-4 {% if forloop.counter <= v.estrellas %}text-dorado{% else %}text-gray-200{% endif %}" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    {% endfor %}
                </div>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                    {% if v.estado == 'aprobada' %}bg-green-50 text-green-700
                    {% elif v.estado == 'rechazada' %}bg-red-50 text-red-700
                    {% else %}bg-amber-50 text-amber-700{% endif %}">
                    {{ v.get_estado_display }}
                </span>
            </div>
        </div>

        {% if v.comentario %}
        <p class="text-gray-500 text-sm mb-4 leading-relaxed">{{ v.comentario }}</p>
        {% else %}
        <p class="text-gray-300 text-sm italic mb-4">Sem comentário</p>
        {% endif %}

        <p class="text-gray-300 text-xs mb-4">Enviada em {{ v.created_at|date:"d/m/Y H:i" }}</p>

        <!-- Acciones -->
        <div class="flex flex-wrap items-center gap-2">
            {% if v.estado == 'pendiente' %}
            <form method="post" action="{% url 'ratings:aprobar' v.id %}" class="inline">
                {% csrf_token %}
                <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 bg-green-50 text-green-700 border border-green-200 rounded-full text-xs font-medium hover:bg-green-100 transition">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Aprovar
                </button>
            </form>
            <form method="post" action="{% url 'ratings:rechazar' v.id %}" class="inline">
                {% csrf_token %}
                <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 bg-red-50 text-red-700 border border-red-200 rounded-full text-xs font-medium hover:bg-red-100 transition">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    Rejeitar
                </button>
            </form>
            {% endif %}

            {% if v.estado == 'aprobada' and not v.respuesta_doctora %}
            <!-- Responder -->
            <button type="button" onclick="toggleRespuesta('resp-{{ v.id }}')"
                class="inline-flex items-center gap-1.5 px-4 py-2 bg-blue-50 text-blue-700 border border-blue-200 rounded-full text-xs font-medium hover:bg-blue-100 transition">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
                Responder
            </button>
            {% endif %}
        </div>

        <!-- Respuesta existente -->
        {% if v.respuesta_doctora %}
        <div class="mt-4 pl-4 border-l-2 border-rosa/30">
            <p class="text-xs text-rosa font-medium mb-1">A sua resposta:</p>
            <p class="text-gray-500 text-sm">{{ v.respuesta_doctora }}</p>
            <p class="text-gray-300 text-xs mt-1">{{ v.fecha_respuesta|date:"d/m/Y H:i" }}</p>
        </div>
        {% endif %}

        <!-- Formulario de respuesta (oculto) -->
        {% if v.estado == 'aprobada' and not v.respuesta_doctora %}
        <div id="resp-{{ v.id }}" class="hidden mt-4 pt-4 border-t border-gray-100">
            <form method="post" action="{% url 'ratings:responder' v.id %}">
                {% csrf_token %}
                <textarea name="respuesta" maxlength="500" rows="2" required
                    placeholder="Escreva a sua resposta..."
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/30 focus:border-rosa outline-none transition text-sm resize-none mb-3"></textarea>
                <button type="submit" class="btn-rosa px-5 py-2 bg-rosa text-white font-semibold rounded-[20px] text-sm shadow hover:shadow-md">
                    Enviar Resposta
                </button>
            </form>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-xl p-8 border border-gray-100 shadow-sm text-center">
    <svg class="w-16 h-16 mx-auto text-gray-200 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    <p class="text-gray-400 text-sm">Não há avaliações com estes filtros.</p>
</div>
{% endif %}

<script>
function toggleRespuesta(id) {
    var el = document.getElementById(id);
    if (el) { el.classList.toggle('hidden'); }
}
</script>
{% endblock %}