{% extends "base.html" %}

{% block title %}Overview{% endblock %}

{% block content %}
<!-- Health Banner -->
<div id="health-banner" class="alert alert-success mb-6 shadow-sm">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
  </svg>
  <span id="health-text">Loading health status...</span>
</div>

<!-- KPI Cards -->
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
  <!-- Total Processed -->
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Total Processed</div>
      <div class="stat-value text-lg font-mono-metric" data-kpi id="kpi-total">--</div>
      <div class="stat-desc">
        <span class="sparkline-container" id="spark-total"></span>
      </div>
    </div>
  </div>

  <!-- Throughput -->
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Throughput</div>
      <div class="stat-value text-lg font-mono-metric" data-kpi id="kpi-throughput">--</div>
      <div class="stat-desc text-xs" id="kpi-throughput-unit">/sec</div>
    </div>
  </div>

  <!-- Avg Latency -->
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Avg Latency</div>
      <div class="stat-value text-lg font-mono-metric" data-kpi id="kpi-latency">--</div>
      <div class="stat-desc">
        <span class="sparkline-container" id="spark-latency"></span>
      </div>
    </div>
  </div>

  <!-- Error Rate -->
  <a href="/messages" class="stats shadow-sm bg-base-100 hover:shadow-md transition-shadow cursor-pointer">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Error Rate</div>
      <div class="stat-value text-lg font-mono-metric" data-kpi id="kpi-error-rate">--</div>
      <div class="stat-desc">
        <span class="sparkline-container" id="spark-errors"></span>
      </div>
    </div>
  </a>

  <!-- In Flight -->
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">In Flight</div>
      <div class="stat-value text-lg font-mono-metric" data-kpi id="kpi-inflight">--</div>
      <div class="stat-desc text-xs">pending messages</div>
    </div>
  </div>

  <!-- DLQ Depth -->
  <a href="/messages?tab=dlq" class="stats shadow-sm bg-base-100 hover:shadow-md transition-shadow cursor-pointer">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">DLQ Depth</div>
      <div class="stat-value text-lg font-mono-metric" data-kpi id="kpi-dlq">--</div>
      <div class="stat-desc">
        <span class="sparkline-container" id="spark-dlq"></span>
      </div>
    </div>
  </a>
</div>

<!-- Activity Timeline -->
<div class="card bg-base-100 shadow-sm mb-6">
  <div class="card-body p-4">
    <h2 class="card-title text-sm font-semibold mb-3">Activity Timeline</h2>
    <div id="activity-chart" style="height: 200px;" class="w-full">
      <div class="flex items-center justify-center h-full text-base-content/50">
        <span class="loading loading-spinner loading-sm mr-2"></span>
        Loading activity data...
      </div>
    </div>
  </div>
</div>

<!-- Event Breakdown -->
<div class="card bg-base-100 shadow-sm mb-6">
  <div class="card-body p-4">
    <h2 class="card-title text-sm font-semibold mb-3">Event Breakdown</h2>
    <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3" id="event-breakdown">
      <!-- Filled by JS -->
    </div>
  </div>
</div>

<!-- Subscription Health + Recent Errors -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

  <!-- Subscription Health Summary -->
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body p-4">
      <h2 class="card-title text-sm font-semibold mb-3">
        Subscription Health
        <span class="badge badge-sm badge-ghost" id="sub-count">0</span>
      </h2>
      <!-- Summary counters -->
      <div class="flex gap-4 mb-2" id="sub-summary">
        <div class="flex items-center gap-1.5 text-sm">
          <span class="status status-success status-xs"></span>
          <span id="sub-healthy" class="font-mono-metric">--</span> healthy
        </div>
        <div class="flex items-center gap-1.5 text-sm">
          <span class="status status-warning status-xs"></span>
          <span id="sub-lagging" class="font-mono-metric">--</span> lagging
        </div>
        <div class="flex items-center gap-1.5 text-sm">
          <span class="status status-error status-xs"></span>
          <span id="sub-dlq" class="font-mono-metric">--</span> DLQ
        </div>
      </div>
      <!-- Unhealthy rows (only shown when there are issues) -->
      <div id="sub-unhealthy" class="hidden">
        <div class="overflow-x-auto">
          <table class="table table-sm table-compact">
            <thead>
              <tr>
                <th class="w-8"></th>
                <th>Subscription</th>
                <th>Stream</th>
                <th class="text-right">Lag</th>
                <th class="text-right">Pending</th>
                <th class="text-right">DLQ</th>
              </tr>
            </thead>
            <tbody id="subscriptions-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Errors Summary -->
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body p-4">
      <h2 class="card-title text-sm font-semibold mb-3">
        Recent Errors
        <span class="badge badge-sm badge-error" id="error-count">0</span>
      </h2>
      <div class="flex gap-4 mb-2" id="error-summary">
        <div class="flex items-center gap-1.5 text-sm">
          <span class="status status-error status-xs"></span>
          <span id="error-failed" class="font-mono-metric">--</span> failed
        </div>
        <div class="flex items-center gap-1.5 text-sm">
          <span class="status status-warning status-xs"></span>
          <span id="error-dlq" class="font-mono-metric">--</span> DLQ
        </div>
      </div>
      <a href="/messages" class="link link-primary text-xs">View message details &rarr;</a>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/overview.js" defer></script>
{% endblock %}