const tableBody = document.getElementById('devicesTable');
const refreshBtn = document.getElementById('refreshBtn');
const statusMessage = document.getElementById('statusMessage');

async function fetchDevices() {
  setStatus('Cargando dispositivos...');
  try {
    const response = await fetch('/api/devices');
    if (!response.ok) {
      throw new Error('Error ' + response.status);
    }
    const { devices } = await response.json();
    renderTable(devices || []);
    setStatus('Actualizado ' + new Date().toLocaleTimeString());
  } catch (error) {
    console.error(error);
    setStatus('No se pudo cargar el listado');
  }
}

function renderTable(devices) {
  tableBody.innerHTML = '';
  if (!devices.length) {
    tableBody.innerHTML = '<tr><td colspan="7" class="empty">Sin registros</td></tr>';
    return;
  }
  devices.sort((a, b) => (a.lastSeen || '').localeCompare(b.lastSeen || '') * -1);
  for (const device of devices) {
    const tr = document.createElement('tr');
    if (device.blocked) {
      tr.classList.add('blocked');
    }
    const alias = device.alias && device.alias.trim().length ? device.alias : 'Sin alias';
    tr.innerHTML = `
      <td>
        <div class="alias">${alias}</div>
        <div class="device-name">${device.deviceName || '(sin nombre)'} </div>
      </td>
      <td>${device.deviceId}</td>
      <td>${[device.manufacturer, device.model].filter(Boolean).join(' ')}</td>
      <td>${device.appVersionName || ''} (${device.appVersionCode || ''})</td>
      <td>${formatDate(device.lastSeen)}</td>
      <td>${device.blocked ? 'Bloqueado' : 'Activo'}</td>
      <td class="actions-cell">
        <button data-action="alias">Alias</button>
        ${device.blocked ? '<button data-action="unblock" class="primary">Desbloquear</button>' : '<button data-action="block" class="danger">Bloquear</button>'}
      </td>
    `;
    tr.dataset.deviceId = device.deviceId;
    tableBody.appendChild(tr);
  }
}

function formatDate(value) {
  if (!value) return '-';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleString();
}

async function blockDevice(deviceId) {
  const reason = prompt('Motivo del bloqueo (opcional):');
  await fetch(`/api/devices/${encodeURIComponent(deviceId)}/block`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ reason })
  });
  await fetchDevices();
}

async function unblockDevice(deviceId) {
  await fetch(`/api/devices/${encodeURIComponent(deviceId)}/unblock`, { method: 'POST' });
  await fetchDevices();
}

async function updateAlias(deviceId) {
  const alias = prompt('Nuevo alias para el dispositivo:');
  if (alias === null) {
    return;
  }
  await fetch(`/api/devices/${encodeURIComponent(deviceId)}/alias`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ alias })
  });
  await fetchDevices();
}

function setStatus(message) {
  statusMessage.textContent = message;
}

refreshBtn.addEventListener('click', fetchDevices);

tableBody.addEventListener('click', async (event) => {
  const button = event.target.closest('button');
  if (!button) return;
  const tr = button.closest('tr');
  const deviceId = tr && tr.dataset.deviceId;
  if (!deviceId) return;
  const action = button.dataset.action;
  try {
    if (action === 'block') {
      await blockDevice(deviceId);
    } else if (action === 'unblock') {
      await unblockDevice(deviceId);
    } else if (action === 'alias') {
      await updateAlias(deviceId);
    }
  } catch (error) {
    console.error(error);
    alert('Operación fallida');
  }
});

fetchDevices();