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

{% load static %}

{% block title %}Channel Health - {{ channel.display_name|default:channel.name }}{% 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>
    .health-card {
        background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .metric-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .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;
    }
    
    .metric-value {
        font-size: 2rem;
        font-weight: bold;
    }
    
    .metric-trend {
        font-size: 0.875rem;
    }
    
    .trend-up {
        color: #28a745;
    }
    
    .trend-down {
        color: #dc3545;
    }
    
    .trend-stable {
        color: #6c757d;
    }
    
    .chart-container {
        height: 300px;
        margin-bottom: 20px;
    }
    
    .alert-item {
        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.5rem;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Channel Health - {{ channel.display_name|default:channel.name }}</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"><a href="{% url 'channels:channel_detail' channel.id %}">{{ channel.display_name|default:channel.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Health</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<!-- Channel Health Overview -->
<div class="row">
    <div class="col-12">
        <div class="card health-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.display_name|default:channel.name }} Health Status
                    </h3>
                    <p class="mb-0 opacity-75">Real-time monitoring and health metrics for your channel</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="health-status health-status-{{ overall_health.status|lower }}">
                        <div class="d-inline-block p-3 rounded">
                            <h2 class="mb-0">{{ overall_health.score|default:"--" }}%</h2>
                            <p class="mb-0">Overall Health</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Health Metrics -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card">
            <div class="card-body text-center">
                <div class="metric-icon mb-3">
                    <i class="fe fe-wifi fs-2 text-primary"></i>
                </div>
                <div class="metric-value text-primary">{{ connection_health.uptime|default:"--" }}%</div>
                <h6 class="card-title mb-2">Connection Uptime</h6>
                <div class="metric-trend">
                    {% if connection_health.trend == 'up' %}
                        <i class="fe fe-trending-up trend-up me-1"></i>
                        <span class="trend-up">+{{ connection_health.change }}%</span>
                    {% elif connection_health.trend == 'down' %}
                        <i class="fe fe-trending-down trend-down me-1"></i>
                        <span class="trend-down">{{ connection_health.change }}%</span>
                    {% else %}
                        <i class="fe fe-minus trend-stable me-1"></i>
                        <span class="trend-stable">Stable</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card metric-card">
            <div class="card-body text-center">
                <div class="metric-icon mb-3">
                    <i class="fe fe-cpu fs-2 text-success"></i>
                </div>
                <div class="metric-value text-success">{{ performance_health.cpu_usage|default:"--" }}%</div>
                <h6 class="card-title mb-2">CPU Usage</h6>
                <div class="metric-trend">
                    {% if performance_health.cpu_trend == 'up' %}
                        <i class="fe fe-trending-up trend-down me-1"></i>
                        <span class="trend-down">+{{ performance_health.cpu_change }}%</span>
                    {% elif performance_health.cpu_trend == 'down' %}
                        <i class="fe fe-trending-down trend-up me-1"></i>
                        <span class="trend-up">{{ performance_health.cpu_change }}%</span>
                    {% else %}
                        <i class="fe fe-minus trend-stable me-1"></i>
                        <span class="trend-stable">Stable</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card metric-card">
            <div class="card-body text-center">
                <div class="metric-icon mb-3">
                    <i class="fe fe-hard-drive fs-2 text-info"></i>
                </div>
                <div class="metric-value text-info">{{ performance_health.memory_usage|default:"--" }}%</div>
                <h6 class="card-title mb-2">Memory Usage</h6>
                <div class="metric-trend">
                    {% if performance_health.memory_trend == 'up' %}
                        <i class="fe fe-trending-up trend-down me-1"></i>
                        <span class="trend-down">+{{ performance_health.memory_change }}%</span>
                    {% elif performance_health.memory_trend == 'down' %}
                        <i class="fe fe-trending-down trend-up me-1"></i>
                        <span class="trend-up">{{ performance_health.memory_change }}%</span>
                    {% else %}
                        <i class="fe fe-minus trend-stable me-1"></i>
                        <span class="trend-stable">Stable</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card metric-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">{{ error_count|default:"0" }}</div>
                <h6 class="card-title mb-2">Errors (24h)</h6>
                <div class="metric-trend">
                    {% if error_trend == 'up' %}
                        <i class="fe fe-trending-up trend-down me-1"></i>
                        <span class="trend-down">+{{ error_change }}</span>
                    {% elif error_trend == 'down' %}
                        <i class="fe fe-trending-down trend-up me-1"></i>
                        <span class="trend-up">{{ error_change }}</span>
                    {% else %}
                        <i class="fe fe-minus trend-stable me-1"></i>
                        <span class="trend-stable">No change</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts and Detailed Metrics -->
<div class="row">
    <!-- Performance Chart -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-bar-chart-2 me-2"></i>Performance Metrics
                </h5>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="performanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Alerts -->
    <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>Recent Alerts
                </h5>
            </div>
            <div class="card-body">
                {% if recent_alerts %}
                    {% for alert in recent_alerts %}
                        <div class="alert-item 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 }}</p>
                                    <small class="text-muted">
                                        <i class="fe fe-clock me-1"></i>{{ alert.created_at|timesince }} ago
                                    </small>
                                </div>
                                <span class="badge status-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 recent alerts</h6>
                        <p class="text-muted small">Your channel is running smoothly!</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Detailed Health Information -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-info me-2"></i>System Information
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Status</label>
                            <div class="fw-bold">
                                {% if channel.is_online %}
                                    <span class="badge bg-success">Online</span>
                                {% else %}
                                    <span class="badge bg-danger">Offline</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Type</label>
                            <div class="fw-bold">{{ channel.get_type_display|default:"-" }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Last Check</label>
                            <div class="fw-bold">{{ last_health_check|default:"-" }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Uptime</label>
                            <div class="fw-bold">{{ uptime_duration|default:"-" }}</div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Stream URL</label>
                            <div class="fw-bold text-break">{{ channel.stream_url|default:"-" }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-settings me-2"></i>Health Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Check Interval</label>
                            <div class="fw-bold">{{ health_config.check_interval|default:"5" }} min</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Timeout</label>
                            <div class="fw-bold">{{ health_config.timeout|default:"30" }}s</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Retry Count</label>
                            <div class="fw-bold">{{ health_config.retry_count|default:"3" }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-item">
                            <label class="form-label fw-semibold text-muted">Alert Threshold</label>
                            <div class="fw-bold">{{ health_config.alert_threshold|default:"80" }}%</div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex gap-2">
                            <button class="btn btn-primary" onclick="runHealthCheck()">
                                <i class="fe fe-refresh-cw me-1"></i> Run Health Check
                            </button>
                            <a href="{% url 'channels:health_dashboard' %}" class="btn btn-outline-secondary">
                                <i class="fe fe-external-link me-1"></i> Health Dashboard
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Performance Chart
    const ctx = document.getElementById('performanceChart').getContext('2d');
    const chartLabels = JSON.parse('{{ chart_labels|default:"[]" }}' || '[]');
    const cpuData = JSON.parse('{{ cpu_data|default:"[]" }}' || '[]');
    const memoryData = JSON.parse('{{ memory_data|default:"[]" }}' || '[]');
    const connectionData = JSON.parse('{{ connection_data|default:"[]" }}' || '[]');
    
    const performanceChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [{
                label: 'CPU Usage (%)',
                data: cpuData,
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4
            }, {
                label: 'Memory Usage (%)',
                data: memoryData,
                borderColor: '#17a2b8',
                backgroundColor: 'rgba(23, 162, 184, 0.1)',
                tension: 0.4
            }, {
                label: 'Connection Quality (%)',
                data: connectionData,
                borderColor: '#6f42c1',
                backgroundColor: 'rgba(111, 66, 193, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            },
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    });
    
    // Auto-refresh every 30 seconds
    setInterval(function() {
        updateHealthMetrics();
    }, 30000);
});

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

// Update health metrics via AJAX
function updateHealthMetrics() {
    $.ajax({
        url: '{% url "channels:health_metrics_api" channel.id %}',
        method: 'GET',
        success: function(data) {
            // Update metric values
            if (data.connection_health) {
                $('.metric-value').eq(0).text(data.connection_health.uptime + '%');
            }
            if (data.performance_health) {
                $('.metric-value').eq(1).text(data.performance_health.cpu_usage + '%');
                $('.metric-value').eq(2).text(data.performance_health.memory_usage + '%');
            }
            if (data.error_count !== undefined) {
                $('.metric-value').eq(3).text(data.error_count);
            }
        },
        error: function() {
            console.log('Failed to update health metrics');
        }
    });
}
</script>

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

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