{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="mb-8">
  <h1 class="text-2xl font-bold text-gray-900">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">{{ tenant }}</code> — Namespace: <code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-600">device-connect.{{ tenant }}.&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">{{ creds_count }}</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">{{ online_count }}</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">{{ registered_count }}</div>
  </div>
</div>

<!-- Quick actions -->
<div class="flex flex-wrap gap-3 mb-8">
  {% if not readonly %}
  <a href="/devices" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
    Create Device
  </a>
  <a href="/api/devices/bundle?tenant={{ tenant }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">
    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
    Download All Credentials
  </a>
  {% 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>
  <div id="live-devices"
       hx-get="/api/devices/live?tenant={{ tenant }}"
       hx-trigger="load, every 3s"
       hx-swap="innerHTML">
    <div class="px-5 py-8 text-center text-gray-400 text-sm">Loading devices...</div>
  </div>
</div>

<script>
window._expandedDevices = window._expandedDevices || new Set();

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) window._expandedDevices.add(deviceId);
  else window._expandedDevices.delete(deviceId);
}

// Pause auto-refresh while any detail row is expanded
document.getElementById('live-devices').addEventListener('htmx:beforeRequest', function(evt) {
  if (window._expandedDevices.size > 0) {
    evt.preventDefault();
  }
});

// --- 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);

  // Collect params from inputs
  var params = {};
  paramsDiv.querySelectorAll('input[data-param]').forEach(function(input) {
    var val = input.value.trim();
    if (val === '') return;
    // Try to parse as JSON (number, bool, etc), fall back to string
    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', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ function: state.fn, params: params })
  })
  .then(function(r) { return r.json(); })
  .then(function(data) {
    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) ---
window._eventSources = {};

function openEventLog(deviceId, eventName) {
  // Close existing stream for this device
  closeEventLog(deviceId);

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

  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');
  window._eventSources[deviceId] = es;

  es.onmessage = function(e) {
    // Remove placeholder
    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);

    // Cap at 100 entries
    while (entries.children.length > 100) entries.removeChild(entries.firstChild);

    // Auto-scroll
    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 %}