// Linux BenchTools - Devices Two-Panel Layout
(function() {
  'use strict';

// Use utilities from global scope directly - avoid redeclaration
const utils = window.BenchUtils;
const apiClient = window.BenchAPI;

let allDevices = [];
let selectedDeviceId = null;
let isEditing = false;
let currentDevice = null;

// Load devices
async function loadDevices() {
  const listContainer = document.getElementById('deviceList');

  try {
    console.log('🔄 Loading devices from API...');
    console.log('API URL:', apiClient.baseURL);

    const data = await apiClient.getDevices({ page_size: 100 }); // Get all devices (max allowed)

    console.log('✅ Devices loaded:', data);

    allDevices = data.items || [];

    if (allDevices.length === 0) {
      listContainer.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--text-secondary);">📊<br>Aucun device</div>';
      return;
    }

    // Sort by global_score descending
    allDevices.sort((a, b) => {
      const scoreA = a.last_benchmark?.global_score ?? -1;
      const scoreB = b.last_benchmark?.global_score ?? -1;
      return scoreB - scoreA;
    });

    console.log('📋 Rendering', allDevices.length, 'devices');
    renderDeviceList();

    // Auto-select first device if none selected
    if (!selectedDeviceId && allDevices.length > 0) {
      selectDevice(allDevices[0].id);
    }

  } catch (error) {
    console.error('❌ Failed to load devices:', error);
    console.error('Error details:', error.message);
    listContainer.innerHTML = `
      <div style="padding: 1rem; color: var(--color-danger); font-size: 0.85rem;">
        <div style="font-weight: 600; margin-bottom: 0.5rem;">❌ Erreur</div>
        <div>${error.message || 'Erreur de chargement'}</div>
        <div style="margin-top: 0.5rem; font-size: 0.75rem;">
          Backend: ${apiClient.baseURL}
        </div>
      </div>
    `;
  }
}

// Render device list (left panel)
function renderDeviceList() {
  const listContainer = document.getElementById('deviceList');

  listContainer.innerHTML = allDevices.map(device => {
    const globalScore = device.last_benchmark?.global_score;
    const isSelected = device.id === selectedDeviceId;

    const scoreText = globalScore !== null && globalScore !== undefined
      ? Math.round(globalScore)
      : 'N/A';

    const scoreClass = globalScore !== null && globalScore !== undefined
      ? utils.getScoreBadgeClass(globalScore)
      : 'badge';

    return `
      <div
        class="device-list-item ${isSelected ? 'selected' : ''}"
        onclick="selectDevice(${device.id})"
        style="
          padding: 0.75rem;
          margin-bottom: 0.5rem;
          background: ${isSelected ? 'var(--color-primary-alpha)' : 'var(--bg-secondary)'};
          border: 1px solid ${isSelected ? 'var(--color-primary)' : 'var(--border-color)'};
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s;
        "
        onmouseover="if (!this.classList.contains('selected')) this.style.background='var(--bg-hover)'"
        onmouseout="if (!this.classList.contains('selected')) this.style.background='var(--bg-secondary)'"
      >
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
          <div style="font-weight: 600; font-size: 0.95rem; color: var(--text-primary);">
            ${utils.escapeHtml(device.hostname)}
          </div>
          <span class="${scoreClass}" style="font-size: 0.75rem; padding: 0.2rem 0.5rem;">
            ${scoreText}
          </span>
        </div>
        ${device.last_benchmark?.run_at ? `
          <div style="font-size: 0.75rem; color: var(--text-secondary);">
            ⏱️ ${utils.formatRelativeTime(device.last_benchmark.run_at)}
          </div>
        ` : '<div style="font-size: 0.75rem; color: var(--color-warning);">⚠️ Pas de benchmark</div>'}
      </div>
    `;
  }).join('');
}

// Select device and display details
async function selectDevice(deviceId) {
  selectedDeviceId = deviceId;
  renderDeviceList(); // Update selection in list

  const detailsContainer = document.getElementById('deviceDetailsContainer');
  detailsContainer.innerHTML = '<div class="loading">Chargement des détails...</div>';

  try {
    const device = await apiClient.getDevice(deviceId);
    renderDeviceDetails(device);
  } catch (error) {
    console.error('Failed to load device details:', error);
    utils.showError(detailsContainer, 'Impossible de charger les détails du device.');
  }
}

// Toggle edit mode
function toggleEditMode() {
  isEditing = !isEditing;
  if (currentDevice) {
    renderDeviceDetails(currentDevice);
  }
}

// Save device changes
async function saveDevice() {
  if (!currentDevice) return;

  const description = document.getElementById('edit-description')?.value || '';
  const location = document.getElementById('edit-location')?.value || '';
  const owner = document.getElementById('edit-owner')?.value || '';
  const assetTag = document.getElementById('edit-asset-tag')?.value || '';
  const tags = document.getElementById('edit-tags')?.value || '';

  try {
    console.log('💾 Saving device changes...');

    const updateData = {
      description: description || null,
      location: location || null,
      owner: owner || null,
      asset_tag: assetTag || null,
      tags: tags || null
    };

    await apiClient.updateDevice(currentDevice.id, updateData);

    console.log('✅ Device updated successfully');

    // Reload device data
    isEditing = false;
    const updatedDevice = await apiClient.getDevice(currentDevice.id);
    currentDevice = updatedDevice;
    renderDeviceDetails(updatedDevice);

    // Reload device list to reflect changes
    await loadDevices();

  } catch (error) {
    console.error('❌ Failed to save device:', error);
    alert('Erreur lors de la sauvegarde: ' + (error.message || 'Erreur inconnue'));
  }
}

// Upload image for device
async function uploadImage() {
  if (!currentDevice) return;

  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';

  input.onchange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // Check file size (max 10MB)
    if (file.size > 10 * 1024 * 1024) {
      alert('L\'image est trop volumineuse (max 10MB)');
      return;
    }

    try {
      console.log('📤 Uploading image:', file.name);

      await apiClient.uploadDocument(currentDevice.id, file, 'image');

      console.log('✅ Image uploaded successfully');

      // Reload device data to show the new image
      const updatedDevice = await apiClient.getDevice(currentDevice.id);
      currentDevice = updatedDevice;
      renderDeviceDetails(updatedDevice);

    } catch (error) {
      console.error('❌ Failed to upload image:', error);
      alert('Erreur lors du chargement de l\'image: ' + (error.message || 'Erreur inconnue'));
    }
  };

  input.click();
}

// Upload PDF for device
async function uploadPDF() {
  if (!currentDevice) return;

  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'application/pdf';

  input.onchange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // Check file size (max 50MB)
    if (file.size > 50 * 1024 * 1024) {
      alert('Le PDF est trop volumineux (max 50MB)');
      return;
    }

    try {
      console.log('📤 Uploading PDF:', file.name);

      await apiClient.uploadDocument(currentDevice.id, file, 'manual');

      console.log('✅ PDF uploaded successfully');

      // Reload device data to show the new PDF
      const updatedDevice = await apiClient.getDevice(currentDevice.id);
      currentDevice = updatedDevice;
      renderDeviceDetails(updatedDevice);

    } catch (error) {
      console.error('❌ Failed to upload PDF:', error);
      alert('Erreur lors du chargement du PDF: ' + (error.message || 'Erreur inconnue'));
    }
  };

  input.click();
}

// Delete document
async function deleteDocument(docId) {
  if (!currentDevice) return;

  if (!confirm('Voulez-vous vraiment supprimer ce document ?')) {
    return;
  }

  try {
    console.log('🗑️ Deleting document:', docId);

    await apiClient.deleteDocument(docId);

    console.log('✅ Document deleted successfully');

    // Reload device data
    const updatedDevice = await apiClient.getDevice(currentDevice.id);
    currentDevice = updatedDevice;
    renderDeviceDetails(updatedDevice);

  } catch (error) {
    console.error('❌ Failed to delete document:', error);
    alert('Erreur lors de la suppression: ' + (error.message || 'Erreur inconnue'));
  }
}

// Helper: Render image documents
function renderImageDocuments(documents) {
  if (!documents || !Array.isArray(documents)) {
    return '<span>🖼️ Aucune image</span>';
  }

  const imageDoc = documents.find(doc => doc.doc_type === 'image');

  if (!imageDoc) {
    return '<span>🖼️ Aucune image</span>';
  }

  const downloadUrl = apiClient.getDocumentDownloadUrl(imageDoc.id);

  return `
    <div style="width: 100%; position: relative;">
      <img src="${downloadUrl}" alt="Device image" style="max-width: 100%; max-height: 300px; border-radius: 6px; object-fit: contain;">
      <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
        <div style="font-size: 0.85rem; color: var(--text-secondary);">
          📎 ${utils.escapeHtml(imageDoc.filename)}
        </div>
        <button onclick="deleteDocument(${imageDoc.id})" class="btn btn-danger" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">🗑️ Supprimer</button>
      </div>
    </div>
  `;
}

// Helper: Render PDF documents
function renderPDFDocuments(documents) {
  if (!documents || !Array.isArray(documents)) {
    return '<span>📄 Aucun PDF</span>';
  }

  const pdfDocs = documents.filter(doc => doc.doc_type === 'manual');

  if (pdfDocs.length === 0) {
    return '<span>📄 Aucun PDF</span>';
  }

  return pdfDocs.map(doc => {
    const downloadUrl = apiClient.getDocumentDownloadUrl(doc.id);
    const uploadDate = new Date(doc.uploaded_at).toLocaleDateString('fr-FR');

    return `
      <div style="width: 100%; background: var(--bg-secondary); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border: 1px solid var(--border-color);">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div style="flex: 1;">
            <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem;">
              📄 ${utils.escapeHtml(doc.filename)}
            </div>
            <div style="font-size: 0.8rem; color: var(--text-secondary);">
              Uploadé le ${uploadDate}
            </div>
          </div>
          <div style="display: flex; gap: 0.5rem;">
            <a href="${downloadUrl}" download class="btn btn-primary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem; text-decoration: none;">⬇️ Télécharger</a>
            <button onclick="deleteDocument(${doc.id})" class="btn btn-danger" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">🗑️ Supprimer</button>
          </div>
        </div>
      </div>
    `;
  }).join('');
}

// Render device details (right panel)
function renderDeviceDetails(device) {
  currentDevice = device;
  const detailsContainer = document.getElementById('deviceDetailsContainer');
  const snapshot = device.last_hardware_snapshot;
  const bench = device.last_benchmark;

  // Hardware summary
  const cpuModel = snapshot?.cpu_model || 'N/A';
  const cpuCores = snapshot?.cpu_cores || '?';
  const cpuThreads = snapshot?.cpu_threads || '?';
  const ramTotalGB = Math.round((snapshot?.ram_total_mb || 0) / 1024);
  const ramUsedMB = snapshot?.ram_used_mb || 0;
  const ramFreeMB = snapshot?.ram_free_mb || 0;
  const ramSharedMB = snapshot?.ram_shared_mb || 0;
  const gpuSummary = snapshot?.gpu_summary || 'N/A';
  const storage = snapshot?.storage_summary || 'N/A';
  const osName = snapshot?.os_name || 'N/A';
  const kernelVersion = snapshot?.kernel_version || 'N/A';

  // RAM usage calculation
  let ramUsageHtml = `${ramTotalGB} GB`;
  if (ramUsedMB > 0 || ramFreeMB > 0) {
    const usagePercent = ramTotalGB > 0 ? Math.round((ramUsedMB / (snapshot.ram_total_mb || 1)) * 100) : 0;
    ramUsageHtml = `
      ${ramTotalGB} GB (${usagePercent}% utilisé)<br>
      <small style="color: var(--text-secondary);">
        Utilisée: ${Math.round(ramUsedMB / 1024)}GB •
        Libre: ${Math.round(ramFreeMB / 1024)}GB${ramSharedMB > 0 ? ` • Partagée: ${Math.round(ramSharedMB / 1024)}GB` : ''}
      </small>
    `;
  }

  // Benchmark scores
  const globalScore = bench?.global_score;
  const cpuScore = bench?.cpu_score;
  const memScore = bench?.memory_score;
  const diskScore = bench?.disk_score;
  const netScore = bench?.network_score;
  const gpuScore = bench?.gpu_score;

  const globalScoreHtml = globalScore !== null && globalScore !== undefined
    ? `<span class="${utils.getScoreBadgeClass(globalScore)}" style="font-size: 1.5rem; padding: 0.5rem 1rem;">${utils.getScoreBadgeText(globalScore)}</span>`
    : '<span class="badge">N/A</span>';

  // Network details
  let networkHtml = '';
  if (snapshot?.network_interfaces_json) {
    try {
      const interfaces = JSON.parse(snapshot.network_interfaces_json);
      networkHtml = interfaces.map(iface => {
        const typeIcon = iface.type === 'ethernet' ? '🔌' : '📡';
        const wolBadge = iface.wake_on_lan === true
          ? '<span class="badge badge-success" style="margin-left: 0.5rem;">WoL ✓</span>'
          : '<span class="badge badge-muted" style="margin-left: 0.5rem;">WoL ✗</span>';

        return `
          <div style="padding: 0.75rem; background: var(--bg-secondary); border-radius: 6px; margin-bottom: 0.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;">
              ${typeIcon} ${utils.escapeHtml(iface.name)} (${iface.type})${wolBadge}
            </div>
            <div style="font-size: 0.9rem; color: var(--text-secondary);">
              IP: ${iface.ip || 'N/A'} • MAC: ${iface.mac || 'N/A'}<br>
              Vitesse: ${iface.speed_mbps ? iface.speed_mbps + ' Mbps' : 'N/A'}
              ${iface.driver ? ` • Driver: ${iface.driver}` : ''}
            </div>
          </div>
        `;
      }).join('');
    } catch (e) {
      networkHtml = '<p style="color: var(--text-secondary);">Erreur de parsing JSON</p>';
    }
  }

  // Network benchmark results (iperf3)
  let netBenchHtml = '';
  if (bench?.network_results_json) {
    try {
      const netResults = JSON.parse(bench.network_results_json);
      netBenchHtml = `
        <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 6px; margin-top: 1rem;">
          <div style="font-weight: 600; margin-bottom: 0.75rem;">📈 Résultats Benchmark Réseau (iperf3)</div>
          <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center;">
            <div>
              <div style="color: var(--color-success); font-size: 1.5rem; font-weight: 600;">
                ↑ ${netResults.upload_mbps?.toFixed(2) || 'N/A'}
              </div>
              <div style="font-size: 0.85rem; color: var(--text-secondary);">Upload Mbps</div>
            </div>
            <div>
              <div style="color: var(--color-info); font-size: 1.5rem; font-weight: 600;">
                ↓ ${netResults.download_mbps?.toFixed(2) || 'N/A'}
              </div>
              <div style="font-size: 0.85rem; color: var(--text-secondary);">Download Mbps</div>
            </div>
            <div>
              <div style="color: var(--color-warning); font-size: 1.5rem; font-weight: 600;">
                ${netResults.ping_ms?.toFixed(2) || 'N/A'}
              </div>
              <div style="font-size: 0.85rem; color: var(--text-secondary);">Ping ms</div>
            </div>
            <div>
              <div style="color: var(--color-primary); font-size: 1.5rem; font-weight: 600;">
                ${netResults.score?.toFixed(2) || 'N/A'}
              </div>
              <div style="font-size: 0.85rem; color: var(--text-secondary);">Score</div>
            </div>
          </div>
        </div>
      `;
    } catch (e) {
      console.error('Error parsing network results:', e);
    }
  }

  detailsContainer.innerHTML = `
    <!-- Device Header with Action Buttons -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-primary);">
      <div style="flex: 1;">
        <h2 style="margin: 0; font-size: 1.5rem; color: var(--text-primary);">${utils.escapeHtml(device.hostname)}</h2>
        ${isEditing ? `
          <textarea id="edit-description" style="width: 100%; margin-top: 0.5rem; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); font-family: inherit; resize: vertical;" rows="2" placeholder="Description du device...">${device.description || ''}</textarea>
        ` : `
          <p style="color: var(--text-secondary); margin: 0.25rem 0 0 0; font-size: 0.9rem;">
            ${utils.escapeHtml(device.description || 'Aucune description')}
          </p>
        `}
      </div>
      <div style="display: flex; gap: 0.75rem; align-items: center; margin-left: 1rem;">
        ${globalScoreHtml}
        ${!isEditing ? `
          <button id="btn-edit" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.9rem;">✏️ Edit</button>
        ` : `
          <button id="btn-cancel" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.9rem;">✖️ Annuler</button>
          <button id="btn-save" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.9rem;">💾 Save</button>
        `}
      </div>
    </div>

    <!-- Form-Style Layout -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">

      <!-- Left Column: Caractéristiques -->
      <div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
        <h3 style="margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--color-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Caractéristiques</h3>

        ${createFormRow('CPU', utils.escapeHtml(cpuModel))}
        ${createFormRow('Cores / Threads', `${cpuCores} / ${cpuThreads}`)}
        ${createFormRow('RAM Total', `${ramTotalGB} GB`)}
        ${createFormRow('RAM Utilisée', ramUsedMB > 0 ? `${Math.round(ramUsedMB / 1024)} GB (${Math.round((ramUsedMB / (snapshot.ram_total_mb || 1)) * 100)}%)` : 'N/A')}
        ${createFormRow('RAM Libre', ramFreeMB > 0 ? `${Math.round(ramFreeMB / 1024)} GB` : 'N/A')}
        ${ramSharedMB > 0 ? createFormRow('RAM Partagée', `${Math.round(ramSharedMB / 1024)} GB`) : ''}
        ${createFormRow('GPU', utils.escapeHtml(gpuSummary))}
        ${createFormRow('Storage', utils.escapeHtml(storage))}
        ${createFormRow('OS', utils.escapeHtml(osName))}
        ${createFormRow('Kernel', utils.escapeHtml(kernelVersion))}
        ${isEditing ? `
          <div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
            <div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Location</div>
            <input type="text" id="edit-location" value="${device.location || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="Bureau, DataCenter, etc.">
          </div>
          <div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
            <div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Propriétaire</div>
            <input type="text" id="edit-owner" value="${device.owner || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="Nom du propriétaire">
          </div>
          <div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
            <div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Asset Tag</div>
            <input type="text" id="edit-asset-tag" value="${device.asset_tag || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="Numéro d'inventaire">
          </div>
          <div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
            <div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Tags</div>
            <input type="text" id="edit-tags" value="${device.tags || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="production, test, dev (séparés par des virgules)">
          </div>
        ` : `
          ${device.location ? createFormRow('Location', utils.escapeHtml(device.location)) : ''}
          ${device.owner ? createFormRow('Propriétaire', utils.escapeHtml(device.owner)) : ''}
          ${device.asset_tag ? createFormRow('Asset Tag', utils.escapeHtml(device.asset_tag)) : ''}
          ${device.tags ? createFormRow('Tags', utils.escapeHtml(device.tags)) : ''}
        `}
        ${createFormRow('Créé le', new Date(device.created_at).toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' }))}
      </div>

      <!-- Right Column: Image & PDF Sections -->
      <div style="display: flex; flex-direction: column; gap: 1.5rem;">

        <!-- Image Section -->
        <div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="margin: 0; font-size: 1.1rem; color: var(--color-primary);">Image</h3>
            <button id="btn-upload-image" class="btn btn-secondary" style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">📤 Upload</button>
          </div>
          <div id="image-container" style="background: var(--bg-primary); border: 2px dashed var(--border-color); border-radius: 6px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); padding: 1rem;">
            ${renderImageDocuments(device.documents)}
          </div>
        </div>

        <!-- PDF Section -->
        <div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="margin: 0; font-size: 1.1rem; color: var(--color-primary);">Notice PDF</h3>
            <button id="btn-upload-pdf" class="btn btn-secondary" style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">📤 Upload</button>
          </div>
          <div id="pdf-container" style="background: var(--bg-primary); border: 2px dashed var(--border-color); border-radius: 6px; min-height: 180px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--text-secondary); padding: 1rem;">
            ${renderPDFDocuments(device.documents)}
          </div>
        </div>
      </div>
    </div>

    <!-- Benchmark Scores Section -->
    ${bench ? `
    <div style="margin-top: 1.5rem; background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
      <h3 style="margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--color-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">📊 Benchmark Scores</h3>
      <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1rem;">
        ${createFormRow('CPU Score', cpuScore !== null && cpuScore !== undefined ? Math.round(cpuScore) : 'N/A', true)}
        ${createFormRow('RAM Score', memScore !== null && memScore !== undefined ? Math.round(memScore) : 'N/A', true)}
        ${createFormRow('Disk Score', diskScore !== null && diskScore !== undefined ? Math.round(diskScore) : 'N/A', true)}
        ${createFormRow('Network Score', netScore !== null && netScore !== undefined ? Math.round(netScore) : 'N/A', true)}
        ${createFormRow('GPU Score', gpuScore !== null && gpuScore !== undefined ? Math.round(gpuScore) : 'N/A', true)}
      </div>
      <div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; text-align: center; color: var(--text-secondary); font-size: 0.9rem;">
        ⏱️ Dernier benchmark: ${bench.run_at ? utils.formatRelativeTime(bench.run_at) : 'N/A'}
      </div>
    </div>
    ` : ''}

    <!-- Network Details Section -->
    ${networkHtml || netBenchHtml ? `
    <div style="margin-top: 1.5rem; background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
      <h3 style="margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--color-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">🌐 Détails Réseau</h3>
      ${networkHtml}
      ${netBenchHtml}
    </div>
    ` : ''}

    <!-- Full Details Link -->
    <div style="margin-top: 1.5rem; text-align: center;">
      <a href="device_detail.html?id=${device.id}" class="btn btn-primary" style="text-decoration: none; display: inline-block; padding: 0.75rem 2rem;">
        📄 Voir la page complète avec tous les détails
      </a>
    </div>
  `;

  // Attach event listeners for edit/save/upload buttons
  setTimeout(() => {
    const btnEdit = document.getElementById('btn-edit');
    const btnSave = document.getElementById('btn-save');
    const btnCancel = document.getElementById('btn-cancel');
    const btnUploadImage = document.getElementById('btn-upload-image');
    const btnUploadPDF = document.getElementById('btn-upload-pdf');

    if (btnEdit) {
      btnEdit.addEventListener('click', toggleEditMode);
    }

    if (btnSave) {
      btnSave.addEventListener('click', saveDevice);
    }

    if (btnCancel) {
      btnCancel.addEventListener('click', () => {
        isEditing = false;
        renderDeviceDetails(currentDevice);
      });
    }

    if (btnUploadImage) {
      btnUploadImage.addEventListener('click', uploadImage);
    }

    if (btnUploadPDF) {
      btnUploadPDF.addEventListener('click', uploadPDF);
    }
  }, 0);
}

// Create score card for display
function createScoreCard(score, label, icon) {
  const scoreValue = score !== null && score !== undefined ? Math.round(score) : 'N/A';
  const badgeClass = score !== null && score !== undefined
    ? utils.getScoreBadgeClass(score)
    : 'badge';

  return `
    <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 6px; text-align: center;">
      <div style="font-size: 1.5rem; margin-bottom: 0.25rem;">${icon}</div>
      <div style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.5rem;">${label}</div>
      <div class="${badgeClass}" style="font-size: 1.25rem; padding: 0.25rem 0.75rem; display: inline-block;">
        ${scoreValue}
      </div>
    </div>
  `;
}

// Create info card
function createInfoCard(label, value) {
  return `
    <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 6px;">
      <div style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">${label}</div>
      <div style="color: var(--text-secondary);">${value}</div>
    </div>
  `;
}

// Create form row (label: value)
function createFormRow(label, value, inline = false) {
  if (inline) {
    return `
      <div style="text-align: center;">
        <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${label}</div>
        <div style="font-weight: 600; color: var(--text-primary); font-size: 1.1rem;">${value}</div>
      </div>
    `;
  }

  return `
    <div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
      <div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">${label}</div>
      <div style="color: var(--text-primary); font-size: 0.9rem;">${value}</div>
    </div>
  `;
}

// Initialize devices page
document.addEventListener('DOMContentLoaded', () => {
  loadDevices();

  // Refresh every 30 seconds
  setInterval(loadDevices, 30000);
});

// Make functions available globally for onclick handlers
window.selectDevice = selectDevice;
window.deleteDocument = deleteDocument;

})(); // End of IIFE