.. عنوان: سب نیٹ پلاننگ ٹول
.. slug: subnet-planning-tool
.. تاریخ: 2025-12-30 16:15:00 UTC
.. ٹیگز: نیٹ ورکنگ، کیلکولیٹر، ٹول، ipv4، ipv6، سب نیٹ، vlan
.. زمرہ: کیلکولیٹر
.. لنک:
.. تفصیل: IPv4/IPv6 ڈوئل اسٹیک سپورٹ، درجہ بندی کا تصور، اور VLAN/VNI ٹریکنگ کے ساتھ ہائی لیول ڈیزائن سب نیٹ پلاننگ ٹول
.. قسم: متن
<style>
    * {
        box-sizing: border-box;
    }

    .subnet-planner-container {
        max-width: 100%;
        margin: 20px auto;
        padding: 20px;
    }

    .config-section {
        background: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .protocol-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 2px solid #ddd;
    }

    .tab-button {
        padding: 10px 20px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-weight: 600;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
    }

    .tab-button:hover {
        background: #e8e8e8;
    }

    .tab-button.active {
        border-bottom-color: #4CAF50;
        color: #4CAF50;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

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

    .config-item label {
        display: block;
        font-weight: 600;
        margin-bottom: 5px;
        color: #333;
    }

    .config-item input,
    .config-item select {
        width: 100%;
        padding: 8px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
    }

    .config-item select:disabled {
        background-color: #f0f0f0;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .config-item select option:disabled {
        color: #999;
        font-style: italic;
    }

    .config-item .hint {
        font-size: 0.85em;
        color: #666;
        margin-top: 3px;
    }

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

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-primary { background: #4CAF50; color: white; }
    .btn-primary:hover { background: #45a049; }
    .btn-secondary { background: #2196F3; color: white; }
    .btn-secondary:hover { background: #0b7dda; }
    .btn-danger { background: #f44336; color: white; }
    .btn-danger:hover { background: #da190b; }

    .hld-container {
        margin: 20px 0;
        overflow-x: auto;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
    }

    .column-toggles {
        margin-bottom: 15px;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 4px;
    }

    .column-toggles label {
        margin-right: 15px;
        cursor: pointer;
        user-select: none;
    }

    .column-toggles input[type="checkbox"] {
        margin-right: 5px;
    }

    .hld-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85em;
    }

    .hld-table th {
        background: #2c3e50;
        color: white;
        padding: 8px 4px;
        text-align: center;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 10;
        white-space: nowrap;
    }

    .hld-table td {
        padding: 4px;
        border: 1px solid #ddd;
        text-align: center;
        font-family: 'Courier New', monospace;
        font-size: 0.9em;
        min-width: 60px;
        position: relative;
    }

    .hld-table td.subnet-cell {
        background: #fff;
        cursor: pointer;
        transition: all 0.2s;
    }

    .hld-table td.subnet-cell:hover {
        background: #e3f2fd;
        transform: scale(1.05);
        z-index: 5;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .hld-table td.subnet-cell.allocated {
        font-weight: bold;
    }

    .hld-table td.subnet-cell.blocked {
        background: #f5f5f5;
        color: #999;
        pointer-events: none;
    }

    .hld-table td.info-cell {
        background: #f9f9f9;
        font-size: 0.85em;
    }

    .hld-table td input {
        width: 100%;
        padding: 4px;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-size: 0.9em;
        background: white;
    }

    .hld-table .col-hidden {
        display: none;
    }

    .legend {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin: 15px 0;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 4px;
    }

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

    .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 3px;
        border: 1px solid #ddd;
    }

    .detail-table-container {
        margin: 30px 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
        display: none;
    }

    .detail-table-container.show {
        display: block;
    }

    .detail-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }

    .detail-table th {
        background: #2c3e50;
        color: white;
        padding: 10px;
        text-align: left;
        font-weight: 600;
    }

    .detail-table td {
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }

    .detail-table input {
        width: 100%;
        padding: 6px;
        border: 1px solid #ddd;
        border-radius: 3px;
    }

    .detail-table input.error {
        border-color: #f44336;
        background: #ffebee;
    }

    .status-message {
        padding: 12px;
        margin: 10px 0;
        border-radius: 4px;
        display: none;
    }

    .status-message.show { display: block; }
    .status-message.success {
        background: #e8f5e9;
        color: #2e7d32;
        border-left: 4px solid #4CAF50;
    }
    .status-message.error {
        background: #ffebee;
        color: #c62828;
        border-left: 4px solid #f44336;
    }
    .status-message.info {
        background: #e3f2fd;
        color: #1976d2;
        border-left: 4px solid #2196F3;
    }

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .loading-overlay.show {
        display: flex;
    }

    .loading-spinner {
        background: white;
        padding: 30px;
        border-radius: 8px;
        text-align: center;
    }

    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #4CAF50;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto 15px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .edit-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        animation: fadeIn 0.2s;
    }

    .edit-modal.show {
        display: flex;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .edit-modal-content {
        background: white;
        border-radius: 8px;
        padding: 30px;
        max-width: 500px;
        width: 90%;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        animation: slideUp 0.3s;
    }

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

    .edit-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e0e0e0;
    }

    .edit-modal-header h3 {
        margin: 0;
        color: #2c3e50;
    }

    .edit-modal-close {
        background: transparent;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #999;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;
    }

    .edit-modal-close:hover {
        background: #f0f0f0;
        color: #333;
    }

    .edit-form-group {
        margin-bottom: 20px;
    }

    .edit-form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
    }

    .edit-form-group input,
    .edit-form-group select {
        width: 100%;
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.2s;
    }

    .edit-form-group input:focus,
    .edit-form-group select:focus {
        outline: none;
        border-color: #4CAF50;
    }

    .edit-form-group input.error {
        border-color: #f44336;
        background: #ffebee;
    }

    .edit-form-group .hint {
        font-size: 0.85em;
        color: #666;
        margin-top: 4px;
    }

    .edit-form-group .error-message {
        font-size: 0.85em;
        color: #f44336;
        margin-top: 4px;
        display: none;
    }

    .edit-form-group .error-message.show {
        display: block;
    }

    .color-picker-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .color-picker-group input[type="color"] {
        width: 60px;
        height: 40px;
        border: 2px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        padding: 2px;
    }

    .color-preview {
        flex: 1;
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 4px;
        text-align: center;
        font-weight: 600;
    }

    .edit-modal-actions {
        display: flex;
        gap: 10px;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid #e0e0e0;
    }

    .edit-modal-actions .btn {
        flex: 1;
    }

    .subnet-cell.allocated {
        cursor: pointer;
    }

    .subnet-cell.allocated:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .subnet-cell.editing {
        outline: 3px solid #4CAF50;
        outline-offset: 2px;
        z-index: 20;
    }

    .vlan-badge {
        display: inline-block;
        padding: 2px 6px;
        margin-left: 5px;
        border-radius: 3px;
        font-size: 0.75em;
        font-weight: 600;
    }

    .vlan-badge.dual-stack {
        background: #2196F3;
        color: white;
    }

    .vlan-badge.secondary {
        background: #FF9800;
        color: white;
    }

    .confirm-dialog {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 3000;
        animation: fadeIn 0.2s;
    }

    .confirm-dialog.show {
        display: flex;
    }

    .confirm-dialog-content {
        background: white;
        border-radius: 8px;
        padding: 30px;
        max-width: 500px;
        width: 90%;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

    .confirm-dialog-header {
        margin-bottom: 20px;
    }

    .confirm-dialog-header h3 {
        margin: 0 0 10px 0;
        color: #2c3e50;
    }

    .confirm-dialog-body {
        margin-bottom: 20px;
        padding: 15px;
        background: #f5f5f5;
        border-radius: 4px;
        border-left: 4px solid #FF9800;
    }

    .confirm-dialog-body p {
        margin: 8px 0;
        line-height: 1.6;
    }

    .confirm-dialog-body strong {
        color: #333;
    }

    .confirm-dialog-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .vlan-info-legend {
        margin-top: 10px;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 4px;
        font-size: 0.85em;
    }

    .vlan-info-legend h4 {
        margin: 0 0 10px 0;
        font-size: 1em;
        color: #333;
    }

    .vlan-info-legend p {
        margin: 5px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
</style>
<div class="subnet-planner-container">
<h2>سب نیٹ پلاننگ ٹول - ہائی لیول ڈیزائن</h2>
<p>مناسب nesting کے ساتھ درجہ بندی کے مطابق نیٹ ورک سب نیٹس کی منصوبہ بندی کریں۔ فنکشنز مختص کریں، VLAN تفویض کریں، اور اپنے ڈیزائن کو ایکسپورٹ کریں۔</p>
<div class="status-message" id="statusMessage"></div>
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-spinner">
<div class="spinner"></div>
<div>سب نیٹ درجہ بندی تیار ہو رہی ہے...</div>
</div>
</div>
<div class="protocol-tabs">
<button class="tab-button active" onclick="switchTab('ipv4')">IPv4</button>
<button class="tab-button" onclick="switchTab('ipv6')">IPv6</button>
</div>
<div class="tab-content active" id="ipv4Tab">
<div class="config-section">
<h3>IPv4 کنفیگریشن</h3>
<div class="config-grid">
<div class="config-item">
<label for="ipv4Supernet">IPv4 سپر نیٹ</label>
<input id="ipv4Supernet" placeholder="e.g., 10.5.0.0/16" type="text"/>
<div class="hint">CIDR اشارے میں IPv4 نیٹ ورک</div>
</div>
<div class="config-item">
<label for="ipv4MinSize">سب سے چھوٹا سب نیٹ</label>
<select disabled="" id="ipv4MinSize">
<option disabled="" selected="" value="">پہلے سپر نیٹ داخل کریں۔</option>
</select>
<div class="hint">اس سائز سے زیادہ کالم چھپاتا ہے۔</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="generateIPv4HLD()">IPv4 HLD بنائیں</button>
<button class="btn btn-secondary" onclick="exportJSON('ipv4')">JSON برآمد کریں۔</button>
<button class="btn btn-secondary" onclick="document.getElementById('importIPv4').click()">JSON درآمد کریں۔</button>
<input accept=".json" id="importIPv4" onchange="importJSON(event, 'ipv4')" style="display: none;" type="file"/>
<button class="btn btn-danger" onclick="clearHLD('ipv4')">IPv4 صاف کریں۔</button>
</div>
</div>
<div class="hld-container" id="ipv4HLDContainer" style="display: none;">
<h3>IPv4 سب نیٹ درجہ بندی</h3>
<div class="column-toggles" id="ipv4Toggles"></div>
<div class="legend" id="ipv4Legend"></div>
<div style="overflow-x: auto;">
<table class="hld-table" id="ipv4Table"></table>
</div>
</div>
</div>
<div class="tab-content" id="ipv6Tab">
<div class="config-section">
<h3>IPv6 کنفیگریشن</h3>
<div class="config-grid">
<div class="config-item">
<label for="ipv6Supernet">IPv6 سپر نیٹ</label>
<input id="ipv6Supernet" placeholder="e.g., 2603:9000::/48" type="text"/>
<div class="hint">CIDR نوٹیشن میں IPv6 نیٹ ورک</div>
</div>
<div class="config-item">
<label for="ipv6MinSize">سب سے چھوٹا سب نیٹ</label>
<select disabled="" id="ipv6MinSize">
<option disabled="" selected="" value="">پہلے سپر نیٹ داخل کریں۔</option>
</select>
<div class="hint">اس سائز سے زیادہ کالم چھپاتا ہے۔</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="generateIPv6HLD()">IPv6 HLD بنائیں</button>
<button class="btn btn-secondary" onclick="exportJSON('ipv6')">JSON برآمد کریں۔</button>
<button class="btn btn-secondary" onclick="document.getElementById('importIPv6').click()">JSON درآمد کریں۔</button>
<input accept=".json" id="importIPv6" onchange="importJSON(event, 'ipv6')" style="display: none;" type="file"/>
<button class="btn btn-danger" onclick="clearHLD('ipv6')">IPv6 صاف کریں۔</button>
</div>
</div>
<div class="hld-container" id="ipv6HLDContainer" style="display: none;">
<h3>IPv6 سب نیٹ درجہ بندی</h3>
<div class="column-toggles" id="ipv6Toggles"></div>
<div class="legend" id="ipv6Legend"></div>
<div style="overflow-x: auto;">
<table class="hld-table" id="ipv6Table"></table>
</div>
</div>
</div>
<div class="detail-table-container" id="detailContainer">
<h3>سب نیٹ کی تفصیلات - VLAN/VNI اسائنمنٹ</h3>
<p>مختص سب نیٹس کے لیے VLAN اور VNI اسائنمنٹس کی وضاحت کریں۔ ڈوئل اسٹیک (IPv4+IPv6) اور ثانوی IPs تعاون یافتہ ہیں۔</p>
<div class="vlan-info-legend">
<h4>VLAN/VNI تفویض کے قواعد</h4>
<p><span class="vlan-badge dual-stack">دوہری اسٹیک</span>ایک ہی VLAN/VNI ایک IPv4 اور ایک IPv6 سب نیٹ کے لیے استعمال کیا جا سکتا ہے۔</p>
<p><span class="vlan-badge secondary">سیکنڈری</span>سیکنڈری/ٹرٹیری آئی پیز کو اسی پروٹوکول کے لیے تصدیق کی ضرورت ہوتی ہے۔</p>
</div>
<table class="detail-table">
<thead>
<tr>
<th>پروٹوکول</th>
<th>جنرل فنکشن</th>
<th>مخصوص فنکشن</th>
<th>آئی پی ایڈریس</th>
<th>VLAN (1-4096)</th>
<th>VNI (1-16777215)</th>
<th>اعمال</th>
</tr>
</thead>
<tbody id="detailTableBody">
<tr>
<td colspan="7" style="text-align: center; padding: 20px; color: #999;">منصوبہ بندی شروع کرنے کے لیے اوپر دیے گئے HLD میں سب نیٹس مختص کریں۔</td>
</tr>
</tbody>
</table>
</div>
ایلوکیشن موڈل میں ترمیم کریں۔
<div class="edit-modal" id="editModal">
<div class="edit-modal-content">
<div class="edit-modal-header">
<h3>سب نیٹ ایلوکیشن میں ترمیم کریں۔</h3>
<button aria-label="Close" class="edit-modal-close" onclick="closeEditModal()">×</button>
</div>
<div class="edit-form-group">
<label>سب نیٹ</label>
<input id="editSubnet" readonly="" style="background: #f5f5f5; cursor: not-allowed;" type="text"/>
</div>
<div class="edit-form-group">
<label for="editGenFunc">جنرل فنکشن</label>
<input id="editGenFunc" placeholder="e.g., Data Center, Campus, WAN" type="text"/>
<div class="hint">اس سب نیٹ کا بنیادی مقصد یا مقام</div>
</div>
<div class="edit-form-group">
<label for="editSpecFunc">مخصوص فنکشن</label>
<input id="editSpecFunc" placeholder="e.g., Web Servers, User VLANs" type="text"/>
<div class="hint">مخصوص استعمال کیس (اختیاری، سیٹ ہونے پر چائلڈ سب نیٹ کو چھپاتا ہے)</div>
</div>
<div class="edit-form-group">
<label for="editVLAN">VLAN ID (1-4096)</label>
<input id="editVLAN" max="4096" min="1" placeholder="Optional" type="number"/>
<div class="error-message" id="editVLANError">VLAN پہلے سے استعمال میں ہے۔</div>
</div>
<div class="edit-form-group">
<label for="editVNI">VNI (1-16777215)</label>
<input id="editVNI" max="16777215" min="1" placeholder="Optional" type="number"/>
<div class="error-message" id="editVNIError">VNI پہلے سے استعمال میں ہے۔</div>
<div class="hint">VXLAN/EVPN کے لیے ورچوئل نیٹ ورک شناخت کنندہ</div>
</div>
<div class="edit-form-group">
<label for="editColor">رنگ</label>
<div class="color-picker-group">
<input id="editColor" type="color"/>
<div class="color-preview" id="editColorPreview">پیش نظارہ</div>
</div>
</div>
<div class="edit-modal-actions">
<button class="btn btn-danger" onclick="deleteFromModal()">مختص کو حذف کریں۔</button>
<button class="btn btn-secondary" onclick="closeEditModal()">منسوخ کریں۔</button>
<button class="btn btn-primary" onclick="saveEditModal()">تبدیلیاں محفوظ کریں۔</button>
</div>
</div>
</div>
ثانوی IPs کے لیے تصدیقی ڈائیلاگ
<div class="confirm-dialog" id="confirmDialog">
<div class="confirm-dialog-content">
<div class="confirm-dialog-header">
<h3 id="confirmTitle">VLAN اسائنمنٹ کی تصدیق کریں۔</h3>
</div>
<div class="confirm-dialog-body" id="confirmBody">
متحرک مواد
</div>
<div class="confirm-dialog-actions">
<button class="btn btn-secondary" onclick="cancelConfirmDialog()">نہیں، منسوخ کریں۔</button>
<button class="btn btn-primary" onclick="acceptConfirmDialog()">ہاں، جاری رکھیں</button>
</div>
</div>
</div>
</div>
<script>
// Global state
let ipv4Allocations = [];
let ipv6Allocations = [];
let ipv4Config = null;
let ipv6Config = null;
// NEW: Track VLAN/VNI usage by protocol for dual-stack support
let usedVLANs = new Set(); // Legacy: will be deprecated
let usedVLANsByProtocol = new Map(); // Map<vlan, Set<'ipv4' | 'ipv6'>>
let usedVNIsByProtocol = new Map(); // Map<vni, Set<'ipv4' | 'ipv6'>>
let hiddenColumns = { ipv4: new Set(), ipv6: new Set() };
let colorPalette = [
    '#FFCDD2', '#F8BBD0', '#E1BEE7', '#D1C4E9', '#C5CAE9',
    '#BBDEFB', '#B3E5FC', '#B2EBF2', '#B2DFDB', '#C8E6C9',
    '#DCEDC8', '#F0F4C3', '#FFF9C4', '#FFECB3', '#FFE0B2'
];
let nextColorIndex = 0;

// Confirmation dialog state
let confirmDialogCallback = null;

// Performance optimization: Allocation lookup cache
let allocationCache = { ipv4: new Map(), ipv6: new Map() };

// VLAN/VNI tracking utilities
function addVLANUsage(vlan, protocol) {
    if (!vlan) return;
    const vlanNum = parseInt(vlan);
    if (!usedVLANsByProtocol.has(vlanNum)) {
        usedVLANsByProtocol.set(vlanNum, new Set());
    }
    usedVLANsByProtocol.get(vlanNum).add(protocol);
    usedVLANs.add(vlanNum); // Legacy support
}

function removeVLANUsage(vlan, protocol) {
    if (!vlan) return;
    const vlanNum = parseInt(vlan);
    const protocols = usedVLANsByProtocol.get(vlanNum);
    if (protocols) {
        protocols.delete(protocol);
        if (protocols.size === 0) {
            usedVLANsByProtocol.delete(vlanNum);
            usedVLANs.delete(vlanNum); // Legacy support
        }
    }
}

function addVNIUsage(vni, protocol) {
    if (!vni) return;
    const vniNum = parseInt(vni);
    if (!usedVNIsByProtocol.has(vniNum)) {
        usedVNIsByProtocol.set(vniNum, new Set());
    }
    usedVNIsByProtocol.get(vniNum).add(protocol);
}

function removeVNIUsage(vni, protocol) {
    if (!vni) return;
    const vniNum = parseInt(vni);
    const protocols = usedVNIsByProtocol.get(vniNum);
    if (protocols) {
        protocols.delete(protocol);
        if (protocols.size === 0) {
            usedVNIsByProtocol.delete(vniNum);
        }
    }
}

function getVLANUsage(vlan) {
    const vlanNum = parseInt(vlan);
    return usedVLANsByProtocol.get(vlanNum) || new Set();
}

function getVNIUsage(vni) {
    const vniNum = parseInt(vni);
    return usedVNIsByProtocol.get(vniNum) || new Set();
}

function getAllocationByVLAN(vlan, protocol) {
    const allAllocations = [...ipv4Allocations, ...ipv6Allocations];
    return allAllocations.find(a =>
        parseInt(a.vlan) === parseInt(vlan) &&
        (a.isIPv6 ? 'ipv6' : 'ipv4') === protocol
    );
}

function getAllocationByVNI(vni, protocol) {
    const allAllocations = [...ipv4Allocations, ...ipv6Allocations];
    return allAllocations.find(a =>
        parseInt(a.vni) === parseInt(vni) &&
        (a.isIPv6 ? 'ipv6' : 'ipv4') === protocol
    );
}

function rebuildVLANVNITracking() {
    usedVLANsByProtocol.clear();
    usedVNIsByProtocol.clear();
    usedVLANs.clear(); // Legacy

    [...ipv4Allocations, ...ipv6Allocations].forEach(alloc => {
        const protocol = alloc.isIPv6 ? 'ipv6' : 'ipv4';
        if (alloc.vlan) {
            addVLANUsage(alloc.vlan, protocol);
        }
        if (alloc.vni) {
            addVNIUsage(alloc.vni, protocol);
        }
    });
}

// Confirmation dialog functions
function showConfirmDialog(title, bodyHTML, onConfirm) {
    document.getElementById('confirmTitle').textContent = title;
    document.getElementById('confirmBody').innerHTML = bodyHTML;
    confirmDialogCallback = onConfirm;
    document.getElementById('confirmDialog').classList.add('show');
}

function cancelConfirmDialog() {
    document.getElementById('confirmDialog').classList.remove('show');
    confirmDialogCallback = null;
}

function acceptConfirmDialog() {
    document.getElementById('confirmDialog').classList.remove('show');
    if (confirmDialogCallback) {
        confirmDialogCallback();
        confirmDialogCallback = null;
    }
}

// Get VLAN status for display
function getVLANStatus(vlan) {
    const usage = getVLANUsage(vlan);
    if (usage.size === 0) return null;
    if (usage.size === 2) return 'dual-stack';
    if (usage.size === 1) {
        // Check if there are multiple allocations with same VLAN and protocol
        const protocol = Array.from(usage)[0];
        const allocations = (protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations)
            .filter(a => parseInt(a.vlan) === parseInt(vlan));
        if (allocations.length > 1) return 'secondary';
    }
    return null;
}

function getVNIStatus(vni) {
    const usage = getVNIUsage(vni);
    if (usage.size === 0) return null;
    if (usage.size === 2) return 'dual-stack';
    if (usage.size === 1) {
        // Check if there are multiple allocations with same VNI and protocol
        const protocol = Array.from(usage)[0];
        const allocations = (protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations)
            .filter(a => parseInt(a.vni) === parseInt(vni));
        if (allocations.length > 1) return 'secondary';
    }
    return null;
}

// Performance optimization: Debounce timer
let debounceTimers = new Map();

// Performance optimization: Memoized host count calculations
const hostCountCache = new Map();

// Edit modal state
let currentEditAllocation = null;
let currentEditProtocol = null;
let originalVLAN = null;
let originalVNI = null;

// Tab switching
function switchTab(protocol) {
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

    event.target.classList.add('active');
    document.getElementById(protocol + 'Tab').classList.add('active');
}

// IPv4 utilities
function ipv4ToInt(ip) {
    const parts = ip.split('.').map(Number);
    if (parts.length !== 4 || parts.some(p => p < 0 || p > 255)) return null;
    return (parts[0] << 24) + (parts[1] << 16) + (parts[2] << 8) + parts[3];
}

function intToIpv4(int) {
    return [
        (int >>> 24) & 0xFF,
        (int >>> 16) & 0xFF,
        (int >>> 8) & 0xFF,
        int & 0xFF
    ].join('.');
}

function getIPv4Network(ip, prefix) {
    const ipInt = typeof ip === 'string' ? ipv4ToInt(ip) : ip;
    if (ipInt === null) return null;
    const mask = (0xFFFFFFFF << (32 - prefix)) >>> 0;
    return ipInt & mask;
}

function getIPv4Children(subnet, prefix) {
    const subnetInt = getIPv4Network(subnet, prefix);
    const blockSize = Math.pow(2, 32 - (prefix + 1));
    return [
        intToIpv4(subnetInt),
        intToIpv4(subnetInt + blockSize)
    ];
}

// IPv6 utilities (simplified)
function getIPv6Children(subnet, prefix) {
    return [`${subnet}:0`, `${subnet}:1`];
}

// OPTIMIZED: Memoized host count calculation
function calculateHosts(prefix, isIPv6 = false) {
    const cacheKey = `${prefix}-${isIPv6}`;
    if (hostCountCache.has(cacheKey)) {
        return hostCountCache.get(cacheKey);
    }

    let result;
    if (isIPv6) {
        if (prefix <= 64) {
            const slash64s = Math.pow(2, 64 - prefix);
            result = `${slash64s.toLocaleString()} /64s`;
        } else {
            const hostBits = 128 - prefix;
            result = hostBits > 64 ? `2^${hostBits}` : Math.pow(2, hostBits).toLocaleString();
        }
    } else {
        const hostBits = 32 - prefix;
        const usable = Math.max(0, Math.pow(2, hostBits) - 2);
        result = usable.toLocaleString();
    }

    hostCountCache.set(cacheKey, result);
    return result;
}

// OPTIMIZED: Iterative subnet hierarchy generation (no recursion)
function generateSubnetHierarchy(subnet, currentPrefix, minPrefix, isIPv6 = false) {
    const rows = [];
    const stack = [{ subnet, prefix: currentPrefix }];

    while (stack.length > 0) {
        const { subnet: currentSubnet, prefix } = stack.pop();

        if (prefix > minPrefix) continue;

        rows.push({ subnet: currentSubnet, prefix, depth: prefix });

        // Add children in reverse order so they're processed in correct order
        if (prefix < minPrefix) {
            const children = isIPv6 ?
                getIPv6Children(currentSubnet, prefix) :
                getIPv4Children(currentSubnet, prefix);

            // Push in reverse order for correct depth-first traversal
            for (let i = children.length - 1; i >= 0; i--) {
                stack.push({ subnet: children[i], prefix: prefix + 1 });
            }
        }
    }

    return rows;
}

// OPTIMIZED: Rebuild allocation cache for O(1) lookups
function rebuildAllocationCache(protocol) {
    const allocations = protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations;
    const cache = allocationCache[protocol];
    cache.clear();

    allocations.forEach(alloc => {
        const key = `${alloc.subnet}/${alloc.prefix}`;
        cache.set(key, alloc);
    });
}

// OPTIMIZED: Fast subnet status check using cache and binary search
function getSubnetStatus(subnet, prefix, protocol) {
    const cache = allocationCache[protocol];
    const key = `${subnet}/${prefix}`;

    // Check direct allocation
    if (cache.has(key)) {
        return { allocated: true, alloc: cache.get(key) };
    }

    // Improvement 1 & 2: Check if blocked by parent allocation with Specific Function
    const allocations = protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations;
    const isIPv6 = protocol === 'ipv6';

    for (const alloc of allocations) {
        // Only block child subnets if parent has a Specific Function set
        if (alloc.prefix < prefix && alloc.specFunc && alloc.specFunc.trim() !== '') {
            if (isIPv6) {
                if (subnet.startsWith(alloc.subnet)) {
                    return { blocked: true, parent: alloc, hidden: true };
                }
            } else {
                const allocInt = getIPv4Network(alloc.subnet, alloc.prefix);
                const subnetInt = getIPv4Network(subnet, prefix);
                const allocMask = (0xFFFFFFFF << (32 - alloc.prefix)) >>> 0;
                const allocBroadcast = allocInt | (~allocMask >>> 0);

                if (subnetInt >= allocInt && subnetInt <= allocBroadcast) {
                    return { blocked: true, parent: alloc, hidden: true };
                }
            }
        }
    }

    return { available: true };
}

// Helper function to check if a subnet should be hidden (child of allocated parent with specific function)
function isSubnetHidden(subnet, prefix, protocol) {
    const allocations = protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations;
    const isIPv6 = protocol === 'ipv6';

    for (const alloc of allocations) {
        // Hide child subnets if parent has a Specific Function set
        if (alloc.prefix < prefix && alloc.specFunc && alloc.specFunc.trim() !== '') {
            if (isIPv6) {
                if (subnet.startsWith(alloc.subnet)) {
                    return true;
                }
            } else {
                const allocInt = getIPv4Network(alloc.subnet, alloc.prefix);
                const subnetInt = getIPv4Network(subnet, prefix);
                const allocMask = (0xFFFFFFFF << (32 - alloc.prefix)) >>> 0;
                const allocBroadcast = allocInt | (~allocMask >>> 0);

                if (subnetInt >= allocInt && subnetInt <= allocBroadcast) {
                    return true;
                }
            }
        }
    }

    return false;
}

// Open edit modal for an allocated subnet
function openEditModal(subnet, prefix, protocol) {
    const cache = allocationCache[protocol];
    const key = `${subnet}/${prefix}`;
    const allocation = cache.get(key);

    if (!allocation) {
        showStatus('Allocation not found', 'error');
        return;
    }

    // Store reference to current allocation
    currentEditAllocation = allocation;
    currentEditProtocol = protocol;
    originalVLAN = allocation.vlan;
    originalVNI = allocation.vni;

    // Populate form fields
    document.getElementById('editSubnet').value = `${subnet}/${prefix}`;
    document.getElementById('editGenFunc').value = allocation.genFunc || '';
    document.getElementById('editSpecFunc').value = allocation.specFunc || '';
    document.getElementById('editVLAN').value = allocation.vlan || '';
    document.getElementById('editVNI').value = allocation.vni || '';
    document.getElementById('editColor').value = allocation.color || '#FFFFFF';

    // Update color preview
    updateColorPreview();

    // Clear any previous errors
    document.getElementById('editVLAN').classList.remove('error');
    document.getElementById('editVLANError').classList.remove('show');
    document.getElementById('editVNI').classList.remove('error');
    document.getElementById('editVNIError').classList.remove('show');

    // Highlight the cell being edited
    highlightEditingCell(subnet, prefix, protocol);

    // Show modal
    document.getElementById('editModal').classList.add('show');

    // Focus on first editable field
    document.getElementById('editGenFunc').focus();
}

// Close edit modal
function closeEditModal() {
    document.getElementById('editModal').classList.remove('show');
    currentEditAllocation = null;
    currentEditProtocol = null;
    originalVLAN = null;
    originalVNI = null;

    // Remove editing highlight
    document.querySelectorAll('.subnet-cell.editing').forEach(cell => {
        cell.classList.remove('editing');
    });
}

// Update color preview in modal
function updateColorPreview() {
    const colorInput = document.getElementById('editColor');
    const preview = document.getElementById('editColorPreview');
    preview.style.backgroundColor = colorInput.value;
    preview.textContent = colorInput.value.toUpperCase();
}

// Highlight the cell being edited
function highlightEditingCell(subnet, prefix, protocol) {
    // Remove previous highlights
    document.querySelectorAll('.subnet-cell.editing').forEach(cell => {
        cell.classList.remove('editing');
    });

    // Find and highlight current cell
    const table = document.getElementById(protocol + 'Table');
    const cells = table.querySelectorAll('.subnet-cell');

    cells.forEach(cell => {
        if (cell.textContent === `${subnet}/${prefix}`) {
            cell.classList.add('editing');
        }
    });
}

// Validate VLAN in edit modal (with dual-stack and secondary IP support)
function validateEditVLAN() {
    const vlanInput = document.getElementById('editVLAN');
    const errorMsg = document.getElementById('editVLANError');
    const vlan = parseInt(vlanInput.value);

    // Clear previous error
    vlanInput.classList.remove('error');
    errorMsg.classList.remove('show');

    // Empty is allowed
    if (!vlanInput.value || vlanInput.value.trim() === '') {
        return true;
    }

    // Check range
    if (vlan < 1 || vlan > 4096) {
        vlanInput.classList.add('error');
        errorMsg.textContent = 'VLAN must be between 1 and 4096';
        errorMsg.classList.add('show');
        return false;
    }

    // If VLAN hasn't changed, it's valid
    if (vlan === parseInt(originalVLAN)) {
        return true;
    }

    // Check VLAN usage by protocol
    const currentProtocol = currentEditProtocol;
    const usage = getVLANUsage(vlan);

    // No usage - it's available
    if (usage.size === 0) {
        return true;
    }

    // Check if used by opposite protocol (dual-stack allowed)
    if (usage.size === 1 && !usage.has(currentProtocol)) {
        // Dual-stack scenario - allowed
        return true;
    }

    // If used by same protocol, show error (will be handled with confirmation in save)
    if (usage.has(currentProtocol)) {
        vlanInput.classList.add('error');
        errorMsg.textContent = 'VLAN already in use by same protocol';
        errorMsg.classList.add('show');
        return false;
    }

    // Both protocols already using this VLAN
    if (usage.size === 2) {
        vlanInput.classList.add('error');
        errorMsg.textContent = 'VLAN already in use by both IPv4 and IPv6';
        errorMsg.classList.add('show');
        return false;
    }

    return true;
}

// Validate VNI in edit modal (with dual-stack and secondary IP support)
function validateEditVNI() {
    const vniInput = document.getElementById('editVNI');
    const errorMsg = document.getElementById('editVNIError');
    const vni = parseInt(vniInput.value);

    // Clear previous error
    vniInput.classList.remove('error');
    errorMsg.classList.remove('show');

    // Empty is allowed
    if (!vniInput.value || vniInput.value.trim() === '') {
        return true;
    }

    // Check range
    if (vni < 1 || vni > 16777215) {
        vniInput.classList.add('error');
        errorMsg.textContent = 'VNI must be between 1 and 16777215';
        errorMsg.classList.add('show');
        return false;
    }

    // If VNI hasn't changed, it's valid
    if (vni === parseInt(originalVNI)) {
        return true;
    }

    // Check VNI usage by protocol
    const currentProtocol = currentEditProtocol;
    const usage = getVNIUsage(vni);

    // No usage - it's available
    if (usage.size === 0) {
        return true;
    }

    // Check if used by opposite protocol (dual-stack allowed)
    if (usage.size === 1 && !usage.has(currentProtocol)) {
        // Dual-stack scenario - allowed
        return true;
    }

    // If used by same protocol, show error (will be handled with confirmation in save)
    if (usage.has(currentProtocol)) {
        vniInput.classList.add('error');
        errorMsg.textContent = 'VNI already in use by same protocol';
        errorMsg.classList.add('show');
        return false;
    }

    // Both protocols already using this VNI
    if (usage.size === 2) {
        vniInput.classList.add('error');
        errorMsg.textContent = 'VNI already in use by both IPv4 and IPv6';
        errorMsg.classList.add('show');
        return false;
    }

    return true;
}

// Save changes from edit modal (with dual-stack and secondary IP confirmation)
function saveEditModal() {
    if (!currentEditAllocation || !currentEditProtocol) {
        return;
    }

    // Validate VLAN and VNI before saving
    if (!validateEditVLAN()) {
        return;
    }
    if (!validateEditVNI()) {
        return;
    }

    // Get values from form
    const genFunc = document.getElementById('editGenFunc').value.trim();
    const specFunc = document.getElementById('editSpecFunc').value.trim();
    const vlan = document.getElementById('editVLAN').value.trim();
    const vni = document.getElementById('editVNI').value.trim();
    const color = document.getElementById('editColor').value;

    // Validate general function is not empty
    if (!genFunc) {
        showStatus('General Function is required', 'error');
        document.getElementById('editGenFunc').focus();
        return;
    }

    // Function to perform the actual save
    const performSave = () => {
        // Update VLAN/VNI tracking - remove old values
        if (originalVLAN) {
            removeVLANUsage(originalVLAN, currentEditProtocol);
        }
        if (currentEditAllocation.vni) {
            removeVNIUsage(currentEditAllocation.vni, currentEditProtocol);
        }

        // Update allocation
        const previousSpecFunc = currentEditAllocation.specFunc;
        currentEditAllocation.genFunc = genFunc;
        currentEditAllocation.specFunc = specFunc;
        currentEditAllocation.vlan = vlan;
        currentEditAllocation.vni = vni;
        currentEditAllocation.color = color;

        // Add new VLAN/VNI usage
        if (vlan) {
            addVLANUsage(vlan, currentEditProtocol);
        }
        if (vni) {
            addVNIUsage(vni, currentEditProtocol);
        }

        // Rebuild cache
        rebuildAllocationCache(currentEditProtocol);

        // Re-render the table (especially if specFunc changed, which affects child visibility)
        const specFuncChanged = previousSpecFunc !== specFunc;
        renderHLD(currentEditProtocol);
        updateDetailTable();

        // Close modal
        closeEditModal();

        // Show success message
        const message = specFuncChanged && specFunc ?
            `Updated ${currentEditAllocation.subnet}/${currentEditAllocation.prefix} (child subnets hidden)` :
            `Updated ${currentEditAllocation.subnet}/${currentEditAllocation.prefix}`;
        showStatus(message, 'success');
    };

    // Check for VLAN conflicts requiring confirmation (secondary IP scenario)
    if (vlan && vlan !== originalVLAN) {
        const vlanUsage = getVLANUsage(vlan);
        if (vlanUsage.has(currentEditProtocol)) {
            // Same protocol is already using this VLAN - need confirmation for secondary IP
            const existingAlloc = getAllocationByVLAN(vlan, currentEditProtocol);
            if (existingAlloc) {
                const bodyHTML = `
                    <p><strong>VLAN ${vlan}</strong> is already assigned to:</p>
                    <p><strong>Subnet:</strong> ${existingAlloc.subnet}/${existingAlloc.prefix}</p>
                    <p><strong>General Function:</strong> ${existingAlloc.genFunc}</p>
                    ${existingAlloc.specFunc ? `<p><strong>Specific Function:</strong> ${existingAlloc.specFunc}</p>` : ''}
                    <p style="margin-top: 15px;">Are you adding a secondary/tertiary IP to this subnet?</p>
                `;
                showConfirmDialog('Confirm Secondary IP Assignment', bodyHTML, performSave);
                return; // Wait for user confirmation
            }
        }
    }

    // Check for VNI conflicts requiring confirmation (secondary IP scenario)
    if (vni && vni !== currentEditAllocation.vni) {
        const vniUsage = getVNIUsage(vni);
        if (vniUsage.has(currentEditProtocol)) {
            // Same protocol is already using this VNI - need confirmation for secondary IP
            const existingAlloc = getAllocationByVNI(vni, currentEditProtocol);
            if (existingAlloc) {
                const bodyHTML = `
                    <p><strong>VNI ${vni}</strong> is already assigned to:</p>
                    <p><strong>Subnet:</strong> ${existingAlloc.subnet}/${existingAlloc.prefix}</p>
                    <p><strong>General Function:</strong> ${existingAlloc.genFunc}</p>
                    ${existingAlloc.specFunc ? `<p><strong>Specific Function:</strong> ${existingAlloc.specFunc}</p>` : ''}
                    <p style="margin-top: 15px;">Are you adding a secondary/tertiary IP to this subnet?</p>
                `;
                showConfirmDialog('Confirm Secondary IP Assignment', bodyHTML, performSave);
                return; // Wait for user confirmation
            }
        }
    }

    // No conflicts - proceed with save
    performSave();
}

// Delete allocation from modal
function deleteFromModal() {
    if (!currentEditAllocation || !currentEditProtocol) {
        return;
    }

    const subnet = `${currentEditAllocation.subnet}/${currentEditAllocation.prefix}`;

    if (confirm(`Delete allocation for ${subnet}?\n\nThis will remove the allocation and make child subnets available again.`)) {
        deleteAllocation(currentEditAllocation);
        closeEditModal();
    }
}

// OPTIMIZED: Debounced render function
function debounceRender(protocol, delay = 300) {
    const timerId = debounceTimers.get(protocol);
    if (timerId) {
        clearTimeout(timerId);
    }

    const newTimerId = setTimeout(() => {
        renderHLD(protocol);
        debounceTimers.delete(protocol);
    }, delay);

    debounceTimers.set(protocol, newTimerId);
}

// Generate IPv4 HLD
function generateIPv4HLD() {
    const supernetInput = document.getElementById('ipv4Supernet').value.trim();
    if (!supernetInput) {
        showStatus('Please enter an IPv4 supernet', 'error');
        return;
    }

    const match = supernetInput.match(/^(.+?)\/(\d+)$/);
    if (!match) {
        showStatus('Invalid IPv4 CIDR notation', 'error');
        return;
    }

    const [, address, prefix] = match;
    const prefixLen = parseInt(prefix);
    const minSize = parseInt(document.getElementById('ipv4MinSize').value);

    // Improvement 3: Validate that smallest subnet is more specific than supernet
    if (minSize <= prefixLen) {
        showStatus(`Invalid configuration: Smallest subnet /${minSize} must be more specific than supernet /${prefixLen}`, 'error');
        return;
    }

    ipv4Config = {
        address,
        prefix: prefixLen,
        minSize,
        isIPv6: false
    };

    // Show loading overlay for large hierarchies
    const subnetCount = Math.pow(2, minSize - prefixLen);
    if (subnetCount > 1000) {
        showLoading(true);
    }

    // Use requestAnimationFrame to defer rendering
    requestAnimationFrame(() => {
        rebuildAllocationCache('ipv4');
        renderHLD('ipv4');
        document.getElementById('ipv4HLDContainer').style.display = 'block';
        showLoading(false);
        showStatus('IPv4 HLD generated', 'success');
    });
}

// Generate IPv6 HLD
function generateIPv6HLD() {
    const supernetInput = document.getElementById('ipv6Supernet').value.trim();
    if (!supernetInput) {
        showStatus('Please enter an IPv6 supernet', 'error');
        return;
    }

    const match = supernetInput.match(/^(.+?)\/(\d+)$/);
    if (!match) {
        showStatus('Invalid IPv6 CIDR notation', 'error');
        return;
    }

    const [, address, prefix] = match;
    const prefixLen = parseInt(prefix);
    const minSize = parseInt(document.getElementById('ipv6MinSize').value);

    // Improvement 3: Validate that smallest subnet is more specific than supernet
    if (minSize <= prefixLen) {
        showStatus(`Invalid configuration: Smallest subnet /${minSize} must be more specific than supernet /${prefixLen}`, 'error');
        return;
    }

    ipv6Config = {
        address,
        prefix: prefixLen,
        minSize,
        isIPv6: true
    };

    // Show loading overlay for large hierarchies
    const subnetCount = Math.pow(2, minSize - prefixLen);
    if (subnetCount > 1000) {
        showLoading(true);
    }

    requestAnimationFrame(() => {
        rebuildAllocationCache('ipv6');
        renderHLD('ipv6');
        document.getElementById('ipv6HLDContainer').style.display = 'block';
        showLoading(false);
        showStatus('IPv6 HLD generated', 'success');
    });
}

// OPTIMIZED: Render HLD table using DocumentFragment
function renderHLD(protocol) {
    const config = protocol === 'ipv4' ? ipv4Config : ipv6Config;
    const tableId = protocol + 'Table';

    if (!config) return;

    const startTime = performance.now();

    // Generate hierarchy (now iterative)
    const rows = generateSubnetHierarchy(config.address, config.prefix, config.minSize, config.isIPv6);

    // Create table using DocumentFragment to minimize reflows
    const table = document.getElementById(tableId);
    const fragment = document.createDocumentFragment();

    // Header
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');

    const supernetTh = document.createElement('th');
    supernetTh.textContent = 'Supernet';
    headerRow.appendChild(supernetTh);

    const prefixes = [];
    for (let p = config.prefix + 1; p <= config.minSize; p++) {
        prefixes.push(p);
        const th = document.createElement('th');
        th.textContent = '/' + p;
        th.className = hiddenColumns[protocol].has(p) ? 'col-hidden' : '';
        headerRow.appendChild(th);
    }

    ['Hosts', 'General Function', 'Specific Function'].forEach(label => {
        const th = document.createElement('th');
        th.textContent = label;
        headerRow.appendChild(th);
    });

    thead.appendChild(headerRow);
    fragment.appendChild(thead);

    // Body
    const tbody = document.createElement('tbody');

    // Supernet row
    const supernetRow = document.createElement('tr');
    const supernetCell = document.createElement('td');
    supernetCell.textContent = `${config.address}/${config.prefix}`;
    supernetRow.appendChild(supernetCell);

    for (let i = 0; i < prefixes.length + 3; i++) {
        supernetRow.appendChild(document.createElement('td'));
    }
    tbody.appendChild(supernetRow);

    // OPTIMIZED: Batch row creation with minimal DOM access
    const rowFragment = document.createDocumentFragment();

    rows.forEach(row => {
        // Improvement 2: Skip rows that are children of allocated subnets with specific functions
        if (isSubnetHidden(row.subnet, row.prefix, protocol)) {
            return; // Skip this row entirely
        }

        const tr = document.createElement('tr');

        // Empty cells before
        for (let i = 0; i < row.prefix - config.prefix; i++) {
            tr.appendChild(document.createElement('td'));
        }

        // Subnet cell
        const subnetCell = document.createElement('td');
        subnetCell.className = hiddenColumns[protocol].has(row.prefix) ? 'subnet-cell col-hidden' : 'subnet-cell';
        subnetCell.textContent = `${row.subnet}/${row.prefix}`;

        const status = getSubnetStatus(row.subnet, row.prefix, protocol);

        if (status.allocated) {
            subnetCell.classList.add('allocated');
            subnetCell.style.backgroundColor = status.alloc.color;
            subnetCell.title = `${status.alloc.genFunc} - Click to edit`;
            subnetCell.onclick = () => openEditModal(row.subnet, row.prefix, protocol);
        } else if (status.blocked) {
            subnetCell.classList.add('blocked');
            subnetCell.title = `Blocked by ${status.parent.genFunc}`;
        } else {
            subnetCell.onclick = () => allocateSubnet(row.subnet, row.prefix, protocol);
            subnetCell.title = 'Click to allocate';
        }

        tr.appendChild(subnetCell);

        // Empty cells after
        for (let i = row.prefix + 1; i <= config.minSize; i++) {
            const td = document.createElement('td');
            td.className = hiddenColumns[protocol].has(i) ? 'col-hidden' : '';
            tr.appendChild(td);
        }

        // Hosts
        const hostsCell = document.createElement('td');
        hostsCell.className = 'info-cell';
        hostsCell.textContent = calculateHosts(row.prefix, config.isIPv6);
        tr.appendChild(hostsCell);

        // General Function
        const genFuncCell = document.createElement('td');
        genFuncCell.className = 'info-cell';
        if (status.allocated) {
            const input = document.createElement('input');
            input.value = status.alloc.genFunc;
            // OPTIMIZED: Debounced input handler
            input.oninput = (e) => {
                status.alloc.genFunc = e.target.value;
                debounceRender(protocol, 500);
                debounceUpdateDetailTable();
                debounceUpdateLegend(protocol);
            };
            genFuncCell.appendChild(input);
        }
        tr.appendChild(genFuncCell);

        // Specific Function
        const specFuncCell = document.createElement('td');
        specFuncCell.className = 'info-cell';
        if (status.allocated) {
            const input = document.createElement('input');
            input.value = status.alloc.specFunc;
            // OPTIMIZED: Debounced input handler
            // Improvement 2: Re-render when specific function changes to hide/show child rows
            input.oninput = (e) => {
                status.alloc.specFunc = e.target.value;
                debounceRender(protocol, 500);
                debounceUpdateDetailTable();
            };
            specFuncCell.appendChild(input);
        }
        tr.appendChild(specFuncCell);

        rowFragment.appendChild(tr);
    });

    tbody.appendChild(rowFragment);
    fragment.appendChild(tbody);

    // Single DOM update
    table.innerHTML = '';
    table.appendChild(fragment);

    // Update toggles and legend
    updateColumnToggles(protocol);
    updateLegend(protocol);
    updateDetailTable();

    const endTime = performance.now();
    console.log(`Render time for ${protocol}: ${(endTime - startTime).toFixed(2)}ms, rows: ${rows.length}`);
}

// Column toggles
function updateColumnToggles(protocol) {
    const config = protocol === 'ipv4' ? ipv4Config : ipv6Config;
    const togglesDiv = document.getElementById(protocol + 'Toggles');

    if (!config) return;

    togglesDiv.innerHTML = '<strong>Show/Hide Columns:</strong> ';

    for (let p = config.prefix + 1; p <= config.minSize; p++) {
        const label = document.createElement('label');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = !hiddenColumns[protocol].has(p);
        checkbox.onchange = () => toggleColumn(p, protocol);

        label.appendChild(checkbox);
        label.appendChild(document.createTextNode('/' + p));
        togglesDiv.appendChild(label);
    }
}

// OPTIMIZED: Toggle column with immediate render (no debounce needed for user-initiated action)
function toggleColumn(prefix, protocol) {
    if (hiddenColumns[protocol].has(prefix)) {
        hiddenColumns[protocol].delete(prefix);
    } else {
        hiddenColumns[protocol].add(prefix);
    }

    // Immediate feedback for user action
    requestAnimationFrame(() => renderHLD(protocol));
}

// Allocate subnet (no changes needed - VLAN/VNI tracking happens in detail table)
function allocateSubnet(subnet, prefix, protocol) {
    const genFunc = prompt('Enter General Function:');
    if (!genFunc) return;

    const specFunc = prompt('Enter Specific Function (optional):') || '';

    const color = colorPalette[nextColorIndex++ % colorPalette.length];

    const allocation = {
        subnet,
        prefix,
        genFunc,
        specFunc,
        color,
        vlan: '',
        vni: '',
        isIPv6: protocol === 'ipv6'
    };

    if (protocol === 'ipv4') {
        ipv4Allocations.push(allocation);
    } else {
        ipv6Allocations.push(allocation);
    }

    rebuildAllocationCache(protocol);
    renderHLD(protocol);
    showStatus(`Allocated ${subnet}/${prefix}`, 'success');
}

// OPTIMIZED: Debounced legend update
function debounceUpdateLegend(protocol, delay = 300) {
    const key = `legend-${protocol}`;
    const timerId = debounceTimers.get(key);
    if (timerId) {
        clearTimeout(timerId);
    }

    const newTimerId = setTimeout(() => {
        updateLegend(protocol);
        debounceTimers.delete(key);
    }, delay);

    debounceTimers.set(key, newTimerId);
}

// Update legend
function updateLegend(protocol) {
    const allocations = protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations;
    const legendDiv = document.getElementById(protocol + 'Legend');

    legendDiv.innerHTML = '';

    const uniqueFuncs = {};
    allocations.forEach(alloc => {
        if (!uniqueFuncs[alloc.genFunc]) {
            uniqueFuncs[alloc.genFunc] = alloc.color;
        }
    });

    const fragment = document.createDocumentFragment();
    Object.entries(uniqueFuncs).forEach(([func, color]) => {
        const item = document.createElement('div');
        item.className = 'legend-item';

        const colorBox = document.createElement('div');
        colorBox.className = 'legend-color';
        colorBox.style.backgroundColor = color;

        const label = document.createElement('span');
        label.textContent = func;

        item.appendChild(colorBox);
        item.appendChild(label);
        fragment.appendChild(item);
    });

    legendDiv.appendChild(fragment);
}

// OPTIMIZED: Debounced detail table update
function debounceUpdateDetailTable(delay = 300) {
    const key = 'detail-table';
    const timerId = debounceTimers.get(key);
    if (timerId) {
        clearTimeout(timerId);
    }

    const newTimerId = setTimeout(() => {
        updateDetailTable();
        debounceTimers.delete(key);
    }, delay);

    debounceTimers.set(key, newTimerId);
}

// Update detail table
function updateDetailTable() {
    const tbody = document.getElementById('detailTableBody');
    tbody.innerHTML = '';

    const allAllocations = [...ipv4Allocations, ...ipv6Allocations];

    if (allAllocations.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="7" style="text-align: center; padding: 20px; color: #999;">
                    Allocate subnets in the HLD above to begin planning
                </td>
            </tr>
        `;
        document.getElementById('detailContainer').classList.remove('show');
        return;
    }

    document.getElementById('detailContainer').classList.add('show');

    const fragment = document.createDocumentFragment();

    allAllocations.forEach((alloc) => {
        const row = document.createElement('tr');

        // Protocol
        const protoCell = document.createElement('td');
        protoCell.textContent = alloc.isIPv6 ? 'IPv6' : 'IPv4';
        row.appendChild(protoCell);

        // General Function
        const genFuncCell = document.createElement('td');
        genFuncCell.textContent = alloc.genFunc;
        genFuncCell.style.backgroundColor = alloc.color;
        row.appendChild(genFuncCell);

        // Specific Function
        const specFuncCell = document.createElement('td');
        specFuncCell.textContent = alloc.specFunc;
        row.appendChild(specFuncCell);

        // IP
        const ipCell = document.createElement('td');
        ipCell.style.fontFamily = "'Courier New', monospace";
        ipCell.textContent = `${alloc.subnet}/${alloc.prefix}`;
        row.appendChild(ipCell);

        // VLAN with badge
        const vlanCell = document.createElement('td');
        const vlanContainer = document.createElement('div');
        vlanContainer.style.display = 'flex';
        vlanContainer.style.alignItems = 'center';
        vlanContainer.style.gap = '5px';

        const vlanInput = document.createElement('input');
        vlanInput.type = 'number';
        vlanInput.min = '1';
        vlanInput.max = '4096';
        vlanInput.value = alloc.vlan;
        vlanInput.oninput = (e) => validateVLAN(alloc, e.target);
        vlanInput.style.flex = '1';
        vlanContainer.appendChild(vlanInput);

        // Add badge if VLAN has special status
        if (alloc.vlan) {
            const vlanStatus = getVLANStatus(alloc.vlan);
            if (vlanStatus) {
                const badge = document.createElement('span');
                badge.className = `vlan-badge ${vlanStatus}`;
                badge.textContent = vlanStatus === 'dual-stack' ? 'DS' : 'SEC';
                badge.title = vlanStatus === 'dual-stack' ? 'Dual-Stack (IPv4+IPv6)' : 'Secondary IP';
                vlanContainer.appendChild(badge);
            }
        }

        vlanCell.appendChild(vlanContainer);
        row.appendChild(vlanCell);

        // VNI with badge
        const vniCell = document.createElement('td');
        const vniContainer = document.createElement('div');
        vniContainer.style.display = 'flex';
        vniContainer.style.alignItems = 'center';
        vniContainer.style.gap = '5px';

        const vniInput = document.createElement('input');
        vniInput.type = 'number';
        vniInput.min = '1';
        vniInput.max = '16777215';
        vniInput.value = alloc.vni;
        vniInput.oninput = (e) => validateVNI(alloc, e.target);
        vniInput.style.flex = '1';
        vniContainer.appendChild(vniInput);

        // Add badge if VNI has special status
        if (alloc.vni) {
            const vniStatus = getVNIStatus(alloc.vni);
            if (vniStatus) {
                const badge = document.createElement('span');
                badge.className = `vlan-badge ${vniStatus}`;
                badge.textContent = vniStatus === 'dual-stack' ? 'DS' : 'SEC';
                badge.title = vniStatus === 'dual-stack' ? 'Dual-Stack (IPv4+IPv6)' : 'Secondary IP';
                vniContainer.appendChild(badge);
            }
        }

        vniCell.appendChild(vniContainer);
        row.appendChild(vniCell);

        // Actions
        const actionsCell = document.createElement('td');
        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'btn btn-danger';
        deleteBtn.textContent = 'Delete';
        deleteBtn.style.padding = '4px 8px';
        deleteBtn.style.fontSize = '0.85em';
        deleteBtn.onclick = () => deleteAllocation(alloc);
        actionsCell.appendChild(deleteBtn);
        row.appendChild(actionsCell);

        fragment.appendChild(row);
    });

    tbody.appendChild(fragment);
}

// Validate VLAN in detail table (with dual-stack and secondary IP support)
function validateVLAN(alloc, input) {
    const vlan = parseInt(input.value);
    const protocol = alloc.isIPv6 ? 'ipv6' : 'ipv4';

    // Remove old VLAN usage
    if (alloc.vlan) {
        removeVLANUsage(alloc.vlan, protocol);
    }

    // Empty value is allowed
    if (!input.value || input.value.trim() === '') {
        input.classList.remove('error');
        input.title = '';
        alloc.vlan = '';
        return;
    }

    // Check range
    if (vlan < 1 || vlan > 4096) {
        input.classList.add('error');
        input.title = 'VLAN must be between 1 and 4096';
        alloc.vlan = '';
        return;
    }

    // Function to complete the validation
    const completeValidation = () => {
        input.classList.remove('error');
        input.title = '';
        alloc.vlan = vlan;
        addVLANUsage(vlan, protocol);
        updateDetailTable(); // Refresh to show badges
    };

    // Check VLAN usage by protocol
    const usage = getVLANUsage(vlan);

    // No usage - it's available
    if (usage.size === 0) {
        completeValidation();
        return;
    }

    // Check if used by opposite protocol (dual-stack allowed)
    if (usage.size === 1 && !usage.has(protocol)) {
        // Dual-stack scenario - allowed automatically
        completeValidation();
        return;
    }

    // If used by same protocol - need confirmation for secondary IP
    if (usage.has(protocol)) {
        const existingAlloc = getAllocationByVLAN(vlan, protocol);
        if (existingAlloc && existingAlloc !== alloc) {
            const bodyHTML = `
                <p><strong>VLAN ${vlan}</strong> is already assigned to:</p>
                <p><strong>Subnet:</strong> ${existingAlloc.subnet}/${existingAlloc.prefix}</p>
                <p><strong>General Function:</strong> ${existingAlloc.genFunc}</p>
                ${existingAlloc.specFunc ? `<p><strong>Specific Function:</strong> ${existingAlloc.specFunc}</p>` : ''}
                <p style="margin-top: 15px;">Are you adding a secondary/tertiary IP to this subnet?</p>
            `;
            showConfirmDialog('Confirm Secondary IP Assignment', bodyHTML, () => {
                completeValidation();
            });
            // Set temporary error state until confirmed
            input.classList.add('error');
            input.title = 'Awaiting confirmation for secondary IP';
            alloc.vlan = '';
            return;
        }
    }

    // Both protocols already using this VLAN
    if (usage.size === 2) {
        input.classList.add('error');
        input.title = 'VLAN already in use by both IPv4 and IPv6';
        alloc.vlan = '';
        return;
    }

    completeValidation();
}

// Validate VNI in detail table (with dual-stack and secondary IP support)
function validateVNI(alloc, input) {
    const vni = parseInt(input.value);
    const protocol = alloc.isIPv6 ? 'ipv6' : 'ipv4';

    // Remove old VNI usage
    if (alloc.vni) {
        removeVNIUsage(alloc.vni, protocol);
    }

    // Empty value is allowed
    if (!input.value || input.value.trim() === '') {
        input.classList.remove('error');
        input.title = '';
        alloc.vni = '';
        return;
    }

    // Check range
    if (vni < 1 || vni > 16777215) {
        input.classList.add('error');
        input.title = 'VNI must be between 1 and 16777215';
        alloc.vni = '';
        return;
    }

    // Function to complete the validation
    const completeValidation = () => {
        input.classList.remove('error');
        input.title = '';
        alloc.vni = vni;
        addVNIUsage(vni, protocol);
        updateDetailTable(); // Refresh to show badges
    };

    // Check VNI usage by protocol
    const usage = getVNIUsage(vni);

    // No usage - it's available
    if (usage.size === 0) {
        completeValidation();
        return;
    }

    // Check if used by opposite protocol (dual-stack allowed)
    if (usage.size === 1 && !usage.has(protocol)) {
        // Dual-stack scenario - allowed automatically
        completeValidation();
        return;
    }

    // If used by same protocol - need confirmation for secondary IP
    if (usage.has(protocol)) {
        const existingAlloc = getAllocationByVNI(vni, protocol);
        if (existingAlloc && existingAlloc !== alloc) {
            const bodyHTML = `
                <p><strong>VNI ${vni}</strong> is already assigned to:</p>
                <p><strong>Subnet:</strong> ${existingAlloc.subnet}/${existingAlloc.prefix}</p>
                <p><strong>General Function:</strong> ${existingAlloc.genFunc}</p>
                ${existingAlloc.specFunc ? `<p><strong>Specific Function:</strong> ${existingAlloc.specFunc}</p>` : ''}
                <p style="margin-top: 15px;">Are you adding a secondary/tertiary IP to this subnet?</p>
            `;
            showConfirmDialog('Confirm Secondary IP Assignment', bodyHTML, () => {
                completeValidation();
            });
            // Set temporary error state until confirmed
            input.classList.add('error');
            input.title = 'Awaiting confirmation for secondary IP';
            alloc.vni = '';
            return;
        }
    }

    // Both protocols already using this VNI
    if (usage.size === 2) {
        input.classList.add('error');
        input.title = 'VNI already in use by both IPv4 and IPv6';
        alloc.vni = '';
        return;
    }

    completeValidation();
}

// Delete allocation (updated for new VLAN/VNI tracking)
function deleteAllocation(alloc) {
    const protocol = alloc.isIPv6 ? 'ipv6' : 'ipv4';

    // Remove VLAN/VNI tracking
    if (alloc.vlan) {
        removeVLANUsage(alloc.vlan, protocol);
    }
    if (alloc.vni) {
        removeVNIUsage(alloc.vni, protocol);
    }

    // Remove from allocations array
    if (alloc.isIPv6) {
        ipv6Allocations = ipv6Allocations.filter(a => a !== alloc);
    } else {
        ipv4Allocations = ipv4Allocations.filter(a => a !== alloc);
    }

    rebuildAllocationCache(protocol);
    renderHLD(protocol);
    updateDetailTable();
    showStatus('Allocation removed', 'info');
}

// Clear HLD (updated for new VLAN/VNI tracking)
function clearHLD(protocol) {
    if (confirm(`Clear all ${protocol.toUpperCase()} allocations?`)) {
        if (protocol === 'ipv4') {
            ipv4Allocations = [];
        } else {
            ipv6Allocations = [];
        }

        // Rebuild all tracking from scratch
        rebuildVLANVNITracking();
        rebuildAllocationCache(protocol);
        renderHLD(protocol);
        updateDetailTable();
        showStatus(`${protocol.toUpperCase()} cleared`, 'info');
    }
}

/**
 * Export subnet planning configuration and allocations to JSON
 * Includes supernet configuration, smallest subnet, and all allocations with full details
 */
function exportJSON(protocol) {
    const config = protocol === 'ipv4' ? ipv4Config : ipv6Config;
    const allocations = protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations;

    if (!config) {
        showStatus(`No ${protocol.toUpperCase()} configuration to export. Generate HLD first.`, 'error');
        return;
    }

    // Build JSON export object
    const exportData = {
        version: '1.0',
        exportDate: new Date().toISOString(),
        protocol: protocol,
        configuration: {
            supernet: {
                address: config.address,
                prefix: config.prefix
            },
            smallestSubnet: config.minSize
        },
        allocations: allocations.map(alloc => ({
            subnet: alloc.subnet,
            prefix: alloc.prefix,
            generalFunction: alloc.genFunc || '',
            specificFunction: alloc.specFunc || '',
            vlan: alloc.vlan || '',
            vni: alloc.vni || '',
            color: alloc.color || '#FFFFFF'
        })),
        metadata: {
            totalAllocations: allocations.length,
            exportedBy: 'Subnet Planning Tool - High Level Design'
        }
    };

    // Convert to pretty-printed JSON
    const jsonString = JSON.stringify(exportData, null, 2);

    // Create blob and download
    const blob = new Blob([jsonString], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;

    // Filename with date: subnet_plan_ipv4_2025-12-30.json
    const dateStr = new Date().toISOString().split('T')[0];
    a.download = `subnet_plan_${protocol}_${dateStr}.json`;

    a.click();
    URL.revokeObjectURL(url);

    const message = allocations.length > 0
        ? `Exported ${protocol.toUpperCase()} configuration with ${allocations.length} allocation(s)`
        : `Exported ${protocol.toUpperCase()} configuration (no allocations)`;

    showStatus(message, 'success');
}

/**
 * Import subnet planning configuration and allocations from JSON
 * Validates structure, populates supernet fields, generates HLD, and restores allocations
 */
function importJSON(event, protocol) {
    const file = event.target.files[0];
    if (!file) return;

    // Validate file extension
    if (!file.name.endsWith('.json')) {
        showStatus('Invalid file format. Please select a JSON file.', 'error');
        event.target.value = '';
        return;
    }

    showLoading(true);

    const reader = new FileReader();
    reader.onload = (e) => {
        try {
            // Parse JSON
            const importData = JSON.parse(e.target.result);

            // Validate JSON structure
            const validation = validateImportJSON(importData, protocol);
            if (!validation.valid) {
                showLoading(false);
                showStatus(`Import validation failed: ${validation.error}`, 'error');
                event.target.value = '';
                return;
            }

            // Show confirmation if there are existing allocations
            const currentAllocations = protocol === 'ipv4' ? ipv4Allocations : ipv6Allocations;
            if (currentAllocations.length > 0) {
                showLoading(false);
                const confirmOverwrite = confirm(
                    `Warning: This will replace existing ${protocol.toUpperCase()} configuration and ${currentAllocations.length} allocation(s).\n\n` +
                    `Continue with import?`
                );

                if (!confirmOverwrite) {
                    event.target.value = '';
                    return;
                }
                showLoading(true);
            }

            // Apply the import asynchronously to avoid blocking UI
            setTimeout(() => {
                try {
                    applyImportJSON(importData, protocol);
                    showLoading(false);
                    event.target.value = '';
                } catch (err) {
                    showLoading(false);
                    showStatus(`Import failed: ${err.message}`, 'error');
                    event.target.value = '';
                }
            }, 100);

        } catch (err) {
            showLoading(false);
            showStatus(`Invalid JSON file: ${err.message}`, 'error');
            event.target.value = '';
        }
    };

    reader.onerror = () => {
        showLoading(false);
        showStatus('Error reading file', 'error');
        event.target.value = '';
    };

    reader.readAsText(file);
}

/**
 * Validate imported JSON structure and data
 */
function validateImportJSON(data, targetProtocol) {
    // Check required top-level fields
    if (!data.version) {
        return { valid: false, error: 'Missing version field' };
    }

    if (!data.protocol) {
        return { valid: false, error: 'Missing protocol field' };
    }

    if (!data.configuration) {
        return { valid: false, error: 'Missing configuration object' };
    }

    // Validate protocol match
    if (data.protocol !== targetProtocol) {
        return {
            valid: false,
            error: `Protocol mismatch: importing ${data.protocol.toUpperCase()} into ${targetProtocol.toUpperCase()} tab. Please use the correct tab.`
        };
    }

    // Validate configuration structure
    const config = data.configuration;
    if (!config.supernet || typeof config.supernet !== 'object') {
        return { valid: false, error: 'Invalid configuration.supernet structure' };
    }

    if (!config.supernet.address || typeof config.supernet.address !== 'string') {
        return { valid: false, error: 'Missing or invalid supernet address' };
    }

    if (typeof config.supernet.prefix !== 'number') {
        return { valid: false, error: 'Missing or invalid supernet prefix' };
    }

    if (typeof config.smallestSubnet !== 'number') {
        return { valid: false, error: 'Missing or invalid smallestSubnet' };
    }

    // Validate prefix ranges
    const maxPrefix = data.protocol === 'ipv4' ? 32 : 128;
    const supernetPrefix = config.supernet.prefix;
    const smallestSubnet = config.smallestSubnet;

    if (supernetPrefix < 0 || supernetPrefix >= maxPrefix) {
        return { valid: false, error: `Invalid supernet prefix /${supernetPrefix} for ${data.protocol.toUpperCase()}` };
    }

    if (smallestSubnet <= supernetPrefix || smallestSubnet > maxPrefix) {
        return {
            valid: false,
            error: `Invalid smallest subnet /${smallestSubnet}. Must be more specific than supernet /${supernetPrefix} and <= ${maxPrefix}`
        };
    }

    // Validate CIDR notation (basic check)
    const isIPv6 = data.protocol === 'ipv6';
    if (isIPv6) {
        // Basic IPv6 validation
        if (!config.supernet.address.includes(':')) {
            return { valid: false, error: 'Invalid IPv6 address format' };
        }
    } else {
        // Basic IPv4 validation
        const ipv4Pattern = /^(\d{1,3}\.){3}\d{1,3}$/;
        if (!ipv4Pattern.test(config.supernet.address)) {
            return { valid: false, error: 'Invalid IPv4 address format' };
        }
    }

    // Validate allocations array
    if (!Array.isArray(data.allocations)) {
        return { valid: false, error: 'Allocations must be an array' };
    }

    // Validate each allocation
    for (let i = 0; i < data.allocations.length; i++) {
        const alloc = data.allocations[i];

        if (!alloc.subnet || typeof alloc.subnet !== 'string') {
            return { valid: false, error: `Allocation ${i}: Missing or invalid subnet` };
        }

        if (typeof alloc.prefix !== 'number') {
            return { valid: false, error: `Allocation ${i}: Missing or invalid prefix` };
        }

        if (alloc.prefix < supernetPrefix || alloc.prefix > maxPrefix) {
            return {
                valid: false,
                error: `Allocation ${i}: Invalid prefix /${alloc.prefix}. Must be between /${supernetPrefix} and /${maxPrefix}`
            };
        }

        // Validate VLAN range if present
        if (alloc.vlan && alloc.vlan !== '') {
            const vlan = parseInt(alloc.vlan);
            if (isNaN(vlan) || vlan < 1 || vlan > 4096) {
                return { valid: false, error: `Allocation ${i}: VLAN ${alloc.vlan} out of range (1-4096)` };
            }
        }

        // Validate VNI range if present
        if (alloc.vni && alloc.vni !== '') {
            const vni = parseInt(alloc.vni);
            if (isNaN(vni) || vni < 1 || vni > 16777215) {
                return { valid: false, error: `Allocation ${i}: VNI ${alloc.vni} out of range (1-16777215)` };
            }
        }
    }

    // Check for excessive subnet count (safety limit)
    const subnetCount = Math.pow(2, smallestSubnet - supernetPrefix);
    if (subnetCount > 100000) {
        return {
            valid: false,
            error: `Configuration would generate ${subnetCount.toLocaleString()} subnets. Maximum is 100,000 for performance.`
        };
    }

    return { valid: true };
}

/**
 * Apply validated import data to restore configuration and allocations
 */
function applyImportJSON(data, protocol) {
    const config = data.configuration;
    const isIPv6 = protocol === 'ipv6';

    // Step 1: Populate supernet fields
    const supernetInput = document.getElementById(protocol + 'Supernet');
    const minSizeSelect = document.getElementById(protocol + 'MinSize');

    supernetInput.value = `${config.supernet.address}/${config.supernet.prefix}`;

    // Step 2: Enable and populate smallest subnet dropdown
    enableSmallestSubnetField(protocol);
    minSizeSelect.value = config.smallestSubnet;

    // Step 3: Set configuration object
    if (protocol === 'ipv4') {
        ipv4Config = {
            address: config.supernet.address,
            prefix: config.supernet.prefix,
            minSize: config.smallestSubnet,
            isIPv6: false
        };
    } else {
        ipv6Config = {
            address: config.supernet.address,
            prefix: config.supernet.prefix,
            minSize: config.smallestSubnet,
            isIPv6: true
        };
    }

    // Step 4: Convert imported allocations to internal format
    const newAllocations = data.allocations.map(alloc => ({
        subnet: alloc.subnet,
        prefix: alloc.prefix,
        genFunc: alloc.generalFunction || '',
        specFunc: alloc.specificFunction || '',
        vlan: alloc.vlan || '',
        vni: alloc.vni || '',
        color: alloc.color || '#FFFFFF',
        isIPv6: isIPv6
    }));

    // Step 5: Replace allocations
    if (protocol === 'ipv4') {
        ipv4Allocations = newAllocations;
    } else {
        ipv6Allocations = newAllocations;
    }

    // Step 6: Rebuild all tracking
    rebuildVLANVNITracking();
    rebuildAllocationCache(protocol);

    // Step 7: Generate and render HLD
    renderHLD(protocol);
    document.getElementById(protocol + 'HLDContainer').style.display = 'block';

    // Step 8: Update detail table
    updateDetailTable();

    // Step 9: Show success message with details
    const supernetStr = `${config.supernet.address}/${config.supernet.prefix}`;
    const smallestStr = `/${config.smallestSubnet}`;
    const allocCount = newAllocations.length;

    const successMessage = allocCount > 0
        ? `Successfully imported ${allocCount} allocation(s). Supernet: ${supernetStr}, Smallest: ${smallestStr}`
        : `Successfully imported configuration. Supernet: ${supernetStr}, Smallest: ${smallestStr} (no allocations)`;

    showStatus(successMessage, 'success');
}

// Show loading overlay
function showLoading(show) {
    const overlay = document.getElementById('loadingOverlay');
    if (show) {
        overlay.classList.add('show');
    } else {
        overlay.classList.remove('show');
    }
}

// Show status
function showStatus(message, type = 'info') {
    const statusEl = document.getElementById('statusMessage');
    statusEl.textContent = message;
    statusEl.className = `status-message ${type} show`;
    setTimeout(() => statusEl.classList.remove('show'), 5000);
}

// Improvement 3: Enable smallest subnet field when supernet is entered and validate
function enableSmallestSubnetField(protocol) {
    const supernetInput = protocol === 'ipv4' ?
        document.getElementById('ipv4Supernet') :
        document.getElementById('ipv6Supernet');
    const minSizeSelect = protocol === 'ipv4' ?
        document.getElementById('ipv4MinSize') :
        document.getElementById('ipv6MinSize');

    const supernetValue = supernetInput.value.trim();

    if (supernetValue) {
        const match = supernetValue.match(/^(.+?)\/(\d+)$/);
        if (match) {
            const supernetPrefix = parseInt(match[2]);

            // Validate supernet prefix is in valid range
            const maxPrefix = protocol === 'ipv4' ? 32 : 128;
            const minValidPrefix = protocol === 'ipv4' ? 0 : 0;

            if (supernetPrefix < minValidPrefix || supernetPrefix >= maxPrefix) {
                minSizeSelect.disabled = true;
                minSizeSelect.innerHTML = '<option value="" disabled selected>Invalid supernet prefix</option>';
                return;
            }

            // Clear existing options
            minSizeSelect.innerHTML = '';

            // Dynamically populate with ALL valid options (more specific than supernet)
            // For IPv4: supernet+1 to /32
            // For IPv6: supernet+1 to /128
            let optionsAdded = 0;
            const fragment = document.createDocumentFragment();

            for (let prefix = supernetPrefix + 1; prefix <= maxPrefix; prefix++) {
                const option = document.createElement('option');
                option.value = prefix;
                option.textContent = `/${prefix}`;
                fragment.appendChild(option);
                optionsAdded++;
            }

            minSizeSelect.appendChild(fragment);

            if (optionsAdded > 0) {
                minSizeSelect.disabled = false;

                // Set a reasonable default selection based on protocol
                if (protocol === 'ipv4') {
                    // Default to /24 if available, otherwise first option
                    const defaultPrefix = 24;
                    if (defaultPrefix > supernetPrefix && defaultPrefix <= maxPrefix) {
                        minSizeSelect.value = defaultPrefix;
                    } else {
                        minSizeSelect.value = supernetPrefix + 1;
                    }
                } else {
                    // Default to /64 if available, otherwise first option
                    const defaultPrefix = 64;
                    if (defaultPrefix > supernetPrefix && defaultPrefix <= maxPrefix) {
                        minSizeSelect.value = defaultPrefix;
                    } else {
                        minSizeSelect.value = supernetPrefix + 1;
                    }
                }
            } else {
                minSizeSelect.disabled = true;
                minSizeSelect.innerHTML = '<option value="" disabled selected>No valid options</option>';
            }
        } else {
            minSizeSelect.disabled = true;
            minSizeSelect.innerHTML = '<option value="" disabled selected>Invalid CIDR format</option>';
        }
    } else {
        minSizeSelect.disabled = true;
        minSizeSelect.innerHTML = '<option value="" disabled selected>Enter supernet first</option>';
    }
}

// Initialize event listeners on page load
document.addEventListener('DOMContentLoaded', () => {
    // IPv4 supernet input listener
    const ipv4SupernetInput = document.getElementById('ipv4Supernet');
    ipv4SupernetInput.addEventListener('input', () => {
        enableSmallestSubnetField('ipv4');
    });

    // IPv6 supernet input listener
    const ipv6SupernetInput = document.getElementById('ipv6Supernet');
    ipv6SupernetInput.addEventListener('input', () => {
        enableSmallestSubnetField('ipv6');
    });

    // Edit modal color picker listener
    const editColorInput = document.getElementById('editColor');
    editColorInput.addEventListener('input', updateColorPreview);

    // Edit modal VLAN validation listener
    const editVLANInput = document.getElementById('editVLAN');
    editVLANInput.addEventListener('input', validateEditVLAN);

    // Edit modal VNI validation listener
    const editVNIInput = document.getElementById('editVNI');
    editVNIInput.addEventListener('input', validateEditVNI);

    // Close modal on background click
    const editModal = document.getElementById('editModal');
    editModal.addEventListener('click', (e) => {
        if (e.target === editModal) {
            closeEditModal();
        }
    });

    // Handle Escape key to close modals
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            const editModal = document.getElementById('editModal');
            const confirmDialog = document.getElementById('confirmDialog');

            if (editModal.classList.contains('show')) {
                closeEditModal();
            } else if (confirmDialog.classList.contains('show')) {
                cancelConfirmDialog();
            }
        }
    });

    // Handle Enter key in edit form to save
    const editFormInputs = [
        document.getElementById('editGenFunc'),
        document.getElementById('editSpecFunc'),
        document.getElementById('editVLAN'),
        document.getElementById('editVNI')
    ];

    editFormInputs.forEach(input => {
        input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                saveEditModal();
            }
        });
    });
});
</script>