async function loadDevices() {
  try {
    const res = await fetch('/api/status');
    const devices = await res.json();
    const grid = document.getElementById('deviceGrid');
    grid.innerHTML = '';

    devices.forEach(d => {
      const card = document.createElement('div');
      card.className = 'card ' + (d.status === 'on' ? 'on' : 'off');

      // Warna neon terang
      const shadowColor = d.status === 'on' ? 'rgba(0,255,0,1)' : 'rgba(255,0,0,1)';

      // Glow neon multi-layer untuk icon lokasi saja
      const glowStyle = `
        text-shadow:
          0 0 5px ${shadowColor},
          0 0 10px ${shadowColor},
          0 0 15px ${shadowColor},
          0 0 20px ${shadowColor};
      `;

      // Card inner HTML
      card.innerHTML = `
        <div class="name">${d.name}</div>
        <div class="lokasi">
          <span class="icon glow" style="--shadow-color: ${shadowColor}; ${glowStyle}">📍</span> 
          ${d.lokasi}
        </div>
        <div class="ip">
          <span class="icon" style="text-shadow: 0 0 8px ${shadowColor};">💻</span> 
          ${d.ip}
        </div>
      `;

      // Klik card membuka IP di tab baru
      card.addEventListener('click', () => {
        window.open(`http://${d.ip}`, '_blank');
      });

      grid.appendChild(card);
    });

    // Tambahkan animasi pulsing glow untuk icon lokasi
    addPulsingGlow();

  } catch (err) {
    console.error("Gagal memuat data perangkat:", err);
  }
}

// Fungsi untuk menambahkan efek pulsing glow neon pada icon lokasi
function addPulsingGlow() {
  const styleId = 'pulsing-glow-style';
  if (!document.getElementById(styleId)) {
    const style = document.createElement('style');
    style.id = styleId;
    style.innerHTML = `
      @keyframes pulseGlow {
        0% { text-shadow: 0 0 5px var(--shadow-color), 0 0 10px var(--shadow-color), 0 0 15px var(--shadow-color), 0 0 20px var(--shadow-color); }
        50% { text-shadow: 0 0 10px var(--shadow-color), 0 0 20px var(--shadow-color), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color); }
        100% { text-shadow: 0 0 5px var(--shadow-color), 0 0 10px var(--shadow-color), 0 0 15px var(--shadow-color), 0 0 20px var(--shadow-color); }
      }

      .icon.glow {
        animation: pulseGlow 1.5s infinite ease-in-out;
      }
    `;
    document.head.appendChild(style);
  }
}

// Load pertama kali
loadDevices();

// Refresh otomatis setiap 10 detik
setInterval(loadDevices, 10000);
