.. عنوان: Packet Header Visualizer
.. اسلگ: بسته-بصری ساز
.. تاریخ: 2026-01-23 12:00:00 UTC
.. برچسب ها: شبکه، ماشین حساب، ابزار، بسته، کپسوله سازی، mtu، mss
.. دسته بندی:
.. لینک:
.. توضیحات: سربرگ بسته های شبکه و سربار کپسوله سازی را برای درک تأثیر بار بار تجسم کنید
.. نوع: متن
<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>Packet Header Visualizer</h2>
<p>تأثیر محصورسازی شبکه را بر محموله خود تجسم کنید. یک پشته هدر سفارشی بسازید تا ببینید چگونه MTU توسط سربار پروتکل مصرف می شود. از تونل های تو در تو (VXLAN داخل VXLAN، GRE داخل IPsec و غیره) پشتیبانی می کند.</p>
<div class="config-grid">
<div class="config-panel">
<h4>پیکربندی قاب</h4>
<div class="input-row">
<div class="input-group">
<label for="mtuInput">MTU (بایت):</label>
<input id="mtuInput" max="65535" min="576" step="1" type="number" value="1500"/>
</div>
<div class="input-group">
<label for="mtuPreset">MTU های رایج:</label>
<select id="mtuPreset" onchange="applyMtuPreset()">
<option value="">سفارشی</option>
<option selected="" value="1500">اترنت (1500)</option>
<option value="1492">PPPoE (1492)</option>
<option value="1480">تونل GRE (1480)</option>
<option value="1450">VXLAN (1450)</option>
<option value="1400">IPsec (1400)</option>
<option value="9000">قاب جامبو (9000)</option>
<option value="9216">جامبو مکس (9216)</option>
</select>
</div>
</div>
<div class="preset-section">
<h4>تنظیمات از پیش تعیین شده سریع</h4>
<div class="preset-buttons">
<button class="preset-btn" onclick="applyPreset('standard')" type="button">TCP/IP استاندارد</button>
<button class="preset-btn" onclick="applyPreset('vxlan')" type="button">پوشش VXLAN</button>
<button class="preset-btn" onclick="applyPreset('ipsec')" type="button">IPsec VPN</button>
<button class="preset-btn" onclick="applyPreset('gre')" type="button">تونل GRE</button>
<button class="preset-btn" onclick="applyPreset('double-vxlan')" type="button">دو برابر VXLAN</button>
<button class="preset-btn" onclick="applyPreset('vxlan-gre')" type="button">VXLAN در GRE</button>
<button class="preset-btn" onclick="applyPreset('clear')" type="button">پاک کردن همه</button>
</div>
</div>
</div>
<div class="config-panel">
<h4>Header Stack Builder</h4>
<div class="stack-builder">
<div class="add-header-row">
<select id="headerSelect">
<optgroup label="Layer 2 - Data Link">
<option value="ethernet">اترنت II (14 بایت)</option>
<option value="vlan">برچسب VLAN 802.1Q (4 بایت)</option>
<option value="qinq">Q-in-Q Double VLAN (8 بایت)</option>
<option value="pppoe">PPPoE (8 بایت)</option>
</optgroup>
<optgroup label="Layer 2.5 - MPLS">
<option value="mpls">برچسب MPLS (4 بایت)</option>
</optgroup>
<optgroup label="Layer 3 - Network">
<option value="ipv4">IPv4 (20 بایت)</option>
<option value="ipv6">IPv6 (40 بایت)</option>
</optgroup>
<optgroup label="Layer 4 - Transport">
<option value="tcp">TCP (20 بایت)</option>
<option value="udp">UDP (8 بایت)</option>
</optgroup>
<optgroup label="Tunnel Protocols">
<option value="vxlan">VXLAN (8 بایت)</option>
<option value="geneve">GENEVE (8 بایت)</option>
<option value="gre">GRE (4 بایت)</option>
<option value="gre-key">GRE با کلید (8 بایت)</option>
<option value="nvgre">NVGRE (8 بایت)</option>
<option value="ipsec">IPsec ESP (~50 بایت)</option>
<option value="l2tp">L2TP (8 بایت)</option>
<option value="gtp">GTP-U (8 بایت)</option>
<option value="wireguard">WireGuard (32 بایت)</option>
<option value="erspan">ERSPAN نوع II (8 بایت)</option>
</optgroup>
</select>
<button class="add-btn" onclick="addHeader()" type="button">+ اضافه کردن</button>
</div>
<div class="tunnel-shortcuts">
<span style="color: rgba(255,255,255,0.7); font-size: 11px; margin-right: 5px;">اضافه کردن سریع:</span>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('vxlan')" type="button">+ گروه VXLAN</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('geneve')" type="button">+ گروه GENEVE</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('gre')" type="button">+ گروه GRE</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('ipsec')" type="button">+ گروه IPsec</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('inner-tcp')" type="button">+ TCP/IP داخلی</button>
</div>
<div class="header-stack" id="headerStack">
<div class="stack-empty">روی «افزودن» کلیک کنید یا از تنظیمات پیش‌فرض برای ساخت پشته سرصفحه خود استفاده کنید</div>
</div>
<div class="stack-summary" id="stackSummary">
<span>سرصفحه ها:<strong id="summaryCount">0</strong></span>
<span>کل سربار:<strong id="summaryOverhead">0</strong>بایت ها</span>
</div>
</div>
</div>
</div>
<button class="calc-button" onclick="visualizePacket()" type="button">تجسم ساختار بسته</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">کل MTU</div>
<div class="card-value"><span id="valueMtu">1500</span><span class="card-unit">B</span></div>
<div class="card-subtext">اندازه قاب</div>
</div>
<div class="summary-card" id="cardOverhead">
<div class="card-label">سربرگ</div>
<div class="card-value"><span id="valueOverhead">54</span><span class="card-unit">B</span></div>
<div class="card-subtext" id="subtextOverhead">همه سرصفحه ها ترکیب شده اند</div>
</div>
<div class="summary-card" id="cardPayload">
<div class="card-label">بار قابل دسترس</div>
<div class="card-value"><span id="valuePayload">1446</span><span class="card-unit">B</span></div>
<div class="card-subtext">برای داده های برنامه</div>
</div>
<div class="summary-card" id="cardEfficiency">
<div class="card-label">کارایی</div>
<div class="card-value"><span id="valueEfficiency">96.4</span><span class="card-unit">%</span></div>
<div class="card-subtext">بار / MTU</div>
</div>
<div class="summary-card" id="cardMss">
<div class="card-label">TCP MSS داخلی</div>
<div class="card-value"><span id="valueMss">1406</span><span class="card-unit">B</span></div>
<div class="card-subtext">MSS توصیه شده</div>
</div>
</div>
<div class="warnings-panel" id="warningsPanel" style="display: none;">
<h4>هشدارهای پیکربندی</h4>
<div id="warningsList"></div>
</div>
<div class="visualization-panel">
<div class="panel-header">
<span>تجسم در سطح بایت</span>
<span id="gridInfo">32 بایت در هر ردیف</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>هدر شکست</span>
</div>
<table class="breakdown-table">
<thead>
<tr>
<th>#</th>
<th>لایه</th>
<th>پروتکل</th>
<th>اندازه</th>
<th>محدوده بایت</th>
<th>توضیحات</th>
</tr>
</thead>
<tbody id="breakdownBody">
</tbody>
</table>
</div>
<div class="mss-recommendation" id="mssRecommendation">
<h4>توصیه MSS</h4>
<p id="mssText"></p>
</div>
</div>
<div class="description-section">
<h3>درباره تجسم هدر بسته</h3>
<p>درک اینکه چگونه هدرهای پروتکل MTU شما را مصرف می کنند برای بهینه سازی عملکرد شبکه بسیار مهم است. هر لایه کپسوله سازی سربار اضافه می کند که فضای موجود برای داده های برنامه واقعی (بار بار) را کاهش می دهد.</p>
<p><strong>چرا این مهم است؟</strong></p>
<ul>
<li><strong>تکه تکه شدن:</strong>اگر بسته شما از مسیر MTU فراتر رود، قطعه قطعه می شود (IPv4) یا حذف می شود (IPv6) و باعث ارسال مجدد و تأخیر می شود.</li>
<li><strong>توان عملیاتی:</strong>سربار بیشتر به معنای بار کمتر به ازای هر بسته، کاهش توان عملیاتی موثر است</li>
<li><strong>تنظیم MSS:</strong>حداکثر اندازه بخش TCP باید برای همه کپسوله‌سازی در نظر گرفته شود تا از تکه تکه شدن جلوگیری شود</li>
<li><strong>تونل های تو در تو:</strong>فن آوری هایی مانند VXLAN، GRE و IPsec را می توان روی هم قرار داد و به طور قابل توجهی سربار را ترکیب کرد.</li>
</ul>
<p><strong>مرجع اندازه سرصفحه:</strong></p>
<ul>
<li><strong>اترنت II:</strong>14 بایت (Dst MAC 6 + Src MAC 6 + EtherType 2)</li>
<li><strong>802.1Q VLAN:</strong>4 بایت در هر برچسب</li>
<li><strong>MPLS:</strong>4 بایت در هر برچسب</li>
<li><strong>IPv4:</strong>20 بایت (حداقل تا 60 بایت با گزینه)</li>
<li><strong>IPv6:</strong>40 بایت (هدر پایه ثابت)</li>
<li><strong>TCP:</strong>20 بایت (حداقل تا 60 بایت با گزینه)</li>
<li><strong>UDP:</strong>8 بایت</li>
<li><strong>VXLAN/GENEVE:</strong>8 بایت (فقط هدر تونل)</li>
<li><strong>GRE:</strong>4 بایت پایه، 8 بایت با کلید</li>
<li><strong>IPsec ESP:</strong>~50 بایت معمولی (بر اساس رمز متفاوت است)</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>