{% 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 Server Monitor') }}</h1>
      <p class="text-muted mb-0">
        {{ _('Überwachen Sie den OCPP-Server (API-Port) in Echtzeit. Timeouts: %(seconds)s s pro Endpoint. Bei nicht erreichbarer API wird eine klare Fehlermeldung angezeigt.', 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>
        {% if window_minutes is not none %}
          <span class="badge bg-light text-dark">{{ _('Log-Fenster: %(minutes)s Minuten', minutes=window_minutes) }}</span>
        {% endif %}
        {% if liveness_threshold is not none %}
          <span class="badge bg-light text-dark">{{ _('Timeout-Warnschwelle: %(seconds)s s', seconds=liveness_threshold) }}</span>
        {% endif %}
      </div>
    </div>
    {% if api_unreachable %}
      <div class="alert alert-danger mb-0" role="alert">
        {{ _('OCPP-Server-API unreachable. Bitte Konnektivität und Konfiguration prüfen.') }}
      </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">{{ _('Verbindungen & FDs') }}</h5>
            <small class="text-muted">{{ _('WebSocket & FD-Metriken') }}</small>
          </div>
          {% set ws_error = endpoint_results['websocket_counts']['error'] %}
          <span class="badge {% if ws_error %}bg-danger{% else %}bg-success{% endif %}">{{ ws_error and _('Offline') or _('Online') }}</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">{{ _('Aktive Verbindungen') }}</span>
              <span class="fw-semibold">{{ connection_metrics.get('active', 0) }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Verfolgte Einträge') }}</span>
              <span class="fw-semibold">{{ connection_metrics.get('tracked_entries', 0) }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Open FDs') }}</span>
              <span class="fw-semibold">{{ fd_metrics.get('open_fds') if fd_metrics.get('open_fds') 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">{{ _('FD-Limit') }}</span>
              <span class="fw-semibold">{{ fd_metrics.get('fd_soft_limit') if fd_metrics.get('fd_soft_limit') is not none else '–' }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1">
              <span class="text-muted small">{{ _('FD-Auslastung') }}</span>
              <span class="fw-semibold {% if derived.fd_usage_ratio is not none and derived.fd_usage_ratio > 0.85 %}text-danger{% endif %}">
                {% if derived.fd_usage_ratio is not none %}
                  {{ (derived.fd_usage_ratio * 100) | round(2) }}%
                {% else %}
                  –
                {% endif %}
              </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">{{ _('DB-Pool') }}</h5>
            <small class="text-muted">{{ _('Größen & freie Slots') }}</small>
          </div>
          {% set db_error = endpoint_results['db_pool_status']['error'] %}
          <span class="badge {% if db_error %}bg-danger{% else %}bg-success{% endif %}">{{ db_error and _('Offline') or _('Online') }}</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">{{ _('Pool-Typ') }}</span>
              <span class="fw-semibold">{{ db_pool_status.get('pool_type') or '–' }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Max Slots') }}</span>
              <span class="fw-semibold">{{ derived.db_max_slots if derived.db_max_slots 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.db_usage_ratio is not none and derived.db_usage_ratio > 0.85 %}text-danger{% endif %}">
                {% if derived.db_used is not none %}
                  {{ derived.db_used }}{% if derived.db_usage_ratio is not none %} ({{ (derived.db_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">{{ _('Frei') }}</span>
              <span class="fw-semibold">{{ derived.db_free_slots if derived.db_free_slots is not none else '–' }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1">
              <span class="text-muted small">{{ _('Min/Max') }}</span>
              <span class="fw-semibold">
                {% if db_pool_status.get('minsize') is not none or db_pool_status.get('maxsize') is not none %}
                  {{ db_pool_status.get('minsize') or '–' }} / {{ db_pool_status.get('maxsize') or '–' }}
                {% else %}
                  – / –
                {% endif %}
              </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">{{ _('Log-Queue') }}</h5>
            <small class="text-muted">{{ _('Füllstand & Drops') }}</small>
          </div>
          {% set log_error = endpoint_results['log_queue_metrics']['error'] %}
          <span class="badge {% if log_error %}bg-danger{% else %}bg-success{% endif %}">{{ log_error and _('Offline') or _('Online') }}</span>
        </div>
        <div class="card-body">
          {% if log_error %}
            <p class="text-muted small mb-0">{{ log_error }}</p>
          {% else %}
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Größe') }}</span>
              <span class="fw-semibold">{{ log_queue_metrics.get('size', 0) }} / {{ log_queue_metrics.get('maxsize') or '∞' }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Füllgrad') }}</span>
              <span class="fw-semibold {% if derived.log_fill_ratio is not none and derived.log_fill_ratio > 0.7 %}text-danger{% endif %}">
                {% if derived.log_fill_ratio is not none %}
                  {{ (derived.log_fill_ratio * 100) | round(1) }}%
                {% else %}–{% endif %}
              </span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Drops gesamt') }}</span>
              <span class="fw-semibold">{{ log_queue_metrics.get('drop_count', 0) }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
              <span class="text-muted small">{{ _('Drops (%(minutes)s min)', minutes=(derived.log_window or log_queue_metrics.get('recent_window_minutes') or '–')) }}</span>
              <span class="fw-semibold {% if derived.log_drop_recent %}text-danger{% endif %}">{{ derived.log_drop_recent if derived.log_drop_recent is not none else '–' }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center py-1">
              <span class="text-muted small">{{ _('Letzter Drop') }}</span>
              <span class="fw-semibold">{{ log_queue_metrics.get('last_drop_at') or '–' }}</span>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mt-1">
    <div class="col-xl-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">{{ _('Action-Metriken') }}</h5>
            <small class="text-muted">{{ _('Erfolgs- & Fehlerzahlen inkl. P95') }}</small>
          </div>
          {% set action_error = endpoint_results['action_metrics']['error'] %}
          <span class="badge {% if action_error %}bg-danger{% else %}bg-success{% endif %}">{{ action_error and _('Offline') or _('Online') }}</span>
        </div>
        <div class="card-body">
          {% if action_error %}
            <p class="text-muted small mb-0">{{ action_error }}</p>
          {% else %}
            {% if action_warnings %}
              <div class="alert alert-warning py-2">
                <strong>{{ _('Warnungen:') }}</strong>
                <ul class="mb-0 ps-3">
                  {% for warn in action_warnings %}
                    <li>{{ warn.action }} – {{ warn.code }} ({{ warn.count }})</li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th>{{ _('Action') }}</th>
                    <th class="text-end">{{ _('Success') }}</th>
                    <th class="text-end">{{ _('Errors') }}</th>
                    <th class="text-end">{{ _('Avg (ms)') }}</th>
                    <th class="text-end">{{ _('P95 (ms)') }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% if action_metrics %}
                    {% for name, metric in action_metrics.items() %}
                      <tr>
                        <td><code>{{ name }}</code></td>
                        <td class="text-end">{{ metric.get('success', 0) }}</td>
                        <td class="text-end {% if metric.get('call_errors') %}text-danger{% endif %}">{{ metric.get('call_errors', 0) }}</td>
                        <td class="text-end">{{ metric.get('avg_ms') | round(2) if metric.get('avg_ms') is not none else '–' }}</td>
                        <td class="text-end">{{ metric.get('p95_ms') | round(2) if metric.get('p95_ms') is not none else '–' }}</td>
                      </tr>
                    {% endfor %}
                  {% else %}
                    <tr><td colspan="5" class="text-muted">{{ _('Keine Action-Metriken verfügbar.') }}</td></tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-xl-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">{{ _('Stations-Liveness') }}</h5>
            <small class="text-muted">{{ _('Risiken & verbleibende Zeit') }}</small>
          </div>
          {% set live_error = endpoint_results['station_liveness']['error'] %}
          <span class="badge {% if live_error %}bg-danger{% else %}bg-success{% endif %}">{{ live_error and _('Offline') or _('Online') }}</span>
        </div>
        <div class="card-body">
          {% if live_error %}
            <p class="text-muted small mb-0">{{ live_error }}</p>
          {% else %}
            <div class="d-flex flex-wrap gap-2 mb-2">
              <span class="badge bg-light text-dark">{{ _('Stations: %(count)s', count=liveness_entries | length) }}</span>
              <span class="badge {% if derived.risk_entries %}bg-danger{% else %}bg-light text-dark{% endif %}">{{ _('At Risk: %(count)s', count=derived.risk_entries | length) }}</span>
            </div>
            <div class="table-responsive" style="max-height: 420px; overflow-y: auto;">
              <table class="table table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th>{{ _('Station') }}</th>
                    <th>{{ _('Last Seen') }}</th>
                    <th class="text-end">{{ _('Seconds until Timeout') }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% if liveness_entries %}
                    {% for entry in liveness_entries %}
                      <tr class="{% if entry.at_risk or (entry.seconds_until_timeout is not none and entry.seconds_until_timeout <= 60) %}table-warning{% endif %}">
                        <td><code>{{ entry.station_id }}</code></td>
                        <td>{{ entry.last_seen or '–' }}</td>
                        <td class="text-end {% if entry.at_risk or (entry.seconds_until_timeout is not none and entry.seconds_until_timeout <= 60) %}text-danger fw-semibold{% endif %}">
                          {{ entry.seconds_until_timeout if entry.seconds_until_timeout is not none else '–' }}
                        </td>
                      </tr>
                    {% endfor %}
                  {% else %}
                    <tr><td colspan="3" class="text-muted">{{ _('Keine Live-Daten verfügbar.') }}</td></tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm mt-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <div>
        <h5 class="mb-0">{{ _('Station Snapshot') }}</h5>
        <small class="text-muted">{{ _('/api/connected_stations') }}</small>
      </div>
      {% set connected_error = endpoint_results['connected_stations']['error'] %}
      <span class="badge {% if connected_error %}bg-danger{% else %}bg-success{% endif %}">{{ connected_error and _('Offline') or _('Online') }}</span>
    </div>
    <div class="card-body">
      {% if connected_error %}
        <p class="text-muted small mb-0">{{ connected_error }}</p>
      {% else %}
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr>
                <th>{{ _('Station') }}</th>
                <th>{{ _('Connected since') }}</th>
                <th>{{ _('Last seen') }}</th>
              </tr>
            </thead>
            <tbody>
              {% set stations = connected_snapshot.get('stations', []) %}
              {% if stations %}
                {% for station in stations %}
                  <tr>
                    <td><code>{{ station.station_id }}</code></td>
                    <td>{{ station.connected_since or '–' }}</td>
                    <td>{{ station.last_seen or '–' }}</td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr><td colspan="3" class="text-muted">{{ _('Keine verbundenen Stationen.') }}</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      {% endif %}
    </div>
  </div>
</main>
{% endblock %}