.. judul: Penganalisis Distribusi Kumpulan Penyeimbang Beban
.. siput: load-balancer-pool-distribution-analyzer
.. tanggal: 26-03-2026 12:00:00 UTC
.. tag: jaringan, penyeimbang beban, alat, kalkulator
.. kategori: Alat
..tautan:
.. deskripsi: Visualisasikan bagaimana algoritma penyeimbang beban mendistribusikan lalu lintas ke seluruh anggota kumpulan. Simulasikan round robin, hash IP sumber, hashing berbobot, dan konsisten dalam kondisi normal dan kegagalan.
.. ketik: teks
<style>
    .calc-container {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 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 20px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    .form-grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        margin-top: 15px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-group label {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    .form-group input,
    .form-group select {
        padding: 12px;
        font-size: 15px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
    }

    .form-group select {
        cursor: pointer;
        font-family: inherit;
    }

    .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);
        margin-top: 15px;
        width: 100%;
    }

    .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);
    }

    .secondary-btn {
        padding: 10px 20px;
        font-size: 14px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.5);
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .secondary-btn:hover {
        background: rgba(255,255,255,0.35);
        border-color: white;
    }

    .danger-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #e53935;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .danger-btn:hover {
        background: #c62828;
    }

    .result-section {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-top: 20px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: none;
    }

    .result-section.show {
        display: block;
    }

    .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;
    }

    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .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;
        align-items: center;
    }

    .data-label {
        font-weight: bold;
        color: #555;
        min-width: 220px;
        flex-shrink: 0;
        font-size: 14px;
    }

    .data-value {
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-word;
        font-size: 18px;
    }

    .data-value.highlight {
        color: #4CAF50;
        font-weight: bold;
        font-size: 22px;
    }

    .data-value.warning {
        color: #FF6B6B;
        font-weight: bold;
        font-size: 22px;
    }

    .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;
    }

    /* Member list table */
    .member-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        font-size: 14px;
    }

    .member-table th {
        background: #f0f0f0;
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: #444;
        border-bottom: 2px solid #ddd;
    }

    .member-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    .member-table tr:last-child td {
        border-bottom: none;
    }

    .member-table tr:hover td {
        background: #f9f9f9;
    }

    /* Status badge */
    .status-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-badge.up {
        background: #e8f5e9;
        color: #2e7d32;
        border: 1px solid #a5d6a7;
    }

    .status-badge.down {
        background: #ffebee;
        color: #c62828;
        border: 1px solid #ef9a9a;
    }

    /* Balance score ring */
    .balance-score-container {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        margin-bottom: 15px;
    }

    .balance-score-ring {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: bold;
        color: white;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .balance-score-ring.excellent {
        background: linear-gradient(135deg, #43a047, #1b5e20);
    }

    .balance-score-ring.good {
        background: linear-gradient(135deg, #7cb342, #558b2f);
    }

    .balance-score-ring.fair {
        background: linear-gradient(135deg, #fb8c00, #e65100);
    }

    .balance-score-ring.poor {
        background: linear-gradient(135deg, #e53935, #b71c1c);
    }

    .balance-score-info {
        flex: 1;
    }

    .balance-score-info h4 {
        margin: 0 0 5px 0;
        font-size: 18px;
        color: #333;
    }

    .balance-score-info p {
        margin: 0;
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

    /* Metrics grid */
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .metric-card {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        border-top: 3px solid #4CAF50;
    }

    .metric-card .metric-value {
        font-size: 22px;
        font-weight: bold;
        color: #333;
        font-family: 'Courier New', monospace;
    }

    .metric-card .metric-label {
        font-size: 12px;
        color: #888;
        margin-top: 4px;
    }

    /* Chart container */
    .chart-wrapper {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .chart-wrapper h4 {
        margin: 0 0 15px 0;
        color: #444;
        font-size: 15px;
        font-weight: 600;
    }

    /* Algorithm explanation */
    .algo-explanation {
        background: #fff8e1;
        border: 1px solid #ffe082;
        border-radius: 6px;
        padding: 12px 15px;
        font-size: 13px;
        color: #5d4037;
        line-height: 1.6;
        margin-top: 10px;
    }

    .algo-explanation strong {
        color: #3e2723;
    }

    /* Hash ring visualization */
    .ring-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    #hashRingCanvas {
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        display: block;
        flex-shrink: 0;
    }

    .ring-legend {
        flex: 1;
    }

    .ring-legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        font-size: 13px;
        border-bottom: 1px solid #f0f0f0;
    }

    .ring-legend-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Redistribution info */
    .redistribution-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #FF6B6B;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .redistribution-row .arrow {
        color: #FF6B6B;
        font-size: 18px;
        flex-shrink: 0;
    }

    .redistribution-row .move-label {
        color: #555;
        flex: 1;
    }

    .redistribution-row .move-count {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #333;
    }

    /* Slider styling */
    .slider-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 5px;
    }

    .slider-group label {
        font-weight: 600;
        font-size: 14px;
        color: white;
        display: flex;
        justify-content: space-between;
    }

    .slider-group label span {
        font-family: 'Courier New', monospace;
        background: rgba(0,0,0,0.2);
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 13px;
    }

    input[type="range"] {
        width: 100%;
        accent-color: #4CAF50;
        height: 6px;
        cursor: pointer;
    }

    /* Controls area inside header */
    .header-controls {
        margin-top: 20px;
    }

    .control-group-label {
        font-weight: 600;
        font-size: 13px;
        color: rgba(255,255,255,0.8);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        margin-top: 18px;
    }

    .add-member-row {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .add-member-row .form-group {
        flex: 1;
        min-width: 120px;
    }

    /* Failure simulation section */
    .failure-section {
        background: rgba(0,0,0,0.1);
        border-radius: 8px;
        padding: 15px;
        margin-top: 18px;
    }

    .failure-section .control-group-label {
        margin-top: 0;
    }

    .failure-row {
        display: flex;
        gap: 10px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .failure-row .form-group {
        flex: 1;
        min-width: 140px;
    }

    .failure-btn-group {
        display: flex;
        gap: 8px;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .form-grid,
        .form-grid-3 {
            grid-template-columns: 1fr;
        }

        .metrics-grid {
            grid-template-columns: 1fr 1fr;
        }

        .data-row {
            flex-direction: column;
            align-items: flex-start;
        }

        .data-label {
            margin-bottom: 4px;
            min-width: auto;
        }

        .ring-wrapper {
            flex-direction: column;
        }

        #hashRingCanvas {
            width: 220px !important;
            height: 220px !important;
            align-self: center;
        }

        .balance-score-container {
            flex-direction: column;
            text-align: center;
        }

        .add-member-row {
            flex-direction: column;
        }

        .add-member-row .form-group {
            min-width: auto;
            width: 100%;
        }

        .failure-row {
            flex-direction: column;
        }
    }

    @media (max-width: 480px) {
        .calc-header h2 {
            font-size: 22px;
        }

        .metrics-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
CDN Chart.js
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<div class="calc-container">
========== HEADER / KONTROL ==========
<div class="calc-header">
<h2>Penganalisis Distribusi Kumpulan Penyeimbang Beban</h2>
<p>Simulasikan bagaimana algoritma penyeimbangan beban yang berbeda mendistribusikan lalu lintas ke seluruh anggota kumpulan. Modelkan skenario kegagalan dan bandingkan efisiensi redistribusi.</p>
<div class="header-controls">
Algoritma &amp; Jumlah Sesi
<div class="form-grid">
<div class="form-group">
<label for="algorithmSelect">Algoritma Penyeimbangan Beban:</label>
<select id="algorithmSelect">
<option value="roundRobin">Usul</option>
<option selected="" value="sourceIpHash">Sumber IP Hash</option>
<option value="weighted">Tertimbang</option>
<option value="consistentHash">Hashing yang Konsisten (Dering)</option>
</select>
</div>
<div class="form-group">
<label for="virtualNodes">Node Virtual (Hash Konsisten):</label>
<select id="virtualNodes">
<option value="10">10 node virtual</option>
<option selected="" value="50">50 node virtual</option>
<option value="150">150 node virtual</option>
<option value="300">300 node virtual</option>
</select>
</div>
</div>
Penggeser jumlah sesi
<div class="control-group-label">Volume Lalu Lintas</div>
<div class="slider-group">
<label for="sessionSlider">Sesi untuk disimulasikan:<span id="sessionCountLabel">1000</span>
</label>
<input id="sessionSlider" max="10000" min="100" oninput="updateSessionLabel(this.value)" step="100" type="range" value="1000"/>
</div>
Manajemen anggota kumpulan
<div class="control-group-label">Anggota Pangkalan</div>
<div class="add-member-row">
<div class="form-group">
<label for="newMemberIp">Alamat IP Anggota:</label>
<input id="newMemberIp" placeholder="10.0.1.10" type="text" value="10.0.1.10"/>
</div>
<div class="form-group">
<label for="newMemberPort">Pelabuhan:</label>
<input id="newMemberPort" placeholder="8080" type="text" value="8080"/>
</div>
<div class="form-group">
<label for="newMemberWeight">Berat (1-100):</label>
<input id="newMemberWeight" max="100" min="1" type="number" value="1"/>
</div>
<div class="form-group" style="justify-content: flex-end;">
<label> </label>
<button class="secondary-btn" onclick="addMember()">+ Tambahkan Anggota</button>
</div>
</div>
Simulasi kegagalan
<div class="failure-section">
<div class="control-group-label">Simulasi Skenario Kegagalan</div>
<div class="failure-row">
<div class="form-group">
<label for="failureSelect">Anggota Sasaran:</label>
<select id="failureSelect">
<option value="">-- Pilih anggota --</option>
</select>
</div>
<div class="failure-btn-group">
<button class="secondary-btn" onclick="setMemberDown()" style="background:rgba(229,57,53,0.4); border-color:rgba(229,57,53,0.8);">Menurunkan</button>
<button class="secondary-btn" onclick="setMemberUp()" style="background:rgba(67,160,71,0.4); border-color:rgba(67,160,71,0.8);">Membesarkan</button>
</div>
</div>
</div>
<button class="submit-btn" onclick="runSimulation()">Jalankan Simulasi</button>
<div class="help-text">
<strong>Cara kerjanya:</strong>IP klien diambil sampelnya dari subnet /16 (10.0.0.0/16).
                Untuk hashing berbasis sumber, setiap IP klien unik dipetakan secara deterministik ke anggota.
                Round robin mengabaikan IP klien dan mendistribusikan secara berurutan. Tertimbang menggunakan proporsional
                tugas acak. Hashing yang konsisten menempatkan klien dan anggota pada ring virtual.</div>
</div>
</div>
========== TABEL ANGGOTA ==========
<div class="result-section show" id="memberTableSection">
<div class="section-header">
<h3>Anggota Pangkalan</h3>
</div>
<div class="section-content" style="padding: 0;">
<table class="member-table" id="memberTable">
<thead>
<tr>
<th>PENGENAL</th>
<th>IP:Pelabuhan</th>
<th>Berat</th>
<th>Status</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody id="memberTableBody">
dihuni oleh JS
</tbody>
</table>
</div>
</div>
========== HASIL DISTRIBUSI ==========
<div class="result-section" id="resultsSection">
<div class="section-header">
<h3>Hasil Distribusi</h3>
</div>
<div class="section-content">
Skor keseimbangan + penjelasan algoritma
<div class="balance-score-container" id="balanceScoreContainer"></div>
<div class="algo-explanation" id="algoExplanation"></div>
Kisi metrik
<div class="metrics-grid" id="metricsGrid" style="margin-top: 20px;"></div>
Bagan batang
<div class="chart-wrapper">
<h4>Distribusi Sesi per Anggota</h4>
<canvas height="120" id="distributionChart"></canvas>
</div>
Baris detail anggota
<div id="memberDetailRows"></div>
</div>
</div>
========== KEGAGALAN REDISTRIBUSI ==========
<div class="result-section" id="redistributionSection">
<div class="section-header" style="background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 100%);">
<h3>Analisis Redistribusi Kegagalan</h3>
</div>
<div class="section-content">
<div id="redistributionContent"></div>
</div>
</div>
========== VISUALISASI HASH RING ==========
<div class="result-section" id="hashRingSection">
<div class="section-header">
<h3>Cincin Hash yang Konsisten</h3>
</div>
<div class="section-content">
<div class="ring-wrapper">
<canvas height="260" id="hashRingCanvas" width="260"></canvas>
<div class="ring-legend" id="ringLegend"></div>
</div>
<div class="algo-explanation" style="margin-top: 15px;">
<strong>Membaca cincin:</strong>Setiap anggota ditempatkan di beberapa titik di sekitar ring
                (node virtual). IP klien di-hash ke posisi di ring, lalu permintaan dikirim
                ke anggota terdekat searah jarum jam. Menambah atau menghapus anggota hanya mempengaruhi alurnya
                dering yang dimilikinya — meminimalkan gangguan sesi.</div>
</div>
</div>
========== BANTUAN / KONSEP ==========
<div class="result-section show" style="margin-top: 20px;">
<div class="section-header">
<h3>Referensi Algoritma</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">Usul</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Sesi ditugaskan secara berurutan: anggota 1, 2, 3, ..., N, 1, 2, ... Setiap anggota
                    menerima tepat 1/N dari semua permintaan. Mengabaikan kapasitas server dan afinitas klien.
                    Sederhana dan dapat diprediksi tetapi gagal pada perangkat keras yang heterogen.</div>
</div>
<div class="data-row">
<div class="data-label">Sumber IP Hash</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Hash dari modul IP klien, jumlah anggota memilih backend. Klien yang sama
                    selalu menjangkau anggota yang sama — berguna untuk aplikasi stateful. Menambah atau menghapus
                    ada perombakan anggota<em>semua</em>pemetaan klien (N perubahan menjadi (N-1)/N semua sesi).</div>
</div>
<div class="data-row">
<div class="data-label">Tertimbang</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Setiap anggota menerima bagian yang sebanding dengan beratnya relatif terhadap berat totalnya
                    kolam renang. Seorang anggota dengan bobot=4 mendapat 4x sesi dari anggota berbobot=1. Digunakan untuk memodelkan
                    kapasitas backend heterogen (misalnya, VM vs server bare-metal).</div>
</div>
<div class="data-row">
<div class="data-label">Hashing yang Konsisten</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Anggota dan klien keduanya dipetakan ke dalam lingkaran melingkar melalui hashing. Setiap klien pergi
                    ke anggota terdekat searah jarum jam di atas ring. Node virtual (replika per anggota)
                    meningkatkan keseragaman distribusi. Ketika seorang anggota gagal, hanya sesinya yang berpindah ke
                    anggota berikutnya di ring — 1/N sesi terganggu vs. 100% untuk hashing modulo.</div>
</div>
</div>
</div>
</div>
<script>
/* =========================================================
   Load Balancer Pool Distribution Analyzer
   Algorithms: round robin, source IP hash, weighted,
               consistent hashing (virtual node ring)
   ========================================================= */

// ---- State -----------------------------------------------

/** @type {{ id: string, ip: string, port: number, weight: number, status: 'up'|'down' }[]} */
let members = [
    { id: 'member_1', ip: '10.0.1.10', port: 8080, weight: 1, status: 'up' },
    { id: 'member_2', ip: '10.0.1.11', port: 8080, weight: 2, status: 'up' },
    { id: 'member_3', ip: '10.0.1.12', port: 8080, weight: 1, status: 'up' },
    { id: 'member_4', ip: '10.0.1.13', port: 8080, weight: 1, status: 'up' },
];

let memberCounter = 5;
let distributionChart = null;

// ---- Hash utilities --------------------------------------

/**
 * FNV-1a 32-bit hash (deterministic, fast, good avalanche).
 * Returns a positive integer in [0, 2^32).
 * @param {string} str
 * @returns {number}
 */
function fnv1a32(str) {
    let hash = 2166136261; // FNV offset basis
    for (let i = 0; i < str.length; i++) {
        hash ^= str.charCodeAt(i);
        // Multiply by FNV prime (32-bit) using safe integer arithmetic
        hash = (hash * 16777619) >>> 0;
    }
    return hash;
}

/**
 * Convert dotted-decimal IPv4 string to a 32-bit integer.
 * @param {string} ip  e.g. "192.168.1.1"
 * @returns {number}
 */
function ipToInt(ip) {
    const parts = ip.split('.').map(Number);
    if (parts.length !== 4 || parts.some(p => isNaN(p) || p < 0 || p > 255)) return 0;
    return ((parts[0] * 256 + parts[1]) * 256 + parts[2]) * 256 + parts[3];
}

/**
 * Convert 32-bit integer to dotted-decimal IPv4.
 * @param {number} n
 * @returns {string}
 */
function intToIp(n) {
    return [
        (n >>> 24) & 0xff,
        (n >>> 16) & 0xff,
        (n >>>  8) & 0xff,
         n         & 0xff,
    ].join('.');
}

// ---- Traffic generation ----------------------------------

/**
 * Generate an array of client IP strings sampled from 10.0.0.0/16
 * with a realistic Zipfian-ish distribution (some clients appear
 * more often than others, modelling hotspots).
 * @param {number} sessionCount
 * @returns {string[]}
 */
function generateClientIps(sessionCount) {
    // Pre-build a pool of unique client IPs (up to 500 distinct sources)
    const poolSize = Math.min(500, sessionCount);
    const clientPool = [];
    const baseIp = ipToInt('10.0.0.1');
    for (let i = 0; i < poolSize; i++) {
        clientPool.push(intToIp(baseIp + i));
    }

    // Zipfian weights: client i has weight proportional to 1/(i+1)
    // Pre-compute cumulative weights for sampling
    const cumWeights = new Float64Array(poolSize);
    let total = 0;
    for (let i = 0; i < poolSize; i++) {
        total += 1 / (i + 1);
        cumWeights[i] = total;
    }

    // Sample sessions using a simple LCG random so results are
    // reproducible across runs with the same sessionCount.
    const ips = [];
    let seed = sessionCount ^ 0xdeadbeef;
    function lcgRand() {
        // LCG: Numerical Recipes parameters
        seed = (Math.imul(1664525, seed) + 1013904223) >>> 0;
        return seed / 0x100000000;
    }

    for (let s = 0; s < sessionCount; s++) {
        const r = lcgRand() * total;
        // Binary search in cumWeights
        let lo = 0, hi = poolSize - 1;
        while (lo < hi) {
            const mid = (lo + hi) >> 1;
            if (cumWeights[mid] < r) lo = mid + 1;
            else hi = mid;
        }
        ips.push(clientPool[lo]);
    }
    return ips;
}

// ---- Algorithm implementations ---------------------------

/**
 * Round Robin: session index mod active member count.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @returns {Map<string, number>} memberId -> sessionCount
 */
function algorithmRoundRobin(activeMembers, clientIps) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const n = activeMembers.length;
    for (let i = 0; i < clientIps.length; i++) {
        const memberId = activeMembers[i % n].id;
        counts.set(memberId, counts.get(memberId) + 1);
    }
    return counts;
}

/**
 * Source IP Hash: fnv1a(clientIp) mod active member count.
 * Same client always hits the same member (given a fixed member set).
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @returns {Map<string, number>}
 */
function algorithmSourceIpHash(activeMembers, clientIps) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const n = activeMembers.length;
    for (const ip of clientIps) {
        const idx = fnv1a32(ip) % n;
        const memberId = activeMembers[idx].id;
        counts.set(memberId, counts.get(memberId) + 1);
    }
    return counts;
}

/**
 * Weighted: member selection proportional to weight.
 * Uses a deterministic seeded random so reruns are consistent.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @returns {Map<string, number>}
 */
function algorithmWeighted(activeMembers, clientIps) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const totalWeight = activeMembers.reduce((s, m) => s + m.weight, 0);

    // Build cumulative weight array for O(log N) lookup
    const cumWeights = [];
    let acc = 0;
    for (const m of activeMembers) {
        acc += m.weight;
        cumWeights.push({ threshold: acc, id: m.id });
    }

    for (const ip of clientIps) {
        // Use hash of IP as a deterministic random value in [0, totalWeight)
        const r = fnv1a32(ip + '_w') % totalWeight;
        for (const { threshold, id } of cumWeights) {
            if (r < threshold) {
                counts.set(id, counts.get(id) + 1);
                break;
            }
        }
    }
    return counts;
}

/**
 * Build a consistent hash ring with virtual nodes.
 * @param {typeof members} activeMembers
 * @param {number} virtualNodes - number of virtual replicas per member
 * @returns {{ position: number, memberId: string }[]} sorted ring
 */
function buildHashRing(activeMembers, virtualNodes) {
    const ring = [];
    for (const m of activeMembers) {
        for (let v = 0; v < virtualNodes; v++) {
            const position = fnv1a32(`${m.id}#vnode${v}`);
            ring.push({ position, memberId: m.id });
        }
    }
    // Sort by position for binary search
    ring.sort((a, b) => a.position - b.position);
    return ring;
}

/**
 * Find the nearest member clockwise on the ring for a given hash.
 * @param {number} hash
 * @param {{ position: number, memberId: string }[]} ring
 * @returns {string} memberId
 */
function findNearestOnRing(hash, ring) {
    if (ring.length === 0) return '';
    // Binary search for first position >= hash
    let lo = 0, hi = ring.length - 1;
    while (lo < hi) {
        const mid = (lo + hi) >> 1;
        if (ring[mid].position < hash) lo = mid + 1;
        else hi = mid;
    }
    // If hash > all positions, wrap around to ring[0]
    if (ring[lo].position < hash) lo = 0;
    return ring[lo].memberId;
}

/**
 * Consistent Hashing: place clients and members on a virtual ring.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @param {number} virtualNodes
 * @returns {Map<string, number>}
 */
function algorithmConsistentHash(activeMembers, clientIps, virtualNodes) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const ring = buildHashRing(activeMembers, virtualNodes);

    for (const ip of clientIps) {
        const hash = fnv1a32(ip);
        const memberId = findNearestOnRing(hash, ring);
        if (counts.has(memberId)) {
            counts.set(memberId, counts.get(memberId) + 1);
        }
    }
    return counts;
}

// ---- Dispatch to correct algorithm -----------------------

/**
 * Run the selected algorithm and return session counts per member.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @param {string} algorithm
 * @param {number} virtualNodes
 * @returns {Map<string, number>}
 */
function runAlgorithm(activeMembers, clientIps, algorithm, virtualNodes) {
    switch (algorithm) {
        case 'roundRobin':     return algorithmRoundRobin(activeMembers, clientIps);
        case 'sourceIpHash':   return algorithmSourceIpHash(activeMembers, clientIps);
        case 'weighted':       return algorithmWeighted(activeMembers, clientIps);
        case 'consistentHash': return algorithmConsistentHash(activeMembers, clientIps, virtualNodes);
        default:               return algorithmSourceIpHash(activeMembers, clientIps);
    }
}

// ---- Metrics computation ---------------------------------

/**
 * @param {Map<string, number>} distribution - memberId -> sessionCount
 * @param {typeof members} activeMembers
 * @param {number} totalSessions
 * @returns {{ stdDev: number, maxPct: number, minPct: number, balanceScore: number }}
 */
function computeMetrics(distribution, activeMembers, totalSessions) {
    if (activeMembers.length === 0 || totalSessions === 0) {
        return { stdDev: 0, maxPct: 0, minPct: 0, balanceScore: 100 };
    }

    const values = activeMembers.map(m => distribution.get(m.id) ?? 0);
    const mean = totalSessions / activeMembers.length;

    // Population standard deviation (in sessions)
    const variance = values.reduce((s, v) => s + (v - mean) ** 2, 0) / values.length;
    const stdDev = Math.sqrt(variance);

    const maxCount = Math.max(...values);
    const minCount = Math.min(...values);
    const maxPct = (maxCount / totalSessions) * 100;
    const minPct = (minCount / totalSessions) * 100;

    // Balance score: 100 means perfectly even; 0 means all sessions on one member.
    // Coefficient of Variation normalized to [0,100].
    const cv = mean > 0 ? stdDev / mean : 0;
    const idealCv = 0; // perfect balance
    // Max CV ≈ sqrt(N-1) when all sessions on one member; clamp at 1 for score calc
    const balanceScore = Math.max(0, Math.round((1 - Math.min(cv, 1)) * 100));

    return { stdDev, maxPct, minPct, balanceScore };
}

// ---- Failure redistribution analysis ---------------------

/**
 * Compare distributions before and after a member failure.
 * Returns per-surviving-member session gains.
 * @param {Map<string, number>} before
 * @param {Map<string, number>} after
 * @param {string} failedId
 * @returns {{ memberId: string, gained: number }[]}
 */
function computeRedistribution(before, after, failedId) {
    const result = [];
    for (const [id, afterCount] of after.entries()) {
        const beforeCount = before.get(id) ?? 0;
        const gained = afterCount - beforeCount;
        if (gained !== 0) {
            result.push({ memberId: id, gained });
        }
    }
    return result;
}

// ---- UI helpers ------------------------------------------

function updateSessionLabel(value) {
    document.getElementById('sessionCountLabel').textContent = Number(value).toLocaleString();
}

function renderMemberTable() {
    const tbody = document.getElementById('memberTableBody');
    tbody.innerHTML = '';

    // Also rebuild failure select
    const failureSelect = document.getElementById('failureSelect');
    const currentFailureVal = failureSelect.value;
    failureSelect.innerHTML = '<option value="">-- Select member --</option>';

    members.forEach(m => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td style="font-family:monospace;font-size:13px;color:#666;">${m.id}</td>
            <td><strong>${m.ip}</strong>:${m.port}</td>
            <td>${m.weight}</td>
            <td><span class="status-badge ${m.status}">${m.status.toUpperCase()}</span></td>
            <td>
                <button class="danger-btn" onclick="removeMember('${m.id}')">Remove</button>
            </td>
        `;
        tbody.appendChild(tr);

        const opt = document.createElement('option');
        opt.value = m.id;
        opt.textContent = `${m.id} (${m.ip}:${m.port}) — ${m.status}`;
        failureSelect.appendChild(opt);
    });

    // Restore selection if still valid
    if ([...failureSelect.options].some(o => o.value === currentFailureVal)) {
        failureSelect.value = currentFailureVal;
    }
}

function addMember() {
    const ip = document.getElementById('newMemberIp').value.trim();
    const port = parseInt(document.getElementById('newMemberPort').value.trim(), 10);
    const weight = Math.max(1, Math.min(100, parseInt(document.getElementById('newMemberWeight').value, 10) || 1));

    // Basic IP validation
    const ipParts = ip.split('.');
    if (ipParts.length !== 4 || ipParts.some(p => isNaN(Number(p)) || Number(p) < 0 || Number(p) > 255)) {
        alert('Please enter a valid IPv4 address (e.g., 10.0.1.20).');
        return;
    }
    if (isNaN(port) || port < 1 || port > 65535) {
        alert('Please enter a valid port number (1–65535).');
        return;
    }
    if (members.some(m => m.ip === ip && m.port === port)) {
        alert(`Member ${ip}:${port} already exists.`);
        return;
    }

    members.push({
        id: `member_${memberCounter++}`,
        ip,
        port,
        weight,
        status: 'up',
    });

    // Auto-increment the IP for convenience
    const lastOctet = parseInt(ipParts[3], 10);
    if (!isNaN(lastOctet) && lastOctet < 254) {
        ipParts[3] = String(lastOctet + 1);
        document.getElementById('newMemberIp').value = ipParts.join('.');
    }

    renderMemberTable();
}

function removeMember(id) {
    members = members.filter(m => m.id !== id);
    renderMemberTable();
}

function setMemberDown() {
    const id = document.getElementById('failureSelect').value;
    if (!id) { alert('Select a member first.'); return; }
    const m = members.find(m => m.id === id);
    if (m) m.status = 'down';
    renderMemberTable();
}

function setMemberUp() {
    const id = document.getElementById('failureSelect').value;
    if (!id) { alert('Select a member first.'); return; }
    const m = members.find(m => m.id === id);
    if (m) m.status = 'up';
    renderMemberTable();
}

// ---- Color helpers ---------------------------------------

/**
 * Map a load percentage to a CSS color.
 * Green = balanced, Yellow = slightly over, Red = overloaded.
 * @param {number} pct  0–100
 * @param {number} idealPct  expected even share
 * @returns {string} hex color
 */
function loadColor(pct, idealPct) {
    const ratio = idealPct > 0 ? pct / idealPct : 1;
    if (ratio <= 1.15)  return '#4CAF50'; // green  — within 15% of ideal
    if (ratio <= 1.35)  return '#FFC107'; // amber  — 15–35% over
    if (ratio <= 1.60)  return '#FF9800'; // orange — 35–60% over
    return '#F44336'; // red — >60% over ideal
}

const CHART_COLORS_POOL = [
    '#4CAF50','#2196F3','#9C27B0','#FF9800',
    '#00BCD4','#E91E63','#8BC34A','#FF5722',
];

// ---- Chart rendering -------------------------------------

/**
 * Render or update the bar chart.
 * @param {string[]} labels
 * @param {number[]} sessionCounts
 * @param {number} idealPct
 * @param {number} totalSessions
 */
function renderChart(labels, sessionCounts, idealPct, totalSessions) {
    const ctx = document.getElementById('distributionChart').getContext('2d');

    const colors = sessionCounts.map((count, i) => {
        const pct = totalSessions > 0 ? (count / totalSessions) * 100 : 0;
        return loadColor(pct, idealPct);
    });

    if (distributionChart) {
        distributionChart.data.labels = labels;
        distributionChart.data.datasets[0].data = sessionCounts;
        distributionChart.data.datasets[0].backgroundColor = colors;
        distributionChart.update();
        return;
    }

    distributionChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels,
            datasets: [{
                label: 'Sessions',
                data: sessionCounts,
                backgroundColor: colors,
                borderColor: colors.map(c => c + 'cc'),
                borderWidth: 1,
                borderRadius: 4,
            }],
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label(ctx) {
                            const count = ctx.parsed.y;
                            const pct = totalSessions > 0
                                ? ((count / totalSessions) * 100).toFixed(1)
                                : '0.0';
                            return ` ${count.toLocaleString()} sessions (${pct}%)`;
                        },
                    },
                },
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: { display: true, text: 'Sessions', color: '#666', font: { size: 12 } },
                },
                x: {
                    title: { display: true, text: 'Pool Member', color: '#666', font: { size: 12 } },
                },
            },
        },
    });
}

// ---- Hash ring canvas ------------------------------------

/**
 * Draw the consistent hash ring visualization on a canvas.
 * @param {typeof members} activeMembers
 * @param {number} virtualNodes
 * @param {Map<string, number>} distribution
 */
function renderHashRing(activeMembers, virtualNodes, distribution) {
    const canvas = document.getElementById('hashRingCanvas');
    const ctx = canvas.getContext('2d');
    const W = canvas.width;
    const H = canvas.height;
    const cx = W / 2;
    const cy = H / 2;
    const ringR = Math.min(W, H) * 0.40;
    const nodeR = 5;

    ctx.clearRect(0, 0, W, H);

    // Draw ring background
    ctx.strokeStyle = '#e0e0e0';
    ctx.lineWidth = 12;
    ctx.beginPath();
    ctx.arc(cx, cy, ringR, 0, Math.PI * 2);
    ctx.stroke();

    // Assign colors to members
    const colorMap = new Map();
    activeMembers.forEach((m, i) => {
        colorMap.set(m.id, CHART_COLORS_POOL[i % CHART_COLORS_POOL.length]);
    });

    // Draw arc segments for each member's territory
    const ring = buildHashRing(activeMembers, virtualNodes);
    const MAX32 = 0x100000000;
    const TWOPI = Math.PI * 2;

    // For each consecutive pair of virtual nodes, draw a colored arc
    if (ring.length > 0) {
        for (let i = 0; i < ring.length; i++) {
            const next = ring[(i + 1) % ring.length];
            const currAngle = (ring[i].position / MAX32) * TWOPI - Math.PI / 2;
            const nextAngle = (next.position / MAX32) * TWOPI - Math.PI / 2;
            const color = colorMap.get(ring[i].memberId) ?? '#ccc';
            ctx.strokeStyle = color + 'aa';
            ctx.lineWidth = 10;
            ctx.beginPath();
            // Arc from current to next (always clockwise)
            const startA = currAngle;
            let endA = nextAngle;
            if (endA <= startA) endA += TWOPI;
            ctx.arc(cx, cy, ringR, startA, endA);
            ctx.stroke();
        }
    }

    // Draw ring outline (thin)
    ctx.strokeStyle = '#bbb';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(cx, cy, ringR, 0, TWOPI);
    ctx.stroke();

    // Draw virtual nodes as small dots
    for (const node of ring) {
        const angle = (node.position / MAX32) * TWOPI - Math.PI / 2;
        const x = cx + ringR * Math.cos(angle);
        const y = cy + ringR * Math.sin(angle);
        ctx.fillStyle = colorMap.get(node.memberId) ?? '#ccc';
        ctx.beginPath();
        ctx.arc(x, y, nodeR, 0, TWOPI);
        ctx.fill();
    }

    // Center label
    ctx.fillStyle = '#555';
    ctx.font = 'bold 12px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`${virtualNodes} VN`, cx, cy - 8);
    ctx.font = '11px sans-serif';
    ctx.fillStyle = '#888';
    ctx.fillText('per member', cx, cy + 8);

    // Legend
    const legendEl = document.getElementById('ringLegend');
    legendEl.innerHTML = '';
    activeMembers.forEach(m => {
        const sessions = distribution.get(m.id) ?? 0;
        const color = colorMap.get(m.id) ?? '#ccc';
        const item = document.createElement('div');
        item.className = 'ring-legend-item';
        item.innerHTML = `
            <div class="ring-legend-dot" style="background:${color};"></div>
            <div>
                <strong>${m.id}</strong> — ${m.ip}:${m.port}<br>
                <span style="font-size:12px;color:#888;">${sessions.toLocaleString()} sessions</span>
            </div>
        `;
        legendEl.appendChild(item);
    });
}

// ---- Algorithm explanation text --------------------------

const ALGO_EXPLANATIONS = {
    roundRobin: `<strong>Round Robin:</strong> Each incoming session is assigned to the next member in a fixed sequence, cycling through all active members. Session ${1} goes to member 1, session 2 to member 2, ..., session N+1 back to member 1. Result: perfectly even distribution regardless of client source. Standard deviation approaches zero with large session counts.`,
    sourceIpHash: `<strong>Source IP Hash:</strong> A 32-bit FNV-1a hash of the client IP address is computed, then taken modulo the active member count. The same client IP always maps to the same member — providing session affinity at the cost of distribution uniformity. Skewed client populations (Zipfian traffic) may produce uneven loads.`,
    weighted: `<strong>Weighted Distribution:</strong> Members receive traffic proportional to their configured weight. A member with weight 4 receives 4x the sessions of a weight-1 member. Selection is deterministic per client IP (using a seeded hash), so a client consistently reaches the same high-capacity member.`,
    consistentHash: `<strong>Consistent Hashing:</strong> Members are placed at multiple positions on a 2^32 virtual ring (virtual nodes). Client IPs are hashed to a ring position; the request is forwarded to the next clockwise member. When a member is removed, only the sessions in that member's arc are redistributed — minimising disruption compared to modulo hashing.`,
};

// ---- Main simulation -------------------------------------

function runSimulation() {
    const algorithm = document.getElementById('algorithmSelect').value;
    const sessionCount = parseInt(document.getElementById('sessionSlider').value, 10);
    const virtualNodes = parseInt(document.getElementById('virtualNodes').value, 10);

    const activeMembers = members.filter(m => m.status === 'up');

    if (activeMembers.length === 0) {
        alert('No active (up) pool members. Please add members or bring some back up.');
        return;
    }

    // --- Normal distribution ---
    const clientIps = generateClientIps(sessionCount);
    const distribution = runAlgorithm(activeMembers, clientIps, algorithm, virtualNodes);
    const metrics = computeMetrics(distribution, activeMembers, sessionCount);
    const idealPct = 100 / activeMembers.length;

    // --- Failure redistribution ---
    const downMembers = members.filter(m => m.status === 'down');
    let redistributionHtml = '';

    if (downMembers.length > 0) {
        // For each down member, simulate what WOULD have been assigned to it
        // if it were up, then compute how those sessions redistribute now.
        for (const failed of downMembers) {
            const withFailed = [...activeMembers, failed];
            const beforeDist = runAlgorithm(withFailed, clientIps, algorithm, virtualNodes);
            const afterDist = distribution;
            const redistribution = computeRedistribution(beforeDist, afterDist, failed.id);
            const failedSessionCount = beforeDist.get(failed.id) ?? 0;
            const failedPct = sessionCount > 0 ? ((failedSessionCount / sessionCount) * 100).toFixed(1) : '0.0';

            redistributionHtml += `
                <div class="data-row" style="border-left-color:#FF6B6B; margin-bottom:10px;">
                    <div class="data-label" style="color:#c62828;">${failed.id} (${failed.ip}) DOWN</div>
                    <div class="data-value" style="font-size:15px; font-family:inherit; color:#555;">
                        ${failedSessionCount.toLocaleString()} sessions (${failedPct}%) need redistribution
                    </div>
                </div>
            `;

            redistribution.sort((a, b) => b.gained - a.gained);
            redistribution.forEach(({ memberId, gained }) => {
                const receiver = members.find(m => m.id === memberId);
                const receiverLabel = receiver ? `${memberId} (${receiver.ip})` : memberId;
                const arrow = gained > 0 ? '&rarr;' : '&larr;';
                const sign = gained > 0 ? '+' : '';
                redistributionHtml += `
                    <div class="redistribution-row">
                        <span class="arrow">${arrow}</span>
                        <span class="move-label">${receiverLabel} absorbs</span>
                        <span class="move-count">${sign}${gained.toLocaleString()} sessions</span>
                    </div>
                `;
            });

            // Algorithm-specific note
            let algoNote = '';
            if (algorithm === 'consistentHash') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Consistent hashing: only the ${failedPct}% of sessions owned by the failed member's ring arcs are affected.
                    The next clockwise member absorbs each arc. All other sessions remain pinned to their original members.
                </div>`;
            } else if (algorithm === 'sourceIpHash') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Source IP hash (modulo): removing one member changes the modulo divisor from ${withFailed.length} to ${activeMembers.length},
                    causing ALL sessions to be rehashed — not just those belonging to the failed member.
                    <strong>~${(((withFailed.length - activeMembers.length) / withFailed.length) * 100).toFixed(0)}% of clients</strong> land on a different member.
                </div>`;
            } else if (algorithm === 'roundRobin') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Round robin redistributes evenly — the ${failedSessionCount.toLocaleString()} sessions are shared equally across all surviving members.
                </div>`;
            } else if (algorithm === 'weighted') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Weighted redistribution: sessions from the failed member flow to surviving members proportional to their weights,
                    matching the configured capacity ratios.
                </div>`;
            }
            redistributionHtml += algoNote;
            redistributionHtml += '<hr style="margin:15px 0; border:none; border-top:1px solid #eee;">';
        }
    } else {
        redistributionHtml = `<div style="color:#888;font-size:14px;padding:10px;">
            No members are currently marked DOWN. Use the failure simulation controls in the header to mark a member down,
            then re-run the simulation to see redistribution analysis.
        </div>`;
    }

    // ---- Render balance score ----
    const { balanceScore } = metrics;
    let scoreClass = 'excellent';
    let scoreLabel = 'Excellent';
    if (balanceScore < 40) { scoreClass = 'poor';      scoreLabel = 'Poor'; }
    else if (balanceScore < 65) { scoreClass = 'fair'; scoreLabel = 'Fair'; }
    else if (balanceScore < 85) { scoreClass = 'good'; scoreLabel = 'Good'; }

    document.getElementById('balanceScoreContainer').innerHTML = `
        <div class="balance-score-ring ${scoreClass}">${balanceScore}</div>
        <div class="balance-score-info">
            <h4>Balance Score: ${scoreLabel}</h4>
            <p>
                Score 0–100 where 100 = perfectly even distribution.<br>
                Calculated from the coefficient of variation (std dev / mean) across active members.
                A score above 85 is considered production-acceptable for most workloads.
            </p>
        </div>
    `;

    document.getElementById('algoExplanation').innerHTML = ALGO_EXPLANATIONS[algorithm] ?? '';

    // ---- Render metrics grid ----
    document.getElementById('metricsGrid').innerHTML = `
        <div class="metric-card">
            <div class="metric-value">${sessionCount.toLocaleString()}</div>
            <div class="metric-label">Total Sessions</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">${metrics.stdDev.toFixed(1)}</div>
            <div class="metric-label">Std Deviation (sessions)</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">${metrics.maxPct.toFixed(1)}%</div>
            <div class="metric-label">Max Member Load</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">${metrics.minPct.toFixed(1)}%</div>
            <div class="metric-label">Min Member Load</div>
        </div>
    `;

    // ---- Render chart ----
    const labels = activeMembers.map(m => `${m.id}\n${m.ip}`);
    const sessionCounts = activeMembers.map(m => distribution.get(m.id) ?? 0);
    renderChart(labels, sessionCounts, idealPct, sessionCount);

    // ---- Render member detail rows ----
    let detailHtml = '';
    activeMembers.forEach(m => {
        const count = distribution.get(m.id) ?? 0;
        const pct = sessionCount > 0 ? ((count / sessionCount) * 100).toFixed(1) : '0.0';
        const barColor = loadColor(parseFloat(pct), idealPct);
        const barWidth = sessionCount > 0 ? Math.round((count / sessionCount) * 100) : 0;
        detailHtml += `
            <div class="data-row" style="border-left-color: ${barColor}; flex-direction: column; align-items: stretch; padding: 12px 15px;">
                <div style="display:flex; justify-content:space-between; margin-bottom:6px; flex-wrap:wrap; gap:6px;">
                    <span style="font-weight:bold; color:#444; font-size:14px;">${m.id} — ${m.ip}:${m.port}</span>
                    <span style="font-family:monospace; color:${barColor}; font-weight:bold; font-size:15px;">${count.toLocaleString()} sessions (${pct}%)</span>
                </div>
                <div style="background:#f0f0f0; border-radius:4px; height:8px; overflow:hidden;">
                    <div style="width:${barWidth}%; background:${barColor}; height:100%; border-radius:4px; transition:width 0.4s ease;"></div>
                </div>
                <div style="font-size:12px; color:#999; margin-top:4px;">
                    Weight: ${m.weight} &nbsp;|&nbsp; Ideal: ${idealPct.toFixed(1)}%
                </div>
            </div>
        `;
    });
    document.getElementById('memberDetailRows').innerHTML = detailHtml;

    // ---- Redistribution section ----
    document.getElementById('redistributionContent').innerHTML = redistributionHtml;
    document.getElementById('redistributionSection').classList.add('show');

    // ---- Hash ring section ----
    if (algorithm === 'consistentHash') {
        renderHashRing(activeMembers, virtualNodes, distribution);
        document.getElementById('hashRingSection').classList.add('show');
    } else {
        document.getElementById('hashRingSection').classList.remove('show');
    }

    // ---- Show results ----
    const resultsSection = document.getElementById('resultsSection');
    resultsSection.classList.add('show');
    resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// ---- Initialization --------------------------------------

document.addEventListener('DOMContentLoaded', () => {
    renderMemberTable();
});
</script>