{% extends "layouts/base.html" %}
{% load static i18n %}

{% block title %}{% trans "Lista de Notificações" %} - {% trans "Gerenciador" %}{% endblock %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/notifications.css' %}">
<style>
.manager-bg { 
    background: radial-gradient(ellipse at center, #0f172a 0%, #1a1a2e 50%, #0f0f1e 100%); 
    min-height: 100vh; 
    padding: 40px 0; 
}
.card-glow { 
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.95) 0%, rgba(18, 18, 32, 0.95) 100%); 
    border: 1px solid rgba(111, 66, 193, 0.3); 
    border-radius: 16px; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
</style>
{% endblock %}

{% block content %}
<div class="manager-bg">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="text-white">
                <i class="bi bi-list-ul me-2"></i>{% trans "Lista de Notificações" %}
            </h2>
            <div class="d-flex gap-2">
                <a href="{% url 'notification:manager_dashboard' %}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-2"></i>{% trans "Voltar" %}
                </a>
                <a href="{% url 'notification:manager_create' %}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-2"></i>{% trans "Nova" %}
                </a>
            </div>
        </div>

        <!-- Filtros -->
        <div class="card card-glow mb-4">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label class="text-white">{% trans "Tipo" %}</label>
                        <select name="type" class="form-control">
                            <option value="">{% trans "Todos" %}</option>
                            <option value="user" {% if notification_type == 'user' %}selected{% endif %}>{% trans "Usuário" %}</option>
                            <option value="system" {% if notification_type == 'system' %}selected{% endif %}>{% trans "Sistema" %}</option>
                            <option value="staff" {% if notification_type == 'staff' %}selected{% endif %}>{% trans "Staff" %}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="text-white">{% trans "Prêmios" %}</label>
                        <select name="has_rewards" class="form-control">
                            <option value="">{% trans "Todos" %}</option>
                            <option value="yes" {% if has_rewards == 'yes' %}selected{% endif %}>{% trans "Com Prêmios" %}</option>
                            <option value="no" {% if has_rewards == 'no' %}selected{% endif %}>{% trans "Sem Prêmios" %}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="text-white">{% trans "Visualizada" %}</label>
                        <select name="viewed" class="form-control">
                            <option value="">{% trans "Todas" %}</option>
                            <option value="yes" {% if viewed == 'yes' %}selected{% endif %}>{% trans "Sim" %}</option>
                            <option value="no" {% if viewed == 'no' %}selected{% endif %}>{% trans "Não" %}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="text-white">{% trans "Buscar" %}</label>
                        <input type="text" name="search" class="form-control" value="{{ search }}" placeholder="{% trans 'Mensagem ou usuário' %}">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search me-2"></i>{% trans "Filtrar" %}
                        </button>
                        <a href="{% url 'notification:manager_list' %}" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-2"></i>{% trans "Limpar" %}
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Lista -->
        <div class="card card-glow">
            <div class="card-body">
                {% if notifications %}
                    <div class="table-responsive">
                        <table class="table table-dark table-hover">
                            <thead>
                                <tr>
                                    <th>{% trans "ID" %}</th>
                                    <th>{% trans "Tipo" %}</th>
                                    <th>{% trans "Mensagem" %}</th>
                                    <th>{% trans "Usuário" %}</th>
                                    <th>{% trans "Prêmios" %}</th>
                                    <th>{% trans "Status" %}</th>
                                    <th>{% trans "Data" %}</th>
                                    <th>{% trans "Ações" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for notification in notifications %}
                                <tr>
                                    <td>{{ notification.id }}</td>
                                    <td>
                                        <span class="badge bg-{% if notification.notification_type == 'user' %}primary{% elif notification.notification_type == 'system' %}info{% else %}danger{% endif %}">
                                            {{ notification.get_notification_type_display }}
                                        </span>
                                    </td>
                                    <td>{{ notification.message|truncatewords:10 }}</td>
                                    <td>
                                        {% if notification.user %}
                                            {{ notification.user.username }}
                                        {% else %}
                                            <span class="badge bg-secondary">{% trans "Pública" %}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if notification.rewards.exists %}
                                            <span class="badge bg-success">
                                                <i class="bi bi-gift me-1"></i>{{ notification.rewards.count }}
                                            </span>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if notification.viewed %}
                                            <span class="badge bg-secondary">{% trans "Lida" %}</span>
                                        {% else %}
                                            <span class="badge bg-warning">{% trans "Não Lida" %}</span>
                                        {% endif %}
                                        {% if notification.rewards_claimed %}
                                            <br><span class="badge bg-success mt-1">{% trans "Prêmios Reclamados" %}</span>
                                        {% endif %}
                                        {% if notification.rewards.exists and notification.rewards_expires_at %}
                                            <br>
                                            {% if notification.rewards_expired %}
                                                <span class="badge bg-danger mt-1">
                                                    <i class="bi bi-clock-history me-1"></i>{% trans "Prêmios Expirados" %}
                                                </span>
                                            {% else %}
                                                <span class="badge bg-info mt-1">
                                                    <i class="bi bi-calendar-check me-1"></i>{% trans "Válido até" %}: {{ notification.rewards_expires_at|date:"d/m/Y H:i" }}
                                                </span>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    <td>{{ notification.created_at|date:"d/m/Y H:i" }}</td>
                                    <td>
                                        <a href="{% url 'notification:manager_detail' pk=notification.id %}" class="btn btn-sm btn-info">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <form method="post" action="{% url 'notification:manager_delete' pk=notification.id %}" class="d-inline" onsubmit="return confirm('{% trans 'Tem certeza que deseja deletar esta notificação?' %}');">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginação -->
                    {% if notifications.has_other_pages %}
                    <div class="mt-4">
                      {% with query_params=request.GET.urlencode %}
                        {% include 'includes/pagination.html' %}
                      {% endwith %}
                    </div>
                    {% endif %}
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-inbox" style="font-size: 3rem; color: #6f42c1; opacity: 0.5;"></i>
                        <p class="text-white-50 mt-3">{% trans "Nenhuma notificação encontrada" %}</p>
                        <a href="{% url 'notification:manager_create' %}" class="btn btn-primary mt-3">
                            <i class="bi bi-plus-circle me-2"></i>{% trans "Criar Primeira Notificação" %}
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}