{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-3">
    <div>
      <h2 class="ct-docs-page-h1-title" id="content">
        {{ _('Sessions / CDRs') }}
      </h2>
      <p class="text-muted mb-0">
        {{ _('Live overview of broker sessions and OCPI CDR exports with manual retry controls.') }}
      </p>
    </div>
    <div class="ocpi-action-group">
      <button class="btn ocpi-btn ocpi-btn-ghost ocpi-btn-sm" id="refresh-data" type="button">
        <i class="ni ni-refresh-02 me-1"></i> {{ _('Refresh data') }}
      </button>
    </div>
  </div>
  <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <a class="btn btn-outline-secondary btn-sm" data-export-link="{{ export_links.json }}" href="{{ export_links.json }}">{{ _('Export JSON') }}</a>
    <a class="btn btn-outline-secondary btn-sm" data-export-link="{{ export_links.csv }}" href="{{ export_links.csv }}">{{ _('Export CSV') }}</a>
    <div class="input-group input-group-sm" style="max-width: 240px;">
      <label class="input-group-text" for="cdr-version">{{ _('OCPI version') }}</label>
      <select class="form-select" id="cdr-version">
        {% for version in version_options %}
        <option value="{{ version }}" {% if loop.first %}selected{% endif %}>{{ version }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="input-group input-group-sm" style="max-width: 300px;">
      <input type="file" class="form-control" id="cdr-upload-input" accept=".csv,.json">
      <button class="btn btn-primary" type="button" id="cdr-upload-btn">{{ _('Upload CSV/JSON') }}</button>
    </div>
    <button class="btn btn-outline-primary btn-sm" type="button" id="cdr-validate-btn">{{ _('Validate') }}</button>
    <button class="btn btn-outline-primary btn-sm" type="button" id="cdr-sandbox-btn">{{ _('Sandbox samples') }}</button>
  </div>
  <div class="text-muted small" id="cdr-validation-result"></div>

  <div class="row g-3 mb-4">
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-uppercase text-secondary text-xs mb-2">{{ _('Sessions (live)') }}</p>
          <h5 class="mb-1"><span id="stat-session-total">{{ session_stats.total }}</span></h5>
          <div class="text-muted small">
            {{ _('Active sessions') }}: <span id="stat-session-active">{{ session_stats.active }}</span><br>
            {{ _('Completed sessions') }}: <span id="stat-session-completed">{{ session_stats.completed }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-uppercase text-secondary text-xs mb-2">{{ _('CDR queue') }}</p>
          <h5 class="mb-1"><span id="stat-cdr-total">{{ cdr_stats.total }}</span></h5>
          <div class="text-muted small">
            {{ _('Pending CDRs') }}: <span id="stat-cdr-pending">{{ cdr_stats.pending }}</span><br>
            {{ _('Failed CDRs') }}: <span id="stat-cdr-failed">{{ cdr_stats.failed }}</span>
          </div>
        </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">{{ _('Sessions (live)') }}</h5>
        <span class="text-muted small">{{ _('Last update') }}: <span id="sessions-updated">–</span></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">{{ _('Station') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Connector') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Session UID') }}</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">{{ _('Status') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">{{ _('Meter') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Last update') }}</th>
            </tr>
          </thead>
          <tbody id="session-table-body">
            <tr class="text-center text-muted">
              <td colspan="7">{{ _('No sessions recorded yet.') }}</td>
            </tr>
          </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">{{ _('CDR queue') }}</h5>
        <span class="text-muted small">{{ _('Replay failed or pending CDRs directly from this list.') }}</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">{{ _('Status') }}</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">{{ _('Session match') }}</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 id="cdr-table-body">
            <tr class="text-center text-muted">
              <td colspan="8">{{ _('No CDR exports recorded yet.') }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<script>
  const translations = {{ translations|tojson }};
  let sessionData = {{ sessions|tojson }};
  let sessionStats = {{ session_stats|tojson }};
  let cdrData = {{ cdr_entries|tojson }};
  let cdrStats = {{ cdr_stats|tojson }};
  const toolEndpoints = {
    importUrl: '{{ import_url }}',
    validateUrl: '{{ validate_url }}',
    sandboxUrl: '{{ sandbox_url }}',
  };
  const toolExports = {{ export_links|tojson }};
  const toolTranslations = {
    selectFile: '{{ _("Select a CSV or JSON file") }}',
    importDone: '{{ _("Import completed") }}',
    importWarning: '{{ _("Import finished with warnings") }}',
    uploadFailed: '{{ _("Upload failed") }}',
    validationPassed: '{{ _("Validation passed") }}',
    validationErrors: '{{ _("Validation errors") }}',
    validationWarnings: '{{ _("Validation warnings") }}',
    sandboxApplied: '{{ _("Sandbox data applied.") }}'
  };
  const uploadInput = document.getElementById('cdr-upload-input');
  const uploadBtn = document.getElementById('cdr-upload-btn');
  const validateBtn = document.getElementById('cdr-validate-btn');
  const sandboxBtn = document.getElementById('cdr-sandbox-btn');
  const versionSelect = document.getElementById('cdr-version');
  const validationResult = document.getElementById('cdr-validation-result');

  function t(key) {
    return translations[key] || key;
  }

  function escapeHtml(value) {
    return $('<div>').text(value ?? '').html();
  }

  function statusBadge(state) {
    const normalized = (state || '').toLowerCase();
    if (normalized === 'success' || normalized === 'active') {
      return { label: normalized === 'active' ? t('active') : t('success'), cls: 'bg-success' };
    }
    if (normalized === 'pending') {
      return { label: t('pending'), cls: 'bg-warning text-dark' };
    }
    if (normalized === 'failed' || normalized === 'completed') {
      return { label: normalized === 'completed' ? t('completed') : t('failed'), cls: normalized === 'completed' ? 'bg-secondary' : 'bg-danger' };
    }
    return { label: t('unknown_status'), cls: 'bg-secondary' };
  }

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

  function currentVersion() {
    return (versionSelect && versionSelect.value) || '{{ version_options[0] }}';
  }

  function withVersion(url) {
    const target = new URL(url, window.location.origin);
    target.searchParams.set('version', currentVersion());
    return target.toString();
  }

  function updateExportLinks() {
    document.querySelectorAll('[data-export-link]').forEach((el) => {
      const base = el.getAttribute('data-export-link');
      el.href = withVersion(base);
    });
  }

  function readSelectedFile(callback) {
    if (!uploadInput || !uploadInput.files.length) {
      toolNotify(toolTranslations.selectFile);
      return;
    }
    const file = uploadInput.files[0];
    const reader = new FileReader();
    reader.onload = (evt) => callback(file, evt.target.result);
    reader.readAsText(file);
  }

  function handleImport() {
    readSelectedFile((file, content) => {
      const contentType = file.type || (file.name.endsWith('.csv') ? 'text/csv' : 'application/json');
      fetch(withVersion(toolEndpoints.importUrl), {
        method: 'POST',
        headers: {'Content-Type': contentType},
        body: content
      }).then(resp => resp.json())
        .then(data => {
          if (data.errors && data.errors.length) {
            toolNotify(toolTranslations.importWarning + ': ' + data.errors.join('; '));
          } else {
            toolNotify(toolTranslations.importDone);
          }
          refreshData();
        })
        .catch(err => toolNotify(toolTranslations.uploadFailed + ': ' + err));
    });
  }

  function handleValidate() {
    readSelectedFile((file, content) => {
      const contentType = file.type || (file.name.endsWith('.csv') ? 'text/csv' : 'application/json');
      fetch(withVersion(toolEndpoints.validateUrl), {
        method: 'POST',
        headers: {'Content-Type': contentType},
        body: content
      }).then(resp => resp.json())
        .then(data => {
          const errorCount = (data.errors || []).length;
          const warningCount = (data.warnings || []).length;
          let message = toolTranslations.validationPassed;
          if (errorCount) {
            message = toolTranslations.validationErrors + ': ' + errorCount;
          } else if (warningCount) {
            message = toolTranslations.validationWarnings + ': ' + warningCount;
          }
          if (validationResult) validationResult.textContent = message;
          toolNotify(message);
        })
        .catch(err => toolNotify(toolTranslations.uploadFailed + ': ' + err));
    });
  }

  function handleSandbox() {
    fetch(toolEndpoints.sandboxUrl, { method: 'POST' })
      .then(resp => resp.json())
      .then(data => {
        if (data.errors && data.errors.length) {
          toolNotify(toolTranslations.importWarning + ': ' + data.errors.join('; '));
        } else {
          toolNotify(toolTranslations.sandboxApplied);
        }
        refreshData();
      })
      .catch(err => toolNotify(toolTranslations.uploadFailed + ': ' + err));
  }

  function renderSessions() {
    const tbody = $('#session-table-body');
    tbody.empty();
    if (!sessionData || sessionData.length === 0) {
      tbody.append('<tr class="text-center text-muted"><td colspan="7">{{ _("No sessions recorded yet.") }}</td></tr>');
    } else {
      sessionData.forEach((session) => {
        const badge = statusBadge(session.status || '');
        const meter = session.meter_last_wh ?? session.meter_stop_wh ?? session.meter_start_wh ?? '';
        tbody.append(`
          <tr>
            <td class="text-sm">${escapeHtml(session.station_id)}</td>
            <td class="text-sm">${escapeHtml(session.connector_id || '')}</td>
            <td class="text-sm">${escapeHtml(session.session_uid || '')}</td>
            <td class="text-sm">${escapeHtml(session.transaction_id || '')}</td>
            <td class="text-sm"><span class="badge ${badge.cls}">${escapeHtml(badge.label)}</span></td>
            <td class="text-sm text-end">${meter !== '' ? escapeHtml(meter) : ''}</td>
            <td class="text-sm">${escapeHtml(session.updated_at || '')}</td>
          </tr>
        `);
      });
    }
    $('#stat-session-total').text(sessionStats.total || 0);
    $('#stat-session-active').text(sessionStats.active || 0);
    $('#stat-session-completed').text(sessionStats.completed || 0);
    $('#sessions-updated').text(new Date().toLocaleTimeString());
  }

  function renderCdrs() {
    const tbody = $('#cdr-table-body');
    tbody.empty();
    if (!cdrData || cdrData.length === 0) {
      tbody.append('<tr class="text-center text-muted"><td colspan="8">{{ _("No CDR exports recorded yet.") }}</td></tr>');
    } else {
      cdrData.forEach((cdr) => {
        const badge = statusBadge(cdr.state || '');
        const sessionLabel = cdr.session_status ? `<span class="badge bg-success">${escapeHtml(t('session_match'))}</span>` : `<span class="badge bg-secondary">${escapeHtml(t('session_missing'))}</span>`;
        const response = cdr.response_status ? `${cdr.response_status}: ${escapeHtml(cdr.response_body || '')}` : escapeHtml(cdr.response_body || '');
        const replayBtn = `
          <button class="btn ocpi-btn ocpi-btn-ghost ocpi-btn-sm" data-export-id="${cdr.id}" onclick="replayCdr(${cdr.id}, this)">
            ${escapeHtml(t('replay'))}
          </button>
        `;
        tbody.append(`
          <tr>
            <td class="text-sm"><span class="badge ${badge.cls}">${escapeHtml(badge.label)}</span></td>
            <td class="text-sm">${escapeHtml(cdr.backend_name || '')}</td>
            <td class="text-sm">${escapeHtml(cdr.station_id || '')}</td>
            <td class="text-sm">${escapeHtml(cdr.transaction_id || '')}</td>
            <td class="text-sm">${sessionLabel}</td>
            <td class="text-sm">
              <div class="fw-bold">${escapeHtml(response || '')}</div>
              <div class="text-muted small">{{ _('Retry count') }}: ${escapeHtml(cdr.retry_count)}</div>
            </td>
            <td class="text-sm">${escapeHtml(cdr.created_at || '')}</td>
            <td class="text-sm">${replayBtn}</td>
          </tr>
        `);
      });
    }
    $('#stat-cdr-total').text(cdrStats.total || 0);
    $('#stat-cdr-pending').text(cdrStats.pending || 0);
    $('#stat-cdr-failed').text(cdrStats.failed || 0);
  }

  async function refreshData() {
    try {
      const [sessionsResp, cdrResp] = await Promise.all([
        fetch('/api/op_session_status'),
        fetch('/api/op_cdr_queue'),
      ]);
      const sessionsJson = await sessionsResp.json();
      const cdrJson = await cdrResp.json();
      sessionData = sessionsJson.sessions || [];
      sessionStats = sessionsJson.stats || {};
      cdrData = cdrJson.cdrs || [];
      cdrStats = cdrJson.stats || {};
      renderSessions();
      renderCdrs();
    } catch (err) {
      toastr.error(t('refresh_failed'));
    }
  }

  async function replayCdr(exportId, button) {
    if (button) {
      button.disabled = true;
      button.innerText = t('replay_running');
    }
    try {
      const resp = await fetch(`/api/op_cdr_queue/${exportId}/replay`, { method: 'POST' });
      const data = await resp.json();
      if (!resp.ok || data.error) {
        throw new Error(data.error || 'Replay failed');
      }
      if (data.cdr) {
        const idx = cdrData.findIndex((item) => item.id === exportId);
        if (idx >= 0) {
          cdrData[idx] = data.cdr;
        }
      }
      if (data.stats) {
        cdrStats = data.stats;
      }
      renderCdrs();
      toastr.success(t('replay_success'));
    } catch (err) {
      toastr.error(t('replay_failed'));
    } finally {
      if (button) {
        button.disabled = false;
        button.innerText = t('replay');
      }
    }
  }

  if (versionSelect) {
    versionSelect.addEventListener('change', updateExportLinks);
    updateExportLinks();
  }
  if (uploadBtn) uploadBtn.addEventListener('click', handleImport);
  if (validateBtn) validateBtn.addEventListener('click', handleValidate);
  if (sandboxBtn) sandboxBtn.addEventListener('click', handleSandbox);
  document.getElementById('refresh-data').addEventListener('click', refreshData);
  renderSessions();
  renderCdrs();
  setInterval(refreshData, 30000);
</script>
{% endblock %}