.. judul: LACP Hash & Load Distribution Analyzer
.. siput: distribusi-lacp-hash
.. tanggal: 27-02-2026 00:00:00 UTC
.. tag: jaringan, laCP, lag, bonding, load-balancing, alat
..kategori:
..tautan:
.. deskripsi: LACP Hash & Load Distribution Analyzer - menyimulasikan distribusi hash XOR di seluruh tautan anggota LAG, mendeteksi polarisasi, menetapkan penetapan aliran model
.. ketik: teks
<style>
  /* === Base design system === */
  .calc-container { max-width:1000px; margin:20px auto; padding:20px; }
  .calc-header {
    margin-bottom:30px; padding:25px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); color:white;
  }
  .calc-header h2 { margin-top:0; color:white; font-size:28px; margin-bottom:10px; }
  .calc-header p  { margin:10px 0; opacity:.95; font-size:15px; }
  .input-group {
    display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:20px;
  }
  .input-field { display:flex; flex-direction:column; }
  .input-field label { margin-bottom:8px; font-weight:bold; color:white; font-size:14px; }
  .input-field input,
  .input-field select,
  .input-field textarea {
    padding:14px; font-size:14px;
    border:2px solid rgba(255,255,255,0.3); border-radius:6px;
    background:rgba(255,255,255,0.95); transition:all 0.3s ease;
    box-sizing:border-box;
  }
  .input-field input:focus,
  .input-field select:focus,
  .input-field textarea:focus {
    outline:none; border-color:#4CAF50; box-shadow:0 0 0 3px rgba(76,175,80,0.1);
  }
  .button-group { margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
  .submit-btn {
    padding:14px 35px; font-size:16px; background:#4CAF50; color:white; border:none;
    border-radius:6px; cursor:pointer; font-weight:bold; transition:all 0.3s ease;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
  }
  .submit-btn:hover  { background:#45a049; transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,0.3); }
  .submit-btn:active { background:#3d8b40; transform:translateY(0); }
  .result-section {
    background:white; border:1px solid #e0e0e0; border-radius:8px; margin-bottom:15px;
    overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,0.05); transition:all 0.3s ease;
  }
  .result-section:hover { box-shadow:0 4px 8px rgba(0,0,0,0.1); }
  .section-header {
    background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%); color:white;
    padding:15px 20px; font-size:18px; font-weight:bold;
  }
  .section-content { padding:20px; background:#fafafa; }
  .data-row {
    display:flex; margin:12px 0; padding:10px; background:white; border-radius:4px;
    border-left:3px solid #4CAF50;
  }
  .data-label  { font-weight:bold; color:#555; min-width:200px; flex-shrink:0; }
  .data-value  { color:#333; font-family:'Courier New',monospace; word-break:break-word; }
  .data-value.highlight { color:#4CAF50; font-weight:bold; font-size:18px; }
  .help-text {
    margin-top:15px; font-size:14px; color:rgba(255,255,255,0.9);
    background:rgba(0,0,0,0.1); padding:10px 15px; border-radius:4px;
  }
  .help-text strong { color:white; }

  /* === LACP tool-specific === */
  .mode-panel {
    padding:15px; background:rgba(0,0,0,0.08); border-radius:8px; margin-top:15px;
  }
  .mode-panel-title {
    color:rgba(255,255,255,0.85); font-size:12px; font-weight:bold;
    text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;
  }
  .flow-table-wrapper {
    overflow-x:auto; border:1px solid rgba(255,255,255,0.3);
    border-radius:6px; margin-top:15px;
  }
  .flow-table { width:100%; border-collapse:collapse; min-width:820px; }
  .flow-table th {
    padding:8px 6px; background:rgba(0,0,0,0.2); color:white; font-size:12px;
    font-weight:bold; text-align:left; white-space:nowrap;
  }
  .flow-table td { padding:4px 3px; }
  .flow-table tbody tr:nth-child(even) { background:rgba(255,255,255,0.05); }
  .mode-radio { display:flex; gap:20px; margin-bottom:12px; }
  .mode-radio label {
    display:flex; align-items:center; gap:8px; color:white;
    font-size:14px; cursor:pointer;
  }
  .mode-radio input[type="radio"] { width:16px; height:16px; cursor:pointer; }

  .flow-input {
    width:100%; padding:5px; font-size:12px;
    border:1px solid #ccc; border-radius:3px; box-sizing:border-box;
    background:rgba(255,255,255,0.95);
  }
  .flow-input:focus { outline:none; border-color:#4CAF50; }

  /* Legend badges */
  .legend-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:4px; font-size:12px; color:#555;
  }
  .legend-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }

  @media (max-width: 768px) {
    .input-group    { grid-template-columns:1fr; }
    .data-row       { flex-direction:column; }
    .data-label     { margin-bottom:5px; min-width:auto; }
    .flow-table-wrapper { font-size:11px; }
    .calc-header h2 { font-size:22px; }
  }
  @media (max-width: 480px) {
    .calc-header h2 { font-size:18px; }
    .submit-btn     { padding:12px 20px; font-size:14px; }
  }
</style>
<div class="calc-container">
========== PANEL MASUKAN
<div class="calc-header">
<h2>Penganalisis Distribusi Hash &amp; Beban LACP</h2>
<p>Simulasikan distribusi hash XOR di seluruh tautan anggota LAG / EtherChannel / Bond. Deteksi polarisasi aliran dan buat model penetapan lalu lintas per tautan.</p>
Modus radio
<div class="mode-radio">
<label>
<input checked="" name="input-mode" onchange="toggleInputMode('manual')" type="radio" value="manual"/>Konfigurasi Manual</label>
<label>
<input name="input-mode" onchange="toggleInputMode('cli')" type="radio" value="cli"/>CLI Paste (deteksi otomatis)</label>
</div>
Panel CLI (disembunyikan secara default)
<div class="mode-panel" id="cli-panel" style="display:none;">
<div class="mode-panel-title">Keluaran CLI</div>
<div class="input-group">
<div class="input-field">
<label for="cli-vendor">Penjual</label>
<select id="cli-vendor">
<option value="auto">Deteksi otomatis</option>
<option value="cisco-ios">Cisco IOS / IOS-XE</option>
<option value="cisco-nxos">Cisco NX-OS</option>
<option value="juniper">Juniper JunOS</option>
<option value="sonic">Broadcom SONiC</option>
</select>
</div>
<div class="input-field">
<label> </label>
<button class="submit-btn" onclick="autoDetectFromCLI()" style="background:#607d8b;padding:14px 20px;font-size:14px;" type="button">Konfigurasi Deteksi Otomatis</button>
</div>
</div>
<div class="input-field" style="margin-top:12px;">
<label for="cli-textarea">Tempel Keluaran CLI</label>
<textarea id="cli-textarea" placeholder="Paste 'show etherchannel load-balance' and/or 'show etherchannel summary' output here..." rows="7" style="font-family:'Courier New',monospace;font-size:13px;resize:vertical;"></textarea>
</div>
<div style="margin-top:8px;font-size:12px;color:rgba(255,255,255,0.7);">Tip: Tempelkan kedua perintah untuk hasil terbaik. Aruba AOS-CX dan Extreme ExtremeXOS: gunakan mode Manual.</div>
</div>
Panel Konfigurasi Hash
<div class="mode-panel" style="margin-top:15px;">
<div class="mode-panel-title">Konfigurasi Hash</div>
<div class="input-group">
<div class="input-field">
<label for="hash-algo">Algoritma Hash</label>
<select id="hash-algo">
<optgroup label="Layer 3 (IP-based)">
<option selected="" value="src-dst-ip">src-dst-ip — Src+Dst IP XOR (disarankan)</option>
<option value="src-ip">src-ip — IP sumber saja</option>
<option value="dst-ip">dst-ip — IP Tujuan saja</option>
<option value="src-dst-ip-port">src-dst-ip-port — IP + Port XOR (entropi tertinggi)</option>
</optgroup>
<optgroup label="Layer 2 (MAC-based)">
<option value="src-dst-mac">src-dst-mac — Src+Dst MAC XOR</option>
<option value="src-mac">src-mac — Sumber MAC saja</option>
<option value="dst-mac">dst-mac — Hanya MAC tujuan</option>
<option value="src-dst-mac-ip">src-dst-mac-ip — MAC+IP XOR</option>
</optgroup>
<optgroup label="Layer 4 (Port-based)">
<option value="src-dst-port">src-dst-port — Src+Dst Port XOR</option>
</optgroup>
</select>
</div>
<div class="input-field">
<label for="num-links">Tautan Anggota Aktif</label>
<select id="num-links">
<option value="2">2 tautan</option>
<option selected="" value="4">4 tautan</option>
<option value="8">8 tautan</option>
<option value="16">16 tautan</option>
<option value="3">3 tautan (non-kekuatan-2)</option>
<option value="6">6 tautan (non-kekuatan-2)</option>
</select>
</div>
</div>
</div>
Tabel Alur
<div style="margin-top:15px;">
<div class="mode-panel-title">Tabel Alur</div>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;">
<button class="submit-btn" onclick="addFlowRow(null)" style="padding:8px 14px;font-size:13px;" type="button">+ Tambahkan Aliran</button>
<button class="submit-btn" onclick="loadSampleFlows('web-traffic')" style="background:#607d8b;padding:8px 14px;font-size:13px;" type="button">Muat Contoh Lalu Lintas Web</button>
<button class="submit-btn" onclick="loadSampleFlows('polarized')" style="background:#607d8b;padding:8px 14px;font-size:13px;" type="button">Muat Sampel Terpolarisasi</button>
<button class="submit-btn" onclick="clearFlows()" style="background:#e74c3c;padding:8px 14px;font-size:13px;" type="button">Aliran yang Jelas</button>
</div>
<div class="flow-table-wrapper">
<table class="flow-table">
<thead>
<tr>
<th style="width:28px;">#</th>
<th>Src IP</th>
<th>IP pertama</th>
<th>Pelabuhan Src</th>
<th>Pelabuhan Dst</th>
<th>Proto</th>
<th>Src MAC (opsional)</th>
<th>Dst MAC (opsional)</th>
<th>Keterangan</th>
<th style="width:36px;">✕</th>
</tr>
</thead>
<tbody id="flow-tbody"></tbody>
</table>
</div>
<div style="margin-top:6px;font-size:12px;color:rgba(255,255,255,0.7);">Alamat MAC hanya diperlukan untuk algoritma hash berbasis MAC. Port diperlukan untuk algoritma berbasis port.
        Tekan<kbd style="background:rgba(255,255,255,0.2);border-radius:3px;padding:1px 5px;">Ctrl+Masuk</kbd>untuk mensimulasikan.</div>
</div>
<div class="button-group">
<button class="submit-btn" onclick="simulate()" style="font-size:18px;padding:16px 40px;" type="button">Simulasikan Distribusi</button>
</div>
<div class="help-text">
<strong>Cisco IOS:</strong>tampilkan keseimbangan beban etherchannel &amp; tampilkan ringkasan etherchannel  |<strong>Cisco NX-OS:</strong>tampilkan keseimbangan beban saluran port &amp; tampilkan ringkasan saluran port  |<strong>Jintan saru:</strong>tampilkan antarmuka labp ae0  |<strong>Sonik:</strong>tampilkan antarmuka portchannel</div>
</div>akhir calc-header
========== HASIL AREA
<div id="results-area" style="display:none;">
Bagian 1: Ringkasan Konfigurasi
<div class="result-section">
<div class="section-header">Konfigurasi Simulasi</div>
<div class="section-content">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
<div class="data-row">
<div class="data-label">Algoritma Hash</div>
<div class="data-value highlight" id="cfg-algorithm">—</div>
</div>
<div class="data-row">
<div class="data-label">Tautan Aktif</div>
<div class="data-value highlight" id="cfg-links">—</div>
</div>
<div class="data-row">
<div class="data-label">Aliran Disimulasikan</div>
<div class="data-value" id="cfg-flows">—</div>
</div>
<div class="data-row">
<div class="data-label">Sumber</div>
<div class="data-value" id="cfg-vendor">petunjuk</div>
</div>
</div>
<div class="data-row" id="cfg-portchannel-row" style="display:none;">
<div class="data-label">Nama Saluran Pelabuhan</div>
<div class="data-value" id="cfg-portchannel">—</div>
</div>
</div>
</div>
Bagian 2: Distribusi Beban
<div class="result-section">
<div class="section-header">Bagan Distribusi Beban</div>
<div class="section-content">
<div id="distribution-chart"></div>
<div style="margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;">
<span class="legend-badge">
<span class="legend-dot" style="background:#4CAF50;"></span>Seimbang (&lt;60%)</span>
<span class="legend-badge">
<span class="legend-dot" style="background:#f39c12;"></span>Sedang (60-79%)</span>
<span class="legend-badge">
<span class="legend-dot" style="background:#e74c3c;"></span>Terpolarisasi (≥80%)</span>
<span class="legend-badge" style="color:#888;">Ideal = 100% N tautan</span>
</div>
</div>
</div>
Bagian 3: Penugasan Aliran
<div class="result-section">
<div class="section-header">Penugasan Aliran-ke-Tautan</div>
<div class="section-content" style="padding:15px;">
<div style="overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;font-size:13px;">
<thead>
<tr style="background:#f5f5f5;border-bottom:2px solid #ddd;">
<th style="padding:8px 10px;text-align:left;white-space:nowrap;">Mengalir #</th>
<th style="padding:8px 10px;text-align:left;">Src IP</th>
<th style="padding:8px 10px;text-align:left;">IP pertama</th>
<th style="padding:8px 10px;text-align:right;">Olahraga</th>
<th style="padding:8px 10px;text-align:right;">D.Pelabuhan</th>
<th style="padding:8px 10px;text-align:left;">hash</th>
<th style="padding:8px 10px;text-align:left;">Link</th>
<th style="padding:8px 10px;text-align:left;">Keterangan</th>
</tr>
</thead>
<tbody id="result-flow-tbody">
<tr>
<td colspan="8" style="text-align:center;padding:20px;color:#888;">Jalankan simulasi untuk melihat penetapan aliran.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Bagian 4: Analisis Polarisasi
<div class="result-section">
<div class="section-header">Analisis &amp; Rekomendasi Polarisasi</div>
<div class="section-content">
<div id="polarization-panel"></div>
</div>
</div>
</div>area hasil akhir
</div>wadah kalk akhir
<script>
'use strict';

/* ============================================================
   UTILITY
   ============================================================ */

function escHtml(s) {
  if (s === null || s === undefined) return '';
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

/* ============================================================
   FLOW TABLE MANAGEMENT
   ============================================================ */

let flowRowCount = 0;

function addFlowRow(flow) {
  flowRowCount++;
  const tbody = document.getElementById('flow-tbody');
  const row   = document.createElement('tr');
  row.id      = 'flow-row-' + flowRowCount;
  const rowId = flowRowCount;
  const f     = flow || {};

  row.innerHTML =
    '<td style="padding:6px 4px;color:#aaa;font-size:12px;text-align:center;">' + rowId + '</td>' +
    '<td style="padding:4px 3px;"><input type="text" class="flow-input flow-src-ip" value="' + escHtml(f.srcIp || '') + '" placeholder="10.0.0.1"></td>' +
    '<td style="padding:4px 3px;"><input type="text" class="flow-input flow-dst-ip" value="' + escHtml(f.dstIp || '') + '" placeholder="192.168.1.1"></td>' +
    '<td style="padding:4px 3px;"><input type="text" class="flow-input flow-src-port" value="' + escHtml(String(f.srcPort || '')) + '" placeholder="ephemeral"></td>' +
    '<td style="padding:4px 3px;"><input type="text" class="flow-input flow-dst-port" value="' + escHtml(String(f.dstPort || '')) + '" placeholder="443"></td>' +
    '<td style="padding:4px 3px;"><select class="flow-input flow-proto">' +
      '<option value="tcp"' + (f.proto === 'tcp' ? ' selected' : '') + '>TCP</option>' +
      '<option value="udp"' + (f.proto === 'udp' ? ' selected' : '') + '>UDP</option>' +
      '<option value="any"' + (f.proto === 'any' ? ' selected' : '') + '>Any</option>' +
    '</select></td>' +
    '<td style="padding:4px 3px;"><input type="text" class="flow-input flow-src-mac" value="' + escHtml(f.srcMac || '') + '" placeholder="aa:bb:cc:00:00:01" style="font-family:monospace;"></td>' +
    '<td style="padding:4px 3px;"><input type="text" class="flow-input flow-dst-mac" value="' + escHtml(f.dstMac || '') + '" placeholder="aa:bb:cc:00:01:00" style="font-family:monospace;"></td>' +
    '<td style="padding:4px 3px;"><input type="text" class="flow-input flow-desc" value="' + escHtml(f.desc || '') + '" placeholder="Description"></td>' +
    '<td style="padding:4px;text-align:center;">' +
      '<button type="button" onclick="removeFlowRow(' + rowId + ')" ' +
        'style="background:#e74c3c;color:white;border:none;border-radius:3px;' +
        'padding:4px 8px;cursor:pointer;font-size:12px;font-weight:bold;">&#x2715;</button>' +
    '</td>';

  tbody.appendChild(row);
}

function removeFlowRow(rowId) {
  const row = document.getElementById('flow-row-' + rowId);
  if (row) row.remove();
}

function clearFlows() {
  document.getElementById('flow-tbody').innerHTML = '';
  flowRowCount = 0;
}

function getFlows() {
  const rows  = document.querySelectorAll('#flow-tbody tr');
  const flows = [];
  rows.forEach(function (row) {
    function val(cls) {
      const el = row.querySelector('.' + cls);
      return el ? el.value : '';
    }
    const srcIp   = val('flow-src-ip').trim();
    const dstIp   = val('flow-dst-ip').trim();
    const srcPort = parseInt(val('flow-src-port'), 10) || 0;
    const dstPort = parseInt(val('flow-dst-port'), 10) || 0;
    const proto   = val('flow-proto');
    const srcMac  = val('flow-src-mac').trim();
    const dstMac  = val('flow-dst-mac').trim();
    const desc    = val('flow-desc').trim();
    if (srcIp || dstIp || srcPort || dstPort) {
      flows.push({ srcIp: srcIp, dstIp: dstIp, srcPort: srcPort, dstPort: dstPort,
                   proto: proto, srcMac: srcMac, dstMac: dstMac, desc: desc });
    }
  });
  return flows;
}

/* ============================================================
   SAMPLE FLOW SETS
   ============================================================ */

var SAMPLE_FLOWS = {
  'web-traffic': [
    { srcIp:'10.0.0.1',  dstIp:'192.168.1.100', srcPort:54321, dstPort:443,  proto:'tcp', srcMac:'aa:bb:cc:00:00:01', dstMac:'aa:bb:cc:00:01:00', desc:'HTTPS client 1' },
    { srcIp:'10.0.0.2',  dstIp:'192.168.1.100', srcPort:54322, dstPort:443,  proto:'tcp', srcMac:'aa:bb:cc:00:00:02', dstMac:'aa:bb:cc:00:01:00', desc:'HTTPS client 2' },
    { srcIp:'10.0.0.3',  dstIp:'192.168.1.100', srcPort:54323, dstPort:443,  proto:'tcp', srcMac:'aa:bb:cc:00:00:03', dstMac:'aa:bb:cc:00:01:00', desc:'HTTPS client 3' },
    { srcIp:'10.0.0.4',  dstIp:'192.168.1.100', srcPort:54324, dstPort:80,   proto:'tcp', srcMac:'aa:bb:cc:00:00:04', dstMac:'aa:bb:cc:00:01:00', desc:'HTTP client 4' },
    { srcIp:'10.0.0.5',  dstIp:'192.168.1.101', srcPort:54325, dstPort:443,  proto:'tcp', srcMac:'aa:bb:cc:00:00:05', dstMac:'aa:bb:cc:00:01:01', desc:'HTTPS server 2' },
    { srcIp:'10.0.0.6',  dstIp:'192.168.1.101', srcPort:54326, dstPort:443,  proto:'tcp', srcMac:'aa:bb:cc:00:00:06', dstMac:'aa:bb:cc:00:01:01', desc:'HTTPS server 2' },
    { srcIp:'10.0.0.7',  dstIp:'192.168.1.102', srcPort:54327, dstPort:22,   proto:'tcp', srcMac:'aa:bb:cc:00:00:07', dstMac:'aa:bb:cc:00:01:02', desc:'SSH management' },
    { srcIp:'10.0.0.8',  dstIp:'192.168.1.103', srcPort:54328, dstPort:3306, proto:'tcp', srcMac:'aa:bb:cc:00:00:08', dstMac:'aa:bb:cc:00:01:03', desc:'MySQL query' },
  ],
  'polarized': [
    { srcIp:'10.0.1.1', dstIp:'10.0.2.1', srcPort:50001, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:01', dstMac:'aa:bb:cc:00:01:01', desc:'Flow A — 1 XOR 1 = 0' },
    { srcIp:'10.0.1.2', dstIp:'10.0.2.2', srcPort:50002, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:02', dstMac:'aa:bb:cc:00:01:02', desc:'Flow B — 2 XOR 2 = 0' },
    { srcIp:'10.0.1.3', dstIp:'10.0.2.3', srcPort:50003, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:03', dstMac:'aa:bb:cc:00:01:03', desc:'Flow C — 3 XOR 3 = 0' },
    { srcIp:'10.0.1.5', dstIp:'10.0.2.5', srcPort:50005, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:05', dstMac:'aa:bb:cc:00:01:05', desc:'Flow E — 5 XOR 5 = 0' },
    { srcIp:'10.0.1.6', dstIp:'10.0.2.6', srcPort:50006, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:06', dstMac:'aa:bb:cc:00:01:06', desc:'Flow F — 6 XOR 6 = 0' },
    { srcIp:'10.0.1.7', dstIp:'10.0.2.7', srcPort:50007, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:07', dstMac:'aa:bb:cc:00:01:07', desc:'Flow G — 7 XOR 7 = 0' },
    { srcIp:'10.0.1.8', dstIp:'10.0.2.8', srcPort:50008, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:08', dstMac:'aa:bb:cc:00:01:08', desc:'Flow H — 8 XOR 8 = 0' },
    { srcIp:'10.0.1.9', dstIp:'10.0.2.9', srcPort:50009, dstPort:443, proto:'tcp', srcMac:'aa:bb:cc:00:00:09', dstMac:'aa:bb:cc:00:01:09', desc:'Flow I — 9 XOR 9 = 0' },
  ],
};

function loadSampleFlows(setName) {
  var flows = SAMPLE_FLOWS[setName] || SAMPLE_FLOWS['web-traffic'];
  clearFlows();
  flows.forEach(function (f) { addFlowRow(f); });
}

/* ============================================================
   HASH SIMULATION ENGINE
   ============================================================ */

function ipToBytes(ip) {
  if (!ip) return [0, 0, 0, 0];
  var parts = ip.trim().split('.');
  var bytes = [];
  for (var i = 0; i < 4; i++) {
    bytes.push(parseInt(parts[i], 10) || 0);
  }
  return bytes;
}

function macToBytes(mac) {
  if (!mac) return [0, 0, 0, 0, 0, 0];
  var clean = mac.replace(/[:\-\.]/g, '');
  if (clean.length < 12) return [0, 0, 0, 0, 0, 0];
  var bytes = [];
  for (var i = 0; i < 12; i += 2) {
    bytes.push(parseInt(clean.slice(i, i + 2), 16) || 0);
  }
  return bytes;
}

function lastByte(bytes) {
  return bytes[bytes.length - 1] & 0xFF;
}

var HASH_ALGORITHMS = {
  'src-mac': function (flow) {
    return lastByte(macToBytes(flow.srcMac));
  },
  'dst-mac': function (flow) {
    return lastByte(macToBytes(flow.dstMac));
  },
  'src-dst-mac': function (flow) {
    return lastByte(macToBytes(flow.srcMac)) ^ lastByte(macToBytes(flow.dstMac));
  },
  'src-ip': function (flow) {
    return lastByte(ipToBytes(flow.srcIp));
  },
  'dst-ip': function (flow) {
    return lastByte(ipToBytes(flow.dstIp));
  },
  'src-dst-ip': function (flow) {
    return lastByte(ipToBytes(flow.srcIp)) ^ lastByte(ipToBytes(flow.dstIp));
  },
  'src-dst-port': function (flow) {
    return ((parseInt(flow.srcPort, 10) || 0) ^ (parseInt(flow.dstPort, 10) || 0)) & 0xFF;
  },
  'src-dst-ip-port': function (flow) {
    var ipHash   = lastByte(ipToBytes(flow.srcIp)) ^ lastByte(ipToBytes(flow.dstIp));
    var portHash = ((parseInt(flow.srcPort, 10) || 0) ^ (parseInt(flow.dstPort, 10) || 0)) & 0xFF;
    return ipHash ^ portHash;
  },
  'src-dst-mac-ip': function (flow) {
    return lastByte(macToBytes(flow.srcMac)) ^ lastByte(macToBytes(flow.dstMac)) ^
           lastByte(ipToBytes(flow.srcIp))   ^ lastByte(ipToBytes(flow.dstIp));
  },
};

function computeLinkIndex(flow, algorithm, numLinks) {
  var hashFn = HASH_ALGORITHMS[algorithm];
  if (!hashFn) return 0;
  var hashVal = hashFn(flow) & 0xFF;
  var isPow2  = numLinks > 0 && (numLinks & (numLinks - 1)) === 0;
  return isPow2 ? (hashVal & (numLinks - 1)) : (hashVal % numLinks);
}

function simulateDistribution(flows, algorithm, numLinks) {
  if (numLinks <= 0) return { distribution: [], assignments: [] };

  var distribution = [];
  for (var i = 0; i < numLinks; i++) distribution.push(0);

  var hashFn      = HASH_ALGORITHMS[algorithm] || function () { return 0; };
  var assignments = flows.map(function (flow, idx) {
    var hashVal  = hashFn(flow) & 0xFF;
    var linkIdx  = computeLinkIndex(flow, algorithm, numLinks);
    distribution[linkIdx]++;
    return {
      flowIdx:   idx + 1,
      srcIp:     flow.srcIp,
      dstIp:     flow.dstIp,
      srcPort:   flow.srcPort,
      dstPort:   flow.dstPort,
      proto:     flow.proto,
      srcMac:    flow.srcMac,
      dstMac:    flow.dstMac,
      desc:      flow.desc,
      hashValue: hashVal,
      hashHex:   '0x' + hashVal.toString(16).padStart(2, '0').toUpperCase(),
      linkIndex: linkIdx,
    };
  });

  return { distribution: distribution, assignments: assignments };
}

/* ============================================================
   POLARIZATION ANALYSIS
   ============================================================ */

var ALGO_TIPS = {
  'src-ip':            'All flows from the same /24 subnet share the same last octet — high polarization risk when traffic is subnet-local. Consider src-dst-ip instead.',
  'dst-ip':            'All flows to the same server share the same last octet — polarizes when one server dominates. Consider src-dst-ip instead.',
  'src-dst-ip':        'Good for client-server traffic. Polarizes when src and dst last octets XOR to the same value (e.g., same /24 subnet on both sides).',
  'src-dst-mac':       'L2-only hashing. Effective on L2 fabrics, but may polarize if MAC OUIs are non-random or vendor-allocated sequentially.',
  'src-dst-port':      'Useful when flows share the same IPs but differ in port numbers. Weak if the port range is narrow or well-known ports dominate.',
  'src-dst-ip-port':   'Highest entropy — recommended for most production deployments. Distributes well for diverse flows with varying ports.',
  'src-mac':           'Single-field hashing. Only use when src-dst fields are unavailable. High polarization risk.',
  'dst-mac':           'Single-field hashing. Polarizes if one destination MAC dominates. High polarization risk.',
  'src-dst-mac-ip':    'Combines L2+L3 fields for maximum entropy. Suitable for overlay networks where both MAC and IP vary.',
};

function analyzePolarization(distribution, numLinks, algorithm) {
  var total = distribution.reduce(function (a, b) { return a + b; }, 0);
  if (total === 0) return null;

  var maxLoad  = Math.max.apply(null, distribution);
  var maxIdx   = distribution.indexOf(maxLoad);
  var maxPct   = maxLoad / total;
  var idealPct = 1 / numLinks;
  var imbalance = maxPct / idealPct;

  var perLinkPct = distribution.map(function (d) {
    return Math.round((d / total) * 100);
  });

  var recs = [];

  if (maxPct >= 0.80) {
    recs.push('SEVERE POLARIZATION: Link ' + maxIdx + ' carries ' + Math.round(maxPct * 100) + '% of traffic. ' +
              'Change hash algorithm to "src-dst-ip-port" for significantly more entropy across flows.');
  } else if (maxPct >= 0.60) {
    recs.push('MODERATE IMBALANCE: Link ' + maxIdx + ' carries ' + Math.round(maxPct * 100) + '% of traffic. ' +
              'Distribution is suboptimal — consider a higher-entropy algorithm.');
  }

  var emptyLinks = distribution.filter(function (d) { return d === 0; }).length;
  if (emptyLinks > 0) {
    recs.push(emptyLinks + ' link' + (emptyLinks > 1 ? 's receive' : ' receives') +
              ' zero traffic. These hash values are not represented in the current flow set, ' +
              'indicating possible flow polarization to specific hash bit patterns.');
  }

  var isPow2 = numLinks > 0 && (numLinks & (numLinks - 1)) === 0;
  if (!isPow2) {
    recs.push('Non-power-of-2 link count (' + numLinks + '). Cisco IOS/NX-OS recommend 2, 4, or 8 members for ' +
              'optimal bitmask hashing. Non-power-of-2 uses modulo arithmetic which may produce less uniform distribution.');
  }

  var algoTip = ALGO_TIPS[algorithm];
  if (algoTip) recs.push('Algorithm note: ' + algoTip);

  recs.push('Back-to-back LAG note: Both ends using the same hash algorithm will route any given flow ' +
            'over the same physical link in both directions. This ensures symmetric routing. ' +
            'If one end is imbalanced, both ends will be imbalanced symmetrically — this is expected behavior, not a bug.');

  return {
    isPolarized:      maxPct >= 0.60,
    isSevere:         maxPct >= 0.80,
    maxLinkIndex:     maxIdx,
    maxLinkPercent:   Math.round(maxPct * 100),
    imbalanceRatio:   imbalance.toFixed(2),
    perLinkPct:       perLinkPct,
    recommendations:  recs,
    total:            total,
    numLinks:         numLinks,
  };
}

/* ============================================================
   CLI PARSERS
   ============================================================ */

function detectLACPVendor(raw) {
  if (/EtherChannel Load-Balancing/i.test(raw))                              return 'cisco-ios';
  if (/port-channel summary/i.test(raw) || /Eth\d+\/\d+\([PSD]\)/i.test(raw)) return 'cisco-nxos';
  if (/Aggregated interface:/i.test(raw) || /LACP state:.*Role/i.test(raw))  return 'juniper';
  if (/PortChannel\d+.*LACP/i.test(raw) || /Ethernet\d+\([SD]\)/i.test(raw)) return 'sonic';
  if (/Group.*Port-channel.*Protocol.*Ports/i.test(raw))                     return 'cisco-ios';
  return 'cisco-ios';
}

function parseCiscoLBConfig(raw) {
  var patterns = [
    /Global LB Method:\s*([\w-]+)/i,
    /IPv4:\s*([\w-]+)/i,
    /EtherChannel Load-Balancing.*?Operational State\s*\(\s*([\w-]+)\s*\)/i,
    /EtherChannel Load-Balancing Method.*\n.*:\s*([\w-]+)/i,
  ];
  var hashMethod = null;
  for (var i = 0; i < patterns.length; i++) {
    var m = raw.match(patterns[i]);
    if (m) { hashMethod = m[1].toLowerCase(); break; }
  }
  return { hashMethod: hashMethod, vendor: 'cisco-ios' };
}

function parseCiscoEtherchannelSummary(raw) {
  var portChannels = [];
  var pcRe = /^\s*(\d+)\s+((?:Po|port-channel)\d+)\((\w+)\)\s+(\S+)\s+(.+)$/igm;
  var m;
  while ((m = pcRe.exec(raw)) !== null) {
    var members    = [];
    var memberStr  = m[5];
    var memberRe   = /(\S+)\(([A-Za-z])\)/g;
    var mm;
    while ((mm = memberRe.exec(memberStr)) !== null) {
      members.push({
        interface: mm[1],
        flag:      mm[2],
        isActive:  mm[2].toUpperCase() === 'P',
      });
    }
    portChannels.push({
      group:       parseInt(m[1], 10),
      name:        m[2],
      status:      m[3],
      protocol:    m[4],
      members:     members,
      activeCount: members.filter(function (p) { return p.isActive; }).length,
    });
  }
  return portChannels;
}

function parseNXOSPortChannelSummary(raw) {
  var portChannels = [];
  // NX-OS: "1      Po1(SU)        Eth      LACP        Eth1/1(P)    Eth1/2(P)"
  var pcRe = /^\s*(\d+)\s+(Po\d+)\((\w+)\)\s+\S+\s+\S+\s+(.+)$/igm;
  var m;
  while ((m = pcRe.exec(raw)) !== null) {
    var members   = [];
    var memberRe  = /(\S+)\(([A-Za-z])\)/g;
    var mm;
    while ((mm = memberRe.exec(m[4])) !== null) {
      members.push({
        interface: mm[1],
        flag:      mm[2],
        isActive:  mm[2].toUpperCase() === 'P',
      });
    }
    portChannels.push({
      group:       parseInt(m[1], 10),
      name:        m[2],
      status:      m[3],
      members:     members,
      activeCount: members.filter(function (p) { return p.isActive; }).length,
    });
  }
  return portChannels;
}

function parseJuniperLACPInterfaces(raw) {
  var result   = { aggregates: [], hashMethod: 'src-dst-ip', vendor: 'juniper' };
  var sections = raw.split(/(?=^Aggregated interface:)/m).filter(function (s) { return s.trim(); });
  sections.forEach(function (section) {
    var aggM = section.match(/^Aggregated interface:\s*(\S+)/m);
    if (!aggM) return;
    var agg      = { name: aggM[1], members: [] };
    var memberRe = /^\s+((?:ge|xe|et|fe|ae)-[\d\/]+(?:\.\d+)?)\s+Actor\s+\S+\s+\S+\s+(Yes|No)\s+(Yes|No)/gm;
    var m;
    while ((m = memberRe.exec(section)) !== null) {
      var isActive = m[2] === 'Yes' && m[3] === 'Yes';
      if (!agg.members.find(function (mb) { return mb.interface === m[1]; })) {
        agg.members.push({ interface: m[1], isActive: isActive });
      }
    }
    agg.activeCount = agg.members.filter(function (mb) { return mb.isActive; }).length;
    result.aggregates.push(agg);
  });
  return result;
}

function parseSonicPortChannel(raw) {
  var result = { portChannels: [], hashMethod: 'src-dst-ip', vendor: 'sonic' };
  var pcRe   = /^\s*(\d+)\s+(PortChannel\w+)\s+(\S+)\s+(.+)$/gm;
  var m;
  while ((m = pcRe.exec(raw)) !== null) {
    var pc       = { number: parseInt(m[1], 10), name: m[2], protocol: m[3], members: [] };
    var memberRe = /(\w+)\(([A-Z])\)/g;
    var mm;
    while ((mm = memberRe.exec(m[4])) !== null) {
      pc.members.push({ interface: mm[1], flag: mm[2], isActive: mm[2] === 'S' });
    }
    pc.activeCount = pc.members.filter(function (p) { return p.isActive; }).length;
    result.portChannels.push(pc);
  }
  return result;
}

function parseLACPCLI(vendorHint, raw) {
  var detected       = vendorHint === 'auto' ? detectLACPVendor(raw) : vendorHint;
  var hashMethod     = null;
  var activeCount    = 0;
  var memberInfo     = [];
  var portChannelName = '';

  if (detected === 'cisco-ios' || detected === 'cisco-nxos') {
    var lbConfig = parseCiscoLBConfig(raw);
    if (lbConfig.hashMethod) hashMethod = lbConfig.hashMethod;

    var pcs = parseCiscoEtherchannelSummary(raw);
    if (pcs.length === 0) pcs = parseNXOSPortChannelSummary(raw);
    if (pcs.length > 0) {
      activeCount     = pcs[0].activeCount;
      memberInfo      = pcs[0].members;
      portChannelName = pcs[0].name;
    }
  } else if (detected === 'juniper') {
    var jResult = parseJuniperLACPInterfaces(raw);
    if (jResult.aggregates.length > 0) {
      activeCount     = jResult.aggregates[0].activeCount;
      memberInfo      = jResult.aggregates[0].members;
      portChannelName = jResult.aggregates[0].name;
    }
    hashMethod = jResult.hashMethod;
  } else if (detected === 'sonic') {
    var sResult = parseSonicPortChannel(raw);
    if (sResult.portChannels.length > 0) {
      activeCount     = sResult.portChannels[0].activeCount;
      memberInfo      = sResult.portChannels[0].members;
      portChannelName = sResult.portChannels[0].name;
    }
    hashMethod = sResult.hashMethod;
  }

  return {
    detectedVendor:  detected,
    hashMethod:      hashMethod,
    activeCount:     activeCount,
    memberInfo:      memberInfo,
    portChannelName: portChannelName,
  };
}

/* ============================================================
   RENDERING FUNCTIONS
   ============================================================ */

function getLinkColor(pct) {
  if (pct >= 80) return { bar: '#e74c3c', text: '#c62828', bg: '#ffebee' };
  if (pct >= 60) return { bar: '#f39c12', text: '#e65100', bg: '#fff8e1' };
  return { bar: '#4CAF50', text: '#2e7d32', bg: '#e8f5e9' };
}

function getLinkBadgeColor(linkIdx) {
  var COLORS = ['#2e7d32','#1565c0','#e65100','#6a1b9a','#00838f','#c62828','#4e342e','#37474f',
                '#558b2f','#0277bd','#bf360c','#4a148c','#006064','#b71c1c','#3e2723','#263238'];
  return COLORS[linkIdx % COLORS.length];
}

function renderDistributionChart(distribution, memberInfo) {
  var container = document.getElementById('distribution-chart');
  if (!container) return;
  var total = distribution.reduce(function (a, b) { return a + b; }, 0);
  if (total === 0) { container.innerHTML = '<p style="color:#888;">No flows to chart.</p>'; return; }

  var idealPct = Math.round(100 / distribution.length);
  var html     = '';

  distribution.forEach(function (count, idx) {
    var pct       = total > 0 ? Math.round((count / total) * 100) : 0;
    var colors    = getLinkColor(pct);
    var memberName = (memberInfo && memberInfo[idx]) ? memberInfo[idx].interface : '';
    var diff      = pct - idealPct;
    var diffStr   = diff === 0 ? '&plusmn;0%' : (diff > 0 ? '+' + diff + '%' : diff + '%');
    var barWidth  = Math.max(pct, 1); // at least 1% wide so the bar is visible
    var polarBadge = pct >= 60 ? '<span style="background:#e74c3c;color:white;font-size:10px;' +
                    'padding:1px 6px;border-radius:8px;margin-left:6px;font-weight:bold;">POLARIZED</span>' : '';

    html +=
      '<div style="display:flex;align-items:center;gap:12px;margin:8px 0;' +
                  'padding:10px 12px;background:' + colors.bg + ';border-radius:6px;">' +

        // Link label
        '<div style="min-width:90px;">' +
          '<div style="font-weight:bold;font-size:13px;color:#333;">Link ' + idx + polarBadge + '</div>' +
          (memberName ? '<div style="font-size:11px;color:#888;margin-top:2px;font-family:monospace;">' + escHtml(memberName) + '</div>' : '') +
        '</div>' +

        // Bar track
        '<div style="flex:1;background:#e0e0e0;border-radius:4px;height:28px;overflow:hidden;position:relative;">' +
          '<div style="width:' + barWidth + '%;height:100%;background:' + colors.bar + ';' +
               'border-radius:4px;transition:width 0.5s ease;"></div>' +
          '<div style="position:absolute;top:50%;left:10px;transform:translateY(-50%);' +
               'font-size:12px;font-weight:bold;color:' + (pct > 18 ? 'white' : '#555') + ';white-space:nowrap;">' +
            count + ' flow' + (count !== 1 ? 's' : '') +
          '</div>' +
        '</div>' +

        // Percentage + diff
        '<div style="min-width:80px;text-align:right;">' +
          '<span style="font-size:18px;font-weight:bold;color:' + colors.text + ';">' + pct + '%</span><br>' +
          '<small style="color:#888;font-size:11px;">' + diffStr + ' vs ideal</small>' +
        '</div>' +

      '</div>';
  });

  container.innerHTML = html;
}

function renderFlowTable(assignments, numLinks) {
  var tbody = document.getElementById('result-flow-tbody');
  if (!tbody) return;

  if (assignments.length === 0) {
    tbody.innerHTML =
      '<tr><td colspan="8" style="text-align:center;padding:20px;color:#888;">No flows to display.</td></tr>';
    return;
  }

  var html = assignments.map(function (a) {
    var color = getLinkBadgeColor(a.linkIndex);
    return '<tr style="border-bottom:1px solid #f0f0f0;">' +
      '<td style="padding:7px 10px;color:#888;font-size:12px;">' + a.flowIdx + '</td>' +
      '<td style="padding:7px 10px;font-family:monospace;font-size:12px;">' + escHtml(a.srcIp || '—') + '</td>' +
      '<td style="padding:7px 10px;font-family:monospace;font-size:12px;">' + escHtml(a.dstIp || '—') + '</td>' +
      '<td style="padding:7px 10px;font-family:monospace;font-size:12px;text-align:right;">' + (a.srcPort || '—') + '</td>' +
      '<td style="padding:7px 10px;font-family:monospace;font-size:12px;text-align:right;">' + (a.dstPort || '—') + '</td>' +
      '<td style="padding:7px 10px;font-family:monospace;font-size:12px;color:#666;">' + escHtml(a.hashHex) + '</td>' +
      '<td style="padding:7px 10px;">' +
        '<span style="background:' + color + ';color:white;padding:3px 10px;border-radius:10px;' +
              'font-size:12px;font-weight:bold;white-space:nowrap;">Link ' + a.linkIndex + '</span>' +
      '</td>' +
      '<td style="padding:7px 10px;font-size:12px;color:#666;">' + escHtml(a.desc || '') + '</td>' +
    '</tr>';
  }).join('');

  tbody.innerHTML = html;
}

function renderPolarization(pol) {
  var container = document.getElementById('polarization-panel');
  if (!container || !pol) return;

  var headerColor = pol.isSevere ? '#e74c3c' : pol.isPolarized ? '#f39c12' : '#2ecc71';
  var headerIcon  = pol.isSevere ? '✗' : pol.isPolarized ? '⚠' : '✓';
  var headerText  = pol.isSevere
    ? 'SEVERE POLARIZATION — Link ' + pol.maxLinkIndex + ' carries ' + pol.maxLinkPercent + '%'
    : pol.isPolarized
      ? 'MODERATE IMBALANCE — Link ' + pol.maxLinkIndex + ' carries ' + pol.maxLinkPercent + '%'
      : 'WELL DISTRIBUTED — Maximum link load: ' + pol.maxLinkPercent + '%';

  var borderColor = pol.isSevere ? '#e74c3c' : pol.isPolarized ? '#f39c12' : '#4CAF50';
  var idealPct    = Math.round(100 / pol.numLinks);

  var recsHtml = pol.recommendations.map(function (r) {
    return '<div style="background:white;border:1px solid #e0e0e0;border-radius:4px;' +
           'padding:10px 14px;margin:6px 0;font-size:13px;color:#333;' +
           'border-left:4px solid ' + borderColor + ';line-height:1.5;">' +
           escHtml(r) + '</div>';
  }).join('');

  container.innerHTML =
    '<div style="background:' + headerColor + ';color:white;padding:13px 16px;border-radius:6px;' +
         'font-weight:bold;font-size:15px;margin-bottom:14px;">' +
      headerIcon + ' ' + escHtml(headerText) +
    '</div>' +
    '<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;">' +
      '<div class="data-row">' +
        '<div class="data-label">Imbalance Ratio</div>' +
        '<div class="data-value highlight">' + pol.imbalanceRatio + '&times;</div>' +
      '</div>' +
      '<div class="data-row">' +
        '<div class="data-label">Most Loaded Link</div>' +
        '<div class="data-value">Link ' + pol.maxLinkIndex + ' — ' + pol.maxLinkPercent + '% (ideal: ' + idealPct + '%)</div>' +
      '</div>' +
    '</div>' +
    '<div style="font-weight:bold;color:#555;margin-bottom:8px;font-size:14px;">Recommendations &amp; Notes</div>' +
    recsHtml;
}

function renderConfigSummary(algorithm, numLinks, detectedVendor, portChannelName, totalFlows) {
  var ALGO_NAMES = {
    'src-mac':           'Source MAC (L2)',
    'dst-mac':           'Destination MAC (L2)',
    'src-dst-mac':       'Src+Dst MAC XOR (L2)',
    'src-ip':            'Source IP (L3)',
    'dst-ip':            'Destination IP (L3)',
    'src-dst-ip':        'Src+Dst IP XOR (L3)',
    'src-dst-port':      'Src+Dst Port XOR (L4)',
    'src-dst-ip-port':   'Src+Dst IP + Port XOR (L3+L4)',
    'src-dst-mac-ip':    'Src+Dst MAC+IP XOR (L2+L3)',
  };

  document.getElementById('cfg-algorithm').textContent = ALGO_NAMES[algorithm] || algorithm;
  document.getElementById('cfg-links').textContent     = numLinks;
  document.getElementById('cfg-flows').textContent     = totalFlows;
  document.getElementById('cfg-vendor').textContent    = detectedVendor || 'Manual';

  var pcRow = document.getElementById('cfg-portchannel-row');
  var pcEl  = document.getElementById('cfg-portchannel');
  if (portChannelName) {
    pcEl.textContent   = portChannelName;
    pcRow.style.display = 'flex';
  } else {
    pcRow.style.display = 'none';
  }
}

/* ============================================================
   UI HELPERS
   ============================================================ */

function toggleInputMode(mode) {
  document.getElementById('cli-panel').style.display = mode === 'cli' ? 'block' : 'none';
}

function autoDetectFromCLI() {
  var vendor = document.getElementById('cli-vendor').value;
  var raw    = document.getElementById('cli-textarea').value.trim();
  if (!raw) { alert('Please paste CLI output first.'); return; }

  var parsed = parseLACPCLI(vendor, raw);
  var info   = [];

  if (parsed.hashMethod) {
    document.getElementById('hash-algo').value = parsed.hashMethod;
    info.push('Hash: ' + parsed.hashMethod);
  }
  if (parsed.activeCount && parsed.activeCount > 0) {
    // Snap to nearest select option or just set value
    document.getElementById('num-links').value = String(parsed.activeCount);
    info.push('Active links: ' + parsed.activeCount);
  }
  if (parsed.portChannelName) {
    info.push('Port-channel: ' + parsed.portChannelName);
  }
  if (parsed.detectedVendor) {
    info.push('Vendor: ' + parsed.detectedVendor);
  }

  if (info.length > 0) {
    alert('Detected configuration:\n' + info.join('\n'));
  } else {
    alert('Could not detect configuration from this CLI output.\n' +
          'Try pasting both "show etherchannel load-balance" AND "show etherchannel summary".');
  }
}

/* ============================================================
   MAIN SIMULATE
   ============================================================ */

var lastSimResult = null;

function simulate() {
  var mode       = document.querySelector('input[name="input-mode"]:checked').value;
  var algorithm  = document.getElementById('hash-algo').value;
  var numLinks   = parseInt(document.getElementById('num-links').value, 10) || 4;
  var detectedVendor   = '';
  var portChannelName  = '';
  var memberInfo       = [];

  // CLI mode: override algorithm + link count from parsed CLI
  if (mode === 'cli') {
    var vendor = document.getElementById('cli-vendor').value;
    var raw    = document.getElementById('cli-textarea').value.trim();
    if (raw) {
      var parsed = parseLACPCLI(vendor, raw);
      if (parsed.hashMethod && HASH_ALGORITHMS[parsed.hashMethod]) {
        algorithm = parsed.hashMethod;
        document.getElementById('hash-algo').value = algorithm;
      }
      if (parsed.activeCount && parsed.activeCount >= 2) {
        numLinks = parsed.activeCount;
        document.getElementById('num-links').value = String(numLinks);
      }
      memberInfo      = parsed.memberInfo  || [];
      detectedVendor  = parsed.detectedVendor || '';
      portChannelName = parsed.portChannelName || '';
    }
  }

  var flows = getFlows();
  if (flows.length === 0) {
    alert('Please add at least one flow to the flow table.');
    return;
  }
  if (numLinks < 2 || numLinks > 32) {
    alert('Number of active links must be between 2 and 32.');
    return;
  }

  var simResult    = simulateDistribution(flows, algorithm, numLinks);
  var polarization = analyzePolarization(simResult.distribution, numLinks, algorithm);
  lastSimResult    = { simResult: simResult, algorithm: algorithm, numLinks: numLinks, polarization: polarization };

  var resultsArea = document.getElementById('results-area');
  resultsArea.style.display = 'block';

  renderConfigSummary(algorithm, numLinks, detectedVendor, portChannelName, flows.length);
  renderDistributionChart(simResult.distribution, memberInfo);
  renderFlowTable(simResult.assignments, numLinks);
  renderPolarization(polarization);

  // Scroll to results
  setTimeout(function () {
    resultsArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, 50);
}

/* ============================================================
   KEYBOARD SHORTCUT + INIT
   ============================================================ */

document.addEventListener('keydown', function (e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
    e.preventDefault();
    simulate();
  }
});

document.addEventListener('DOMContentLoaded', function () {
  loadSampleFlows('web-traffic');
});
</script>