..标题：负载均衡器池分布分析器
.. slug：负载均衡器池分布分析器
.. 日期: 2026-03-26 12:00:00 世界标准时间
..标签：网络、负载均衡器、工具、计算器
..类别：工具
..链接：
.. 描述：可视化负载均衡器算法如何在池成员之间分配流量。模拟正常和故障条件下的循环、源 IP 哈希、加权和一致哈希。
..类型：文本
<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>
Chart.js CDN
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<div class="calc-container">
========== 标题/控件 ==========
<div class="calc-header">
<h2>负载均衡器池分配分析器</h2>
<p>模拟不同的负载平衡算法如何在池成员之间分配流量。对故障场景进行建模并比较重新分配效率。</p>
<div class="header-controls">
算法和会话计数
<div class="form-grid">
<div class="form-group">
<label for="algorithmSelect">负载均衡算法：</label>
<select id="algorithmSelect">
<option value="roundRobin">循环赛</option>
<option selected="" value="sourceIpHash">源IP哈希</option>
<option value="weighted">加权</option>
<option value="consistentHash">一致性哈希（环）</option>
</select>
</div>
<div class="form-group">
<label for="virtualNodes">虚拟节点（一致性哈希）：</label>
<select id="virtualNodes">
<option value="10">10个虚拟节点</option>
<option selected="" value="50">50个虚拟节点</option>
<option value="150">150个虚拟节点</option>
<option value="300">300个虚拟节点</option>
</select>
</div>
</div>
会话计数滑块
<div class="control-group-label">交通量</div>
<div class="slider-group">
<label for="sessionSlider">要模拟的会话：<span id="sessionCountLabel">1000</span>
</label>
<input id="sessionSlider" max="10000" min="100" oninput="updateSessionLabel(this.value)" step="100" type="range" value="1000"/>
</div>
池成员管理
<div class="control-group-label">人才库成员</div>
<div class="add-member-row">
<div class="form-group">
<label for="newMemberIp">会员IP地址：</label>
<input id="newMemberIp" placeholder="10.0.1.10" type="text" value="10.0.1.10"/>
</div>
<div class="form-group">
<label for="newMemberPort">港口：</label>
<input id="newMemberPort" placeholder="8080" type="text" value="8080"/>
</div>
<div class="form-group">
<label for="newMemberWeight">重量（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()">+ 添加会员</button>
</div>
</div>
故障模拟
<div class="failure-section">
<div class="control-group-label">故障场景模拟</div>
<div class="failure-row">
<div class="form-group">
<label for="failureSelect">目标会员：</label>
<select id="failureSelect">
<option value="">-- 选择会员 --</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);">降价</button>
<button class="secondary-btn" onclick="setMemberUp()" style="background:rgba(67,160,71,0.4); border-color:rgba(67,160,71,0.8);">提出</button>
</div>
</div>
</div>
<button class="submit-btn" onclick="runSimulation()">运行模拟</button>
<div class="help-text">
<strong>工作原理：</strong>客户端 IP 是从 /16 子网 (10.0.0.0/16) 采样的。
                对于基于源的哈希，每个唯一的客户端 IP 都确定性地映射到一个成员。
                循环法忽略客户端 IP 并按顺序分发。加权使用比例
                随机分配。一致的散列将客户端和成员都置于虚拟环上。</div>
</div>
</div>
========== 会员表 ==========
<div class="result-section show" id="memberTableSection">
<div class="section-header">
<h3>人才库成员</h3>
</div>
<div class="section-content" style="padding: 0;">
<table class="member-table" id="memberTable">
<thead>
<tr>
<th>ID</th>
<th>IP：端口</th>
<th>重量</th>
<th>地位</th>
<th>行动</th>
</tr>
</thead>
<tbody id="memberTableBody">
由 JS 填充
</tbody>
</table>
</div>
</div>
========== 分配结果 ==========
<div class="result-section" id="resultsSection">
<div class="section-header">
<h3>分配结果</h3>
</div>
<div class="section-content">
平衡分+算法解释
<div class="balance-score-container" id="balanceScoreContainer"></div>
<div class="algo-explanation" id="algoExplanation"></div>
指标网格
<div class="metrics-grid" id="metricsGrid" style="margin-top: 20px;"></div>
条形图
<div class="chart-wrapper">
<h4>每个成员的会话分布</h4>
<canvas height="120" id="distributionChart"></canvas>
</div>
会员详细信息行
<div id="memberDetailRows"></div>
</div>
</div>
========== 失败重新分配 ==========
<div class="result-section" id="redistributionSection">
<div class="section-header" style="background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 100%);">
<h3>故障重新分布分析</h3>
</div>
<div class="section-content">
<div id="redistributionContent"></div>
</div>
</div>
========== 哈希环可视化 ==========
<div class="result-section" id="hashRingSection">
<div class="section-header">
<h3>一致性哈希环</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>读环：</strong>每个成员被放置在环周围的多个点上
                （虚拟节点）。客户端 IP 被散列到环上的某个位置，然后发送请求
                顺时针到最近的成员。添加或删除成员仅影响弧线
                环其拥有——最大限度地减少会话中断。</div>
</div>
</div>
========== 帮助/概念 ==========
<div class="result-section show" style="margin-top: 20px;">
<div class="section-header">
<h3>算法参考</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">循环赛</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">会话按顺序分配：成员 1, 2, 3, ..., N, 1, 2, ... 每个成员
                    正好收到所有请求的 1/N。忽略服务器容量和客户端关联性。
                    简单且可预测，但在异构硬件上很难失败。</div>
</div>
<div class="data-row">
<div class="data-label">源IP哈希</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">客户端 IP 的哈希值以成员计数为模来选择后端。同一个客户
                    总是到达同一个成员——对于有状态的应用程序很有用。添加或删除
                    成员改组<em>全部</em>客户端映射（N 更改为所有会话的 (N-1)/N）。</div>
</div>
<div class="data-row">
<div class="data-label">加权</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">每个成员收到的份额与其权重相对于总权重成正比
                    池。权重 = 4 的成员获得的会话数是权重 = 1 的成员的 4 倍。用于建模
                    异构后端容量（例如，虚拟机与裸机服务器）。</div>
</div>
<div class="data-row">
<div class="data-label">一致性哈希</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">成员和客户端都通过哈希映射到一个圆环上。每个客户都去
                    到环上顺时针方向最近的成员。虚拟节点（每个成员的副本）
                    提高分布均匀性。当某个成员发生故障时，只有其会话会转移到
                    环上的下一个成员 — 1/N 个会话受到干扰，而模哈希则为 100%。</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>