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

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

{% block page_title %}
    <div class="d-flex align-items-center">
        <div class="p-2 bg-primary rounded me-3">
            <i class="fas fa-bell text-white"></i>
        </div>
        <div>
            <h1 class="h3 fw-semibold">Notification Channels</h1>
            <p class="text-muted">Configure and manage notification delivery channels</p>
        </div>
    </div>
{% endblock %}

{% block content %}
<!-- Header Actions & Stats -->
<div class="mb-4">
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between">
        <!-- Quick Stats -->
        <div class="row g-3 mb-3 mb-lg-0">
            <div class="col-6 col-md-3">
                <div class="card border h-100">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-broadcast-tower text-primary me-3"></i>
                            <div>
                                <p class="small text-muted mb-0">Total Channels</p>
                                <p class="h5 fw-semibold mb-0">{{ channels|length|default:0 }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border h-100">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-3"></i>
                            <div>
                                <p class="small text-muted mb-0">Active Channels</p>
                                <p class="h5 fw-semibold mb-0">
                                    {% for channel in channels %}{% if channel.is_active %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border h-100">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-pause-circle text-muted me-3"></i>
                            <div>
                                <p class="small text-muted mb-0">Inactive Channels</p>
                                <p class="h5 fw-semibold mb-0">
                                    {% for channel in channels %}{% if not channel.is_active %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                        </p>
                    </div>
                </div>
            </div>
            <div class="bg-white border rounded p-4">
                <div class="flex items-center">
                    <i class="fas fa-paper-plane text-purple-600 mr-3"></i>
                    <div>
                        <p class="text-sm text-gray-600">Messages Sent</p>
                        <p class="text-xl font-semibold">0</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Actions -->
        <div class="flex items-center space-x-3">
            <button class="px-4 py-2 border text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-download mr-2"></i>
                Export
            </button>
            <a href="{% url 'notifications:channel_create' %}" 
               class="px-4 py-2 text-sm font-medium rounded text-white bg-blue-600 hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>
                New Channel
            </a>
        </div>
    </div>
</div>

    <!-- Enhanced Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="stats-card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center">
                        <i class="fas fa-broadcast-tower text-white"></i>
                    </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                    <dl>
                        <dt class="text-sm text-gray-500">Total Channels</dt>
                        <dd class="text-xl">{{ channels|length }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-500 rounded flex items-center justify-center">
                        <i class="fas fa-check-circle text-white"></i>
                    </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                    <dl>
                        <dt class="text-sm text-gray-500">Active Channels</dt>
                        <dd class="text-xl">
                            {% for channel in channels %}{% if channel.is_active %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-gray-500 rounded flex items-center justify-center">
                        <i class="fas fa-pause-circle text-white"></i>
                    </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                    <dl>
                        <dt class="text-sm text-gray-500">Inactive</dt>
                        <dd class="text-xl">
                            {% for channel in channels %}{% if not channel.is_active %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-purple-500 rounded flex items-center justify-center">
                        <i class="fas fa-layer-group text-white"></i>
                    </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                    <dl>
                        <dt class="text-sm text-gray-500">Channel Types</dt>
                        <dd class="text-xl">
                            {% regroup channels by channel_type as channel_groups %}
                            {{ channel_groups|length|default:0 }}
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Filters -->
    <div class="filter-card">
        <div class="flex flex-col lg:flex-row gap-6 items-start lg:items-center">
            <div class="flex items-center space-x-3">
                <i class="fas fa-filter text-gray-400"></i>
                <h3 class="text-lg">Filters</h3>
            </div>
            <div class="flex flex-wrap gap-4 flex-1">
                <div class="flex items-center space-x-2">
                    <label for="channel_type" class="text-sm text-gray-700">Type:</label>
                    <select id="channel_type" class="rounded border text-sm">
                        <option value="">All Types</option>
                        <option value="telegram">📱 Telegram</option>
                        <option value="email">📧 Email</option>
                        <option value="webhook">🔗 Webhook</option>
                        <option value="slack">💬 Slack</option>
                        <option value="discord">🎮 Discord</option>
                        <option value="sms">📱 SMS</option>
                    </select>
                </div>
                <div class="flex items-center space-x-2">
                    <label for="status" class="text-sm text-gray-700">Status:</label>
                    <select id="status" class="rounded border text-sm">
                        <option value="">All Status</option>
                        <option value="active">✅ Active</option>
                        <option value="inactive">⏸️ Inactive</option>
                    </select>
                </div>
                <button class="px-4 py-2 border rounded text-sm text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-search mr-2"></i>
                    Apply Filters
                </button>
                <button class="px-4 py-2 text-sm text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times mr-2"></i>
                    Clear
                </button>
            </div>
        </div>
    </div>

    <!-- Enhanced Channels Grid -->
    {% if channels %}
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            {% for channel in channels %}
            <div class="channel-card">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 rounded flex items-center justify-center
                            {% if channel.channel_type == 'telegram' %}bg-blue-100 text-blue-600
                            {% elif channel.channel_type == 'email' %}bg-red-100 text-red-600
                            {% elif channel.channel_type == 'webhook' %}bg-green-100 text-green-600
                            {% elif channel.channel_type == 'slack' %}bg-purple-100 text-purple-600
                            {% elif channel.channel_type == 'discord' %}bg-indigo-100 text-indigo-600
                            {% elif channel.channel_type == 'sms' %}bg-yellow-100 text-yellow-600
                            {% else %}bg-gray-100 text-gray-600{% endif %}">
                            {% if channel.channel_type == 'telegram' %}<i class="fab fa-telegram text-lg"></i>
                            {% elif channel.channel_type == 'email' %}<i class="fas fa-envelope text-lg"></i>
                            {% elif channel.channel_type == 'webhook' %}<i class="fas fa-link text-lg"></i>
                            {% elif channel.channel_type == 'slack' %}<i class="fab fa-slack text-lg"></i>
                            {% elif channel.channel_type == 'discord' %}<i class="fab fa-discord text-lg"></i>
                            {% elif channel.channel_type == 'sms' %}<i class="fas fa-sms text-lg"></i>
                            {% else %}<i class="fas fa-bell text-lg"></i>{% endif %}
                        </div>
                        <div>
                            <h4 class="text-lg">{{ channel.name }}</h4>
                            <p class="text-sm text-gray-500">{{ channel.get_channel_type_display }}</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        {% if channel.is_active %}
                            <span class="px-2 py-1 rounded text-xs bg-green-100 text-green-800">
                                Active
                            </span>
                        {% else %}
                            <span class="px-2 py-1 rounded text-xs bg-gray-100 text-gray-800">
                                Inactive
                            </span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div class="text-center p-3 bg-gray-50 rounded-lg">
                        <div class="text-lg">{{ channel.rate_limit }}</div>
                        <div class="text-xs text-gray-500">msg/min</div>
                    </div>
                    <div class="text-center p-3 bg-gray-50 rounded-lg">
                        <div class="text-lg">{{ channel.retry_attempts }}</div>
                        <div class="text-xs text-gray-500">retries</div>
                    </div>
                </div>
                
                <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                    <div class="flex space-x-2">
                        <a href="{% url 'notifications:channel_update' channel.pk %}" 
                           class="px-3 py-1 border rounded text-xs text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-edit mr-1"></i>
                            Edit
                        </a>
                        <button class="px-3 py-1 border rounded text-xs text-red-700 bg-white hover:bg-red-50">
                            <i class="fas fa-trash mr-1"></i>
                            Delete
                        </button>
                    </div>
                    <button class="px-3 py-1 text-xs text-blue-700 hover:text-blue-900">
                        <i class="fas fa-paper-plane mr-1"></i>
                        Test
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <!-- Enhanced Empty State -->
        <div class="text-center py-12">
            <div class="w-16 h-16 mx-auto bg-gray-200 rounded flex items-center justify-center mb-4">
                <i class="fas fa-bell text-gray-400 text-2xl"></i>
            </div>
            <h3 class="text-xl mb-2">No notification channels found</h3>
            <p class="text-gray-600 mb-6">
                Get started by creating your first notification channel to receive alerts and system notifications.
            </p>
            <a href="{% url 'notifications:channel_create' %}" 
               class="px-6 py-3 rounded text-white bg-blue-600 hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>
                Create Your First Channel
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}