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

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

{% block extrastyle %}
<style>
.manager-bg { 
    background: radial-gradient(ellipse at center, #0f172a 0%, #1a1a2e 50%, #0f0f1e 100%); 
    min-height: 100vh; 
    padding: 40px 0; 
    position: relative;
}
.manager-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(111, 66, 193, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(13, 202, 240, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.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),
        0 0 0 1px rgba(111, 66, 193, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}
.card-glow:hover {
    border-color: rgba(111, 66, 193, 0.6);
    box-shadow: 
        0 12px 40px rgba(111, 66, 193, 0.3),
        0 0 0 1px rgba(111, 66, 193, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.stat-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover::before {
    transform: scaleX(1);
}
.stat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
}
.stat-value {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 0%, #a8b4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 8px;
}
.stat-label {
    font-size: 0.95rem;
    opacity: 0.85;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-action {
    background: linear-gradient(135deg, #6f42c1 0%, #0dcaf0 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4);
    position: relative;
    overflow: hidden;
}
.btn-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(111, 66, 193, 0.6);
    color: white;
}

.btn-solid-white {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
.btn-solid-white:hover {
    background: #f8f9fa !important;
    color: #1a1a2e !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.page-header h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #a8b4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.notification-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    transition: background 0.3s ease;
}
.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
</style>
{% endblock %}

{% block content %}
<div class="manager-bg">
    <div class="container">
        <!-- Header -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-5">
            <div class="page-header mb-3 mb-md-0">
                <h2 class="mb-2">
                    <i class="bi bi-bell-fill text-info me-2"></i>
                    {% trans "Gerenciador de Notificações" %}
                </h2>
                <p class="text-white-50 mb-0">{% trans "Gerencie notificações e prêmios do sistema" %}</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{% url 'config_hub' %}" class="btn btn-solid-white">
                    <i class="bi bi-arrow-left me-2"></i>{% trans "Voltar" %}
                </a>
                <a href="{% url 'notification:manager_create' %}" class="btn-action position-relative">
                    <i class="bi bi-plus-circle me-2"></i>{% trans "Nova Notificação" %}
                </a>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row g-4 mb-5">
            <div class="col-6 col-md-3">
                <div class="stat-card text-center position-relative">
                    <i class="bi bi-bell" style="font-size: 2rem; opacity: 0.3; position: absolute; top: 10px; right: 15px;"></i>
                    <div class="stat-value">{{ total_notifications }}</div>
                    <div class="stat-label">{% trans "Total" %}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-card text-center position-relative">
                    <i class="bi bi-bell-slash" style="font-size: 2rem; opacity: 0.3; position: absolute; top: 10px; right: 15px;"></i>
                    <div class="stat-value">{{ unread_notifications }}</div>
                    <div class="stat-label">{% trans "Não Lidas" %}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-card text-center position-relative">
                    <i class="bi bi-gift" style="font-size: 2rem; opacity: 0.3; position: absolute; top: 10px; right: 15px;"></i>
                    <div class="stat-value">{{ notifications_with_rewards }}</div>
                    <div class="stat-label">{% trans "Com Prêmios" %}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-card text-center position-relative">
                    <i class="bi bi-check-circle" style="font-size: 2rem; opacity: 0.3; position: absolute; top: 10px; right: 15px;"></i>
                    <div class="stat-value">{{ total_rewards_claimed }}</div>
                    <div class="stat-label">{% trans "Prêmios Reclamados" %}</div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="row g-4 mb-5">
            <div class="col-md-6">
                <div class="card card-glow">
                    <div class="card-header bg-transparent border-bottom">
                        <h5 class="text-white mb-0 d-flex align-items-center">
                            <i class="bi bi-list-ul me-2 text-info" style="font-size: 1.5rem;"></i>
                            {% trans "Todas as Notificações" %}
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-white-50 mb-4" style="line-height: 1.6;">
                            {% trans "Visualize, edite e gerencie todas as notificações do sistema." %}
                        </p>
                        <a href="{% url 'notification:manager_list' %}" class="btn btn-outline-info w-100">
                            <i class="bi bi-list-ul me-2"></i>{% trans "Ver Lista Completa" %}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-glow">
                    <div class="card-header bg-transparent border-bottom">
                        <h5 class="text-white mb-0 d-flex align-items-center">
                            <i class="bi bi-plus-circle me-2 text-success" style="font-size: 1.5rem;"></i>
                            {% trans "Criar Notificação" %}
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-white-50 mb-4" style="line-height: 1.6;">
                            {% trans "Crie novas notificações com ou sem prêmios para usuários específicos ou públicos." %}
                        </p>
                        <a href="{% url 'notification:manager_create' %}" class="btn btn-outline-success w-100">
                            <i class="bi bi-plus-circle me-2"></i>{% trans "Criar Nova" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Notifications -->
        <div class="card card-glow mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="text-white mb-0 d-flex align-items-center">
                    <i class="bi bi-clock-history me-2 text-warning" style="font-size: 1.5rem;"></i>
                    {% trans "Notificações Recentes" %}
                </h5>
            </div>
            <div class="card-body p-0">
                {% if recent_notifications %}
                    {% for notification in recent_notifications %}
                    <div class="notification-item">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <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>
                                    {% if notification.rewards.exists %}
                                        <span class="badge bg-success">
                                            <i class="bi bi-gift me-1"></i>{% trans "Com Prêmios" %}
                                        </span>
                                    {% endif %}
                                    {% if not notification.viewed %}
                                        <span class="badge bg-warning">{% trans "Não Lida" %}</span>
                                    {% endif %}
                                </div>
                                <p class="text-white mb-1">{{ notification.message|truncatewords:15 }}</p>
                                <small class="text-white-50">
                                    {% if notification.user %}
                                        {% trans "Para:" %} {{ notification.user.username }}
                                    {% else %}
                                        {% trans "Pública" %}
                                    {% endif %}
                                    • {{ notification.created_at|date:"d/m/Y H:i" }}
                                </small>
                            </div>
                            <div>
                                <a href="{% url 'notification:manager_detail' pk=notification.id %}" class="btn btn-sm btn-outline-info">
                                    <i class="bi bi-eye me-1"></i>{% trans "Ver" %}
                                </a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% 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>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Top Rewards -->
        {% if top_rewards %}
        <div class="card card-glow">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="text-white mb-0 d-flex align-items-center">
                    <i class="bi bi-trophy me-2 text-warning" style="font-size: 1.5rem;"></i>
                    {% trans "Prêmios Mais Entregues" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-dark table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Item" %}</th>
                                <th>{% trans "Quantidade de Vezes" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for reward in top_rewards %}
                            <tr>
                                <td>
                                    <strong>{{ reward.item_name }}</strong>
                                    <br>
                                    <small class="text-white-50">ID: {{ reward.item_id }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-warning">{{ reward.total_amount }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}