.. tiêu đề: Trình hiển thị tiêu đề gói
.. sên: trình hiển thị gói
.. ngày: 23-01-2026 12:00:00 UTC
.. tags: mạng, máy tính, công cụ, gói, đóng gói, mtu, mss
.. thể loại:
.. liên kết:
.. mô tả: Trực quan hóa các tiêu đề gói mạng và chi phí đóng gói để hiểu tác động của tải trọng
.. loại: văn bản
<style>
    .packet-viz-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0 20px 0;
        opacity: 0.95;
        font-size: 15px;
        line-height: 1.6;
    }

    .config-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .config-panel {
        background: rgba(255,255,255,0.1);
        padding: 15px;
        border-radius: 8px;
    }

    .config-panel h4 {
        margin: 0 0 12px 0;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .input-row {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
    }

    .input-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .input-group label {
        font-weight: bold;
        color: white;
        margin-bottom: 6px;
        font-size: 13px;
    }

    .input-group input,
    .input-group select {
        padding: 10px 12px;
        font-size: 14px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
    }

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

    /* Stack Builder Styles */
    .stack-builder {
        margin-top: 15px;
    }

    .add-header-row {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }

    .add-header-row select {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
    }

    .add-btn {
        padding: 10px 20px;
        font-size: 14px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .add-btn:hover {
        background: #45a049;
        transform: translateY(-1px);
    }

    .tunnel-shortcuts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }

    .tunnel-shortcut-btn {
        padding: 6px 12px;
        font-size: 11px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .tunnel-shortcut-btn:hover {
        background: rgba(255,255,255,0.3);
    }

    .header-stack {
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
        padding: 10px;
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
    }

    .stack-empty {
        color: rgba(255,255,255,0.5);
        text-align: center;
        padding: 40px;
        font-style: italic;
    }

    .stack-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 6px;
        background: rgba(255,255,255,0.95);
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: grab;
    }

    .stack-item:hover {
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .stack-item.dragging {
        opacity: 0.5;
        cursor: grabbing;
    }

    .stack-item .item-number {
        width: 24px;
        height: 24px;
        background: #667eea;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }

    .stack-item .item-color {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .stack-item .item-name {
        flex: 1;
        font-weight: 500;
        color: #333;
    }

    .stack-item .item-layer {
        font-size: 11px;
        padding: 2px 8px;
        background: #e0e0e0;
        border-radius: 10px;
        color: #666;
    }

    .stack-item .item-size {
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #666;
        min-width: 45px;
        text-align: right;
    }

    .stack-item .item-delete {
        width: 24px;
        height: 24px;
        background: #f44336;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .stack-item .item-delete:hover {
        background: #d32f2f;
        transform: scale(1.1);
    }

    .stack-summary {
        margin-top: 10px;
        padding: 10px;
        background: rgba(255,255,255,0.1);
        border-radius: 6px;
        font-size: 13px;
        color: white;
    }

    .stack-summary span {
        margin-right: 20px;
    }

    .stack-summary strong {
        color: #4CAF50;
    }

    .preset-section {
        margin-top: 15px;
    }

    .preset-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .preset-btn {
        padding: 8px 14px;
        font-size: 12px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .preset-btn:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-1px);
    }

    .preset-btn.active {
        background: #4CAF50;
        border-color: #4CAF50;
    }

    .calc-button {
        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);
        width: 100%;
        margin-top: 20px;
    }

    .calc-button:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    /* Results Section */
    .results-section {
        margin-top: 30px;
    }

    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .summary-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-top: 4px solid #4CAF50;
        transition: all 0.3s ease;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .summary-card.warning {
        border-top-color: #ff9800;
    }

    .summary-card.danger {
        border-top-color: #f44336;
    }

    .summary-card .card-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

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

    .summary-card .card-unit {
        font-size: 14px;
        color: #666;
        margin-left: 4px;
    }

    .summary-card .card-subtext {
        font-size: 11px;
        color: #888;
        margin-top: 5px;
    }

    .visualization-panel {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        margin-bottom: 20px;
    }

    .panel-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .panel-content {
        padding: 20px;
        background: #fafafa;
    }

    .byte-grid-container {
        overflow-x: auto;
        padding: 10px 0;
    }

    #byteGrid {
        display: block;
        margin: 0 auto;
    }

    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 15px;
        padding: 15px;
        background: white;
        border-radius: 6px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
    }

    .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid rgba(0,0,0,0.1);
    }

    .header-breakdown {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .breakdown-table {
        width: 100%;
        border-collapse: collapse;
    }

    .breakdown-table th,
    .breakdown-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }

    .breakdown-table th {
        background: #f5f5f5;
        font-weight: bold;
        color: #555;
        font-size: 13px;
        text-transform: uppercase;
    }

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

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

    .breakdown-table .layer-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: bold;
        color: white;
    }

    .layer-l2 { background: #2196F3; }
    .layer-l25 { background: #00BCD4; }
    .layer-l3 { background: #4CAF50; }
    .layer-l4 { background: #FF9800; }
    .layer-tunnel { background: #9C27B0; }
    .layer-payload { background: #607D8B; }

    .byte-range {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: #666;
    }

    .warnings-panel {
        background: #fff3e0;
        border: 1px solid #ff9800;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .warnings-panel h4 {
        margin: 0 0 10px 0;
        color: #e65100;
        font-size: 14px;
    }

    .warning-item {
        padding: 8px 12px;
        background: rgba(255, 152, 0, 0.1);
        border-radius: 4px;
        margin-bottom: 8px;
        font-size: 13px;
        color: #e65100;
    }

    .warning-item:last-child {
        margin-bottom: 0;
    }

    .mss-recommendation {
        background: #e3f2fd;
        border: 1px solid #2196F3;
        border-radius: 8px;
        padding: 15px 20px;
        margin-top: 20px;
    }

    .mss-recommendation h4 {
        margin: 0 0 10px 0;
        color: #1565c0;
        font-size: 14px;
    }

    .mss-recommendation p {
        margin: 0;
        color: #0d47a1;
        font-size: 14px;
        line-height: 1.6;
    }

    .mss-recommendation code {
        background: rgba(33, 150, 243, 0.1);
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
    }

    .description-section {
        margin-top: 30px;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-top: 3px solid #4CAF50;
    }

    .description-section h3 {
        color: #4CAF50;
        margin-top: 0;
    }

    .description-section p {
        line-height: 1.6;
        color: #555;
        margin-bottom: 15px;
    }

    .description-section ul {
        line-height: 1.8;
        color: #555;
    }

    .tooltip {
        position: absolute;
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 12px;
        pointer-events: none;
        z-index: 1000;
        max-width: 250px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .tooltip .tooltip-header {
        font-weight: bold;
        margin-bottom: 5px;
        color: #4CAF50;
    }

    .tooltip .tooltip-detail {
        color: #ccc;
        font-family: 'Courier New', monospace;
    }

    @media (max-width: 900px) {
        .config-grid {
            grid-template-columns: 1fr;
        }

        .summary-cards {
            grid-template-columns: 1fr 1fr;
        }

        .input-row {
            flex-direction: column;
        }
    }
</style>
<div class="packet-viz-container">
<div class="calc-header">
<h2>Trình hiển thị tiêu đề gói</h2>
<p>Trực quan hóa tác động của việc đóng gói mạng đối với tải trọng của bạn. Xây dựng ngăn xếp tiêu đề tùy chỉnh để xem MTU được sử dụng như thế nào bởi chi phí giao thức. Hỗ trợ các đường hầm lồng nhau (VXLAN bên trong VXLAN, GRE bên trong IPsec, v.v.).</p>
<div class="config-grid">
<div class="config-panel">
<h4>Cấu hình khung</h4>
<div class="input-row">
<div class="input-group">
<label for="mtuInput">MTU (byte):</label>
<input id="mtuInput" max="65535" min="576" step="1" type="number" value="1500"/>
</div>
<div class="input-group">
<label for="mtuPreset">MTU phổ biến:</label>
<select id="mtuPreset" onchange="applyMtuPreset()">
<option value="">Phong tục</option>
<option selected="" value="1500">Ethernet (1500)</option>
<option value="1492">PPPoE (1492)</option>
<option value="1480">Đường hầm GRE (1480)</option>
<option value="1450">VXLAN (1450)</option>
<option value="1400">IPsec (1400)</option>
<option value="9000">Khung Jumbo (9000)</option>
<option value="9216">Max Jumbo (9216)</option>
</select>
</div>
</div>
<div class="preset-section">
<h4>Cài đặt trước nhanh</h4>
<div class="preset-buttons">
<button class="preset-btn" onclick="applyPreset('standard')" type="button">TCP/IP tiêu chuẩn</button>
<button class="preset-btn" onclick="applyPreset('vxlan')" type="button">Lớp phủ VXLAN</button>
<button class="preset-btn" onclick="applyPreset('ipsec')" type="button">VPN IPsec</button>
<button class="preset-btn" onclick="applyPreset('gre')" type="button">Đường hầm GRE</button>
<button class="preset-btn" onclick="applyPreset('double-vxlan')" type="button">VXLAN đôi</button>
<button class="preset-btn" onclick="applyPreset('vxlan-gre')" type="button">VXLAN ở GRE</button>
<button class="preset-btn" onclick="applyPreset('clear')" type="button">Xóa tất cả</button>
</div>
</div>
</div>
<div class="config-panel">
<h4>Trình tạo ngăn xếp tiêu đề</h4>
<div class="stack-builder">
<div class="add-header-row">
<select id="headerSelect">
<optgroup label="Layer 2 - Data Link">
<option value="ethernet">Ethernet II (14 byte)</option>
<option value="vlan">Thẻ Vlan 802.1Q (4 byte)</option>
<option value="qinq">Q-in-Q Vlan đôi (8 byte)</option>
<option value="pppoe">PPPoE (8 byte)</option>
</optgroup>
<optgroup label="Layer 2.5 - MPLS">
<option value="mpls">Nhãn MPLS (4 byte)</option>
</optgroup>
<optgroup label="Layer 3 - Network">
<option value="ipv4">IPv4 (20 byte)</option>
<option value="ipv6">IPv6 (40 byte)</option>
</optgroup>
<optgroup label="Layer 4 - Transport">
<option value="tcp">TCP (20 byte)</option>
<option value="udp">UDP (8 byte)</option>
</optgroup>
<optgroup label="Tunnel Protocols">
<option value="vxlan">VXLAN (8 byte)</option>
<option value="geneve">GENEVE (8 byte)</option>
<option value="gre">GRE (4 byte)</option>
<option value="gre-key">GRE có khóa (8 byte)</option>
<option value="nvgre">NVGRE (8 byte)</option>
<option value="ipsec">IPsec ESP (~50 byte)</option>
<option value="l2tp">L2TP (8 byte)</option>
<option value="gtp">GTP-U (8 byte)</option>
<option value="wireguard">WireGuard (32 byte)</option>
<option value="erspan">ERSPAN Loại II (8 byte)</option>
</optgroup>
</select>
<button class="add-btn" onclick="addHeader()" type="button">+ Thêm</button>
</div>
<div class="tunnel-shortcuts">
<span style="color: rgba(255,255,255,0.7); font-size: 11px; margin-right: 5px;">Thêm nhanh:</span>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('vxlan')" type="button">+ Nhóm VXLAN</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('geneve')" type="button">+ Tập đoàn GENEVE</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('gre')" type="button">+ Nhóm GRE</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('ipsec')" type="button">+ Nhóm IPsec</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('inner-tcp')" type="button">+ TCP/IP bên trong</button>
</div>
<div class="header-stack" id="headerStack">
<div class="stack-empty">Nhấp vào "Thêm" hoặc sử dụng các cài đặt trước để xây dựng ngăn xếp tiêu đề của bạn</div>
</div>
<div class="stack-summary" id="stackSummary">
<span>Tiêu đề:<strong id="summaryCount">0</strong></span>
<span>Tổng chi phí:<strong id="summaryOverhead">0</strong>byte</span>
</div>
</div>
</div>
</div>
<button class="calc-button" onclick="visualizePacket()" type="button">Trực quan hóa cấu trúc gói</button>
</div>
<div class="results-section" id="resultsSection" style="display: none;">
<div class="summary-cards" id="summaryCards">
<div class="summary-card" id="cardMtu">
<div class="card-label">Tổng MTU</div>
<div class="card-value"><span id="valueMtu">1500</span><span class="card-unit">B</span></div>
<div class="card-subtext">Kích thước khung</div>
</div>
<div class="summary-card" id="cardOverhead">
<div class="card-label">Tiêu đề trên cao</div>
<div class="card-value"><span id="valueOverhead">54</span><span class="card-unit">B</span></div>
<div class="card-subtext" id="subtextOverhead">Tất cả các tiêu đề được kết hợp</div>
</div>
<div class="summary-card" id="cardPayload">
<div class="card-label">Tải trọng có sẵn</div>
<div class="card-value"><span id="valuePayload">1446</span><span class="card-unit">B</span></div>
<div class="card-subtext">Đối với dữ liệu ứng dụng</div>
</div>
<div class="summary-card" id="cardEfficiency">
<div class="card-label">Hiệu quả</div>
<div class="card-value"><span id="valueEfficiency">96,4</span><span class="card-unit">%</span></div>
<div class="card-subtext">Tải trọng/MTU</div>
</div>
<div class="summary-card" id="cardMss">
<div class="card-label">MSS TCP bên trong</div>
<div class="card-value"><span id="valueMss">1406</span><span class="card-unit">B</span></div>
<div class="card-subtext">MSS được đề xuất</div>
</div>
</div>
<div class="warnings-panel" id="warningsPanel" style="display: none;">
<h4>Cảnh báo cấu hình</h4>
<div id="warningsList"></div>
</div>
<div class="visualization-panel">
<div class="panel-header">
<span>Trực quan hóa cấp độ byte</span>
<span id="gridInfo">32 byte mỗi hàng</span>
</div>
<div class="panel-content">
<div class="byte-grid-container">
<svg id="byteGrid"></svg>
</div>
<div class="legend" id="legend"></div>
</div>
</div>
<div class="header-breakdown">
<div class="panel-header">
<span>Phân tích tiêu đề</span>
</div>
<table class="breakdown-table">
<thead>
<tr>
<th>#</th>
<th>Lớp</th>
<th>Giao thức</th>
<th>Kích cỡ</th>
<th>Phạm vi byte</th>
<th>Sự miêu tả</th>
</tr>
</thead>
<tbody id="breakdownBody">
</tbody>
</table>
</div>
<div class="mss-recommendation" id="mssRecommendation">
<h4>Khuyến nghị MSS</h4>
<p id="mssText"></p>
</div>
</div>
<div class="description-section">
<h3>Giới thiệu về Trực quan hóa Tiêu đề Gói</h3>
<p>Hiểu cách tiêu đề giao thức tiêu thụ MTU của bạn là rất quan trọng để tối ưu hóa hiệu suất mạng. Mỗi lớp đóng gói sẽ bổ sung thêm chi phí làm giảm không gian khả dụng cho dữ liệu ứng dụng thực tế (tải trọng).</p>
<p><strong>Tại sao điều này lại quan trọng?</strong></p>
<ul>
<li><strong>Phân mảnh:</strong>Nếu gói của bạn vượt quá MTU đường dẫn, nó sẽ bị phân mảnh (IPv4) hoặc bị rớt (IPv6), gây ra tình trạng truyền lại và độ trễ</li>
<li><strong>Thông lượng:</strong>Nhiều chi phí hơn có nghĩa là tải trọng trên mỗi gói ít hơn, làm giảm thông lượng hiệu quả</li>
<li><strong>Điều chỉnh MSS:</strong>Kích thước phân đoạn tối đa của TCP phải tính đến tất cả việc đóng gói để tránh phân mảnh</li>
<li><strong>Đường hầm lồng nhau:</strong>Các công nghệ như VXLAN, GRE và IPsec có thể được xếp chồng lên nhau, làm tăng chi phí đáng kể</li>
</ul>
<p><strong>Tham chiếu kích thước tiêu đề:</strong></p>
<ul>
<li><strong>Ethernet II:</strong>14 byte (Dst MAC 6 + Src MAC 6 + EtherType 2)</li>
<li><strong>VLAN 802.1Q:</strong>4 byte mỗi thẻ</li>
<li><strong>MPLS:</strong>4 byte mỗi nhãn</li>
<li><strong>IPv4:</strong>20 byte (tối thiểu, tối đa 60 với các tùy chọn)</li>
<li><strong>IPv6:</strong>40 byte (tiêu đề cơ sở cố định)</li>
<li><strong>TCP:</strong>20 byte (tối thiểu, tối đa 60 với các tùy chọn)</li>
<li><strong>UDP:</strong>8 byte</li>
<li><strong>VXLAN/GENEVE:</strong>8 byte (chỉ tiêu đề đường hầm)</li>
<li><strong>GRE:</strong>4 byte cơ bản, 8 byte có khóa</li>
<li><strong>IPsec ESP:</strong>~50 byte điển hình (thay đổi tùy theo mật mã)</li>
</ul>
</div>
</div>
<div class="tooltip" id="tooltip" style="display: none;"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
'use strict';

/**
 * Packet Header Visualizer
 * Supports arbitrary nesting of encapsulation protocols
 */

// Header definitions
const HEADERS = {
    'ethernet': {
        id: 'ethernet',
        name: 'Ethernet II',
        size: 14,
        layer: 2,
        layerName: 'L2',
        color: '#2196F3',
        description: 'Dst MAC (6B) + Src MAC (6B) + EtherType (2B)',
        rfc: 'RFC 894'
    },
    'vlan': {
        id: 'vlan',
        name: '802.1Q VLAN',
        size: 4,
        layer: 2,
        layerName: 'L2',
        color: '#03A9F4',
        description: 'TPID (2B) + TCI (2B)',
        rfc: 'IEEE 802.1Q'
    },
    'qinq': {
        id: 'qinq',
        name: 'Q-in-Q (802.1ad)',
        size: 8,
        layer: 2,
        layerName: 'L2',
        color: '#00BCD4',
        description: 'Outer VLAN (4B) + Inner VLAN (4B)',
        rfc: 'IEEE 802.1ad'
    },
    'mpls': {
        id: 'mpls',
        name: 'MPLS Label',
        size: 4,
        layer: 2.5,
        layerName: 'L2.5',
        color: '#009688',
        description: 'Label (20b) + TC (3b) + S (1b) + TTL (8b)',
        rfc: 'RFC 3031'
    },
    'pppoe': {
        id: 'pppoe',
        name: 'PPPoE',
        size: 8,
        layer: 2,
        layerName: 'L2',
        color: '#00ACC1',
        description: 'PPPoE header (6B) + PPP protocol (2B)',
        rfc: 'RFC 2516'
    },
    'ipv4': {
        id: 'ipv4',
        name: 'IPv4',
        size: 20,
        layer: 3,
        layerName: 'L3',
        color: '#4CAF50',
        description: 'Standard IPv4 header (no options)',
        rfc: 'RFC 791'
    },
    'ipv6': {
        id: 'ipv6',
        name: 'IPv6',
        size: 40,
        layer: 3,
        layerName: 'L3',
        color: '#8BC34A',
        description: 'Fixed-size IPv6 base header',
        rfc: 'RFC 8200'
    },
    'tcp': {
        id: 'tcp',
        name: 'TCP',
        size: 20,
        layer: 4,
        layerName: 'L4',
        color: '#FF9800',
        description: 'Standard TCP header (no options)',
        rfc: 'RFC 9293'
    },
    'udp': {
        id: 'udp',
        name: 'UDP',
        size: 8,
        layer: 4,
        layerName: 'L4',
        color: '#FFC107',
        description: 'Src Port + Dst Port + Length + Checksum',
        rfc: 'RFC 768'
    },
    'vxlan': {
        id: 'vxlan',
        name: 'VXLAN',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#9C27B0',
        description: 'VXLAN header with 24-bit VNI',
        rfc: 'RFC 7348'
    },
    'geneve': {
        id: 'geneve',
        name: 'GENEVE',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#AB47BC',
        description: 'Generic Network Virtualization Encapsulation',
        rfc: 'RFC 8926'
    },
    'gre': {
        id: 'gre',
        name: 'GRE',
        size: 4,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#7B1FA2',
        description: 'Basic GRE header',
        rfc: 'RFC 2784'
    },
    'gre-key': {
        id: 'gre-key',
        name: 'GRE with Key',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#6A1B9A',
        description: 'GRE header with 32-bit key field',
        rfc: 'RFC 2890'
    },
    'nvgre': {
        id: 'nvgre',
        name: 'NVGRE',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#8E24AA',
        description: 'Network Virtualization using GRE',
        rfc: 'RFC 7637'
    },
    'ipsec': {
        id: 'ipsec',
        name: 'IPsec ESP',
        size: 50,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#E91E63',
        description: 'ESP (8B) + IV (16B) + Pad (~10B) + ICV (16B)',
        rfc: 'RFC 4303',
        note: 'Size varies by cipher; ~50B for AES-GCM'
    },
    'l2tp': {
        id: 'l2tp',
        name: 'L2TP',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#F06292',
        description: 'L2TP session header',
        rfc: 'RFC 2661'
    },
    'gtp': {
        id: 'gtp',
        name: 'GTP-U',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#BA68C8',
        description: 'GPRS Tunneling Protocol User Plane',
        rfc: '3GPP TS 29.281'
    },
    'wireguard': {
        id: 'wireguard',
        name: 'WireGuard',
        size: 32,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#CE93D8',
        description: 'WireGuard transport + poly1305 tag (16B)',
        rfc: 'N/A'
    },
    'erspan': {
        id: 'erspan',
        name: 'ERSPAN Type II',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#D81B60',
        description: 'Encapsulated Remote SPAN',
        rfc: 'N/A (Cisco)'
    }
};

// Preset configurations
const PRESETS = {
    'standard': {
        name: 'Standard TCP/IP',
        headers: ['ethernet', 'ipv4', 'tcp']
    },
    'vxlan': {
        name: 'VXLAN Overlay',
        headers: ['ethernet', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'tcp']
    },
    'ipsec': {
        name: 'IPsec VPN',
        headers: ['ethernet', 'ipv4', 'ipsec', 'ipv4', 'tcp']
    },
    'gre': {
        name: 'GRE Tunnel',
        headers: ['ethernet', 'ipv4', 'gre', 'ipv4', 'tcp']
    },
    'double-vxlan': {
        name: 'Double VXLAN',
        headers: ['ethernet', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'tcp']
    },
    'vxlan-gre': {
        name: 'VXLAN in GRE',
        headers: ['ethernet', 'ipv4', 'gre', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'tcp']
    },
    'clear': {
        name: 'Clear All',
        headers: []
    }
};

// Tunnel groups for quick adding
const TUNNEL_GROUPS = {
    'vxlan': ['ipv4', 'udp', 'vxlan', 'ethernet'],
    'geneve': ['ipv4', 'udp', 'geneve', 'ethernet'],
    'gre': ['ipv4', 'gre'],
    'ipsec': ['ipv4', 'ipsec'],
    'inner-tcp': ['ipv4', 'tcp']
};

// Current header stack (array of header objects with unique IDs)
let headerStack = [];
let nextId = 1;

/**
 * Generate unique color variations for repeated headers
 */
function getColorVariation(baseColor, index) {
    // Slightly adjust hue/lightness for repeated headers
    const variation = (index % 5) * 15;
    // Simple approach: adjust opacity or return base
    return baseColor;
}

/**
 * Add a header to the stack
 */
function addHeader(headerId = null) {
    if (!headerId) {
        headerId = document.getElementById('headerSelect').value;
    }

    const headerDef = HEADERS[headerId];
    if (!headerDef) return;

    // Count how many of this type already exist
    const existingCount = headerStack.filter(h => h.id === headerId).length;

    headerStack.push({
        ...headerDef,
        uid: nextId++,
        instanceNum: existingCount + 1
    });

    renderHeaderStack();
    updateStackSummary();

    // Auto-update visualization if already shown
    if (document.getElementById('resultsSection').style.display !== 'none') {
        visualizePacket();
    }
}

/**
 * Add a tunnel group (e.g., IP+UDP+VXLAN+ETH)
 */
function addTunnelGroup(groupName) {
    const group = TUNNEL_GROUPS[groupName];
    if (!group) return;

    group.forEach(headerId => {
        addHeader(headerId);
    });
}

/**
 * Remove a header from the stack
 */
function removeHeader(uid) {
    headerStack = headerStack.filter(h => h.uid !== uid);
    renderHeaderStack();
    updateStackSummary();

    if (document.getElementById('resultsSection').style.display !== 'none') {
        visualizePacket();
    }
}

/**
 * Move a header up in the stack
 */
function moveHeaderUp(uid) {
    const index = headerStack.findIndex(h => h.uid === uid);
    if (index > 0) {
        [headerStack[index - 1], headerStack[index]] = [headerStack[index], headerStack[index - 1]];
        renderHeaderStack();
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    }
}

/**
 * Move a header down in the stack
 */
function moveHeaderDown(uid) {
    const index = headerStack.findIndex(h => h.uid === uid);
    if (index < headerStack.length - 1) {
        [headerStack[index], headerStack[index + 1]] = [headerStack[index + 1], headerStack[index]];
        renderHeaderStack();
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    }
}

/**
 * Render the header stack UI
 */
function renderHeaderStack() {
    const container = document.getElementById('headerStack');

    if (headerStack.length === 0) {
        container.innerHTML = '<div class="stack-empty">Click "+ Add" or use presets to build your header stack</div>';
        return;
    }

    let html = '';
    headerStack.forEach((header, index) => {
        const instanceLabel = header.instanceNum > 1 ? ` #${header.instanceNum}` : '';
        html += `
            <div class="stack-item" data-uid="${header.uid}">
                <span class="item-number">${index + 1}</span>
                <span class="item-color" style="background: ${header.color}"></span>
                <span class="item-name">${header.name}${instanceLabel}</span>
                <span class="item-layer">${header.layerName}</span>
                <span class="item-size">${header.size}B</span>
                <button type="button" class="item-delete" onclick="removeHeader(${header.uid})" title="Remove">×</button>
            </div>
        `;
    });

    container.innerHTML = html;
}

/**
 * Update the stack summary
 */
function updateStackSummary() {
    const totalOverhead = headerStack.reduce((sum, h) => sum + h.size, 0);
    document.getElementById('summaryCount').textContent = headerStack.length;
    document.getElementById('summaryOverhead').textContent = totalOverhead;
}

/**
 * Apply a preset configuration
 */
function applyPreset(presetName) {
    const preset = PRESETS[presetName];
    if (!preset) return;

    // Clear current stack
    headerStack = [];
    nextId = 1;

    // Add preset headers
    preset.headers.forEach(headerId => {
        const headerDef = HEADERS[headerId];
        if (headerDef) {
            const existingCount = headerStack.filter(h => h.id === headerId).length;
            headerStack.push({
                ...headerDef,
                uid: nextId++,
                instanceNum: existingCount + 1
            });
        }
    });

    renderHeaderStack();
    updateStackSummary();

    // Update preset button styles
    document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
    if (event && event.target) {
        event.target.classList.add('active');
    }

    // Auto-visualize
    visualizePacket();
}

/**
 * Apply MTU preset
 */
function applyMtuPreset() {
    const preset = document.getElementById('mtuPreset').value;
    if (preset) {
        document.getElementById('mtuInput').value = preset;
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    }
}

/**
 * Build the positioned header stack for visualization
 */
function buildPositionedStack() {
    const positioned = [];
    let currentByte = 0;

    headerStack.forEach((header, index) => {
        positioned.push({
            ...header,
            index: index,
            startByte: currentByte,
            endByte: currentByte + header.size - 1
        });
        currentByte += header.size;
    });

    return positioned;
}

/**
 * Validate the header stack and return warnings
 */
function validateStack(stack) {
    const warnings = [];

    if (stack.length === 0) {
        return warnings;
    }

    // Check for common issues
    let lastLayer = 0;
    let hasOuterTransport = false;
    let tunnelDepth = 0;

    for (let i = 0; i < stack.length; i++) {
        const header = stack[i];
        const prevHeader = i > 0 ? stack[i - 1] : null;

        // Track tunnel depth
        if (header.layer === 'tunnel') {
            tunnelDepth++;
        }

        // Check if L4 tunnel protocol has required transport
        const udpTunnels = ['vxlan', 'geneve', 'l2tp', 'gtp', 'wireguard'];
        if (udpTunnels.includes(header.id)) {
            // Look backwards for UDP
            let foundUdp = false;
            for (let j = i - 1; j >= 0; j--) {
                if (stack[j].id === 'udp') {
                    foundUdp = true;
                    break;
                }
                if (stack[j].layer === 'tunnel') break; // Stop at previous tunnel
            }
            if (!foundUdp) {
                warnings.push(`${header.name} typically requires UDP encapsulation`);
            }
        }

        // Check if tunnel has IP before it
        if (header.layer === 'tunnel') {
            let foundIp = false;
            for (let j = i - 1; j >= 0; j--) {
                if (stack[j].id === 'ipv4' || stack[j].id === 'ipv6') {
                    foundIp = true;
                    break;
                }
                if (stack[j].layer === 'tunnel') break;
            }
            if (!foundIp) {
                warnings.push(`${header.name} typically requires an IP header`);
            }
        }
    }

    // Deep nesting warning
    if (tunnelDepth > 3) {
        warnings.push(`Deep nesting detected (${tunnelDepth} tunnel layers). This may cause significant overhead.`);
    }

    return warnings;
}

/**
 * Calculate packet metrics
 */
function calculateMetrics(positionedStack, mtu) {
    const totalOverhead = positionedStack.reduce((sum, h) => sum + h.size, 0);
    const payload = Math.max(0, mtu - totalOverhead);
    const efficiency = mtu > 0 ? (payload / mtu) * 100 : 0;

    // MSS is payload available after all headers
    const mss = payload;

    return {
        mtu,
        overhead: totalOverhead,
        payload,
        efficiency: efficiency.toFixed(1),
        mss
    };
}

/**
 * Render the byte grid visualization with D3
 */
function renderByteGrid(positionedStack, mtu) {
    const svg = d3.select('#byteGrid');
    svg.selectAll('*').remove();

    const cellSize = 16;
    const cellPadding = 2;
    const bytesPerRow = 32;
    const totalCells = Math.min(mtu, 2048); // Cap visualization at 2048 bytes
    const rows = Math.ceil(totalCells / bytesPerRow);

    const width = bytesPerRow * (cellSize + cellPadding) + 60;
    const height = rows * (cellSize + cellPadding) + 40;

    svg.attr('width', width).attr('height', height);

    // Create header lookup map
    const byteToHeader = new Map();
    positionedStack.forEach(header => {
        for (let i = header.startByte; i <= header.endByte && i < totalCells; i++) {
            byteToHeader.set(i, header);
        }
    });

    const totalOverhead = positionedStack.reduce((sum, h) => sum + h.size, 0);

    // Add row labels
    for (let row = 0; row < rows; row++) {
        svg.append('text')
            .attr('x', 5)
            .attr('y', 30 + row * (cellSize + cellPadding) + cellSize / 2 + 4)
            .attr('font-size', '10px')
            .attr('fill', '#666')
            .attr('font-family', 'Courier New, monospace')
            .text(row * bytesPerRow);
    }

    // Create cells
    const tooltip = d3.select('#tooltip');

    for (let i = 0; i < totalCells; i++) {
        const row = Math.floor(i / bytesPerRow);
        const col = i % bytesPerRow;
        const x = 50 + col * (cellSize + cellPadding);
        const y = 20 + row * (cellSize + cellPadding);

        let color, header;
        if (byteToHeader.has(i)) {
            header = byteToHeader.get(i);
            color = header.color;
        } else if (i < mtu) {
            color = '#607D8B';
            header = { name: 'Payload', description: 'Application data', layerName: 'Data' };
        } else {
            color = '#eee';
            header = null;
        }

        const rect = svg.append('rect')
            .attr('x', x)
            .attr('y', y)
            .attr('width', cellSize)
            .attr('height', cellSize)
            .attr('fill', color)
            .attr('rx', 2)
            .attr('stroke', '#fff')
            .attr('stroke-width', 1)
            .style('cursor', header ? 'pointer' : 'default');

        if (header) {
            rect.on('mouseover', function(event) {
                d3.select(this).attr('stroke', '#333').attr('stroke-width', 2);

                const instanceLabel = header.instanceNum > 1 ? ` #${header.instanceNum}` : '';
                let tooltipContent = `<div class="tooltip-header">${header.name}${instanceLabel}</div>`;
                if (header.startByte !== undefined) {
                    tooltipContent += `<div class="tooltip-detail">Bytes ${header.startByte}-${header.endByte} (${header.size}B)</div>`;
                } else {
                    tooltipContent += `<div class="tooltip-detail">Byte ${i}</div>`;
                }
                tooltipContent += `<div style="margin-top: 5px; font-size: 11px;">${header.description || ''}</div>`;
                if (header.rfc) {
                    tooltipContent += `<div style="margin-top: 3px; font-size: 10px; color: #888;">${header.rfc}</div>`;
                }

                tooltip.html(tooltipContent)
                    .style('display', 'block')
                    .style('left', (event.pageX + 10) + 'px')
                    .style('top', (event.pageY - 10) + 'px');
            })
            .on('mouseout', function() {
                d3.select(this).attr('stroke', '#fff').attr('stroke-width', 1);
                tooltip.style('display', 'none');
            })
            .on('mousemove', function(event) {
                tooltip.style('left', (event.pageX + 10) + 'px')
                    .style('top', (event.pageY - 10) + 'px');
            });
        }
    }

    // Update grid info
    const truncated = mtu > 2048 ? ' (truncated)' : '';
    document.getElementById('gridInfo').textContent = `${bytesPerRow} bytes/row | ${totalCells} bytes shown${truncated}`;
}

/**
 * Render the legend
 */
function renderLegend(positionedStack) {
    const legend = document.getElementById('legend');
    const seen = new Map();

    positionedStack.forEach(header => {
        const key = header.id;
        if (!seen.has(key)) {
            seen.set(key, { name: header.name, color: header.color, count: 1 });
        } else {
            seen.get(key).count++;
        }
    });

    let html = '';
    seen.forEach((info, key) => {
        const countLabel = info.count > 1 ? ` (×${info.count})` : '';
        html += `<div class="legend-item">
            <div class="legend-color" style="background: ${info.color}"></div>
            <span>${info.name}${countLabel}</span>
        </div>`;
    });

    // Add payload
    html += `<div class="legend-item">
        <div class="legend-color" style="background: #607D8B"></div>
        <span>Payload</span>
    </div>`;

    legend.innerHTML = html;
}

/**
 * Render the breakdown table
 */
function renderBreakdownTable(positionedStack, payloadSize, mtu) {
    const tbody = document.getElementById('breakdownBody');
    let html = '';

    positionedStack.forEach((header, index) => {
        const layerClass = `layer-${header.layerName.toLowerCase().replace('.', '')}`;
        const instanceLabel = header.instanceNum > 1 ? ` #${header.instanceNum}` : '';
        html += `<tr>
            <td>${index + 1}</td>
            <td><span class="layer-badge ${layerClass}">${header.layerName}</span></td>
            <td><strong>${header.name}${instanceLabel}</strong></td>
            <td>${header.size} bytes</td>
            <td class="byte-range">${header.startByte} - ${header.endByte}</td>
            <td>${header.description || '-'}</td>
        </tr>`;
    });

    // Add payload row
    const payloadStart = positionedStack.length > 0 ? positionedStack[positionedStack.length - 1].endByte + 1 : 0;
    const payloadEnd = Math.min(payloadStart + payloadSize - 1, mtu - 1);
    html += `<tr>
        <td>-</td>
        <td><span class="layer-badge layer-payload">Data</span></td>
        <td><strong>Payload</strong></td>
        <td>${payloadSize} bytes</td>
        <td class="byte-range">${payloadSize > 0 ? `${payloadStart} - ${payloadEnd}` : 'N/A'}</td>
        <td>Available for application data</td>
    </tr>`;

    tbody.innerHTML = html;
}

/**
 * Update summary cards
 */
function updateSummaryCards(metrics) {
    document.getElementById('valueMtu').textContent = metrics.mtu;
    document.getElementById('valueOverhead').textContent = metrics.overhead;
    document.getElementById('valuePayload').textContent = metrics.payload;
    document.getElementById('valueEfficiency').textContent = metrics.efficiency;
    document.getElementById('valueMss').textContent = metrics.mss;

    // Update card styling based on values
    const efficiencyCard = document.getElementById('cardEfficiency');
    const payloadCard = document.getElementById('cardPayload');

    efficiencyCard.className = 'summary-card';
    payloadCard.className = 'summary-card';

    if (parseFloat(metrics.efficiency) < 50) {
        efficiencyCard.classList.add('danger');
    } else if (parseFloat(metrics.efficiency) < 70) {
        efficiencyCard.classList.add('warning');
    }

    if (metrics.payload < 100) {
        payloadCard.classList.add('danger');
    } else if (metrics.payload < 500) {
        payloadCard.classList.add('warning');
    }
}

/**
 * Show warnings
 */
function showWarnings(warnings) {
    const panel = document.getElementById('warningsPanel');
    const list = document.getElementById('warningsList');

    if (warnings.length === 0) {
        panel.style.display = 'none';
        return;
    }

    list.innerHTML = warnings.map(w => `<div class="warning-item">${w}</div>`).join('');
    panel.style.display = 'block';
}

/**
 * Generate MSS recommendation text
 */
function generateMssRecommendation(positionedStack, metrics, mtu) {
    const mssText = document.getElementById('mssText');
    const tunnelCount = positionedStack.filter(h => h.layer === 'tunnel').length;

    let text = '';

    if (metrics.payload <= 0) {
        text = `<strong style="color: #c62828;">Warning:</strong> Your encapsulation overhead (${metrics.overhead} bytes) exceeds the MTU (${mtu} bytes). No payload space is available. Increase MTU or reduce encapsulation.`;
    } else if (tunnelCount > 0) {
        text = `For traffic through this ${tunnelCount}-layer tunnel configuration, configure inner TCP MSS to <code>${metrics.mss}</code> bytes to prevent fragmentation. `;
        text += `Total tunnel overhead: ${metrics.overhead} bytes.`;

        const hasIpv6 = positionedStack.some(h => h.id === 'ipv6');
        if (hasIpv6) {
            text += `<br><br><strong>Note:</strong> IPv6 does not fragment in transit. Ensure PMTUD works or configure MSS clamping.`;
        }

        text += `<br><br><strong>Cisco IOS:</strong> <code>ip tcp adjust-mss ${metrics.mss}</code>`;
        text += `<br><strong>Linux iptables:</strong> <code>iptables -t mangle -A FORWARD -p tcp --tcp-flags SYN,RST SYN -j TCPMSS --set-mss ${metrics.mss}</code>`;
    } else if (positionedStack.length > 0) {
        text = `Standard configuration with ${metrics.overhead} bytes overhead. `;
        text += `Maximum TCP segment payload: <code>${metrics.mss}</code> bytes (${metrics.efficiency}% efficiency).`;
    } else {
        text = `Add headers to your stack to see MSS recommendations.`;
    }

    mssText.innerHTML = text;
}

/**
 * Main visualization function
 */
function visualizePacket() {
    const mtu = parseInt(document.getElementById('mtuInput').value) || 1500;

    // Validate MTU
    if (mtu < 576) {
        alert('MTU must be at least 576 bytes (IPv4 minimum)');
        return;
    }
    if (mtu > 65535) {
        alert('MTU cannot exceed 65535 bytes');
        return;
    }

    // Build positioned stack
    const positionedStack = buildPositionedStack();

    // Validate and get warnings
    const warnings = validateStack(positionedStack);

    // Calculate metrics
    const metrics = calculateMetrics(positionedStack, mtu);

    // Update UI
    updateSummaryCards(metrics);
    showWarnings(warnings);
    renderByteGrid(positionedStack, mtu);
    renderLegend(positionedStack);
    renderBreakdownTable(positionedStack, metrics.payload, mtu);
    generateMssRecommendation(positionedStack, metrics, mtu);

    // Show results
    document.getElementById('resultsSection').style.display = 'block';

    // Scroll to results
    document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

/**
 * Initialize on page load
 */
document.addEventListener('DOMContentLoaded', function() {
    // Add enter key support for MTU input
    document.getElementById('mtuInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            visualizePacket();
        }
    });

    // MTU input change handler
    document.getElementById('mtuInput').addEventListener('change', function() {
        document.getElementById('mtuPreset').value = '';
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    });

    // Initialize with standard TCP/IP preset
    applyPreset('standard');

    console.log('Packet Header Visualizer initialized');
});
</script>