{% extends "pages/base.html" %}
{% load i18n %}

{% block title %}{% trans "Charge Points" %}{% endblock %}

{% block content %}
<h1>{% trans "Charge Points" %}</h1>
{% if show_demo_notice %}
<div id="demo-notice" class="alert alert-info position-relative" role="alert" data-session-key="ocppDemoNoticeDismissed">
  <button
    type="button"
    class="btn-close btn-close-white position-absolute top-0 end-0 mt-2 me-2"
    data-demo-notice-dismiss
    aria-label="{% trans "Dismiss demo notice" %}"
  ></button>
  <h2 class="h5 mb-2">{% trans "Demo OCPP 1.6J CPMS (Charge Point Management System)" %}</h2>
  <p class="mb-1">{% trans "Everyone is welcome to use this demo to test their charge points." %}</p>
  <p class="mb-1">{% blocktrans with limit=ws_rate_limit %}Rate limiting applies (maximum {{ limit }} simultaneous connections per IP).{% endblocktrans %}</p>
  <p class="mb-0">{% blocktrans %}Use the following WebSocket URL format, replacing &lt;CHARGE_POINT_ID&gt; with your charge point identifier:{% endblocktrans %}</p>
  <pre class="mb-0"><code>{{ demo_ws_url }}</code></pre>
  <p class="mb-0 mt-2">
    {% blocktrans trimmed %}You may also provide the identifier as a query parameter using any of the following names: <code>cid</code>, <code>chargePointId</code>, <code>charge_point_id</code>, <code>chargeBoxId</code>, <code>charge_box_id</code>, or <code>chargerId</code>.{% endblocktrans %}
  </p>
</div>
{% endif %}

<div class="row g-2 mb-3" data-dashboard-kpis>
  <div class="col-6 col-lg-3">
    <div class="border rounded p-2 h-100 bg-body-tertiary">
      <div class="small text-muted">{% trans "Visible chargers" %}</div>
      <div class="h4 mb-0" data-kpi-visible>0</div>
    </div>
  </div>
  <div class="col-6 col-lg-3">
    <div class="border rounded p-2 h-100 bg-body-tertiary">
      <div class="small text-muted">{% trans "Online chargers" %}</div>
      <div class="h4 mb-0 text-success" data-kpi-online>0</div>
    </div>
  </div>
  <div class="col-6 col-lg-3">
    <div class="border rounded p-2 h-100 bg-body-tertiary">
      <div class="small text-muted">{% trans "Active sessions" %}</div>
      <div class="h4 mb-0 text-primary" data-kpi-active>0</div>
    </div>
  </div>
  <div class="col-6 col-lg-3">
    <div class="border rounded p-2 h-100 bg-body-tertiary">
      <div class="small text-muted">{% trans "Today energy" %}</div>
      <div class="h4 mb-0" data-kpi-energy>0.00 kW</div>
    </div>
  </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-2 gap-3">
  <h2 class="h5 mb-0">{% trans "Charge point status" %}</h2>
  <small class="text-muted" data-dashboard-last-updated data-prefix="{% trans "Last updated" %}">
    {% trans "Last updated" %}: --
  </small>
</div>

<div class="table-responsive">
  <table class="table table-hover align-middle mb-0">
    <thead class="table-light">
      <tr>
        <th class="position-sticky top-0 bg-body z-1">{% trans "Name" %}</th>
        <th class="position-sticky top-0 bg-body z-1">{% trans "Serial Number" %}</th>
        <th class="position-sticky top-0 bg-body z-1 text-end">{% trans "Total kW" %}</th>
        <th class="position-sticky top-0 bg-body z-1 text-end">{% trans "Today's kW" %}</th>
        <th class="position-sticky top-0 bg-body z-1">{% trans "Last Session" %}</th>
        <th class="position-sticky top-0 bg-body z-1">{% trans "Status" %}</th>
      </tr>
    </thead>
    <tbody
      data-dashboard-table-body
      hx-get="{% url 'ocpp:ocpp-dashboard' %}?partial=table"
      hx-trigger="load, every 5s"
      hx-target="this"
      hx-swap="innerHTML"
    >
      {% include "ocpp/includes/dashboard_table_rows.html" %}
    </tbody>
  </table>
</div>
<ul class="list-inline text-center mt-3 mb-0">
  {% if request.user.is_staff %}
  <li class="list-inline-item">
    <a href="{% url 'admin:ocpp_charger_changelist' %}">{% trans "View chargers" %}</a>
  </li>
  {% endif %}
  <li class="list-inline-item">
    <a href="{% url 'ocpp:cp-simulator' %}">{% trans "Open simulator" %}</a>
  </li>
</ul>

<script>
  (function () {
    if (typeof window === 'undefined' || typeof document === 'undefined') {
      return;
    }

    const initializeDemoNotice = () => {
      const notice = document.getElementById('demo-notice');
      if (!notice) {
        return;
      }

      const dismissButton = notice.querySelector('[data-demo-notice-dismiss]');
      if (!dismissButton) {
        return;
      }

      const storage = (() => {
        try {
          if (!('sessionStorage' in window)) {
            return null;
          }
          const testKey = '__ocppDemoNoticeTest__';
          window.sessionStorage.setItem(testKey, '1');
          window.sessionStorage.removeItem(testKey);
          return window.sessionStorage;
        } catch (error) {
          return null;
        }
      })();

      const storageKey = notice.dataset.sessionKey || 'ocppDemoNoticeDismissed';
      const dismissed = storage ? storage.getItem(storageKey) === '1' : false;
      if (dismissed) {
        notice.classList.add('d-none');
        return;
      }

      dismissButton.addEventListener('click', () => {
        notice.classList.add('d-none');
        if (!storage) {
          return;
        }
        try {
          storage.setItem(storageKey, '1');
        } catch (error) {
          // Ignore storage errors (e.g., disabled cookies)
        }
      });
    };

    const updateDashboardMetrics = () => {
      const allRows = Array.from(document.querySelectorAll('[data-dashboard-row]'));
      const parentRows = allRows.filter((row) => row.dataset.rowType === 'parent');
      const childRows = allRows.filter((row) => row.dataset.rowType === 'child');
      const orphanChildRows = childRows.filter((row) => row.dataset.hasParent !== '1');
      const topLevelRows = parentRows.concat(orphanChildRows);
      const sessionRows = childRows.concat(
        parentRows.filter((row) => row.dataset.hasChildren !== '1'),
      );

      const visibleCount = topLevelRows.length;
      const onlineCount = topLevelRows.filter((row) => row.dataset.statusGroup === 'online').length;
      const activeCount = sessionRows.filter((row) => row.dataset.activeSession === '1').length;
      const todayEnergy = sessionRows.reduce((total, row) => {
        const value = parseFloat(row.dataset.todayKw || '0');
        return total + (Number.isFinite(value) ? value : 0);
      }, 0);

      const visibleEl = document.querySelector('[data-kpi-visible]');
      const onlineEl = document.querySelector('[data-kpi-online]');
      const activeEl = document.querySelector('[data-kpi-active]');
      const energyEl = document.querySelector('[data-kpi-energy]');
      if (visibleEl) {
        visibleEl.textContent = String(visibleCount);
      }
      if (onlineEl) {
        onlineEl.textContent = String(onlineCount);
      }
      if (activeEl) {
        activeEl.textContent = String(activeCount);
      }
      if (energyEl) {
        energyEl.textContent = `${todayEnergy.toFixed(2)} kW`;
      }
    };

    const updateLastUpdated = () => {
      const lastUpdatedEl = document.querySelector('[data-dashboard-last-updated]');
      if (!lastUpdatedEl) {
        return;
      }
      const prefix = lastUpdatedEl.dataset.prefix || 'Last updated';
      const timestamp = new Date().toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      });
      lastUpdatedEl.textContent = `${prefix}: ${timestamp}`;
    };

    initializeDemoNotice();
    updateDashboardMetrics();
    updateLastUpdated();

    document.body.addEventListener('htmx:afterSwap', (event) => {
      if (!event.target || !event.target.matches('[data-dashboard-table-body]')) {
        return;
      }
      updateDashboardMetrics();
    });

    document.body.addEventListener('htmx:afterRequest', (event) => {
      const target = event.target;
      if (!target || !target.matches('[data-dashboard-table-body]')) {
        return;
      }

      if (!Boolean(event.detail && event.detail.successful)) {
        return;
      }

      updateLastUpdated();
    });
  })();
</script>
{% endblock %}