{% extends "admin/base_admin.html" %}

{% block title %}Notification Center - Admin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-gradient-to-r from-red-500 via-pink-500 to-purple-600 rounded-3xl shadow-2xl overflow-hidden">
        <div class="px-8 py-8 relative">
            <div class="absolute inset-0 bg-black/10">
                <div class="absolute inset-0" style="background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%);"></div>
            </div>
            <div class="relative">
                <h1 class="text-3xl font-black text-white mb-2">
                    <i class="fas fa-bell mr-3"></i>Notification Center
                </h1>
                <p class="text-pink-100 text-lg">System alerts and important updates for {{ group.name }}</p>
            </div>
        </div>
    </div>

    <!-- Notification Summary -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        {% set high_priority = notifications|selectattr('priority', 'equalto', 'high')|list %}
        {% set medium_priority = notifications|selectattr('priority', 'equalto', 'medium')|list %}
        {% set low_priority = notifications|selectattr('priority', 'equalto', 'low')|list %}
        
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-white"></i>
                </div>
                <span class="text-2xl font-bold text-red-600">{{ high_priority|length }}</span>
            </div>
            <h3 class="text-lg font-bold text-gray-900 mt-4">High Priority</h3>
            <p class="text-sm text-gray-600">Requires immediate attention</p>
        </div>

        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-2xl flex items-center justify-center">
                    <i class="fas fa-exclamation-circle text-white"></i>
                </div>
                <span class="text-2xl font-bold text-yellow-600">{{ medium_priority|length }}</span>
            </div>
            <h3 class="text-lg font-bold text-gray-900 mt-4">Medium Priority</h3>
            <p class="text-sm text-gray-600">Review when convenient</p>
        </div>

        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center">
                    <i class="fas fa-info-circle text-white"></i>
                </div>
                <span class="text-2xl font-bold text-green-600">{{ low_priority|length }}</span>
            </div>
            <h3 class="text-lg font-bold text-gray-900 mt-4">Low Priority</h3>
            <p class="text-sm text-gray-600">Informational updates</p>
        </div>

        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center">
                    <i class="fas fa-list text-white"></i>
                </div>
                <span class="text-2xl font-bold text-blue-600">{{ notifications|length }}</span>
            </div>
            <h3 class="text-lg font-bold text-gray-900 mt-4">Total</h3>
            <p class="text-sm text-gray-600">All notifications</p>
        </div>
    </div>

    <!-- Notifications List -->
    <div class="space-y-4">
        {% if notifications %}
            {% for notification in notifications %}
            <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden 
                        {% if notification.priority == 'high' %}border-l-4 border-l-red-500
                        {% elif notification.priority == 'medium' %}border-l-4 border-l-yellow-500
                        {% else %}border-l-4 border-l-blue-500{% endif %}">
                
                <div class="p-6">
                    <div class="flex items-start justify-between">
                        <div class="flex items-start space-x-4">
                            <!-- Icon -->
                            <div class="flex-shrink-0 mt-1">
                                {% if notification.type == 'warning' %}
                                <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-2xl flex items-center justify-center">
                                    <i class="fas fa-exclamation-triangle text-white"></i>
                                </div>
                                {% elif notification.type == 'error' %}
                                <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center">
                                    <i class="fas fa-times-circle text-white"></i>
                                </div>
                                {% elif notification.type == 'success' %}
                                <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center">
                                    <i class="fas fa-check-circle text-white"></i>
                                </div>
                                {% else %}
                                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center">
                                    <i class="fas fa-info-circle text-white"></i>
                                </div>
                                {% endif %}
                            </div>
                            
                            <!-- Content -->
                            <div class="flex-1">
                                <div class="flex items-center space-x-3 mb-2">
                                    <h3 class="text-lg font-bold text-gray-900">{{ notification.title }}</h3>
                                    
                                    <!-- Priority Badge -->
                                    {% if notification.priority == 'high' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-800 border border-red-300">
                                        <i class="fas fa-bolt mr-1"></i>High Priority
                                    </span>
                                    {% elif notification.priority == 'medium' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-yellow-100 text-yellow-800 border border-yellow-300">
                                        <i class="fas fa-clock mr-1"></i>Medium Priority
                                    </span>
                                    {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-100 text-blue-800 border border-blue-300">
                                        <i class="fas fa-info mr-1"></i>Low Priority
                                    </span>
                                    {% endif %}
                                </div>
                                
                                <p class="text-gray-700 mb-4">{{ notification.message }}</p>
                                
                                <!-- Metrics -->
                                {% if notification.count is defined %}
                                <div class="flex items-center space-x-4 mb-4">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-hashtag text-gray-600 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-semibold text-gray-900">Count</p>
                                            <p class="text-lg font-bold text-gray-800">{{ notification.count }}</p>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Actions -->
                        <div class="flex items-center space-x-3">
                            {% if notification.action_url %}
                            <a href="{{ notification.action_url }}" 
                               class="inline-flex items-center px-4 py-2 bg-gradient-to-r 
                                      {% if notification.priority == 'high' %}from-red-500 to-red-600 hover:from-red-600 hover:to-red-700
                                      {% elif notification.priority == 'medium' %}from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700
                                      {% else %}from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700{% endif %}
                                      text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300">
                                <i class="fas fa-arrow-right mr-2"></i>
                                {{ notification.action_text or 'View Details' }}
                            </a>
                            {% endif %}
                            
                            <!-- Dismiss Button -->
                            <button class="w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-xl flex items-center justify-center transition-colors duration-200">
                                <i class="fas fa-times text-gray-600"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <!-- No Notifications -->
            <div class="bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden">
                <div class="px-8 py-12 text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-green-400 to-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-check text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-2">All Clear!</h3>
                    <p class="text-gray-600 text-lg">No notifications at this time. Your group is running smoothly.</p>
                    
                    <div class="mt-8 flex justify-center space-x-4">
                        <a href="{{ url_for('admin_dashboard') }}" 
                           class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300">
                            <i class="fas fa-tachometer-alt mr-2"></i>
                            Dashboard
                        </a>
                        <a href="{{ url_for('admin_members') }}" 
                           class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300">
                            <i class="fas fa-users mr-2"></i>
                            View Members
                        </a>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-bolt text-yellow-500 mr-3"></i>
                Quick Actions
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <button class="flex items-center justify-center space-x-3 p-4 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-2xl border border-blue-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-envelope text-white"></i>
                    </div>
                    <span class="font-semibold text-gray-900">Send Reminders</span>
                </button>

                <button class="flex items-center justify-center space-x-3 p-4 bg-gradient-to-r from-green-50 to-emerald-100 rounded-2xl border border-green-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group">
                    <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-file-alt text-white"></i>
                    </div>
                    <span class="font-semibold text-gray-900">Generate Report</span>
                </button>

                <button class="flex items-center justify-center space-x-3 p-4 bg-gradient-to-r from-purple-50 to-violet-100 rounded-2xl border border-purple-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group">
                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-cog text-white"></i>
                    </div>
                    <span class="font-semibold text-gray-900">System Settings</span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-refresh notifications every 30 seconds
setInterval(function() {
    // Optional: Add AJAX refresh functionality
}, 30000);

// Dismiss notification functionality
document.querySelectorAll('[data-dismiss]').forEach(button => {
    button.addEventListener('click', function() {
        const notification = this.closest('.notification');
        if (notification) {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }
    });
});
</script>
{% endblock %}