import { simpleTimeAgo } from '../utils/simple-time-ago.js';

function showDeviceModal(identifier, deviceType, fullData = {}) {
  let modal = document.getElementById('avDeviceModal');
  if (!modal) {
    modal = document.createElement('div');
    modal.id = 'avDeviceModal';
    modal.className = 'hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[100]';
    modal.innerHTML = `
          <div class="modal bg-gray-900 rounded-3xl w-full max-w-5xl max-h-[92vh] overflow-hidden shadow-2xl border border-gray-700">
          <div class="px-8 py-5 border-b border-gray-700 bg-gray-950 flex items-center justify-between">
          <h2 id="modalTitle" class="text-2xl font-semibold flex items-center gap-3"></h2>
          <button id="modalClose" class="text-gray-400 hover:text-white text-3xl leading-none">×</button>
        </div>
        <div id="modalContent" class="p-8 overflow-y-auto max-h-[calc(92vh-80px)] space-y-8"></div>
      </div>
    `;
    document.body.appendChild(modal);
    modal.querySelector('#modalClose').addEventListener('click', () => modal.classList.add('hidden'));
  }

  const titleEl = modal.querySelector('#modalTitle');
  const contentEl = modal.querySelector('#modalContent');

  const isSwitch = deviceType === 'switch' || fullData?.isInfra || /^SW/i.test(String(identifier));
  titleEl.innerHTML = isSwitch
    ? `Switch / Infra: <span class="font-mono text-emerald-400">${identifier}</span>`
    : `Device: <span class="font-mono text-emerald-400">${identifier}</span>`;
  contentEl.innerHTML = getModalHTML(identifier, deviceType, fullData);

  modal.classList.remove('hidden');
}

function getModalHTML(identifier, deviceType, data) {
  const isInfra = deviceType === 'switch' || data?.isInfra || /^SW/i.test(String(identifier));
  if (isInfra) {
    return renderInfraSwitchModal(identifier, data || {});
  }

  const isAtlasAmp = !!data.isAtlasAmp || data.source === 'atlas';
  const isWireless = data.meraki?.connectionType === 'Wireless' || !!data.meraki?.client?.ssid;

  let html = '';

  // MDM Section
  if (data.source === 'mdm' && data.mdmData) {
    html += renderMDMSection(data.mdmData);
  }

  // OptiSigns
  if (data.optisigns) {
    html += renderOptiSignsTopBlock(data);
  }

  // RED
  if (data.red) {
    html += renderREDSection(data.red);
  }

  // Atlas AMP
  if (isAtlasAmp) {
    html += renderAMPTopBlock(data);
  }

  // ====================== MERAKI GROUPED SECTION ======================
  let merakiContent = '';

  // Always show the Meraki Client Information section (even if no client data)
  merakiContent += renderMerakiClientSection(data);   // ← pass full device, not just client

  // Wired devices: Show Switchport Status + Config
  // Support both top-level (some shapes) and under .client (rich/build path where attach puts ports on client)
  const portStatus = data.meraki?.portStatus || data.meraki?.client?.switchportStatus;
  const portConfig = data.meraki?.portConfig || data.meraki?.client?.switchportConfig;
  if (portStatus || portConfig) {
    if (portStatus) {
      merakiContent += renderSwitchportStatusSection(portStatus, portConfig);
    }
    if (portConfig) {
      merakiContent += renderSwitchportConfigSection(portConfig);
    }
  }
  // Wireless devices: Show Wireless Details
  // Support top-level (rich) or under client
  else if (data.meraki?.connectionType === 'Wireless' ||
    data.meraki?.client?.ssid ||
    data.meraki?.wirelessDetails ||
    data.meraki?.client?.wirelessDetails) {
    merakiContent += renderWirelessClientSection(data);
  }
  // No Meraki data at all (common for some wired MSC players)
  else {
    // Optional: You can add a small "No switchport data" message here if desired
  }

  html += sectionCard('Meraki Information', merakiContent);

  return `<div class="space-y-8">${html}</div>`;
}

// ====================== CONSISTENT SECTION HELPER ======================
function sectionCard(title, content) {
  return `
    <div class="section-card">
      <h3 class="text-lg font-semibold mb-6 text-emerald-400">${title}</h3>
      ${content}
    </div>
  `;
}

// ====================== RED SECTION ======================
function renderREDSection(red) {
  if (!red) return '';

  const parseUTCDate = (ts) => {
    if (!ts) return null;
    let str = String(ts).trim();
    if (!/[Z+-]/.test(str)) str += 'Z';
    const date = new Date(str);
    return isNaN(date.getTime()) ? null : date;
  };

  const lastPing = parseUTCDate(red.LastPingTimeUTC) ? simpleTimeAgo(parseUTCDate(red.LastPingTimeUTC)) : '—';
  const lastStartup = parseUTCDate(red.LastStartupDateUTC || red.LastStartupDate) ? simpleTimeAgo(parseUTCDate(red.LastStartupDateUTC || red.LastStartupDate)) : '—';

  const isOnline = red.Connectivity === 'Online';

  const statusBadge = `
    <span class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-semibold rounded-2xl shadow-md
                  ${isOnline ? 'bg-emerald-600 text-white' : 'bg-amber-900 text-amber-300'}">
      <span class="relative flex h-2 w-2">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full ${isOnline ? 'bg-emerald-300' : 'bg-amber-400'} opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 ${isOnline ? 'bg-emerald-300' : 'bg-amber-400'}"></span>
      </span>
      ${red.Connectivity || 'Unknown'}
    </span>`;

  const content = `
    <div class="flex justify-between items-start mb-6">
      <h3 class="text-lg font-semibold text-emerald-400">RED Audio Player</h3>
      ${statusBadge}
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-8 text-sm">
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">DEVICE ID</span>
        <span class="font-mono">${red.DeviceID || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">NAME</span>
        <span class="font-medium">${red.Name || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">DEPLOYMENT</span>
        <span class="font-medium">${red.DeploymentStatusName || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">AVAILABILITY</span>
        <span class="font-medium">${red.AvailabilityStatus || '—'}</span>
      </div>

      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">LAST PING</span>
        <span class="font-medium">${lastPing}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">LAST STARTUP</span>
        <span class="font-medium">${lastStartup}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">VERSION</span>
        <span class="font-medium">${red.CurrentNanopointVersionString || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">STATE</span>
        <span class="font-medium">${red.StateTransitionStatus || '—'}</span>
      </div>
    </div>
  `;

  return sectionCard('', content);   // Title handled inside
}

// ====================== OPTISIGNS SECTION ======================
function renderOptiSignsTopBlock(data) {
  const opti = data.optisigns || {};
  if (!opti) return '';

  const playlistName = opti.currentPlaylistName || opti.currentPlaylistId || '—';
  const assetName = opti.currentAssetName || '—';
  const hasContent = !!(opti.currentPlaylistId || opti.currentAssetId);
  const isRecent = opti.lastHeartBeat && (Date.now() - new Date(opti.lastHeartBeat).getTime()) < 24 * 60 * 60 * 1000;
  const isActive = hasContent && isRecent;

  const lastHeartbeat = opti.lastHeartBeat ? simpleTimeAgo(new Date(opti.lastHeartBeat)) : '—';

  const statusBadge = `
    <span class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-semibold rounded-2xl shadow-md
                  ${isActive ? 'bg-emerald-600 text-white' : 'bg-amber-900 text-amber-300'}">
      <span class="relative flex h-2 w-2">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full ${isActive ? 'bg-emerald-300' : 'bg-amber-400'} opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 ${isActive ? 'bg-emerald-300' : 'bg-amber-400'}"></span>
      </span>
      ${isActive ? 'Active' : 'Inactive'}
    </span>`;

  const content = `
    <div class="flex justify-between items-start mb-6">
      <h3 class="text-lg font-semibold text-emerald-400">OptiSigns</h3>
      ${statusBadge}
    </div>

    <div class="text-lg font-medium">"${playlistName}"</div>
    ${assetName !== '—' ? `<div class="text-sm text-gray-400 mt-1">Asset: ${assetName}</div>` : ''}

    <div class="mt-8 pt-6 border-t border-gray-700 text-sm">
      <span class="text-gray-400">Last Heartbeat:</span> 
      <span class="font-medium">${lastHeartbeat}</span>
    </div>
  `;

  return sectionCard('', content);
}

// ====================== AMP SECTION ======================
function renderAMPTopBlock(data) {
  let atlas = {};
  if (Array.isArray(data.atlasData) && data.atlasData.length > 0) atlas = data.atlasData[0];
  else if (data.atlasData && typeof data.atlasData === 'object') atlas = data.atlasData;
  else if (data.atlas) atlas = data.atlas;

  const state = atlas.state || {};
  const model = atlas.model || {};
  const firmware = atlas.firmware || {};

  // Align status extraction with /avstatus command for consistency:
  // prefer top-level status (from raw Atlas data) then state.status
  const ampStatus = atlas.status || state.status || 'Unknown';
  const isOnline = (ampStatus).toLowerCase() === 'online';

  const cpuTemp = state.tempCpu ? Number(state.tempCpu).toFixed(1) + '°F' : '—';
  const psuTemp = state.tempPsu ? Number(state.tempPsu).toFixed(1) + '°F' : '—';
  const ioTemp = state.tempIo ? Number(state.tempIo).toFixed(1) + '°F' : '—';
  const fanSpeed = state.fanSpeed ? Math.round(state.fanSpeed) + '%' : '—';

  let ampHtml = '';
  for (let i = 1; i <= 8; i++) {
    const status = state[`ampStatus_${i}`] || '—';
    const temp = state[`tempAmp_${i}`] ? Number(state[`tempAmp_${i}`]).toFixed(1) + '°F' : '—';
    ampHtml += `
      <div class="bg-gray-950 rounded-xl p-3 text-center">
        <div class="text-xs text-gray-400">AMP ${i}</div>
        <div class="font-medium text-sm mt-1 ${status === 'Ready' || status === 'Active' ? 'text-emerald-400' : 'text-amber-400'}">
          ${status}
        </div>
        <div class="text-xs text-gray-500 mt-1">${temp}</div>
      </div>
    `;
  }

  const content = `
    <div class="flex justify-between items-start mb-6">
      <div>
        <div class="text-emerald-400 text-sm font-medium">Atlas IED Power Amplifier</div>
        <div class="text-xl font-semibold mt-1">${atlas.name || 'US002477AMP'}</div>
      </div>
      <span class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-semibold rounded-2xl shadow-md
                   ${isOnline ? 'bg-emerald-600 text-white' : 'bg-amber-900 text-amber-300'}">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full ${isOnline ? 'bg-emerald-300' : 'bg-amber-400'} opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2 w-2 ${isOnline ? 'bg-emerald-300' : 'bg-amber-400'}"></span>
        </span>
        ${ampStatus}
      </span>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-sm mb-8">
      <div><span class="text-gray-400">Model</span><br><span class="font-medium">${model.name || 'AZMP8'}</span></div>
      <div><span class="text-gray-400">Serial</span><br><span class="font-mono">${atlas.sn || '—'}</span></div>
      <div><span class="text-gray-400">Firmware</span><br><span class="font-medium">${firmware.version || '4.5.16'}</span></div>
      <div><span class="text-gray-400">IP</span><br><span class="font-mono">${state.IpAddress || '—'}</span></div>
      <div><span class="text-gray-400">CPU Usage</span><br><span>${state.cpuUsage || '—'}%</span></div>
      <div><span class="text-gray-400">RAM Usage</span><br><span>${state.ramUsage ? state.ramUsage.toFixed(1) : '—'}%</span></div>
      <div><span class="text-gray-400">Voltage</span><br><span>${state.voltageMonitor || '120'}V</span></div>
      <div><span class="text-gray-400">Last Seen</span><br><span class="font-medium">${simpleTimeAgo(atlas.last_seen_at)}</span></div>
    </div>

    <div class="grid grid-cols-4 gap-6 text-sm mb-8">
      <div><span class="text-gray-400">CPU Temp</span><br>${cpuTemp}</div>
      <div><span class="text-gray-400">PSU Temp</span><br>${psuTemp}</div>
      <div><span class="text-gray-400">Io Temp</span><br>${ioTemp}</div>
      <div><span class="text-gray-400">Fan Speed</span><br>${fanSpeed}</div>
    </div>

    <div class="mb-8">
      <span class="text-gray-400 text-sm">Last Log Entry</span><br>
      <span class="text-xs text-gray-300">${state.lastLogEntry || '—'}</span>
    </div>

    <div class="pt-6 border-t border-gray-700">
      <div class="text-xs uppercase tracking-widest text-gray-400 mb-4">Amplifier Channels</div>
      <div class="grid grid-cols-4 md:grid-cols-8 gap-3">${ampHtml}</div>
    </div>
  `;

  return sectionCard('Atlas IED Power Amplifier', content);
}

/**
 * Renders the Meraki Client Information section
 * Handles both cases gracefully: has Meraki data OR no Meraki client (common for wired MSC on local switches)
 */
function renderMerakiClientSection(device) {
  const meraki = device.meraki || {};
  const client = meraki.client || null;
  const connectionType = meraki.connectionType || 'Unknown';

  let isOnline = client?.status === 'Online' || false;
  // Fallback using lastSeen recency if the Meraki client record lacks an explicit status (or for the most-recent picked record)
  if (!isOnline && client?.lastSeen) {
    const d = new Date(client.lastSeen);
    if (!isNaN(d.getTime())) {
      const ageMins = (Date.now() - d.getTime()) / 60000;
      if (ageMins < 5) isOnline = true;
      // else leave false (will show Offline badge)
    }
  }
  const lastSeen = client?.lastSeen ? simpleTimeAgo(new Date(client.lastSeen)) : '—';

  const cleanMac = client?.mac
    ? client.mac.toUpperCase().replace(/:/g, '')
    : '—';

  const ip = client?.ip || '—';

  // Data usage in MB (3 decimal places)
  let sentMB = 0, recvMB = 0, totalMB = 0;
  if (client?.usage) {
    sentMB = (client.usage.sent / 1048576).toFixed(3);
    recvMB = (client.usage.recv / 1048576).toFixed(3);
    totalMB = (client.usage.total / 1048576).toFixed(3);
  }

  const statusBadge = `
    <span class="inline-flex items-center gap-1.5 px-5 py-1.5 text-sm font-semibold rounded-2xl shadow-md
      ${isOnline ? 'bg-emerald-600 text-white' : 'bg-red-600 text-white'}">
      <span class="relative flex h-2 w-2">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full ${isOnline ? 'bg-emerald-300' : 'bg-red-300'} opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 ${isOnline ? 'bg-emerald-300' : 'bg-red-300'}"></span>
      </span>
      ${isOnline ? 'Online' : 'Offline'}
    </span>
  `;

  const merakiLink = client?.id && device.meraki?.clientUrl
    ? `<a href="${device.meraki.clientUrl}" target="_blank" class="text-emerald-400 hover:text-emerald-300 text-sm font-medium flex items-center gap-1">
         View in Meraki →
       </a>`
    : '';

  let content = '';

  if (client) {
    // Has Meraki client data
    content = `
      <div class="flex justify-between items-start mb-6">
        <h3 class="text-lg font-semibold text-emerald-400">Meraki Client Information</h3>
        <div class="flex items-center gap-4">
          ${statusBadge}
          ${merakiLink}
        </div>
      </div>

      <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-8 text-sm">
        <div>
          <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">CONNECTION TYPE</span>
          <span class="font-medium">${connectionType}</span>
        </div>
        <div>
          <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">MAC ADDRESS</span>
          <span class="font-mono text-emerald-300">${cleanMac}</span>
        </div>
        <div>
          <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">IP ADDRESS</span>
          <span class="font-mono">${ip}</span>
        </div>
        <div>
          <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">LAST SEEN</span>
          <span class="font-medium">${lastSeen}</span>
        </div>
      </div>

      <!-- Data Usage -->
      <div class="mt-10 pt-6 border-t border-gray-700">
        <div class="text-xs uppercase tracking-widest text-gray-400 mb-3">DATA USAGE (SINCE LAST SEEN)</div>
        <div class="grid grid-cols-3 gap-4 text-center">
          <div class="bg-gray-950 rounded-2xl p-5">
            <div class="text-emerald-400 text-xs font-medium">SENT</div>
            <div class="text-2xl font-semibold mt-1">${sentMB} MB</div>
          </div>
          <div class="bg-gray-950 rounded-2xl p-5">
            <div class="text-emerald-400 text-xs font-medium">RECEIVED</div>
            <div class="text-2xl font-semibold mt-1">${recvMB} MB</div>
          </div>
          <div class="bg-gray-950 rounded-2xl p-5">
            <div class="text-emerald-400 text-xs font-medium">TOTAL</div>
            <div class="text-2xl font-semibold mt-1">${totalMB} MB</div>
          </div>
        </div>
      </div>
    `;
  } else {
    // No Meraki client found (common for wired MSC on local switches)
    content = `
      <div class="flex justify-between items-start mb-6">
        <h3 class="text-lg font-semibold text-emerald-400">Meraki Client Information</h3>
        ${merakiLink}
      </div>

      <div class="bg-amber-950 border border-amber-800 rounded-2xl p-8 text-center">
        <div class="text-amber-400 text-xl mb-2">⚠️ No Meraki Client Data</div>
        <p class="text-amber-300">This device is likely connected to a local or non-Meraki switch/infrastructure.</p>
        <p class="text-sm text-gray-400 mt-4">Connection Type: <span class="font-medium">${connectionType}</span></p>
      </div>
    `;
  }

  return sectionCard('', content);
}

// ====================== MDM SECTION ======================
function renderMDMSection(mdmData) {
  if (!mdmData) return '';

  const summary = mdmData.mdmDataSummary || {};
  const lastSeen = mdmData.LastSeen || summary.lastSeen;

  // MDM Console Link
  const deviceId = mdmData.Id?.Value || summary.id || '';
  const mdmLink = deviceId
    ? `<a href="https://cn1991.awmdm.com/AirWatch/#/AirWatch/Device/Details/Summary/${deviceId}" 
         target="_blank" 
         class="text-emerald-400 hover:text-emerald-300 text-sm font-medium flex items-center gap-1">
         View in MDM Console →
       </a>`
    : '';

  const content = `
    <div class="flex justify-between items-start mb-6">
      <h3 class="text-lg font-semibold text-emerald-400">MDM Device Information</h3>
      ${mdmLink}
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-8 text-sm">
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">Username</span>
        <span class="font-medium">${mdmData.UserName || summary.username || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">Serial Number</span>
        <span class="font-mono text-emerald-300">${mdmData.SerialNumber || summary.serialNumber || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">MAC Address</span>
        <span class="font-mono">${mdmData.MacAddress || summary.macAddress || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">Model</span>
        <span class="font-medium">${mdmData.Model || summary.model || 'Apple TV'}</span>
      </div>

      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">OS Version</span>
        <span class="font-medium">${mdmData.OperatingSystem || summary.osVersion || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">Compliance</span>
        <span class="${(mdmData.ComplianceStatus || summary.complianceStatus) === 'Compliant' ? 'text-green-400' : 'text-red-400'} font-medium">
          ${mdmData.ComplianceStatus || summary.complianceStatus || '—'}
        </span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">Enrollment</span>
        <span class="font-medium">${mdmData.EnrollmentStatus || summary.enrollmentStatus || '—'}</span>
      </div>
      <div>
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">Location Group</span>
        <span class="font-medium">${mdmData.LocationGroupName || summary.locationGroupName || '—'}</span>
      </div>

      <div class="col-span-2 md:col-span-1">
        <span class="text-gray-400 block text-xs uppercase tracking-widest mb-1">Last Seen</span>
        <span class="font-medium">${lastSeen ? simpleTimeAgo(lastSeen) : '—'}</span>
      </div>
    </div>
  `;

  return sectionCard('', content);   // Title moved inside for link alignment
}

// ====================== WIRELESS SECTION ======================
function renderWirelessClientSection(data) {
  const client = data.meraki?.client || {};
  const wirelessDetails = data.meraki?.wirelessDetails || {};
  const wirelessSummary = data.meraki?.wirelessSummary || {};

  const rssi = wirelessSummary.rssi || wirelessDetails.signalQuality?.rssi || '—';
  const snr = wirelessSummary.snr || wirelessDetails.signalQuality?.snr || '—';
  const avgLatency = wirelessSummary.avgLatencyMs || wirelessDetails.latency?.avgLatencyMs || '—';

  const health = wirelessDetails.healthScores || {};
  const connStats = wirelessDetails.connectionStats || {};
  const failed = wirelessDetails.failedConnections?.length || 0;

  const content = `
    <div class="grid grid-cols-2 gap-x-12 gap-y-6 text-sm mb-8">
      <div><span class="text-gray-400">SSID</span><br><span class="font-medium">${wirelessSummary.ssid || client.ssid || '—'}</span></div>
      <div><span class="text-gray-400">Access Point</span><br><span class="font-medium">${wirelessSummary.apName || '—'}</span></div>
      <div><span class="text-gray-400">RSSI</span><br><span class="font-medium">${rssi} dBm</span></div>
      <div><span class="text-gray-400">SNR</span><br><span class="font-medium">${snr} dB</span></div>
      <div><span class="text-gray-400">Avg Latency</span><br><span class="font-medium">${avgLatency} ms</span></div>
    </div>

    <div class="mb-8">
      <div class="text-xs uppercase tracking-widest text-gray-400 mb-3">Health Scores</div>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-950 rounded-xl p-4">
          <div class="text-emerald-400 text-sm">Performance</div>
          <div class="text-3xl font-semibold">${health.performance?.latest ?? '—'}</div>
        </div>
        <div class="bg-gray-950 rounded-xl p-4">
          <div class="text-emerald-400 text-sm">Onboarding</div>
          <div class="text-3xl font-semibold">${health.onboarding?.latest ?? '—'}</div>
        </div>
      </div>
    </div>

    <div class="mb-8">
      <div class="text-xs uppercase tracking-widest text-gray-400 mb-3">Connection Stats</div>
      <div class="grid grid-cols-5 gap-3 text-center">
        <div class="bg-red-950 border border-red-900/50 rounded-xl p-3">
          <div class="text-red-400 text-xl font-semibold">${connStats.assoc ?? 0}</div>
          <div class="text-xs text-gray-400">Assoc Fail</div>
        </div>
        <div class="bg-red-950 border border-red-900/50 rounded-xl p-3">
          <div class="text-red-400 text-xl font-semibold">${connStats.auth ?? 0}</div>
          <div class="text-xs text-gray-400">Auth Fail</div>
        </div>
        <div class="bg-red-950 border border-red-900/50 rounded-xl p-3">
          <div class="text-red-400 text-xl font-semibold">${connStats.dhcp ?? 0}</div>
          <div class="text-xs text-gray-400">DHCP Fail</div>
        </div>
        <div class="bg-red-950 border border-red-900/50 rounded-xl p-3">
          <div class="text-red-400 text-xl font-semibold">${connStats.dns ?? 0}</div>
          <div class="text-xs text-gray-400">DNS Fail</div>
        </div>
        <div class="bg-emerald-950 border border-emerald-900/50 rounded-xl p-3">
          <div class="text-emerald-400 text-xl font-semibold">${connStats.success ?? 0}</div>
          <div class="text-xs text-gray-400">Success</div>
        </div>
      </div>
    </div>

    <div class="mb-6">
      <div class="text-xs uppercase tracking-widest text-gray-400 mb-2">Failed Connections</div>
      <div class="text-2xl font-semibold ${failed > 0 ? 'text-red-400' : 'text-emerald-400'}">
        ${failed}
      </div>
    </div>
  `;

  return sectionCard('Wireless Details', content);

}

// ====================== SWITCHPORT STATUS ======================
function renderSwitchportStatusSection(portStatus, portConfig) {
  const enabledText = portStatus?.enabled !== false ? 'Enabled' : 'Disabled';
  const enabledColor = enabledText === 'Enabled' ? 'bg-green-600 text-white' : 'bg-red-600 text-white';

  const statusText = portStatus?.status || 'Unknown';
  const isConnected = statusText.toLowerCase() === 'connected' || statusText.toLowerCase() === 'online';
  const statusColor = isConnected ? 'bg-green-600 text-white' : 'bg-red-600 text-white';

  const speedDuplex = `${portStatus?.speed || '—'} / ${portStatus?.duplex || '—'}`;
  const poeAllocated = portStatus?.poe?.isAllocated ? 'Yes' : 'No';

  const usageKB = portStatus?.usageInKb?.total ? portStatus.usageInKb.total.toLocaleString() : '—';
  const trafficKbps = portStatus?.trafficInKbps?.total ? portStatus.trafficInKbps.total.toFixed(1) : '—';

  const content = `
    <div class="section-card relative">
      <div class="flex gap-3 absolute top-6 right-6">
        <div class="px-4 py-1.5 rounded-2xl text-sm font-semibold ${enabledColor}">${enabledText}</div>
        <div class="px-4 py-1.5 rounded-2xl text-sm font-semibold flex items-center gap-2 ${statusColor}">
          <span class="w-3 h-3 rounded-full ${isConnected ? 'bg-green-300 animate-pulse' : 'bg-red-300'}"></span>
          ${statusText}
        </div>
      </div>

      <div class="grid grid-cols-2 gap-x-12 gap-y-6 text-sm mt-2">
        <div><span class="text-gray-400">Port ID</span><br><span class="font-medium">${portStatus?.portId || '—'}</span></div>
        <div><span class="text-gray-400">Is Uplink</span><br>${portStatus?.isUplink ? 'Yes' : 'No'}</div>
        <div><span class="text-gray-400">Speed / Duplex</span><br>${speedDuplex}</div>
        <div><span class="text-gray-400">PoE Allocated</span><br><span class="${poeAllocated === 'Yes' ? 'text-green-400' : ''}">${poeAllocated}</span></div>
        <div><span class="text-gray-400">Errors</span><br><span class="${(portStatus?.errors || 0) > 0 ? 'text-red-400' : ''}">${portStatus?.errors || 0}</span></div>
        <div><span class="text-gray-400">Warnings</span><br>${portStatus?.warnings || 0}</div>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-700 grid grid-cols-3 gap-4 text-center">
        <div class="bg-gray-950 rounded-xl p-4">
          <div class="text-gray-400 text-xs">Usage</div>
          <div class="text-xl font-semibold">${usageKB} KB</div>
        </div>
        <div class="bg-gray-950 rounded-xl p-4">
          <div class="text-gray-400 text-xs">Traffic</div>
          <div class="text-xl font-semibold">${trafficKbps} Kbps</div>
        </div>
        <div class="bg-gray-950 rounded-xl p-4">
          <div class="text-gray-400 text-xs">Power Usage</div>
          <div class="text-xl font-semibold">${portStatus?.powerUsageInWh || '—'} Wh</div>
        </div>
      </div>
    </div>
  `;

  return sectionCard('Switchport Status', content);
}

// ====================== SWITCHPORT CONFIG ======================
function renderSwitchportConfigSection(portConfig) {
  const enabledText = portConfig?.enabled !== false ? 'Enabled' : 'Disabled';
  const enabledColor = enabledText === 'Enabled' ? 'bg-green-600 text-white' : 'bg-red-600 text-white';

  const poeText = portConfig?.poeEnabled ? 'PoE Enabled' : 'PoE Disabled';
  const poeColor = portConfig?.poeEnabled ? 'bg-green-600 text-white' : 'bg-gray-700 text-gray-300';

  const stickyCount = (portConfig?.stickyMacAllowList || []).length;

  const content = `
    <div class="section-card relative">
      <div class="flex gap-3 absolute top-6 right-6">
        <div class="px-4 py-1.5 rounded-2xl text-sm font-semibold ${enabledColor}">${enabledText}</div>
        <div class="px-4 py-1.5 rounded-2xl text-sm font-semibold ${poeColor}">${poeText}</div>
      </div>

      <div class="grid grid-cols-2 gap-x-12 gap-y-6 text-sm mt-2">
        <div><span class="text-gray-400">Port ID</span><br><span class="font-medium">${portConfig?.portId || '—'}</span></div>
        <div><span class="text-gray-400">Name</span><br><span class="font-medium">${portConfig?.name || '—'}</span></div>
        <div><span class="text-gray-400">Type</span><br><span class="font-medium">${portConfig?.type || 'Access'}</span></div>
        <div><span class="text-gray-400">VLAN</span><br><span class="font-medium">${portConfig?.vlan || '—'}</span></div>
        <div><span class="text-gray-400">Voice VLAN</span><br><span class="font-medium">${portConfig?.voiceVlan || 'None'}</span></div>
        <div><span class="text-gray-400">Access Policy</span><br><span class="font-medium">${portConfig?.accessPolicyType || '—'}</span></div>
        <div><span class="text-gray-400">Sticky MAC Limit</span><br><span class="font-medium">${portConfig?.stickyMacAllowListLimit || '—'}</span></div>
        <div><span class="text-gray-400">Sticky MAC List</span><br><span class="font-medium">${stickyCount} entries</span></div>
      </div>
    </div>
  `;

  return sectionCard('Switchport Configuration', content);
}

// ====================== INFRA / SWITCH MODAL (for topology infra nodes like SW02477R) ======================
function renderInfraSwitchModal(identifier, data) {
  const tNode = data.tNode || {};
  const dev = (tNode.device || data.meraki?.device || data || {});
  const serial = dev.serial || identifier || '—';
  const name = dev.name || 'Switch / Access Point';
  const model = dev.model || dev.productType || '—';
  const mStatus = (data.status || dev.status || 'Unknown').toString();
  const isOnline = /online/i.test(mStatus);
  const statusBadge = `
    <span class="inline-flex items-center gap-1.5 px-5 py-1.5 text-sm font-semibold rounded-2xl shadow-md
      ${isOnline ? 'bg-emerald-600 text-white' : (mStatus.toLowerCase().includes('alert') ? 'bg-orange-600 text-white' : 'bg-red-600 text-white')}">
      <span class="relative flex h-2 w-2">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full ${isOnline ? 'bg-emerald-300' : 'bg-red-300'} opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 ${isOnline ? 'bg-emerald-300' : 'bg-red-300'}"></span>
      </span>
      ${mStatus || 'Unknown'}
    </span>`;

  const connected = Array.isArray(data.connectedAVs) ? data.connectedAVs : [];
  let connectedHtml = '';
  if (connected.length) {
    connectedHtml = `
      <div class="mt-8 pt-6 border-t border-gray-700">
        <div class="text-xs uppercase tracking-widest text-gray-400 mb-3">Connected AV Devices (${connected.length})</div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
          ${connected.map(av => {
            const c = av.meraki?.client || av.meraki || {};
            const ip = c.ip || av.ip || '—';
            const ago = c.lastSeen ? (typeof simpleTimeAgo === 'function' ? simpleTimeAgo(new Date(c.lastSeen)) : c.lastSeen) : '—';
            return `
              <div class="bg-gray-950 rounded-xl p-3 border border-gray-800">
                <div class="font-mono text-emerald-300">${av.identifier || 'AV'}</div>
                <div class="text-xs text-gray-400 mt-0.5">${av.source || '—'} • ${ip} • Last seen ${ago}</div>
                ${c.switchport || c.port ? `<div class="text-[11px] text-amber-400 mt-1">Port ${c.switchport || c.port} ${c.vlan ? 'VLAN ' + c.vlan : ''}</div>` : ''}
              </div>`;
          }).join('')}
        </div>
        <div class="text-[10px] text-gray-500 mt-2">Click the green AV leaf nodes in the diagram for their full MDM/RED/Opti/Atlas/Meraki modals.</div>
      </div>`;
  } else {
    connectedHtml = `<div class="mt-4 text-sm text-gray-400">No AV devices currently attached in the enriched data.</div>`;
  }

  const merakiLink = data.deviceUrl
    ? `<a href="${data.deviceUrl}" target="_blank" class="text-emerald-400 hover:text-emerald-300 text-sm font-medium flex items-center gap-1">
         View in Meraki →
       </a>`
    : '';

  const content = `
    <div class="flex justify-between items-start mb-6">
      <div>
        <div class="text-emerald-400 text-sm font-medium">Meraki Infrastructure Device</div>
        <div class="text-xl font-semibold mt-1">${name}</div>
      </div>
      <div class="flex items-center gap-3">
        ${statusBadge}
        ${merakiLink}
      </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-6 text-sm mb-6">
      <div><span class="text-gray-400 block text-xs uppercase tracking-widest">SERIAL</span><span class="font-mono">${serial}</span></div>
      <div><span class="text-gray-400 block text-xs uppercase tracking-widest">MODEL</span><span class="font-medium">${model}</span></div>
      <div><span class="text-gray-400 block text-xs uppercase tracking-widest">TYPE</span><span>${tNode.type || (model && model.toUpperCase().startsWith('MR') ? 'AP' : 'Switch')}</span></div>
      <div><span class="text-gray-400 block text-xs uppercase tracking-widest">LAST REPORTED</span><span>${dev.lastReportedAt ? (typeof simpleTimeAgo === "function" ? simpleTimeAgo(new Date(dev.lastReportedAt)) : dev.lastReportedAt) : (dev.lastSeen ? (typeof simpleTimeAgo === "function" ? simpleTimeAgo(new Date(dev.lastSeen)) : dev.lastSeen) : "—")}</span></div>
    </div>

    ${connectedHtml}

    <div class="pt-6 border-t border-gray-700 text-xs text-gray-500">
      This is a switch/AP-level modal (no AV source data like RED/Opti/Atlas/MDM). Use the diagram AV leaves for player details. Port-level info for attached AVs is shown above when available from Meraki client attachment.
    </div>
  `;

  return sectionCard('', content);
}

export { showDeviceModal };