{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
    <div>
      <h2 class="ct-docs-page-h1-title mb-1">{{ _('Locations') }}</h2>
      <p class="text-muted mb-0">{{ _('Manage OCPI locations, filter by status, capabilities, or tariffs, and review synchronization status with EMSPs.') }}</p>
    </div>
    <div class="d-flex flex-wrap align-items-center gap-2">
      <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>
      <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('api_list_locations') }}" target="_blank">{{ _('Bulk edit (JSON)') }}</a>
      <div class="input-group input-group-sm" style="max-width: 260px;">
        <label class="input-group-text" for="locations-version">{{ _('OCPI version') }}</label>
        <select class="form-select" id="locations-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: 200px;">
        <button class="btn btn-outline-primary" type="button" id="locations-validate-btn">{{ _('Validate') }}</button>
      </div>
      <div class="input-group input-group-sm" style="max-width: 320px;">
        <input type="file" class="form-control" id="locations-upload-input" accept=".csv,.json">
        <button class="btn btn-primary" type="button" id="locations-upload-btn">{{ _('Upload CSV/JSON') }}</button>
      </div>
      <button class="btn btn-outline-primary btn-sm" type="button" id="locations-sandbox-btn">{{ _('Sandbox samples') }}</button>
    </div>
  </div>
  <div class="text-muted small" id="locations-validation-result"></div>

  <div class="card mb-4">
    <div class="card-body">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-12 col-md-4">
          <label class="form-label" for="status-filter">{{ _('Status') }}</label>
          <select class="form-select" id="status-filter" name="status">
            <option value="">{{ _('All statuses') }}</option>
            {% for status in filters.statuses %}
            <option value="{{ status }}" {% if status in selected_filters.status %}selected{% endif %}>{{ status }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label" for="capability-filter">{{ _('Capabilities') }}</label>
          <select class="form-select" id="capability-filter" name="capability">
            <option value="">{{ _('All capabilities') }}</option>
            {% for capability in filters.capabilities %}
            <option value="{{ capability }}" {% if capability in selected_filters.capability %}selected{% endif %}>{{ capability }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label" for="tariff-filter">{{ _('Tariffs') }}</label>
          <select class="form-select" id="tariff-filter" name="tariff">
            <option value="">{{ _('All tariffs') }}</option>
            {% for tariff in filters.tariffs %}
            <option value="{{ tariff }}" {% if tariff in selected_filters.tariff %}selected{% endif %}>{{ tariff }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 d-flex flex-wrap gap-2">
          <button class="btn btn-primary btn-sm" type="submit">{{ _('Apply filters') }}</button>
          <a class="btn btn-secondary btn-sm" href="{{ url_for('locations_view') }}">{{ _('Reset') }}</a>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body table-responsive">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th>{{ _('Location') }}</th>
            <th>{{ _('Status') }}</th>
            <th>{{ _('Capabilities') }}</th>
            <th>{{ _('Tariffs') }}</th>
            <th>{{ _('Backends') }}</th>
            <th>{{ _('Synchronization') }}</th>
            <th>{{ _('Last updated') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for location in locations %}
          <tr>
            <td>
              <div class="fw-bold">{{ location.name }}</div>
              <div class="text-muted small">{{ location.id }}</div>
              <div class="badge bg-light text-dark mt-2">{{ location.evse_count }} {{ _('Charging Points') }}</div>
            </td>
            <td>
              {% if location.statuses %}
                {% for status in location.statuses %}
                  <span class="badge bg-secondary me-1">{{ status }}</span>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% if location.capabilities %}
                {% for capability in location.capabilities %}
                  <span class="badge bg-info text-dark me-1">{{ capability }}</span>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% if location.tariffs %}
                {% for tariff in location.tariffs %}
                  <span class="badge bg-light text-dark me-1">{{ tariff }}</span>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% if location.backends %}
                {% for backend in location.backends %}
                  <div class="small">{{ backend }}</div>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% set sync_items = location.sync_status or [] %}
              {% if sync_items %}
                <div class="d-flex flex-column gap-1">
                  {% for sync in sync_items %}
                    <span class="badge {% if sync.success %}bg-success{% else %}bg-warning text-dark{% endif %}">
                      {{ sync.backend_name or _('Backend') }}
                      {% if sync.status_code %} ({{ sync.status_code }}){% endif %}
                      {% if sync.created_at %}<small class="ms-1">{{ sync.created_at }}</small>{% endif %}
                    </span>
                    {% if sync.error_message and not sync.success %}
                      <div class="text-muted small">{{ sync.error_message }}</div>
                    {% endif %}
                  {% endfor %}
                </div>
              {% else %}
                <span class="text-muted">{{ _('No sync attempts yet') }}</span>
              {% endif %}
            </td>
            <td class="text-muted small">
              {{ location.last_updated or _('n/a') }}
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="7" class="text-center text-muted py-3">{{ _('No data available yet.') }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</main>

<script>
  (function() {
    const uploadBtn = document.getElementById('locations-upload-btn');
    const uploadInput = document.getElementById('locations-upload-input');
    const validateBtn = document.getElementById('locations-validate-btn');
    const versionSelect = document.getElementById('locations-version');
    const sandboxBtn = document.getElementById('locations-sandbox-btn');
    const resultBox = document.getElementById('locations-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 data applied.") }}'
    };

    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 %}