{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">{{ _('Core CPMS – Connected Devices') }}</h1>
  <p class="text-muted">{{ _('Overview of all charge points currently connected to the Core CPMS.') }}</p>

  {% if error_message %}
  <div class="alert alert-danger" role="alert">{{ error_message }}</div>
  {% endif %}
  {% if success_message %}
  <div class="alert alert-success" role="alert">{{ success_message }}</div>
  {% endif %}
  {% if response_payload %}
  <div class="card mb-4">
    <div class="card-header pb-0">
      <h6 class="mb-0">{{ _('Response from the OCPP server') }}</h6>
    </div>
    <div class="card-body">
      <pre class="bg-light p-3 rounded text-sm">{% if response_payload is mapping or response_payload is sequence %}{{ response_payload | tojson(indent=2) | safe }}{% else %}{{ response_payload }}{% endif %}</pre>
    </div>
  </div>
  {% endif %}

  {% if fetch_error %}
  <div class="alert alert-warning" role="alert">
    <strong>{{ _('Notice:') }}</strong> {{ _('Connection data could not be fully loaded. Details: {details}', details=fetch_error) }}
  </div>
  {% endif %}

  <div id="oicp-toggle-error" class="alert alert-danger d-none" role="alert"></div>

  <div class="card">
    <div class="card-body p-0">
      <div class="px-4 pt-3">
        <p class="text-xs text-muted mb-0">
          {{ _('Stations with {seconds}s or less until timeout are highlighted.', seconds=timeout_warning_threshold) }}
        </p>
      </div>
      <div class="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">{{ _('Station') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Connected since') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Last seen') }}</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">{{ _('Seconds') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Timeout remaining') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Stale timeouts') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Availability') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('OICP') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Inoperative') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Operative') }}</th>
            </tr>
          </thead>
          <tbody>
            {% if stations %}
              {% for station in stations %}
              <tr class="{% if selected_station and selected_station == station.station_id %}table-active{% endif %}{% if station.timeout_risk %} table-warning{% endif %}">
                <td class="text-sm font-weight-bold">{{ station.station_id or '-' }}</td>
                <td class="text-sm">
                  {{ station.connected_since_display }}
                  {% if station.connected_since_raw and station.connected_since_raw != station.connected_since_display %}
                  <div class="text-xs text-muted">{{ station.connected_since_raw }}</div>
                  {% endif %}
                </td>
                <td class="text-sm">
                  {{ station.last_seen_display }}
                  {% if station.last_seen_raw and station.last_seen_raw != station.last_seen_display %}
                  <div class="text-xs text-muted">{{ station.last_seen_raw }}</div>
                  {% endif %}
                </td>
                <td class="text-sm">{{ station.connected_duration }}</td>
                <td class="text-sm">{{ station.connected_seconds or '-' }}</td>
                <td class="text-sm">
                  {% if station.seconds_until_timeout is not none %}
                    <span class="badge badge-sm {{ station.timeout_badge_class }}">
                      {{ station.timeout_remaining_display or station.seconds_until_timeout }}
                    </span>
                    <div class="text-xs text-muted">{{ station.seconds_until_timeout }}s</div>
                  {% else %}
                    -
                  {% endif %}
                </td>
                <td class="text-sm">{{ station.stale_event_count if station.stale_event_count is not none else '-' }}</td>
                <td class="text-sm">
                  <span class="badge badge-sm {{ station.availability_badge_class }}">{{ station.availability_display }}</span>
                </td>
                <td class="text-sm">
                  <div class="form-check form-switch d-inline-flex align-items-center oicp-toggle-wrapper">
                    <input class="form-check-input oicp-toggle" type="checkbox" role="switch"
                           id="oicp-toggle-{{ station.station_id }}"
                           data-station-id="{{ station.station_id }}"
                           {% if station.oicp_enabled %}checked{% endif %}>
                    <div class="spinner-border spinner-border-sm text-secondary ms-2 d-none oicp-toggle-spinner" role="status" aria-hidden="true"></div>
                  </div>
                </td>
                <td>
                  <form method="post" class="mb-0">
                    <input type="hidden" name="action" value="set_inoperative">
                    <input type="hidden" name="station_id" value="{{ station.station_id }}">
                    <button type="submit" class="btn btn-outline-danger btn-sm">{{ _('Inoperative') }}</button>
                  </form>
                </td>
                <td>
                  <form method="post" class="mb-0">
                    <input type="hidden" name="action" value="set_operational">
                    <input type="hidden" name="station_id" value="{{ station.station_id }}">
                    <button type="submit" class="btn btn-outline-success btn-sm">{{ _('Operative') }}</button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            {% else %}
            <tr>
              <td colspan="11" class="text-center text-muted py-4">{{ _('No charge points are currently connected.') }}</td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const errorBox = document.getElementById('oicp-toggle-error');

      const showError = (message) => {
        if (!errorBox) return;
        errorBox.textContent = message;
        errorBox.classList.remove('d-none');
      };

      const clearError = () => {
        if (!errorBox) return;
        errorBox.textContent = '';
        errorBox.classList.add('d-none');
      };
      const defaultError = "{{ _('Could not change OICP status.') }}";
      const toggleFailedTemplate = "{{ _('OICP toggle failed: {error}') }}";

      document.querySelectorAll('.oicp-toggle').forEach((input) => {
        input.addEventListener('change', async (event) => {
          const target = event.target;
          const wrapper = target.closest('.oicp-toggle-wrapper');
          const spinner = wrapper ? wrapper.querySelector('.oicp-toggle-spinner') : null;
          const previousState = !target.checked;
          clearError();
          target.disabled = true;
          if (spinner) {
            spinner.classList.remove('d-none');
          }
          try {
            const response = await fetch('/op_mini_cpms_oicp_toggle', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                station_id: target.dataset.stationId || '',
                enabled: target.checked,
              }),
            });

            let payload = null;
            try {
              payload = await response.json();
            } catch (parseError) {
              payload = null;
            }

            if (!response.ok || !payload || payload.success !== true) {
              target.checked = previousState;
              const message = (payload && (payload.error || payload.message))
                || defaultError;
              showError(message);
              return;
            }

            setTimeout(() => window.location.reload(), 200);
          } catch (err) {
            target.checked = previousState;
            const errorText = (toggleFailedTemplate || '').replace('{error}', err);
            showError(errorText);
          } finally {
            target.disabled = false;
            if (spinner) {
              spinner.classList.add('d-none');
            }
          }
        });
      });
    });
  </script>
</main>
{% endblock %}