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

{% block title %}Notification Rules{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Notification Rules</h1>
            <p class="mb-0 text-muted">Manage automatic notification triggers and conditions</p>
        </div>
        <div>
            <a href="{% url 'notifications:rule_create' %}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Create Rule
            </a>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle"></i>
                <strong>Notification Rules</strong> automatically trigger notifications based on system events like jingle detection, stream status changes, and error conditions.
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Rules
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ rules|length }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-cogs fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Active Rules
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {% for rule in rules %}{% if rule.is_active %}{% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}{% endif %}{% empty %}0{% endfor %}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Event Types
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {% regroup rules by event_type as event_groups %}
                                {{ event_groups|length }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-bell fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                High Priority
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {% for rule in rules %}{% if rule.priority > 0 %}{% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}{% endif %}{% empty %}0{% endfor %}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Search & Filter</h6>
        </div>
        <div class="card-body">
            <form method="get" class="row">
                <div class="col-md-4">
                    <input type="text" name="search" class="form-control" placeholder="Search rules..." value="{{ request.GET.search }}">
                </div>
                <div class="col-md-3">
                    <select name="event_type" class="form-control">
                        <option value="">All Event Types</option>
                        <option value="jingle_detected" {% if request.GET.event_type == 'jingle_detected' %}selected{% endif %}>Jingle Detected</option>
                        <option value="ad_break_started" {% if request.GET.event_type == 'ad_break_started' %}selected{% endif %}>Ad Break Started</option>
                        <option value="ad_break_ended" {% if request.GET.event_type == 'ad_break_ended' %}selected{% endif %}>Ad Break Ended</option>
                        <option value="stream_started" {% if request.GET.event_type == 'stream_started' %}selected{% endif %}>Stream Started</option>
                        <option value="stream_stopped" {% if request.GET.event_type == 'stream_stopped' %}selected{% endif %}>Stream Stopped</option>
                        <option value="stream_error" {% if request.GET.event_type == 'stream_error' %}selected{% endif %}>Stream Error</option>
                        <option value="high_error_rate" {% if request.GET.event_type == 'high_error_rate' %}selected{% endif %}>High Error Rate</option>
                        <option value="system_startup" {% if request.GET.event_type == 'system_startup' %}selected{% endif %}>System Startup</option>
                        <option value="system_shutdown" {% if request.GET.event_type == 'system_shutdown' %}selected{% endif %}>System Shutdown</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="status" class="form-control">
                        <option value="">All Statuses</option>
                        <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>Active</option>
                        <option value="inactive" {% if request.GET.status == 'inactive' %}selected{% endif %}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-search"></i> Search
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Rules List -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Notification Rules</h6>
        </div>
        <div class="card-body">
            {% if rules %}
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Event Type</th>
                                <th>Channel</th>
                                <th>Template</th>
                                <th>Priority</th>
                                <th>Status</th>
                                <th>Last Triggered</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rule in rules %}
                            <tr>
                                <td>
                                    <strong>{{ rule.name }}</strong>
                                    {% if rule.throttle_minutes > 0 %}
                                        <br><small class="text-muted">Throttle: {{ rule.throttle_minutes }}min</small>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge badge-info">{{ rule.get_event_type_display }}</span>
                                </td>
                                <td>
                                    <a href="{% url 'notifications:channel_update' rule.channel.pk %}" class="text-decoration-none">
                                        {{ rule.channel.name }}
                                    </a>
                                    <br><small class="text-muted">{{ rule.channel.get_channel_type_display }}</small>
                                </td>
                                <td>
                                    {{ rule.template.name }}
                                    <br><small class="text-muted">{{ rule.template.get_template_type_display }}</small>
                                </td>
                                <td>
                                    {% if rule.priority > 0 %}
                                        <span class="badge badge-warning">{{ rule.priority }}</span>
                                    {% else %}
                                        <span class="badge badge-secondary">{{ rule.priority }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.is_active %}
                                        <span class="badge badge-success">Active</span>
                                    {% else %}
                                        <span class="badge badge-secondary">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.last_triggered %}
                                        <span title="{{ rule.last_triggered }}">{{ rule.last_triggered|timesince }} ago</span>
                                    {% else %}
                                        <span class="text-muted">Never</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                                            Actions
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="{% url 'notifications:rule_update' rule.pk %}">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Rules 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.event_type %}&event_type={{ request.GET.event_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">&laquo; First</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.event_type %}&event_type={{ request.GET.event_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">Previous</a>
                            </li>
                        {% endif %}

                        <li class="page-item active">
                            <span class="page-link">
                                Page {{ 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 %}{% if request.GET.event_type %}&event_type={{ request.GET.event_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">Next</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.event_type %}&event_type={{ request.GET.event_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">Last &raquo;</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <!-- Empty State -->
                <div class="text-center py-5">
                    <i class="fas fa-cogs fa-3x text-gray-300 mb-3"></i>
                    <h5 class="text-gray-600">No Notification Rules Found</h5>
                    <p class="text-gray-500 mb-4">
                        {% if request.GET.search or request.GET.event_type or request.GET.status %}
                            No rules match your current search criteria. Try adjusting your filters.
                        {% else %}
                            Get started by creating your first notification rule to automate alerts based on system events.
                        {% endif %}
                    </p>
                    <a href="{% url 'notifications:rule_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Create First Rule
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}