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

{% block title %}Monitoring — cmdop admin{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/apexcharts@5.11.0/dist/apexcharts.min.js"></script>
{% endblock %}

{% block content %}
{# Plan 58 — wrapper chrome only. ApexCharts options below are NOT
   modified (per Plan 48 styling agent note) — only the surrounding
   header, KPI strip, and live indicator. #}
<div class="space-y-6" x-data="monitoring()">
  <!-- Header -->
  <div class="flex items-center justify-between gap-3 flex-wrap">
    <div>
      <h1 class="text-[20px] font-semibold text-ink-100 tracking-tight">gRPC Monitoring</h1>
      <p class="text-[12px] text-ink-500 mt-1">Real-time connection and network metrics — relay-wide</p>
    </div>
    <div class="flex items-center gap-3">
      <div class="flex items-center gap-1.5 text-[11px]"
           :title="wsConnected ? 'Subscribed to monitoring:grpc' : 'WebSocket not connected'">
        <span class="w-1.5 h-1.5 rounded-full" :class="wsConnected ? 'bg-emerald-400' : 'bg-red-400'"></span>
        <span class="text-ink-400 uppercase tracking-wider font-mono" x-text="wsConnected ? 'live' : 'offline'"></span>
      </div>
      <div class="text-[11px] text-ink-500 font-mono" x-show="lastUpdateRel"
           :title="lastUpdateAbs">
        updated <span x-text="lastUpdateRel"></span>
      </div>
    </div>
  </div>

  <!-- Stat cards -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
    {% from 'admin/components/ui.html' import card %}

    {% call card() %}
    <div class="flex items-center justify-between">
      <div class="min-w-0">
        <p class="text-[11px] text-ink-500 uppercase tracking-wider">Active streams</p>
        <p class="text-[22px] font-mono font-semibold tracking-tight text-ink-100 mt-1" x-text="stats.active_streams ?? '—'"></p>
      </div>
      <div class="w-9 h-9 rounded-md bg-white/[0.04] border border-white/[0.06] flex items-center justify-center flex-shrink-0">
        <i data-lucide="radio" class="w-4 h-4 text-cmdop-400"></i>
      </div>
    </div>
    {% endcall %}

    {% call card() %}
    <div class="flex items-center justify-between">
      <div class="min-w-0">
        <p class="text-[11px] text-ink-500 uppercase tracking-wider">Total RPCs</p>
        <p class="text-[22px] font-mono font-semibold tracking-tight text-ink-100 mt-1" x-text="fmt(stats.rpc_total)"></p>
        <p class="text-[11px] text-ink-500 mt-0.5">
          <span class="text-emerald-300" x-text="fmt(stats.rpc_success)"></span>
          <span class="text-ink-700">·</span>
          <span class="text-red-300" x-text="fmt(stats.rpc_error)"></span>
        </p>
      </div>
      <div class="w-9 h-9 rounded-md bg-white/[0.04] border border-white/[0.06] flex items-center justify-center flex-shrink-0">
        <i data-lucide="check-circle-2" class="w-4 h-4 text-cmdop-400"></i>
      </div>
    </div>
    {% endcall %}

    {% call card() %}
    <div class="flex items-center justify-between">
      <div class="min-w-0">
        <p class="text-[11px] text-ink-500 uppercase tracking-wider">Messages in</p>
        <p class="text-[22px] font-mono font-semibold tracking-tight text-ink-100 mt-1" x-text="fmt(stats.stream_messages_in)"></p>
      </div>
      <div class="w-9 h-9 rounded-md bg-white/[0.04] border border-white/[0.06] flex items-center justify-center flex-shrink-0">
        <i data-lucide="arrow-down-right" class="w-4 h-4 text-cmdop-400"></i>
      </div>
    </div>
    {% endcall %}

    {% call card() %}
    <div class="flex items-center justify-between">
      <div class="min-w-0">
        <p class="text-[11px] text-ink-500 uppercase tracking-wider">Messages out</p>
        <p class="text-[22px] font-mono font-semibold tracking-tight text-ink-100 mt-1" x-text="fmt(stats.stream_messages_out)"></p>
      </div>
      <div class="w-9 h-9 rounded-md bg-white/[0.04] border border-white/[0.06] flex items-center justify-center flex-shrink-0">
        <i data-lucide="arrow-up-right" class="w-4 h-4 text-cmdop-400"></i>
      </div>
    </div>
    {% endcall %}
  </div>

  <!-- Latency percentile pills -->
  {% call card(title="Latency percentiles", subtitle="Current p50 / p95 / p99 — last window") %}
    <div class="grid grid-cols-3 gap-3 text-center">
      <div class="space-y-0.5">
        <p class="text-[11px] uppercase tracking-wider text-emerald-300">p50</p>
        <p class="text-[20px] font-mono font-semibold text-ink-100" x-text="ms(stats.latency_p50)"></p>
      </div>
      <div class="space-y-0.5">
        <p class="text-[11px] uppercase tracking-wider text-amber-300">p95</p>
        <p class="text-[20px] font-mono font-semibold text-ink-100" x-text="ms(stats.latency_p95)"></p>
      </div>
      <div class="space-y-0.5">
        <p class="text-[11px] uppercase tracking-wider text-red-300">p99</p>
        <p class="text-[20px] font-mono font-semibold text-ink-100" x-text="ms(stats.latency_p99)"></p>
      </div>
    </div>
  {% endcall %}

  <!-- Charts -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
    {% call card(title="Latency (ms)", subtitle="p50 stream — live via WebSocket") %}
    <div x-show="!wsConnected && !hasData" class="text-center py-6 text-[12px] text-ink-500">
      Waiting for live data…
    </div>
    <div id="latency-chart"></div>
    {% endcall %}

    {% call card(title="RPC rate", subtitle="Success vs error — live via WebSocket") %}
    <div x-show="!wsConnected && !hasData" class="text-center py-6 text-[12px] text-ink-500">
      Waiting for live data…
    </div>
    <div id="rpc-chart"></div>
    {% endcall %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function monitoring() {
  return {
    stats: {
      active_streams: null,
      rpc_total: 0,
      rpc_success: 0,
      rpc_error: 0,
      stream_messages_in: 0,
      stream_messages_out: 0,
      latency_p50: null,
      latency_p95: null,
      latency_p99: null,
    },
    wsConnected: false,
    latencyChart: null,
    rpcChart: null,
    MAX_POINTS: 60,
    latencyHistory: [],
    rpcHistory: [],
    _unsub: null,
    _lastUpdateMs: null,
    _tickTimer: null,
    lastUpdateRel: '',
    lastUpdateAbs: '',
    hasData: false,

    fmt(n) {
      if (n === null || n === undefined) return '—';
      try { return Number(n).toLocaleString(); } catch (_) { return String(n); }
    },
    ms(n) {
      if (n === null || n === undefined) return '—';
      return `${Number(n).toFixed(1)} ms`;
    },

    init() {
      this.initCharts();
      // Wait for Alpine WS store to be ready, then subscribe
      this.$watch('$store.ws.connected', (val) => {
        this.wsConnected = val;
        if (val && !this._unsub) {
          this.subscribe();
        }
      });
      // If already connected (page loaded after WS was up)
      this.$nextTick(() => {
        if (Alpine.store('ws').connected) {
          this.wsConnected = true;
          this.subscribe();
        }
      });
      // Tick "updated Xs ago" once a second.
      this._tickTimer = setInterval(() => this._refreshRelative(), 1000);
    },

    _refreshRelative() {
      if (!this._lastUpdateMs) {
        this.lastUpdateRel = '';
        return;
      }
      const sec = Math.max(0, Math.round((Date.now() - this._lastUpdateMs) / 1000));
      this.lastUpdateRel = sec < 60 ? `${sec}s ago`
        : sec < 3600 ? `${Math.round(sec / 60)}m ago`
        : `${Math.round(sec / 3600)}h ago`;
    },

    subscribe() {
      const ws = Alpine.store('ws');
      // First, get a full snapshot via RPC
      ws.rpc('monitoring.grpc_stats', { include_history: true, history_seconds: 60 })
        .then((data) => {
          if (data) {
            Object.assign(this.stats, data);
            if (data.latency_history && data.latency_history.length > 0) {
              this.latencyHistory = data.latency_history.slice(-this.MAX_POINTS);
              this.updateLatencyChart();
              this.hasData = true;
            }
            this._lastUpdateMs = Date.now();
            this.lastUpdateAbs = new Date().toLocaleString();
            this._refreshRelative();
          }
        })
        .catch((e) => console.warn('initial RPC failed', e));

      // Then subscribe to live updates
      this._unsub = ws.subscribe('monitoring:grpc', { interval_ms: 1000 }, (event) => {
        if (!event) return;
        this.stats.active_streams = event.active_streams;
        this.stats.rpc_total = event.rpc_total;
        this.stats.rpc_success = event.rpc_success;
        this.stats.rpc_error = event.rpc_error;
        this.stats.stream_messages_in = event.stream_messages_in;
        this.stats.stream_messages_out = event.stream_messages_out;
        this.stats.latency_p50 = event.latency_p50;
        this.stats.latency_p95 = event.latency_p95;
        this.stats.latency_p99 = event.latency_p99;

        // Append to charts
        const now = event.timestamp * 1000;
        if (event.latency_p50 != null) {
          this.latencyHistory.push({ t: now, v: event.latency_p50 });
          if (this.latencyHistory.length > this.MAX_POINTS) {
            this.latencyHistory = this.latencyHistory.slice(-this.MAX_POINTS);
          }
          this.updateLatencyChart();
        }

        this.rpcHistory.push({ x: now, success: event.rpc_success, error: event.rpc_error });
        if (this.rpcHistory.length > this.MAX_POINTS) {
          this.rpcHistory = this.rpcHistory.slice(-this.MAX_POINTS);
        }
        this.updateRpcChart();
        this.hasData = true;
        this._lastUpdateMs = Date.now();
        this.lastUpdateAbs = new Date().toLocaleString();
        this._refreshRelative();
      });
    },

    initCharts() {
      const chartBase = {
        animations: { enabled: false },
        toolbar: { show: false },
        background: 'transparent',
        foreColor: '#9ca3af',
      };

      this.latencyChart = new ApexCharts(document.querySelector('#latency-chart'), {
        chart: { ...chartBase, type: 'area', height: 280 },
        theme: { mode: 'dark' },
        stroke: { curve: 'smooth', width: 2 },
        fill: { type: 'gradient', gradient: { shadeIntensity: 0.1 } },
        dataLabels: { enabled: false },
        xaxis: { type: 'datetime', labels: { style: { colors: '#6b7280' } } },
        yaxis: {
          labels: {
            style: { colors: '#6b7280' },
            formatter: (val) => val != null ? Number(val).toFixed(0) : '—',
          },
        },
        grid: { borderColor: '#374151', strokeDashArray: 4 },
        series: [],
      });
      this.latencyChart.render();

      this.rpcChart = new ApexCharts(document.querySelector('#rpc-chart'), {
        chart: { ...chartBase, type: 'bar', height: 280 },
        theme: { mode: 'dark' },
        plotOptions: { bar: { columnWidth: '60%', borderRadius: 2 } },
        dataLabels: { enabled: false },
        xaxis: { type: 'datetime', labels: { style: { colors: '#6b7280' } } },
        yaxis: {
          labels: {
            style: { colors: '#6b7280' },
            formatter: (val) => val != null ? Number(val).toFixed(0) : '—',
          },
        },
        grid: { borderColor: '#374151', strokeDashArray: 4 },
        series: [],
      });
      this.rpcChart.render();
    },

    updateLatencyChart() {
      this.latencyChart.updateSeries([{
        name: 'Latency (ms)',
        data: this.latencyHistory.map(p => ({ x: p.t, y: p.v })),
      }]);

      if (this.stats.latency_p50 != null) {
        this.latencyChart.updateOptions({
          annotations: {
            yaxis: [
              { y: this.stats.latency_p50, borderColor: '#10b981', label: { text: `p50: ${this.stats.latency_p50.toFixed(1)}ms`, style: { color: '#fff', background: '#10b981' } } },
              { y: this.stats.latency_p95, borderColor: '#f59e0b', label: { text: `p95: ${this.stats.latency_p95?.toFixed(1) ?? '—'}ms`, style: { color: '#fff', background: '#f59e0b' } } },
              { y: this.stats.latency_p99, borderColor: '#ef4444', label: { text: `p99: ${this.stats.latency_p99?.toFixed(1) ?? '—'}ms`, style: { color: '#fff', background: '#ef4444' } } },
            ],
          },
        });
      }
    },

    updateRpcChart() {
      this.rpcChart.updateSeries([
        { name: 'Success', data: this.rpcHistory.map(p => ({ x: p.x, y: p.success })) },
        { name: 'Error', data: this.rpcHistory.map(p => ({ x: p.x, y: p.error })) },
      ]);
    },

    destroy() {
      if (this._tickTimer) {
        clearInterval(this._tickTimer);
        this._tickTimer = null;
      }
      if (this._unsub) {
        this._unsub();
        this._unsub = null;
      }
      if (this.latencyChart) this.latencyChart.destroy();
      if (this.rpcChart) this.rpcChart.destroy();
    },
  };
}
</script>
{% endblock %}