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

{% block title %}Notifications - Stream Processor{% endblock %}

{% block page_title %}
    <div class="d-flex align-items-center">
        <i class="fas fa-envelope me-3 text-primary"></i>
        Notifications
    </div>
{% endblock %}

{% block content %}
<!-- Header -->
<div class="mb-4">
    <div class="card shadow-sm">
        <div class="card-body border-bottom">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h2 fw-bold text-dark mb-1">Notifications</h1>
                    <p class="text-muted small mb-0">View and manage notification delivery history</p>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-secondary btn-sm d-flex align-items-center">
                        <i class="fas fa-sync me-2"></i>
                        Refresh
                    </button>
                    <button class="btn btn-outline-secondary btn-sm d-flex align-items-center">
                        <i class="fas fa-download me-2"></i>
                        Export
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Stats -->
<div class="mb-4">
    <div class="row g-3">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-paper-plane text-primary"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Total Sent</p>
                            <p class="h3 fw-bold text-dark mb-0">{{ notifications|length|default:0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-clock text-warning"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Pending</p>
                            <p class="h3 fw-bold text-dark mb-0">
                                {% for notification in notifications %}{% if notification.status == 'pending' %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-check text-success"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Delivered</p>
                            <p class="h3 fw-bold text-dark mb-0">
                                {% for notification in notifications %}{% if notification.status == 'completed' %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-times text-danger"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Failed</p>
                            <p class="h3 fw-bold text-dark mb-0">
                                {% for notification in notifications %}{% if notification.status == 'failed' %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<!-- Search and Filters -->
<div class="card shadow-sm mb-4">
    <div class="card-body">
        <form method="get">
            <div class="row g-3">
                <!-- Search -->
                <div class="col-md-6">
                    <label for="search" class="form-label fw-medium text-dark">
                        Search Notifications
                    </label>
                    <div class="position-relative">
                        <div class="position-absolute top-50 start-0 translate-middle-y ps-3">
                            <i class="fas fa-search text-muted"></i>
                        </div>
                        <input type="text" 
                               name="search" 
                               id="search"
                               value="{{ search }}"
                               class="form-control ps-5"
                               placeholder="Search by message, channel, or recipient...">
                    </div>
                </div>
                
                <!-- Status Filter -->
                <div class="col-md-3">
                    <label for="status" class="form-label fw-medium text-dark">
                        Status
                    </label>
                    <select id="status" name="status" class="form-select">
                        <option value="">All Statuses</option>
                        <option value="pending">Pending</option>
                        <option value="completed">Delivered</option>
                        <option value="failed">Failed</option>
                    </select>
                </div>
                
                <!-- Date Range Filter -->
                <div class="col-md-3">
                    <label for="date_range" class="form-label fw-medium text-dark">
                        Date Range
                    </label>
                    <select id="date_range" name="date_range" class="form-select">
                        <option value="">All Time</option>
                        <option value="today">Today</option>
                        <option value="week">This Week</option>
                        <option value="month">This Month</option>
                    </select>
                </div>
            </div>
            
            <div class="d-flex gap-2 mt-3">
                <button type="submit" 
                        class="btn btn-primary d-flex align-items-center">
                    <i class="fas fa-search me-2"></i>
                    Filter
                </button>
                <a href="{% url 'notifications:notification_list' %}" 
                   class="btn btn-outline-secondary d-flex align-items-center">
                    <i class="fas fa-times me-2"></i>
                    Clear
                </a>
            </div>
        </form>
    </div>
</div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-white border rounded p-4">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-paper-plane text-lg text-blue-600"></i>
                </div>
                <div class="ml-4 w-0 flex-1">
                    <dl>
                        <dt class="text-sm text-gray-500 truncate">Total Sent</dt>
                        <dd class="text-lg">{{ notifications|length }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-clock fs-4 text-warning"></i>
                            </div>
                        </div>
                        <div class="ms-3 flex-fill">
                            <h6 class="text-muted mb-1">Pending</h6>
                            <h4 class="mb-0">
                                {% for notification in notifications %}
                                    {% if notification.status == 'pending' %}{{ forloop.counter0|add:1 }}{% endif %}
                                {% empty %}0{% endfor %}
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-check-circle fs-4 text-success"></i>
                            </div>
                        </div>
                        <div class="ms-3 flex-fill">
                            <h6 class="text-muted mb-1">Delivered</h6>
                            <h4 class="mb-0">
                                {% for notification in notifications %}
                                    {% if notification.status == 'completed' %}{{ forloop.counter0|add:1 }}{% endif %}
                                {% empty %}0{% endfor %}
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-danger bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-exclamation-triangle fs-4 text-danger"></i>
                            </div>
                        </div>
                        <div class="ms-3 flex-fill">
                            <h6 class="text-muted mb-1">Failed</h6>
                            <h4 class="mb-0">
                                {% for notification in notifications %}
                                    {% if notification.status == 'failed' %}{{ forloop.counter0|add:1 }}{% endif %}
                                {% empty %}0{% endfor %}
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notifications List -->
    <div class="card shadow-sm">
        {% if notifications %}
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h3 class="h5 mb-0">
                        Recent Notifications
                    </h3>
                    <span class="badge bg-primary">
                        {{ notifications.count }} notification{{ notifications.count|pluralize }}
                    </span>
                </div>
                
                <div class="row g-4">
                    {% for notification in notifications %}
                    <div class="col-12">
                        <div class="card border">
                            <div class="card-body">
                                <div class="d-flex align-items-start justify-content-between">
                                    <div class="flex-fill">
                                        <div class="d-flex align-items-center gap-3 mb-2">
                                            <div class="d-flex align-items-center gap-2">
                                                {% if notification.status == 'completed' %}
                                                    <span class="badge bg-success">
                                                        <i class="fas fa-check-circle me-1"></i>
                                                        Delivered
                                                    </span>
                                                {% elif notification.status == 'pending' %}
                                                    <span class="badge bg-warning">
                                                        <i class="fas fa-clock me-1"></i>
                                                        Pending
                                                    </span>
                                                {% elif notification.status == 'failed' %}
                                                    <span class="badge bg-danger">
                                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                                        Failed
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-secondary">
                                                        <i class="fas fa-question-circle me-1"></i>
                                                        {{ notification.status|title }}
                                                    </span>
                                                {% endif %}
                                                
                                                <span class="badge bg-primary bg-opacity-10 text-primary">
                                                    <i class="fas fa-{{ notification.channel.channel_type|default:'bell' }} me-1"></i>
                                                    {{ notification.channel.name }}
                                                </span>
                                            </div>
                                            
                                            <div class="text-muted small">
                                                <i class="fas fa-clock me-1"></i>
                                                {{ notification.scheduled_at|timesince }} ago
                                            </div>
                                        </div>
                                
                                        <div class="mb-3">
                                            {% if notification.subject %}
                                                <h6 class="mb-1">{{ notification.subject }}</h6>
                                            {% endif %}
                                            <p class="text-muted small mb-0">{{ notification.message|truncatechars:200 }}</p>
                                        </div>
                                        
                                        <div class="row g-3 small text-muted">
                                            <div class="col-12 col-md-4">
                                                <span class="fw-medium text-dark">Recipient:</span>
                                                <div class="mt-1">{{ notification.recipient }}</div>
                                            </div>
                                            
                                            {% if notification.template %}
                                            <div class="col-12 col-md-4">
                                                <span class="fw-medium text-dark">Template:</span>
                                                <div class="mt-1">{{ notification.template.name }}</div>
                                            </div>
                                            {% endif %}
                                            
                                            <div class="col-12 col-md-4">
                                                <span class="fw-medium text-dark">Attempts:</span>
                                                <div class="mt-1">{{ notification.delivery_attempts }}</div>
                                            </div>
                                        </div>
                                
                                        {% if notification.sent_at %}
                                        <div class="mt-3 small text-muted">
                                            <i class="fas fa-paper-plane me-1"></i>
                                            Delivered: {{ notification.sent_at|timesince }} ago
                                            {% if notification.external_id %}
                                                (ID: {{ notification.external_id }})
                                            {% endif %}
                                        </div>
                                        {% endif %}
                                        
                                        {% if notification.error_message %}
                                        <div class="mt-3 p-3 bg-danger bg-opacity-10 border border-danger rounded">
                                            <div class="d-flex">
                                                <div class="flex-shrink-0">
                                                    <i class="fas fa-exclamation-triangle text-danger"></i>
                                                </div>
                                                <div class="ms-3">
                                                    <h6 class="text-danger mb-1">Error Message</h6>
                                                    <div class="small text-danger">
                                                        {{ notification.error_message }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="d-flex align-items-center gap-2 ms-4">
                                        <button class="btn btn-sm btn-outline-secondary" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        {% if notification.can_retry %}
                                            <button class="btn btn-sm btn-outline-success" title="Retry Delivery">
                                                <i class="fas fa-redo"></i>
                                            </button>
                                        {% endif %}
                                        <button class="btn btn-sm btn-outline-danger" title="Delete Notification">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            <!-- Pagination -->
            {% if is_paginated %}
            <div class="card-footer bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex justify-content-between d-sm-none flex-fill">
                        {% if page_obj.has_previous %}
                            <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-outline-secondary btn-sm">
                                Previous
                            </a>
                        {% endif %}
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}" class="btn btn-outline-secondary btn-sm">
                                Next
                            </a>
                        {% endif %}
                    </div>
                    <div class="d-none d-sm-flex flex-fill align-items-center justify-content-between">
                        <div>
                            <p class="text-muted small mb-0">
                                Showing
                                <span>{{ page_obj.start_index }}</span>
                                to
                                <span>{{ page_obj.end_index }}</span>
                                of
                                <span>{{ paginator.count }}</span>
                                results
                            </p>
                        </div>
                        <div>
                            <nav aria-label="Pagination">
                                <ul class="pagination pagination-sm mb-0">
                                    {% if page_obj.has_previous %}
                                        <li class="page-item">
                                            <a href="?page={{ page_obj.previous_page_number }}" class="page-link">
                                                <i class="fas fa-chevron-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>
                                        {% else %}
                                            <li class="page-item">
                                                <a href="?page={{ num }}" class="page-link">{{ num }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                    
                                    {% if page_obj.has_next %}
                                        <li class="page-item">
                                            <a href="?page={{ page_obj.next_page_number }}" class="page-link">
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% else %}
            <div class="card-body text-center py-5">
                <div class="mx-auto mb-3" style="width: 48px; height: 48px;">
                    <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center h-100">
                        <i class="fas fa-envelope text-primary fs-4"></i>
                    </div>
                </div>
                <h5 class="mb-1">No notifications</h5>
                <p class="text-muted small mb-3">No notifications have been sent yet</p>
                <div>
                    <a href="{% url 'notifications:rule_list' %}" class="btn btn-primary btn-sm">
                        <i class="fas fa-bell me-2"></i>
                        Configure Notification Rules
                    </a>
                </div>
            </div>
        {% endif %}
    </div>

    <!-- Information Panel -->
    <div class="alert alert-info">
        <div class="d-flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle"></i>
            </div>
            <div class="ms-3">
                <h6 class="alert-heading">About Notifications</h6>
                <div class="small">
                    <p class="mb-2">This page shows the delivery history of all notifications sent by the system. Each notification includes:</p>
                    <ul class="mb-0">
                        <li>Status - Whether the notification was delivered, is pending, or failed</li>
                        <li>Channel - The delivery method used (Telegram, email, webhook, etc.)</li>
                        <li>Recipient - The target recipient identifier</li>
                        <li>Template - The message template used for formatting</li>
                        <li>Delivery Attempts - Number of times delivery was attempted</li>
                        <li>Error Messages - Details about any delivery failures</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle filter changes
        const statusFilter = document.getElementById('status');
        const channelFilter = document.getElementById('channel');
        const dateRangeFilter = document.getElementById('date_range');
        
        function applyFilters() {
            const params = new URLSearchParams(window.location.search);
            
            if (statusFilter.value) {
                params.set('status', statusFilter.value);
            } else {
                params.delete('status');
            }
            
            if (channelFilter.value) {
                params.set('channel', channelFilter.value);
            } else {
                params.delete('channel');
            }
            
            if (dateRangeFilter.value) {
                params.set('date_range', dateRangeFilter.value);
            } else {
                params.delete('date_range');
            }
            
            window.location.search = params.toString();
        }
        
        document.querySelector('.fa-filter').parentElement.addEventListener('click', applyFilters);
        
        // Handle notification actions
        document.querySelectorAll('.fa-trash').forEach(function(button) {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                if (confirm('Are you sure you want to delete this notification?')) {
                    // Handle deletion
                    console.log('Delete notification');
                }
            });
        });
        
        document.querySelectorAll('.fa-redo').forEach(function(button) {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                if (confirm('Retry sending this notification?')) {
                    // Handle retry
                    console.log('Retry notification');
                }
            });
        });
        
        // Auto-refresh functionality
        document.querySelector('.fa-sync').parentElement.addEventListener('click', function() {
            window.location.reload();
        });
    });
</script>
{% endblock %}