{% extends "layouts/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>
    <span>Notifications</span>
  </div>
{% endblock %}

{% block content %}
<!-- New Notification Button -->
<div class="mb-3">
  <a href="{% url 'notifications:notification_create' %}" class="btn btn-primary">
    <i class="fas fa-plus me-2"></i> Send Notification
  </a>
</div>

<!-- Info Panel -->
<div class="alert alert-info mb-4" role="alert">
  <i class="fas fa-info-circle me-2"></i>
  <strong>Notification History:</strong> View all sent, pending, and failed notifications. Use filters to find specific notifications or monitor delivery status.
</div>

<!-- Statistics Cards -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-4">
  <!-- Delivered -->
  <div class="col">
    <div class="card h-100 shadow-sm">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="flex-shrink-0">
            <div class="d-flex align-items-center justify-content-center rounded bg-success" style="width:32px;height:32px;">
              <i class="fas fa-check text-white fs-6"></i>
            </div>
          </div>
          <div class="ms-3 flex-grow-1">
            <div class="small text-muted text-truncate">Delivered</div>
            <div class="fs-5 fw-semibold">{{ notifications|length }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Pending -->
  <div class="col">
    <div class="card h-100 shadow-sm">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="flex-shrink-0">
            <div class="d-flex align-items-center justify-content-center rounded bg-warning" style="width:32px;height:32px;">
              <i class="fas fa-clock text-white fs-6"></i>
            </div>
          </div>
          <div class="ms-3 flex-grow-1">
            <div class="small text-muted text-truncate">Pending</div>
            <div class="fs-5 fw-semibold">0</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Failed -->
  <div class="col">
    <div class="card h-100 shadow-sm">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="flex-shrink-0">
            <div class="d-flex align-items-center justify-content-center rounded bg-danger" style="width:32px;height:32px;">
              <i class="fas fa-exclamation-triangle text-white fs-6"></i>
            </div>
          </div>
          <div class="ms-3 flex-grow-1">
            <div class="small text-muted text-truncate">Failed</div>
            <div class="fs-5 fw-semibold">0</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Total Attempts -->
  <div class="col">
    <div class="card h-100 shadow-sm">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="flex-shrink-0">
            <div class="d-flex align-items-center justify-content-center rounded bg-info" style="width:32px;height:32px;">
              <i class="fas fa-paper-plane text-white fs-6"></i>
            </div>
          </div>
          <div class="ms-3 flex-grow-1">
            <div class="small text-muted text-truncate">Total Attempts</div>
            <div class="h5 mb-0 fw-bold text-dark">
              0
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Search and Filter -->
<div class="card shadow-sm mb-4">
  <div class="card-header bg-white border-bottom-0 py-3">
    <h6 class="m-0 fw-bold text-dark">Search & Filter</h6>
  </div>
  <div class="card-body">
            <form method="get" class="row g-3">
      <div class="col-md-4">
        <label for="search" class="form-label text-muted">Search</label>
        <input type="text" class="form-control" id="search" name="search" 
               value="{{ request.GET.search }}" placeholder="Search by recipient, subject, or message...">
      </div>
      <div class="col-md-3">
        <label for="status" class="form-label text-muted">Status</label>
        <select class="form-select" id="status" name="status">
          <option value="">All Statuses</option>
          <option value="pending" {% if request.GET.status == 'pending' %}selected{% endif %}>Pending</option>
          <option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Completed</option>
          <option value="failed" {% if request.GET.status == 'failed' %}selected{% endif %}>Failed</option>
        </select>
      </div>
      <div class="col-md-3">
        <label for="channel" class="form-label text-muted">Channel</label>
        <select class="form-select" id="channel" name="channel">
          <option value="">All Channels</option>
          <!-- Add channel options dynamically -->
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label">&nbsp;</label>
        <div class="d-grid">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-search"></i> Filter
          </button>
        </div>
      </div>
            </form>
        </div>
    </div>

<!-- Notifications List -->
<div class="card shadow-sm mb-4">
  <div class="card-header bg-white border-bottom-0 py-3">
    <h6 class="m-0 fw-bold text-dark">Notification History</h6>
  </div>
  <div class="card-body">
            {% if notifications %}
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Recipient</th>
                                <th>Subject</th>
                                <th>Channel</th>
                                <th>Status</th>
                                <th>Scheduled</th>
                                <th>Sent</th>
                                <th>Attempts</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for notification in notifications %}
                            <tr>
                                <td>
                                  <div class="d-flex align-items-center">
                                    <div class="me-3">
                                      <i class="fas fa-user-circle fa-2x text-muted"></i>
                                    </div>
                                    <div>
                                      <div class="fw-bold">{{ notification.recipient }}</div>
                                      {% if notification.template %}
                                        <div class="small text-muted">Template: {{ notification.template.name }}</div>
                                      {% endif %}
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <div class="fw-bold">{{ notification.subject|default:"No Subject" }}</div>
                                  <div class="small text-muted">{{ notification.message|truncatechars:50 }}</div>
                                </td>
                                <td>
                                  <span class="badge bg-info-subtle text-info-emphasis">{{ notification.channel.name }}</span>
                                  <div class="small text-muted">{{ notification.channel.get_channel_type_display }}</div>
                                </td>
                                <td>
                                  {% if notification.status == 'completed' %}
                                    <span class="badge bg-success-subtle text-success-emphasis">
                                      <i class="fas fa-check"></i> Delivered
                                    </span>
                                  {% elif notification.status == 'pending' %}
                                    <span class="badge bg-warning-subtle text-warning-emphasis">
                                      <i class="fas fa-clock"></i> Pending
                                    </span>
                                  {% elif notification.status == 'failed' %}
                                    <span class="badge bg-danger-subtle text-danger-emphasis">
                                      <i class="fas fa-times"></i> Failed
                                    </span>
                                  {% else %}
                                    <span class="badge bg-secondary-subtle text-secondary-emphasis">{{ notification.status|title }}</span>
                                  {% endif %}
                                </td>
                                <td>
                                  <div class="fw-bold">{{ notification.scheduled_at|date:"M d, Y" }}</div>
                                  <div class="small text-muted">{{ notification.scheduled_at|time:"H:i" }}</div>
                                </td>
                                <td>
                                  {% if notification.sent_at %}
                                    <div class="fw-bold">{{ notification.sent_at|date:"M d, Y" }}</div>
                                    <div class="small text-muted">{{ notification.sent_at|time:"H:i" }}</div>
                                  {% else %}
                                    <span class="text-muted">Not sent</span>
                                  {% endif %}
                                </td>
                                <td>
                                  <span class="badge {% if notification.delivery_attempts > 3 %}bg-danger-subtle text-danger-emphasis{% elif notification.delivery_attempts > 1 %}bg-warning-subtle text-warning-emphasis{% else %}bg-info-subtle text-info-emphasis{% endif %}">
                                    {{ notification.delivery_attempts }}
                                  </span>
                                </td>
                <td>
                  <div class="dropdown">
                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" 
                            data-bs-toggle="dropdown" aria-expanded="false">
                      Actions
                    </button>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="{% url 'notifications:notification_detail' notification.pk %}">
                        <i class="fas fa-eye"></i> View Details
                      </a></li>
                      {% if notification.status == 'failed' %}
                        <li><a class="dropdown-item" href="{% url 'notifications:notification_retry' notification.pk %}">
                          <i class="fas fa-redo"></i> Retry
                        </a></li>
                      {% endif %}
                      {% if notification.error_message %}
                        <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#errorModal{{ notification.pk }}">
                          <i class="fas fa-exclamation-triangle"></i> View Error
                        </a></li>
                      {% endif %}
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item text-danger" href="{% url 'notifications:notification_delete' notification.pk %}">
                        <i class="fas fa-trash"></i> Delete
                      </a></li>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Notifications pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% 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.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% 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.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% 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.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% 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.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                                    <i class="fas fa-angle-double-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
        <!-- Empty State -->
        <div class="text-center py-5">
          <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
          <h5 class="text-dark">No Notifications Found</h5>
          <p class="text-muted mb-4">
            {% if request.GET.search or request.GET.status %}
              No notifications match your current filters. Try adjusting your search criteria.
            {% else %}
              No notifications have been sent yet. Create your first notification to get started.
            {% endif %}
          </p>
          <div>
            {% if request.GET.search or request.GET.status %}
              <a href="{% url 'notifications:notification_list' %}" class="btn btn-outline-primary me-2">
                <i class="fas fa-times"></i> Clear Filters
              </a>
            {% endif %}
            <a href="{% url 'notifications:notification_create' %}" class="btn btn-primary">
              <i class="fas fa-plus"></i> Send Notification
            </a>
          </div>
        </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Error Modals -->
{% for notification in notifications %}
    {% if notification.error_message %}
    <div class="modal fade" id="errorModal{{ notification.pk }}" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel{{ notification.pk }}" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="errorModalLabel{{ notification.pk }}">Notification Error Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Notification:</strong></div>
                        <div class="col-sm-9">{{ notification.subject|default:"No Subject" }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Recipient:</strong></div>
                        <div class="col-sm-9">{{ notification.recipient }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Channel:</strong></div>
                        <div class="col-sm-9">{{ notification.channel.name }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Attempts:</strong></div>
                        <div class="col-sm-9">{{ notification.delivery_attempts }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3"><strong>Error Message:</strong></div>
                        <div class="col-sm-9">
                            <pre class="bg-light p-3 rounded">{{ notification.error_message }}</pre>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    {% if notification.status == 'failed' %}
                        <a href="{% url 'notifications:notification_retry' notification.pk %}" class="btn btn-primary">
                            <i class="fas fa-redo"></i> Retry Notification
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endfor %}

<script>
// Add DataTable functionality and other JavaScript enhancements
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh for pending notifications
    const hasPendingNotifications = document.querySelector('.badge-warning');
    if (hasPendingNotifications) {
        setTimeout(() => {
            window.location.reload();
        }, 30000); // Refresh every 30 seconds if there are pending notifications
    }
    
    // Add confirmation for delete actions
    const deleteLinks = document.querySelectorAll('a[href*="delete"]');
    deleteLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            if (!confirm('Are you sure you want to delete this notification? This action cannot be undone.')) {
                e.preventDefault();
            }
        });
    });
    
    // Add tooltips for status badges
    const statusBadges = document.querySelectorAll('.badge');
    statusBadges.forEach(badge => {
        if (badge.textContent.includes('Failed')) {
            badge.setAttribute('title', 'Notification delivery failed');
        } else if (badge.textContent.includes('Pending')) {
            badge.setAttribute('title', 'Notification is queued for delivery');
        } else if (badge.textContent.includes('Delivered')) {
            badge.setAttribute('title', 'Notification was successfully delivered');
        }
    });
});
</script>
{% endblock %}