{% extends "op_zz_frame.html" %}
{% macro render_run(run) -%}
  {% if not run %}
    <span class="text-muted small">{{ _('No data yet.') }}</span>
  {% else %}
    {% set ok = run.success %}
    <div class="d-flex flex-column gap-1">
      <div class="d-flex align-items-center gap-2">
        <span class="badge {% if ok %}bg-success{% else %}bg-danger{% endif %}">{{ _('Result') }}: {{ _('Success') if ok else _('Failed') }}</span>
        {% if run.backend_name %}
          <span class="text-sm">{{ _('Backend') }}: {{ run.backend_name }}</span>
        {% elif run.backend_id %}
          <span class="text-sm">{{ _('Backend') }}: #{{ run.backend_id }}</span>
        {% endif %}
      </div>
      <div class="text-muted small">{{ _('Duration') }}: {% if run.duration_ms is not none %}{{ run.duration_ms }} ms{% else %}–{% endif %}</div>
      <div class="text-muted small">{{ _('Created') }}: {{ run.created_at or '–' }}</div>
      {% if run.status_code %}
        <div class="text-muted small">{{ _('Status code') }}: {{ run.status_code }}</div>
      {% endif %}
      {% if run.detail %}
        <div class="text-muted small text-break">{{ run.detail }}</div>
      {% endif %}
    </div>
  {% endif %}
{%- endmacro %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h2 class="ct-docs-page-h1-title" id="content">
      {{ _('OCPI Sync Overview') }}
    </h2>
    <p class="text-muted mb-3">{{ _('Review the last pull/push attempts per module and retry failed exports.') }}</p>
  </div>

  {% if error %}
    <div class="alert alert-danger" role="alert">{{ error }}</div>
  {% endif %}

  <div class="card mb-4">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
          <h5 class="mb-1">{{ _('OCPI payload tester') }}</h5>
          <p class="text-muted small mb-0">{{ _('Upload OCPI data, validate per version, and optionally push it. Enable the dry-run switch to avoid persisting changes.') }}</p>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="payload-dry-run" checked>
          <label class="form-check-label" for="payload-dry-run">{{ _('Dry-run (validate only)') }}</label>
        </div>
      </div>
      <div class="row g-3 align-items-end">
        <div class="col-12 col-md-3">
          <label class="form-label" for="payload-module">{{ _('Module') }}</label>
          <select class="form-select" id="payload-module">
            {% for module in module_options %}
            <option value="{{ module }}">{{ module|capitalize }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-3">
          <label class="form-label" for="payload-version">{{ _('OCPI version') }}</label>
          <select class="form-select" id="payload-version">
            {% for version in version_options %}
            <option value="{{ version }}" {% if loop.first %}selected{% endif %}>{{ version }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label" for="payload-file">{{ _('Payload file (CSV/JSON)') }}</label>
          <input type="file" class="form-control" id="payload-file" accept=".csv,.json">
        </div>
        <div class="col-12 col-md-2 d-flex gap-2">
          <button class="btn btn-outline-primary btn-sm w-100" type="button" id="payload-validate-btn">{{ _('Test') }}</button>
          <button class="btn btn-primary btn-sm w-100" type="button" id="payload-import-btn">{{ _('Push') }}</button>
        </div>
      </div>
      <div class="mt-3">
        <div id="payload-result" class="alert alert-info d-none mb-2"></div>
        <div id="payload-issues" class="small text-muted"></div>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">{{ _('Sync status') }}</h5>
        <span class="text-muted small">{{ _('Last pull') }}/{{ _('Last push') }} / {{ _('Last retry') }}</span>
      </div>
      <div class="table-responsive">
        {% set module_labels = {"locations": _("Locations"), "tariffs": _("Tariffs"), "tokens": _("Tokens"), "sessions": _("Sessions"), "cdrs": _("CDRs")} %}
        <table class="table table-striped align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Module') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Last pull') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Last push') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Last retry') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in summary %}
              <tr>
                <td class="text-sm">{{ module_labels.get(entry.module, entry.module|capitalize) }}</td>
                <td class="text-sm">{{ render_run(entry.pull) }}</td>
                <td class="text-sm">{{ render_run(entry.push) }}</td>
                <td class="text-sm">{{ render_run(entry.retry) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">{{ _('Sync logs') }}</h5>
        <span class="text-muted small">{{ _('Recent scheduler results') }}</span>
      </div>
      <div class="table-responsive">
        <table class="table table-striped align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Module') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Direction') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Job') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Backend') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Result') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Duration') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Status code') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Response') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Created') }}</th>
            </tr>
          </thead>
          <tbody>
            {% set direction_labels = {"pull": _("Pull"), "push": _("Push"), "retry": _("Replay")} %}
            {% if logs %}
              {% for entry in logs %}
                <tr>
                  <td class="text-sm">{{ module_labels.get(entry.module, entry.module|capitalize) }}</td>
                  <td class="text-sm">{{ direction_labels.get(entry.direction, entry.direction|capitalize) }}</td>
                  <td class="text-sm">{{ entry.job_name or '—' }}</td>
                  <td class="text-sm">{{ entry.backend_name or entry.backend_id or '—' }}</td>
                  <td class="text-sm">
                    {% if entry.success %}
                      <span class="badge bg-success">{{ _('Success') }}</span>
                    {% else %}
                      <span class="badge bg-danger">{{ _('Failed') }}</span>
                    {% endif %}
                  </td>
                  <td class="text-sm">
                    {% if entry.duration_ms is not none %}
                      {{ entry.duration_ms }} ms
                    {% else %}
                      —
                    {% endif %}
                  </td>
                  <td class="text-sm">{{ entry.status_code or '—' }}</td>
                  <td class="text-sm text-break">{{ entry.detail or '—' }}</td>
                  <td class="text-sm">{{ entry.created_at or '—' }}</td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="9" class="text-center text-muted">{{ _('No logs yet.') }}</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">{{ _('Dead-letter queue') }}</h5>
        <span class="text-muted small">{{ _('Replay') }}</span>
      </div>
      <div class="table-responsive">
        <table class="table table-striped align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Record type') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Backend') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Station') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Transaction') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Retry count') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Status code') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Response') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Created') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Actions') }}</th>
            </tr>
          </thead>
          <tbody>
            {% if dead_letter %}
              {% for entry in dead_letter %}
                <tr>
                  <td class="text-sm">{{ entry.record_type|upper }}</td>
                  <td class="text-sm">{{ entry.backend_name or entry.backend_id or '—' }}</td>
                  <td class="text-sm">{{ entry.station_id or '—' }}</td>
                  <td class="text-sm">{{ entry.transaction_id or '—' }}</td>
                  <td class="text-sm">{{ entry.retry_count }}</td>
                  <td class="text-sm">{{ entry.response_status or '—' }}</td>
                  <td class="text-sm text-break">{{ entry.response_body or '—' }}</td>
                  <td class="text-sm">{{ entry.created_at or '—' }}</td>
                  <td class="text-sm">
                    <button class="btn ocpi-btn ocpi-btn-ghost ocpi-btn-sm" onclick="replayExport({{ entry.id }}, this)">
                      {{ _('Replay') }}
                    </button>
                  </td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="9" class="text-center text-muted">{{ _('No data yet.') }}</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">{{ _('Scheduler jobs') }}</h5>
        <span class="text-muted small">{{ _('Interval') }} (s)</span>
      </div>
      <div class="table-responsive">
        <table class="table table-striped align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Job') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Interval') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Mode') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Status') }}</th>
            </tr>
          </thead>
          <tbody>
            {% if jobs %}
              {% for job in jobs %}
                <tr>
                  <td class="text-sm">{{ job.name }}</td>
                  <td class="text-sm">{{ job.interval }}</td>
                  <td class="text-sm">{{ job.mode or '—' }}</td>
                  <td class="text-sm">
                    {% if job.running %}
                      <span class="badge bg-success">{{ _('Running') }}</span>
                    {% else %}
                      <span class="badge bg-secondary">{{ _('Stopped') }}</span>
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="4" class="text-center text-muted">{{ _('No data yet.') }}</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<script>
  const syncTranslations = {{ translations|tojson }};
  const payloadTranslations = {
    selectFile: '{{ _("Select a CSV or JSON file") }}',
    validationPassed: '{{ _("Validation passed") }}',
    validationErrors: '{{ _("Validation errors") }}',
    validationWarnings: '{{ _("Validation warnings") }}',
    pushDone: '{{ _("Push completed") }}',
    pushDryRun: '{{ _("Dry-run active: nothing was pushed.") }}',
    uploadFailed: '{{ _("Upload failed") }}',
  };
  const payloadForm = {
    moduleSelect: document.getElementById('payload-module'),
    versionSelect: document.getElementById('payload-version'),
    dryRunToggle: document.getElementById('payload-dry-run'),
    fileInput: document.getElementById('payload-file'),
    validateBtn: document.getElementById('payload-validate-btn'),
    importBtn: document.getElementById('payload-import-btn'),
    resultBox: document.getElementById('payload-result'),
    issueBox: document.getElementById('payload-issues'),
  };

  function escapePayloadText(value) {
    const div = document.createElement('div');
    div.textContent = value ?? '';
    return div.innerHTML;
  }

  function payloadNotify(message) {
    try { toastr.info(message); } catch (e) { alert(message); }
  }

  function setPayloadBusy(state) {
    [payloadForm.validateBtn, payloadForm.importBtn].forEach((btn) => {
      if (btn) btn.disabled = state;
    });
  }

  function renderPayloadIssues(issues) {
    if (!payloadForm.issueBox) return;
    const relevant = (issues || []).filter((issue) => issue.code !== 'validated_version');
    const source = relevant.length ? relevant : issues || [];
    if (!source.length) {
      payloadForm.issueBox.textContent = '';
      return;
    }
    const normalized = source.slice(0, 50).map((issue) => {
      const level = issue.level || '';
      const row = issue.row && issue.row > 0 ? `#${issue.row}: ` : '';
      const field = issue.field ? `${issue.field} – ` : '';
      const detail = issue.detail || issue.code || '';
      const css = level === 'error' ? 'text-danger' : 'text-warning';
      return `<div class="${css}">${escapePayloadText(row + field + detail)}</div>`;
    });
    payloadForm.issueBox.innerHTML = normalized.join('');
  }

  function setPayloadResult(message, levelClass, issues) {
    if (!payloadForm.resultBox) return;
    payloadForm.resultBox.className = `alert ${levelClass} mb-2`;
    payloadForm.resultBox.textContent = message;
    payloadForm.resultBox.classList.remove('d-none');
    renderPayloadIssues(issues);
  }

  function readPayloadFile() {
    return new Promise((resolve, reject) => {
      if (!payloadForm.fileInput || !payloadForm.fileInput.files.length) {
        reject(new Error(payloadTranslations.selectFile));
        return;
      }
      const file = payloadForm.fileInput.files[0];
      const reader = new FileReader();
      reader.onload = (evt) => resolve({ file, content: evt.target.result });
      reader.onerror = () => reject(new Error(payloadTranslations.uploadFailed));
      reader.readAsText(file);
    });
  }

  function payloadEndpoint(action, moduleName, version, dryRun) {
    const target = new URL(`/api/op_ocpi/${moduleName}/${action}`, window.location.origin);
    target.searchParams.set('version', version);
    if (action === 'import' && dryRun) {
      target.searchParams.set('dry_run', '1');
    }
    return target.toString();
  }

  function normalizeIssues(body) {
    if (body && Array.isArray(body.issues) && body.issues.length) {
      return body.issues;
    }
    const combined = [];
    const errorList = (body && body.errors) || [];
    const warningList = (body && body.warnings) || [];
    errorList.forEach((msg) => combined.push({ level: 'error', detail: msg }));
    warningList.forEach((msg) => combined.push({ level: 'warning', detail: msg }));
    return combined;
  }

  function handlePayloadAction(action) {
    const moduleName = (payloadForm.moduleSelect && payloadForm.moduleSelect.value) || 'cdrs';
    const version = (payloadForm.versionSelect && payloadForm.versionSelect.value) || '{{ version_options[0] }}';
    const dryRun = !!(payloadForm.dryRunToggle && payloadForm.dryRunToggle.checked);
    if (payloadForm.resultBox) {
      payloadForm.resultBox.classList.add('d-none');
      payloadForm.resultBox.textContent = '';
    }
    readPayloadFile()
      .then(({ file, content }) => {
        const contentType = file.type || (file.name.endsWith('.csv') ? 'text/csv' : 'application/json');
        setPayloadBusy(true);
        return fetch(payloadEndpoint(action, moduleName, version, dryRun), {
          method: 'POST',
          headers: { 'Content-Type': contentType },
          body: content,
        }).then((resp) => resp.json().then((data) => ({ status: resp.status, body: data })));
      })
      .then(({ status, body }) => {
        const issues = normalizeIssues(body);
        const errorCount = (body.errors || []).length || issues.filter((item) => item.level === 'error').length;
        const warningCount = (body.warnings || []).length || issues.filter((item) => item.level === 'warning').length;
        const responseError = (body && (body.error || body.message)) || '';
        let alertClass = 'alert-success';
        let message = action === 'import' ? payloadTranslations.pushDone : payloadTranslations.validationPassed;
        if (errorCount || status >= 400 || responseError) {
          alertClass = 'alert-danger';
          if (errorCount) {
            message = `${payloadTranslations.validationErrors}: ${errorCount}`;
          } else {
            message = `${payloadTranslations.uploadFailed}: ${responseError || status}`;
          }
        } else if (warningCount) {
          alertClass = 'alert-warning';
          message = `${payloadTranslations.validationWarnings}: ${warningCount}`;
        }
        if (action === 'import' && body.dry_run) {
          message = `${message} (${payloadTranslations.pushDryRun})`;
          if (!errorCount) {
            alertClass = 'alert-info';
          }
        }
        const versionLabel = body.version || version;
        if (versionLabel) {
          message = `${message} – v${versionLabel.toString()}`;
        }
        setPayloadResult(message, alertClass, issues);
      })
      .catch((err) => {
        setPayloadResult(`${payloadTranslations.uploadFailed}: ${err.message || err}`, 'alert-danger');
        payloadNotify(err.message || err);
      })
      .finally(() => setPayloadBusy(false));
  }

  if (payloadForm.validateBtn) payloadForm.validateBtn.addEventListener('click', () => handlePayloadAction('validate'));
  if (payloadForm.importBtn) payloadForm.importBtn.addEventListener('click', () => handlePayloadAction('import'));

  function replayExport(exportId, button) {
    const btn = $(button);
    const original = btn.html();
    btn.prop('disabled', true).text(syncTranslations.replaying || 'Replaying…');
    fetch(`/api/op_ocpi_exports/${exportId}/replay`, { method: 'POST' })
      .then((response) => response.json().then((data) => ({ status: response.status, body: data })))
      .then(({ status, body }) => {
        if (status >= 400 || !body.success) {
          alert(body.error || syncTranslations.replay_failed || 'Replay failed.');
        } else {
          alert(syncTranslations.replay_success || 'Replay sent.');
          window.location.reload();
        }
      })
      .catch(() => alert(syncTranslations.replay_failed || 'Replay failed.'))
      .finally(() => {
        btn.prop('disabled', false).html(original);
      });
  }
</script>
{% endblock %}