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

{% load static %}

{% block title %}Channel Health Dashboard{% endblock %}

{% block extra_css %}
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datepicker/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
<style>
    .dashboard-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .health-overview-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .health-overview-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .channel-health-item {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        transition: all 0.2s;
    }
    
    .channel-health-item:hover {
        border-color: #007bff;
        box-shadow: 0 2px 10px rgba(0,123,255,0.1);
    }
    
    .health-status-excellent {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
    }
    
    .health-status-good {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
    }
    
    .health-status-warning {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: white;
    }
    
    .health-status-critical {
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
    }
    
    .status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
    }
    
    .status-online {
        background-color: #28a745;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);
    }
    
    .status-offline {
        background-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
    }
    
    .status-warning {
        background-color: #ffc107;
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
    }
    
    .metric-value {
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .chart-container {
        height: 400px;
        margin-bottom: 20px;
    }
    
    .alert-summary {
        border-left: 4px solid;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 0 6px 6px 0;
    }
    
    .alert-critical {
        border-left-color: #dc3545;
        background: #f8d7da;
    }
    
    .alert-warning {
        border-left-color: #ffc107;
        background: #fff3cd;
    }
    
    .alert-info {
        border-left-color: #17a2b8;
        background: #d1ecf1;
    }
    
    @media (max-width: 768px) {
        .metric-value {
            font-size: 1.25rem;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Channel Health Dashboard</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">Channels</a></li>
            <li class="breadcrumb-item active" aria-current="page">Health Dashboard</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<!-- Dashboard Overview -->
<div class="row">
    <div class="col-12">
        <div class="card dashboard-card">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h3 class="mb-2">
                        <i class="fe fe-activity me-2"></i>Channel Health Dashboard
                    </h3>
                    <p class="mb-0 opacity-75">Monitor the health and performance of all your channels in real-time</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="d-flex gap-2 justify-content-md-end">
                        <button class="btn btn-light" onclick="refreshDashboard()">
                            <i class="fe fe-refresh-cw me-1"></i> Refresh
                        </button>
                        <button class="btn btn-outline-light" onclick="exportHealthReport()">
                            <i class="fe fe-download me-1"></i> Export
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Health Overview Metrics -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card health-overview-card">
            <div class="card-body text-center">
                <div class="metric-icon mb-3">
                    <i class="fe fe-server fs-2 text-primary"></i>
                </div>
                <div class="metric-value text-primary">{{ total_channels|default:"0" }}</div>
                <h6 class="card-title mb-2">Total Channels</h6>
                <div class="text-muted small">
                    <span class="text-success">{{ online_channels|default:"0" }} online</span> • 
                    <span class="text-danger">{{ offline_channels|default:"0" }} offline</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card health-overview-card">
            <div class="card-body text-center">
                <div class="metric-icon mb-3">
                    <i class="fe fe-check-circle fs-2 text-success"></i>
                </div>
                <div class="metric-value text-success">{{ healthy_channels|default:"0" }}</div>
                <h6 class="card-title mb-2">Healthy Channels</h6>
                <div class="text-muted small">
                    {{ healthy_percentage|default:"0" }}% of total channels
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card health-overview-card">
            <div class="card-body text-center">
                <div class="metric-icon mb-3">
                    <i class="fe fe-alert-triangle fs-2 text-warning"></i>
                </div>
                <div class="metric-value text-warning">{{ warning_channels|default:"0" }}</div>
                <h6 class="card-title mb-2">Warning Channels</h6>
                <div class="text-muted small">
                    Require attention
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card health-overview-card">
            <div class="card-body text-center">
                <div class="metric-icon mb-3">
                    <i class="fe fe-x-circle fs-2 text-danger"></i>
                </div>
                <div class="metric-value text-danger">{{ critical_channels|default:"0" }}</div>
                <h6 class="card-title mb-2">Critical Channels</h6>
                <div class="text-muted small">
                    Need immediate action
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-filter me-2"></i>Filters
                </h5>
            </div>
            <div class="card-body">
                <form method="get" id="filter-form" class="row g-3">
                    <div class="col-md-3">
                        <label for="status" class="form-label fw-semibold">
                            <i class="fe fe-activity me-1"></i>Health Status
                        </label>
                        <select class="form-select" id="status" name="status">
                            <option value="" {% if not selected_status %}selected{% endif %}>All Statuses</option>
                            <option value="excellent" {% if selected_status == 'excellent' %}selected{% endif %}>Excellent</option>
                            <option value="good" {% if selected_status == 'good' %}selected{% endif %}>Good</option>
                            <option value="warning" {% if selected_status == 'warning' %}selected{% endif %}>Warning</option>
                            <option value="critical" {% if selected_status == 'critical' %}selected{% endif %}>Critical</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="channel_type" class="form-label fw-semibold">
                            <i class="fe fe-tag me-1"></i>Channel Type
                        </label>
                        <select class="form-select" id="channel_type" name="channel_type">
                            <option value="" {% if not selected_type %}selected{% endif %}>All Types</option>
                            {% for type_value, type_label in channel_types %}
                                <option value="{{ type_value }}" 
                                        {% if selected_type == type_value %}selected{% endif %}>
                                    {{ type_label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="online_status" class="form-label fw-semibold">
                            <i class="fe fe-wifi me-1"></i>Online Status
                        </label>
                        <select class="form-select" id="online_status" name="online_status">
                            <option value="" {% if not selected_online_status %}selected{% endif %}>All</option>
                            <option value="online" {% if selected_online_status == 'online' %}selected{% endif %}>Online</option>
                            <option value="offline" {% if selected_online_status == 'offline' %}selected{% endif %}>Offline</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="search" class="form-label fw-semibold">
                            <i class="fe fe-search me-1"></i>Search
                        </label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query }}" 
                               placeholder="Search channels...">
                    </div>
                    
                    <div class="col-12">
                        <div class="d-flex gap-2 pt-3 border-top">
                            <button type="submit" class="btn btn-primary">
                                <i class="fe fe-filter me-1"></i> Apply Filters
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="clear-filters">
                                <i class="fe fe-refresh-cw me-1"></i> Clear Filters
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Channel Health List -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-list me-2"></i>Channel Health Status
                    <span class="badge bg-primary ms-2">{{ channels|length }} channel{{ channels|length|pluralize }}</span>
                </h5>
            </div>
            <div class="card-body">
                {% if channels %}
                    {% for channel in channels %}
                        <div class="channel-health-item">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-center">
                                        <span class="status-indicator status-{% if channel.is_online %}online{% else %}offline{% endif %}"></span>
                                        <div>
                                            <h6 class="mb-1">
                                                <a href="{% url 'channels:channel_health' channel.id %}" class="text-decoration-none">
                                                    {{ channel.display_name|default:channel.name }}
                                                </a>
                                            </h6>
                                            <small class="text-muted">
                                                <i class="fe fe-tag me-1"></i>{{ channel.get_type_display|default:"Unknown" }}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center">
                                        <div class="health-status health-status-{{ channel.health_status|lower }}">
                                            <div class="p-2 rounded">
                                                <div class="fw-bold">{{ channel.health_score|default:"--" }}%</div>
                                                <small>Health</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center">
                                        <div class="fw-bold text-primary">{{ channel.uptime|default:"--" }}%</div>
                                        <small class="text-muted">Uptime</small>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center">
                                        <div class="btn-group" role="group">
                                            <a href="{% url 'channels:channel_health' channel.id %}" 
                                               class="btn btn-sm btn-primary" title="View Health">
                                                <i class="fe fe-activity"></i>
                                            </a>
                                            <a href="{% url 'channels:channel_detail' channel.id %}" 
                                               class="btn btn-sm btn-outline-secondary" title="View Channel">
                                                <i class="fe fe-eye"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            {% if channel.recent_alerts %}
                            <div class="mt-3 pt-3 border-top">
                                <small class="text-muted fw-semibold">Recent Alerts:</small>
                                <div class="mt-2">
                                    {% for alert in channel.recent_alerts|slice:":3" %}
                                        <span class="badge bg-{{ alert.severity|lower }} me-1 mb-1">
                                            {{ alert.title }}
                                        </span>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-5">
                        <i class="fe fe-server fe-5x text-muted mb-4"></i>
                        <h5 class="text-muted mb-3">No channels found</h5>
                        <p class="text-muted mb-4">Try adjusting your filters or create a new channel.</p>
                        <a href="{% url 'channels:channel_create' %}" class="btn btn-primary">
                            <i class="fe fe-plus me-2"></i> Create New Channel
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- System Alerts & Summary -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-bell me-2"></i>System Alerts
                </h5>
            </div>
            <div class="card-body">
                {% if system_alerts %}
                    {% for alert in system_alerts %}
                        <div class="alert-summary alert-{{ alert.severity|lower }}">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">{{ alert.title }}</h6>
                                    <p class="mb-1 small">{{ alert.message|truncatechars:80 }}</p>
                                    <small class="text-muted">
                                        <i class="fe fe-clock me-1"></i>{{ alert.created_at|timesince }} ago
                                    </small>
                                </div>
                                <span class="badge bg-{{ alert.severity|lower }}">
                                    {{ alert.get_severity_display }}
                                </span>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-4">
                        <i class="fe fe-check-circle fe-3x text-success mb-3"></i>
                        <h6 class="text-muted">No active alerts</h6>
                        <p class="text-muted small">All systems are running normally!</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-zap me-2"></i>Quick Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-primary" onclick="runAllHealthChecks()">
                        <i class="fe fe-refresh-cw me-1"></i> Run All Health Checks
                    </button>
                    <button class="btn btn-outline-secondary" onclick="clearAllAlerts()">
                        <i class="fe fe-x me-1"></i> Clear All Alerts
                    </button>
                    <a href="{% url 'channels:channel_create' %}" class="btn btn-success">
                        <i class="fe fe-plus me-1"></i> Add New Channel
                    </a>
                    <button class="btn btn-outline-info" onclick="exportHealthReport()">
                        <i class="fe fe-download me-1"></i> Export Health Report
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pagination -->
{% if channels.has_other_pages %}
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div class="pagination-info text-muted mb-2 mb-md-0">
                        <i class="fe fe-info me-1"></i>
                        Showing {{ channels.start_index }} to {{ channels.end_index }} of {{ channels.paginator.count }} channels
                    </div>
                    
                    <nav aria-label="Channel pagination">
                        <ul class="pagination pagination-sm mb-0">
                            {% if channels.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=1" title="First Page">
                                        <i class="fe fe-chevrons-left"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ channels.previous_page_number }}" title="Previous Page">
                                        <i class="fe fe-chevron-left"></i>
                                    </a>
                                </li>
                            {% endif %}
                            
                            {% for page_num in channels.paginator.page_range %}
                                {% if page_num == channels.number %}
                                    <li class="page-item active">
                                        <span class="page-link fw-bold">{{ page_num }}</span>
                                    </li>
                                {% elif page_num >= channels.number|add:'-2' and page_num <= channels.number|add:'2' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_num }}">{{ page_num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if channels.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ channels.next_page_number }}" title="Next Page">
                                        <i class="fe fe-chevron-right"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ channels.paginator.num_pages }}" title="Last Page">
                                        <i class="fe fe-chevrons-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock content %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Select2 for better dropdowns
    $('#status, #channel_type, #online_status').select2({
        width: '100%',
        allowClear: true
    });
    
    // Clear filters
    $('#clear-filters').click(function() {
        window.location.href = window.location.pathname;
    });
    
    // Auto-submit form on filter change
    $('#status, #channel_type, #online_status').change(function() {
        $('#filter-form').submit();
    });
    
    // Debounced search
    let searchTimeout;
    $('#search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            $('#filter-form').submit();
        }, 500);
    });
    
    // Auto-refresh every 60 seconds
    setInterval(function() {
        refreshDashboard();
    }, 60000);
});

// Refresh dashboard
function refreshDashboard() {
    location.reload();
}

// Run all health checks
function runAllHealthChecks() {
    const button = event.target;
    const originalText = button.innerHTML;
    
    button.disabled = true;
    button.innerHTML = '<i class="fe fe-loader spin me-1"></i> Running Checks...';
    
    $.ajax({
        url: '{% url "channels:run_all_health_checks" %}',
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        success: function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert('Health checks failed: ' + response.message);
            }
        },
        error: function() {
            alert('Health checks failed. Please try again.');
        },
        complete: function() {
            button.disabled = false;
            button.innerHTML = originalText;
        }
    });
}

// Clear all alerts
function clearAllAlerts() {
    if (confirm('Are you sure you want to clear all alerts?')) {
        $.ajax({
            url: '{% url "channels:clear_all_alerts" %}',
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Failed to clear alerts: ' + response.message);
                }
            },
            error: function() {
                alert('Failed to clear alerts. Please try again.');
            }
        });
    }
}

// Export health report
function exportHealthReport() {
    window.open('{% url "channels:export_health_report" %}', '_blank');
}
</script>

<style>
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>
{% endblock extra_js %}