{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h2 class="ct-docs-page-h1-title" id="content">
      {{ _('OCPI Monitoring') }}
    </h2>
    <p class="text-muted mb-3">{{ _('Check whether the OCPI API service script is running and where to restart it.') }}</p>
  </div>

  <style>
    .dashboard-kpi-card .card-header {
      align-items: center;
    }

    .kpi-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .kpi-summary__item {
      background: var(--dashboard-card-bg, #f8f9fc);
      border: 1px solid var(--dashboard-card-border, transparent);
      border-radius: 10px;
      padding: 10px 12px;
      box-shadow: var(--dashboard-summary-shadow, 0 2px 6px rgba(15, 23, 42, 0.08));
    }

    .kpi-summary__label {
      font-size: 12px;
      color: var(--dashboard-text-muted, #6c757d);
      margin-bottom: 4px;
      display: block;
    }

    .kpi-summary__value {
      font-weight: 700;
      font-size: 18px;
      color: var(--dashboard-text-primary, #14213d);
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
    }

    .kpi-panel {
      background: var(--dashboard-card-bg, #ffffff);
      border: 1px solid var(--dashboard-card-border, rgba(226, 232, 240, 0.7));
      border-radius: 12px;
      padding: 12px;
      box-shadow: var(--dashboard-card-shadow, 0 8px 24px rgba(15, 23, 42, 0.08));
    }

    .kpi-panel__title {
      font-size: 13px;
      font-weight: 700;
      color: var(--dashboard-text-primary, #14213d);
      margin-bottom: 8px;
    }

    .kpi-chip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
    }

    .kpi-chip {
      background: var(--dashboard-badge-bg, #f8f9fc);
      border: 1px solid var(--dashboard-badge-border, transparent);
      border-radius: 10px;
      padding: 10px;
    }

    .kpi-chip__label {
      font-size: 13px;
      font-weight: 700;
      color: var(--dashboard-text-primary, #14213d);
      display: block;
    }

    .kpi-chip__value {
      font-size: 18px;
      font-weight: 700;
      margin-top: 4px;
    }

    .kpi-chip__meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
      color: var(--dashboard-text-muted, #6c757d);
      font-size: 12px;
    }

    .kpi-alert-list {
      list-style: none;
      padding-left: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .kpi-alert {
      background: var(--dashboard-badge-bg, #f8f9fc);
      border: 1px solid var(--dashboard-badge-border, transparent);
      border-radius: 10px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      color: var(--dashboard-text-primary, #14213d);
    }

    .kpi-alert__meta {
      display: flex;
      gap: 6px;
      align-items: center;
      color: var(--dashboard-text-muted, #6c757d);
      font-size: 12px;
    }

    .kpi-job-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    .kpi-job {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--dashboard-badge-bg, #f8f9fc);
      border: 1px solid var(--dashboard-badge-border, transparent);
      border-radius: 10px;
      padding: 8px 10px;
    }

    .kpi-errors {
      line-height: 1.4;
    }
  </style>

  <div class="card">
    <div class="card-body">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
        <div>
          <p class="text-uppercase text-secondary text-xs mb-2">{{ _('Service status') }}</p>
          {% if status.running %}
            <span class="badge bg-success">{{ _('Running') }}</span>
          {% else %}
            <span class="badge bg-danger">{{ _('Stopped') }}</span>
          {% endif %}
          {% if status.error %}
            <div class="text-danger small mt-2">{{ status.error }}</div>
          {% endif %}
        </div>
        <div class="text-end">
          <p class="text-secondary text-xs mb-1">{{ _('Restart script') }}</p>
          <code class="d-block small">{{ status.restart_script }}</code>
          <div class="text-muted small">{{ _('Use this script to start or restart the OCPI API service.') }}</div>
        </div>
      </div>

      <hr class="my-3">
      <div class="row g-3">
        <div class="col-12 col-lg-4">
          <p class="text-secondary text-xs mb-1">{{ _('Service script') }}</p>
          <code class="d-block small">{{ status.script }}</code>
        </div>
        <div class="col-12 col-lg-4">
          <p class="text-secondary text-xs mb-1">{{ _('Log file') }}</p>
          <code class="d-block small">{{ status.log_file }}</code>
        </div>
        <div class="col-12 col-lg-4">
          <p class="text-secondary text-xs mb-1">{{ _('Detected PIDs') }}</p>
          {% if status.pids %}
            <ul class="mb-0 ps-3">
              {% for pid in status.pids %}
                <li><code>{{ pid }}</code></li>
              {% endfor %}
            </ul>
          {% else %}
            <span class="text-muted small">{{ _('No running process detected.') }}</span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-4 mb-4 dashboard-kpi-card">
    <div class="card-header pb-0 d-flex flex-wrap align-items-center justify-content-between gap-2">
      <div>
        <h6 class="mb-0">{{ kpi_translations.ocpi_kpis }}</h6>
        <p class="text-xs text-muted mb-0">{{ _('Aggregated OCPI success, latency, webhook, and certificate KPIs.') }}</p>
      </div>
      <div class="d-flex align-items-center gap-2">
        <span class="badge bg-light text-dark text-uppercase" id="kpiUpdatedBadge">{{ kpi_translations.updated_label }}</span>
        <button type="button" class="btn btn-outline-secondary btn-sm" id="refreshDashboardKpis" aria-label="{{ _('Refresh') }}">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
            <path d="M12 6V3L8 7l4 4V8c2.21 0 4 1.79 4 4 0 1.1-.45 2.1-1.17 2.83l1.42 1.42A5.98 5.98 0 0 0 18 12c0-3.31-2.69-6-6-6zm-4.83 1.17A5.98 5.98 0 0 0 6 12c0 3.31 2.69 6 6 6v3l4-4-4-4v3c-2.21 0-4-1.79-4-4 0-1.1.45-2.1 1.17-2.83L7.76 7.17z" fill="currentColor"/>
          </svg>
          {{ _('Refresh') }}
        </button>
      </div>
    </div>
    <div class="card-body pt-3">
      <div class="kpi-summary">
        <div class="kpi-summary__item">
          <span class="kpi-summary__label">{{ kpi_translations.success_rate }}</span>
          <span class="kpi-summary__value" id="kpiSummarySuccess">–</span>
        </div>
        <div class="kpi-summary__item">
          <span class="kpi-summary__label">{{ kpi_translations.timeout_rate }}</span>
          <span class="kpi-summary__value" id="kpiSummaryTimeouts">–</span>
        </div>
        <div class="kpi-summary__item">
          <span class="kpi-summary__label">{{ kpi_translations.avg_latency }}</span>
          <span class="kpi-summary__value" id="kpiSummaryLatency">–</span>
        </div>
        <div class="kpi-summary__item">
          <span class="kpi-summary__label">{{ kpi_translations.samples }}</span>
          <span class="kpi-summary__value" id="kpiSummarySamples">–</span>
        </div>
      </div>
      <div class="kpi-grid">
        <div class="kpi-panel">
          <div class="kpi-panel__title">{{ kpi_translations.module_success }}</div>
          <div class="kpi-chip-grid" id="kpiModuleChips"></div>
        </div>
        <div class="kpi-panel">
          <div class="kpi-panel__title">{{ kpi_translations.partner_success }}</div>
          <div class="kpi-chip-grid" id="kpiPartnerChips"></div>
        </div>
        <div class="kpi-panel">
          <div class="kpi-panel__title">{{ kpi_translations.health_alerts }}</div>
          <ul class="kpi-alert-list" id="kpiAlertList"></ul>
          <div class="kpi-job-list" id="kpiJobList"></div>
        </div>
      </div>
      <div class="kpi-errors text-xs text-danger mt-2" id="kpiErrorBox" hidden></div>
    </div>
  </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var moduleContainer = document.getElementById('kpiModuleChips');
  if (!moduleContainer) {
    return;
  }

  var partnerContainer = document.getElementById('kpiPartnerChips');
  var alertList = document.getElementById('kpiAlertList');
  var jobList = document.getElementById('kpiJobList');
  var errorBox = document.getElementById('kpiErrorBox');
  var refreshButton = document.getElementById('refreshDashboardKpis');
  var summarySuccess = document.getElementById('kpiSummarySuccess');
  var summaryTimeouts = document.getElementById('kpiSummaryTimeouts');
  var summaryLatency = document.getElementById('kpiSummaryLatency');
  var summarySamples = document.getElementById('kpiSummarySamples');
  var updatedBadge = document.getElementById('kpiUpdatedBadge');
  var metricsUrl = "{{ url_for('api_dashboard_metrics') }}";
  var texts = {{ kpi_translations|tojson }};
  var initialMetrics = {{ kpi_metrics|tojson }};

  function setText(el, value) {
    if (!el) return;
    el.textContent = value;
  }

  function formatPercent(value) {
    if (value === null || value === undefined || Number.isNaN(Number(value))) {
      return '–';
    }
    return Number(value).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + '%';
  }

  function formatMs(value) {
    if (value === null || value === undefined || Number.isNaN(Number(value))) {
      return '–';
    }
    return Number(value).toLocaleString(undefined, { maximumFractionDigits: 0 }) + ' ms';
  }

  function clearContainer(el) {
    if (el) {
      el.innerHTML = '';
    }
  }

  function renderErrors(errors) {
    if (!errorBox) return;
    if (errors && errors.length) {
      errorBox.removeAttribute('hidden');
      errorBox.textContent = errors.join(' • ');
    } else {
      errorBox.setAttribute('hidden', 'hidden');
      errorBox.textContent = '';
    }
  }

  function renderSummary(summary, metricsMeta) {
    summary = summary || {};
    setText(summarySuccess, formatPercent(summary.success_rate));
    setText(summaryTimeouts, formatPercent(summary.timeout_rate));
    var latencyParts = [];
    if (summary.avg_latency_ms !== null && summary.avg_latency_ms !== undefined) {
      latencyParts.push(formatMs(summary.avg_latency_ms));
    }
    if (summary.p95_latency_ms !== null && summary.p95_latency_ms !== undefined) {
      latencyParts.push(texts.p95_latency + ' ' + formatMs(summary.p95_latency_ms));
    }
    setText(summaryLatency, latencyParts.length ? latencyParts.join(' · ') : '–');
    setText(summarySamples, summary.total ? Number(summary.total).toLocaleString() : '–');

    var updatedLabel = summary.last_run_at || (metricsMeta && metricsMeta.updated_at) || '';
    if (!updatedLabel && summary.updated_at) {
      updatedLabel = summary.updated_at;
    }
    if (updatedBadge) {
      updatedBadge.textContent = updatedLabel ? texts.updated_label + ': ' + updatedLabel : texts.updated_label;
    }
  }

  function renderChips(container, entries) {
    clearContainer(container);
    if (!container || !entries || !entries.length) {
      return;
    }
    entries.forEach(function (entry) {
      var chip = document.createElement('div');
      chip.className = 'kpi-chip';
      var metaParts = [];
      metaParts.push(texts.timeout_rate + ': ' + formatPercent(entry.timeout_rate));
      metaParts.push(texts.avg_latency + ': ' + formatMs(entry.avg_latency_ms));
      chip.innerHTML = [
        '<span class="kpi-chip__label">', (entry.label || entry.key || ''), '</span>',
        '<span class="kpi-chip__value">', formatPercent(entry.success_rate), '</span>',
        '<div class="kpi-chip__meta">', metaParts.join(' · '), '</div>'
      ].join('');
      container.appendChild(chip);
    });
  }

  function statusBadgeClass(status) {
    if (status === 'ok') return 'badge bg-success';
    if (status === 'warning' || status === 'expiring' || status === 'unknown') return 'badge bg-warning text-dark';
    if (status === 'missing') return 'badge bg-secondary';
    return 'badge bg-danger';
  }

  function certificateStatusLabel(status) {
    if (status === 'ok') return texts.certificate_ok;
    if (status === 'expiring') return texts.certificate_expiring;
    if (status === 'missing') return texts.certificate_missing;
    if (status === 'expired') return texts.certificate_expired;
    return texts.warnings;
  }

  function renderAlerts(metrics) {
    if (!alertList) return;
    clearContainer(alertList);
    var alerts = metrics.alerts || [];
    if (!alerts.length) {
      var webhook = metrics.webhook || {};
      var webhookStatus = webhook.status || 'missing';
      var webhookLabel;
      if (webhookStatus === 'ok') {
        webhookLabel = texts.webhook_ok;
      } else if (webhookStatus === 'missing') {
        webhookLabel = texts.webhook_missing;
      } else {
        webhookLabel = texts.webhook_down;
      }
      var webhookItem = document.createElement('li');
      webhookItem.className = 'kpi-alert';
      var webhookMeta = [];
      if (webhook.endpoint) {
        webhookMeta.push(webhook.endpoint);
      }
      if (webhook.latency_ms !== null && webhook.latency_ms !== undefined) {
        webhookMeta.push(formatMs(webhook.latency_ms));
      }
      if (webhook.detail) {
        webhookMeta.push(webhook.detail);
      }
      webhookItem.innerHTML = [
        '<span class="', statusBadgeClass(webhookStatus), '">', webhookLabel, '</span>',
        '<span class="kpi-alert__meta">', webhookMeta.join(' · '), '</span>'
      ].join('');
      alertList.appendChild(webhookItem);

      (metrics.certificates || []).forEach(function (cert) {
        var certItem = document.createElement('li');
        certItem.className = 'kpi-alert';
        var status = cert.status || 'unknown';
        var metaParts = [];
        if (cert.expires_at) {
          metaParts.push(cert.expires_at);
        }
        if (typeof cert.days_remaining === 'number') {
          metaParts.push('≈ ' + cert.days_remaining + 'd');
        }
        certItem.innerHTML = [
          '<span class="', statusBadgeClass(status), '">', cert.label || '', ': ', certificateStatusLabel(status), '</span>',
          metaParts.length ? '<span class="kpi-alert__meta">' + metaParts.join(' · ') + '</span>' : ''
        ].join('');
        alertList.appendChild(certItem);
      });
      return;
    }

    alerts.forEach(function (entry) {
      var li = document.createElement('li');
      li.className = 'kpi-alert';
      li.innerHTML = [
        '<span class="', statusBadgeClass(entry.status || 'warning'), '">', entry.label || entry.type || '', '</span>',
        entry.meta ? '<span class="kpi-alert__meta">' + entry.meta + '</span>' : ''
      ].join('');
      alertList.appendChild(li);
    });
  }

  function renderJobs(metrics) {
    if (!jobList) return;
    clearContainer(jobList);
    var jobs = metrics.jobs || [];
    if (!jobs.length) {
      return;
    }
    jobs.forEach(function (job) {
      var jobRow = document.createElement('div');
      jobRow.className = 'kpi-job';
      var intervalText = job.interval ? job.interval + 's' : '–';
      jobRow.innerHTML = [
        '<div>',
        '<div class="fw-bold text-sm">', job.name || '-', '</div>',
        job.mode ? '<div class="text-xxs text-muted">' + job.mode + '</div>' : '',
        '</div>',
        '<div class="d-flex align-items-center gap-2">',
        '<span class="', statusBadgeClass(job.running ? 'ok' : 'missing'), '">', job.running ? texts.running : texts.stopped, '</span>',
        '<span class="text-xxs text-muted">', intervalText, '</span>',
        '</div>'
      ].join('');
      jobList.appendChild(jobRow);
    });
  }

  function renderMetrics(metrics) {
    metrics = metrics || {};
    renderSummary(metrics.summary || {}, metrics);
    renderChips(moduleContainer, metrics.modules || []);
    renderChips(partnerContainer, metrics.backends || []);
    renderAlerts(metrics);
    renderJobs(metrics);
    renderErrors(metrics.errors || []);
  }

  function setLoading(isLoading) {
    if (refreshButton) {
      refreshButton.disabled = !!isLoading;
    }
    if (updatedBadge) {
      updatedBadge.classList.toggle('text-muted', !!isLoading);
    }
  }

  function fetchMetrics(includeJobs) {
    setLoading(true);
    var url = metricsUrl + '?include_jobs=' + (includeJobs ? '1' : '0');
    fetch(url)
      .then(function (response) {
        return response
          .json()
          .then(function (payload) {
            return { status: response.status, payload: payload };
          })
          .catch(function () {
            return { status: response.status, payload: {} };
          });
      })
      .then(function (result) {
        var metrics = result.payload && result.payload.metrics ? result.payload.metrics : result.payload;
        if (!metrics) {
          throw new Error(texts.loading_failed);
        }
        renderMetrics(metrics);
      })
      .catch(function (error) {
        renderErrors([error && error.message ? error.message : texts.loading_failed]);
      })
      .finally(function () {
        setLoading(false);
      });
  }

  if (initialMetrics && Object.keys(initialMetrics).length) {
    renderMetrics(initialMetrics);
  }

  if (refreshButton) {
    refreshButton.addEventListener('click', function () {
      fetchMetrics(true);
    });
  }

  fetchMetrics(true);
});
</script>
{% endblock %}