// Hardware Renderer - Common rendering functions for hardware sections
// Shared between devices.js and device_detail.js to avoid duplication
(function() {
  'use strict';

  // Get utilities from global scope
  const utils = window.BenchUtils;

  // Helper: Clean empty/whitespace values
  const cleanValue = (val) => {
    if (!val || (typeof val === 'string' && val.trim() === '')) return 'N/A';
    return val;
  };

  // Helper: Render no data message
  const noData = (message = 'Aucune information disponible') => {
    return `<p style="color: var(--text-muted); text-align: center; padding: 2rem;">${message}</p>`;
  };

  // =======================
  // MOTHERBOARD SECTION
  // =======================
  function renderMotherboardDetails(snapshot) {
    if (!snapshot) return noData();

    const items = [
      { label: 'Fabricant', value: cleanValue(snapshot.motherboard_vendor || snapshot.system_vendor) },
      { label: 'Modèle', value: cleanValue(snapshot.motherboard_model || snapshot.system_model) },
      { label: 'BIOS fabricant', value: cleanValue(snapshot.bios_vendor) },
      { label: 'Version BIOS', value: cleanValue(snapshot.bios_version) },
      { label: 'Date BIOS', value: cleanValue(snapshot.bios_date) },
      { label: 'Hostname', value: cleanValue(snapshot.hostname) },
      { label: 'Slots RAM', value: (snapshot.ram_slots_used != null || snapshot.ram_slots_total != null) ? `${snapshot.ram_slots_used ?? '?'} / ${snapshot.ram_slots_total ?? '?'}` : 'N/A' },
      { label: 'Famille', value: cleanValue(snapshot.system_family) },
      { label: 'Châssis', value: cleanValue(snapshot.chassis_type) }
    ];

    return `
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem;">
        ${items.map(item => `
          <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color);">
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${item.label}</div>
            <div style="font-weight: 600; color: var(--text-primary);">${utils.escapeHtml(String(item.value))}</div>
          </div>
        `).join('')}
      </div>
    `;
  }

  // =======================
  // CPU SECTION
  // =======================
  function renderCPUDetails(snapshot) {
    if (!snapshot) return noData();

    // Parse multi-CPU from raw_info if available
    const rawInfo = snapshot.raw_info_json ? (typeof snapshot.raw_info_json === 'string' ? JSON.parse(snapshot.raw_info_json) : snapshot.raw_info_json) : null;
    const dmidecode = rawInfo?.dmidecode || '';

    // Check for multi-socket CPUs (Proc 1, Proc 2, etc.)
    const cpuSockets = [];
    const socketRegex = /Handle 0x[0-9A-F]+, DMI type 4[\s\S]*?Socket Designation: (.*?)[\s\S]*?Version: (.*?)[\s\S]*?Core Count: (\d+)[\s\S]*?Thread Count: (\d+)[\s\S]*?(?:Max Speed: (\d+) MHz)?[\s\S]*?(?:Current Speed: (\d+) MHz)?[\s\S]*?(?:Voltage: ([\d.]+ V))?/g;

    let match;
    while ((match = socketRegex.exec(dmidecode)) !== null) {
      cpuSockets.push({
        socket: match[1].trim(),
        model: match[2].trim(),
        cores: match[3],
        threads: match[4],
        maxSpeed: match[5] ? `${match[5]} MHz` : 'N/A',
        currentSpeed: match[6] ? `${match[6]} MHz` : 'N/A',
        voltage: match[7] || 'N/A'
      });
    }

    // Parse CPU signature (Family, Model, Stepping)
    const signatureRegex = /Signature: Type \d+, Family (\d+), Model (\d+), Stepping (\d+)/;
    const sigMatch = dmidecode.match(signatureRegex);
    const cpuSignature = sigMatch ? `Family ${sigMatch[1]}, Model ${sigMatch[2]}, Stepping ${sigMatch[3]}` : 'N/A';

    const items = [
      { label: 'Fabricant', value: snapshot.cpu_vendor || 'N/A', tooltip: snapshot.cpu_model },
      { label: 'Modèle', value: snapshot.cpu_model || 'N/A', tooltip: snapshot.cpu_microarchitecture ? `Architecture: ${snapshot.cpu_microarchitecture}` : null },
      { label: 'Signature CPU', value: cpuSignature },
      { label: 'Socket', value: cpuSockets.length > 0 ? cpuSockets[0].socket : 'N/A' },
      { label: 'Famille', value: snapshot.cpu_vendor || 'N/A' },
      { label: 'Microarchitecture', value: snapshot.cpu_microarchitecture || 'N/A' },
      { label: 'Cores', value: snapshot.cpu_cores != null ? snapshot.cpu_cores : 'N/A', tooltip: snapshot.cpu_threads ? `${snapshot.cpu_threads} threads disponibles` : null },
      { label: 'Threads', value: snapshot.cpu_threads != null ? snapshot.cpu_threads : 'N/A', tooltip: snapshot.cpu_cores ? `${snapshot.cpu_cores} cores physiques` : null },
      { label: 'Fréquence de base', value: snapshot.cpu_base_freq_ghz ? `${snapshot.cpu_base_freq_ghz} GHz` : 'N/A', tooltip: snapshot.cpu_max_freq_ghz ? `Max: ${snapshot.cpu_max_freq_ghz} GHz` : null },
      { label: 'Fréquence maximale', value: snapshot.cpu_max_freq_ghz ? `${snapshot.cpu_max_freq_ghz} GHz` : (cpuSockets.length > 0 && cpuSockets[0].maxSpeed !== 'N/A' ? cpuSockets[0].maxSpeed : 'N/A') },
      { label: 'Fréquence actuelle', value: cpuSockets.length > 0 && cpuSockets[0].currentSpeed !== 'N/A' ? cpuSockets[0].currentSpeed : 'N/A' },
      { label: 'Tension', value: cpuSockets.length > 0 ? cpuSockets[0].voltage : 'N/A' },
      { label: 'TDP', value: snapshot.cpu_tdp_w ? `${snapshot.cpu_tdp_w} W` : 'N/A', tooltip: 'Thermal Design Power - Consommation thermique typique' },
      { label: 'Cache L1', value: snapshot.cpu_cache_l1_kb ? utils.formatCache(snapshot.cpu_cache_l1_kb) : 'N/A', tooltip: 'Cache de niveau 1 - Le plus rapide' },
      { label: 'Cache L2', value: snapshot.cpu_cache_l2_kb ? utils.formatCache(snapshot.cpu_cache_l2_kb) : 'N/A', tooltip: 'Cache de niveau 2 - Intermédiaire' },
      { label: 'Cache L3', value: snapshot.cpu_cache_l3_kb ? utils.formatCache(snapshot.cpu_cache_l3_kb) : 'N/A', tooltip: 'Cache de niveau 3 - Partagé entre les cores' }
    ];

    let html = `
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem;">
        ${items.map(item => `
          <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color);">
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${item.label}</div>
            <div style="font-weight: 600; color: var(--text-primary);" ${item.tooltip ? `title="${utils.escapeHtml(item.tooltip)}"` : ''}>${utils.escapeHtml(String(item.value))}</div>
          </div>
        `).join('')}
      </div>
    `;

    // Multi-CPU grid
    if (cpuSockets.length > 1) {
      html += `
        <div style="margin-top: 1rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 6px; border: 1px solid var(--border-color);">
          <div style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">Configuration multi-CPU (${cpuSockets.length} sockets)</div>
          <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">
              <thead>
                <tr style="background: var(--bg-primary); border-bottom: 2px solid var(--border-color);">
                  <th style="padding: 0.5rem; text-align: left;">Socket</th>
                  <th style="padding: 0.5rem; text-align: left;">Modèle</th>
                  <th style="padding: 0.5rem; text-align: center;">Cores</th>
                  <th style="padding: 0.5rem; text-align: center;">Threads</th>
                  <th style="padding: 0.5rem; text-align: center;">Fréq. Max</th>
                  <th style="padding: 0.5rem; text-align: center;">Fréq. Actuelle</th>
                  <th style="padding: 0.5rem; text-align: center;">Tension</th>
                </tr>
              </thead>
              <tbody>
                ${cpuSockets.map((cpu, idx) => `
                  <tr style="border-bottom: 1px solid var(--border-color); ${idx % 2 === 0 ? 'background: var(--bg-primary);' : ''}">
                    <td style="padding: 0.5rem;">${utils.escapeHtml(cpu.socket)}</td>
                    <td style="padding: 0.5rem;">${utils.escapeHtml(cpu.model)}</td>
                    <td style="padding: 0.5rem; text-align: center;">${cpu.cores}</td>
                    <td style="padding: 0.5rem; text-align: center;">${cpu.threads}</td>
                    <td style="padding: 0.5rem; text-align: center;">${cpu.maxSpeed}</td>
                    <td style="padding: 0.5rem; text-align: center;">${cpu.currentSpeed}</td>
                    <td style="padding: 0.5rem; text-align: center;">${cpu.voltage}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
      `;
    }

    // CPU flags
    if (snapshot.cpu_flags) {
      let flags = snapshot.cpu_flags;
      if (typeof flags === 'string') {
        try {
          flags = JSON.parse(flags);
        } catch (error) {
          flags = flags.split(',').map(flag => flag.trim()).filter(Boolean);
        }
      }
      if (!Array.isArray(flags)) {
        flags = [];
      }
      const limitedFlags = flags.slice(0, 20); // Limit to 20
      html += `
        <div style="margin-top: 1rem;">
          <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">Extensions CPU (${flags.length} total)</div>
          <div style="display: flex; flex-wrap: wrap; gap: 0.35rem;">
            ${limitedFlags.map(flag => `
              <span style="padding: 0.2rem 0.5rem; background: var(--bg-secondary); border-radius: 3px; font-size: 0.75rem; color: var(--text-primary); border: 1px solid var(--border-color);">
                ${utils.escapeHtml(flag)}
              </span>
            `).join('')}
            ${flags.length > 20 ? `<span style="padding: 0.2rem 0.5rem; color: var(--text-secondary); font-size: 0.75rem;">+${flags.length - 20} autres...</span>` : ''}
          </div>
        </div>
      `;
    }

    return html;
  }

  // =======================
  // MEMORY SECTION
  // =======================
  function renderMemoryDetails(snapshot, deviceData) {
    if (!snapshot) return noData();

    // Parse RAM layout
    const ramLayout = snapshot.ram_layout_json ?
      (typeof snapshot.ram_layout_json === 'string' ? JSON.parse(snapshot.ram_layout_json) : snapshot.ram_layout_json) :
      [];

    const slotsUsed = ramLayout.filter(slot => slot.size_mb > 0).length;
    const slotsTotal = snapshot.ram_slots_total || ramLayout.length || 0;

    // ECC detection
    const hasECC = ramLayout.some(slot => slot.type_detail && slot.type_detail.toLowerCase().includes('ecc'));

    // RAM bars data
    const ramTotal = snapshot.ram_total_mb || 0;
    const ramFree = snapshot.ram_free_mb || 0;
    const ramUsed = ramTotal - ramFree;
    const ramShared = snapshot.ram_shared_mb || 0;
    const ramUsedPercent = ramTotal > 0 ? Math.round((ramUsed / ramTotal) * 100) : 0;

    const swapTotal = snapshot.swap_total_mb || 0;
    const swapUsed = snapshot.swap_used_mb || 0;
    const swapPercent = swapTotal > 0 ? Math.round((swapUsed / swapTotal) * 100) : 0;

    const cards = [
      { label: 'Capacité max carte mère', value: snapshot.ram_max_capacity_mb ? `${Math.round(snapshot.ram_max_capacity_mb / 1024)} GB` : 'N/A' },
      { label: 'RAM Totale', value: utils.formatStorage(ramTotal, 'MB') },
      { label: 'RAM Libre', value: utils.formatStorage(ramFree, 'MB') },
      { label: 'RAM Utilisée', value: utils.formatStorage(ramUsed, 'MB') },
      { label: 'RAM Partagée', value: utils.formatStorage(ramShared, 'MB') },
      { label: 'Slots utilisés / total', value: `${slotsUsed} / ${slotsTotal}` },
      { label: 'ECC', value: hasECC ? 'Oui' : 'Non' }
    ];

    let html = `
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1rem;">
        ${cards.map(card => `
          <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color);">
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${card.label}</div>
            <div style="font-weight: 600; color: var(--text-primary);">${card.value}</div>
          </div>
        `).join('')}
      </div>
    `;

    // RAM bar
    html += `
      <div style="margin-bottom: 1rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; font-size: 0.85rem;">
          <span style="font-weight: 600;">RAM (${utils.formatStorage(ramTotal, 'MB')})</span>
          <span>${ramUsedPercent}% utilisée</span>
        </div>
        <div style="width: 100%; height: 24px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-color); position: relative;">
          <div style="position: absolute; top: 0; left: 0; height: 100%; width: ${ramUsedPercent}%; background: linear-gradient(to right, var(--color-warning), var(--color-danger)); transition: width 0.3s;"></div>
        </div>
        <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; display: flex; gap: 1rem;">
          <span>▮ Utilisée: ${utils.formatStorage(ramUsed, 'MB')}</span>
          <span>▯ Disponible: ${utils.formatStorage(ramFree, 'MB')}</span>
        </div>
      </div>
    `;

    // SWAP bar
    if (swapTotal > 0) {
      html += `
        <div style="margin-bottom: 1rem;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; font-size: 0.85rem;">
            <span style="font-weight: 600;">SWAP (${utils.formatStorage(swapTotal, 'MB')})</span>
            <span>${swapPercent}% utilisé</span>
          </div>
          <div style="width: 100%; height: 20px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-color); position: relative;">
            <div style="position: absolute; top: 0; left: 0; height: 100%; width: ${swapPercent}%; background: var(--color-info); transition: width 0.3s;"></div>
          </div>
          <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem;">
            ▮ Utilisé: ${utils.formatStorage(swapUsed, 'MB')} | ▯ Libre: ${utils.formatStorage(swapTotal - swapUsed, 'MB')}
          </div>
        </div>
      `;
    }

    // Memory slots
    if (ramLayout && ramLayout.length > 0) {
      html += `<div class="memory-slots-grid">`;
      ramLayout.forEach((slot, idx) => {
        const slotName = slot.slot || slot.locator || `DIMM${idx}`;
        const sizeMB = slot.size_mb || 0;
        const sizeGB = sizeMB > 0 ? Math.round(sizeMB / 1024) : 0;
        const status = sizeMB > 0 ? 'occupé' : 'libre';
        const type = slot.type || 'N/A';
        const speed = slot.speed_mhz ? `${slot.speed_mhz} MT/s` : 'N/A';
        const typeDetail = slot.type_detail || 'N/A';
        const formFactor = slot.form_factor || 'N/A';
        const voltage = slot.voltage_v ? `${slot.voltage_v} V` : 'N/A';
        const manufacturer = slot.manufacturer || 'N/A';
        const serialNumber = slot.serial_number || 'N/A';
        const partNumber = slot.part_number || 'N/A';

        html += `
          <div class="memory-slot ${sizeMB > 0 ? 'occupied' : 'empty'}" data-slot-index="${idx}">
            <div class="memory-slot-header">
              <span class="memory-slot-name">${utils.escapeHtml(slotName)}</span>
              <span class="memory-slot-size">${sizeGB > 0 ? sizeGB + 'GB' : ''}</span>
              <span class="memory-slot-status">${status}</span>
            </div>
            ${sizeMB > 0 ? `
              <div class="memory-slot-details">
                <div class="memory-slot-main">${utils.escapeHtml(type)} ${utils.escapeHtml(speed)} | ${utils.escapeHtml(typeDetail)}</div>
                <div class="memory-slot-sub">${utils.escapeHtml(formFactor)} | ${utils.escapeHtml(voltage)} | ${utils.escapeHtml(manufacturer)}</div>
                <div class="memory-slot-tiny">SN: ${utils.escapeHtml(serialNumber)}</div>
                <div class="memory-slot-tiny">PN: ${utils.escapeHtml(partNumber)}</div>
              </div>
            ` : ''}
          </div>
        `;
      });
      html += `</div>`;
    }

    return html;
  }

  // =======================
  // STORAGE SECTION
  // =======================
  function renderStorageDetails(snapshot) {
    if (!snapshot) return noData();

    const storageDevices = snapshot.storage_devices_json ?
      (typeof snapshot.storage_devices_json === 'string' ? JSON.parse(snapshot.storage_devices_json) : snapshot.storage_devices_json) :
      [];

    if (!storageDevices || storageDevices.length === 0) {
      return noData('Aucun périphérique de stockage détecté');
    }

    return storageDevices.map(device => {
      const name = device.name || 'N/A';
      const model = device.model || 'N/A';
      const size = device.size_gb ? `${device.size_gb} GB` : 'N/A';
      const type = device.type || 'N/A';
      const smart = device.smart_status || 'N/A';
      const temp = device.temperature_c != null ? `${device.temperature_c}°C` : 'N/A';

      const smartColor = smart.toLowerCase().includes('passed') || smart.toLowerCase().includes('ok') ? 'var(--color-success)' :
                         smart.toLowerCase().includes('fail') ? 'var(--color-danger)' :
                         'var(--text-secondary)';

      return `
        <div style="padding: 1rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color); margin-bottom: 0.75rem;">
          <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
            <div style="font-size: 2rem;">${type.toLowerCase().includes('ssd') ? '💾' : '🗄️'}</div>
            <div style="flex: 1;">
              <div style="font-weight: 600; font-size: 1rem; color: var(--text-primary);">${utils.escapeHtml(name)}</div>
              <div style="font-size: 0.85rem; color: var(--text-secondary);">${utils.escapeHtml(model)}</div>
            </div>
          </div>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem;">
            <div>
              <div style="font-size: 0.75rem; color: var(--text-secondary);">Capacité</div>
              <div style="font-weight: 600; color: var(--text-primary);">${size}</div>
            </div>
            <div>
              <div style="font-size: 0.75rem; color: var(--text-secondary);">Type</div>
              <div style="font-weight: 600; color: var(--text-primary);">${utils.escapeHtml(type)}</div>
            </div>
            <div>
              <div style="font-size: 0.75rem; color: var(--text-secondary);">SMART</div>
              <div style="font-weight: 600; color: ${smartColor};">${utils.escapeHtml(smart)}</div>
            </div>
            <div>
              <div style="font-size: 0.75rem; color: var(--text-secondary);">Température</div>
              <div style="font-weight: 600; color: var(--text-primary);">${temp}</div>
            </div>
          </div>
        </div>
      `;
    }).join('');
  }

  // =======================
  // GPU SECTION
  // =======================
  function renderGPUDetails(snapshot) {
    if (!snapshot) return noData();

    const items = [
      { label: 'Fabricant', value: snapshot.gpu_vendor || 'N/A' },
      { label: 'Modèle', value: snapshot.gpu_model || 'N/A' },
      { label: 'VRAM', value: snapshot.gpu_vram_mb ? `${snapshot.gpu_vram_mb} MB` : 'N/A' },
      { label: 'Driver', value: snapshot.gpu_driver || 'N/A' }
    ];

    return `
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem;">
        ${items.map(item => `
          <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color);">
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${item.label}</div>
            <div style="font-weight: 600; color: var(--text-primary);">${utils.escapeHtml(String(item.value))}</div>
          </div>
        `).join('')}
      </div>
    `;
  }

  // =======================
  // NETWORK SECTION
  // =======================
  function renderNetworkDetails(snapshot) {
    if (!snapshot) return noData();

    const networkInterfaces = snapshot.network_interfaces_json ?
      (typeof snapshot.network_interfaces_json === 'string' ? JSON.parse(snapshot.network_interfaces_json) : snapshot.network_interfaces_json) :
      [];

    if (!networkInterfaces || networkInterfaces.length === 0) {
      return noData('Aucune interface réseau détectée');
    }

    return networkInterfaces.map(iface => {
      const name = iface.name || 'N/A';
      const ipv4 = iface.ipv4 || 'N/A';
      const ipv6 = iface.ipv6 || 'N/A';
      const mac = iface.mac || 'N/A';
      const speed = iface.speed_mbps ? `${iface.speed_mbps} Mbps` : 'N/A';
      const status = iface.status || 'N/A';

      const statusColor = status.toLowerCase().includes('up') ? 'var(--color-success)' :
                          status.toLowerCase().includes('down') ? 'var(--color-danger)' :
                          'var(--text-secondary)';

      return `
        <div style="padding: 1rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color); margin-bottom: 0.75rem;">
          <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
            <div style="font-size: 2rem;">🌐</div>
            <div style="flex: 1;">
              <div style="font-weight: 600; font-size: 1rem; color: var(--text-primary);">${utils.escapeHtml(name)}</div>
              <div style="font-size: 0.85rem; color: var(--text-secondary);">${utils.escapeHtml(mac)}</div>
            </div>
            <div style="font-weight: 600; color: ${statusColor};">${utils.escapeHtml(status)}</div>
          </div>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem;">
            <div>
              <div style="font-size: 0.75rem; color: var(--text-secondary);">IPv4</div>
              <div style="font-weight: 600; color: var(--text-primary); font-family: monospace; font-size: 0.85rem;">${utils.escapeHtml(ipv4)}</div>
            </div>
            <div>
              <div style="font-size: 0.75rem; color: var(--text-secondary);">IPv6</div>
              <div style="font-weight: 600; color: var(--text-primary); font-family: monospace; font-size: 0.75rem; word-break: break-all;">${utils.escapeHtml(ipv6)}</div>
            </div>
            <div>
              <div style="font-size: 0.75rem; color: var(--text-secondary);">Vitesse</div>
              <div style="font-weight: 600; color: var(--text-primary);">${speed}</div>
            </div>
          </div>
        </div>
      `;
    }).join('');
  }

  // =======================
  // OS SECTION
  // =======================
  function renderOSDetails(snapshot) {
    if (!snapshot) return noData();

    const items = [
      { label: 'OS', value: snapshot.os_name || 'N/A' },
      { label: 'Version', value: snapshot.os_version || 'N/A' },
      { label: 'Kernel', value: snapshot.kernel_version || 'N/A' },
      { label: 'Architecture', value: snapshot.architecture || 'N/A' },
      { label: 'Hostname', value: snapshot.hostname || 'N/A' },
      { label: 'Uptime', value: snapshot.uptime_seconds ? utils.formatUptime(snapshot.uptime_seconds) : 'N/A' },
      { label: 'Batterie', value: snapshot.battery_percent != null ? `${snapshot.battery_percent}%` : 'N/A' }
    ];

    return `
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem;">
        ${items.map(item => `
          <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color);">
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${item.label}</div>
            <div style="font-weight: 600; color: var(--text-primary);">${utils.escapeHtml(String(item.value))}</div>
          </div>
        `).join('')}
      </div>
    `;
  }

  // =======================
  // PROXMOX SECTION
  // =======================
  function renderProxmoxDetails(snapshot) {
    if (!snapshot) return noData();

    const isProxmoxHost = snapshot.is_proxmox_host;
    const isProxmoxGuest = snapshot.is_proxmox_guest;
    const proxmoxVersion = snapshot.proxmox_version;

    if (!isProxmoxHost && !isProxmoxGuest) {
      return noData('Non détecté comme hôte ou invité Proxmox');
    }

    const items = [
      { label: 'Type', value: isProxmoxHost ? 'Hôte Proxmox' : 'Invité Proxmox' },
      { label: 'Version', value: proxmoxVersion || 'N/A' }
    ];

    return `
      <div style="padding: 1rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--color-info);">
        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
          <div style="font-size: 2rem;">🔧</div>
          <div style="font-weight: 600; font-size: 1.1rem; color: var(--color-info);">Proxmox VE détecté</div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem;">
          ${items.map(item => `
            <div style="padding: 0.75rem; background: var(--bg-secondary); border-radius: 6px; border: 1px solid var(--border-color);">
              <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${item.label}</div>
              <div style="font-weight: 600; color: var(--text-primary);">${utils.escapeHtml(String(item.value))}</div>
            </div>
          `).join('')}
        </div>
      </div>
    `;
  }

  // =======================
  // AUDIO SECTION
  // =======================
  function renderAudioDetails(snapshot) {
    if (!snapshot) return noData();

    const audioHardware = snapshot.audio_hardware_json ?
      (typeof snapshot.audio_hardware_json === 'string' ? JSON.parse(snapshot.audio_hardware_json) : snapshot.audio_hardware_json) :
      null;

    const audioSoftware = snapshot.audio_software_json ?
      (typeof snapshot.audio_software_json === 'string' ? JSON.parse(snapshot.audio_software_json) : snapshot.audio_software_json) :
      null;

    if (!audioHardware && !audioSoftware) {
      return noData('Aucune information audio disponible');
    }

    let html = '';

    // Hardware section
    if (audioHardware && Array.isArray(audioHardware) && audioHardware.length > 0) {
      html += `
        <div style="margin-bottom: 1rem;">
          <div style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">🔊 Matériel Audio</div>
          ${audioHardware.map(device => `
            <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color); margin-bottom: 0.5rem;">
              <div style="font-weight: 600; color: var(--text-primary);">${utils.escapeHtml(device.name || 'N/A')}</div>
              <div style="font-size: 0.85rem; color: var(--text-secondary);">${utils.escapeHtml(device.driver || 'N/A')}</div>
            </div>
          `).join('')}
        </div>
      `;
    }

    // Software section
    if (audioSoftware) {
      html += `
        <div>
          <div style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">🎵 Logiciels Audio</div>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem;">
            ${Object.entries(audioSoftware).map(([key, value]) => `
              <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; border: 1px solid var(--border-color);">
                <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${utils.escapeHtml(key)}</div>
                <div style="font-weight: 600; color: var(--text-primary);">${utils.escapeHtml(String(value))}</div>
              </div>
            `).join('')}
          </div>
        </div>
      `;
    }

    return html;
  }

  // =======================
  // EXPORT PUBLIC API
  // =======================
  window.HardwareRenderer = {
    renderMotherboardDetails,
    renderCPUDetails,
    renderMemoryDetails,
    renderStorageDetails,
    renderGPUDetails,
    renderNetworkDetails,
    renderOSDetails,
    renderProxmoxDetails,
    renderAudioDetails
  };

})();