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

{% block title %}System Metrics - Stream Processor{% endblock %}

{% block page_title %}
    <div class="d-flex align-items-center">
        <i class="fas fa-chart-line me-3 text-primary"></i>
        System Metrics
    </div>
{% endblock %}

{% block extra_css %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="mb-4">
        <div class="card shadow-sm">
            <div class="card-body border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h2 fw-bold text-dark mb-1">System Metrics</h1>
                        <p class="text-muted small mb-0">Performance analytics and monitoring dashboard</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{% url 'monitoring:dashboard' %}" 
                           class="btn btn-outline-secondary btn-sm d-flex align-items-center">
                            <i class="fas fa-arrow-left me-2"></i>
                            Back to Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="mb-4">
        <div class="alert alert-info d-flex align-items-center" role="alert">
            <i class="fas fa-chart-line me-3"></i>
            <div>
                <h6 class="alert-heading mb-1">Performance Analytics</h6>
                <p class="mb-0 small">Real-time system metrics and performance indicators for the last 7 days.</p>
            </div>
        </div>
    </div>

    <!-- Performance Overview -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-bullseye text-primary"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Detection Accuracy</p>
                            <p class="h3 fw-bold text-dark mb-1">{{ performance_data.detection_accuracy|floatformat:1 }}%</p>
                            <p class="text-muted" style="font-size: 0.75rem;">Last 7 days</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-clock text-success"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Stream Uptime</p>
                            <p class="h3 fw-bold text-dark mb-1">{{ performance_data.stream_uptime|floatformat:1 }}%</p>
                            <p class="text-muted" style="font-size: 0.75rem;">Average uptime</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-bell text-info"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Notification Rate</p>
                            <p class="h3 fw-bold text-dark mb-1">{{ performance_data.notification_delivery_rate|floatformat:1 }}%</p>
                            <p class="text-muted" style="font-size: 0.75rem;">Delivery success</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row g-3 mb-4">
        <!-- Detection Activity Chart -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h3 class="h5 mb-0 text-dark">Detection Activity (24h)</h3>
                    <p class="text-muted small mb-0 mt-1">Hourly detection counts</p>
                </div>
                <div class="card-body">
                    <canvas id="detectionChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>

        <!-- Channel Performance Chart -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h3 class="h5 mb-0 text-dark">Channel Performance</h3>
                    <p class="text-muted small mb-0 mt-1">Sessions vs detections</p>
                </div>
                <div class="card-body">
                    <canvas id="channelChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Channel Statistics Table -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-white border-bottom">
            <h3 class="h5 mb-0 text-dark">Channel Statistics</h3>
            <p class="text-muted small mb-0 mt-1">Performance metrics (last 7 days)</p>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="fw-medium text-muted small text-uppercase">Channel</th>
                        <th class="fw-medium text-muted small text-uppercase">Sessions</th>
                        <th class="fw-medium text-muted small text-uppercase">Detections</th>
                        <th class="fw-medium text-muted small text-uppercase">Avg Confidence</th>
                        <th class="fw-medium text-muted small text-uppercase">Detection Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {% for channel in channel_stats %}
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                        <i class="fas fa-tv text-primary small"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <div class="fw-medium text-dark small">{{ channel.name }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="small text-dark">{{ channel.sessions }}</td>
                        <td class="small text-dark">{{ channel.detections }}</td>
                        <td class="small text-dark">{{ channel.avg_confidence|floatformat:2 }}%</td>
                        <td class="small text-dark">
                            {% if channel.sessions > 0 %}
                                {% widthratio channel.detections channel.sessions 100 as detection_rate %}
                                {{ detection_rate|floatformat:1 }} per session
                            {% else %}
                                <span class="text-muted">N/A</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-5">
                            <div class="d-flex flex-column align-items-center">
                                <i class="fas fa-chart-bar text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted mb-0">No channel data available</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- System Health Indicators -->
    <div class="row g-3">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fas fa-database text-success"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Database</p>
                            <p class="text-success small fw-semibold mb-0">Healthy</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fas fa-memory text-primary"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Redis Cache</p>
                            <p class="text-primary small fw-semibold mb-0">Connected</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fas fa-cogs text-info"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Celery Workers</p>
                            <p class="text-info small fw-semibold mb-0">Active</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-secondary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fas fa-server text-secondary"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">System Load</p>
                            <p class="text-secondary small fw-semibold mb-0">Normal</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Detection Activity Chart
    const detectionCtx = document.getElementById('detectionChart').getContext('2d');
    const detectionData = {{ hourly_detections|safe }};
    
    new Chart(detectionCtx, {
        type: 'line',
        data: {
            labels: detectionData.map(d => d.hour),
            datasets: [{
                label: 'Detections',
                data: detectionData.map(d => d.count),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });

    // Channel Performance Chart
    const channelCtx = document.getElementById('channelChart').getContext('2d');
    const channelData = {{ channel_stats|safe }};
    
    new Chart(channelCtx, {
        type: 'bar',
        data: {
            labels: channelData.map(c => c.name),
            datasets: [{
                label: 'Sessions',
                data: channelData.map(c => c.sessions),
                backgroundColor: 'rgba(34, 197, 94, 0.8)',
                borderColor: 'rgb(34, 197, 94)',
                borderWidth: 1
            }, {
                label: 'Detections',
                data: channelData.map(c => c.detections),
                backgroundColor: 'rgba(168, 85, 247, 0.8)',
                borderColor: 'rgb(168, 85, 247)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
});
</script>
{% endblock %}