{% extends 'notifications/base.html' %}
{% load static %}

{% block title %}Notifications - AdTlas{% endblock %}

{% block extra_css %}
<style>
    .notification-item {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }
    .notification-item.unread {
        background-color: #f8f9fa;
        border-left-color: #007bff;
    }
    .notification-item:hover {
        background-color: #e9ecef;
        transform: translateX(5px);
    }
    .notification-actions {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .notification-item:hover .notification-actions {
        opacity: 1;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0">
                    <i class="fas fa-bell text-primary me-2"></i>
                    Notifications
                </h1>
                <p class="text-muted mb-0">Manage your notifications and preferences</p>
            </div>
            <div>
                <a href="{% url 'notifications:preferences' %}" class="btn btn-outline-primary me-2">
                    <i class="fas fa-cog me-1"></i>Settings
                </a>
                {% if unread_notifications %}
                <button type="button" class="btn btn-primary" id="markAllReadBtn">
                    <i class="fas fa-check-double me-1"></i>Mark All Read
                </button>
                {% endif %}
            </div>
        </div>
        
        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">{{ total_count }}</h5>
                                <p class="card-text">Total Notifications</p>
                            </div>
                            <i class="fas fa-bell fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">{{ unread_count }}</h5>
                                <p class="card-text">Unread</p>
                            </div>
                            <i class="fas fa-envelope fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">{{ read_count }}</h5>
                                <p class="card-text">Read</p>
                            </div>
                            <i class="fas fa-envelope-open fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">{{ today_count }}</h5>
                                <p class="card-text">Today</p>
                            </div>
                            <i class="fas fa-calendar-day fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label for="status" class="form-label">Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="">All</option>
                            <option value="unread" {% if request.GET.status == 'unread' %}selected{% endif %}>Unread</option>
                            <option value="read" {% if request.GET.status == 'read' %}selected{% endif %}>Read</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="type" class="form-label">Type</label>
                        <select name="type" id="type" class="form-select">
                            <option value="">All Types</option>
                            {% for notification_type in notification_types %}
                            <option value="{{ notification_type.code }}" 
                                    {% if request.GET.type == notification_type.code %}selected{% endif %}>
                                {{ notification_type.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="priority" class="form-label">Priority</label>
                        <select name="priority" id="priority" class="form-select">
                            <option value="">All Priorities</option>
                            <option value="5" {% if request.GET.priority == '5' %}selected{% endif %}>Critical</option>
                            <option value="4" {% if request.GET.priority == '4' %}selected{% endif %}>High</option>
                            <option value="3" {% if request.GET.priority == '3' %}selected{% endif %}>Normal</option>
                            <option value="2" {% if request.GET.priority == '2' %}selected{% endif %}>Low</option>
                            <option value="1" {% if request.GET.priority == '1' %}selected{% endif %}>Very Low</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="search" class="form-label">Search</label>
                        <div class="input-group">
                            <input type="text" name="search" id="search" class="form-control" 
                                   placeholder="Search notifications..." value="{{ request.GET.search }}">
                            <button type="submit" class="btn btn-outline-secondary">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Notifications List -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-list me-2"></i>
                    Notifications
                    {% if notifications.count %}
                    <span class="badge bg-secondary ms-2">{{ notifications.count }}</span>
                    {% endif %}
                </h5>
            </div>
            <div class="card-body p-0">
                {% if notifications %}
                <div class="list-group list-group-flush">
                    {% for notification in notifications %}
                    <div class="list-group-item notification-item {% if not notification.is_read %}unread{% endif %}" 
                         data-notification-id="{{ notification.pk }}">
                        <div class="d-flex align-items-start">
                            <!-- Icon -->
                            <div class="me-3">
                                <i class="{{ notification.notification_type.icon }} 
                                   text-{{ notification.notification_type.color }} fa-lg"></i>
                            </div>
                            
                            <!-- Content -->
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <h6 class="mb-0 fw-bold">
                                        <a href="{% url 'notifications:detail' notification.pk %}" 
                                           class="text-decoration-none text-dark">
                                            {{ notification.title }}
                                        </a>
                                        {% if not notification.is_read %}
                                        <span class="badge bg-primary ms-2">New</span>
                                        {% endif %}
                                    </h6>
                                    <small class="text-muted">{{ notification.created_at|timesince }} ago</small>
                                </div>
                                
                                <p class="mb-1 text-muted">{{ notification.message|truncatechars:150 }}</p>
                                
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="badge bg-{{ notification.notification_type.color }}">
                                            {{ notification.notification_type.name }}
                                        </span>
                                        {% if notification.notification_type.priority >= 4 %}
                                        <span class="badge bg-danger ms-1">
                                            <i class="fas fa-exclamation-triangle me-1"></i>High Priority
                                        </span>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Actions -->
                                    <div class="notification-actions">
                                        {% if not notification.is_read %}
                                        <button type="button" class="btn btn-sm btn-outline-primary mark-read-btn" 
                                                data-notification-id="{{ notification.pk }}">
                                            <i class="fas fa-check me-1"></i>Mark Read
                                        </button>
                                        {% endif %}
                                        <button type="button" class="btn btn-sm btn-outline-danger archive-btn" 
                                                data-notification-id="{{ notification.pk }}">
                                            <i class="fas fa-archive me-1"></i>Archive
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Pagination -->
                {% if is_paginated %}
                <div class="card-footer">
                    <nav aria-label="Notifications pagination">
                        <ul class="pagination justify-content-center mb-0">
                            {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">
                                    <i class="fas fa-angle-double-left"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">
                                    <i class="fas fa-angle-left"></i>
                                </a>
                            </li>
                            {% endif %}
                            
                            {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ num }}</a>
                            </li>
                            {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">
                                    <i class="fas fa-angle-double-right"></i>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
                {% endif %}
                
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No notifications found</h5>
                    <p class="text-muted">You don't have any notifications matching the current filters.</p>
                    {% if request.GET.status or request.GET.type or request.GET.priority or request.GET.search %}
                    <a href="{% url 'notifications:list' %}" class="btn btn-outline-primary">
                        <i class="fas fa-times me-1"></i>Clear Filters
                    </a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Mark single notification as read
$('.mark-read-btn').on('click', function() {
    const notificationId = $(this).data('notification-id');
    const button = $(this);
    const notificationItem = $(this).closest('.notification-item');
    
    $.ajax({
        url: `/notifications/${notificationId}/mark-read/`,
        method: 'POST',
        headers: {
            'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(response) {
            if (response.success) {
                notificationItem.removeClass('unread');
                button.remove();
                // Update counters
                location.reload();
            }
        },
        error: function() {
            alert('Error marking notification as read');
        }
    });
});

// Mark all notifications as read
$('#markAllReadBtn').on('click', function() {
    if (confirm('Mark all notifications as read?')) {
        $.ajax({
            url: '{% url "notifications:mark_all_read" %}',
            method: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                }
            },
            error: function() {
                alert('Error marking all notifications as read');
            }
        });
    }
});

// Archive notification
$('.archive-btn').on('click', function() {
    const notificationId = $(this).data('notification-id');
    const notificationItem = $(this).closest('.notification-item');
    
    if (confirm('Archive this notification?')) {
        $.ajax({
            url: `/notifications/${notificationId}/archive/`,
            method: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                if (response.success) {
                    notificationItem.fadeOut(300, function() {
                        $(this).remove();
                    });
                }
            },
            error: function() {
                alert('Error archiving notification');
            }
        });
    }
});
</script>
{% endblock %}