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

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

{# Put Chart.js in the head #}
{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  :root{
    --sp-primary: #3b82f6;   /* blue-500 */
    --sp-primary-50: #eff6ff;
    --sp-green:   #22c55e;   /* green-500 */
    --sp-purple:  #a855f7;   /* purple-500 */
    --sp-yellow:  #f59e0b;   /* amber-500 */
  }
  .card-quiet { background: #fff; border: 1px solid rgba(0,0,0,.075); }
  .icon-chip {
    width: 40px; height: 40px; border-radius: .75rem;
    display:flex; align-items:center; justify-content:center;
  }
</style>
{% endblock %}

{% block content %}
<div class="py-4 bg-light min-vh-100">
  <div class="container-fluid" style="max-width:1200px">

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

    <!-- Performance Overview -->
    <div class="row g-3 mb-4">
      <div class="col-12 col-md-4">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="icon-chip me-3" style="background: var(--sp-primary-50);">
                <i class="fas fa-bullseye" style="color:var(--sp-primary)"></i>
              </div>
              <div class="flex-grow-1">
                <div class="small text-muted">Detection Accuracy</div>
                <div class="fs-5 fw-semibold">{{ performance_data.detection_accuracy|floatformat:1 }}%</div>
              </div>
            </div>
          </div>
          <div class="card-footer bg-white">
            <span class="small text-muted">Last 7 days</span>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="icon-chip me-3" style="background: rgba(34,197,94,.12);">
                <i class="fas fa-clock" style="color:var(--sp-green)"></i>
              </div>
              <div class="flex-grow-1">
                <div class="small text-muted">Stream Uptime</div>
                <div class="fs-5 fw-semibold">{{ performance_data.stream_uptime|floatformat:1 }}%</div>
              </div>
            </div>
          </div>
          <div class="card-footer bg-white">
            <span class="small text-muted">Average uptime</span>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="icon-chip me-3" style="background: rgba(168,85,247,.12);">
                <i class="fas fa-bell" style="color:var(--sp-purple)"></i>
              </div>
              <div class="flex-grow-1">
                <div class="small text-muted">Notification Rate</div>
                <div class="fs-5 fw-semibold">{{ performance_data.notification_delivery_rate|floatformat:1 }}%</div>
              </div>
            </div>
          </div>
          <div class="card-footer bg-white">
            <span class="small text-muted">Delivery success</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Charts -->
    <div class="row g-4 mb-4">
      <div class="col-12 col-lg-6">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-header bg-white">
            <h6 class="mb-0">Detection Activity (24h)</h6>
            <small class="text-muted">Hourly jingle detection counts</small>
          </div>
          <div class="card-body" style="height:320px;">
            <canvas id="detectionChart" style="height:100%;"></canvas>
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-6">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-header bg-white">
            <h6 class="mb-0">Channel Performance</h6>
            <small class="text-muted">Sessions vs detections by channel</small>
          </div>
          <div class="card-body" style="height:320px;">
            <canvas id="channelChart" style="height:100%;"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- Channel Statistics Table -->
    <div class="card card-quiet shadow-sm">
      <div class="card-header bg-white">
        <h6 class="mb-0">Channel Statistics</h6>
        <small class="text-muted">Detailed performance metrics by channel (last 7 days)</small>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Channel</th>
              <th>Sessions</th>
              <th>Detections</th>
              <th>Avg Confidence</th>
              <th>Detection Rate</th>
            </tr>
          </thead>
          <tbody>
            {% for channel in channel_stats %}
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="icon-chip me-3" style="background: var(--sp-primary-50); width: 36px; height: 36px;">
                    <i class="fas fa-tv" style="color:var(--sp-primary)"></i>
                  </div>
                  <div class="fw-semibold">{{ channel.name }}</div>
                </div>
              </td>
              <td>{{ channel.sessions }}</td>
              <td>{{ channel.detections }}</td>
              <td>{{ channel.avg_confidence|floatformat:2 }}%</td>
              <td>
                {% 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 text-muted">No channel data available</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- System Health Indicators -->
    <div class="row g-3 mt-4">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="icon-chip me-3" style="background: rgba(34,197,94,.12);">
                <i class="fas fa-database" style="color:var(--sp-green)"></i>
              </div>
              <div>
                <div class="small text-muted">Database</div>
                <div class="small fw-semibold text-success">Healthy</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="icon-chip me-3" style="background: var(--sp-primary-50);">
                <i class="fas fa-memory" style="color:var(--sp-primary)"></i>
              </div>
              <div>
                <div class="small text-muted">Redis Cache</div>
                <div class="small fw-semibold" style="color:var(--sp-primary)">Connected</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="icon-chip me-3" style="background: rgba(168,85,247,.12);">
                <i class="fas fa-cogs" style="color:var(--sp-purple)"></i>
              </div>
              <div>
                <div class="small text-muted">Celery Workers</div>
                <div class="small fw-semibold" style="color:var(--sp-purple)">Active</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-quiet shadow-sm h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="icon-chip me-3 bg-light">
                <i class="fas fa-server text-muted"></i>
              </div>
              <div>
                <div class="small text-muted">System Load</div>
                <div class="small fw-semibold text-secondary">Normal</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

{# Charts #}
<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: getComputedStyle(document.documentElement).getPropertyValue('--sp-primary').trim() || 'rgb(59,130,246)',
        backgroundColor: 'rgba(59,130,246,0.12)',
        tension: 0.2,
        fill: true,
        pointRadius: 2
      }]
    },
    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 %}