.. назва: MTU Path Discovery & Fragmentation Analyzer
.. slug: mtu-fragmentation-analyzer
.. дата: 2026-02-02 17:00:00 UTC
.. теги: мережа, mtu, фрагментація, калькулятор, інструмент
.. категорія: Інструменти
.. посилання:
.. опис: Діагностика та запобігання проблемам продуктивності, пов’язаним з MTU, за допомогою калькулятора інкапсуляції, візуалізатора фрагментації та засобу усунення несправностей PMTUD
.. тип: текст
<link href="/assets/css/tools-common.css" rel="stylesheet"/>
<style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        .calc-container {
            max-width: 1000px;
            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;
        }

        .preset-section {
            margin: 20px 0;
        }

        .preset-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 14px;
        }

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

        .preset-btn {
            padding: 10px 16px;
            background: rgba(255,255,255,0.15);
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .preset-btn:hover {
            background: rgba(255,255,255,0.25);
            border-color: rgba(255,255,255,0.5);
            transform: translateY(-2px);
        }

        .input-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 20px;
        }

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

        .input-group label {
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 14px;
            color: rgba(255,255,255,0.95);
        }

        .input-group input,
        .input-group select {
            padding: 14px;
            font-size: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            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.1);
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .btn-primary {
            background: #4CAF50;
            color: white;
        }

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

        .btn-secondary {
            background: rgba(255,255,255,0.2);
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
        }

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

        .encap-stack {
            margin-top: 15px;
            min-height: 50px;
        }

        .encap-layer {
            background: rgba(255,255,255,0.15);
            padding: 10px 15px;
            margin-bottom: 8px;
            border-radius: 6px;
            border-left: 4px solid #4CAF50;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }

        .encap-layer .name {
            font-weight: 600;
        }

        .encap-layer .overhead {
            background: #4CAF50;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 12px;
            margin-right: 10px;
        }

        .encap-layer .remove-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

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

        .section h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            border-left: 5px solid #667eea;
            padding-left: 15px;
            font-size: 20px;
        }

        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .result-card {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            transition: transform 0.2s ease;
        }

        .result-card:hover {
            transform: translateY(-2px);
        }

        .result-card.warning {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
            color: #000;
        }

        .result-card.error {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .result-card.neutral {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        }

        .result-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .status-text {
            font-size: 11px;
            opacity: 0.8;
            font-weight: normal;
            text-transform: capitalize;
        }

        .result-value {
            font-size: 42px;
            font-weight: bold;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
        }

        .result-detail {
            font-size: 13px;
            opacity: 0.9;
        }

        /* Packet Visualization */
        .packet-diagram {
            margin: 20px 0;
        }

        .packet {
            border: 2px solid #667eea;
            border-radius: 8px;
            margin-bottom: 15px;
            overflow: hidden;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .packet-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .packet-body {
            padding: 15px;
            background: #f8f9fa;
        }

        .packet-section {
            display: flex;
            margin-bottom: 8px;
            border-left: 3px solid #667eea;
            padding-left: 10px;
        }

        .packet-section-label {
            font-weight: bold;
            min-width: 150px;
            color: #555;
        }

        .packet-section-value {
            font-family: 'Courier New', monospace;
            color: #333;
        }

        .fragment-visual {
            display: flex;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .fragment-box {
            flex: 1;
            min-width: 200px;
            border: 2px solid #17a2b8;
            border-radius: 6px;
            padding: 15px;
            background: white;
            position: relative;
        }

        .fragment-box::before {
            content: attr(data-fragment);
            position: absolute;
            top: -12px;
            left: 10px;
            background: #17a2b8;
            color: white;
            padding: 2px 10px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: bold;
        }

        /* PMTUD Flowchart */
        .flowchart {
            margin: 20px 0;
        }

        .flow-node {
            background: white;
            border: 2px solid #667eea;
            border-radius: 8px;
            padding: 20px;
            margin: 15px auto;
            max-width: 600px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .flow-node:hover {
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            transform: scale(1.02);
        }

        .flow-node.decision {
            background: #fff3cd;
            border-color: #ffc107;
        }

        .flow-node.success {
            background: #d4edda;
            border-color: #28a745;
        }

        .flow-node.problem {
            background: #f8d7da;
            border-color: #dc3545;
        }

        .flow-node-title {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }

        .flow-node-content {
            color: #555;
            line-height: 1.6;
        }

        .flow-options {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .flow-btn {
            flex: 1;
            padding: 10px;
            border: 2px solid #667eea;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .flow-btn:hover {
            background: #667eea;
            color: white;
        }

        .flow-arrow {
            text-align: center;
            color: #667eea;
            font-size: 24px;
            margin: 10px 0;
        }

        .solution-box {
            background: #d1ecf1;
            border-left: 4px solid #17a2b8;
            padding: 15px;
            border-radius: 6px;
            margin-top: 15px;
        }

        .solution-box h4 {
            margin-top: 0;
            color: #0c5460;
        }

        .solution-box code {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid;
        }

        .alert-info {
            background: #d1ecf1;
            border-color: #17a2b8;
            color: #0c5460;
        }

        .alert-warning {
            background: #fff3cd;
            border-color: #ffc107;
            color: #856404;
        }

        .alert-danger {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        .data-row {
            display: flex;
            margin: 12px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            border-left: 3px solid #667eea;
        }

        .data-label {
            font-weight: bold;
            color: #555;
            min-width: 200px;
            flex-shrink: 0;
        }

        .data-value {
            color: #333;
            font-family: 'Courier New', monospace;
        }

        .hidden {
            display: none;
        }

        /* Encapsulation Stack Builder */
        .stack-builder {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }

        .stack-builder h4 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
        }

        .stack-container {
            min-height: 100px;
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 10px;
            background: #f8f9fa;
        }

        .stack-empty {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
            font-style: italic;
        }

        .stack-layer {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            cursor: move;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .stack-layer:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

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

        .layer-info {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .drag-handle {
            font-size: 20px;
            cursor: grab;
            user-select: none;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .layer-name {
            font-weight: 600;
            font-size: 16px;
        }

        .layer-overhead {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .overhead-value {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: bold;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 4px;
            min-width: 60px;
            text-align: center;
        }

        .overhead-edit {
            display: none;
        }

        .overhead-value.editing {
            display: none;
        }

        .overhead-value.editing + .overhead-edit {
            display: block;
        }

        .overhead-edit input {
            width: 60px;
            padding: 4px 8px;
            border: 2px solid white;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            text-align: center;
        }

        .layer-actions {
            display: flex;
            gap: 8px;
        }

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

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

        .layer-btn:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
        }

        .effective-mtu-display {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-top: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
        }

        .effective-mtu-display.warning {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
        }

        .effective-mtu-display.error {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .mtu-value-large {
            font-size: 36px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
        }

        .preset-badge {
            background: rgba(102, 126, 234, 0.1);
            border: 2px solid #667eea;
            color: #667eea;
            padding: 10px 15px;
            border-radius: 8px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .add-layer-section {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

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

            .preset-buttons {
                flex-direction: column;
            }

            .preset-btn {
                width: 100%;
            }

            .result-grid {
                grid-template-columns: 1fr;
            }

            .fragment-visual {
                flex-direction: column;
            }

            /* Minimum touch target size for mobile accessibility */
            .btn, button, .preset-btn, .layer-btn {
                min-height: 44px;
                min-width: 44px;
            }
        }

@media (max-width: 600px) {
    .input-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .calc-header h2 {
        font-size: 22px;
    }

    .calc-header p {
        font-size: 14px;
    }

    .btn {
        width: 100%;
        padding: 10px 16px;
    }

    .preset-buttons {
        flex-direction: column;
    }

    .preset-btn {
        width: 100%;
        padding: 10px 12px;
    }

    .fragment-box {
        margin-bottom: 10px;
    }

    .flow-node {
        max-width: 100%;
        margin: 10px auto;
    }

    .flow-node-title {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .calc-header {
        padding: 15px;
        margin-bottom: 20px;
    }

    .calc-header h2 {
        font-size: 20px;
    }

    .preset-buttons {
        gap: 8px;
    }

    .preset-btn {
        font-size: 12px;
        padding: 8px 12px;
    }

    .input-grid {
        gap: 10px;
    }

    .btn {
        font-size: 14px;
        padding: 10px 12px;
    }

    .flow-node {
        padding: 12px;
    }

    .flow-node-title {
        font-size: 14px;
    }

    .flow-node-content {
        font-size: 13px;
    }

    code {
        font-size: 12px;
    }

    .packet-section-label {
        font-size: 12px;
    }

    .packet-section-value {
        font-size: 12px;
    }
}
</style>
<div class="calc-container">
<div class="calc-header">
<h2>📦 Аналізатор виявлення та фрагментації шляху MTU</h2>
<p>Обчислюйте ефективний MTU після накладних витрат на інкапсуляцію, візуалізуйте фрагментацію та вирішуйте проблеми з PMTUD</p>
<div class="preset-section">
<label class="preset-label">Швидкі сценарії (попередні налаштування в один клік):</label>
<div aria-label="MTU preset scenarios" class="preset-buttons" role="group">
<button aria-label="Load Internet preset: 1500 MTU standard Ethernet" class="preset-btn" onclick="loadPreset('internet')">🌐 Інтернет (1500)</button>
<button aria-label="Load PPPoE DSL preset: 1492 MTU for DSL connections" class="preset-btn" onclick="loadPreset('pppoe')">📞 PPPoE DSL (1492)</button>
<button aria-label="Load Azure preset: 1400 MTU for Azure cloud" class="preset-btn" onclick="loadPreset('azure')">☁️ Лазурний (1400)</button>
<button aria-label="Load AWS preset: 9001 MTU jumbo frames for AWS VPC" class="preset-btn" onclick="loadPreset('aws')">☁️ AWS Jumbo (9001)</button>
<button aria-label="Load Google Cloud preset: 1460 MTU for GCP" class="preset-btn" onclick="loadPreset('gcp')">☁️ GCP (1460)</button>
<button aria-label="Load MPLS VPN preset: 1448 MTU for MPLS networks" class="preset-btn" onclick="loadPreset('mpls')">🔀 MPLS VPN (1448)</button>
</div>
</div>
<div class="input-group" style="max-width: 400px;">
<label for="baseMtu">Базовий MTU (байти):<span class="tooltip-trigger" data-tooltip="Maximum Transmission Unit - largest frame size before encapsulation. Standard Ethernet is 1500 bytes.">?</span>
</label>
<input id="baseMtu" max="9216" min="576" oninput="updateStackMTU()" type="number" value="1500"/>
</div>
Попередній значок (відображається, коли попередні налаштування активні)
<div class="preset-badge" id="presetBadge" style="display: none;">
<div>
<strong>📌 На основі:</strong> <span id="presetName">Лазурний</span>
</div>
<button class="btn btn-small btn-secondary" onclick="resetToPreset()">Скинути до попереднього налаштування</button>
</div>
Конструктор стека інкапсуляції
<div class="stack-builder">
<h4>🏗️ Стек інкапсуляції<span style="font-size: 14px; font-weight: normal; color: #666;">(Перетягніть, щоб змінити порядок)</span></h4>
<div class="stack-container" id="stackContainer">
<div class="stack-empty">Немає доданих шарів інкапсуляції. Додайте шар нижче, щоб побачити, як він впливає на MTU.</div>
</div>
Ефективний дисплей MTU
<div class="effective-mtu-display" id="effectiveMtuDisplay">
<div style="font-size: 14px; opacity: 0.9;">MTU ефективного корисного навантаження</div>
<div class="mtu-value-large" id="stackMtuValue">1500</div>
<div style="font-size: 14px; opacity: 0.9;">байтів, доступних для даних</div>
</div>
Додати розділ шару
<div class="add-layer-section">
<label style="display: block; margin-bottom: 10px; font-weight: 600;">Додайте рівень інкапсуляції:</label>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<select id="encapType" style="flex: 1; min-width: 200px; padding: 10px; border: 2px solid #ced4da; border-radius: 6px;">
<option value="">Виберіть інкапсуляцію...</option>
<option value="vlan">802.1Q VLAN (+4 байти)</option>
<option value="qinq">Подвійний тег QinQ (+8 байт)</option>
<option value="mpls1">Мітка MPLS (+4 байти)</option>
<option value="mpls2">Мітки MPLS 2 (+8 байт)</option>
<option value="mpls3">Мітки MPLS 3 (+12 байт)</option>
<option value="gre">GRE (+24 байти)</option>
<option value="ipsec">IPsec ESP (+60 байт у середньому)</option>
<option value="vxlan">VXLAN (+50 байт)</option>
<option value="l2tp">L2TPv3 (+12 байт)</option>
<option value="pppoe">PPPoE (+8 байт)</option>
<option value="geneve">GENEVE (+8 байт бази)</option>
<option value="nvgre">NVGRE (+42 байти)</option>
</select>
<button class="btn btn-primary" id="addEncap" onclick="addStackLayer()">+ Додати шар</button>
</div>
</div>
</div>
<div class="encap-stack" id="encapStack"></div>
</div>
Елементи керування сеансом
<div class="session-controls" id="sessionControls">
<span class="session-status" id="sessionStatus">Не збережено</span>
<button class="btn btn-small btn-secondary" onclick="clearSession()">Очистити збережені дані</button>
</div>
Відновити банер
<div class="alert alert-info" id="restoreBanner" style="display: none;">
<strong>Попередній сеанс знайдено!</strong>
<button class="btn btn-small btn-primary" onclick="restoreSession()" style="margin: 0 10px;">Відновити</button>
<button class="btn btn-small btn-secondary" onclick="dismissRestore()">Почніть заново</button>
</div>
Як користуватися панеллю
<div class="how-to-use">
<div class="how-to-use-header">
<span>📖 Як користуватися цим інструментом</span>
<span class="toggle-icon">▼</span>
</div>
<div class="how-to-use-content">
<ul>
<li><strong>Швидкий старт:</strong>Натисніть кнопку попереднього налаштування (Інтернет, PPPoE, Azure тощо), щоб завантажити типові сценарії</li>
<li><strong>Спеціальний розрахунок:</strong>Встановіть базовий MTU та додайте шари інкапсуляції по одному</li>
<li><strong>Результати:</strong>Перегляньте ефективне корисне навантаження MTU, рекомендований TCP MSS і розподіл накладних витрат</li>
<li><strong>Фрагментація:</strong>Якщо MTU &lt; 1500, автоматично з’являється візуальна діаграма фрагментації</li>
<li><strong>Усунення несправностей:</strong>Використовуйте блок-схему PMTUD для діагностики проблем виявлення Path MTU</li>
<li><strong>Вплив на продуктивність:</strong>Калькулятор втрати пропускної здатності показує реальну вартість фрагментації</li>
</ul>
</div>
</div>
Результати MTU
<div aria-atomic="false" aria-live="polite" class="section" id="resultsSection">
<h3>Результати розрахунку MTU</h3>
<div aria-label="MTU calculation results" class="result-grid" role="region">
<div class="result-card" id="mtuCard">
<div class="result-label">MTU ефективного корисного навантаження</div>
<div class="result-value" id="effectiveMtu">1500</div>
<div class="result-detail">байтів, доступних для даних</div>
</div>
<div class="result-card neutral">
<div class="result-label">Загальні накладні витрати</div>
<div class="result-value" id="totalOverhead">0</div>
<div class="result-detail">споживаних байт</div>
</div>
<div class="result-card" id="mssCard">
<div class="result-label">Рекомендований TCP MSS</div>
<div class="result-value" id="tcpMss">1460</div>
<div class="result-detail">MTU - 40 (заголовки IP+TCP)</div>
</div>
</div>
<div class="hidden" id="mtuWarning"></div>
<div style="margin-top: 20px;">
<div class="data-row">
<span class="data-label">Базовий MTU:</span>
<span class="data-value" id="displayBaseMtu">1500 байт</span>
</div>
<div class="data-row">
<span class="data-label">Накладні витрати на інкапсуляцію:</span>
<span class="data-value" id="displayOverhead">0 байт</span>
</div>
<div class="data-row">
<span class="data-label">Ефективний MTU:</span>
<span class="data-value" id="displayEffective">1500 байт</span>
</div>
<div class="data-row">
<span class="data-label">Заголовки IP + TCP:</span>
<span class="data-value">40 байт (20 IP + 20 TCP)</span>
</div>
<div class="data-row">
<span class="data-label">Максимальне корисне навантаження TCP:</span>
<span class="data-value" id="displayPayload">1460 байт</span>
</div>
<div class="data-row">
<span class="data-label">Ефективність:</span>
<span class="data-value" id="displayEfficiency">97,3%</span>
</div>
</div>
</div>
Візуалізація фрагментації
<div class="section hidden" id="fragmentationSection">
<h3>📊 Візуалізація фрагментації</h3>
<div class="alert alert-warning">
<strong>⚠️ Виявлено фрагментацію:</strong>Ваша поточна конфігурація MTU призведе до фрагментації IP-адреси, що вплине на продуктивність.</div>
<div id="fragmentationDetails"></div>
<div class="packet-diagram" id="packetDiagram"></div>
</div>
Калькулятор втрати пропускної здатності (функція P0)
<div class="section" id="bandwidthWasteSection">
<h3>💸 Калькулятор втрати пропускної здатності</h3>
<div class="alert alert-info">
<strong>ℹ️ Вплив на продуктивність:</strong>Обчисліть реальну вартість фрагментації пропускної здатності вашої мережі.</div>
<div class="input-grid">
<div class="input-group">
<label for="packetsPerSec">Пакетів за секунду:<span class="tooltip-trigger" data-tooltip="Expected packet rate. For example, a 1Gbps link at 1500-byte MTU can handle ~82,000 pps.">?</span>
</label>
<input id="packetsPerSec" max="1000000" min="1" type="number" value="10000"/>
</div>
<div class="input-group">
<label for="avgPacketSize">Середній розмір пакета (байти):<span class="tooltip-trigger" data-tooltip="Average size of packets on your network. Web traffic is often 1200-1500 bytes.">?</span>
</label>
<input id="avgPacketSize" max="9000" min="64" type="number" value="1400"/>
</div>
<div class="input-group">
<label for="linkSpeed">Швидкість з'єднання (Мбіт/с):<span class="tooltip-trigger" data-tooltip="Your network link capacity (e.g., 1000 for 1 Gigabit).">?</span>
</label>
<input id="linkSpeed" max="100000" min="1" type="number" value="1000"/>
</div>
</div>
<button class="btn btn-primary" onclick="calculateBandwidthWaste()">Розрахувати вплив</button>
<div aria-atomic="true" aria-live="polite" class="hidden" id="bandwidthWasteResults" style="margin-top: 20px;">
<div aria-label="Bandwidth waste analysis results" class="result-grid" role="region">
<div class="result-card warning">
<div class="result-label">⚠ Витрачена пропускна здатність<span class="status-text">(УВАГА)</span></div>
<div class="result-value" id="wastedMbps">0</div>
<div class="result-detail">Мбіт/с втрачено через фрагментацію</div>
</div>
<div class="result-card error">
<div class="result-label">✗ Відсоток накладних витрат<span class="status-text">(Критично)</span></div>
<div class="result-value" id="wastedPercent">0%</div>
<div class="result-detail">загальної пропускної здатності</div>
</div>
<div class="result-card warning">
<div class="result-label">⚠ Додаткові фрагменти<span class="status-text">(УВАГА)</span></div>
<div class="result-value" id="extraFragments">0</div>
<div class="result-detail">додаткових пакетів за секунду</div>
</div>
</div>
<div class="data-row">
<span class="data-label">Фрагменти в оригінальному пакеті:</span>
<span class="data-value" id="fragmentsPerPacket">1</span>
</div>
<div class="data-row">
<span class="data-label">Накладні витрати на пакет:</span>
<span class="data-value" id="overheadPerPacket">0 байт</span>
</div>
<div class="data-row">
<span class="data-label">Загальні витрати за секунду:</span>
<span class="data-value" id="totalOverheadPerSec">0 байт</span>
</div>
<div class="data-row">
<span class="data-label">Рекомендована дія:</span>
<span class="data-value" id="recommendation">Збільште MTU або ввімкніть PMTUD</span>
</div>
</div>
</div>
Інтерактивний засіб усунення несправностей PMTUD
<div class="section">
<h3>🔍 Інтерактивний засіб усунення несправностей Path MTU Discovery (PMTUD).</h3>
<div class="alert alert-info">
<strong>ℹ️ Інтерактивна блок-схема:</strong>Щоб усунути проблеми з PMTUD, клацніть наведені нижче кроки діагностики.</div>
<div class="flowchart" id="pmtudFlowchart">
<div class="flow-node decision" id="step1" onclick="showStep(2)">
<div class="flow-node-title">🚀 Початок: у вас втрата пакетів або низька продуктивність?</div>
<div class="flow-node-content">Натисніть, щоб почати процес діагностики. Ми розглянемо систематичні кроки з усунення несправностей.</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(2)">Почати діагностику →</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow1">↓</div>
<div class="flow-node decision hidden" id="step2">
<div class="flow-node-title">❓ Чи можете ви пінгувати з малими пакетами (64 байти)?</div>
<div class="flow-node-content">Тест:<code>ping -s 64 destination</code>(Linux) або<code>ping -l 64 destination</code>(Windows)</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(2.1)">✅ Так</button>
<button class="flow-btn" onclick="event.stopPropagation(); showStep(2.2)">❌ Ні</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow2">↓</div>
<div class="flow-node problem hidden" id="step2.2">
<div class="flow-node-title">🔴 Проблема рівня 1/2 – не пов’язана з MTU</div>
<div class="flow-node-content">Якщо невеликі пакети не вдаються, це проблема підключення, а не MTU/фрагментація.</div>
<div class="solution-box">
<h4>Етапи усунення несправностей:</h4>
<ul>
<li>Перевірте фізичні з’єднання та цілісність кабелю</li>
<li>Перевірте статус інтерфейсу:<code>show interface</code></li>
<li>Перевірте наявність помилок/відкидів на інтерфейсах</li>
<li>Перевірте таблиці маршрутизації та ARP</li>
<li>Перевірте правила брандмауера та ACL</li>
</ul>
</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Перезапустити</button>
</div>
<div class="flow-node decision hidden" id="step2.1">
<div class="flow-node-title">❓ Чи можете ви пінгувати з великими пакетами (1472 байти)?</div>
<div class="flow-node-content">Тест:<code>ping -s 1472 destination</code>(Linux) або<code>ping -l 1472 destination</code>(Windows)<br/><small>Примітка: 1472 даних + 20 IP + 8 ICMP = пакет 1500 байт</small>
</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(3.1)">✅ Так</button>
<button class="flow-btn" onclick="event.stopPropagation(); showStep(3.2)">❌ Ні</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow3">↓</div>
<div class="flow-node success hidden" id="step3.1">
<div class="flow-node-title">✅ Проблем з MTU не виявлено</div>
<div class="flow-node-content">Великі пакети працюють добре. Ваша конфігурація MTU правильна. Шукайте інші проблеми з продуктивністю.</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Перезапустити</button>
</div>
<div class="flow-node decision hidden" id="step3.2">
<div class="flow-node-title">❓ Чи можете ви пінгувати з установленим бітом DF (Don't Fragment)?</div>
<div class="flow-node-content">Тест:<code>ping -M do -s 1472 destination</code>(Linux) або<code>ping -f -l 1472 destination</code>(Windows)</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(4.1)">✅ Так</button>
<button class="flow-btn" onclick="event.stopPropagation(); showStep(4.2)">❌ Ні</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow4">↓</div>
<div class="flow-node problem hidden" id="step4.2">
<div class="flow-node-title">🔴 Виявлено чорну діру PMTUD!</div>
<div class="flow-node-content">Повідомлення ICMP «Потрібна фрагментація» (тип 3, код 4) фільтруються десь на шляху.</div>
<div class="solution-box">
<h4>рішення:</h4>
<strong>1. Закріплення TCP MSS (рекомендовано):</strong>
<pre style="background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; margin: 10px 0;">
! Cisco IOS/IOS-XE
interface GigabitEthernet0/0
 ip tcp adjust-mss <span id="clampMss" style="color: #ce9178;">1460</span>

! Juniper JunOS
set interfaces ge-0/0/0 unit 0 family inet tcp-mss <span style="color: #ce9178;">1460</span>

# Linux iptables
iptables -t mangle -A FORWARD -p tcp --tcp-flags SYN,RST SYN \\
  -j TCPMSS --set-mss <span style="color: #ce9178;">1460</span></pre>
<strong>2. Дозволити ICMP типу 3, код 4:</strong>
<pre style="background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; margin: 10px 0;">
! Cisco ACL
permit icmp any any packet-too-big

# iptables
iptables -A INPUT -p icmp --icmp-type fragmentation-needed -j ACCEPT</pre>
<strong>3. Зменшіть MTU інтерфейсу:</strong>
<pre style="background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; margin: 10px 0;">
! Cisco
interface GigabitEthernet0/0
 ip mtu <span id="reducedMtu" style="color: #ce9178;">1400</span></pre>
</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Перезапустити</button>
</div>
<div class="flow-node success hidden" id="step4.1">
<div class="flow-node-title">✅ PMTUD працює правильно</div>
<div class="flow-node-content">Path MTU Discovery функціонує належним чином. Повідомлення ICMP не фільтруються.</div>
<div class="solution-box">
<h4>Рекомендовані дії:</h4>
<ul>
<li>Використовуйте затиск TCP MSS для оптимальної продуктивності</li>
<li>За потреби розгляньте можливість зменшення MTU на інтерфейсах</li>
<li>Відстежуйте втрату пакетів і повторні передачі</li>
<li>Задокументуйте налаштування MTU для подальшого використання</li>
</ul>
</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Перезапустити</button>
</div>
</div>
</div>
Приклади конфігурації
<div class="section">
<h3>🔧 Приклади конфігурації</h3>
<div class="alert alert-info">
<strong>ℹ️ TCP MSS Clamping:</strong>Налаштуйте їх на маршрутизаторах, щоб запобігти фрагментації.</div>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
<div style="color: #6a9955; margin-bottom: 10px;">! Cisco IOS/IOS-XE</div>
<code style="display: block; font-family: 'Courier New', monospace;">
interface GigabitEthernet0/0<br/>
 ip tcp adjust-mss <span id="ciscoMss" style="color: #ce9178;">1460</span>
</code>
</div>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
<div style="color: #6a9955; margin-bottom: 10px;">! Ялівець ЮНОС</div>
<code style="display: block; font-family: 'Courier New', monospace;">
set interfaces ge-0/0/0 unit 0 family inet mtu <span id="juniperMtu" style="color: #ce9178;">1500</span><br/>
set interfaces ge-0/0/0 unit 0 family inet tcp-mss <span id="juniperMss" style="color: #ce9178;">1460</span>
</code>
</div>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px;">
<div style="color: #6a9955; margin-bottom: 10px;"># Linux iptables</div>
<code style="display: block; font-family: 'Courier New', monospace;">
iptables -t mangle -A FORWARD -p tcp --tcp-flags SYN,RST SYN -j TCPMSS --set-mss <span id="linuxMss" style="color: #ce9178;">1460</span>
</code>
</div>
</div>
Аналіз Jumbo Frame
<div class="section">
<h3>🚀 Аналіз великих кадрів</h3>
<div class="alert alert-info">
<strong>ℹ️ Великі кадри:</strong>Більші розміри MTU підвищують пропускну здатність для мереж зберігання даних і центрів обробки даних.</div>
<div style="margin-top: 20px;">
<div class="data-row">
<span class="data-label">Стандартна ефективність рами:</span>
<span class="data-value" id="stdEfficiency">97,3% (1460/1500)</span>
</div>
<div class="data-row">
<span class="data-label">Рама Jumbo (9000 MTU):</span>
<span class="data-value">ККД 99,6% (8960/9000)</span>
</div>
<div class="data-row">
<span class="data-label">Кількість кадрів на ГБ (поточна):</span>
<span class="data-value" id="framesPerGb">~731 000 кадрів</span>
</div>
<div class="data-row">
<span class="data-label">Кількість кадрів на ГБ (Jumbo 9000):</span>
<span class="data-value">~119 000 кадрів (84% зменшення)</span>
</div>
<div class="data-row">
<span class="data-label">Економія процесора (Jumbo проти стандартного):</span>
<span class="data-value" id="cpuSavings">~84% менше переривань</span>
</div>
</div>
<div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 6px;">
<h4 style="margin-top: 0;">Рекомендації:</h4>
<ul style="margin: 10px 0; padding-left: 20px; line-height: 1.8;">
<li><strong>Стандарт 1500 MTU:</strong>Інтернет, загальні кампусні мережі, змішане середовище</li>
<li><strong>Baby Jumbos (2000):</strong>Metro Ethernet, деякі мережі MPLS</li>
<li><strong>Рамки Jumbo (9000):</strong>iSCSI, NFS, сервер-сервер, структури центру обробки даних</li>
<li><strong>Super Jumbos (9216):</strong>Мережі зберігання даних, центр обробки даних 10GbE+</li>
</ul>
</div>
</div>
</div>
<script>
    let encapsulationLayers = [];
    let baseMtu = 1500;
    let calculationTimeout;
    let activePreset = null;
    let draggedElement = null;

    const encapsulations = {
        vlan: { name: '802.1Q VLAN', overhead: 4 },
        qinq: { name: 'QinQ Double Tag', overhead: 8 },
        mpls1: { name: 'MPLS Label', overhead: 4 },
        mpls2: { name: 'MPLS 2 Labels', overhead: 8 },
        mpls3: { name: 'MPLS 3 Labels', overhead: 12 },
        gre: { name: 'GRE', overhead: 24 },
        ipsec: { name: 'IPsec ESP', overhead: 60 },
        vxlan: { name: 'VXLAN', overhead: 50 },
        l2tp: { name: 'L2TPv3', overhead: 12 },
        pppoe: { name: 'PPPoE', overhead: 8 },
        geneve: { name: 'GENEVE', overhead: 8 },
        nvgre: { name: 'NVGRE', overhead: 42 }
    };

    const presets = {
        internet: { name: 'Internet (1500)', mtu: 1500, layers: [] },
        pppoe: { name: 'PPPoE DSL (1492)', mtu: 1492, layers: ['pppoe'] },
        azure: { name: 'Azure (1400)', mtu: 1400, layers: [] },
        aws: { name: 'AWS Jumbo (9001)', mtu: 9001, layers: [] },
        gcp: { name: 'GCP (1460)', mtu: 1460, layers: [] },
        mpls: { name: 'MPLS VPN (1448)', mtu: 1500, layers: ['mpls1', 'vlan'] }
    };

    // Stack Builder Functions
    function addStackLayer() {
        const select = document.getElementById('encapType');
        const layerType = select.value;

        if (!layerType) {
            alert('Please select an encapsulation type');
            return;
        }

        const encap = encapsulations[layerType];
        const layer = {
            id: Date.now(),
            type: layerType,
            name: encap.name,
            overhead: encap.overhead
        };

        encapsulationLayers.push(layer);
        activePreset = null; // Modified from preset
        renderStack();
        updateStackMTU();

        // Reset select
        select.value = '';
    }

    function renderStack() {
        const container = document.getElementById('stackContainer');

        if (encapsulationLayers.length === 0) {
            container.innerHTML = '<div class="stack-empty">No encapsulation layers added. Add a layer below to see how it affects MTU.</div>';
            return;
        }

        container.innerHTML = encapsulationLayers.map((layer, index) => `
            <div class="stack-layer" draggable="true" data-layer-id="${layer.id}" data-index="${index}">
                <div class="layer-info">
                    <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
                    <span class="layer-name">${layer.name}</span>
                </div>
                <div class="layer-overhead">
                    <span class="overhead-value" id="overhead-${layer.id}" onclick="editOverhead(${layer.id})">+${layer.overhead} bytes</span>
                    <span class="overhead-edit">
                        <input type="number" id="edit-${layer.id}" value="${layer.overhead}" min="0" max="200"
                               onblur="saveOverhead(${layer.id})" onkeypress="if(event.key==='Enter') saveOverhead(${layer.id})">
                    </span>
                </div>
                <div class="layer-actions">
                    <button class="layer-btn" onclick="editOverhead(${layer.id})" title="Edit overhead value">✏️ Edit</button>
                    <button class="layer-btn" onclick="removeLayer(${layer.id})" title="Remove layer">🗑️ Remove</button>
                </div>
            </div>
        `).join('');

        // Add drag and drop event listeners
        setupDragAndDrop();
    }

    function setupDragAndDrop() {
        const layers = document.querySelectorAll('.stack-layer');

        layers.forEach(layer => {
            layer.addEventListener('dragstart', handleDragStart);
            layer.addEventListener('dragover', handleDragOver);
            layer.addEventListener('drop', handleDrop);
            layer.addEventListener('dragend', handleDragEnd);
        });
    }

    function handleDragStart(e) {
        draggedElement = this;
        this.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.dataTransfer.dropEffect = 'move';
        return false;
    }

    function handleDrop(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }

        if (draggedElement !== this) {
            const draggedIndex = parseInt(draggedElement.dataset.index);
            const targetIndex = parseInt(this.dataset.index);

            // Reorder array
            const [removed] = encapsulationLayers.splice(draggedIndex, 1);
            encapsulationLayers.splice(targetIndex, 0, removed);

            renderStack();
            updateStackMTU();
        }

        return false;
    }

    function handleDragEnd(e) {
        this.classList.remove('dragging');
    }

    function editOverhead(layerId) {
        const valueSpan = document.getElementById(`overhead-${layerId}`);
        const input = document.getElementById(`edit-${layerId}`);

        valueSpan.classList.add('editing');
        input.focus();
        input.select();
    }

    function saveOverhead(layerId) {
        const input = document.getElementById(`edit-${layerId}`);
        const newValue = parseInt(input.value);

        if (newValue >= 0 && newValue <= 200) {
            const layer = encapsulationLayers.find(l => l.id === layerId);
            layer.overhead = newValue;
            activePreset = null; // Modified from preset
        }

        renderStack();
        updateStackMTU();
    }

    function removeLayer(layerId) {
        encapsulationLayers = encapsulationLayers.filter(l => l.id !== layerId);
        activePreset = null; // Modified from preset
        renderStack();
        updateStackMTU();
    }

    function updateStackMTU() {
        baseMtu = parseInt(document.getElementById('baseMtu').value);
        const totalOverhead = encapsulationLayers.reduce((sum, layer) => sum + layer.overhead, 0);
        const effectiveMtu = baseMtu - totalOverhead;

        // Update display
        const display = document.getElementById('effectiveMtuDisplay');
        const value = document.getElementById('stackMtuValue');

        value.textContent = effectiveMtu;

        // Color code based on MTU
        display.classList.remove('warning', 'error');
        if (effectiveMtu < 1400) {
            display.classList.add('error');
        } else if (effectiveMtu < 1460) {
            display.classList.add('warning');
        }

        // Update preset badge
        const badge = document.getElementById('presetBadge');
        if (activePreset) {
            badge.style.display = 'flex';
            document.getElementById('presetName').textContent = presets[activePreset].name;
        } else {
            badge.style.display = 'none';
        }

        // Trigger main calculate function
        calculate();
    }

    function resetToPreset() {
        if (activePreset) {
            loadPreset(activePreset);
        }
    }

    function loadPreset(preset) {
        const config = presets[preset];
        activePreset = preset;

        // Set base MTU
        document.getElementById('baseMtu').value = config.mtu;
        baseMtu = config.mtu;

        // Clear and rebuild layers
        encapsulationLayers = [];
        config.layers.forEach(layerType => {
            const encap = encapsulations[layerType];
            encapsulationLayers.push({
                id: Date.now() + Math.random(),
                type: layerType,
                name: encap.name,
                overhead: encap.overhead
            });
        });

        renderStack();
        updateStackMTU();
    }

    function addEncapsulationLayer(type) {
        if (!type || !encapsulations[type]) return;

        encapsulationLayers.push({
            type: type,
            name: encapsulations[type].name,
            overhead: encapsulations[type].overhead
        });
    }

    function updateEncapsulationDisplay() {
        const stack = document.getElementById('encapStack');

        if (encapsulationLayers.length === 0) {
            stack.innerHTML = '<p style="color: rgba(255,255,255,0.7); font-size: 14px; margin: 10px 0;">No encapsulation layers added. Base MTU will be used.</p>';
            return;
        }

        stack.innerHTML = encapsulationLayers.map((layer, index) => `
            <div class="encap-layer">
                <span class="name">${layer.name}</span>
                <div>
                    <span class="overhead">+${layer.overhead} bytes</span>
                    <button class="remove-btn" onclick="removeEncapsulation(${index})">×</button>
                </div>
            </div>
        `).join('');
    }

    function removeEncapsulation(index) {
        encapsulationLayers.splice(index, 1);
        updateEncapsulationDisplay();
        scheduleCalculation();
    }

    function scheduleCalculation() {
        clearTimeout(calculationTimeout);
        calculationTimeout = setTimeout(calculate, 300);
    }

    function calculate() {
        baseMtu = parseInt(document.getElementById('baseMtu').value) || 1500;

        const totalOverhead = encapsulationLayers.reduce((sum, layer) => sum + layer.overhead, 0);
        const effectiveMtu = baseMtu - totalOverhead;
        const tcpMss = effectiveMtu - 40;

        // Update displays
        document.getElementById('effectiveMtu').textContent = effectiveMtu;
        document.getElementById('totalOverhead').textContent = totalOverhead;
        document.getElementById('tcpMss').textContent = tcpMss;

        document.getElementById('displayBaseMtu').textContent = baseMtu + ' bytes';
        document.getElementById('displayOverhead').textContent = totalOverhead + ' bytes';
        document.getElementById('displayEffective').textContent = effectiveMtu + ' bytes';
        document.getElementById('displayPayload').textContent = tcpMss + ' bytes';

        const efficiency = ((tcpMss / effectiveMtu) * 100).toFixed(1);
        document.getElementById('displayEfficiency').textContent = efficiency + '%';

        // Update config examples
        document.getElementById('ciscoMss').textContent = tcpMss;
        document.getElementById('juniperMtu').textContent = effectiveMtu;
        document.getElementById('juniperMss').textContent = tcpMss;
        document.getElementById('linuxMss').textContent = tcpMss;
        document.getElementById('clampMss').textContent = tcpMss;
        document.getElementById('reducedMtu').textContent = effectiveMtu;

        // Update efficiency calcs
        document.getElementById('stdEfficiency').textContent = `${efficiency}% (${tcpMss}/${effectiveMtu})`;

        const framesPerGb = Math.ceil((1024 * 1024 * 1024) / tcpMss);
        document.getElementById('framesPerGb').textContent = `~${framesPerGb.toLocaleString()} frames`;

        const jumboFrames = Math.ceil((1024 * 1024 * 1024) / 8960);
        const cpuReduction = ((1 - (jumboFrames / framesPerGb)) * 100).toFixed(0);
        document.getElementById('cpuSavings').textContent = `~${cpuReduction}% fewer interrupts`;

        // Color code results
        const mtuCard = document.getElementById('mtuCard');
        const mssCard = document.getElementById('mssCard');
        const warningDiv = document.getElementById('mtuWarning');

        if (effectiveMtu < 1400) {
            mtuCard.className = 'result-card error';
            mssCard.className = 'result-card error';
            mtuCard.querySelector('.result-label').innerHTML = '✗ Effective Payload MTU <span class="status-text">(Critical)</span>';
            mssCard.querySelector('.result-label').innerHTML = '✗ Recommended TCP MSS <span class="status-text">(Critical)</span>';
            warningDiv.className = 'alert alert-danger';
            warningDiv.innerHTML = '<strong>⚠️ Critical:</strong> Effective MTU is below 1400 bytes. Severe fragmentation expected. Consider increasing base MTU or removing encapsulation layers.';
            warningDiv.classList.remove('hidden');
        } else if (effectiveMtu < 1460) {
            mtuCard.className = 'result-card warning';
            mssCard.className = 'result-card warning';
            mtuCard.querySelector('.result-label').innerHTML = '⚠ Effective Payload MTU <span class="status-text">(Warning)</span>';
            mssCard.querySelector('.result-label').innerHTML = '⚠ Recommended TCP MSS <span class="status-text">(Warning)</span>';
            warningDiv.className = 'alert alert-warning';
            warningDiv.innerHTML = '<strong>⚠️ Warning:</strong> Effective MTU is below 1460 bytes. Fragmentation may occur. TCP MSS clamping is recommended.';
            warningDiv.classList.remove('hidden');
        } else {
            mtuCard.className = 'result-card';
            mssCard.className = 'result-card';
            mtuCard.querySelector('.result-label').innerHTML = '✓ Effective Payload MTU <span class="status-text">(Good)</span>';
            mssCard.querySelector('.result-label').innerHTML = '✓ Recommended TCP MSS <span class="status-text">(Good)</span>';
            warningDiv.classList.add('hidden');
        }

        // Show fragmentation analysis if needed
        const fragSection = document.getElementById('fragmentationSection');
        if (effectiveMtu < 1500 && effectiveMtu < baseMtu) {
            fragSection.classList.remove('hidden');
            showFragmentationVisualization(1500, effectiveMtu);
        } else {
            fragSection.classList.add('hidden');
        }
    }

    function showFragmentationVisualization(originalSize, pathMtu) {
        const maxPayload = pathMtu - 20; // IP header
        const fragmentCount = Math.ceil(originalSize / maxPayload);
        const overhead = (fragmentCount * 20) / originalSize * 100;

        const details = document.getElementById('fragmentationDetails');
        details.innerHTML = `
            <div class="data-row">
                <span class="data-label">Original Packet Size:</span>
                <span class="data-value">${originalSize} bytes</span>
            </div>
            <div class="data-row">
                <span class="data-label">Path MTU Bottleneck:</span>
                <span class="data-value">${pathMtu} bytes</span>
            </div>
            <div class="data-row">
                <span class="data-label">Number of Fragments:</span>
                <span class="data-value">${fragmentCount} fragments</span>
            </div>
            <div class="data-row">
                <span class="data-label">Fragment Overhead:</span>
                <span class="data-value">${overhead.toFixed(1)}% (${fragmentCount} × 20 byte IP headers)</span>
            </div>
        `;

        // Add DF bit impact info after overhead calculation
        details.innerHTML += `
            <div style="margin-top: 15px; padding: 12px; background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 4px;">
                <strong style="color: #e65100;">⚠️ Don't Fragment (DF) Bit Consideration</strong>
                <div style="margin-top: 8px; font-size: 13px; color: #666;">
                    <p>If DF=1 (Don't Fragment flag set):</p>
                    <ul style="margin: 6px 0; padding-left: 20px; line-height: 1.6;">
                        <li>Router <strong>cannot</strong> fragment this packet</li>
                        <li>If packet size > path MTU, router sends ICMP "Fragmentation Needed" (Type 3, Code 4)</li>
                        <li>Sender must reduce packet size and retry (PMTUD)</li>
                        <li>If ICMP is blocked (firewall), connection hangs (MTU black hole)</li>
                    </ul>
                    <p style="margin-top: 10px; padding: 10px; background: white; border-radius: 3px; border-left: 3px solid #ff9800; font-family: monospace; font-size: 12px;">
                        <strong>For this scenario (${originalSize}B packet, ${pathMtu}B MTU):</strong><br>
                        With DF=0: <span style="color: #4CAF50;">✅ Packet fragments into ${fragmentCount} pieces</span><br>
                        With DF=1: <span style="color: #d32f2f;">❌ Router would drop and send ICMP error</span>
                    </p>
                </div>
            </div>
        `;

        details.innerHTML += `
            <div class="data-row">
            <div class="data-row">
                <span class="data-label">Estimated Performance Impact:</span>
                <span class="data-value">~${(fragmentCount * 5).toFixed(0)}% throughput reduction</span>
            </div>
        `;

        details.innerHTML += `
            <div style="margin-top: 15px; padding: 12px; background: #f0f0f0; border-radius: 6px; font-size: 13px; color: #666;">
                <strong style="color: #333;">💡 Note:</strong> Maximum payload shown is for IP layer fragmentation.
                For TCP, the MSS (Maximum Segment Size) is further reduced by 20 bytes for TCP header:
                <code style="display: block; margin-top: 6px; padding: 6px; background: white; border-radius: 3px; font-family: monospace;">
                    TCP MSS = MTU - 20 (IP) - 20 (TCP) = ${Math.max(0, pathMtu - 40)} bytes
                </code>
            </div>
        `;

        // Create packet visualization
        const diagram = document.getElementById('packetDiagram');
        let html = '<h4 style="margin-top: 20px; margin-bottom: 15px;">Packet Fragmentation Diagram:</h4>';
        html += '<div class="fragment-visual">';

        for (let i = 0; i < fragmentCount; i++) {
            const isLast = i === fragmentCount - 1;
            const fragmentSize = isLast ? (originalSize - (i * maxPayload) + 20) : pathMtu;
            const dataSize = fragmentSize - 20;
            const offsetBytes = i * maxPayload;
            const offsetUnits = Math.floor(offsetBytes / 8);  // RFC 791: 8-byte units

            html += `
                <div class="fragment-box" data-fragment="Fragment ${i + 1}">
                    <div class="packet-section">
                        <span class="packet-section-label">IP Header:</span>
                        <span class="packet-section-value">20 bytes</span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">Fragment Offset:</span>
                        <span class="packet-section-value">
                            ${offsetBytes} bytes (IPv4 field: ${offsetUnits} × 8-byte units)
                        </span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">More Fragments:</span>
                        <span class="packet-section-value">${isLast ? 'No (MF=0)' : 'Yes (MF=1)'}</span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">Data Payload:</span>
                        <span class="packet-section-value">${dataSize} bytes</span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">Total Size:</span>
                        <span class="packet-section-value">${fragmentSize} bytes</span>
                    </div>
                </div>
            `;
        }

        html += '</div>';
        diagram.innerHTML = html;
    }

    // PMTUD Flowchart functions
    function showStep(stepId) {
        const stepStr = stepId.toString();
        const step = document.getElementById('step' + stepStr);
        if (step) {
            step.classList.remove('hidden');

            // Show arrow before this step
            const prevStepNum = stepStr.includes('.') ? parseInt(stepStr.split('.')[0]) : stepId - 1;
            const arrow = document.getElementById('arrow' + prevStepNum);
            if (arrow) arrow.classList.remove('hidden');

            // Scroll to step
            step.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }

    function resetFlowchart() {
        // Hide all steps except first
        document.querySelectorAll('.flow-node, .flow-arrow').forEach(el => {
            if (el.id !== 'step1') {
                el.classList.add('hidden');
            }
        });

        // Scroll to top
        document.getElementById('step1').scrollIntoView({ behavior: 'smooth' });
    }

    // Event listeners
    document.getElementById('baseMtu').addEventListener('input', scheduleCalculation);

    document.getElementById('addEncap').addEventListener('click', () => {
        const select = document.getElementById('encapType');
        const type = select.value;

        if (type) {
            addEncapsulationLayer(type);
            updateEncapsulationDisplay();
            scheduleCalculation();
            select.value = '';
        }
    });

    document.getElementById('resetCalc').addEventListener('click', () => {
        document.getElementById('baseMtu').value = 1500;
        encapsulationLayers = [];
        updateEncapsulationDisplay();
        scheduleCalculation();
    });

    // Session Management (P0 Feature)
    let sessionManager;

    function initializeSessionManagement() {
        sessionManager = new SessionManager('mtu-analyzer');

        // Check for previous session
        const savedData = sessionManager.promptRestore();

        // Start auto-save
        sessionManager.startAutoSave(() => {
            return {
                baseMtu: document.getElementById('baseMtu').value,
                encapsulationLayers: encapsulationLayers,
                packetsPerSec: document.getElementById('packetsPerSec').value,
                avgPacketSize: document.getElementById('avgPacketSize').value,
                linkSpeed: document.getElementById('linkSpeed').value
            };
        });
    }

    function restoreSession() {
        const data = sessionManager.load();
        if (data) {
            document.getElementById('baseMtu').value = data.baseMtu || 1500;
            encapsulationLayers = data.encapsulationLayers || [];

            if (data.packetsPerSec) document.getElementById('packetsPerSec').value = data.packetsPerSec;
            if (data.avgPacketSize) document.getElementById('avgPacketSize').value = data.avgPacketSize;
            if (data.linkSpeed) document.getElementById('linkSpeed').value = data.linkSpeed;

            updateEncapsulationDisplay();
            scheduleCalculation();

            document.getElementById('restoreBanner').style.display = 'none';
        }
    }

    function dismissRestore() {
        document.getElementById('restoreBanner').style.display = 'none';
    }

    function clearSession() {
        if (confirm('Clear all saved data?')) {
            sessionManager.clear();
            document.getElementById('baseMtu').value = 1500;
            document.getElementById('packetsPerSec').value = 10000;
            document.getElementById('avgPacketSize').value = 1400;
            document.getElementById('linkSpeed').value = 1000;
            encapsulationLayers = [];
            updateEncapsulationDisplay();
            scheduleCalculation();
        }
    }

    // Bandwidth Waste Calculator (P0 Feature)
    function calculateBandwidthWaste() {
        const pps = parseInt(document.getElementById('packetsPerSec').value) || 10000;
        const avgSize = parseInt(document.getElementById('avgPacketSize').value) || 1400;
        const linkSpeed = parseInt(document.getElementById('linkSpeed').value) || 1000;

        // Get current effective MTU
        const baseMtu = parseInt(document.getElementById('baseMtu').value);
        const overhead = encapsulationLayers.reduce((sum, layer) => sum + layer.overhead, 0);
        const effectiveMtu = baseMtu - overhead;
        const ipHeaderSize = 20;
        const maxPayload = effectiveMtu - ipHeaderSize;

        // Calculate fragmentation
        let fragmentCount = 1;
        let overheadPerPacket = 0;

        if (avgSize > maxPayload) {
            fragmentCount = Math.ceil(avgSize / maxPayload);
            // Each additional fragment adds 20 bytes (IP header)
            overheadPerPacket = (fragmentCount - 1) * ipHeaderSize;
        }

        // Calculate bandwidth waste
        const overheadPerSecond = overheadPerPacket * pps;
        const wastedMbps = (overheadPerSecond * 8) / 1000000; // Convert to Mbps
        const wastedPercent = (wastedMbps / linkSpeed) * 100;
        const extraFragmentsPerSec = (fragmentCount - 1) * pps;

        // Update UI
        document.getElementById('bandwidthWasteResults').classList.remove('hidden');
        document.getElementById('wastedMbps').textContent = wastedMbps.toFixed(2);
        document.getElementById('wastedPercent').textContent = wastedPercent.toFixed(2) + '%';
        document.getElementById('extraFragments').textContent = formatNumber(extraFragmentsPerSec);
        document.getElementById('fragmentsPerPacket').textContent = fragmentCount;
        document.getElementById('overheadPerPacket').textContent = overheadPerPacket + ' bytes';
        document.getElementById('totalOverheadPerSec').textContent = formatNumber(overheadPerSecond) + ' bytes';

        // Recommendation
        let recommendation = '';
        if (fragmentCount === 1) {
            recommendation = '✅ No fragmentation - optimal configuration';
        } else if (wastedPercent < 5) {
            recommendation = '⚠️ Minor impact - consider increasing MTU if possible';
        } else if (wastedPercent < 15) {
            recommendation = '⚠️ Moderate impact - enable PMTUD or increase MTU';
        } else {
            recommendation = '🔴 Significant impact - MTU increase strongly recommended';
        }
        document.getElementById('recommendation').textContent = recommendation;

        // Animate results
        animateCards('#bandwidthWasteResults', 100);
    }

    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

    function animateCards(containerSelector, delay) {
        const cards = document.querySelectorAll(`${containerSelector} .result-card`);
        cards.forEach((card, index) => {
            setTimeout(() => {
                card.classList.add('fade-in');
            }, index * delay);
        });
    }

    // Initialize
    calculate();

    // Load common utilities after DOM is ready
    const commonScript = document.createElement('script');
    commonScript.src = '/assets/js/tools-common.js';
    commonScript.onload = () => {
        initializeSessionManagement();
    };
    document.head.appendChild(commonScript);
</script>