{% 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">
      {{ _('Partners / EMSPs') }}
    </h2>
    <p class="text-muted mb-3">{{ _('Manage EMSP tokens that are exposed via the OCPI tokens module.') }}</p>
  </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="tokens-version">{{ _('OCPI version') }}</label>
      <select class="form-select" id="tokens-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="tokens-upload-input" accept=".csv,.json">
      <button class="btn btn-primary" type="button" id="tokens-upload-btn">{{ _('Upload CSV/JSON') }}</button>
    </div>
    <button class="btn btn-outline-primary btn-sm" type="button" id="tokens-validate-btn">{{ _('Validate') }}</button>
    <button class="btn btn-outline-primary btn-sm" type="button" id="tokens-sandbox-btn">{{ _('Sandbox samples') }}</button>
  </div>
  <div class="text-muted small" id="tokens-validation-result"></div>

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

  {% if cache_stats %}
  <div class="d-flex flex-wrap gap-3 text-muted small mb-3">
    <span>{{ _('Cache hits') }}: {{ cache_stats.hits }}</span>
    <span>{{ _('Cache misses') }}: {{ cache_stats.misses }}</span>
    <span>{{ _('Cache entries') }}: {{ cache_stats.entries }}</span>
    <span>{{ _('Cache hit rate') }}: {{ (cache_stats.hit_rate * 100) | round(1) }}%</span>
  </div>
  {% endif %}

  <div class="card mb-4">
    <div class="card-body">
      <form method="post" class="row g-3 align-items-end">
        <input type="hidden" name="action" value="add">
        <div class="col-12 col-lg-3">
          <label class="form-label" for="uid">{{ _('UID') }}</label>
          <input class="form-control ocpi-form-control" type="text" id="uid" name="uid" required placeholder="ABC12345">
        </div>
        <div class="col-12 col-lg-3">
          <label class="form-label" for="auth_id">{{ _('Auth ID') }}</label>
          <input class="form-control ocpi-form-control" type="text" id="auth_id" name="auth_id" placeholder="EMP12345">
        </div>
        <div class="col-12 col-lg-2">
          <label class="form-label" for="issuer">{{ _('Issuer') }}</label>
          <input class="form-control ocpi-form-control" type="text" id="issuer" name="issuer" placeholder="Pipelet">
        </div>
        <div class="col-12 col-lg-2">
          <label class="form-label" for="whitelist">{{ _('Whitelist status') }}</label>
          <input class="form-control ocpi-form-control" type="text" id="whitelist" name="whitelist" placeholder="ALLOWED">
        </div>
        <div class="col-12 col-lg-2">
          <label class="form-label" for="local_rfid">{{ _('Local RFID') }}</label>
          <input class="form-control ocpi-form-control" type="text" id="local_rfid" name="local_rfid" placeholder="04AABBCC">
        </div>
        <div class="col-12 col-lg-2">
          <label class="form-label" for="source">{{ _('Source') }}</label>
          <select class="form-select ocpi-form-control" id="source" name="source">
            <option value="emsp">{{ _('EMSP') }}</option>
            <option value="cpo">{{ _('CPO') }}</option>
          </select>
        </div>
        <div class="col-12 col-lg-2">
          <label class="form-label" for="status">{{ _('Status') }}</label>
          <select class="form-select ocpi-form-control" id="status" name="status">
            <option value="valid">{{ _('Valid') }}</option>
            <option value="expired">{{ _('Expired') }}</option>
            <option value="blocked">{{ _('Blocked') }}</option>
          </select>
        </div>
        <div class="col-12 col-lg-2">
          <label class="form-label" for="valid_until">{{ _('Valid until') }}</label>
          <input class="form-control ocpi-form-control" type="datetime-local" id="valid_until" name="valid_until">
        </div>
        <div class="col-12 d-flex justify-content-end">
          <button class="btn btn-primary btn-sm pipelet-btn" type="submit">{{ _('Save') }}</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body table-responsive">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('UID') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Auth ID') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Issuer') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Whitelist status') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Local RFID') }}</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">{{ _('Source') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Valid until') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Last updated') }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% if tokens %}
          {% for token in tokens %}
          <tr>
            <td class="align-middle">{{ token.uid }}</td>
            <td class="align-middle">{{ token.auth_id or '-' }}</td>
            <td class="align-middle">{{ token.issuer or '-' }}</td>
            <td class="align-middle">{{ token.whitelist or '-' }}</td>
            <td class="align-middle">{{ token.local_rfid or '-' }}</td>
            <td class="align-middle">
              {% if token.status == 'blocked' %}
              <span class="badge bg-danger">{{ _('Blocked') }}</span>
              {% elif token.status == 'expired' %}
              <span class="badge bg-warning text-dark">{{ _('Expired') }}</span>
              {% else %}
              <span class="badge bg-success">{{ _('Valid') }}</span>
              {% endif %}
            </td>
            <td class="align-middle text-uppercase">{{ token.source or 'emsp' }}</td>
            <td class="align-middle">{{ token.valid_until or '-' }}</td>
            <td class="align-middle">{{ token.updated_at }}</td>
            <td class="align-middle text-end">
              <form method="post" class="d-inline me-1">
                <input type="hidden" name="uid" value="{{ token.uid }}">
                <input type="hidden" name="action" value="{% if token.status == 'blocked' %}unblock{% else %}block{% endif %}">
                <button class="btn btn-outline-secondary btn-sm pipelet-btn" type="submit">
                  {% if token.status == 'blocked' %}
                  {{ _('Unblock') }}
                  {% else %}
                  {{ _('Block') }}
                  {% endif %}
                </button>
              </form>
              <form method="post" class="d-inline">
                <input type="hidden" name="uid" value="{{ token.uid }}">
                <input type="hidden" name="action" value="delete">
                <button class="btn btn-outline-danger btn-sm pipelet-btn" type="submit">{{ _('Delete') }}</button>
              </form>
            </td>
          </tr>
          {% endfor %}
          {% else %}
          <tr>
            <td colspan="8" class="text-center text-muted">{{ _('No tokens available yet.') }}</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</main>
<script>
  (function() {
    const uploadBtn = document.getElementById('tokens-upload-btn');
    const uploadInput = document.getElementById('tokens-upload-input');
    const validateBtn = document.getElementById('tokens-validate-btn');
    const versionSelect = document.getElementById('tokens-version');
    const sandboxBtn = document.getElementById('tokens-sandbox-btn');
    const resultBox = document.getElementById('tokens-validation-result');
    const endpoints = {
      importUrl: '{{ import_url }}',
      validateUrl: '{{ validate_url }}',
      sandboxUrl: '{{ sandbox_url }}',
    };
    const exportLinks = {{ export_links|tojson }};
    const translations = {
      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 tokens created.") }}'
    };

    function notify(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) {
        notify(translations.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(endpoints.importUrl), {
          method: 'POST',
          headers: {'Content-Type': contentType},
          body: content
        }).then(resp => resp.json())
          .then(data => {
            if (data.errors && data.errors.length) {
              notify(translations.importWarning + ': ' + data.errors.join('; '));
            } else {
              notify(translations.importDone);
            }
            window.location.reload();
          })
          .catch(err => notify(translations.uploadFailed + ': ' + err));
      });
    }

    function handleValidate() {
      readSelectedFile((file, content) => {
        const contentType = file.type || (file.name.endsWith('.csv') ? 'text/csv' : 'application/json');
        fetch(withVersion(endpoints.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 = translations.validationPassed;
            if (errorCount) {
              message = translations.validationErrors + ': ' + errorCount;
            } else if (warningCount) {
              message = translations.validationWarnings + ': ' + warningCount;
            }
            if (resultBox) resultBox.textContent = message;
            notify(message);
          })
          .catch(err => notify(translations.uploadFailed + ': ' + err));
      });
    }

    function handleSandbox() {
      fetch(endpoints.sandboxUrl, { method: 'POST' })
        .then(resp => resp.json())
        .then(data => {
          if (data.errors && data.errors.length) {
            notify(translations.importWarning + ': ' + data.errors.join('; '));
          } else {
            notify(translations.sandboxApplied);
          }
          window.location.reload();
        })
        .catch(err => notify(translations.uploadFailed + ': ' + err));
    }

    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);
  })();
</script>
{% endblock %}