.. názov: Packet Header Visualizer
.. slimák: paketový vizualizér
.. dátum: 23.01.2026 12:00:00 UTC
.. tagy: networking, calculator, tool, packet, encapsulation, mtu, mss
.. kategória:
.. odkaz:
.. popis: Vizualizujte hlavičky sieťových paketov a réžiu zapuzdrenia, aby ste pochopili vplyv užitočného zaťaženia
.. typ: text
<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>Vizualizér hlavičky paketov</h2>
<p>Vizualizujte vplyv zapuzdrenia siete na vaše užitočné zaťaženie. Vytvorte si vlastný zásobník hlavičiek, aby ste videli, ako sa MTU spotrebúva réžiou protokolu. Podporuje vnorené tunely (VXLAN vnútri VXLAN, GRE vnútri IPsec atď.).</p>
<div class="config-grid">
<div class="config-panel">
<h4>Konfigurácia rámu</h4>
<div class="input-row">
<div class="input-group">
<label for="mtuInput">MTU (bajty):</label>
<input id="mtuInput" max="65535" min="576" step="1" type="number" value="1500"/>
</div>
<div class="input-group">
<label for="mtuPreset">Bežné MTU:</label>
<select id="mtuPreset" onchange="applyMtuPreset()">
<option value="">Vlastné</option>
<option selected="" value="1500">Ethernet (1500)</option>
<option value="1492">PPPoE (1492)</option>
<option value="1480">Tunel GRE (1480)</option>
<option value="1450">VXLAN (1450)</option>
<option value="1400">IPsec (1400)</option>
<option value="9000">Jumbo Frame (9000)</option>
<option value="9216">Jumbo Max (9216)</option>
</select>
</div>
</div>
<div class="preset-section">
<h4>Rýchle predvoľby</h4>
<div class="preset-buttons">
<button class="preset-btn" onclick="applyPreset('standard')" type="button">Štandardný TCP/IP</button>
<button class="preset-btn" onclick="applyPreset('vxlan')" type="button">Prekrytie VXLAN</button>
<button class="preset-btn" onclick="applyPreset('ipsec')" type="button">IPsec VPN</button>
<button class="preset-btn" onclick="applyPreset('gre')" type="button">Tunel GRE</button>
<button class="preset-btn" onclick="applyPreset('double-vxlan')" type="button">Dvojitý VXLAN</button>
<button class="preset-btn" onclick="applyPreset('vxlan-gre')" type="button">VXLAN v GRE</button>
<button class="preset-btn" onclick="applyPreset('clear')" type="button">Vymazať všetko</button>
</div>
</div>
</div>
<div class="config-panel">
<h4>Zostavovač záhlavia</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 bajtov)</option>
<option value="vlan">802.1Q VLAN Tag (4 bajty)</option>
<option value="qinq">Q-in-Q Double VLAN (8 bajtov)</option>
<option value="pppoe">PPPoE (8 bajtov)</option>
</optgroup>
<optgroup label="Layer 2.5 - MPLS">
<option value="mpls">Označenie MPLS (4 bajty)</option>
</optgroup>
<optgroup label="Layer 3 - Network">
<option value="ipv4">IPv4 (20 bajtov)</option>
<option value="ipv6">IPv6 (40 bajtov)</option>
</optgroup>
<optgroup label="Layer 4 - Transport">
<option value="tcp">TCP (20 bajtov)</option>
<option value="udp">UDP (8 bajtov)</option>
</optgroup>
<optgroup label="Tunnel Protocols">
<option value="vxlan">VXLAN (8 bajtov)</option>
<option value="geneve">ŽENEVA (8 bajtov)</option>
<option value="gre">GRE (4 bajty)</option>
<option value="gre-key">GRE s kľúčom (8 bajtov)</option>
<option value="nvgre">NVGRE (8 bajtov)</option>
<option value="ipsec">IPsec ESP (~50 bajtov)</option>
<option value="l2tp">L2TP (8 bajtov)</option>
<option value="gtp">GTP-U (8 bajtov)</option>
<option value="wireguard">WireGuard (32 bajtov)</option>
<option value="erspan">ERSPAN typ II (8 bajtov)</option>
</optgroup>
</select>
<button class="add-btn" onclick="addHeader()" type="button">+ Pridať</button>
</div>
<div class="tunnel-shortcuts">
<span style="color: rgba(255,255,255,0.7); font-size: 11px; margin-right: 5px;">Rýchle pridanie:</span>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('vxlan')" type="button">+ Skupina VXLAN</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('geneve')" type="button">+ Skupina GENEVE</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('gre')" type="button">+ Skupina GRE</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('ipsec')" type="button">+ Skupina IPsec</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('inner-tcp')" type="button">+ Vnútorné TCP/IP</button>
</div>
<div class="header-stack" id="headerStack">
<div class="stack-empty">Kliknite na „Pridať“ alebo použite predvoľby na vytvorenie zásobníka hlavičiek</div>
</div>
<div class="stack-summary" id="stackSummary">
<span>Hlavičky:<strong id="summaryCount">0</strong></span>
<span>Celková réžia:<strong id="summaryOverhead">0</strong>bajtov</span>
</div>
</div>
</div>
</div>
<button class="calc-button" onclick="visualizePacket()" type="button">Vizualizujte štruktúru paketov</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">Celková MTU</div>
<div class="card-value"><span id="valueMtu">1500</span><span class="card-unit">B</span></div>
<div class="card-subtext">Veľkosť rámu</div>
</div>
<div class="summary-card" id="cardOverhead">
<div class="card-label">Hlavička nad hlavou</div>
<div class="card-value"><span id="valueOverhead">54</span><span class="card-unit">B</span></div>
<div class="card-subtext" id="subtextOverhead">Všetky hlavičky spolu</div>
</div>
<div class="summary-card" id="cardPayload">
<div class="card-label">Dostupné užitočné zaťaženie</div>
<div class="card-value"><span id="valuePayload">1446</span><span class="card-unit">B</span></div>
<div class="card-subtext">Pre aplikačné dáta</div>
</div>
<div class="summary-card" id="cardEfficiency">
<div class="card-label">Efektívnosť</div>
<div class="card-value"><span id="valueEfficiency">96,4</span><span class="card-unit">%</span></div>
<div class="card-subtext">Užitočné zaťaženie / MTU</div>
</div>
<div class="summary-card" id="cardMss">
<div class="card-label">Vnútorný TCP MSS</div>
<div class="card-value"><span id="valueMss">1406</span><span class="card-unit">B</span></div>
<div class="card-subtext">Odporúčaná MSS</div>
</div>
</div>
<div class="warnings-panel" id="warningsPanel" style="display: none;">
<h4>Konfiguračné varovania</h4>
<div id="warningsList"></div>
</div>
<div class="visualization-panel">
<div class="panel-header">
<span>Vizualizácia na úrovni bajtov</span>
<span id="gridInfo">32 bajtov na riadok</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>Rozdelenie hlavičky</span>
</div>
<table class="breakdown-table">
<thead>
<tr>
<th>#</th>
<th>Vrstva</th>
<th>Protokol</th>
<th>Veľkosť</th>
<th>Rozsah bajtov</th>
<th>Popis</th>
</tr>
</thead>
<tbody id="breakdownBody">
</tbody>
</table>
</div>
<div class="mss-recommendation" id="mssRecommendation">
<h4>Odporúčanie MSS</h4>
<p id="mssText"></p>
</div>
</div>
<div class="description-section">
<h3>O vizualizácii hlavičky paketov</h3>
<p>Pochopenie toho, ako hlavičky protokolov spotrebúvajú vašu MTU, je rozhodujúce pre optimalizáciu výkonu siete. Každá vrstva zapuzdrenia pridáva réžiu, ktorá znižuje dostupný priestor pre aktuálne aplikačné dáta (užitočné zaťaženie).</p>
<p><strong>Prečo na tom záleží?</strong></p>
<ul>
<li><strong>Fragmentácia:</strong>Ak váš paket prekročí MTU cesty, bude fragmentovaný (IPv4) alebo zahodený (IPv6), čo spôsobí opakované prenosy a oneskorenie</li>
<li><strong>Priepustnosť:</strong>Väčšia réžia znamená menšie užitočné zaťaženie na paket, čím sa znižuje efektívna priepustnosť</li>
<li><strong>Ladenie MSS:</strong>Maximálna veľkosť segmentu TCP by mala brať do úvahy celé zapuzdrenie, aby sa predišlo fragmentácii</li>
<li><strong>Vnorené tunely:</strong>Technológie ako VXLAN, GRE a IPsec môžu byť stohované, čo výrazne zvyšuje réžiu</li>
</ul>
<p><strong>Odkaz na veľkosť hlavičky:</strong></p>
<ul>
<li><strong>Ethernet II:</strong>14 bajtov (Dst MAC 6 + Src MAC 6 + EtherType 2)</li>
<li><strong>802.1Q VLAN:</strong>4 bajty na značku</li>
<li><strong>MPLS:</strong>4 bajty na štítok</li>
<li><strong>IPv4:</strong>20 bajtov (minimum, až 60 s možnosťami)</li>
<li><strong>IPv6:</strong>40 bajtov (pevná základná hlavička)</li>
<li><strong>TCP:</strong>20 bajtov (minimum, až 60 s možnosťami)</li>
<li><strong>UDP:</strong>8 bajtov</li>
<li><strong>VXLAN/GENEVA:</strong>8 bajtov (iba hlavička tunela)</li>
<li><strong>GRE:</strong>4 bajty základné, 8 bajtov s kľúčom</li>
<li><strong>IPsec ESP:</strong>Typicky ~50 bajtov (líši sa podľa šifry)</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>