{% extends "base.html" %}
{% block title %}Viewing {{ viewing_as }}{% endblock %}
{% block content %}
<!-- This is the "View as User" page for admin — reuses dashboard layout -->
<div class="mb-8">
  <h1 class="text-2xl font-bold text-gray-900">{{ viewing_as }}'s Dashboard</h1>
  <p class="text-sm text-gray-500 mt-1">Tenant: <code class="bg-gray-100 px-1.5 py-0.5 rounded text-indigo-700">{{ viewing_as }}</code> — Namespace: <code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-600">device-connect.{{ viewing_as }}.&gt;</code></p>
</div>

<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
  <div class="bg-white rounded-xl border border-gray-200 p-5">
    <div class="text-sm font-medium text-gray-500">Credentials Created</div>
    <div class="text-3xl font-bold text-gray-900 mt-1"><span id="creds-count">{{ creds_count }}</span></div>
  </div>
  <div class="bg-white rounded-xl border border-gray-200 p-5">
    <div class="text-sm font-medium text-gray-500">Devices Online</div>
    <div class="text-3xl font-bold text-green-600 mt-1"><span id="online-count">{{ online_count }}</span></div>
  </div>
  <div class="bg-white rounded-xl border border-gray-200 p-5">
    <div class="text-sm font-medium text-gray-500">Devices Registered</div>
    <div class="text-3xl font-bold text-gray-900 mt-1"><span id="registered-count">{{ registered_count }}</span></div>
  </div>
</div>

<!-- Credentials table -->
<div class="bg-white rounded-xl border border-gray-200 mb-6">
  <div class="px-5 py-4 border-b border-gray-200">
    <h2 class="text-lg font-semibold text-gray-900">Device Credentials</h2>
  </div>
  {% if credentials %}
  {% for cred in credentials %}
  <div class="px-5 py-4 border-b border-gray-100 last:border-b-0 hover:bg-gray-50 flex items-center justify-between">
    <div>
      <div class="text-sm font-medium text-gray-900">{{ cred.device_id }}</div>
      <div class="text-xs text-gray-400 mt-0.5">{{ cred.filename }}</div>
    </div>
  </div>
  {% endfor %}
  {% else %}
  <div class="px-5 py-8 text-center text-gray-400 text-sm">No credentials</div>
  {% endif %}
</div>

<!-- Live devices -->
<div class="bg-white rounded-xl border border-gray-200">
  <div class="px-5 py-4 border-b border-gray-200 flex items-center justify-between">
    <h2 class="text-lg font-semibold text-gray-900">Live Devices</h2>
    <span class="inline-flex items-center text-xs text-gray-400">
      <span class="w-2 h-2 bg-green-400 rounded-full pulse-dot mr-1.5"></span>
      Auto-refreshing
    </span>
  </div>
  {# Initial table render only — htmx fires `load` once and the
     fragment lands here. From then on, /api/devices/live.json drives
     in-place cell updates. See dashboard.html for the rationale. #}
  <div id="live-devices"
       hx-get="/api/devices/live?tenant={{ viewing_as }}"
       hx-trigger="load"
       hx-swap="innerHTML">
    <div class="px-5 py-8 text-center text-gray-400 text-sm">Loading devices...</div>
  </div>
</div>

<script>
var _tenantParam = '?tenant={{ viewing_as }}';
window._deviceCapsHash = window._deviceCapsHash || {};

// Auth guard for background fetches. The auth middleware returns a real
// 401 (not an HTML redirect) for unauthenticated /api/ requests, so a
// fetch can never inject the login page into a fragment slot. When we
// see that 401, bounce the whole tab through the top-level login flow.
// Returns true when it has taken over (caller should stop processing).
function authGuard(r) {
  if (r.status === 401) {
    var next = window.location.pathname + window.location.search;
    window.location.href = '/login?next=' + encodeURIComponent(next);
    return true;
  }
  return false;
}

function loadDetailIfNeeded(row, deviceId) {
  var url = row.getAttribute('data-detail-url');
  var slot = row.querySelector('.detail-content');
  if (!url || !slot) return;
  if (slot.dataset.loaded === 'true' || slot.dataset.loading === 'true') return;
  slot.dataset.loading = 'true';
  fetch(url, {credentials: 'same-origin'})
    .then(function(r) {
      if (authGuard(r)) return null;
      if (!r.ok) throw new Error('HTTP ' + r.status);
      return r.text();
    })
    .then(function(html) {
      slot.innerHTML = html;
      slot.dataset.loaded = 'true';
      delete slot.dataset.loading;
    })
    .catch(function(err) {
      delete slot.dataset.loading;
      slot.innerHTML = '';
      var p = document.createElement('p');
      p.className = 'text-xs text-red-500';
      p.textContent = 'Failed to load details: ' + (err && err.message ? err.message : err);
      slot.appendChild(p);
    });
}

function toggleDetail(deviceId) {
  var row = document.getElementById('detail-' + deviceId);
  var chevron = document.getElementById('chevron-' + deviceId);
  if (!row) return;
  var opening = row.classList.contains('hidden');
  row.classList.toggle('hidden');
  if (chevron) chevron.style.transform = opening ? 'rotate(90deg)' : '';
  if (opening) loadDetailIfNeeded(row, deviceId);
}

// --- In-place poll (replaces the old table-wide htmx swap). See
//     dashboard.html for the full rationale. ---------------------

function statusPillHtml(status) {
  if (status === 'available') {
    return '<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">' +
             '<span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1 pulse-dot"></span>' +
             'online' +
           '</span>';
  }
  var safe = String(status == null ? 'unknown' : status)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return '<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">' +
           '<span class="w-1.5 h-1.5 bg-gray-400 rounded-full mr-1"></span>' +
           safe +
         '</span>';
}

function updateRowFromJson(d) {
  var row = document.getElementById('summary-' + d.device_id);
  if (!row) return false;
  var statusCell = row.querySelector('.cell-status');
  if (statusCell) statusCell.innerHTML = statusPillHtml(d.status);
  var locCell = row.querySelector('.cell-location');
  if (locCell) locCell.textContent = d.location || '—';
  var seenCell = row.querySelector('.cell-lastseen');
  if (seenCell) seenCell.textContent = d.last_seen || '—';

  var prevHash = window._deviceCapsHash[d.device_id];
  if (prevHash && prevHash !== d.capabilities_hash) {
    var detailRow = document.getElementById('detail-' + d.device_id);
    if (detailRow && !detailRow.classList.contains('hidden')) {
      var slot = detailRow.querySelector('.detail-content');
      if (slot && slot.dataset.loaded === 'true') {
        // Close any open stream before refetching: events list may
        // have changed and the post-refetch panel will be empty.
        if (typeof closeEventLog === 'function') closeEventLog(d.device_id);
        delete slot.dataset.loaded;
        delete slot.dataset.loading;
        loadDetailIfNeeded(detailRow, d.device_id);
      }
    }
  }
  window._deviceCapsHash[d.device_id] = d.capabilities_hash;
  return true;
}

// See dashboard.html for the orphan-row race this guards against.
window._pendingInserts = window._pendingInserts || {};

function insertNewDeviceRow(deviceId, capsHash) {
  if (window._pendingInserts[deviceId]) return;
  window._pendingInserts[deviceId] = true;
  fetch('/api/devices/' + encodeURIComponent(deviceId) + '/row-html' + _tenantParam,
        { credentials: 'same-origin' })
    .then(function(r) { if (authGuard(r)) return null; return r.ok ? r.text() : null; })
    .then(function(html) {
      // Cancelled by an interleaved removeDeviceRow — discard.
      if (!window._pendingInserts[deviceId]) return;
      delete window._pendingInserts[deviceId];
      if (!html) return;
      if (document.getElementById('summary-' + deviceId)) return;
      var liveTbody = document.querySelector('#live-devices tbody');
      if (!liveTbody) return;
      var holder = document.createElement('tbody');
      holder.innerHTML = html;
      while (holder.firstChild) liveTbody.appendChild(holder.firstChild);
      window._deviceCapsHash[deviceId] = capsHash;
    })
    .catch(function() { delete window._pendingInserts[deviceId]; });
}

function removeDeviceRow(deviceId) {
  var summary = document.getElementById('summary-' + deviceId);
  var detail = document.getElementById('detail-' + deviceId);
  if (summary && summary.parentElement) summary.parentElement.removeChild(summary);
  if (detail && detail.parentElement) detail.parentElement.removeChild(detail);
  delete window._deviceCapsHash[deviceId];
  // Cancel any in-flight insert (see dashboard.html comment).
  delete window._pendingInserts[deviceId];
  if (typeof closeEventLog === 'function') closeEventLog(deviceId);
}

function reloadLiveFragment() {
  // Route through htmx (not a raw fetch + innerHTML) so the fragment's
  // hx-swap-oob counter spans are relocated into the header cards
  // instead of rendering as literal text below the table. Mirrors the
  // dashboard.html fix.
  if (window.htmx) {
    htmx.ajax('GET', '/api/devices/live' + _tenantParam, {
      target: '#live-devices',
      swap: 'innerHTML',
    });
  }
}

function pollDevices() {
  fetch('/api/devices/live.json' + _tenantParam, { credentials: 'same-origin' })
    .then(function(r) { if (authGuard(r)) return null; return r.ok ? r.json() : null; })
    .then(function(data) {
      if (!data) return;
      var oc = document.getElementById('online-count');
      if (oc) oc.textContent = data.counts.online;
      var rc = document.getElementById('registered-count');
      if (rc) rc.textContent = data.counts.registered;
      var cc = document.getElementById('creds-count');
      if (cc) cc.textContent = data.counts.creds;

      var tbody = document.querySelector('#live-devices tbody');
      var jsonHasDevices = data.devices.length > 0;
      if (jsonHasDevices !== !!tbody) {
        reloadLiveFragment();
        return;
      }
      if (!tbody) return;

      var seen = {};
      data.devices.forEach(function(d) {
        seen[d.device_id] = true;
        if (!updateRowFromJson(d)) {
          insertNewDeviceRow(d.device_id, d.capabilities_hash);
        }
      });
      Array.prototype.forEach.call(
        tbody.querySelectorAll('tr[id^="summary-"]'),
        function(row) {
          var id = row.id.substring('summary-'.length);
          if (!seen[id]) removeDeviceRow(id);
        },
      );
    })
    .catch(function() { /* silent */ });
}

setInterval(pollDevices, 10000);

// --- RPC Invoke ---
window._invokeState = {};

function openInvoke(deviceId, fnName, schema) {
  var panel = document.getElementById('invoke-' + deviceId);
  var fnLabel = document.getElementById('invoke-fn-' + deviceId);
  var paramsDiv = document.getElementById('invoke-params-' + deviceId);
  var resultPre = document.getElementById('invoke-result-' + deviceId);
  var statusEl = document.getElementById('invoke-status-' + deviceId);

  fnLabel.textContent = fnName;
  paramsDiv.innerHTML = '';
  resultPre.classList.add('hidden');
  statusEl.textContent = '';
  window._invokeState[deviceId] = { fn: fnName, params: {} };

  var props = (schema && schema.properties) || {};
  var keys = Object.keys(props);
  if (keys.length === 0) {
    paramsDiv.innerHTML = '<p class="text-xs text-gray-400">No parameters</p>';
  } else {
    keys.forEach(function(pname) {
      var pspec = props[pname];
      var defaultVal = pspec['default'] !== undefined ? pspec['default'] : '';
      var row = document.createElement('div');
      row.className = 'flex items-center gap-2';
      row.innerHTML =
        '<label class="text-xs text-gray-600 w-24 shrink-0">' + pname +
        ' <span class="text-gray-400">(' + (pspec.type || '?') + ')</span></label>' +
        '<input type="text" data-param="' + pname + '" value="' + defaultVal + '"' +
        ' class="flex-1 rounded border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">';
      paramsDiv.appendChild(row);
    });
  }
  panel.classList.remove('hidden');
}

function closeInvoke(deviceId) {
  document.getElementById('invoke-' + deviceId).classList.add('hidden');
}

function submitInvoke(deviceId) {
  var state = window._invokeState[deviceId];
  if (!state) return;
  var statusEl = document.getElementById('invoke-status-' + deviceId);
  var resultPre = document.getElementById('invoke-result-' + deviceId);
  var paramsDiv = document.getElementById('invoke-params-' + deviceId);

  var params = {};
  paramsDiv.querySelectorAll('input[data-param]').forEach(function(input) {
    var val = input.value.trim();
    if (val === '') return;
    try { params[input.dataset.param] = JSON.parse(val); }
    catch(e) { params[input.dataset.param] = val; }
  });

  statusEl.textContent = 'Sending…';
  resultPre.classList.add('hidden');

  fetch('/api/devices/' + deviceId + '/invoke' + _tenantParam, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ function: state.fn, params: params })
  })
  .then(function(r) { if (authGuard(r)) return null; return r.json(); })
  .then(function(data) {
    if (data == null) return;  // auth guard took over
    statusEl.textContent = data.error ? 'Error' : 'OK';
    resultPre.textContent = JSON.stringify(data, null, 2);
    resultPre.classList.remove('hidden');
  })
  .catch(function(err) {
    statusEl.textContent = 'Failed';
    resultPre.textContent = err.toString();
    resultPre.classList.remove('hidden');
  });
}

// --- Event Log (SSE) ---
// Panel lives in the device's detail row (devices/_live_detail.html).
// See dashboard.html for the full rationale.
window._eventSources = {};

function openEventLog(deviceId, eventName) {
  closeEventLog(deviceId);

  var panel = document.getElementById('eventlog-' + deviceId);
  var nameEl = document.getElementById('eventlog-name-' + deviceId);
  var entries = document.getElementById('eventlog-entries-' + deviceId);
  if (!panel || !nameEl || !entries) return;

  nameEl.textContent = eventName;
  entries.innerHTML = '<p class="text-gray-400 italic">Listening for events...</p>';
  panel.classList.remove('hidden');

  var es = new EventSource('/api/devices/' + deviceId + '/events/' + eventName + '/stream' + _tenantParam);
  window._eventSources[deviceId] = es;

  es.onmessage = function(e) {
    var placeholder = entries.querySelector('p.italic');
    if (placeholder) placeholder.remove();
    var data = JSON.parse(e.data);
    var row = document.createElement('div');
    row.className = 'cursor-pointer hover:bg-gray-50 rounded px-2 py-1 border-b border-gray-100';
    var summary = JSON.stringify(data.params);
    if (summary.length > 80) summary = summary.substring(0, 80) + '…';
    row.innerHTML =
      '<div class="flex items-center justify-between">' +
        '<span class="text-gray-400 font-mono">' + data.ts + '</span>' +
        '<span class="text-gray-600 ml-2 truncate">' + summary + '</span>' +
      '</div>' +
      '<pre class="hidden mt-1 bg-gray-900 text-gray-100 rounded p-2 overflow-x-auto text-xs">' +
        JSON.stringify(data.params, null, 2) + '</pre>';
    row.onclick = function(evt) { evt.stopPropagation(); row.querySelector('pre').classList.toggle('hidden'); };
    entries.appendChild(row);
    while (entries.children.length > 100) entries.removeChild(entries.firstChild);
    entries.scrollTop = entries.scrollHeight;
  };

  es.onerror = function() {
    var msg = document.createElement('p');
    msg.className = 'text-red-400 italic';
    msg.textContent = 'Stream disconnected.';
    entries.appendChild(msg);
  };
}

function closeEventLog(deviceId) {
  var es = window._eventSources[deviceId];
  if (es) { es.close(); delete window._eventSources[deviceId]; }
  var panel = document.getElementById('eventlog-' + deviceId);
  if (panel) panel.classList.add('hidden');
}
</script>
{% endblock %}