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

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

{% block content %}
<div class="d-flex flex-column gap-4">

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-start align-items-md-center flex-column flex-md-row gap-3">
    <div>
      <h1 class="h4 fw-bold text-dark d-flex align-items-center mb-1">
        <i class="fas fa-envelope me-2 text-primary"></i>
        Notifications
      </h1>
      <p class="text-muted small mb-0">View and manage notification delivery history</p>
    </div>
    <div class="d-flex gap-2">
      <button id="refreshBtn" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center">
        <i class="fas fa-sync me-2"></i>Refresh
      </button>
    </div>
  </div>

  <!-- Filters -->
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-12 col-md-4">
          <label for="status" class="form-label small mb-1">Status</label>
          <select id="status" class="form-select form-select-sm">
            <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 %}>Sent</option>
            <option value="failed"   {% if request.GET.status == "failed" %}selected{% endif %}>Failed</option>
          </select>
        </div>

        <div class="col-12 col-md-4">
          <label for="channel" class="form-label small mb-1">Channel</label>
          <select id="channel" class="form-select form-select-sm">
            <option value="">All Channels</option>
            {% for ch in channels %}
              <option value="{{ ch.id }}" {% if request.GET.channel == ch.id|stringformat:"s" %}selected{% endif %}>
                {{ ch.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-12 col-md-3">
          <label for="date_range" class="form-label small mb-1">Date Range</label>
          <select id="date_range" class="form-select form-select-sm">
            <option value="">All Time</option>
            <option value="today" {% if request.GET.date_range == "today" %}selected{% endif %}>Today</option>
            <option value="week"  {% if request.GET.date_range == "week" %}selected{% endif %}>This Week</option>
            <option value="month" {% if request.GET.date_range == "month" %}selected{% endif %}>This Month</option>
          </select>
        </div>

        <div class="col-12 col-md-1 d-flex gap-2">
          <button id="applyFiltersBtn" class="btn btn-outline-secondary btn-sm w-100">
            <i class="fas fa-filter me-1"></i>Apply
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Statistics -->
  <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 d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-paper-plane fs-4 text-primary"></i>
          </div>
          <div>
            <div class="text-muted small">Total Sent</div>
            <div class="fw-semibold">{{ notifications|length }}</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 d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-clock fs-4 text-warning"></i>
          </div>
          <div>
            <div class="text-muted small">Pending</div>
            <div class="fw-semibold">
              {% for n in notifications %}{% if n.status == 'pending' %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
            </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 d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-check-circle fs-4 text-success"></i>
          </div>
          <div>
            <div class="text-muted small">Delivered</div>
            <div class="fw-semibold">
              {% for n in notifications %}{% if n.status == 'completed' %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
            </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 d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-exclamation-triangle fs-4 text-danger"></i>
          </div>
          <div>
            <div class="text-muted small">Failed</div>
            <div class="fw-semibold">
              {% for n in notifications %}{% if n.status == 'failed' %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Notifications List -->
  <div class="card shadow-sm">
    {% if notifications %}
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h3 class="h6 mb-0">Recent Notifications</h3>
          <span class="badge bg-primary-subtle text-primary border">
            {{ notifications.count }} notification{{ notifications.count|pluralize }}
          </span>
        </div>

        <div class="d-flex flex-column gap-3">
          {% for notification in notifications %}
          <div class="border rounded p-3">
            <div class="d-flex flex-column flex-md-row justify-content-between gap-3">
              <!-- Left -->
              <div class="flex-grow-1">
                <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                  {% if notification.status == 'completed' %}
                    <span class="badge bg-success-subtle text-success border">
                      <i class="fas fa-check-circle me-1"></i>Delivered
                    </span>
                  {% elif notification.status == 'pending' %}
                    <span class="badge bg-warning-subtle text-warning border">
                      <i class="fas fa-clock me-1"></i>Pending
                    </span>
                  {% elif notification.status == 'failed' %}
                    <span class="badge bg-danger-subtle text-danger border">
                      <i class="fas fa-exclamation-triangle me-1"></i>Failed
                    </span>
                  {% else %}
                    <span class="badge bg-secondary-subtle text-secondary border">
                      <i class="fas fa-question-circle me-1"></i>{{ notification.status|title }}
                    </span>
                  {% endif %}

                  <span class="badge bg-primary-subtle text-primary border">
                    {% if notification.channel.channel_type == 'telegram' %}
                      <i class="fab fa-telegram me-1"></i>
                    {% elif notification.channel.channel_type == 'email' %}
                      <i class="fas fa-envelope me-1"></i>
                    {% elif notification.channel.channel_type == 'webhook' %}
                      <i class="fas fa-link me-1"></i>
                    {% elif notification.channel.channel_type == 'slack' %}
                      <i class="fab fa-slack me-1"></i>
                    {% elif notification.channel.channel_type == 'discord' %}
                      <i class="fab fa-discord me-1"></i>
                    {% elif notification.channel.channel_type == 'sms' %}
                      <i class="fas fa-sms me-1"></i>
                    {% else %}
                      <i class="fas fa-bell me-1"></i>
                    {% endif %}
                    {{ notification.channel.name }}
                  </span>

                  <span class="text-muted small">
                    <i class="fas fa-clock me-1"></i>{{ notification.scheduled_at|timesince }} ago
                  </span>
                </div>

                {% if notification.subject %}
                  <h4 class="small fw-semibold mb-1">{{ notification.subject }}</h4>
                {% endif %}
                <p class="small text-muted mb-2">{{ notification.message|truncatechars:200 }}</p>

                <div class="row g-3 small text-muted">
                  <div class="col-12 col-md-4">
                    <span class="text-dark">Recipient:</span>
                    <div class="mt-1">{{ notification.recipient }}</div>
                  </div>

                  {% if notification.template %}
                  <div class="col-12 col-md-4">
                    <span class="text-dark">Template:</span>
                    <div class="mt-1">{{ notification.template.name }}</div>
                  </div>
                  {% endif %}

                  <div class="col-12 col-md-4">
                    <span class="text-dark">Attempts:</span>
                    <div class="mt-1">{{ notification.delivery_attempts }}</div>
                  </div>
                </div>

                {% if notification.sent_at %}
                  <div class="small text-muted mt-2">
                    <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 border border-danger-subtle bg-danger-subtle rounded">
                    <div class="d-flex gap-2">
                      <i class="fas fa-exclamation-triangle text-danger"></i>
                      <div>
                        <div class="small fw-semibold text-danger">Error Message</div>
                        <div class="small">{{ notification.error_message }}</div>
                      </div>
                    </div>
                  </div>
                {% endif %}
              </div>

              <!-- Right actions -->
              <div class="d-flex align-items-center gap-2 ms-md-3">
                <a href="#" class="btn btn-sm btn-outline-primary" title="View Details">
                  <i class="fas fa-eye"></i>
                </a>
                {% if notification.can_retry %}
                  <button class="btn btn-sm btn-outline-success"
                          title="Retry Delivery"
                          data-action="retry" data-id="{{ notification.id }}">
                    <i class="fas fa-redo"></i>
                  </button>
                {% endif %}
                <button class="btn btn-sm btn-outline-danger"
                        title="Delete Notification"
                        data-action="delete" data-id="{{ notification.id }}">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      {% if is_paginated %}
      <div class="card-footer bg-white">
        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2">
          <p class="mb-0 text-muted small">
            Showing <span class="fw-semibold">{{ page_obj.start_index }}</span> to
            <span class="fw-semibold">{{ page_obj.end_index }}</span> of
            <span class="fw-semibold">{{ paginator.count }}</span> results
          </p>
          <nav aria-label="Pagination">
            <ul class="pagination pagination-sm mb-0">
              {% if page_obj.has_previous %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </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 class="page-link" href="?page={{ num }}">{{ 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 }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              {% endif %}
            </ul>
          </nav>
        </div>
      </div>
      {% endif %}
    {% else %}
      <div class="card-body text-center py-5">
        <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary-subtle mb-3" style="width:48px;height:48px;">
          <i class="fas fa-envelope text-primary"></i>
        </div>
        <h3 class="h6">No notifications</h3>
        <p class="text-muted small">No notifications have been sent yet.</p>
        <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>
    {% endif %}
  </div>

  <!-- Information Panel -->
  <div class="alert alert-primary border d-flex gap-3 align-items-start" role="alert">
    <i class="fas fa-info-circle mt-1"></i>
    <div>
      <h6 class="alert-heading mb-1">About Notifications</h6>
      <p class="mb-2 small">This page shows the delivery history of all notifications sent by the system. Each notification includes:</p>
      <ul class="small mb-0 ps-3">
        <li><strong>Status</strong> – delivered, pending, or failed</li>
        <li><strong>Channel</strong> – Telegram, email, webhook, etc.</li>
        <li><strong>Recipient</strong> – target identifier</li>
        <li><strong>Template</strong> – formatting used</li>
        <li><strong>Delivery Attempts</strong> – retry count</li>
        <li><strong>Error Messages</strong> – failure details</li>
      </ul>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
  // Helper: SweetAlert2 30s bottom-right toast
  function toast(icon, title, timer=30000) {
    Swal.fire({
      toast: true,
      position: 'bottom-end',
      showConfirmButton: false,
      timer: timer,
      timerProgressBar: true,
      icon: icon,
      title: title
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    // Filters -> update query params
    const statusFilter = document.getElementById('status');
    const channelFilter = document.getElementById('channel');
    const dateRangeFilter = document.getElementById('date_range');
    const applyBtn = document.getElementById('applyFiltersBtn');

    function applyFilters() {
      const params = new URLSearchParams(window.location.search);
      const setOrDel = (k, v) => v ? params.set(k, v) : params.delete(k);

      setOrDel('status', statusFilter.value);
      setOrDel('channel', channelFilter.value);
      setOrDel('date_range', dateRangeFilter.value);

      window.location.search = params.toString();
    }
    applyBtn.addEventListener('click', applyFilters);

    // Refresh
    document.getElementById('refreshBtn').addEventListener('click', () => {
      toast('info', 'Refreshing…', 1500);
      window.location.reload();
    });

    // Actions: retry + delete (use SweetAlert confirms, then toast)
    document.querySelectorAll('[data-action="delete"]').forEach(btn => {
      btn.addEventListener('click', e => {
        e.preventDefault();
        const id = btn.dataset.id;
        Swal.fire({
          icon: 'warning',
          title: 'Delete notification?',
          text: 'This action cannot be undone.',
          showCancelButton: true,
          confirmButtonText: 'Delete',
          cancelButtonText: 'Cancel',
          confirmButtonColor: '#dc3545'
        }).then(res => {
          if (res.isConfirmed) {
            // TODO: perform deletion (fetch/HTMX)
            toast('success', 'Notification deleted');
          }
        });
      });
    });

    document.querySelectorAll('[data-action="retry"]').forEach(btn => {
      btn.addEventListener('click', e => {
        e.preventDefault();
        const id = btn.dataset.id;

        Swal.fire({
          title: 'Retry delivery?',
          icon: 'question',
          showCancelButton: true,
          confirmButtonText: 'Retry'
        }).then(res => {
          if (res.isConfirmed) {
            // Simulate async retry
            Swal.fire({title:'Retrying…', allowOutsideClick:false, showConfirmButton:false, didOpen:()=>Swal.showLoading()});
            setTimeout(() => {
              Swal.close();
              toast('success', 'Delivery retried');
            }, 1200);
            // TODO: replace with real request
          }
        });
      });
    });
  });
</script>

<style>
  /* Primary color alignment with your palette */
  :root{
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59,130,246;
  }
  .btn-primary:hover,
  .btn-primary:focus{ background-color:#2563eb; border-color:#2563eb; }
  .bg-primary-subtle{ background-color:#eff6ff !important; }
  .text-purple{ color:#6f42c1 !important; }
  .bg-danger-subtle{ background-color: #fde8e8 !important; }
  .border-danger-subtle{ border-color: #fad1d1 !important; }
  .bg-success-subtle{ background-color:#e9f7ef !important; }
  .bg-warning-subtle{ background-color:#fff6e6 !important; }
  .bg-secondary-subtle{ background-color:#f2f2f2 !important; }
  .bg-primary-subtle.text-primary.border { border: 1px solid rgba(var(--bs-primary-rgb), .2); }
</style>
{% endblock %}