.. title: Trình phân tích phân phối nhóm cân bằng tải
.. sên: bộ phân tích cân bằng tải-pool-phân phối
.. ngày: 26-03-2026 12:00:00 UTC
.. tags: mạng, cân bằng tải, công cụ, máy tính
.. thể loại: Công cụ
.. liên kết:
.. mô tả: Trực quan hóa cách các thuật toán cân bằng tải phân phối lưu lượng truy cập giữa các thành viên trong nhóm. Mô phỏng luân phiên, băm IP nguồn, băm có trọng số và nhất quán trong điều kiện bình thường và điều kiện lỗi.
.. loại: văn bản
<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 của Chart.js
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<div class="calc-container">
========== TIÊU ĐỀ / KIỂM SOÁT ==========
<div class="calc-header">
<h2>Trình phân tích phân phối nhóm cân bằng tải</h2>
<p>Mô phỏng cách các thuật toán cân bằng tải khác nhau phân phối lưu lượng truy cập giữa các thành viên trong nhóm. Lập mô hình các kịch bản thất bại và so sánh hiệu quả phân phối lại.</p>
<div class="header-controls">
Thuật toán &amp; số phiên
<div class="form-grid">
<div class="form-group">
<label for="algorithmSelect">Thuật toán cân bằng tải:</label>
<select id="algorithmSelect">
<option value="roundRobin">Vòng Robin</option>
<option selected="" value="sourceIpHash">Mã băm IP nguồn</option>
<option value="weighted">Có trọng số</option>
<option value="consistentHash">Băm nhất quán (Vòng)</option>
</select>
</div>
<div class="form-group">
<label for="virtualNodes">Các nút ảo (Băm nhất quán):</label>
<select id="virtualNodes">
<option value="10">10 nút ảo</option>
<option selected="" value="50">50 nút ảo</option>
<option value="150">150 nút ảo</option>
<option value="300">300 nút ảo</option>
</select>
</div>
</div>
Thanh trượt đếm phiên
<div class="control-group-label">Lưu lượng giao thông</div>
<div class="slider-group">
<label for="sessionSlider">Các phiên mô phỏng:<span id="sessionCountLabel">1000</span>
</label>
<input id="sessionSlider" max="10000" min="100" oninput="updateSessionLabel(this.value)" step="100" type="range" value="1000"/>
</div>
Quản lý thành viên nhóm
<div class="control-group-label">Thành viên nhóm</div>
<div class="add-member-row">
<div class="form-group">
<label for="newMemberIp">Địa chỉ IP của thành viên:</label>
<input id="newMemberIp" placeholder="10.0.1.10" type="text" value="10.0.1.10"/>
</div>
<div class="form-group">
<label for="newMemberPort">Cảng:</label>
<input id="newMemberPort" placeholder="8080" type="text" value="8080"/>
</div>
<div class="form-group">
<label for="newMemberWeight">Trọng lượng (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()">+ Thêm thành viên</button>
</div>
</div>
Mô phỏng lỗi
<div class="failure-section">
<div class="control-group-label">Mô phỏng kịch bản thất bại</div>
<div class="failure-row">
<div class="form-group">
<label for="failureSelect">Thành viên mục tiêu:</label>
<select id="failureSelect">
<option value="">-- Chọn thành viên --</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);">Đánh dấu xuống</button>
<button class="secondary-btn" onclick="setMemberUp()" style="background:rgba(67,160,71,0.4); border-color:rgba(67,160,71,0.8);">Nuôi dưỡng</button>
</div>
</div>
</div>
<button class="submit-btn" onclick="runSimulation()">Chạy mô phỏng</button>
<div class="help-text">
<strong>Nó hoạt động như thế nào:</strong>IP máy khách được lấy mẫu từ mạng con /16 (10.0.0.0/16).
                Đối với băm dựa trên nguồn, mỗi IP khách hàng duy nhất được ánh xạ xác định tới một thành viên.
                Vòng tròn bỏ qua IP của khách hàng và phân phối tuần tự. Sử dụng có trọng số tỷ lệ thuận
                sự phân công ngẫu nhiên. Việc băm nhất quán đặt cả khách hàng và thành viên vào một vòng ảo.</div>
</div>
</div>
========== BẢNG THÀNH VIÊN ===========
<div class="result-section show" id="memberTableSection">
<div class="section-header">
<h3>Thành viên nhóm</h3>
</div>
<div class="section-content" style="padding: 0;">
<table class="member-table" id="memberTable">
<thead>
<tr>
<th>NHẬN DẠNG</th>
<th>IP:Cổng</th>
<th>Cân nặng</th>
<th>Trạng thái</th>
<th>hành động</th>
</tr>
</thead>
<tbody id="memberTableBody">
được phổ biến bởi JS
</tbody>
</table>
</div>
</div>
========== KẾT QUẢ PHÂN PHỐI ==========
<div class="result-section" id="resultsSection">
<div class="section-header">
<h3>Kết quả phân phối</h3>
</div>
<div class="section-content">
Điểm cân bằng + giải thích thuật toán
<div class="balance-score-container" id="balanceScoreContainer"></div>
<div class="algo-explanation" id="algoExplanation"></div>
Lưới số liệu
<div class="metrics-grid" id="metricsGrid" style="margin-top: 20px;"></div>
Biểu đồ thanh
<div class="chart-wrapper">
<h4>Phân phối phiên cho mỗi thành viên</h4>
<canvas height="120" id="distributionChart"></canvas>
</div>
Hàng chi tiết thành viên
<div id="memberDetailRows"></div>
</div>
</div>
========== PHÂN PHỐI LẠI THẤT BẠI ==========
<div class="result-section" id="redistributionSection">
<div class="section-header" style="background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 100%);">
<h3>Phân tích phân phối lại thất bại</h3>
</div>
<div class="section-content">
<div id="redistributionContent"></div>
</div>
</div>
========== HIỂN THỊ VÒNG Băm ==========
<div class="result-section" id="hashRingSection">
<div class="section-header">
<h3>Vòng băm nhất quán</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>Đọc chiếc nhẫn:</strong>Mỗi thành viên được đặt ở nhiều điểm xung quanh vòng
                (các nút ảo). IP của khách hàng được băm vào một vị trí trên vòng, sau đó yêu cầu sẽ được gửi
                đến thành viên gần nhất theo chiều kim đồng hồ. Việc thêm hoặc bớt một thành viên chỉ ảnh hưởng đến cung của
                đổ chuông mà nó sở hữu — giảm thiểu sự gián đoạn phiên.</div>
</div>
</div>
========== GIÚP ĐỠ / KHÁI NIỆM ==========
<div class="result-section show" style="margin-top: 20px;">
<div class="section-header">
<h3>Tham khảo thuật toán</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">Vòng Robin</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Các phiên được phân công tuần tự: thành viên 1, 2, 3, ..., N, 1, 2, ... Mỗi thành viên
                    nhận được chính xác 1/N tất cả các yêu cầu. Bỏ qua dung lượng máy chủ và mối quan hệ của khách hàng.
                    Đơn giản và có thể dự đoán được nhưng lại thất bại nặng nề trên phần cứng không đồng nhất.</div>
</div>
<div class="data-row">
<div class="data-label">Mã băm IP nguồn</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Băm của mô-đun IP máy khách, số lượng thành viên sẽ chọn phần phụ trợ. Cùng một khách hàng
                    luôn tiếp cận cùng một thành viên - hữu ích cho các ứng dụng có trạng thái. Thêm hoặc xóa
                    thay đổi thành viên<em>tất cả</em>ánh xạ máy khách (N thay đổi thành (N-1)/N của tất cả các phiên).</div>
</div>
<div class="data-row">
<div class="data-label">Có trọng số</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Mỗi thành viên nhận được một phần tỷ lệ thuận với trọng lượng của mình so với tổng trọng lượng
                    bể bơi. Một thành viên có trọng lượng = 4 nhận được gấp 4 lần số phiên so với trọng lượng = 1 thành viên. Dùng để làm mẫu
                    khả năng phụ trợ không đồng nhất (ví dụ: VM so với máy chủ kim loại trần).</div>
</div>
<div class="data-row">
<div class="data-label">Băm nhất quán</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Cả thành viên và khách hàng đều được ánh xạ vào một vòng tròn thông qua hàm băm. Mỗi khách hàng đi
                    đến thành viên gần nhất theo chiều kim đồng hồ trên võ đài. Các nút ảo (bản sao cho mỗi thành viên)
                    cải thiện tính đồng nhất phân phối. Khi một thành viên thất bại, chỉ có các phiên của nó chuyển sang
                    thành viên tiếp theo trên võ đài — 1/N phiên bị xáo trộn so với 100% đối với băm 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>