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

{% block title %}{% trans "Net Monitor Console" %}{% endblock %}

{% block content %}
<h1 class="mb-3">{% trans "Net Monitor Console" %}</h1>
<p class="text-secondary mb-4">
  {% blocktrans %}This console exposes the WebAssembly-enabled Pyxel viewport so you can observe and interact with live charger activity directly from the browser.{% endblocktrans %}
</p>
<div class="border rounded-4 overflow-hidden shadow-sm bg-body" style="min-height: 60vh;">
  <div class="ratio ratio-16x9 bg-black position-relative">
    <iframe
      id="net-monitor-viewport"
      src="{{ viewport_src }}"
      allowfullscreen
      class="w-100 h-100 border-0"
      title="{% trans "Pyxel viewport" %}"
    ></iframe>
    <div
      id="net-monitor-warning"
      class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-center px-4"
      style="background: rgba(0, 0, 0, 0.55); color: #fff;"
      hidden
    ></div>
  </div>
</div>
<div class="alert alert-info mt-4" id="net-monitor-status" role="status">
  {% blocktrans %}Loading the WASM viewport…{% endblocktrans %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  (function () {
    const status = document.getElementById('net-monitor-status');
    const warning = document.getElementById('net-monitor-warning');
    const frame = document.getElementById('net-monitor-viewport');
    const messages = {
      ready: '{% trans "Pyxel viewport is ready." %}',
      missing: '{% trans "Pyxel viewport assets are missing." %}',
      unsupported: '{% trans "This browser does not support WebAssembly." %}',
      loading: '{% trans "Loading the WASM viewport…" %}',
    };
    const updateStatus = (text, level = 'info') => {
      status.textContent = text;
      status.className = `alert alert-${level} mt-4`;
    };

    if (typeof WebAssembly === 'undefined') {
      updateStatus(
        '{% trans "This browser does not support WebAssembly." %}',
        'warning',
      );
      warning.hidden = false;
      warning.textContent = '{% trans "Please switch to a modern browser to load the console." %}';
      return;
    }

    frame.addEventListener('load', () => {
      updateStatus('{% trans "Checking Pyxel viewport assets…" %}');
      warning.hidden = false;
      warning.textContent = '{% trans "Waiting for the embedded console to finish loading." %}';
    });

    frame.addEventListener('error', () => {
      updateStatus('{% trans "Unable to load the Pyxel viewport assets." %}', 'danger');
      warning.hidden = false;
      warning.textContent = '{% trans "Verify that the WASM bundle generated by pyxel_viewport is available in static files." %}';
    });

    const viewportOrigin = (() => {
      try {
        return new URL(frame.src, window.location.href).origin;
      } catch (error) {
        return null;
      }
    })();

    window.addEventListener('message', (event) => {
      if (
        event.origin !== window.location.origin &&
        (viewportOrigin === null || event.origin !== viewportOrigin)
      ) {
        return;
      }
      const payload = event.data || {};
      if (payload.type !== 'net-monitor-status') {
        return;
      }

      switch (payload.status) {
        case 'ready':
          updateStatus(messages.ready);
          warning.hidden = true;
          break;
        case 'missing':
          updateStatus(messages.missing, 'danger');
          warning.hidden = false;
          warning.textContent = '{% trans "Place the Pyxel viewport build into static/ocpp/net_monitor/pyxel_viewport to enable the console." %}';
          break;
        case 'unsupported':
          updateStatus(messages.unsupported, 'warning');
          warning.hidden = false;
          warning.textContent = '{% trans "Please switch to a modern browser to load the console." %}';
          break;
        case 'loading':
          updateStatus(messages.loading);
          warning.hidden = false;
          warning.textContent = '{% trans "Loading Pyxel viewport assets…" %}';
          break;
        default:
          break;
      }
    });
  })();
</script>
{% endblock %}