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

{% block title %}Notification Channels - Stream Processor{% endblock %}

{% block content %}
<div class="py-4 bg-light min-vh-100">
  <div class="container-fluid" style="max-width: 1200px;">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">
      <div>
        <h1 class="h3 fw-bold text-dark mb-1">Notification Channels</h1>
        <p class="text-muted mb-0">Manage notification delivery channels for alerts and updates</p>
      </div>
      <div class="d-flex gap-2">
        <a href="{% url 'notifications:rule_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-cog me-2"></i> Rules
        </a>
        <a href="{% url 'notifications:channel_create' %}" class="btn btn-primary">
          <i class="fas fa-plus me-2"></i> Add Channel
        </a>
      </div>
    </div>

    <!-- Info Panel -->
    <div class="alert alert-primary d-flex align-items-start mb-4" role="alert">
      <i class="fas fa-info-circle me-3 fs-5"></i>
      <div>
        <h6 class="mb-1">About Notification Channels</h6>
        <div class="small">
          Notification channels define how and where alerts are delivered. Configure email, webhook, or other delivery methods to receive notifications about stream events.
        </div>
      </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row row-cols-1 row-cols-md-4 g-3 mb-4">
      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-bell text-primary fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Total Channels</div>
                <div class="fs-5 fw-semibold">{{ channels|length|default:0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-check-circle text-success fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Active Channels</div>
                <div class="fs-5 fw-semibold">{{ channels|length|default:0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-envelope text-info fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Email Channels</div>
                <div class="fs-5 fw-semibold">0</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-link text-warning fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Webhook Channels</div>
                <div class="fs-5 fw-semibold">0</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Search and Filters -->
    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <form method="get" class="row g-3">
          <div class="col-md-6">
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-search"></i></span>
              <input type="text" class="form-control" name="search" 
                     placeholder="Search channels by name or type..." 
                     value="{{ request.GET.search }}">
            </div>
          </div>
          <div class="col-md-3">
            <select class="form-select" name="type">
              <option value="">All Types</option>
              <option value="email">Email</option>
              <option value="webhook">Webhook</option>
              <option value="slack">Slack</option>
            </select>
          </div>
          <div class="col-md-3">
            <div class="d-flex gap-2">
              <button type="submit" class="btn btn-outline-primary flex-fill">
                <i class="fas fa-filter me-1"></i> Filter
              </button>
              <a href="{% url 'notifications:channel_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-times"></i>
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Channels List -->
    {% if channels %}
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        {% for channel in channels %}
          <div class="col">
            <div class="card h-100 shadow-sm">
              <div class="card-body">
                <div class="d-flex align-items-start justify-content-between mb-3">
                  <div class="d-flex align-items-center">
                    {% if channel.channel_type == 'email' %}
                      <i class="fas fa-envelope text-primary fs-4 me-3"></i>
                    {% elif channel.channel_type == 'webhook' %}
                      <i class="fas fa-link text-warning fs-4 me-3"></i>
                    {% elif channel.channel_type == 'slack' %}
                      <i class="fab fa-slack text-success fs-4 me-3"></i>
                    {% else %}
                      <i class="fas fa-bell text-secondary fs-4 me-3"></i>
                    {% endif %}
                    <div>
                      <h6 class="mb-1 fw-semibold">{{ channel.name }}</h6>
                      <span class="badge bg-secondary">{{ channel.get_channel_type_display|default:channel.channel_type }}</span>
                    </div>
                  </div>
                  <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary" type="button" 
                            data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="fas fa-ellipsis-v"></i>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="{% url 'notifications:channel_update' channel.pk %}">
                        <i class="fas fa-edit me-2"></i> Edit
                      </a></li>
                    </ul>
                  </div>
                </div>
                
                <div class="mb-3">
                  {% if channel.description %}
                    <p class="text-muted small mb-2">{{ channel.description|truncatewords:15 }}</p>
                  {% endif %}
                  
                  {% if channel.channel_type == 'email' and channel.config.email %}
                    <div class="small text-muted">
                      <i class="fas fa-at me-1"></i> {{ channel.config.email }}
                    </div>
                  {% elif channel.channel_type == 'webhook' and channel.config.url %}
                    <div class="small text-muted">
                      <i class="fas fa-link me-1"></i> {{ channel.config.url|truncatechars:30 }}
                    </div>
                  {% endif %}
                </div>
                
                <div class="d-flex align-items-center justify-content-between">
                  <div class="small text-muted">
                    <i class="fas fa-clock me-1"></i>
                    Created {{ channel.created_at|timesince }} ago
                  </div>
                  {% if channel.is_active %}
                    <span class="badge bg-success">Active</span>
                  {% else %}
                    <span class="badge bg-secondary">Inactive</span>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      
      <!-- Pagination -->
      {% if is_paginated %}
        <nav aria-label="Channels pagination" class="mt-4">
          <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 %}">
                  <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 %}">
                  <i class="fas fa-angle-left"></i>
                </a>
              </li>
            {% endif %}
            
            <li class="page-item active">
              <span class="page-link">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>
            
            {% 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 %}">
                  <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 %}">
                  <i class="fas fa-angle-double-right"></i>
                </a>
              </li>
            {% endif %}
          </ul>
        </nav>
      {% endif %}
    {% else %}
      <!-- Empty State -->
      <div class="text-center py-5">
        <div class="mx-auto mb-4" style="width: 120px; height: 120px;">
          <i class="fas fa-bell text-muted" style="font-size: 120px;"></i>
        </div>
        <h4 class="text-muted mb-3">No notification channels found</h4>
        <p class="text-muted mb-4">Get started by creating your first notification channel to receive alerts and updates.</p>
        <a href="{% url 'notifications:channel_create' %}" class="btn btn-primary">
          <i class="fas fa-plus me-2"></i> Create First Channel
        </a>
      </div>
    {% endif %}

  </div>
</div>
{% endblock %}