// Network Devices band — IoT / personal / unknown LAN devices, kept SEPARATE
// from Little Blue's homelab-service health band. Read-only, static source
// (public/devices.json), no health probing. Live discovery comes later.
import { el, mount } from '../dom.js';

let host;
async function load() {
  if (!host) return;
  try {
    const res = await fetch('/devices.json');
    const data = await res.json();
    const total = data.groups.reduce((n, g) => n + g.devices.length, 0);
    const sections = data.groups.map(g =>
      el('div', { class: 'dv-section' },
        el('div', { class: 'dv-group' },
          el('span', { class: 'gname' }, g.name),
          el('span', { class: 'gcount' }, String(g.devices.length)),
          el('span', { class: 'line' })),
        el('div', { class: 'dv-tiles' }, g.devices.map(d =>
          el('div', { class: 'dv-tile' + (d.flag ? ' flag' : '') },
            el('span', { class: 'dv-nm' }, d.name),
            el('span', { class: 'dv-ip' }, d.ip),
            el('span', { class: 'dv-vendor' }, d.vendor || ''))))));
    mount(host,
      el('div', { class: 'dv-hd' },
        el('div', { class: 'dv-title' }, 'Network · Devices'),
        el('span', { class: 'dv-count' }, `${total} on the LAN`)),
      el('div', { class: 'dv-note' }, data.note || ''),
      sections);
  } catch {
    mount(host, el('span', { class: 'muted' }, 'Device list unavailable'));
  }
}
export function renderDevicesBand(el_) { host = el_; load(); }
export function stopDevicesBand() { host = null; }