{% extends "op_zz_frame.html" %}

{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex flex-column gap-2 mb-4">
    <div>
      <h1 class="ct-docs-page-h1-title" id="content">{{ _('OCPP Broker Monitor') }}</h1>
      <p class="text-muted mb-0">
        {{ _('Live-Überblick über den OCPP-Broker. Alle Aufrufe nutzen kurze Timeouts (%(seconds)s s) und markieren nicht erreichbare Ziele als offline.', seconds=timeout_seconds) }}
      </p>
    </div>
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
      <div>
        <div class="text-muted small">{{ _('API-Basis') }}</div>
        <div class="fw-semibold">{{ api_base or _('Offline') }}</div>
        {% if api_error %}
          <div class="text-danger small">{{ api_error }}</div>
        {% endif %}
      </div>
      <div class="d-flex flex-wrap gap-2 align-items-center">
        <span class="badge bg-info text-dark">{{ _('Timeout: %(seconds)s s', seconds=timeout_seconds) }}</span>
        <span class="badge bg-light text-dark">{{ _('Direktaufruf der Broker-API') }}</span>
      </div>
    </div>
    {% if warnings %}
      <div class="alert alert-warning mb-0" role="alert">
        <div class="fw-semibold mb-2">{{ _('Warnungen') }}</div>
        <ul class="mb-0 ps-3">
          {% for warning in warnings %}
            <li class="{% if warning.level == 'danger' %}text-danger fw-semibold{% endif %}">{{ warning.message }}</li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>

  <div class="row g-3">
    <div class="col-xl-4 col-lg-6">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">{{ _('WebSocket & FD-Status') }}</h5>
            <small class="text-muted">{{ _('Aktuelle Verbindungsauslastung') }}</small>
          </div>
          {% set ws_error = endpoint_results['websocket_counts']['error'] %}
          <span class="badge {% if ws_error %}bg-danger{% else %}bg-success{% endif %}">{% if ws_error %}{{ _('Offline') }}{% else %}{{ _('Online') }}{% endif %}</span>
        </div>
        <div class="card-body">
          {% if ws_error %}
            <p class="text-muted small mb-0">{{ ws_error }}</p>
          {% else %}
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Wallbox → Broker') }}</span>
              <span class="fw-semibold">{{ websocket_counts.get('wallbox_to_broker', 0) }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Broker → Backend') }}</span>
              <span class="fw-semibold">{{ websocket_counts.get('broker_to_backend', 0) }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Geschätzte FDs') }}</span>
              <span class="fw-semibold">{{ websocket_counts.get('estimated_fd_usage') if websocket_counts.get('estimated_fd_usage') is not none else '–' }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1">
              <span class="text-muted small">{{ _('Freie FDs (geschätzt)') }}</span>
              <span class="fw-semibold {% if derived.estimated_fd_free is not none and derived.estimated_fd_free < 150 %}text-danger{% endif %}">{{ websocket_counts.get('estimated_free') if websocket_counts.get('estimated_free') is not none else '–' }}</span>
            </div>
            {% if system_limits.get('estimation_note') %}
              <p class="text-muted small mt-2 mb-0">{{ system_limits.get('estimation_note') }}</p>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">{{ _('DB-Pool') }}</h5>
            <small class="text-muted">{{ _('Konfiguration vs. Live-Status') }}</small>
          </div>
          {% set db_error = endpoint_results['mysql_pool_status']['error'] or endpoint_results['db_pool_metrics']['error'] %}
          <span class="badge {% if db_error %}bg-danger{% else %}bg-success{% endif %}">{% if db_error %}{{ _('Offline') }}{% else %}{{ _('Online') }}{% endif %}</span>
        </div>
        <div class="card-body">
          {% if db_error %}
            <p class="text-muted small mb-0">{{ db_error }}</p>
          {% else %}
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Konfiguriert') }}</span>
              <span class="fw-semibold">{{ mysql_pool_status.get('configured', {}).get('minsize') or '–' }} / {{ mysql_pool_status.get('configured', {}).get('maxsize') or '–' }} ({{ _('min/max') }})</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Live') }}</span>
              <span class="fw-semibold">{{ mysql_pool_status.get('pool', {}).get('freesize') if mysql_pool_status.get('pool', {}).get('freesize') is not none else '–' }} {{ _('frei von') }} {{ mysql_pool_status.get('pool', {}).get('size') if mysql_pool_status.get('pool', {}).get('size') is not none else '–' }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Belegt') }}</span>
              <span class="fw-semibold {% if derived.pool_usage_ratio is not none and derived.pool_usage_ratio > 0.85 %}text-danger{% endif %}">
                {% if mysql_pool_status.get('pool', {}).get('used') is not none %}
                  {{ mysql_pool_status.get('pool', {}).get('used') }}
                  {% if derived.pool_usage_ratio is not none %} ({{ (derived.pool_usage_ratio * 100) | round(1) }}%){% endif %}
                {% else %}
                  –
                {% endif %}
              </span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Queue') }}</span>
              <span class="fw-semibold">{{ db_metrics.get('waiting', 0) }} {{ _('wartend') }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1">
              <span class="text-muted small">{{ _('Latenz') }}</span>
              <span class="fw-semibold">{{ _('Ø %(avg)s ms / P95 %(p95)s ms', avg=(db_metrics.get('latency_avg_ms', 0) | round(2) if db_metrics.get('latency_avg_ms') is not none else '–'), p95=(db_metrics.get('latency_p95_ms', 0) | round(2) if db_metrics.get('latency_p95_ms') is not none else '–')) }}</span>
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">{{ _('Pings & Uptime') }}</h5>
            <small class="text-muted">{{ _('connectionStats') }}</small>
          </div>
          {% set conn_error = endpoint_results['connection_stats']['error'] %}
          <span class="badge {% if conn_error %}bg-danger{% else %}bg-success{% endif %}">{% if conn_error %}{{ _('Offline') }}{% else %}{{ _('Online') }}{% endif %}</span>
        </div>
        <div class="card-body">
          {% if conn_error %}
            <p class="text-muted small mb-0">{{ conn_error }}</p>
          {% else %}
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Pings gesendet') }}</span>
              <span class="fw-semibold">{{ connection_totals.get('pings_sent', 0) }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Fehlgeschlagen') }}</span>
              <span class="fw-semibold">{{ connection_totals.get('pings_failed', 0) }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Erfolgsquote') }}</span>
              <span class="fw-semibold {% if derived.connection_success_rate is not none and derived.connection_success_rate < 0.98 %}text-danger{% endif %}">
                {% if connection_totals.get('success_rate') is not none %}
                  {{ (connection_totals.get('success_rate') * 100) | round(2) }}%
                {% else %}–{% endif %}
              </span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('RTT avg / p95') }}</span>
              <span class="fw-semibold">{{ connection_totals.get('avg_rtt_ms') | round(2) if connection_totals.get('avg_rtt_ms') is not none else '–' }} ms / {{ connection_totals.get('p95_rtt_ms') | round(2) if connection_totals.get('p95_rtt_ms') is not none else '–' }} ms</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1">
              <span class="text-muted small">{{ _('Uptime') }}</span>
              <span class="fw-semibold {% if derived.uptime_ratio is not none and derived.uptime_ratio < 0.99 %}text-danger{% endif %}">
                {% if connection_totals.get('uptime_ratio') is not none %}
                  {{ (connection_totals.get('uptime_ratio') * 100) | round(2) }}%
                {% else %}–{% endif %}
              </span>
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-xl-6 col-lg-6">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">{{ _('Reconnects & Handshakes') }}</h5>
            <small class="text-muted">{{ _('Fenster: %(seconds)s s', seconds=reconnect_stats.get('window_seconds', '–')) }}</small>
          </div>
          {% set rec_error = endpoint_results['reconnect_stats']['error'] %}
          <span class="badge {% if rec_error %}bg-danger{% else %}bg-success{% endif %}">{% if rec_error %}{{ _('Offline') }}{% else %}{{ _('Online') }}{% endif %}</span>
        </div>
        <div class="card-body">
          {% if rec_error %}
            <p class="text-muted small mb-0">{{ rec_error }}</p>
          {% else %}
            <div class="d-flex flex-wrap gap-2 mb-3">
              <span class="badge bg-light text-dark">{{ _('Reconnects (Fenster): %(count)s', count=reconnect_totals.get('reconnects', 0)) }}</span>
              <span class="badge bg-light text-dark">{{ _('Rate/Tag: %(rate)s (Warnung ≥ %(threshold)s)', rate=(reconnect_totals.get('reconnect_rate_per_day') | round(2) if reconnect_totals.get('reconnect_rate_per_day') is not none else '–'), threshold=reconnect_thresholds.get('reconnect_rate_per_day') or '–') }}</span>
              <span class="badge bg-success">{{ _('Handshake OK: %(count)s', count=reconnect_totals.get('handshake_success', 0)) }}</span>
              <span class="badge {% if reconnect_totals.get('handshake_failure', 0) and reconnect_thresholds.get('handshake_failures') and reconnect_totals.get('handshake_failure') >= reconnect_thresholds.get('handshake_failures') %}bg-danger{% else %}bg-light text-dark{% endif %}">
                {{ _('Handshake NOK: %(count)s (Warnung ≥ %(threshold)s)', count=reconnect_totals.get('handshake_failure', 0), threshold=reconnect_thresholds.get('handshake_failures') or '–') }}
              </span>
            </div>
            <h6 class="text-muted">{{ _('Handshake-Fehler nach Grund (letzte %(seconds)s s)', seconds=recent_handshakes.get('window_seconds', '–')) }}</h6>
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th>{{ _('Grund') }}</th>
                    <th class="text-end">{{ _('Anzahl') }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% set by_reason = recent_handshakes.get('by_reason', {}) %}
                  {% if by_reason %}
                    {% for reason, count in by_reason.items() %}
                      <tr>
                        <td>{{ reason }}</td>
                        <td class="text-end">{{ count }}</td>
                      </tr>
                    {% endfor %}
                  {% else %}
                    <tr><td colspan="2" class="text-muted">{{ _('Keine Fehler im Fenster.') }}</td></tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-xl-6 col-lg-6">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">{{ _('Systemlimits') }}</h5>
            <small class="text-muted">{{ _('ulimit & FD Snapshot') }}</small>
          </div>
          {% set sys_error = endpoint_results['system_limits']['error'] %}
          <span class="badge {% if sys_error %}bg-danger{% else %}bg-success{% endif %}">{% if sys_error %}{{ _('Offline') }}{% else %}{{ _('Online') }}{% endif %}</span>
        </div>
        <div class="card-body">
          {% if sys_error %}
            <p class="text-muted small mb-0">{{ sys_error }}</p>
          {% else %}
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('ulimit (soft/hard)') }}</span>
              <span class="fw-semibold">{{ system_limits.get('ulimit_no_file_soft', '–') }} / {{ system_limits.get('ulimit_no_file_hard', '–') }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('FD Nutzung') }}</span>
              <span class="fw-semibold">{{ system_limits.get('estimated_fd_usage', '–') }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('FD frei (geschätzt)') }}</span>
              <span class="fw-semibold {% if system_limits.get('estimated_free') is not none and system_limits.get('estimated_free') < 150 %}text-danger{% endif %}">{{ system_limits.get('estimated_free', '–') }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1">
              <span class="text-muted small">{{ _('Wallbox / Backend') }}</span>
              <span class="fw-semibold">{{ system_limits.get('wallbox_to_broker', '–') }} / {{ system_limits.get('broker_to_backend', '–') }}</span>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm mt-4">
    <div class="card-header">
      <h5 class="mb-0">{{ _('API-Endpunkte') }}</h5>
      <small class="text-muted">{{ _('Alle Abfragen werden unabhängig geprüft; Fehler bleiben isoliert.') }}</small>
    </div>
    <div class="card-body table-responsive">
      {% set endpoint_labels = {
        'broker_status': _('Broker Status'),
        'db_pool_metrics': _('DB-Pool Metrics'),
        'connection_stats': _('Connection Stats'),
        'reconnect_stats': _('Reconnect Stats'),
        'websocket_counts': _('WebSocket Counts'),
        'mysql_pool_status': _('MySQL Pool Status'),
        'system_limits': _('System Limits')
      } %}
      <table class="table table-sm align-middle mb-0">
        <thead>
          <tr>
            <th>{{ _('Endpoint') }}</th>
            <th>{{ _('Status') }}</th>
            <th>{{ _('Details') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for key, label in endpoint_labels.items() %}
            {% set result = endpoint_results.get(key, {}) %}
            <tr>
              <td>{{ label }}</td>
              <td>
                {% if result.error %}
                  <span class="badge bg-danger">{{ _('Offline') }}</span>
                {% else %}
                  <span class="badge bg-success">{{ _('OK') }}</span>
                {% endif %}
              </td>
              <td>
                {% if result.error %}
                  <span class="text-muted">{{ result.error }}</span>
                {% else %}
                  <span class="text-muted">{{ result.url }}</span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</main>
{% endblock %}