.. หัวเรื่อง: ผู้ทำแผนที่โทโพโลยีเครือข่ายแบบไดนามิก
.. slug: การทำแผนที่เครือข่ายแบบไดนามิก
.. วันที่: 07-02-2026 12:00:00 UTC
.. แท็ก: ระบบเครือข่าย , เครื่องมือ , โทโพโลยี , lldp , ospf , bgp , การสร้างภาพ , การทำแผนที่เครือข่าย
..หมวดหมู่ : เครื่องมือ
.. ลิงค์:
.. คำอธิบาย: ตัวแมปโทโพโลยีเครือข่าย Zero-trust ที่ประมวลผล CLI เอาท์พุตฝั่งไคลเอ็นต์เพื่อสร้างไดอะแกรมเชิงโต้ตอบ
.. ประเภท: ข้อความ
<style>
    .topology-container {
        max-width: 1400px;
        margin: 20px auto;
        padding: 20px;
    }

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

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

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

    .vendor-ref-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .vendor-ref-section h3 {
        margin-top: 0;
        color: #667eea;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .vendor-ref-layout {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 20px;
        margin-top: 15px;
    }

    .vendor-tabs {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .vendor-tab {
        padding: 12px 16px;
        background: #f5f5f5;
        border: 2px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: #666;
        text-align: left;
        transition: all 0.2s ease;
    }

    .vendor-tab:hover {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

    .vendor-tab.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
    }

    .vendor-commands {
        background: #f9f9f9;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 0;
        position: relative;
    }

    .vendor-commands-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: #667eea;
        color: white;
        border-radius: 6px 6px 0 0;
        font-weight: bold;
        font-size: 14px;
    }

    .vendor-commands pre {
        margin: 0;
        padding: 16px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #333;
        background: white;
        overflow-x: auto;
        border-radius: 0 0 6px 6px;
    }

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

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

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

    .input-section h3 {
        margin-top: 0;
        color: #667eea;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .cli-textarea {
        width: 100%;
        min-height: 200px;
        padding: 14px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        resize: vertical;
        transition: border-color 0.3s ease;
        box-sizing: border-box;
    }

    .cli-textarea:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

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

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

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

    .btn-secondary {
        padding: 12px 24px;
        font-size: 14px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .btn-secondary:hover {
        background: #5568d3;
        transform: translateY(-1px);
    }

    .btn-danger {
        padding: 12px 24px;
        font-size: 14px;
        background: #f44336;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .btn-danger:hover {
        background: #d32f2f;
        transform: translateY(-1px);
    }

    .device-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
        min-height: 40px;
    }

    .device-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .device-chip-label {
        display: flex;
        flex-direction: column;
    }

    .device-chip-hostname {
        font-weight: bold;
    }

    .device-chip-info {
        font-size: 11px;
        opacity: 0.9;
    }

    .device-chip-remove {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;
    }

    .device-chip-remove:hover {
        background: rgba(255,255,255,0.4);
    }

    .view-tabs {
        display: flex;
        gap: 5px;
        margin-bottom: 15px;
        border-bottom: 2px solid #e0e0e0;
    }

    .view-tab {
        padding: 12px 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: #666;
        border-bottom: 3px solid transparent;
        transition: all 0.2s ease;
    }

    .view-tab:hover {
        color: #667eea;
        background: rgba(102, 126, 234, 0.05);
    }

    .view-tab.active {
        color: #667eea;
        border-bottom-color: #667eea;
    }

    .topology-canvas {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        height: 700px;
        position: relative;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #999;
        font-size: 16px;
    }

    .empty-state-icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.5;
    }

    .details-panel {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        display: none;
    }

    .details-panel.visible {
        display: block;
    }

    .details-header {
        font-size: 18px;
        font-weight: bold;
        color: #667eea;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e0e0e0;
    }

    .details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .details-item {
        display: flex;
        flex-direction: column;
    }

    .details-label {
        font-size: 11px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

    .details-value {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    .details-list {
        margin-top: 15px;
    }

    .details-list h4 {
        font-size: 14px;
        color: #667eea;
        margin-bottom: 10px;
    }

    .details-list-item {
        padding: 8px 12px;
        background: #f5f5f5;
        border-radius: 4px;
        margin-bottom: 6px;
        font-size: 13px;
        font-family: 'Courier New', monospace;
    }

    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        font-size: 14px;
        z-index: 10000;
        min-width: 300px;
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .notification.success {
        background: #4CAF50;
        color: white;
    }

    .notification.error {
        background: #f44336;
        color: white;
    }

    .notification.warning {
        background: #ff9800;
        color: white;
    }

    .stats-bar {
        display: flex;
        gap: 20px;
        padding: 15px 20px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
    }

    .stat-label {
        font-size: 11px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #667eea;
    }

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

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

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

    .search-filter-bar {
        display: flex;
        gap: 10px;
        padding: 15px;
        background: white;
        border-radius: 6px;
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        align-items: center;
        flex-wrap: wrap;
    }

    .search-input {
        flex: 1;
        min-width: 200px;
        padding: 10px 14px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }

    .search-input:focus {
        outline: none;
        border-color: #667eea;
    }

    .filter-select {
        padding: 10px 14px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        background: white;
    }

    .topology-storage-section {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .saved-topologies {
        margin-top: 15px;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
    }

    .saved-topology-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: white;
        border-radius: 4px;
        margin-bottom: 8px;
        border: 1px solid #e0e0e0;
    }

    .saved-topology-info {
        flex: 1;
    }

    .saved-topology-name {
        font-weight: bold;
        color: #333;
        font-size: 14px;
    }

    .saved-topology-meta {
        font-size: 12px;
        color: #666;
        margin-top: 4px;
    }

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

    .path-selection-bar {
        padding: 15px;
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
        border-radius: 6px;
        margin-bottom: 15px;
        border: 2px solid #4CAF50;
    }

    .path-selection-bar h4 {
        margin: 0 0 10px 0;
        color: #4CAF50;
        font-size: 14px;
    }

    .path-info {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
    }

    .path-node {
        padding: 8px 14px;
        background: white;
        border-radius: 6px;
        font-weight: bold;
        color: #333;
        border: 2px solid #4CAF50;
    }

    .path-details {
        flex: 1;
        font-size: 13px;
        color: #333;
    }

    @media (max-width: 768px) {
        .topology-container {
            padding: 10px;
        }

        .vendor-ref-layout {
            grid-template-columns: 1fr;
        }

        .button-row {
            flex-direction: column;
        }

        .btn-primary,
        .btn-secondary,
        .btn-danger {
            width: 100%;
        }

        .stats-bar {
            flex-direction: column;
            gap: 10px;
        }

        .topology-canvas {
            height: 500px;
        }

        .search-filter-bar {
            flex-direction: column;
            align-items: stretch;
        }

        .search-input {
            min-width: 100%;
        }

        .sample-topology-selector {
            flex-direction: column;
        }
    }

    .sample-topology-selector {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 10px;
    }

    .sample-topology-selector select {
        flex: 1;
        padding: 10px 14px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        background: white;
        cursor: pointer;
    }

    .sample-topology-selector select:focus {
        border-color: #667eea;
        outline: none;
    }

    .difficulty-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .difficulty-badge.beginner { background: #e8f5e9; color: #2e7d32; }
    .difficulty-badge.intermediate { background: #fff3e0; color: #e65100; }
    .difficulty-badge.advanced { background: #fce4ec; color: #c62828; }

    .training-note {
        margin: 15px 0;
        padding: 15px 20px;
        background: #e3f2fd;
        border-left: 4px solid #1976D2;
        border-radius: 0 6px 6px 0;
        font-size: 14px;
        line-height: 1.6;
        color: #1565C0;
    }

    .training-note strong {
        display: block;
        margin-bottom: 5px;
        color: #0D47A1;
    }

    .vrf-badge {
        display: inline-block;
        padding: 1px 6px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 600;
        margin-left: 4px;
        color: white;
    }

    .route-leak-indicator {
        color: #e74c3c;
        font-weight: 600;
        font-size: 12px;
    }

    .vrf-detail-section {
        margin-top: 10px;
        padding: 10px;
        background: #f5f5f5;
        border-radius: 6px;
        border-left: 3px solid #667eea;
    }

    .vrf-detail-section h5 {
        margin: 0 0 6px 0;
        font-size: 13px;
        color: #333;
    }

    .vrf-detail-item {
        font-size: 12px;
        color: #555;
        margin-bottom: 3px;
    }

    .vrf-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 6px;
    }

    .vrf-legend-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
    }

    .vrf-legend-color {
        width: 12px;
        height: 12px;
        border-radius: 3px;
    }

    /* =========================================================
       WIZARD MODAL — Phase 3
       ========================================================= */

    .wizard-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeOverlay 0.2s ease;
    }

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

    .wizard-modal {
        background: white;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        width: 100%;
        max-width: 680px;
        max-height: 90vh;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        animation: slideUp 0.25s ease;
    }

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

    .wizard-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px 16px;
        border-bottom: 2px solid #f0f0f0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px 12px 0 0;
        color: white;
    }

    .wizard-header h3 {
        margin: 0;
        font-size: 18px;
        color: white;
    }

    .wizard-close-btn {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        flex-shrink: 0;
    }

    .wizard-close-btn:hover {
        background: rgba(255,255,255,0.35);
    }

    .wizard-progress-bar {
        height: 4px;
        background: #e0e0e0;
        position: relative;
        overflow: hidden;
    }

    .wizard-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transition: width 0.35s ease;
    }

    .wizard-body {
        padding: 24px;
        flex: 1;
    }

    .wizard-step-label {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #667eea;
        margin-bottom: 6px;
    }

    .wizard-command-block {
        display: inline-block;
        padding: 8px 14px;
        background: #1e1e2e;
        color: #a6e3a1;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        border-radius: 6px;
        margin: 10px 0 16px;
        word-break: break-all;
    }

    .wizard-command-copy {
        display: inline-block;
        margin-left: 10px;
        padding: 3px 10px;
        background: transparent;
        border: 1px solid #667eea;
        color: #667eea;
        border-radius: 4px;
        font-size: 11px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.15s;
        vertical-align: middle;
    }

    .wizard-command-copy:hover {
        background: #667eea;
        color: white;
    }

    .wizard-textarea {
        width: 100%;
        min-height: 220px;
        padding: 14px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        resize: vertical;
        box-sizing: border-box;
        transition: border-color 0.25s;
        line-height: 1.5;
    }

    .wizard-textarea:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .wizard-textarea.invalid {
        border-color: #f44336;
    }

    .wizard-inline-error {
        color: #f44336;
        font-size: 13px;
        margin-top: 6px;
        display: none;
    }

    .wizard-validation-warning {
        background: #fff8e1;
        border: 1px solid #f9a825;
        border-radius: 6px;
        padding: 12px 16px;
        font-size: 13px;
        color: #5d4037;
        margin-top: 10px;
        display: none;
    }

    .wizard-validation-warning strong {
        color: #e65100;
        display: block;
        margin-bottom: 6px;
    }

    .wizard-validation-actions {
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }

    .wizard-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        border-top: 1px solid #f0f0f0;
        gap: 10px;
        flex-wrap: wrap;
    }

    .wizard-back-link {
        background: none;
        border: none;
        color: #667eea;
        cursor: pointer;
        font-size: 14px;
        padding: 0;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .wizard-back-link:hover {
        color: #5568d3;
    }

    .wizard-btn-row {
        display: flex;
        gap: 10px;
    }

    .btn-wizard-skip {
        padding: 10px 20px;
        font-size: 14px;
        background: transparent;
        color: #888;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.2s;
    }

    .btn-wizard-skip:hover {
        border-color: #999;
        color: #555;
    }

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

    .btn-wizard-next:hover {
        background: #43a047;
        transform: translateY(-1px);
    }

    .btn-wizard-finalize {
        padding: 10px 24px;
        font-size: 14px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s;
    }

    .btn-wizard-finalize:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    /* Step 0 — Identity form */
    .wizard-identity-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .wizard-field-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .wizard-field-group label {
        font-size: 13px;
        font-weight: 600;
        color: #444;
    }

    .wizard-text-input,
    .wizard-select {
        width: 100%;
        padding: 12px 14px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        box-sizing: border-box;
        transition: border-color 0.25s;
        background: white;
    }

    .wizard-text-input:focus,
    .wizard-select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* Summary step */
    .wizard-summary-list {
        list-style: none;
        padding: 0;
        margin: 16px 0;
    }

    .wizard-summary-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 6px;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .wizard-summary-list li:nth-child(odd) {
        background: #f9f9f9;
    }

    .wizard-summary-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }

    .wizard-summary-icon.submitted {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .wizard-summary-icon.skipped {
        background: #f5f5f5;
        color: #999;
    }

    .wizard-summary-cmd {
        flex: 1;
    }

    .wizard-summary-status {
        font-size: 12px;
        font-weight: 600;
        color: #999;
    }

    .wizard-summary-status.submitted {
        color: #4CAF50;
    }

    .wizard-summary-identity {
        padding: 14px 16px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
        border-radius: 8px;
        border-left: 4px solid #667eea;
        font-size: 14px;
        margin-bottom: 6px;
    }

    .wizard-summary-identity strong {
        font-size: 16px;
        display: block;
        margin-bottom: 4px;
        color: #333;
    }

    .wizard-summary-vendor-badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Quick-add (legacy) section toggle */
    .quick-add-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 0 0;
        cursor: pointer;
        color: #667eea;
        font-size: 13px;
        font-weight: 600;
        border: none;
        background: none;
        text-decoration: none;
        user-select: none;
    }

    .quick-add-toggle:hover {
        color: #5568d3;
    }

    .quick-add-caret {
        display: inline-block;
        transition: transform 0.2s;
        font-style: normal;
    }

    .quick-add-caret.open {
        transform: rotate(90deg);
    }

    .quick-add-body {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .quick-add-body.open {
        max-height: 600px;
    }

    /* Devices collected list */
    .wizard-collected-list {
        margin-top: 16px;
    }

    .wizard-collected-list h4 {
        font-size: 13px;
        font-weight: 700;
        color: #667eea;
        margin: 0 0 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .wizard-collected-empty {
        color: #999;
        font-size: 13px;
        font-style: italic;
    }

    @media (max-width: 768px) {
        .wizard-modal {
            max-height: 95vh;
        }

        .wizard-textarea {
            min-height: 200px;
        }

        .wizard-footer {
            flex-direction: column;
            align-items: stretch;
        }

        .wizard-btn-row {
            width: 100%;
            justify-content: flex-end;
        }
    }
</style>
<div class="topology-container">
<div class="calc-header">
<h2>ตัวทำแผนที่โทโพโลยีเครือข่ายแบบไดนามิก</h2>
<p>เครื่องมือแสดงภาพเครือข่ายแบบ Zero-trust ที่ประมวลผลเอาต์พุตของ CLI ฝั่งไคลเอ็นต์ทั้งหมด วางเอาต์พุตจากอุปกรณ์หลายเครื่องเพื่อสร้างไดอะแกรมโทโพโลยีเชิงโต้ตอบโดยอัตโนมัติ รองรับ Cisco IOS/NX-OS, Aruba AOS-CX, Juniper JunOS, VyOS, Palo Alto, Fortigate และ SONiC</p>
<p style="font-size: 13px; opacity: 0.8;"><strong>รับประกันความเป็นส่วนตัว:</strong>การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใด ๆ</p>
</div>
<div class="vendor-ref-section">
<h3>การอ้างอิงคำสั่งของผู้ขาย</h3>
<p style="margin-bottom: 15px; color: #666; font-size: 14px;">เลือกผู้จำหน่ายอุปกรณ์ของคุณเพื่อดูคำสั่ง CLI ที่แนะนำสำหรับการค้นหาเครือข่าย:</p>
<div class="vendor-ref-layout">
<div class="vendor-tabs">
<button class="vendor-tab active" onclick="showVendorCommands('cisco-ios')" type="button">ซิสโก้ IOS/IOS-XE</button>
<button class="vendor-tab" onclick="showVendorCommands('cisco-nxos')" type="button">ซิสโก้ NX-OS</button>
<button class="vendor-tab" onclick="showVendorCommands('aruba')" type="button">อารูบา AOS-CX</button>
<button class="vendor-tab" onclick="showVendorCommands('juniper')" type="button">จูนิเปอร์ JunOS</button>
<button class="vendor-tab" onclick="showVendorCommands('vyos')" type="button">วีโอเอส</button>
<button class="vendor-tab" onclick="showVendorCommands('paloalto')" type="button">พาโลอัลโต PAN-OS</button>
<button class="vendor-tab" onclick="showVendorCommands('fortigate')" type="button">เสริมความแข็งแกร่งให้กับ FortiOS</button>
<button class="vendor-tab" onclick="showVendorCommands('sonic')" type="button">บรอดคอม SONiC</button>
<button class="vendor-tab" onclick="showVendorCommands('arista')" type="button">อาริสต้า EOS</button>
</div>
<div class="vendor-commands">
<div class="vendor-commands-header">
<span id="vendorCommandsTitle">คำสั่ง Cisco IOS/IOS-XE</span>
<button class="copy-btn" onclick="copyVendorCommands()" type="button">คัดลอกทั้งหมด</button>
</div>
<pre id="vendorCommandsContent">show lldp neighbors
show lldp neighbors detail
show mac address-table
show ip ospf neighbor
show ip bgp summary
show cdp neighbors detail
show interfaces status
show vlan brief</pre>
</div>
</div>
</div>
======================================================
         ตัวช่วยสร้าง MODAL (ซ่อนไว้โดยค่าเริ่มต้น)
         ======================================================
<div aria-labelledby="wizardTitle" aria-modal="true" class="wizard-overlay" id="wizardOverlay" role="dialog" style="display: none;">
<div class="wizard-modal" id="wizardModal">
<div class="wizard-header">
<h3 id="wizardTitle">เพิ่มอุปกรณ์ — ตัวช่วยสร้าง</h3>
<button aria-label="Close wizard" class="wizard-close-btn" onclick="closeWizard()" type="button">✕</button>
</div>
<div class="wizard-progress-bar">
<div class="wizard-progress-fill" id="wizardProgressFill" style="width: 0%;"></div>
</div>
<div class="wizard-body" id="wizardBody">
เรนเดอร์โดย JS
</div>
<div class="wizard-footer" id="wizardFooter">
เรนเดอร์โดย JS
</div>
</div>
</div>
<div class="input-section">
<h3>ขั้นตอนที่ 1: เพิ่มอุปกรณ์</h3>
รายการตัวช่วยสร้างเปิดตัว + อุปกรณ์ที่รวบรวม
<div style="margin-bottom: 16px;">
<div class="button-row" style="margin-top: 0;">
<button class="btn-primary" onclick="openWizard()" type="button">เพิ่มอุปกรณ์ (ตัวช่วยสร้าง)</button>
</div>
<div class="wizard-collected-list" id="wizardCollectedList">
<div class="wizard-collected-empty">ยังไม่มีอุปกรณ์เพิ่ม — ใช้วิซาร์ดหรือเพิ่มด่วนด้านล่าง</div>
</div>
</div>
เพิ่มด่วนแบบเดิม (ยุบ)
<button aria-controls="quickAddBody" aria-expanded="false" class="quick-add-toggle" onclick="toggleQuickAdd(this)" type="button">
<i aria-hidden="true" class="quick-add-caret">►</i>ขั้นสูง / เพิ่มด่วน (วางเอาต์พุต CLI แบบดิบ)</button>
<div aria-hidden="true" class="quick-add-body" id="quickAddBody">
<div style="padding-top: 14px;">
<div style="margin-bottom: 10px;">
<label style="font-size: 13px; font-weight: 600; color: #555;">ผู้ขาย (ไม่บังคับ — ตรวจพบอัตโนมัติหากเว้นว่างไว้):</label>
<select id="quickAddVendor" style="margin-left: 8px; padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
<option value="">ตรวจจับอัตโนมัติ</option>
<option value="cisco-ios">ซิสโก้ IOS/IOS-XE</option>
<option value="cisco-nxos">ซิสโก้ NX-OS</option>
<option value="aruba-aoscx">อารูบา AOS-CX</option>
<option value="juniper-junos">จูนิเปอร์ JunOS</option>
<option value="vyos">วีโอเอส</option>
<option value="paloalto">พาโลอัลโต PAN-OS</option>
<option value="fortios">ฟอร์ติโอเอส</option>
<option value="sonic">บรอดคอม SONiC</option>
<option value="arista-eos">อาริสต้า EOS</option>
</select>
</div>
<p style="font-size: 12px; color: #888; margin: 0 0 8px;">วางคำสั่งตั้งแต่หนึ่งคำสั่งขึ้นไปจากอุปกรณ์เดียว เครื่องมือจะตรวจจับอัตโนมัติว่ามีคำสั่งใดอยู่เมื่อพรอมต์ของอุปกรณ์ (เช่น Switch01#) นำหน้าแต่ละคำสั่ง</p>
<textarea class="cli-textarea" id="cliInput" placeholder="Paste all CLI output from one device here. Include the device prompt (e.g., Switch01#) before each command for auto-detection.

Example (multi-command paste-all):
Switch01# show lldp neighbors
Device ID           Local Intf     Hold-time  Capability      Port ID
Switch02            Gi1/0/1        120        B,R             Gi2/0/5

Switch01# show ip ospf neighbor
Neighbor ID     Pri   State           Dead Time   Address         Interface
10.0.0.2        1     FULL/DR         00:00:32    192.168.1.2     GigabitEthernet0/1
..."></textarea>
<div class="button-row">
<button class="btn-primary" onclick="processAndAddDevice()" type="button">ประมวลผลและเพิ่มอุปกรณ์</button>
<button class="btn-secondary" onclick="clearInput()" type="button">ล้างอินพุต</button>
</div>
<div class="sample-topology-selector">
<select id="sampleTopologySelect">
<option value="">-- เลือกโทโพโลยีตัวอย่าง --</option>
</select>
<button class="btn-secondary" onclick="loadSelectedSampleTopology()" type="button">โหลดตัวอย่าง</button>
</div>
<div class="device-chips" id="deviceChips" style="margin-top: 12px;">
<div style="color: #999; font-size: 13px; font-style: italic;">ยังไม่มีอุปกรณ์เพิ่ม</div>
</div>
</div>
</div>
</div>
<div class="input-section">
<h3>ขั้นตอนที่ 2: การจัดการโทโพโลยี</h3>
<div class="button-row topology-storage-section">
<button class="btn-primary" onclick="generateTopology()" type="button">สร้างโทโพโลยี</button>
<button class="btn-secondary" onclick="saveTopologyToStorage()" type="button">บันทึกโทโพโลยี</button>
<button class="btn-secondary" onclick="loadTopologyFromStorage()" type="button">โหลดที่บันทึกไว้</button>
<button class="btn-secondary" onclick="exportTopologyJSON()" type="button">ส่งออก JSON</button>
<button class="btn-secondary" onclick="importTopologyJSON()" type="button">นำเข้า JSON</button>
<button class="btn-secondary" onclick="exportPNG()" type="button">ส่งออก PNG</button>
<button class="btn-secondary" onclick="exportSVG()" type="button">ส่งออก SVG</button>
<button class="btn-danger" onclick="clearAll()" type="button">ล้างทั้งหมด</button>
</div>
<div id="savedTopologiesContainer" style="display: none;">
<div class="saved-topologies">
<h4 style="margin-top: 0; color: #667eea;">โทโพโลยีที่บันทึกไว้</h4>
<div id="savedTopologiesList"></div>
</div>
</div>
</div>
<div id="topologySection" style="display: none;">
<div class="stats-bar" id="statsBar">
<div class="stat-item">
<span class="stat-label">อุปกรณ์</span>
<span class="stat-value" id="statDevices">0</span>
</div>
<div class="stat-item">
<span class="stat-label">ลิงค์</span>
<span class="stat-value" id="statLinks">0</span>
</div>
<div class="stat-item">
<span class="stat-label">OSPF ที่อยู่ติดกัน</span>
<span class="stat-value" id="statOSPF">0</span>
</div>
<div class="stat-item">
<span class="stat-label">เพื่อนร่วมงาน BGP</span>
<span class="stat-value" id="statBGP">0</span>
</div>
<div class="stat-item">
<span class="stat-label">VRF</span>
<span class="stat-value" id="statVRFs">0</span>
</div>
</div>
<div class="search-filter-bar">
<input class="search-input" id="searchInput" oninput="filterTopology()" placeholder="Search devices, interfaces, or IP addresses..." type="text"/>
<select class="filter-select" id="roleFilter" onchange="filterTopology()">
<option value="all">ทุกบทบาท</option>
<option value="edge">เราเตอร์ขอบ</option>
<option value="core">สวิตช์หลัก</option>
<option value="distribution">การกระจาย</option>
<option value="firewall">ไฟร์วอลล์</option>
<option value="dmz">เขตปลอดอากร</option>
<option value="access">สวิตช์การเข้าถึง</option>
<option value="unknown">ไม่ทราบ</option>
</select>
<button class="btn-secondary" onclick="clearFilters()" type="button">ล้างตัวกรอง</button>
<label style="display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-left: 12px; cursor: pointer;">
<input id="showEndpoints" onchange="toggleEndpoints(this.checked)" type="checkbox"/>แสดงจุดสิ้นสุด (ARP/MAC)</label>
</div>
<div id="pathSelectionBar" style="display: none;"></div>
<div class="view-tabs">
<button class="view-tab active" onclick="switchView('physical')" type="button">มุมมองทางกายภาพ</button>
<button class="view-tab" onclick="switchView('logical')" type="button">มุมมองแบบลอจิคัล</button>
<button class="view-tab" onclick="switchView('overlay')" type="button">มุมมองโอเวอร์เลย์/อันเดอร์เลย์</button>
</div>
<div class="topology-canvas" id="topologyCanvas">
<div class="empty-state">
<div class="empty-state-icon">🌐</div>
<div>คลิก "สร้างโทโพโลยี" เพื่อแสดงภาพเครือข่ายของคุณ</div>
</div>
</div>
<div class="legend" id="legend">
<div class="legend-item">
<div class="legend-color" style="background: #f44336;"></div>
<span>เราเตอร์ขอบ</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #4CAF50;"></div>
<span>สวิตช์หลัก</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #2196F3;"></div>
<span>การกระจาย</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #FF9800;"></div>
<span>ไฟร์วอลล์</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #E91E63;"></div>
<span>เขตปลอดอากร</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #9C27B0;"></div>
<span>สวิตช์การเข้าถึง</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #607D8B;"></div>
<span>ไม่ทราบ</span>
</div>
</div>
<div class="details-panel" id="detailsPanel">
<div class="details-header" id="detailsHeader">รายละเอียดอุปกรณ์</div>
<div class="details-grid" id="detailsGrid"></div>
<div class="details-list" id="detailsList"></div>
</div>
</div>
</div>
<input accept=".json" id="jsonImportInput" onchange="handleJSONImport(event)" style="display: none;" type="file"/>
<script src="https://unpkg.com/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-cose-bilkent@4.1.0/cytoscape-cose-bilkent.js"></script>
<script src="/assets/js/dnm-core.js"></script>
<script src="/assets/js/dnm-vendor-arista.js"></script>
<script src="/assets/js/dnm-vendor-aruba.js"></script>
<script src="/assets/js/dnm-vendor-cisco.js"></script>
<script src="/assets/js/dnm-vendor-dell.js"></script>
<script src="/assets/js/dnm-vendor-fortios.js"></script>
<script src="/assets/js/dnm-vendor-hpe.js"></script>
<script src="/assets/js/dnm-vendor-juniper.js"></script>
<script src="/assets/js/dnm-vendor-mikrotik.js"></script>
<script src="/assets/js/dnm-vendor-paloalto.js"></script>
<script src="/assets/js/dnm-vendor-sonic.js"></script>
<script src="/assets/js/dnm-vendor-vyos.js"></script>
<script>
'use strict';

/**
 * Dynamic Network Topology Mapper
 * Zero-trust, client-side network visualization tool
 *
 * Version: 3.1.1
 * Last Updated: 2026-03-23
 */

// Explicitly register cose-bilkent extension (auto-registration can fail in some environments)
if (typeof cytoscape !== 'undefined' && typeof cytoscapeCoseBilkent !== 'undefined') {
    cytoscape.use(cytoscapeCoseBilkent);
}

// Check if cose-bilkent layout is available; fall back to built-in 'cose' if not
const LAYOUT_NAME = (function() {
    if (typeof cytoscape !== 'undefined') {
        try {
            // Test if cose-bilkent is registered by checking layout prototype
            const testDiv = document.createElement('div');
            testDiv.style.width = '1px';
            testDiv.style.height = '1px';
            document.body.appendChild(testDiv);
            const testCy = cytoscape({ container: testDiv, elements: [], layout: { name: 'cose-bilkent' } });
            testCy.destroy();
            testDiv.remove();
            return 'cose-bilkent';
        } catch (e) {
            console.warn('cose-bilkent layout not available, falling back to built-in cose layout');
            return 'cose';
        }
    }
    return 'cose';
})();

// Global state
let devicesData = [];
let cy = null;
let currentView = 'physical';
let pathSelectionMode = false;
let pathSourceNode = null;
let pathTargetNode = null;
let currentFilters = {
    search: '',
    role: 'all',
    vlan: 'all',
    vrf: 'all'
};

// VRF color palette - deterministic assignment
const VRF_COLORS = [
    '#1abc9c', '#3498db', '#9b59b6', '#e67e22', '#e74c3c',
    '#2ecc71', '#f39c12', '#1e90ff', '#ff6b6b', '#a29bfe',
    '#fd79a8', '#00cec9', '#6c5ce7', '#fdcb6e', '#e17055'
];
const vrfColorMap = new Map();
let vrfColorIndex = 0;

function getVRFColor(vrfName) {
    if (vrfName === 'global') return '#607D8B';
    if (!vrfColorMap.has(vrfName)) {
        vrfColorMap.set(vrfName, VRF_COLORS[vrfColorIndex % VRF_COLORS.length]);
        vrfColorIndex++;
    }
    return vrfColorMap.get(vrfName);
}

// Device role classification — includes EVPN fabric roles (spine/leaf/borderleaf/superspine)
const ROLE_COLORS = {
    superspine: '#B71C1C',
    spine: '#E53935',
    borderleaf: '#F57C00',
    leaf: '#43A047',
    edge: '#f44336',
    router: '#FF7043',
    core: '#4CAF50',
    distribution: '#2196F3',
    firewall: '#FF9800',
    dmz: '#E91E63',
    access: '#9C27B0',
    'oob-switch': '#78909C',
    server: '#5C6BC0',
    unknown: '#607D8B'
};

const ROLE_RANKS = {
    superspine: 0,
    spine: 1,
    borderleaf: 2,
    leaf: 3,
    edge: 0,
    router: 1,
    core: 1,
    distribution: 2,
    firewall: 3,
    dmz: 4,
    access: 5,
    'oob-switch': 6,
    server: 7,
    unknown: 8
};

// Sample topology manifest
const SAMPLE_TOPOLOGIES = [
    { id: 'small-office', name: 'Small Office', difficulty: 'beginner', deviceCount: 3, description: 'Basic ISP edge, firewall, and access switch topology' },
    { id: 'branch-office', name: 'Branch Office', difficulty: 'beginner', deviceCount: 3, description: 'Branch site with WAN router, firewall, and LAN switch' },
    { id: 'campus-3tier', name: 'Campus Core-Distribution-Access', difficulty: 'intermediate', deviceCount: 8, description: 'Classic Cisco 3-tier hierarchical campus design with OSPF' },
    { id: 'dmz-architecture', name: 'DMZ Architecture', difficulty: 'intermediate', deviceCount: 5, description: 'Dual-firewall DMZ pattern with security zones' },
    { id: 'vrf-multitenant', name: 'VRF Multi-Tenant', difficulty: 'intermediate', deviceCount: 4, description: 'L3VPN multi-tenancy with isolated customer VRFs on PE routers' },
    { id: 'enterprise-campus', name: 'Enterprise Campus', difficulty: 'advanced', deviceCount: 13, description: 'Full enterprise hierarchy with all role types from edge to access' },
    { id: 'dc-spine-leaf', name: 'Data Center Spine-Leaf', difficulty: 'advanced', deviceCount: 8, description: 'Modern CLOS fabric with eBGP underlay and ToR switches' },
    { id: 'vxlan-evpn-fabric', name: 'VXLAN EVPN Fabric', difficulty: 'advanced', deviceCount: 6, description: 'VXLAN BGP EVPN fabric with L2VNI, L3VNI, and tenant VRFs' },
    { id: 'vrf-route-leaking', name: 'VRF Route Leaking', difficulty: 'advanced', deviceCount: 3, description: 'Inter-VRF route leaking with shared services and RT export/import' }
];

// Vendor command templates
const VENDOR_COMMANDS = {
    'cisco-ios': {
        title: 'Cisco IOS/IOS-XE Commands',
        commands: `show lldp neighbors
show lldp neighbors detail
show mac address-table
show ip ospf neighbor
show ip bgp summary
show cdp neighbors detail
show interfaces status
show vlan brief
show ip vrf
show ip vrf detail
show ip route vrf <name>
show ip ospf vrf <name> neighbor
show ip bgp vpnv4 vrf <name> summary
show vxlan vni
show nve peers`
    },
    'cisco-nxos': {
        title: 'Cisco NX-OS Commands',
        commands: `show lldp neighbors
show lldp neighbors detail
show mac address-table
show ip ospf neighbors
show ip bgp summary
show interface status
show vlan brief
show vrf
show vrf detail
show ip route vrf <name>
show ip ospf vrf <name> neighbors
show ip bgp vrf <name> summary
show vxlan
show nve interface
show nve peers`
    },
    'aruba': {
        title: 'Aruba AOS-CX Commands',
        commands: `show lldp neighbor-info
show mac-address-table
show ip ospf neighbors
show vlan
show interface brief
show vrf
show ip route vrf <name>
show ospf vrf <name> neighbor
show bgp vrf <name> summary`
    },
    'juniper': {
        title: 'Juniper JunOS Commands',
        commands: `show lldp neighbors
show ethernet-switching table
show ospf neighbor
show bgp summary
show interfaces terse
show vlans
show route instance
show ospf neighbor instance <name>
show bgp neighbor instance <name>
show evpn instance`
    },
    'vyos': {
        title: 'VyOS Commands',
        commands: `show lldp neighbors
show bridge fdb
show ip ospf neighbor
show ip bgp summary
show interfaces
show vrf
show ospf vrf <name> neighbor
show bgp vrf <name> summary`
    },
    'paloalto': {
        title: 'Palo Alto PAN-OS Commands',
        commands: `show lldp neighbors all
show arp all
show routing protocol ospf neighbor
show routing protocol bgp summary
show interface all
show routing route`
    },
    'fortigate': {
        title: 'Fortigate FortiOS Commands',
        commands: `diagnose lldprx neighbor summary
diagnose lldprx neighbor details
get system arp
get router info ospf neighbor
get router info bgp summary
get system interface physical
diagnose sys vd list`
    },
    'sonic': {
        title: 'Broadcom SONiC Commands',
        commands: `show lldp table
show mac address-table
show ip ospf neighbor
show ip ospf vrf all neighbor
show bgp ipv4 unicast vrf all summary
show bgp ipv6 unicast vrf all summary
show bgp l2vpn evpn summary
show interfaces status
show Vlan
show ip vrf
show vxlan vlanvnimap
show vxlan tunnel`
    },
    'arista': {
        title: 'Arista EOS Commands',
        commands: `show lldp neighbors
show lldp neighbors detail
show mac address-table
show ip ospf neighbor vrf all
show ip bgp summary vrf all
show interfaces status
show vlan brief
show vrf
show ip route vrf all
show vxlan vni
show vxlan vtep`
    }
};

/**
 * Vendor command metadata — maps vendor key to ordered list of commands with parse-type hints.
 * parseType values correspond to the parser cascade in parseLLDP / parseBGP / parseOSPF / parseVRFs / parseVXLAN.
 * Used by the input wizard (Phase 3) to prompt for the right commands per vendor.
 */
const VENDOR_COMMAND_META = {
    'cisco-ios': [
        { key: 'lldp_brief',  cmd: 'show lldp neighbors',        label: 'LLDP Neighbors (brief)',    parseType: 'lldp_tabular' },
        { key: 'lldp_detail', cmd: 'show lldp neighbors detail',  label: 'LLDP Neighbors (detail)',   parseType: 'lldp_block'   },
        { key: 'ospf',        cmd: 'show ip ospf neighbor',       label: 'OSPF Neighbors',             parseType: 'ospf'         },
        { key: 'bgp',         cmd: 'show ip bgp summary',         label: 'BGP Summary',                parseType: 'bgp'          },
        { key: 'vrf',         cmd: 'show ip vrf',                 label: 'VRF List',                   parseType: 'vrf'          },
        { key: 'vrf_detail',  cmd: 'show ip vrf detail',          label: 'VRF Detail (route targets)', parseType: 'vrf_detail'  },
        { key: 'vlan',        cmd: 'show vlan brief',             label: 'VLAN Table',                 parseType: 'vlan'         },
        { key: 'arp',         cmd: 'show ip arp',                 label: 'ARP Table',                  parseType: 'arp_cisco'    },
        { key: 'mac',         cmd: 'show mac address-table',      label: 'MAC Address Table',           parseType: 'mac_cisco'    }
    ],
    'cisco-nxos': [
        { key: 'lldp_brief',  cmd: 'show lldp neighbors',         label: 'LLDP Neighbors (brief)',  parseType: 'lldp_tabular' },
        { key: 'lldp_detail', cmd: 'show lldp neighbors detail',  label: 'LLDP Neighbors (detail)', parseType: 'lldp_block'   },
        { key: 'ospf',        cmd: 'show ip ospf neighbors',      label: 'OSPF Neighbors',           parseType: 'ospf'         },
        { key: 'bgp',         cmd: 'show ip bgp summary',         label: 'BGP Summary',              parseType: 'bgp_nxos'     },
        { key: 'vrf',         cmd: 'show vrf',                    label: 'VRF List',                 parseType: 'vrf_nxos'     },
        { key: 'vxlan',       cmd: 'show nve vni',                label: 'VXLAN VNI Table',          parseType: 'vxlan_nxos'   },
        { key: 'nve_peers',   cmd: 'show nve peers',              label: 'NVE Peers',                parseType: 'nve_peers'    },
        { key: 'arp',         cmd: 'show ip arp',                 label: 'ARP Table',                parseType: 'arp_cisco'    },
        { key: 'mac',         cmd: 'show mac address-table',      label: 'MAC Address Table',        parseType: 'mac_cisco'    }
    ],
    'aruba-aoscx': [
        { key: 'lldp_brief',  cmd: 'show lldp neighbor-info',         label: 'LLDP Neighbors (brief)',  parseType: 'lldp_aruba' },
        { key: 'lldp_detail', cmd: 'show lldp neighbor-info detail',  label: 'LLDP Neighbors (detail)', parseType: 'lldp_block' },
        { key: 'ospf',        cmd: 'show ip ospf neighbors',          label: 'OSPF Neighbors',           parseType: 'ospf'       },
        { key: 'bgp',         cmd: 'show bgp vrf default summary',    label: 'BGP Summary',              parseType: 'bgp'        },
        { key: 'vrf',         cmd: 'show vrf',                        label: 'VRF List',                 parseType: 'vrf_aruba'  },
        { key: 'arp',         cmd: 'show arp',                        label: 'ARP Table',                parseType: 'arp_aruba'  },
        { key: 'mac',         cmd: 'show mac-address-table',          label: 'MAC Address Table',        parseType: 'mac_aruba'  }
    ],
    'juniper-junos': [
        { key: 'lldp_brief',  cmd: 'show lldp neighbors',   label: 'LLDP Neighbors',     parseType: 'lldp_junos'  },
        { key: 'ospf',        cmd: 'show ospf neighbor',     label: 'OSPF Neighbors',     parseType: 'ospf_junos'  },
        { key: 'bgp',         cmd: 'show bgp summary',       label: 'BGP Summary',        parseType: 'bgp_junos'   },
        { key: 'vrf',         cmd: 'show route instance',    label: 'Routing Instances',  parseType: 'vrf_junos'   },
        { key: 'arp',         cmd: 'show arp no-resolve',    label: 'ARP Table',          parseType: 'arp_junos'   },
        { key: 'mac',         cmd: 'show ethernet-switching table', label: 'MAC Table',   parseType: 'mac_junos'   }
    ],
    'vyos': [
        { key: 'lldp_brief',  cmd: 'show lldp neighbors',   label: 'LLDP Neighbors',  parseType: 'lldp_vyos' },
        { key: 'ospf',        cmd: 'show ip ospf neighbor', label: 'OSPF Neighbors',  parseType: 'ospf'       },
        { key: 'bgp',         cmd: 'show ip bgp summary',   label: 'BGP Summary',     parseType: 'bgp'        },
        { key: 'vrf',         cmd: 'show vrf',               label: 'VRF List',        parseType: 'vrf_vyos'  },
        { key: 'arp',         cmd: 'show arp',               label: 'ARP Table',       parseType: 'arp_generic' }
    ],
    'paloalto': [
        { key: 'lldp',  cmd: 'show lldp neighbors all',              label: 'LLDP Neighbors',   parseType: 'lldp_paloalto'  },
        { key: 'bgp',   cmd: 'show routing protocol bgp summary',    label: 'BGP Summary',      parseType: 'bgp_paloalto'   },
        { key: 'ospf',  cmd: 'show routing protocol ospf neighbor',  label: 'OSPF Neighbors',   parseType: 'ospf_paloalto'  },
        { key: 'vr',    cmd: 'show routing route',                   label: 'Virtual Routers',  parseType: 'vrf_paloalto'   },
        { key: 'arp',   cmd: 'show arp all',                         label: 'ARP Table',         parseType: 'arp_paloalto'   }
    ],
    'fortios': [
        { key: 'lldp_summary', cmd: 'diagnose lldprx neighbor summary',  label: 'LLDP Neighbors (summary)', parseType: 'lldp_forti_summary' },
        { key: 'lldp_detail',  cmd: 'diagnose lldprx neighbor details',  label: 'LLDP Neighbors (detail)',  parseType: 'lldp_forti_detail'  },
        { key: 'bgp',          cmd: 'get router info bgp summary',        label: 'BGP Summary',              parseType: 'bgp_nxos'           },
        { key: 'vdom',         cmd: 'diagnose sys vd list',               label: 'VDOM List',                parseType: 'vrf_fortios'        },
        { key: 'arp',          cmd: 'get system arp',                     label: 'ARP Table',                parseType: 'arp_fortios'        }
    ],
    'sonic': [
        { key: 'lldp_brief',   cmd: 'show lldp table',                   label: 'LLDP Table (brief)',     parseType: 'lldp_sonic'         },
        { key: 'lldp_detail',  cmd: 'show lldp neighbor',                label: 'LLDP Neighbors (detail)', parseType: 'lldp_sonic_detail'  },
        { key: 'ospf',         cmd: 'show ip ospf neighbor',             label: 'OSPF Neighbors',          parseType: 'ospf'               },
        { key: 'bgp',          cmd: 'show bgp ipv4 unicast vrf all summary', label: 'BGP Summary',             parseType: 'bgp'                },
        { key: 'vrf',          cmd: 'show ip vrf',                       label: 'VRF List',                parseType: 'vrf_sonic'          },
        { key: 'vxlan',        cmd: 'show vxlan vlanvnimap',             label: 'VXLAN VNI Map',           parseType: 'vxlan_sonic'        },
        { key: 'vxlan_tunnel', cmd: 'show vxlan tunnel',                 label: 'VXLAN Tunnels',           parseType: 'vxlan_sonic_tunnel' },
        { key: 'arp',          cmd: 'show arp',                          label: 'ARP Table',               parseType: 'arp_sonic'          },
        { key: 'mac',          cmd: 'show mac',                          label: 'MAC Address Table',       parseType: 'mac_sonic'          }
    ],
    'arista-eos': [
        { key: 'lldp_brief',  cmd: 'show lldp neighbors',               label: 'LLDP Neighbors (brief)',  parseType: 'lldp_arista'        },
        { key: 'lldp_detail', cmd: 'show lldp neighbors detail',        label: 'LLDP Neighbors (detail)', parseType: 'lldp_arista_detail' },
        { key: 'ospf',        cmd: 'show ip ospf neighbor vrf all',     label: 'OSPF Neighbors',           parseType: 'ospf_arista'        },
        { key: 'bgp',         cmd: 'show ip bgp summary vrf all',       label: 'BGP Summary',              parseType: 'bgp_arista'         },
        { key: 'vrf',         cmd: 'show vrf',                          label: 'VRF List',                 parseType: 'vrf_arista'         },
        { key: 'vxlan',       cmd: 'show vxlan vni',                    label: 'VXLAN VNI Table',          parseType: 'vxlan_arista'       },
        { key: 'vtep',        cmd: 'show vxlan vtep',                   label: 'VXLAN VTEP Peers',         parseType: 'vtep_arista'        },
        { key: 'arp',         cmd: 'show arp',                          label: 'ARP Table',                parseType: 'arp_arista'         },
        { key: 'mac',         cmd: 'show mac address-table',            label: 'MAC Address Table',        parseType: 'mac_arista'         }
    ]
};


/**
 * Classify device role.
 * Understands traditional 3-tier, edge/firewall, and EVPN-VXLAN fabric roles
 * (superspine, spine, borderleaf, leaf).
 */
function classifyDeviceRole(deviceData) {
    const {
        hostname,
        bgpPeers = [],
        ospfNeighbors = [],
        lldpNeighbors = [],
        macCount = 0,
        mclagData = null,
        nvePeers = [],
        vxlanMappings = []
    } = deviceData;

    const hn = (hostname || '').toLowerCase();

    // Hostname-based classification (most reliable for well-named devices)
    if (/spine/i.test(hn)) return 'spine';
    if (/borderleaf|border[-_]?leaf/i.test(hn)) return 'borderleaf';
    if (/leaf/i.test(hn)) return 'leaf';
    if (/superspine|super[-_]?spine/i.test(hn)) return 'superspine';

    // Firewall detection: Hostname keywords
    const firewallKeywords = /firewall|[-_]?fw[-_.:]|palo|fortigate|asa|checkpoint/i;
    if (firewallKeywords.test(hn)) return 'firewall';

    // Router detection
    if (/[-_]router|router[-_.]/i.test(hn)) return 'router';

    // OOB switch detection
    if (/oob|out[-_]?of[-_]?band/i.test(hn)) return 'oob-switch';

    // DMZ detection
    const dmzKeywords = /dmz|demilitarized|screened[-_]?subnet/i;
    if (dmzKeywords.test(hn)) return 'dmz';

    // Server/host detection
    if (/proxmox|esxi|server|host|hypervisor|compute/i.test(hn)) return 'server';

    // Behavioral classification — EVPN fabric roles
    const globalBGP = bgpPeers.filter(p => !p.vrfName || p.vrfName === 'global' || p.vrfName === 'default');
    const vrfBGP = bgpPeers.filter(p => p.vrfName && p.vrfName !== 'global' && p.vrfName !== 'default');
    const hasEVPN = bgpPeers.some(p => p.addressFamily === 'l2vpn-evpn' || p.addressFamily === 'l2vpn evpn');

    // Borderleaf: EVPN BGP + VRF BGP (connects to external/tenant VRFs)
    if (hasEVPN && vrfBGP.length > 0) return 'borderleaf';

    // Leaf: EVPN BGP + OSPF underlay, no external VRF BGP
    if (hasEVPN && vrfBGP.length === 0 && ospfNeighbors.length > 0) return 'leaf';

    // Spine: OSPF/BGP underlay only, no VXLAN data, connects to many leaves
    if (ospfNeighbors.length >= 3 && vxlanMappings.length === 0 && nvePeers.length === 0) return 'spine';

    // Edge: has global BGP peers (non-EVPN)
    if (globalBGP.length > 0 && !hasEVPN) return 'edge';

    // Core detection: Multiple OSPF neighbors (traditional 3-tier)
    if (ospfNeighbors.length >= 3) return 'core';

    // Distribution detection: Some OSPF + many LLDP
    if (ospfNeighbors.length > 0 && lldpNeighbors.length >= 3) return 'distribution';

    // Access detection: High MAC count + few LLDP neighbors
    if (macCount > 10 && lldpNeighbors.length <= 2) return 'access';

    return 'unknown';
}

/**
 * Normalize a hostname for deduplication: lowercase, strip FQDN domain, trim.
 * "CoreSwitch01.example.com" → "coreswitch01"
 * @param {string} name
 * @returns {string}
 */
function normalizeHostname(name) {
    if (!name) return '';
    return name.replace(/\.{2,}$/, '').toLowerCase().split('.')[0].trim();
}

/**
 * Generate normalized link key for deduplication
 */
function generateLinkKey(device1, interface1, device2, interface2) {
    const devices = [
        { name: normalizeHostname(device1), port: interface1 || '' },
        { name: normalizeHostname(device2), port: interface2 || '' }
    ].sort((a, b) => a.name.localeCompare(b.name));

    return `${devices[0].name}:${devices[0].port}---${devices[1].name}:${devices[1].port}`;
}

/**
 * Deduplicate bidirectional links
 */
function deduplicateLinks(rawEdges) {
    const linkMap = new Map();

    rawEdges.forEach(edge => {
        const key = generateLinkKey(
            edge.source,
            edge.sourcePort,
            edge.target,
            edge.targetPort
        );

        if (!linkMap.has(key)) {
            linkMap.set(key, {
                source: edge.source,
                target: edge.target,
                sourcePort: edge.sourcePort,
                targetPort: edge.targetPort,
                protocols: new Set([edge.protocol]),
                discovered: [edge.source],
                vlanId: edge.vlanId || null
            });
        } else {
            const existing = linkMap.get(key);
            existing.protocols.add(edge.protocol);
            if (!existing.discovered.includes(edge.source)) {
                existing.discovered.push(edge.source);
            }
            if (edge.vlanId && !existing.vlanId) {
                existing.vlanId = edge.vlanId;
            }
        }
    });

    return Array.from(linkMap.values()).map(link => ({
        ...link,
        protocols: Array.from(link.protocols)
    }));
}

/**
 * Build IP address to device hostname registry.
 * Pass 1: OSPF neighbor.address is the NEIGHBOR's IP — resolve via routerIdMap.
 * Pass 2: BGP symmetry — if B peers to one of A's IPs, then A peers to B's IP.
 * Pass 3: Reverse OSPF lookup for BGP peer IPs not yet resolved.
 * @param {Array} devicesData
 * @param {Map|null} routerIdMap - Router-ID to hostname mapping (from buildRouterIdMap)
 * @returns {Map<string, string>} IP → hostname
 */
function buildIpToDeviceMap(devicesData, routerIdMap) {
    const ipToDevice = new Map();

    // Pass 1: OSPF neighbor.address is the NEIGHBOR's IP on the transit link
    // neighbor.neighborId is the NEIGHBOR's router-ID
    // Use routerIdMap to resolve neighborId → hostname, then register address → hostname
    devicesData.forEach(device => {
        device.ospfNeighbors.forEach(neighbor => {
            if (!neighbor.address) return;
            const targetHostname = routerIdMap ? routerIdMap.get(neighbor.neighborId) : null;
            if (targetHostname && targetHostname !== device.hostname && !ipToDevice.has(neighbor.address)) {
                ipToDevice.set(neighbor.address, targetHostname);
            }
        });
    });

    // Pass 2: BGP cross-reference — if Device A has bgpPeer.neighborIP = X,
    // then X belongs to some OTHER device. We find that device by checking
    // which device's OSPF addresses include X, or by BGP symmetry.
    // For BGP symmetry: if A peers to X and B peers to Y, and Y is one of A's IPs,
    // then B owns X.
    devicesData.forEach(deviceA => {
        deviceA.bgpPeers.forEach(peer => {
            const peerIP = peer.neighborIP;
            if (ipToDevice.has(peerIP)) return; // already resolved

            // Find a device B that has A's hostname as one of its BGP peer targets
            // i.e., B has a bgpPeer.neighborIP that is an IP owned by A
            devicesData.forEach(deviceB => {
                if (deviceB.hostname === deviceA.hostname) return;
                deviceB.bgpPeers.forEach(bPeer => {
                    if (ipToDevice.get(bPeer.neighborIP) === deviceA.hostname) {
                        // B peers to A, so A peers to B => peerIP belongs to B
                        if (!ipToDevice.has(peerIP)) {
                            ipToDevice.set(peerIP, deviceB.hostname);
                        }
                    }
                });
            });
        });
    });

    // Pass 3: Direct OSPF reverse lookup — if a BGP peer IP matches an OSPF neighbor.address,
    // that address belongs to the device identified by the OSPF neighbor.neighborId (NOT the reporter)
    devicesData.forEach(device => {
        device.bgpPeers.forEach(peer => {
            if (!ipToDevice.has(peer.neighborIP)) {
                devicesData.forEach(otherDevice => {
                    otherDevice.ospfNeighbors.forEach(n => {
                        if (n.address === peer.neighborIP) {
                            // n.address is the neighbor's IP, identified by n.neighborId
                            const resolvedHost = routerIdMap ? routerIdMap.get(n.neighborId) : null;
                            if (resolvedHost && !ipToDevice.has(peer.neighborIP)) {
                                ipToDevice.set(peer.neighborIP, resolvedHost);
                            }
                        }
                    });
                });
            }
        });
    });

    return ipToDevice;
}

/**
 * Build router-ID to hostname mapping for OSPF - FIXED: Enhanced mapping
 */
function buildRouterIdMap(devices, ipToDevice) {
    const map = new Map();

    devices.forEach(device => {
        // Map hostname to itself
        map.set(device.hostname, device.hostname);

        // Map all OSPF neighbor IDs seen by this device to potential hostnames
        device.ospfNeighbors.forEach(neighbor => {
            // Try to find which device has this router ID
            const targetDevice = devices.find(d => {
                return d.ospfNeighbors.some(n => n.address === neighbor.address && n.neighborId !== neighbor.neighborId);
            });

            if (targetDevice) {
                map.set(neighbor.neighborId, targetDevice.hostname);
            }

            // Phase 4 fallback: use IP registry if cross-match failed
            if (!map.has(neighbor.neighborId)) {
                const hostnameFromIp = ipToDevice ? ipToDevice.get(neighbor.neighborId) : null;
                if (hostnameFromIp) {
                    map.set(neighbor.neighborId, hostnameFromIp);
                }
            }
        });
    });

    return map;
}

/**
 * Show notification
 */
function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    document.body.appendChild(notification);

    setTimeout(() => {
        notification.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

/**
 * Show vendor commands for selected vendor
 */
function showVendorCommands(vendorKey) {
    const vendor = VENDOR_COMMANDS[vendorKey];
    if (!vendor) return;

    document.getElementById('vendorCommandsTitle').textContent = vendor.title;
    document.getElementById('vendorCommandsContent').textContent = vendor.commands;

    // Update active tab
    document.querySelectorAll('.vendor-tab').forEach(tab => {
        tab.classList.remove('active');
    });
    event.target.classList.add('active');
}

/**
 * Copy text to clipboard with fallback for non-secure contexts (HTTP).
 * Tries navigator.clipboard first; falls back to execCommand with a hidden textarea.
 * @param {string} text - Text to copy
 * @returns {Promise<void>}
 */
function copyToClipboard(text) {
    if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text);
    }
    // Fallback for HTTP / non-secure contexts
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    try {
        document.execCommand('copy');
        return Promise.resolve();
    } catch (err) {
        return Promise.reject(err);
    } finally {
        document.body.removeChild(textarea);
    }
}

/**
 * Copy vendor commands to clipboard
 */
function copyVendorCommands() {
    const commands = document.getElementById('vendorCommandsContent').textContent;
    copyToClipboard(commands).then(() => {
        showNotification('Commands copied to clipboard', 'success');
    }).catch(() => {
        showNotification('Failed to copy commands', 'error');
    });
}

/**
 * Split pasted CLI text into sections by device prompt + command lines.
 * Returns array of { hostname, command, output } objects.
 * If no prompts are found, returns the entire text as a single section.
 */
function splitByCommandPrompts(text) {
    const sections = [];
    // Match lines like "hostname# show lldp neighbors" or "hostname> show ip ospf neighbor"
    // Also matches FortiOS "diagnose ..." and HPE "display ..."
    const promptRegex = /^([\w\-.:]+)[#>]\s*(show\s+.+|get\s+.+|diagnose\s+.+|display\s+.+)$/gm;
    const matches = [...text.matchAll(promptRegex)];

    if (matches.length === 0) {
        // No prompts found — return entire text as one unprompted section
        return [{ command: '', output: text, hostname: '' }];
    }

    for (let i = 0; i < matches.length; i++) {
        const startIdx = matches[i].index + matches[i][0].length;
        const endIdx = (i + 1 < matches.length) ? matches[i + 1].index : text.length;
        sections.push({
            hostname: matches[i][1],
            command: matches[i][2].trim(),
            output: text.substring(startIdx, endIdx).trim()
        });
    }

    return sections;
}

/**
 * Detect which parseType a CLI command string corresponds to.
 * When a vendor is provided, checks VENDOR_COMMAND_META first for an exact match.
 * Falls back to generic keyword detection.
 *
 * @param {string} command - The CLI command string (e.g., "show lldp neighbors detail")
 * @param {string} vendor  - Optional vendor key from VENDOR_COMMAND_META
 * @returns {string} parseType or empty string if unrecognized
 */
function detectCommandType(command, vendor) {
    const cmd = command.toLowerCase().trim();

    // If vendor is specified, try exact/substring match against VENDOR_COMMAND_META
    if (vendor && VENDOR_COMMAND_META[vendor]) {
        for (const entry of VENDOR_COMMAND_META[vendor]) {
            const metaCmd = entry.cmd.toLowerCase();
            if (cmd === metaCmd || cmd.startsWith(metaCmd) || metaCmd.startsWith(cmd)) {
                return entry.parseType;
            }
        }
    }

    // Generic detection by keyword patterns (vendor-agnostic fallback)
    if (/lldp.*neighbor.*detail|lldp.*neighbor-info.*detail/i.test(cmd)) return 'lldp_block';
    if (/lldp/i.test(cmd)) return 'lldp_tabular';
    if (/ospf.*neighbor/i.test(cmd)) return 'ospf';
    if (/bgp.*summary/i.test(cmd)) return 'bgp';
    if (/\bvrf\b.*detail/i.test(cmd)) return 'vrf_detail';
    if (/\bvrf\b|routing.*instance|vd\s+list/i.test(cmd)) return 'vrf';
    if (/vlan.*brief|\bvlan\b/i.test(cmd)) return 'vlan';
    if (/\barp\b/i.test(cmd)) return 'arp_cisco';
    if (/mac.*address|ethernet.*switching/i.test(cmd)) return 'mac_cisco';
    if (/vxlan|nve|vtep/i.test(cmd)) return 'vxlan_nxos';

    return '';
}

/**
 * Process and add device
 */
function processAndAddDevice() {
    const cliInputEl = document.getElementById('cliInput');
    const rawText = cliInputEl.value.trim();

    if (!rawText) {
        showNotification('Please paste CLI output first', 'error');
        return;
    }

    const vendorSelect = document.getElementById('quickAddVendor');
    const selectedVendor = vendorSelect ? vendorSelect.value : '';

    // Phase 6: Try smart parsing when prompts are detected or vendor is selected
    const sections = splitByCommandPrompts(rawText);
    const hasPrompts = sections.length > 1 || (sections.length === 1 && sections[0].command !== '');

    if (hasPrompts) {
        // Auto-detect hostname from the first prompt found
        const hostname = sections[0].hostname || extractHostname(rawText);
        const vendor = selectedVendor || detectVendor(rawText);
        const vendorCmds = VENDOR_COMMAND_META[vendor] || [];

        // Build collectedOutputs map keyed by VENDOR_COMMAND_META key
        const collectedOutputs = {};
        sections.forEach(section => {
            const parseType = detectCommandType(section.command, vendor);
            if (parseType) {
                // Map parseType back to a VENDOR_COMMAND_META key
                const cmdEntry = vendorCmds.find(c => c.parseType === parseType);
                const key = cmdEntry ? cmdEntry.key : parseType; // fallback: use parseType as key
                collectedOutputs[key] = (collectedOutputs[key] ? collectedOutputs[key] + '\n' : '') + section.output;
            }
        });

        if (Object.keys(collectedOutputs).length > 0 && hostname) {
            // Check for duplicate
            if (devicesData.some(d => d.hostname === hostname)) {
                showNotification(`Device "${hostname}" already exists — remove it first`, 'error');
                return;
            }

            const result = parseDeviceWizard({ displayName: hostname, vendor, collectedOutputs });
            if (result.success) {
                if (result.warning) {
                    showNotification(result.warning, 'warning');
                }
                devicesData.push(result);
                renderDeviceChips();
                renderWizardCollectedList();
                cliInputEl.value = '';
                const cmdCount = Object.keys(collectedOutputs).length;
                showNotification(
                    `Device "${result.hostname}" added (${cmdCount} command section${cmdCount !== 1 ? 's' : ''} detected)`,
                    result.warning ? 'warning' : 'success'
                );
                return;
            }
            // If parseDeviceWizard fails, fall through to parseDevice()
        }
    }

    // Fallback: use original parseDevice() for single-block or unrecognized output
    const result = parseDevice(rawText);

    if (!result.success) {
        showNotification(`Error: ${result.error}. ${result.suggestion || ''}`, 'error');
        return;
    }

    if (result.warning) {
        showNotification(`Warning: ${result.warning}`, 'warning');
    }

    devicesData.push(result);

    const neighborCount = result.lldpNeighbors.length + result.ospfNeighbors.length + result.bgpPeers.length;
    showNotification(
        `Device "${result.hostname}" added successfully (${neighborCount} neighbors discovered)`,
        'success'
    );

    renderDeviceChips();
    renderWizardCollectedList();
    clearInput();
}

/**
 * Clear input textarea
 */
function clearInput() {
    document.getElementById('cliInput').value = '';
}

/**
 * Render device chips (in the legacy quick-add panel)
 */
function renderDeviceChips() {
    const container = document.getElementById('deviceChips');
    if (!container) return;

    if (devicesData.length === 0) {
        container.innerHTML = '<div style="color: #999; font-size: 13px; font-style: italic;">No devices added yet</div>';
        return;
    }

    container.innerHTML = devicesData.map((device, index) => {
        const neighborCount = device.lldpNeighbors.length + device.ospfNeighbors.length + device.bgpPeers.length;
        const vendorLabel = device.vendor ? ` · ${device.vendor}` : '';
        return `
            <div class="device-chip">
                <div class="device-chip-label">
                    <div class="device-chip-hostname">${device.hostname}</div>
                    <div class="device-chip-info">${neighborCount} neighbors${vendorLabel}</div>
                </div>
                <button type="button" class="device-chip-remove" onclick="removeDevice(${index})" title="Remove">&#215;</button>
            </div>
        `;
    }).join('');
}

/**
 * Remove device
 */
function removeDevice(index) {
    const device = devicesData[index];
    devicesData.splice(index, 1);
    renderDeviceChips();
    renderWizardCollectedList();
    showNotification(`Device "${device.hostname}" removed`, 'success');
}

/**
 * Clear all devices
 */
function clearAll() {
    if (devicesData.length === 0) {
        showNotification('No devices to clear', 'warning');
        return;
    }

    if (!confirm('Are you sure you want to clear all devices and topology?')) {
        return;
    }

    devicesData = [];
    if (cy) {
        cy.destroy();
        cy = null;
    }
    renderDeviceChips();
    renderWizardCollectedList();
    document.getElementById('topologySection').style.display = 'none';
    document.getElementById('topologyCanvas').innerHTML = `
        <div class="empty-state">
            <div class="empty-state-icon">&#127760;</div>
            <div>Click "Generate Topology" to visualize your network</div>
        </div>
    `;
    clearPathSelection();
    hideTrainingNote();
    showNotification('All devices cleared', 'success');
}

/**
 * Generate topology
 */
function generateTopology() {
    // Phase 5c: Guard against missing Cytoscape library
    if (typeof cytoscape === 'undefined') {
        showNotification('Cytoscape library failed to load. Check your network connection.', 'error');
        return;
    }

    if (devicesData.length === 0) {
        showNotification('Add at least one device first', 'error');
        return;
    }

    // Reset VRF color map for consistent coloring
    vrfColorMap.clear();
    vrfColorIndex = 0;

    // Phase 3.2: Build routerIdMap first (without ipToDevice), then ipToDevice using routerIdMap
    const initialRouterIdMap = buildRouterIdMap(devicesData, null);
    const ipToDevice = buildIpToDeviceMap(devicesData, initialRouterIdMap);
    // Enhance routerIdMap with ipToDevice fallbacks
    const routerIdMap = buildRouterIdMap(devicesData, ipToDevice);

    // Register OSPF router-IDs as device IPs in ipToDevice.
    // Router-IDs are typically loopback addresses and often serve as VTEP source IPs.
    // This enables VXLAN DIP lookups to resolve correctly.
    routerIdMap.forEach((hostname, routerID) => {
        if (!ipToDevice.has(routerID)) {
            ipToDevice.set(routerID, hostname);
        }
    });

    // Detect if any device has VRFs
    const anyVRFs = devicesData.some(d => d.vrfs && d.vrfs.length > 0);

    // Phase 2c: normalizedNameToNodeId — populated during node creation
    const normalizedNameToNodeId = new Map();

    // Build nodes
    const nodes = [];
    devicesData.forEach(device => {
        const role = classifyDeviceRole(device);
        const vrfs = device.vrfs || [];

        nodes.push({
            data: {
                id: device.hostname,
                label: device.hostname,
                role: role,
                roleColor: ROLE_COLORS[role],
                hierarchyRank: ROLE_RANKS[role],
                lldpCount: device.lldpNeighbors.length,
                ospfCount: device.ospfNeighbors.length,
                bgpCount: device.bgpPeers.length,
                macCount: device.macCount,
                vlans: device.vlans || [],
                vrfCount: vrfs.length,
                hasVRFs: vrfs.length > 0,
                nodeType: 'device',
                vendor: device.vendor || '',
                mclagData: device.mclagData || null,
                deviceData: device
            }
        });

        // Phase 2c: Register this device's normalized hostname → canonical ID
        normalizedNameToNodeId.set(normalizeHostname(device.hostname), device.hostname);

        // VRF child nodes (compound nodes inside the device)
        if (vrfs.length > 0) {
            vrfs.forEach(vrf => {
                const vrfNodeId = device.hostname + '::' + vrf.name;
                nodes.push({
                    data: {
                        id: vrfNodeId,
                        label: device.hostname + '\n(' + vrf.name + ')',
                        nodeType: 'vrf',
                        vrfName: vrf.name,
                        physicalHost: device.hostname,
                        rd: vrf.rd,
                        interfaceCount: vrf.interfaces.length,
                        ospfCount: vrf.ospfNeighbors.length,
                        bgpCount: vrf.bgpPeers.length,
                        vrfColor: getVRFColor(vrf.name),
                        vrfData: vrf,
                        deviceData: device
                    }
                });
            });

            // Global table pseudo-node if device has global-table routing
            const globalOSPF = device.ospfNeighbors.filter(n => !n.vrfName || n.vrfName === 'global');
            const globalBGP = device.bgpPeers.filter(p => !p.vrfName || p.vrfName === 'global');
            if (globalOSPF.length > 0 || globalBGP.length > 0) {
                nodes.push({
                    data: {
                        id: device.hostname + '::global',
                        label: device.hostname + '\n(global)',
                        nodeType: 'vrf',
                        vrfName: 'global',
                        physicalHost: device.hostname,
                        rd: null,
                        interfaceCount: 0,
                        ospfCount: globalOSPF.length,
                        bgpCount: globalBGP.length,
                        vrfColor: '#607D8B',
                        vrfData: { name: 'global', ospfNeighbors: globalOSPF, bgpPeers: globalBGP, interfaces: [], importRTs: [], exportRTs: [], leaksTo: [], leaksFrom: [], vnis: [] },
                        deviceData: device
                    }
                });
            }
        }
    });

    // Build edges from LLDP
    const lldpEdges = [];
    devicesData.forEach(device => {
        device.lldpNeighbors.forEach(neighbor => {
            lldpEdges.push(neighbor);
        });
    });

    const deduplicatedEdges = deduplicateLinks(lldpEdges);

    // Build map: "hostname:port" → peer hostname (from LLDP edges)
    const portToPeer = new Map();
    deduplicatedEdges.forEach(edge => {
        if (edge.sourcePort) {
            portToPeer.set(edge.source + ':' + edge.sourcePort, edge.target);
        }
        if (edge.targetPort) {
            portToPeer.set(edge.target + ':' + edge.targetPort, edge.source);
        }
    });

    // Phase 3a: Auto-create ghost nodes for LLDP-discovered neighbors not in devicesData.
    // Must happen BEFORE the edge filter so ghost nodes are in nodeIds when we filter.
    deduplicatedEdges.forEach(edge => {
        [edge.source, edge.target].forEach(hostname => {
            const norm = normalizeHostname(hostname);
            if (!normalizedNameToNodeId.has(norm)) {
                const nodeId = hostname;
                nodes.push({
                    data: {
                        id: nodeId,
                        label: hostname + '\n(discovered)',
                        role: 'unknown',
                        roleColor: '#9E9E9E',
                        nodeType: 'lldp-discovered',
                        discovered: true,
                        lldpCount: 0, ospfCount: 0, bgpCount: 0, macCount: 0,
                        vlans: [], vrfCount: 0, hasVRFs: false, vendor: ''
                    }
                });
                normalizedNameToNodeId.set(norm, nodeId);
            }
        });
    });

    // Build set of valid node IDs for edge filtering (includes ghost nodes)
    const nodeIds = new Set(nodes.map(n => n.data.id));

    // Phase 4: Create endpoint nodes from ARP/MAC entries — TWO-PASS approach
    // Pass 1: Local MACs first (physically connected endpoints get priority)
    // Pass 2: Remote MACs (VXLAN-learned) — re-attributed to remote VTEP device
    const endpointNodes = [];
    const endpointEdges = [];
    const seenEndpointMacs = new Set();

    // Helper: create endpoint node and edge
    function createEndpoint(entry, ownerHostname, isRemoteLearned, isTrunkLearned) {
        const endpointId = 'endpoint-' + entry.mac.replace(/:/g, '');
        const label = entry.ip || entry.mac;

        endpointNodes.push({
            data: {
                id: endpointId,
                label: label,
                role: 'host',
                roleColor: '#78909C',
                nodeType: 'endpoint',
                discovered: true,
                ip: entry.ip || '',
                mac: entry.mac,
                vlan: entry.vlan || 0,
                connectedSwitch: ownerHostname,
                connectedPort: isRemoteLearned ? (isTrunkLearned ? 'trunk' : 'VXLAN') : (entry.interface || ''),
                remoteDIP: entry.remoteDIP || null,
                isRemoteLearned: isRemoteLearned,
                learnMethod: isRemoteLearned ? (isTrunkLearned ? 'trunk' : 'vxlan') : 'local',
                lldpCount: 0, ospfCount: 0, bgpCount: 0, macCount: 0,
                vlans: [], vrfCount: 0, hasVRFs: false, vendor: ''
            }
        });

        if (nodeIds.has(ownerHostname)) {
            endpointEdges.push({
                data: {
                    id: 'ep-edge-' + endpointId,
                    source: ownerHostname,
                    target: endpointId,
                    type: isRemoteLearned ? 'vxlan-endpoint' : 'endpoint',
                    interfaceLabel: isRemoteLearned
                        ? (isTrunkLearned ? 'via trunk' : 'via VXLAN ' + (entry.remoteDIP || ''))
                        : (entry.interface || ''),
                    sourcePort: entry.interface || '',
                    targetPort: ''
                }
            });
        }
    }

    // Pass 1: Local MACs (no remoteDIP) — with trunk heuristic detection
    devicesData.forEach(device => {
        const localEntries = [
            ...(device.arpEntries || []).map(e => ({ ...e, source: 'arp' })),
            ...(device.macEntries || []).filter(e => !e.remoteDIP).map(e => ({ ...e, source: 'mac' }))
        ];
        localEntries.forEach(entry => {
            if (seenEndpointMacs.has(entry.mac)) return;
            seenEndpointMacs.add(entry.mac);

            // Trunk heuristic: if MAC learned on an uplink port (connected to another known device),
            // it's likely behind that peer device, not directly connected here
            let ownerHostname = device.hostname;
            let isRemoteLearned = false;
            let isTrunkLearned = false;

            if (entry.interface) {
                const peerKey = device.hostname + ':' + entry.interface;
                const peerHostname = portToPeer.get(peerKey);
                if (peerHostname) {
                    ownerHostname = peerHostname;
                    isRemoteLearned = true;
                    isTrunkLearned = true;
                }
            }

            createEndpoint(entry, ownerHostname, isRemoteLearned, isTrunkLearned);
        });
    });

    // Pass 2: Remote MACs (has remoteDIP) — re-attribute to remote VTEP device
    devicesData.forEach(device => {
        const remoteEntries = (device.macEntries || []).filter(e => e.remoteDIP).map(e => ({ ...e, source: 'mac' }));
        remoteEntries.forEach(entry => {
            if (seenEndpointMacs.has(entry.mac)) return;
            seenEndpointMacs.add(entry.mac);
            // ipToDevice maps IP → hostname (string), not device object
            const remoteHostname = ipToDevice.get(entry.remoteDIP);
            const ownerHostname = remoteHostname || device.hostname;
            createEndpoint(entry, ownerHostname, true, false);
        });
    });

    // Register endpoint node IDs so subsequent edge filtering sees them
    endpointNodes.forEach(n => nodeIds.add(n.data.id));

    // Phase 2d: Filter + remap LLDP edges using normalized hostname lookup
    const filteredEdges = deduplicatedEdges
        .filter(edge => {
            const srcNorm = normalizeHostname(edge.source);
            const tgtNorm = normalizeHostname(edge.target);
            return normalizedNameToNodeId.has(srcNorm) && normalizedNameToNodeId.has(tgtNorm);
        })
        .map(edge => ({
            ...edge,
            source: normalizedNameToNodeId.get(normalizeHostname(edge.source)) || edge.source,
            target: normalizedNameToNodeId.get(normalizeHostname(edge.target)) || edge.target
        }));

    // Build Cytoscape physical edges from normalized, filtered LLDP data
    const edges = filteredEdges.map((edge, index) => ({
        data: {
            id: `edge-${index}`,
            source: edge.source,
            target: edge.target,
            sourcePort: edge.sourcePort,
            targetPort: edge.targetPort,
            interfaceLabel: `${edge.sourcePort} ↔ ${edge.targetPort}`,
            protocols: edge.protocols,
            type: 'physical',
            vlanId: edge.vlanId
        }
    }));

    // Add L3 relationships with improved OSPF matching
    const l3EdgeMap = new Map();
    devicesData.forEach(device => {
        device.ospfNeighbors.forEach(neighbor => {
            let targetHostname = routerIdMap.get(neighbor.neighborId);

            if (!targetHostname) {
                const targetDevice = devicesData.find(d => {
                    return d.hostname !== device.hostname &&
                           d.ospfNeighbors.some(n => n.address === neighbor.address);
                });
                targetHostname = targetDevice ? targetDevice.hostname : null;
            }

            if (targetHostname && targetHostname !== device.hostname) {
                const key = [device.hostname, targetHostname].sort().join('---');
                if (!l3EdgeMap.has(key)) {
                    l3EdgeMap.set(key, {
                        source: device.hostname,
                        target: targetHostname,
                        protocols: new Set(['OSPF'])
                    });
                } else {
                    l3EdgeMap.get(key).protocols.add('OSPF');
                }
            }
        });

        // Phase 1c: BGP edge matching via IP registry instead of same-value comparison
        device.bgpPeers.forEach(peer => {
            let targetHostname = ipToDevice.get(peer.neighborIP);
            if (targetHostname === device.hostname) targetHostname = null; // no self-links

            // Phase 3b: create placeholder node for unresolved BGP peers
            if (!targetHostname) {
                const ipNodeId = 'bgp-peer-' + peer.neighborIP;
                if (!nodeIds.has(ipNodeId)) {
                    nodes.push({
                        data: {
                            id: ipNodeId,
                            label: peer.neighborIP + '\n(BGP peer)',
                            role: 'unknown',
                            roleColor: '#9E9E9E',
                            nodeType: 'bgp-discovered',
                            discovered: true,
                            lldpCount: 0, ospfCount: 0, bgpCount: 0, macCount: 0,
                            vlans: [], vrfCount: 0, hasVRFs: false, vendor: ''
                        }
                    });
                    nodeIds.add(ipNodeId);
                }
                targetHostname = ipNodeId;
            }

            const key = [device.hostname, targetHostname].sort().join('---');
            if (!l3EdgeMap.has(key)) {
                l3EdgeMap.set(key, {
                    source: device.hostname,
                    target: targetHostname,
                    protocols: new Set(['BGP'])
                });
            } else {
                l3EdgeMap.get(key).protocols.add('BGP');
            }
        });
    });

    // Mark physical edges that have L3
    edges.forEach(edge => {
        const key = [edge.data.source, edge.data.target].sort().join('---');
        if (l3EdgeMap.has(key)) {
            edge.data.hasL3 = true;
            edge.data.l3Protocols = Array.from(l3EdgeMap.get(key).protocols);
        } else {
            edge.data.hasL3 = false;
        }
    });

    // Add pure L3 edges (for logical view)
    const pureL3Edges = [];
    l3EdgeMap.forEach((value, key) => {
        const existingPhysical = edges.find(e => {
            const edgeKey = [e.data.source, e.data.target].sort().join('---');
            return edgeKey === key;
        });

        if (!existingPhysical && nodeIds.has(value.source) && nodeIds.has(value.target)) {
            pureL3Edges.push({
                data: {
                    id: `l3-${pureL3Edges.length}`,
                    source: value.source,
                    target: value.target,
                    protocols: Array.from(value.protocols),
                    type: 'logical',
                    interfaceLabel: Array.from(value.protocols).join(', ')
                }
            });
        }
    });

    // Build VRF-to-VRF edges (same VRF across different devices)
    const vrfEdges = [];
    if (anyVRFs) {
        devicesData.forEach(device => {
            const vrfs = device.vrfs || [];
            vrfs.forEach(vrf => {
                // OSPF VRF edges
                vrf.ospfNeighbors.forEach(neighbor => {
                    const peerHost = routerIdMap.get(neighbor.neighborId) || neighbor.neighborId;
                    const peerDevice = devicesData.find(d => d.hostname === peerHost);
                    if (peerDevice && peerDevice.hostname !== device.hostname) {
                        const sourceVrfNode = device.hostname + '::' + vrf.name;
                        const targetVrfNode = peerDevice.hostname + '::' + vrf.name;
                        if (nodeIds.has(sourceVrfNode) && nodeIds.has(targetVrfNode)) {
                            const vrfEdgeKey = [sourceVrfNode, targetVrfNode].sort().join('---');
                            if (!vrfEdges.some(e => [e.data.source, e.data.target].sort().join('---') === vrfEdgeKey)) {
                                vrfEdges.push({
                                    data: {
                                        id: `vrf-ospf-${vrfEdges.length}`,
                                        source: sourceVrfNode,
                                        target: targetVrfNode,
                                        type: 'vrf-l3',
                                        protocols: ['OSPF'],
                                        vrfName: vrf.name,
                                        interfaceLabel: `OSPF (${vrf.name})`,
                                        vrfColor: getVRFColor(vrf.name)
                                    }
                                });
                            }
                        }
                    }
                });

                // BGP VRF edges — Phase 1d: use IP registry for peer resolution
                vrf.bgpPeers.forEach(peer => {
                    // Use IP registry first; fall back to same-VRF same-IP match
                    let peerDevice = null;
                    const peerHostFromIp = ipToDevice.get(peer.neighborIP);
                    if (peerHostFromIp && peerHostFromIp !== device.hostname) {
                        peerDevice = devicesData.find(d => d.hostname === peerHostFromIp);
                    }
                    if (!peerDevice) {
                        peerDevice = devicesData.find(d =>
                            d.hostname !== device.hostname &&
                            (d.vrfs || []).some(v => v.name === vrf.name &&
                                v.bgpPeers.some(p => p.neighborIP === peer.neighborIP))
                        );
                    }
                    if (peerDevice) {
                        const sourceVrfNode = device.hostname + '::' + vrf.name;
                        const targetVrfNode = peerDevice.hostname + '::' + vrf.name;
                        if (nodeIds.has(sourceVrfNode) && nodeIds.has(targetVrfNode)) {
                            const vrfEdgeKey = [sourceVrfNode, targetVrfNode].sort().join('---');
                            if (!vrfEdges.some(e => [e.data.source, e.data.target].sort().join('---') === vrfEdgeKey)) {
                                vrfEdges.push({
                                    data: {
                                        id: `vrf-bgp-${vrfEdges.length}`,
                                        source: sourceVrfNode,
                                        target: targetVrfNode,
                                        type: 'vrf-l3',
                                        protocols: ['BGP'],
                                        vrfName: vrf.name,
                                        interfaceLabel: `BGP (${vrf.name})`,
                                        vrfColor: getVRFColor(vrf.name)
                                    }
                                });
                            }
                        }
                    }
                });
            });
        });

        // Route-leak edges (inter-VRF on same device)
        devicesData.forEach(device => {
            const vrfs = device.vrfs || [];
            vrfs.forEach(vrf => {
                vrf.leaksTo.forEach(targetVrfName => {
                    const sourceId = device.hostname + '::' + vrf.name;
                    const targetId = device.hostname + '::' + targetVrfName;
                    if (nodeIds.has(sourceId) && nodeIds.has(targetId)) {
                        const bidirectional = vrfs.find(v => v.name === targetVrfName)?.leaksTo.includes(vrf.name);
                        vrfEdges.push({
                            data: {
                                id: `leak-${device.hostname}-${vrf.name}-${targetVrfName}`,
                                source: sourceId,
                                target: targetId,
                                type: 'route-leak',
                                bidirectional: !!bidirectional,
                                interfaceLabel: 'route leak'
                            }
                        });
                    }
                });
            });
        });

        // VXLAN tunnel edges between NVE peers
        devicesData.forEach(device => {
            const nvePeers = device.nvePeers || [];
            nvePeers.forEach(peer => {
                // Use ipToDevice to resolve peer VTEP IP → hostname
                const peerHostname = ipToDevice.get(peer.peerIP);
                if (!peerHostname || peerHostname === device.hostname) return;

                const edgeKey = [device.hostname, peerHostname].sort().join('---vxlan---');
                if (!vrfEdges.some(e => e.data.id === edgeKey)) {
                    vrfEdges.push({
                        data: {
                            id: edgeKey,
                            source: device.hostname,
                            target: peerHostname,
                            type: 'vxlan-tunnel',
                            interfaceLabel: 'VXLAN Tunnel',
                            peerIP: peer.peerIP
                        }
                    });
                }
            });
        });
    }

    // === Overlay/Underlay View Elements ===
    // Create anchor edges connecting VRF-split nodes to their physical device
    const anchorEdges = [];
    devicesData.forEach(device => {
        const vrfs = device.vrfs || [];
        vrfs.forEach(vrf => {
            const vrfNodeId = device.hostname + '::' + vrf.name;
            if (nodeIds.has(vrfNodeId)) {
                anchorEdges.push({
                    data: {
                        id: 'anchor-' + device.hostname + '-' + vrf.name,
                        source: vrfNodeId,
                        target: device.hostname,
                        type: 'anchor'
                    }
                });
            }
        });
        // Anchor for global pseudo-VRF if it exists
        const globalId = device.hostname + '::global';
        if (nodeIds.has(globalId)) {
            anchorEdges.push({
                data: {
                    id: 'anchor-' + device.hostname + '-global',
                    source: globalId,
                    target: device.hostname,
                    type: 'anchor'
                }
            });
        }
    });

    // Build logical view elements (separate graph for logical view)
    const logicalViewData = buildLogicalViewElements(devicesData, deduplicatedEdges, ipToDevice, routerIdMap);
    // Store for view switching — reset both on every topology generation
    window._dnmLogicalElements = logicalViewData;
    window._dnmOriginalElements = null; // Reset so switchView re-captures fresh elements

    // Initialize Cytoscape
    const container = document.getElementById('topologyCanvas');
    container.innerHTML = '';

    if (cy) {
        cy.destroy();
    }

    // Show topology section BEFORE initializing Cytoscape so the container has dimensions
    document.getElementById('topologySection').style.display = 'block';

    // Build roots selector string for breadthfirst layout.
    // For EVPN fabrics: spines/superspines at top. For traditional: edge routers at top.
    const rootNodes = nodes.filter(n => {
        const role = n.data.role;
        return (role === 'spine' || role === 'superspine' || role === 'edge' || role === 'router') && n.data.nodeType === 'device';
    });
    const rootsSelector = rootNodes.length > 0
        ? rootNodes.map(n => `#${CSS.escape(n.data.id)}`).join(', ')
        : undefined;

    const allElements = [...nodes, ...endpointNodes, ...edges, ...endpointEdges, ...pureL3Edges, ...vrfEdges, ...anchorEdges];

    cy = cytoscape({
        container: container,
        elements: allElements,
        style: getStyleForView('physical'),
        layout: {
            name: LAYOUT_NAME,
            nodeDimensionsIncludeLabels: true,
            idealEdgeLength: 100,
            nodeRepulsion: 4500,
            nestingFactor: 0.1,
            gravity: 0.8,
            numIter: 2500,
            tile: true,
            animate: false,
            fit: true,
            padding: 30
        }
    });

    // Ensure Cytoscape has correct dimensions and fits the viewport
    cy.resize();
    cy.fit(30);

    // Add interactivity
    cy.on('tap', 'node', function(evt) {
        const node = evt.target;
        if (pathSelectionMode) {
            handlePathNodeSelection(node);
        } else {
            showDeviceDetails(node.data());
        }
    });

    // Update stats
    updateStats(nodes, edges);

    showNotification('Topology generated successfully', 'success');

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

/**
 * Get Cytoscape style for view mode
 */
function getStyleForView(view) {
    const baseStyle = [
        {
            selector: 'node',
            style: {
                'label': 'data(label)',
                'background-color': 'data(roleColor)',
                'shape': 'roundrectangle',
                'width': 100,
                'height': 60,
                'text-valign': 'center',
                'text-halign': 'center',
                'font-size': '12px',
                'font-weight': 'bold',
                'color': '#fff',
                'text-outline-width': 2,
                'text-outline-color': 'data(roleColor)',
                'border-width': 3,
                'border-color': '#555'
            }
        },
        {
            // Phase 3c: Discovered (ghost) nodes — dashed border, muted appearance
            selector: 'node[?discovered]',
            style: {
                'border-style': 'dashed',
                'border-width': 2,
                'border-color': '#9E9E9E',
                'background-color': '#F5F5F5',
                'color': '#757575',
                'text-outline-color': '#F5F5F5',
                'font-style': 'italic',
                'opacity': 0.75
            }
        },
        {
            // Phase 4: Endpoint nodes (ARP/MAC discovered hosts) — small circles
            selector: 'node[nodeType="endpoint"]',
            style: {
                'width': 20,
                'height': 20,
                'shape': 'ellipse',
                'background-color': '#78909C',
                'label': 'data(label)',
                'font-size': '8px',
                'color': '#666',
                'text-valign': 'bottom',
                'text-halign': 'center',
                'text-margin-y': 5,
                'text-outline-width': 1,
                'text-outline-color': 'white',
                'opacity': 0.7
            }
        },
        {
            selector: 'node.dimmed',
            style: {
                'opacity': 0.2
            }
        },
        {
            selector: 'node.highlighted',
            style: {
                'border-width': 5,
                'border-color': '#FFD700'
            }
        },
        {
            selector: 'node.path-source',
            style: {
                'border-width': 6,
                'border-color': '#4CAF50'
            }
        },
        {
            selector: 'node.path-target',
            style: {
                'border-width': 6,
                'border-color': '#f44336'
            }
        },
        {
            selector: 'edge.dimmed',
            style: {
                'opacity': 0.1
            }
        },
        {
            selector: 'edge.path-highlight',
            style: {
                'width': 6,
                'line-color': '#FFD700',
                'target-arrow-color': '#FFD700',
                'z-index': 100
            }
        }
    ];

    // Styles to hide VRF/overlay elements in Physical view
    const hideVRFAndOverlay = [
        { selector: 'node[nodeType="vrf"]', style: { 'display': 'none' } },
        { selector: 'edge[type="vrf-l3"]', style: { 'display': 'none' } },
        { selector: 'edge[type="route-leak"]', style: { 'display': 'none' } },
        { selector: 'edge[type="vxlan-tunnel"]', style: { 'display': 'none' } },
        { selector: 'edge[type="anchor"]', style: { 'display': 'none' } }
    ];

    if (view === 'physical') {
        return [
            ...baseStyle,
            ...hideVRFAndOverlay,
            { selector: 'node[nodeType="bgp-discovered"]', style: { 'display': 'none' } },
            { selector: 'node[nodeType="endpoint"]', style: { 'display': 'none' } },
            { selector: 'edge[type="endpoint"]', style: { 'display': 'none' } },
            {
                selector: 'edge[type="physical"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'width': 2,
                    'line-color': '#888',
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'none',
                    'font-size': '9px',
                    'text-rotation': 'autorotate',
                    'text-margin-y': -10,
                    'color': '#555'
                }
            },
            {
                selector: 'edge[type="logical"]',
                style: {
                    'display': 'none'
                }
            }
        ];
    } else if (view === 'logical') {
        // Logical View: Packet-path diagram with duplicated device nodes
        return [
            // Base node style
            {
                selector: 'node',
                style: {
                    'label': 'data(label)',
                    'text-valign': 'center',
                    'text-halign': 'center',
                    'text-wrap': 'wrap',
                    'text-max-width': 130,
                    'font-size': 11,
                    'width': 140,
                    'height': 55,
                    'shape': 'roundrectangle',
                    'border-width': 2,
                    'border-color': '#333',
                    'background-color': '#fff'
                }
            },
            // VRF instance nodes
            {
                selector: 'node[nodeType="logical-vrf"]',
                style: {
                    'background-color': 'data(vrfColor)',
                    'color': 'white',
                    'text-outline-width': 1,
                    'text-outline-color': 'data(vrfColor)',
                    'border-color': '#fff',
                    'font-weight': 'bold'
                }
            },
            // L2 switch nodes
            {
                selector: 'node[nodeType="logical-l2"]',
                style: {
                    'background-color': 'data(roleColor)',
                    'color': '#fff',
                    'text-outline-width': 1,
                    'text-outline-color': 'data(roleColor)',
                    'border-color': '#fff'
                }
            },
            // Spine/transit nodes
            {
                selector: 'node[nodeType="logical-spine"]',
                style: {
                    'background-color': '#FF9800',
                    'color': '#fff',
                    'text-outline-width': 1,
                    'text-outline-color': '#FF9800',
                    'border-color': '#fff',
                    'shape': 'diamond',
                    'width': 100,
                    'height': 60
                }
            },
            // Endpoint nodes
            {
                selector: 'node[nodeType="logical-endpoint"]',
                style: {
                    'background-color': '#fff',
                    'border-color': '#78909C',
                    'border-width': 2,
                    'shape': 'ellipse',
                    'width': 130,
                    'height': 45,
                    'font-size': 9,
                    'color': '#333'
                }
            },
            // --- Edge styles ---
            // Base edge style
            {
                selector: 'edge',
                style: {
                    'width': 2,
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'triangle',
                    'font-size': 9,
                    'text-rotation': 'autorotate',
                    'text-background-color': '#fff',
                    'text-background-opacity': 0.8,
                    'text-background-padding': 2
                }
            },
            // VLAN trunk edges
            {
                selector: 'edge[type="logical-vlan"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'line-color': '#4CAF50',
                    'target-arrow-color': '#4CAF50',
                    'color': '#4CAF50',
                    'font-weight': 'bold'
                }
            },
            // Physical link edges (no shared VLANs)
            {
                selector: 'edge[type="logical-link"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'line-color': '#9E9E9E',
                    'target-arrow-color': '#9E9E9E',
                    'color': '#666'
                }
            },
            // BGP peering edges
            {
                selector: 'edge[type="logical-bgp"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'line-color': 'data(lineColor)',
                    'target-arrow-color': 'data(lineColor)',
                    'color': '#333',
                    'font-weight': 'bold',
                    'width': 3
                }
            },
            // VXLAN overlay edges
            {
                selector: 'edge[type="logical-vxlan"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'line-color': '#9C27B0',
                    'target-arrow-color': '#9C27B0',
                    'color': '#9C27B0',
                    'line-style': 'dashed',
                    'width': 3
                }
            },
            // Internal L2-to-VRF edges
            {
                selector: 'edge[type="logical-internal"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'line-color': '#607D8B',
                    'target-arrow-color': '#607D8B',
                    'line-style': 'dotted',
                    'color': '#607D8B',
                    'target-arrow-shape': 'none'
                }
            },
            // Endpoint edges
            {
                selector: 'edge[type="logical-endpoint-link"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'line-color': '#78909C',
                    'target-arrow-color': '#78909C',
                    'color': '#666',
                    'width': 1,
                    'target-arrow-shape': 'none'
                }
            },
            // MCLAG edges
            {
                selector: 'edge[type="logical-mclag"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'line-color': '#FF5722',
                    'target-arrow-color': '#FF5722',
                    'line-style': 'dashed',
                    'color': '#FF5722',
                    'font-weight': 'bold',
                    'width': 3
                }
            }
        ];
    } else if (view === 'overlay') {
        // Overlay/Underlay View: physical underlay + VRF-split overlay nodes
        return [
            ...baseStyle,
            // VRF-split nodes as overlay representation
            {
                selector: 'node[nodeType="vrf"]',
                style: {
                    'background-color': 'data(vrfColor)',
                    'label': 'data(label)',
                    'width': 110,
                    'height': 50,
                    'shape': 'roundrectangle',
                    'font-size': 10,
                    'color': 'white',
                    'text-valign': 'center',
                    'text-halign': 'center',
                    'text-outline-width': 1,
                    'text-outline-color': 'data(vrfColor)',
                    'text-wrap': 'wrap',
                    'text-max-width': 100,
                    'border-width': 2,
                    'border-color': '#fff'
                }
            },
            // Hide discovered/endpoint nodes
            { selector: 'node[nodeType="endpoint"]', style: { 'display': 'none' } },
            { selector: 'node[nodeType="bgp-discovered"]', style: { 'display': 'none' } },
            { selector: 'node[nodeType="lldp-discovered"]', style: { 'display': 'none' } },
            { selector: 'edge[type="endpoint"]', style: { 'display': 'none' } },
            // Underlay edges: physical links with L3
            {
                selector: 'edge[type="physical"][hasL3]',
                style: {
                    'label': 'data(l3Protocols)',
                    'width': 2,
                    'line-color': '#78909C',
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'triangle',
                    'target-arrow-color': '#78909C',
                    'font-size': '9px',
                    'text-rotation': 'autorotate',
                    'color': '#78909C'
                }
            },
            // Physical without L3: faded
            {
                selector: 'edge[type="physical"][!hasL3]',
                style: {
                    'width': 1,
                    'line-color': '#ccc',
                    'opacity': 0.3,
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'none'
                }
            },
            // Pure logical edges
            {
                selector: 'edge[type="logical"]',
                style: {
                    'width': 2,
                    'line-color': '#90A4AE',
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'triangle',
                    'target-arrow-color': '#90A4AE',
                    'font-size': '9px',
                    'text-rotation': 'autorotate',
                    'label': 'data(interfaceLabel)',
                    'color': '#90A4AE'
                }
            },
            // VXLAN tunnel edges (between physical devices)
            {
                selector: 'edge[type="vxlan-tunnel"]',
                style: {
                    'line-style': 'dotted',
                    'line-color': '#00cec9',
                    'target-arrow-color': '#00cec9',
                    'target-arrow-shape': 'diamond',
                    'label': 'VXLAN Tunnel',
                    'font-size': 10,
                    'color': '#00cec9',
                    'width': 3,
                    'curve-style': 'bezier',
                    'font-weight': 'bold'
                }
            },
            // VRF-L3 edges
            {
                selector: 'edge[type="vrf-l3"]',
                style: {
                    'label': 'data(interfaceLabel)',
                    'width': 2,
                    'line-color': 'data(vrfColor)',
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'triangle',
                    'target-arrow-color': 'data(vrfColor)',
                    'font-size': '9px',
                    'text-rotation': 'autorotate',
                    'color': '#333'
                }
            },
            // Route-leak edges
            {
                selector: 'edge[type="route-leak"]',
                style: {
                    'line-style': 'dashed',
                    'line-color': '#e74c3c',
                    'target-arrow-color': '#e74c3c',
                    'target-arrow-shape': 'triangle',
                    'label': 'route leak',
                    'font-size': 9,
                    'color': '#e74c3c',
                    'width': 2,
                    'curve-style': 'bezier'
                }
            },
            // Anchor edges (dotted lines connecting VRF nodes to physical hosts)
            {
                selector: 'edge[type="anchor"]',
                style: {
                    'width': 2,
                    'line-style': 'dotted',
                    'line-color': '#B0BEC5',
                    'opacity': 0.5,
                    'curve-style': 'straight',
                    'target-arrow-shape': 'none',
                    'source-arrow-shape': 'none'
                }
            }
        ];
    }
}

/**
 * Build logical view elements — devices duplicated per logical role.
 * Returns { nodes: [], edges: [] } for Cytoscape.
 */
function buildLogicalViewElements(devicesData, deduplicatedEdges, ipToDevice, routerIdMap) {
    const logicalNodes = [];
    const logicalEdges = [];
    const createdNodeIds = new Set();
    const createdEdgeKeys = new Set();

    // Helper: add node if not already created
    function addNode(id, label, nodeType, extraData) {
        if (createdNodeIds.has(id)) return;
        createdNodeIds.add(id);
        logicalNodes.push({
            data: {
                id: id,
                label: label,
                nodeType: nodeType,
                ...extraData
            }
        });
    }

    // Helper: add edge if not duplicate
    function addEdge(id, source, target, type, label, extraData) {
        const key = [source, target].sort().join('---') + '---' + type + '---' + (label || '');
        if (createdEdgeKeys.has(key)) return;
        // Only add if both nodes exist
        if (!createdNodeIds.has(source) || !createdNodeIds.has(target)) return;
        createdEdgeKeys.add(key);
        logicalEdges.push({
            data: {
                id: id,
                source: source,
                target: target,
                type: type,
                interfaceLabel: label || '',
                ...extraData
            }
        });
    }

    // --- Phase 1: Create VRF instance nodes ---
    // Each device with VRFs gets one node per VRF
    devicesData.forEach(device => {
        const vrfs = device.vrfs || [];
        vrfs.forEach(vrf => {
            const nodeId = 'logical-' + device.hostname + '::' + vrf.name;
            addNode(nodeId, device.hostname + '\nVRF ' + vrf.name, 'logical-vrf', {
                physicalHost: device.hostname,
                vrfName: vrf.name,
                vrfColor: getVRFColor(vrf.name),
                role: 'vrf-instance',
                roleColor: getVRFColor(vrf.name)
            });
        });
    });

    // --- Phase 2: Create L2 switch nodes ---
    // Devices appear as L2 nodes when they have VLAN/MAC/ARP data or LLDP to non-VRF devices
    devicesData.forEach(device => {
        const hasMACData = (device.macEntries || []).length > 0 || (device.arpEntries || []).length > 0;
        const hasVLANs = (device.vlans || []).length > 0;
        const hasLLDP = deduplicatedEdges.some(e => e.source === device.hostname || e.target === device.hostname);

        if (hasMACData || hasVLANs || hasLLDP) {
            const nodeId = 'logical-l2-' + device.hostname;
            addNode(nodeId, device.hostname, 'logical-l2', {
                physicalHost: device.hostname,
                role: classifyDeviceRole(device),
                roleColor: ROLE_COLORS[classifyDeviceRole(device)] || '#78909C'
            });
        }
    });

    // --- Phase 3: Create spine/transit nodes ---
    // Devices that have VXLAN NVE peers but no local VRFs act as transit
    devicesData.forEach(device => {
        const isTransit = (device.nvePeers || []).length > 0 && (device.vrfs || []).length === 0;
        if (isTransit) {
            const nodeId = 'logical-spine-' + device.hostname;
            addNode(nodeId, device.hostname, 'logical-spine', {
                physicalHost: device.hostname,
                role: 'spine',
                roleColor: ROLE_COLORS['core'] || '#FF9800'
            });
        }
    });

    // --- Phase 4: Create endpoint nodes ---
    // MAC/ARP endpoints with their VLAN and port context
    const seenMacs = new Set();
    devicesData.forEach(device => {
        (device.macEntries || []).forEach(entry => {
            if (seenMacs.has(entry.mac)) return;
            // Skip MACs learned on uplink ports (trunk heuristic) or VXLAN
            if (entry.remoteDIP) return;
            seenMacs.add(entry.mac);

            const nodeId = 'logical-ep-' + entry.mac.replace(/:/g, '');
            addNode(nodeId, 'MAC: ' + entry.mac, 'logical-endpoint', {
                mac: entry.mac,
                vlan: entry.vlan || 0,
                interface: entry.interface || '',
                role: 'host',
                roleColor: '#78909C'
            });
        });
    });

    // --- Phase 5: VLAN trunk edges ---
    // L2 connections between devices that share VLANs via LLDP links
    deduplicatedEdges.forEach((edge, idx) => {
        const srcDevice = devicesData.find(d => d.hostname === edge.source);
        const tgtDevice = devicesData.find(d => d.hostname === edge.target);
        if (!srcDevice || !tgtDevice) return;

        // Find shared VLANs between devices
        const srcVlans = new Set((srcDevice.vlans || []).map(v => v.id));
        const tgtVlans = new Set((tgtDevice.vlans || []).map(v => v.id));
        const sharedVlans = [...srcVlans].filter(v => tgtVlans.has(v));

        const srcL2 = 'logical-l2-' + edge.source;
        const tgtL2 = 'logical-l2-' + edge.target;

        if (sharedVlans.length > 0 && createdNodeIds.has(srcL2) && createdNodeIds.has(tgtL2)) {
            const vlanLabel = sharedVlans.length <= 3
                ? 'VLAN ' + sharedVlans.join(', ')
                : 'VLAN ' + sharedVlans.slice(0, 3).join(', ') + '...';
            addEdge('logical-vlan-' + idx, srcL2, tgtL2, 'logical-vlan',
                vlanLabel, { lineColor: '#4CAF50' });
        } else if (createdNodeIds.has(srcL2) && createdNodeIds.has(tgtL2)) {
            // Physical link without shared VLANs — still show as L2 link
            const portLabel = (edge.sourcePort || '') + ' → ' + (edge.targetPort || '');
            addEdge('logical-link-' + idx, srcL2, tgtL2, 'logical-link',
                portLabel, { lineColor: '#9E9E9E' });
        }
    });

    // --- Phase 6: BGP peering edges between VRF instances ---
    devicesData.forEach(device => {
        (device.vrfs || []).forEach(vrf => {
            (vrf.bgpPeers || []).forEach(peer => {
                const peerHostname = ipToDevice.get(peer.neighborIP);
                if (!peerHostname || peerHostname === device.hostname) return;

                const sourceVrf = 'logical-' + device.hostname + '::' + vrf.name;
                const targetVrf = 'logical-' + peerHostname + '::' + vrf.name;

                if (createdNodeIds.has(sourceVrf) && createdNodeIds.has(targetVrf)) {
                    const bgpLabel = 'BGP AS' + (peer.remoteAS || '?');
                    addEdge('logical-bgp-' + device.hostname + '-' + vrf.name + '-' + peer.neighborIP,
                        sourceVrf, targetVrf, 'logical-bgp',
                        bgpLabel, { lineColor: getVRFColor(vrf.name) });
                }
            });
        });
    });

    // --- Phase 7: VXLAN overlay edges ---
    // Connect VRF instances through spine via VXLAN VNI mapping
    devicesData.forEach(device => {
        const nvePeers = device.nvePeers || [];
        const vxlanMappings = device.vxlanMappings || [];

        nvePeers.forEach(peer => {
            const peerHostname = ipToDevice.get(peer.peerIP);
            if (!peerHostname || peerHostname === device.hostname) return;

            // If both devices have VRFs, create VRF-to-VRF edges with VNI label
            const peerDevice = devicesData.find(d => d.hostname === peerHostname);
            if (!peerDevice) return;

            (device.vrfs || []).forEach(vrf => {
                const sourceVrf = 'logical-' + device.hostname + '::' + vrf.name;
                const targetVrf = 'logical-' + peerHostname + '::' + vrf.name;

                if (createdNodeIds.has(sourceVrf) && createdNodeIds.has(targetVrf)) {
                    // Find VNI for this VRF's VLANs
                    const vrfVnis = vxlanMappings
                        .filter(m => m.vrfName === vrf.name || (vrf.vnis && vrf.vnis.includes(m.vni)));
                    const vniLabel = vrfVnis.length > 0
                        ? 'VXLAN VNI ' + vrfVnis.map(v => v.vni).join(',')
                        : 'VXLAN';
                    addEdge('logical-vxlan-' + device.hostname + '-' + peerHostname + '-' + vrf.name,
                        sourceVrf, targetVrf, 'logical-vxlan',
                        vniLabel, { lineColor: '#9C27B0', lineStyle: 'dashed' });
                }
            });
        });
    });

    // --- Phase 8: Internal L2-to-VRF edges ---
    // Connect a device's L2 node to its VRF nodes (showing the L2/L3 boundary)
    devicesData.forEach(device => {
        const l2Node = 'logical-l2-' + device.hostname;
        if (!createdNodeIds.has(l2Node)) return;

        (device.vrfs || []).forEach(vrf => {
            const vrfNode = 'logical-' + device.hostname + '::' + vrf.name;
            if (!createdNodeIds.has(vrfNode)) return;

            // Label with VRF's VLANs if known
            const vrfVlans = (vrf.interfaces || [])
                .filter(i => /vlan/i.test(i))
                .map(i => i.replace(/[^0-9]/g, ''))
                .filter(v => v);
            const label = vrfVlans.length > 0
                ? 'SVI VLAN ' + vrfVlans.slice(0, 3).join(',')
                : vrf.name;

            addEdge('logical-internal-' + device.hostname + '-' + vrf.name,
                l2Node, vrfNode, 'logical-internal',
                label, { lineColor: '#607D8B', lineStyle: 'dotted' });
        });
    });

    // --- Phase 9: Endpoint edges ---
    // Connect MAC endpoints to their L2 switch node
    devicesData.forEach(device => {
        const l2Node = 'logical-l2-' + device.hostname;
        if (!createdNodeIds.has(l2Node)) return;

        (device.macEntries || []).forEach(entry => {
            if (entry.remoteDIP) return; // Skip VXLAN-learned
            const epNode = 'logical-ep-' + entry.mac.replace(/:/g, '');
            if (!createdNodeIds.has(epNode)) return;

            const label = (entry.interface || '') + (entry.vlan ? ' VLAN ' + entry.vlan : '');
            addEdge('logical-ep-edge-' + entry.mac.replace(/:/g, '') + '-' + device.hostname,
                l2Node, epNode, 'logical-endpoint-link',
                label, { lineColor: '#78909C' });
        });
    });

    // --- Phase 10: MCLAG edges ---
    devicesData.forEach(device => {
        if (!device.mclagData) return;
        // mclagData has peerAddress (IP), not peerHostname — resolve via ipToDevice
        const peerIP = device.mclagData.peerAddress;
        if (!peerIP) return;
        const peerHostname = ipToDevice.get(peerIP);
        if (!peerHostname) return;

        const srcL2 = 'logical-l2-' + device.hostname;
        const tgtL2 = 'logical-l2-' + peerHostname;
        if (createdNodeIds.has(srcL2) && createdNodeIds.has(tgtL2)) {
            addEdge('logical-mclag-' + device.hostname + '-' + peerHostname,
                srcL2, tgtL2, 'logical-mclag',
                'MCLAG', { lineColor: '#FF5722', lineStyle: 'dashed' });
        }
    });

    return { nodes: logicalNodes, edges: logicalEdges };
}

/**
 * Switch view - supports logical view element swapping
 */
function switchView(view) {
    if (!cy) {
        showNotification('Generate topology first', 'error');
        return;
    }

    // Save original elements on first call
    if (!window._dnmOriginalElements) {
        window._dnmOriginalElements = cy.elements().jsons();
    }

    currentView = view;

    if (view === 'logical' && window._dnmLogicalElements) {
        // Replace graph elements with logical view elements
        cy.elements().remove();
        cy.add(window._dnmLogicalElements.nodes);
        cy.add(window._dnmLogicalElements.edges);
    } else if (window._dnmOriginalElements) {
        // Restore original elements for all other views
        cy.elements().remove();
        cy.add(window._dnmOriginalElements);
    }

    cy.style(getStyleForView(view));

    // Use hierarchical layout for logical view, cose-bilkent for others
    const layoutOptions = (view === 'logical')
        ? {
            name: 'breadthfirst',
            directed: true,
            spacingFactor: 1.5,
            avoidOverlap: true,
            grid: false
        }
        : {
            name: LAYOUT_NAME,
            nodeDimensionsIncludeLabels: true,
            idealEdgeLength: 100,
            nodeRepulsion: 4500,
            nestingFactor: 0.1,
            gravity: 0.8,
            numIter: 2500,
            tile: true,
            animate: 'end',
            animationDuration: 500,
            fit: true,
            padding: 30
        };
    cy.layout(layoutOptions).run();

    // Update active tab by matching view name in button text
    document.querySelectorAll('.view-tab').forEach(tab => {
        tab.classList.remove('active');
        const tabText = tab.textContent.toLowerCase();
        if (tabText.includes(view)) {
            tab.classList.add('active');
        }
    });

    showNotification(`Switched to ${view} view`, 'success');
}

/**
 * Toggle endpoint node visibility (ARP/MAC discovered hosts).
 * Endpoints are hidden by default to avoid clutter; this checkbox reveals them.
 */
function toggleEndpoints(show) {
    if (!cy) return;
    if (show) {
        cy.nodes('[nodeType="endpoint"]').style('display', 'element');
        cy.edges('[type="endpoint"]').style('display', 'element');
    } else {
        cy.nodes('[nodeType="endpoint"]').style('display', 'none');
        cy.edges('[type="endpoint"]').style('display', 'none');
    }
}

/**
 * Filter topology based on search and filters
 */
function filterTopology() {
    if (!cy) return;

    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const roleFilter = document.getElementById('roleFilter').value;
    currentFilters = { search: searchTerm, role: roleFilter };

    // Reset all nodes and edges
    cy.nodes().removeClass('dimmed highlighted');
    cy.edges().removeClass('dimmed');

    let matchedNodes = cy.nodes();

    // Apply role filter (only on device nodes)
    if (roleFilter !== 'all') {
        matchedNodes = matchedNodes.filter(node => node.data('role') === roleFilter);
    }

    // Apply search filter
    if (searchTerm) {
        matchedNodes = matchedNodes.filter(node => {
            const label = node.data('label').toLowerCase();
            const device = node.data('deviceData');

            // Search in label (hostname or VRF name)
            if (label.includes(searchTerm)) return true;

            if (!device) return false;

            // Search in interfaces
            const interfaces = [
                ...device.lldpNeighbors.map(n => n.sourcePort),
                ...device.ospfNeighbors.map(n => n.interface),
            ].join(' ').toLowerCase();
            if (interfaces.includes(searchTerm)) return true;

            // Search in IP addresses
            const ips = [
                ...device.ospfNeighbors.map(n => n.address),
                ...device.bgpPeers.map(p => p.neighborIP),
            ].join(' ').toLowerCase();
            if (ips.includes(searchTerm)) return true;

            // Search in VRF names
            if (device.vrfs) {
                const vrfNames = device.vrfs.map(v => v.name).join(' ').toLowerCase();
                if (vrfNames.includes(searchTerm)) return true;
            }

            return false;
        });
    }

    // Apply dimming
    if (searchTerm || roleFilter !== 'all') {
        cy.nodes().addClass('dimmed');
        cy.edges().addClass('dimmed');

        matchedNodes.removeClass('dimmed').addClass('highlighted');

        // Highlight edges connected to matched nodes
        matchedNodes.forEach(node => {
            node.connectedEdges().removeClass('dimmed');
        });
    }

    const matchCount = matchedNodes.length;
    showNotification(`${matchCount} device(s) matched`, 'success');
}

/**
 * Clear all filters
 */
function clearFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('roleFilter').value = 'all';

    if (cy) {
        cy.nodes().removeClass('dimmed highlighted');
        cy.edges().removeClass('dimmed');
    }

    currentFilters = { search: '', role: 'all' };
    showNotification('Filters cleared', 'success');
}

/**
 * Path highlighting - Start selection mode
 */
function startPathSelection() {
    if (!cy) {
        showNotification('Generate topology first', 'error');
        return;
    }

    pathSelectionMode = true;
    pathSourceNode = null;
    pathTargetNode = null;

    showNotification('Click a source node, then a destination node', 'success');
}

/**
 * Handle path node selection
 */
function handlePathNodeSelection(node) {
    if (!pathSourceNode) {
        pathSourceNode = node;
        node.addClass('path-source');
        updatePathSelectionBar();
        showNotification(`Source selected: ${node.data('label')}. Now select destination.`, 'success');
    } else if (!pathTargetNode && node.id() !== pathSourceNode.id()) {
        pathTargetNode = node;
        node.addClass('path-target');
        calculateAndHighlightPath();
        pathSelectionMode = false;
    }
}

/**
 * Calculate and highlight shortest path
 */
function calculateAndHighlightPath() {
    if (!pathSourceNode || !pathTargetNode) return;

    // Run BFS to find shortest path
    const bfs = cy.elements().bfs({
        root: pathSourceNode,
        visit: function(v, e, u, i, depth) {},
        directed: false
    });

    const pathTo = bfs.pathTo(pathTargetNode);

    if (pathTo.length === 0) {
        showNotification('No path found between selected nodes', 'warning');
        clearPathSelection();
        return;
    }

    // Highlight path
    cy.elements().addClass('dimmed');
    pathTo.removeClass('dimmed').addClass('path-highlight');

    // Calculate path details
    const hopCount = pathTo.edges().length;
    const interfaces = [];
    pathTo.edges().forEach(edge => {
        interfaces.push(`${edge.data('sourcePort')} → ${edge.data('targetPort')}`);
    });

    updatePathSelectionBar(hopCount, interfaces);
    showNotification(`Path found: ${hopCount} hops`, 'success');
}

/**
 * Update path selection bar
 */
function updatePathSelectionBar(hopCount = null, interfaces = null) {
    const bar = document.getElementById('pathSelectionBar');

    if (!pathSourceNode && !pathTargetNode) {
        bar.style.display = 'none';
        return;
    }

    bar.style.display = 'block';

    let html = '<h4>Path Analysis</h4><div class="path-info">';

    if (pathSourceNode) {
        html += `<div class="path-node">Source: ${pathSourceNode.data('label')}</div>`;
    }

    if (pathTargetNode) {
        html += `<div class="path-node">Destination: ${pathTargetNode.data('label')}</div>`;
    }

    if (hopCount !== null) {
        html += `<div class="path-details"><strong>Hops:</strong> ${hopCount}<br><strong>Path:</strong> ${interfaces.join(' → ')}</div>`;
    }

    html += `<button type="button" class="btn-secondary" onclick="clearPathSelection()" style="margin-left: auto;">Clear Path</button>`;
    html += '</div>';

    bar.innerHTML = html;
}

/**
 * Clear path selection
 */
function clearPathSelection() {
    pathSelectionMode = false;
    pathSourceNode = null;
    pathTargetNode = null;

    if (cy) {
        cy.nodes().removeClass('path-source path-target');
        cy.elements().removeClass('dimmed path-highlight');
    }

    updatePathSelectionBar();
}

/**
 * Show device details
 */
function showDeviceDetails(nodeData) {
    const panel = document.getElementById('detailsPanel');
    const header = document.getElementById('detailsHeader');
    const grid = document.getElementById('detailsGrid');
    const list = document.getElementById('detailsList');

    // VRF child node details
    if (nodeData.nodeType === 'vrf') {
        const vrf = nodeData.vrfData;
        header.textContent = `VRF: ${vrf.name} (on ${nodeData.physicalHost})`;

        grid.innerHTML = `
            <div class="details-item">
                <div class="details-label">VRF Name</div>
                <div class="details-value">${vrf.name}</div>
            </div>
            <div class="details-item">
                <div class="details-label">RD</div>
                <div class="details-value">${vrf.rd || 'N/A'}</div>
            </div>
            <div class="details-item">
                <div class="details-label">Interfaces</div>
                <div class="details-value">${vrf.interfaces.length}</div>
            </div>
            <div class="details-item">
                <div class="details-label">OSPF Neighbors</div>
                <div class="details-value">${vrf.ospfNeighbors.length}</div>
            </div>
            <div class="details-item">
                <div class="details-label">BGP Peers</div>
                <div class="details-value">${vrf.bgpPeers.length}</div>
            </div>
            <div class="details-item">
                <div class="details-label">Type</div>
                <div class="details-value">${vrf.vendorType || 'vrf'}</div>
            </div>
        `;

        let listHTML = '';

        if (vrf.interfaces.length > 0) {
            listHTML += '<h4>Interfaces</h4>';
            vrf.interfaces.forEach(intf => {
                listHTML += `<div class="details-list-item">${intf}</div>`;
            });
        }

        if (vrf.ospfNeighbors.length > 0) {
            listHTML += '<h4>OSPF Neighbors</h4>';
            vrf.ospfNeighbors.forEach(n => {
                listHTML += `<div class="details-list-item">${n.neighborId} - ${n.address} (${n.interface}) - ${n.state}</div>`;
            });
        }

        if (vrf.bgpPeers.length > 0) {
            listHTML += '<h4>BGP Peers</h4>';
            vrf.bgpPeers.forEach(p => {
                listHTML += `<div class="details-list-item">${p.neighborIP} AS${p.peerAS} - ${p.state}</div>`;
            });
        }

        if (vrf.importRTs.length > 0 || vrf.exportRTs.length > 0) {
            listHTML += '<h4>Route Targets</h4>';
            if (vrf.exportRTs.length > 0) {
                listHTML += `<div class="details-list-item"><strong>Export:</strong> ${vrf.exportRTs.join(', ')}</div>`;
            }
            if (vrf.importRTs.length > 0) {
                listHTML += `<div class="details-list-item"><strong>Import:</strong> ${vrf.importRTs.join(', ')}</div>`;
            }
        }

        if (vrf.leaksTo.length > 0 || vrf.leaksFrom.length > 0) {
            listHTML += '<h4>Route Leaking</h4>';
            if (vrf.leaksTo.length > 0) {
                listHTML += `<div class="details-list-item route-leak-indicator">Leaks to: ${vrf.leaksTo.join(', ')}</div>`;
            }
            if (vrf.leaksFrom.length > 0) {
                listHTML += `<div class="details-list-item route-leak-indicator">Leaks from: ${vrf.leaksFrom.join(', ')}</div>`;
            }
        }

        if (vrf.vnis.length > 0) {
            listHTML += '<h4>VXLAN VNIs</h4>';
            vrf.vnis.forEach(vni => {
                listHTML += `<div class="details-list-item">VNI ${vni}</div>`;
            });
        }

        list.innerHTML = listHTML;
        panel.classList.add('visible');
        panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        return;
    }

    // Physical device node details
    header.textContent = `Device: ${nodeData.label}`;

    const vrfs = nodeData.deviceData.vrfs || [];
    const vrfCountHTML = vrfs.length > 0
        ? `<div class="details-item"><div class="details-label">VRFs</div><div class="details-value">${vrfs.length}</div></div>`
        : '';
    const vendorHTML = nodeData.vendor
        ? `<div class="details-item"><div class="details-label">Vendor</div><div class="details-value" style="font-size:13px">${nodeData.vendor}</div></div>`
        : '';

    grid.innerHTML = `
        <div class="details-item">
            <div class="details-label">Role</div>
            <div class="details-value">${nodeData.role.toUpperCase()}</div>
        </div>
        ${vendorHTML}
        <div class="details-item">
            <div class="details-label">LLDP Neighbors</div>
            <div class="details-value">${nodeData.lldpCount}</div>
        </div>
        <div class="details-item">
            <div class="details-label">OSPF Adjacencies</div>
            <div class="details-value">${nodeData.ospfCount}</div>
        </div>
        <div class="details-item">
            <div class="details-label">BGP Peers</div>
            <div class="details-value">${nodeData.bgpCount}</div>
        </div>
        <div class="details-item">
            <div class="details-label">MAC Addresses</div>
            <div class="details-value">${nodeData.macCount}</div>
        </div>
        <div class="details-item">
            <div class="details-label">VLANs</div>
            <div class="details-value">${(nodeData.vlans || []).length}</div>
        </div>
        ${vrfCountHTML}
    `;

    let listHTML = '';

    if (nodeData.deviceData.lldpNeighbors.length > 0) {
        listHTML += '<h4>LLDP Neighbors</h4>';
        nodeData.deviceData.lldpNeighbors.forEach(neighbor => {
            listHTML += `<div class="details-list-item">${neighbor.sourcePort} → ${neighbor.target} (${neighbor.targetPort})</div>`;
        });
    }

    if (nodeData.deviceData.ospfNeighbors.length > 0) {
        listHTML += '<h4>OSPF Neighbors</h4>';
        nodeData.deviceData.ospfNeighbors.forEach(neighbor => {
            listHTML += `<div class="details-list-item">${neighbor.neighborId} - ${neighbor.address} (${neighbor.interface}) - ${neighbor.state}${neighbor.vrfName && neighbor.vrfName !== 'global' ? ' [VRF: ' + neighbor.vrfName + ']' : ''}</div>`;
        });
    }

    if (nodeData.deviceData.bgpPeers.length > 0) {
        listHTML += '<h4>BGP Peers</h4>';
        nodeData.deviceData.bgpPeers.forEach(peer => {
            listHTML += `<div class="details-list-item">${peer.neighborIP} AS${peer.peerAS} - ${peer.state}${peer.vrfName && peer.vrfName !== 'global' ? ' [VRF: ' + peer.vrfName + ']' : ''}</div>`;
        });
    }

    if ((nodeData.vlans || []).length > 0) {
        listHTML += '<h4>VLANs</h4>';
        nodeData.vlans.forEach(vlan => {
            listHTML += `<div class="details-list-item">VLAN ${vlan.id}: ${vlan.name} (${vlan.status})</div>`;
        });
    }

    // VRF summary section
    if (vrfs.length > 0) {
        listHTML += '<h4>VRFs</h4>';
        vrfs.forEach(vrf => {
            const color = getVRFColor(vrf.name);
            listHTML += `<div class="vrf-detail-section" style="border-left-color: ${color}">`;
            listHTML += `<h5><span class="vrf-badge" style="background: ${color}">${vrf.name}</span>`;
            if (vrf.rd) listHTML += ` <small>RD: ${vrf.rd}</small>`;
            listHTML += `</h5>`;
            listHTML += `<div class="vrf-detail-item">${vrf.ospfNeighbors.length} OSPF, ${vrf.bgpPeers.length} BGP, ${vrf.interfaces.length} interfaces</div>`;
            if (vrf.leaksTo.length > 0) {
                listHTML += `<div class="vrf-detail-item route-leak-indicator">Leaks to: ${vrf.leaksTo.join(', ')}</div>`;
            }
            listHTML += '</div>';
        });
    }

    // VXLAN info
    const vxlanMappings = nodeData.deviceData.vxlanMappings || [];
    if (vxlanMappings.length > 0) {
        listHTML += '<h4>VXLAN VNI Mappings</h4>';
        vxlanMappings.forEach(m => {
            listHTML += `<div class="details-list-item">VNI ${m.vni} → VLAN ${m.vlan} (${m.type})${m.vrfName ? ' [VRF: ' + m.vrfName + ']' : ''}</div>`;
        });
    }

    // MCLAG info
    const mclag = nodeData.deviceData.mclagData || null;
    if (mclag) {
        listHTML += '<h4>MCLAG</h4>';
        if (mclag.domainId !== null) {
            listHTML += `<div class="details-list-item"><strong>Domain ID:</strong> ${mclag.domainId}</div>`;
        }
        if (mclag.role) {
            listHTML += `<div class="details-list-item"><strong>Role:</strong> ${mclag.role}</div>`;
        }
        if (mclag.sessionStatus) {
            listHTML += `<div class="details-list-item"><strong>Session:</strong> ${mclag.sessionStatus}</div>`;
        }
        if (mclag.peerLink) {
            listHTML += `<div class="details-list-item"><strong>Peer Link:</strong> ${mclag.peerLink}</div>`;
        }
        if (mclag.sourceAddress) {
            listHTML += `<div class="details-list-item"><strong>Source IP:</strong> ${mclag.sourceAddress}</div>`;
        }
        if (mclag.peerAddress) {
            listHTML += `<div class="details-list-item"><strong>Peer IP:</strong> ${mclag.peerAddress}</div>`;
        }
        if (mclag.systemMac) {
            listHTML += `<div class="details-list-item"><strong>System MAC:</strong> ${mclag.systemMac}</div>`;
        }
        if (mclag.mclagSystemMac) {
            listHTML += `<div class="details-list-item"><strong>MCLAG System MAC:</strong> ${mclag.mclagSystemMac}</div>`;
        }
        if (mclag.mclagInterfaces.length > 0) {
            listHTML += '<div class="details-list-item"><strong>MCLAG Interfaces:</strong></div>';
            mclag.mclagInterfaces.forEach(intf => {
                listHTML += `<div class="details-list-item" style="padding-left:16px">${intf.name} local:${intf.localStatus} remote:${intf.remoteStatus}</div>`;
            });
        }
    }

    list.innerHTML = listHTML;
    panel.classList.add('visible');

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

/**
 * Update statistics
 */
function updateStats(nodes, edges) {
    document.getElementById('statDevices').textContent = nodes.filter(n => n.data.nodeType === 'device').length;
    document.getElementById('statLinks').textContent = edges.filter(e => e.data.type === 'physical').length;

    const ospfCount = devicesData.reduce((sum, d) => sum + d.ospfNeighbors.length, 0);
    const bgpCount = devicesData.reduce((sum, d) => sum + d.bgpPeers.length, 0);

    document.getElementById('statOSPF').textContent = ospfCount;
    document.getElementById('statBGP').textContent = bgpCount;

    // Update VRF stat if element exists
    const vrfStatEl = document.getElementById('statVRFs');
    if (vrfStatEl) {
        const vrfCount = devicesData.reduce((sum, d) => sum + (d.vrfs || []).length, 0);
        vrfStatEl.textContent = vrfCount;
    }
}

/**
 * Save topology to LocalStorage
 */
function saveTopologyToStorage() {
    if (devicesData.length === 0) {
        showNotification('No topology to save', 'error');
        return;
    }

    const name = prompt('Enter a name for this topology:');
    if (!name) return;

    const topology = {
        name: name,
        timestamp: Date.now(),
        devices: devicesData,
        positions: cy ? cy.nodes().map(n => ({ id: n.id(), position: n.position() })) : []
    };

    // Get existing topologies
    const saved = JSON.parse(localStorage.getItem('networkTopologies') || '[]');
    saved.push(topology);
    localStorage.setItem('networkTopologies', JSON.stringify(saved));

    showNotification(`Topology "${name}" saved successfully`, 'success');
    renderSavedTopologies();
}

/**
 * Load topology from LocalStorage
 */
function loadTopologyFromStorage() {
    const saved = JSON.parse(localStorage.getItem('networkTopologies') || '[]');

    if (saved.length === 0) {
        showNotification('No saved topologies found', 'warning');
        return;
    }

    renderSavedTopologies();
    document.getElementById('savedTopologiesContainer').style.display = 'block';
}

/**
 * Render saved topologies list
 */
function renderSavedTopologies() {
    const saved = JSON.parse(localStorage.getItem('networkTopologies') || '[]');
    const container = document.getElementById('savedTopologiesList');

    if (saved.length === 0) {
        container.innerHTML = '<p style="color: #999; font-style: italic;">No saved topologies</p>';
        return;
    }

    container.innerHTML = saved.map((topo, index) => {
        const date = new Date(topo.timestamp).toLocaleString();
        return `
            <div class="saved-topology-item">
                <div class="saved-topology-info">
                    <div class="saved-topology-name">${topo.name}</div>
                    <div class="saved-topology-meta">${date} - ${topo.devices.length} devices</div>
                </div>
                <div class="saved-topology-actions">
                    <button type="button" class="btn-secondary" onclick="restoreTopology(${index})" style="padding: 6px 12px; font-size: 12px;">Load</button>
                    <button type="button" class="btn-danger" onclick="deleteSavedTopology(${index})" style="padding: 6px 12px; font-size: 12px;">Delete</button>
                </div>
            </div>
        `;
    }).join('');
}

/**
 * Restore topology from saved data
 */
function restoreTopology(index) {
    const saved = JSON.parse(localStorage.getItem('networkTopologies') || '[]');
    const topology = saved[index];

    if (!topology) {
        showNotification('Topology not found', 'error');
        return;
    }

    devicesData = topology.devices;
    renderDeviceChips();
    renderWizardCollectedList();
    generateTopology();

    // Restore positions if available
    if (topology.positions && cy) {
        setTimeout(() => {
            topology.positions.forEach(pos => {
                const node = cy.getElementById(pos.id);
                if (node.length > 0) {
                    node.position(pos.position);
                }
            });
        }, 100);
    }

    showNotification(`Topology "${topology.name}" loaded successfully`, 'success');
    document.getElementById('savedTopologiesContainer').style.display = 'none';
}

/**
 * Delete saved topology
 */
function deleteSavedTopology(index) {
    const saved = JSON.parse(localStorage.getItem('networkTopologies') || '[]');
    const topology = saved[index];

    if (!confirm(`Delete topology "${topology.name}"?`)) return;

    saved.splice(index, 1);
    localStorage.setItem('networkTopologies', JSON.stringify(saved));

    showNotification(`Topology "${topology.name}" deleted`, 'success');
    renderSavedTopologies();

    if (saved.length === 0) {
        document.getElementById('savedTopologiesContainer').style.display = 'none';
    }
}

/**
 * Export topology as JSON file
 */
function exportTopologyJSON() {
    if (devicesData.length === 0) {
        showNotification('No topology to export', 'error');
        return;
    }

    if (!confirm('Export topology as JSON? This may contain sensitive network data.')) {
        return;
    }

    const topology = {
        name: 'Exported Topology',
        timestamp: Date.now(),
        devices: devicesData,
        positions: cy ? cy.nodes().map(n => ({ id: n.id(), position: n.position() })) : []
    };

    const blob = new Blob([JSON.stringify(topology, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `network-topology-${Date.now()}.json`;
    link.click();
    URL.revokeObjectURL(url);

    showNotification('Topology exported as JSON', 'success');
}

/**
 * Import topology from JSON file
 */
function importTopologyJSON() {
    document.getElementById('jsonImportInput').click();
}

/**
 * Handle JSON import
 */
function handleJSONImport(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const topology = JSON.parse(e.target.result);

            if (!topology.devices || !Array.isArray(topology.devices)) {
                throw new Error('Invalid topology format');
            }

            devicesData = topology.devices;
            renderDeviceChips();
            renderWizardCollectedList();
            generateTopology();

            // Restore positions if available
            if (topology.positions && cy) {
                setTimeout(() => {
                    topology.positions.forEach(pos => {
                        const node = cy.getElementById(pos.id);
                        if (node.length > 0) {
                            node.position(pos.position);
                        }
                    });
                }, 100);
            }

            showNotification('Topology imported successfully', 'success');
        } catch (error) {
            showNotification(`Import failed: ${error.message}`, 'error');
        }
    };
    reader.readAsText(file);

    // Reset input
    event.target.value = '';
}

/**
 * Export PNG
 */
function exportPNG() {
    if (!cy) {
        showNotification('Generate topology first', 'error');
        return;
    }

    if (!confirm('Export topology as PNG? This may contain sensitive network data.')) {
        return;
    }

    const png = cy.png({ full: true, scale: 2 });
    const link = document.createElement('a');
    link.href = png;
    link.download = `network-topology-${Date.now()}.png`;
    link.click();

    showNotification('Topology exported as PNG', 'success');
}

/**
 * Export SVG
 */
function exportSVG() {
    if (!cy) {
        showNotification('Generate topology first', 'error');
        return;
    }

    if (!confirm('Export topology as SVG? This may contain sensitive network data.')) {
        return;
    }

    const svg = cy.svg({ full: true });
    const blob = new Blob([svg], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `network-topology-${Date.now()}.svg`;
    link.click();
    URL.revokeObjectURL(url);

    showNotification('Topology exported as SVG', 'success');
}

/**
 * Show a training note callout below the topology canvas
 */
function showTrainingNote(text) {
    let noteEl = document.getElementById('trainingNote');
    if (!noteEl) {
        noteEl = document.createElement('div');
        noteEl.id = 'trainingNote';
        noteEl.className = 'training-note';
        const canvas = document.getElementById('topologyCanvas');
        if (canvas && canvas.parentNode) {
            canvas.parentNode.insertBefore(noteEl, canvas.nextSibling);
        }
    }
    noteEl.innerHTML = '<strong>Training Note</strong>' + text;
    noteEl.style.display = 'block';
}

/**
 * Hide the training note callout
 */
function hideTrainingNote() {
    const noteEl = document.getElementById('trainingNote');
    if (noteEl) {
        noteEl.style.display = 'none';
    }
}

/**
 * Load selected sample topology from JSON file
 */
async function loadSelectedSampleTopology() {
    const select = document.getElementById('sampleTopologySelect');
    const selectedId = select.value;

    if (!selectedId) {
        showNotification('Please select a topology from the dropdown', 'warning');
        return;
    }

    if (devicesData.length > 0) {
        if (!confirm('Clear existing devices and load sample topology?')) {
            return;
        }
        devicesData = [];
    }

    try {
        const response = await fetch('/data/network-topologies/' + selectedId + '.json');
        if (!response.ok) {
            throw new Error('HTTP ' + response.status);
        }
        const topology = await response.json();

        topology.devices.forEach(function(cliOutput) {
            const result = parseDevice(cliOutput);
            if (result.success) {
                devicesData.push(result);
            }
        });

        renderDeviceChips();
        renderWizardCollectedList();
        generateTopology();

        if (topology.trainingNote) {
            showTrainingNote(topology.trainingNote);
        }

        showNotification(topology.name + ' loaded (' + topology.deviceCount + ' devices)', 'success');
    } catch (err) {
        console.warn('Failed to fetch topology JSON, falling back to inline sample:', err);
        loadSampleData();
    }
}

/**
 * Load sample data for testing (inline fallback)
 */
function loadSampleData() {
    if (devicesData.length > 0) {
        if (!confirm('Clear existing devices and load sample topology?')) {
            return;
        }
        devicesData = [];
    }

    // Sample EdgeRouter01
    const edgeRouter = `EdgeRouter01# show lldp neighbors
Device ID           Local Intf     Hold-time  Capability      Port ID
CoreSwitch01        Gi0/0/0        120        B,R             Gi1/0/48
CoreSwitch02        Gi0/0/1        120        B,R             Gi1/0/48

EdgeRouter01# show ip ospf neighbor
Neighbor ID     Pri   State           Dead Time   Address         Interface
10.0.1.1          1   FULL/DR         00:00:35    10.255.0.2      GigabitEthernet0/0/0
10.0.1.2          1   FULL/DR         00:00:37    10.255.0.6      GigabitEthernet0/0/1

EdgeRouter01# show ip bgp summary
Neighbor        V           AS MsgRcvd MsgSent   TblVer  InQ OutQ Up/Down  State/PfxRcd
203.0.113.1     4        65000   45678   45690      156    0    0 2w3d           12`;

    // Sample CoreSwitch01
    const coreSwitch01 = `CoreSwitch01# show lldp neighbors
Device ID           Local Intf     Hold-time  Capability      Port ID
EdgeRouter01        Gi1/0/48       120        R               Gi0/0/0
CoreSwitch02        Gi1/0/47       120        B,R             Gi1/0/47
Distribution01      Gi1/0/10       120        B,R             Gi1/0/1

CoreSwitch01# show ip ospf neighbor
Neighbor ID     Pri   State           Dead Time   Address         Interface
10.0.0.1          1   FULL/BDR        00:00:38    10.255.0.1      GigabitEthernet1/0/48
10.0.1.2          1   FULL/DR         00:00:36    10.255.0.10     GigabitEthernet1/0/47`;

    // Sample CoreSwitch02
    const coreSwitch02 = `CoreSwitch02# show lldp neighbors
Device ID           Local Intf     Hold-time  Capability      Port ID
EdgeRouter01        Gi1/0/48       120        R               Gi0/0/1
CoreSwitch01        Gi1/0/47       120        B,R             Gi1/0/47
Distribution02      Gi1/0/10       120        B,R             Gi1/0/1

CoreSwitch02# show ip ospf neighbor
Neighbor ID     Pri   State           Dead Time   Address         Interface
10.0.0.1          1   FULL/BDR        00:00:39    10.255.0.5      GigabitEthernet1/0/48
10.0.1.1          1   FULL/BDR        00:00:35    10.255.0.9      GigabitEthernet1/0/47`;

    // Sample Distribution01
    const distribution01 = `Distribution01# show lldp neighbors
Device ID           Local Intf     Hold-time  Capability      Port ID
CoreSwitch01        Gi1/0/1        120        B,R             Gi1/0/10
AccessSW01          Gi1/0/2        120        B               Gi1/0/1

Distribution01# show ip ospf neighbor
Neighbor ID     Pri   State           Dead Time   Address         Interface
10.0.1.1          1   FULL/BDR        00:00:37    10.10.1.1       Vlan100`;

    // Sample AccessSW01
    const accessSW01 = `AccessSW01# show lldp neighbors
Device ID           Local Intf     Hold-time  Capability      Port ID
Distribution01      Gi1/0/1        120        B,R             Gi1/0/2

AccessSW01# show mac address-table | include DYNAMIC
  10    001a.2b3c.4d01    DYNAMIC     Gi1/0/5
  10    001a.2b3c.4d02    DYNAMIC     Gi1/0/6
  10    001a.2b3c.4d03    DYNAMIC     Gi1/0/7
  10    001a.2b3c.4d04    DYNAMIC     Gi1/0/8
  10    001a.2b3c.4d05    DYNAMIC     Gi1/0/9
  10    001a.2b3c.4d06    DYNAMIC     Gi1/0/10
  10    001a.2b3c.4d07    DYNAMIC     Gi1/0/11
  10    001a.2b3c.4d08    DYNAMIC     Gi1/0/12`;

    const samples = [edgeRouter, coreSwitch01, coreSwitch02, distribution01, accessSW01];

    samples.forEach(sample => {
        const result = parseDevice(sample);
        if (result.success) {
            devicesData.push(result);
        }
    });

    renderDeviceChips();
    renderWizardCollectedList();
    showNotification('Sample topology loaded (5 devices)', 'success');

    // Phase 5b: Auto-generate topology immediately after loading sample data
    generateTopology();
}

/**
 * ============================================================
 * PHASE 4 — Input Validation: per-parseType header validators
 * ============================================================
 *
 * Each key matches the parseType value from VENDOR_COMMAND_META.
 * Returns true  → looks like the expected output (accept)
 * Returns false → does not look right (show warning, don't block)
 */
const PARSE_TYPE_VALIDATORS = {
    'lldp_tabular':       (t) => /Device\s*ID/i.test(t) || /Device ID/i.test(t),
    'lldp_block':         (t) => /System\s*Name|SysName/i.test(t),
    'lldp_aruba':         (t) => /NeighborID|Neighbor Port/i.test(t),
    'lldp_junos':         (t) => /Local Interface|Chassis id/i.test(t),
    'lldp_vyos':          (t) => /Device\s*\|.*LocalPort|LLDP|CDP/i.test(t),
    'lldp_paloalto':      (t) => /local information/i.test(t),
    'lldp_forti_summary': (t) => /chassis\s+\S+\s+port/i.test(t),
    'lldp_forti_detail':  (t) => /Interface:/i.test(t),
    'lldp_sonic':         (t) => /LocalPort|RemoteDevice/i.test(t),
    'lldp_sonic_detail':  (t) => /Interface:.*via:\s*LLDP/i.test(t),
    'lldp_arista':        (t) => /Neighbor Device ID|Port\s+Neighbor/i.test(t),
    'lldp_arista_detail': (t) => /detected \d+ LLDP neighbor/i.test(t),
    'ospf':               (t) => /Neighbor\s*ID|Dead Time/i.test(t),
    'ospf_junos':         (t) => /Address\s+Interface\s+State/i.test(t),
    'ospf_arista':        (t) => /Neighbor ID.*Instance.*VRF/i.test(t),
    'ospf_paloalto':      (t) => /Neighbor IP.*VR|Area/i.test(t),
    'bgp':                (t) => /BGP router|Neighbor\s+V\s+AS/i.test(t),
    'bgp_nxos':           (t) => /BGP router|Neighbor\s+V\s+AS/i.test(t),
    'bgp_junos':          (t) => /AS\s+InPkt\s+OutPkt|Peer.*AS/i.test(t),
    'bgp_paloalto':       (t) => /peer\s+[\d.]+:\s+AS/i.test(t),
    'bgp_arista':         (t) => /BGP router|Neighbor\s+V\s+AS/i.test(t),
    'vrf':                (t) => /\S+\s+(?:<not set>|[\d.:]+)/i.test(t),
    'vrf_nxos':           (t) => /VRF-Name|VRF-ID/i.test(t),
    'vrf_detail':         (t) => /Route Target|import RT|export RT/i.test(t),
    'vrf_aruba':          (t) => /\d+\/\d+\/\d+/i.test(t),
    'vrf_junos':          (t) => /\S+\s+(vrf|virtual-router|vpls)/i.test(t),
    'vrf_paloalto':       (t) => /VIRTUAL ROUTER:/i.test(t),
    'vrf_fortios':        (t) => /name=\S+.*index=/i.test(t),
    'vrf_sonic':          (t) => /VRF\s+Interfaces|ip\s+vrf\s+\S+/i.test(t),
    'vrf_arista':         (t) => /IPv[46]\s+(?:routing|no routing)/i.test(t),
    'vlan':               (t) => /^\d+\s+\S+\s+(active|suspended)/im.test(t),
    'vxlan_nxos':         (t) => /\d+\s+\d{4,8}/m.test(t),
    'vxlan_sonic':        (t) => /\d+\s+\d{4,8}/m.test(t),
    'vxlan_arista':       (t) => /VNI.*VLAN/i.test(t),
    'nve_peers':          (t) => /nve\d+|Up|Down/i.test(t),
    'vtep_arista':        (t) => /VTEP|vtep/i.test(t)
};

/**
 * ============================================================
 * PHASE 3 — Wizard state and logic
 * ============================================================
 */

/** Wizard internal state — reset each time the wizard opens */
const wizardState = {
    step: 0,          // 0 = identity, 1..N = command steps, N+1 = summary
    vendor: '',
    displayName: '',
    commands: [],     // copy of VENDOR_COMMAND_META[vendor]
    collectedOutputs: {}  // commandKey -> text | null
};

/**
 * Open the wizard modal at step 0 (identity).
 */
function openWizard() {
    wizardState.step = 0;
    wizardState.vendor = '';
    wizardState.displayName = '';
    wizardState.commands = [];
    wizardState.collectedOutputs = {};

    document.getElementById('wizardOverlay').style.display = 'flex';
    document.body.style.overflow = 'hidden';
    renderWizardStep();
}

/**
 * Close the wizard modal.
 */
function closeWizard() {
    document.getElementById('wizardOverlay').style.display = 'none';
    document.body.style.overflow = '';
}

/**
 * Toggle the quick-add collapsed section.
 */
function toggleQuickAdd(btn) {
    const body = document.getElementById('quickAddBody');
    const caret = btn.querySelector('.quick-add-caret');
    const isOpen = body.classList.contains('open');
    body.classList.toggle('open', !isOpen);
    caret.classList.toggle('open', !isOpen);
    btn.setAttribute('aria-expanded', String(!isOpen));
    body.setAttribute('aria-hidden', String(isOpen));
}

/**
 * Update the progress bar fill width.
 * step 0 = 0%, command steps = proportional, summary = 100%
 */
function updateWizardProgress() {
    const fill = document.getElementById('wizardProgressFill');
    if (!fill) return;
    const total = wizardState.commands.length;
    let pct = 0;
    if (wizardState.step === 0) {
        pct = 0;
    } else if (total === 0) {
        pct = 100;
    } else if (wizardState.step > total) {
        pct = 100;
    } else {
        pct = Math.round(((wizardState.step) / (total + 1)) * 100);
    }
    fill.style.width = pct + '%';
}

/**
 * Main render dispatcher — calls the right render function for the current step.
 */
function renderWizardStep() {
    updateWizardProgress();
    const step = wizardState.step;

    if (step === 0) {
        renderWizardIdentityStep();
    } else if (step <= wizardState.commands.length) {
        renderWizardCommandStep(step - 1);   // 0-indexed into commands[]
    } else {
        renderWizardSummaryStep();
    }
}

/**
 * Step 0 — Device identity (name + vendor picker).
 */
function renderWizardIdentityStep() {
    const body = document.getElementById('wizardBody');
    const footer = document.getElementById('wizardFooter');

    // Build vendor options from VENDOR_COMMAND_META keys
    const vendorOptions = [
        { key: 'cisco-ios',    label: 'Cisco IOS / IOS-XE' },
        { key: 'cisco-nxos',   label: 'Cisco NX-OS' },
        { key: 'aruba-aoscx',  label: 'Aruba AOS-CX' },
        { key: 'juniper-junos',label: 'Juniper JunOS' },
        { key: 'vyos',         label: 'VyOS' },
        { key: 'paloalto',     label: 'Palo Alto PAN-OS' },
        { key: 'fortios',      label: 'Fortinet FortiOS' },
        { key: 'sonic',        label: 'Broadcom SONiC' },
        { key: 'arista-eos',   label: 'Arista EOS' }
    ];

    body.innerHTML = `
        <div class="wizard-step-label">Step 1 of ${Object.keys(VENDOR_COMMAND_META).length > 0 ? '?' : '2'} &mdash; Device Identity</div>
        <p style="color: #555; font-size: 14px; margin: 0 0 20px;">
            Identify this device so the wizard can prompt you for the right commands.
        </p>
        <div class="wizard-identity-form">
            <div class="wizard-field-group">
                <label for="wizardDeviceName">Device Name (optional)</label>
                <input type="text" class="wizard-text-input" id="wizardDeviceName"
                    placeholder="auto-detect from CLI output"
                    value="${escapeHtml(wizardState.displayName)}"
                    autocomplete="off" spellcheck="false">
                <small style="color: #888; font-size: 12px;">Leave blank to auto-detect from the CLI prompt in your output.</small>
            </div>
            <div class="wizard-field-group">
                <label for="wizardVendorSelect">Vendor <span style="color:#f44336">*</span></label>
                <select class="wizard-select" id="wizardVendorSelect">
                    <option value="">-- Select vendor --</option>
                    ${vendorOptions.map(v => `<option value="${v.key}"${wizardState.vendor === v.key ? ' selected' : ''}>${v.label}</option>`).join('')}
                </select>
            </div>
        </div>
        <div id="wizardStep0Error" style="color: #f44336; font-size: 13px; margin-top: 8px; display: none;">
            Please select a vendor to continue.
        </div>
    `;

    footer.innerHTML = `
        <div></div>
        <div class="wizard-btn-row">
            <button type="button" class="btn-wizard-next" onclick="wizardAdvanceFromIdentity()">
                Start &rarr;
            </button>
        </div>
    `;
}

/**
 * Advance from step 0 to step 1.
 */
function wizardAdvanceFromIdentity() {
    const vendorSelect = document.getElementById('wizardVendorSelect');
    const nameInput = document.getElementById('wizardDeviceName');
    const errEl = document.getElementById('wizardStep0Error');

    const vendor = vendorSelect ? vendorSelect.value : '';
    if (!vendor) {
        if (errEl) { errEl.style.display = 'block'; }
        vendorSelect.focus();
        return;
    }
    if (errEl) { errEl.style.display = 'none'; }

    wizardState.vendor = vendor;
    wizardState.displayName = nameInput ? nameInput.value.trim() : '';
    wizardState.commands = (VENDOR_COMMAND_META[vendor] || []).slice();
    wizardState.collectedOutputs = {};
    wizardState.commands.forEach(cmd => { wizardState.collectedOutputs[cmd.key] = null; });
    wizardState.step = 1;

    renderWizardStep();
}

/**
 * Render a single command-collection step (index = 0-based into wizardState.commands).
 */
function renderWizardCommandStep(cmdIndex) {
    const cmd = wizardState.commands[cmdIndex];
    const stepNum = cmdIndex + 1;
    const totalSteps = wizardState.commands.length;
    const existingText = wizardState.collectedOutputs[cmd.key] || '';

    const body = document.getElementById('wizardBody');
    const footer = document.getElementById('wizardFooter');

    body.innerHTML = `
        <div class="wizard-step-label">Step ${stepNum + 1} of ${totalSteps + 2} &mdash; ${escapeHtml(cmd.label)}</div>
        <p style="font-size: 14px; color: #555; margin: 0 0 6px;">
            Run this command on the device and paste the output below:
        </p>
        <div>
            <span class="wizard-command-block" id="wizardCmdText">${escapeHtml(cmd.cmd)}</span>
            <button type="button" class="wizard-command-copy" onclick="wizardCopyCommand()">Copy</button>
        </div>
        <textarea class="wizard-textarea" id="wizardCmdTextarea"
            placeholder="Paste output of: ${escapeHtml(cmd.cmd)}"
            spellcheck="false"
            autocorrect="off"
            autocapitalize="off">${escapeHtml(existingText)}</textarea>
        <div class="wizard-inline-error" id="wizardEmptyError">
            Please paste the command output, or click Skip if you don't have it.
        </div>
        <div class="wizard-validation-warning" id="wizardValidationWarning">
            <strong>Output may not match expected format</strong>
            This output doesn't look like <em>${escapeHtml(cmd.label)}</em> for <em>${escapeHtml(vendorDisplayName(wizardState.vendor))}</em>.
            Please verify you pasted the correct output.
            <div class="wizard-validation-actions">
                <button type="button" class="btn-wizard-next" onclick="wizardAcceptAnyway()">Use Anyway</button>
                <button type="button" class="btn-wizard-skip" onclick="wizardDismissWarning()">Re-paste</button>
            </div>
        </div>
    `;

    footer.innerHTML = `
        <div>
            <button type="button" class="wizard-back-link" onclick="wizardGoBack()">&#8592; Back</button>
        </div>
        <div class="wizard-btn-row">
            <button type="button" class="btn-wizard-skip" onclick="wizardSkipStep()">Skip</button>
            <button type="button" class="btn-wizard-next" onclick="wizardNextStep()">Next &rarr;</button>
        </div>
    `;

    // Restore previously-typed content scroll position
    const ta = document.getElementById('wizardCmdTextarea');
    if (ta) { ta.focus(); }
}

/**
 * Copy the current command text to clipboard.
 */
function wizardCopyCommand() {
    const el = document.getElementById('wizardCmdText');
    if (!el) return;
    copyToClipboard(el.textContent).then(() => {
        showNotification('Command copied to clipboard', 'success');
    }).catch(() => {
        showNotification('Failed to copy — please select and copy manually', 'error');
    });
}

/**
 * Dismiss validation warning (re-paste path — just hide the warning and focus textarea).
 */
function wizardDismissWarning() {
    const w = document.getElementById('wizardValidationWarning');
    if (w) { w.style.display = 'none'; }
    const ta = document.getElementById('wizardCmdTextarea');
    if (ta) { ta.value = ''; ta.focus(); }
}

/**
 * User accepted validation warning — proceed to next step with current content.
 */
function wizardAcceptAnyway() {
    const ta = document.getElementById('wizardCmdTextarea');
    const text = ta ? ta.value.trim() : '';
    const cmdIndex = wizardState.step - 1;
    const cmd = wizardState.commands[cmdIndex];

    wizardState.collectedOutputs[cmd.key] = text || null;
    wizardState.step++;
    renderWizardStep();
}

/**
 * "Next" button: validate then advance.
 */
function wizardNextStep() {
    const ta = document.getElementById('wizardCmdTextarea');
    const text = ta ? ta.value.trim() : '';
    const cmdIndex = wizardState.step - 1;
    const cmd = wizardState.commands[cmdIndex];

    const emptyErr = document.getElementById('wizardEmptyError');
    const warningEl = document.getElementById('wizardValidationWarning');

    // 4.2 Empty input guard
    if (!text) {
        if (emptyErr) { emptyErr.style.display = 'block'; }
        if (ta) { ta.classList.add('invalid'); ta.focus(); }
        return;
    }
    if (emptyErr) { emptyErr.style.display = 'none'; }
    if (ta) { ta.classList.remove('invalid'); }

    // 4.1 Per-parseType header validation
    const validator = PARSE_TYPE_VALIDATORS[cmd.parseType];
    if (validator && !validator(text)) {
        if (warningEl) { warningEl.style.display = 'block'; }
        return;
    }

    // Passed — store and advance
    wizardState.collectedOutputs[cmd.key] = text;
    wizardState.step++;
    renderWizardStep();
}

/**
 * "Skip" button: store null and advance.
 */
function wizardSkipStep() {
    const cmdIndex = wizardState.step - 1;
    const cmd = wizardState.commands[cmdIndex];
    wizardState.collectedOutputs[cmd.key] = null;
    wizardState.step++;
    renderWizardStep();
}

/**
 * "Back" button: go to previous step.
 */
function wizardGoBack() {
    if (wizardState.step >= 1) {
        wizardState.step--;
        renderWizardStep();
    }
}

/**
 * Render the summary / finalize step.
 */
function renderWizardSummaryStep() {
    const body = document.getElementById('wizardBody');
    const footer = document.getElementById('wizardFooter');

    const vendorLabel = vendorDisplayName(wizardState.vendor);
    const deviceLabel = wizardState.displayName || '(auto-detect)';
    const totalSteps = wizardState.commands.length;

    const summaryItems = wizardState.commands.map(cmd => {
        const hasOutput = wizardState.collectedOutputs[cmd.key] !== null &&
                          wizardState.collectedOutputs[cmd.key] !== '';
        const iconClass = hasOutput ? 'submitted' : 'skipped';
        const statusText = hasOutput ? 'submitted' : 'skipped';
        const iconChar = hasOutput ? '&#10003;' : '&#8854;';

        return `
            <li>
                <span class="wizard-summary-icon ${iconClass}">${iconChar}</span>
                <span class="wizard-summary-cmd">${escapeHtml(cmd.label)}</span>
                <span class="wizard-summary-status ${iconClass}">${statusText}</span>
            </li>
        `;
    }).join('');

    const submittedCount = wizardState.commands.filter(c =>
        wizardState.collectedOutputs[c.key] !== null && wizardState.collectedOutputs[c.key] !== ''
    ).length;

    body.innerHTML = `
        <div class="wizard-step-label">Final Step &mdash; Review &amp; Add</div>
        <div class="wizard-summary-identity">
            <strong>${escapeHtml(deviceLabel)}</strong>
            <span class="wizard-summary-vendor-badge">${escapeHtml(vendorLabel)}</span>
        </div>
        <ul class="wizard-summary-list">${summaryItems}</ul>
        <p style="color: #666; font-size: 13px; margin: 0;">
            ${submittedCount} of ${totalSteps} command output${totalSteps !== 1 ? 's' : ''} provided.
            Click <strong>Add to Topology</strong> to parse and add this device.
        </p>
        <div id="wizardFinalizeError" style="color:#f44336; font-size:13px; margin-top:8px; display:none;"></div>
    `;

    footer.innerHTML = `
        <button type="button" class="wizard-back-link" onclick="wizardGoBackToLastCmd()">&#8592; Back</button>
        <div class="wizard-btn-row">
            <button type="button" class="btn-wizard-finalize" onclick="wizardFinalize()">
                Add to Topology
            </button>
        </div>
    `;
}

/**
 * Back from summary to the last command step.
 */
function wizardGoBackToLastCmd() {
    wizardState.step = wizardState.commands.length;
    renderWizardStep();
}

/**
 * Finalize the wizard — parse all collected outputs and add device to devicesData.
 */
function wizardFinalize() {
    const result = parseDeviceWizard({
        displayName: wizardState.displayName,
        vendor: wizardState.vendor,
        collectedOutputs: wizardState.collectedOutputs
    });

    const errEl = document.getElementById('wizardFinalizeError');

    if (!result.success) {
        if (errEl) {
            errEl.textContent = 'Error: ' + result.error + (result.suggestion ? ' ' + result.suggestion : '');
            errEl.style.display = 'block';
        }
        return;
    }

    if (devicesData.some(d => d.hostname === result.hostname)) {
        if (errEl) {
            errEl.textContent = 'Device "' + result.hostname + '" already exists. Remove it first or use a different name.';
            errEl.style.display = 'block';
        }
        return;
    }

    devicesData.push(result);

    const neighborCount = result.lldpNeighbors.length + result.ospfNeighbors.length + result.bgpPeers.length;
    showNotification(
        'Device "' + result.hostname + '" added (' + neighborCount + ' neighbors discovered)',
        result.warning ? 'warning' : 'success'
    );

    renderDeviceChips();
    renderWizardCollectedList();
    closeWizard();
}

/**
 * Parse collected wizard outputs into a single device object.
 *
 * @param {object} deviceState  { displayName, vendor, collectedOutputs }
 * @returns {object}  Same shape as parseDevice() return value
 */
function parseDeviceWizard(deviceState) {
    const { displayName, vendor, collectedOutputs } = deviceState;

    try {
        // ---- Hostname detection ----
        // Try displayName first, then scan every non-null output for a CLI prompt
        let hostname = displayName || '';
        if (!hostname) {
            for (const text of Object.values(collectedOutputs)) {
                if (!text) continue;
                const detected = extractHostname(text);
                if (detected) { hostname = detected; break; }
            }
        }
        if (!hostname) {
            return {
                success: false,
                error: 'Could not detect hostname',
                suggestion: 'Enter a device name in the wizard or ensure CLI output includes a device prompt (e.g., Switch01#).'
            };
        }

        // ---- Gather all raw text strings ----
        // Build a map of parseType -> text for dispatching to specific parsers.
        // Use VENDOR_COMMAND_META[vendor] directly so this function is self-contained.
        const vendorCmds = VENDOR_COMMAND_META[vendor] || [];
        const typeToText = {};
        vendorCmds.forEach(cmd => {
            const text = collectedOutputs[cmd.key];
            if (text && text.trim()) {
                // Multiple commands may share a parseType (e.g., bgp + bgp_nxos).
                // Concatenate so each parser sees all available data.
                if (typeToText[cmd.parseType]) {
                    typeToText[cmd.parseType] += '\n' + text;
                } else {
                    typeToText[cmd.parseType] = text;
                }
            }
        });

        // ---- LLDP parsing — route to the right parser by parseType ----
        let lldpNeighbors = [];

        const lldpTypeOrder = [
            'lldp_arista_detail', 'lldp_arista',
            'lldp_block', 'lldp_tabular',
            'lldp_sonic_detail', 'lldp_sonic',
            'lldp_forti_detail', 'lldp_forti_summary',
            'lldp_paloalto', 'lldp_vyos',
            'lldp_junos', 'lldp_aruba'
        ];

        for (const pt of lldpTypeOrder) {
            if (typeToText[pt] && lldpNeighbors.length === 0) {
                const parsed = parseLLDP(typeToText[pt], hostname);
                if (parsed.length > 0) {
                    lldpNeighbors = parsed;
                }
            }
        }

        // ---- OSPF parsing ----
        let ospfNeighbors = [];
        const ospfTypes = ['ospf', 'ospf_junos', 'ospf_arista', 'ospf_paloalto'];
        for (const pt of ospfTypes) {
            if (typeToText[pt] && ospfNeighbors.length === 0) {
                const parsed = parseOSPF(typeToText[pt], hostname);
                if (parsed.length > 0) { ospfNeighbors = parsed; }
            }
        }

        // ---- BGP parsing ----
        let bgpPeers = [];
        const bgpTypes = ['bgp', 'bgp_nxos', 'bgp_junos', 'bgp_paloalto', 'bgp_arista'];
        for (const pt of bgpTypes) {
            if (typeToText[pt] && bgpPeers.length === 0) {
                const parsed = parseBGP(typeToText[pt], hostname);
                if (parsed.length > 0) { bgpPeers = parsed; }
            }
        }

        // ---- VRF parsing ----
        let vrfs = [];
        const vrfTypes = [
            'vrf', 'vrf_nxos', 'vrf_aruba', 'vrf_junos',
            'vrf_paloalto', 'vrf_fortios', 'vrf_sonic', 'vrf_arista', 'vrf_vyos'
        ];
        for (const pt of vrfTypes) {
            if (typeToText[pt] && vrfs.length === 0) {
                const parsed = parseVRFs(typeToText[pt]);
                if (parsed.length > 0) { vrfs = parsed; }
            }
        }

        // VRF detail (Route Targets) — separate command type
        if (typeToText['vrf_detail'] && vrfs.length > 0) {
            parseVRFDetail(typeToText['vrf_detail'], vrfs);
        }

        // Correlate OSPF/BGP neighbors to VRFs
        vrfs.forEach(vrf => {
            vrf.ospfNeighbors = ospfNeighbors.filter(n => n.vrfName === vrf.name);
            vrf.bgpPeers      = bgpPeers.filter(p => p.vrfName === vrf.name);
        });

        // Detect route leaking
        detectRouteLeaks(vrfs);

        // ---- VLAN parsing ----
        let vlans = [];
        if (typeToText['vlan']) {
            vlans = parseVLANs(typeToText['vlan']);
        }

        // ---- MAC count ----
        let macCount = 0;
        for (const text of Object.values(typeToText)) {
            macCount += countMACAddresses(text);
        }

        // ---- ARP parsing ----
        let arpEntries = [];
        const arpTypes = ['arp_cisco', 'arp_aruba', 'arp_junos', 'arp_generic', 'arp_paloalto', 'arp_fortios', 'arp_sonic', 'arp_arista'];
        for (const pt of arpTypes) {
            if (typeToText[pt]) {
                arpEntries = arpEntries.concat(parseARP(typeToText[pt]));
            }
        }

        // ---- MAC table parsing ----
        let macEntries = [];
        const macTypes = ['mac_cisco', 'mac_aruba', 'mac_junos', 'mac_sonic', 'mac_arista'];
        for (const pt of macTypes) {
            if (typeToText[pt]) {
                macEntries = macEntries.concat(parseMACTable(typeToText[pt]));
            }
        }

        // ---- VXLAN parsing ----
        let vxlanMappings = [];
        let nvePeers = [];
        const vxlanTypes = ['vxlan_nxos', 'vxlan_sonic', 'vxlan_sonic_tunnel', 'vxlan_arista', 'nve_peers', 'vtep_arista'];
        for (const pt of vxlanTypes) {
            if (typeToText[pt]) {
                const parsed = parseVXLAN(typeToText[pt]);
                if (parsed.vniMappings.length > 0) { vxlanMappings = vxlanMappings.concat(parsed.vniMappings); }
                if (parsed.nvePeers.length > 0)    { nvePeers = nvePeers.concat(parsed.nvePeers); }
            }
        }

        // Correlate L3VNI → VRF
        vxlanMappings.forEach(mapping => {
            const matchingVRF = vrfs.find(v => v.vnis.includes(mapping.vni));
            if (matchingVRF) { mapping.type = 'L3'; mapping.vrfName = matchingVRF.name; }
        });

        // ---- MCLAG parsing ----
        let mclagData = null;
        const mclagTypes = ['mclag_sonic'];
        for (const pt of mclagTypes) {
            if (typeToText[pt] && !mclagData) {
                mclagData = parseMCLAG(typeToText[pt]);
            }
        }
        // Also try the full combined CLI output if not found via typed input
        if (!mclagData) {
            const allText = Object.values(typeToText).join('\n');
            mclagData = parseMCLAG(allText);
        }

        // ---- Build cliOutput string (concatenation for compatibility) ----
        const combinedCli = Object.values(collectedOutputs)
            .filter(Boolean).join('\n\n');

        const warning = (lldpNeighbors.length === 0 && ospfNeighbors.length === 0 && bgpPeers.length === 0)
            ? 'No neighbors discovered. Verify CLI output includes neighbor commands.'
            : undefined;

        return {
            success: true,
            warning: warning || null,
            hostname,
            vendor,
            lldpNeighbors,
            ospfNeighbors,
            bgpPeers,
            vlans,
            macCount,
            arpEntries,
            macEntries,
            vrfs,
            vxlanMappings,
            nvePeers,
            mclagData,
            cliOutput: combinedCli
        };

    } catch (error) {
        return {
            success: false,
            error: 'Parsing failed: ' + error.message,
            suggestion: 'Verify that CLI outputs are from the selected vendor.'
        };
    }
}

/**
 * Render (or update) the "Devices collected" list above the wizard button.
 * Mirrors renderDeviceChips() logic but uses a different container.
 */
function renderWizardCollectedList() {
    const container = document.getElementById('wizardCollectedList');
    if (!container) return;

    if (devicesData.length === 0) {
        container.innerHTML = '<div class="wizard-collected-empty">No devices added yet — use the wizard or Quick Add below.</div>';
        return;
    }

    container.innerHTML = `
        <h4>${devicesData.length} device${devicesData.length !== 1 ? 's' : ''} collected:</h4>
        ${devicesData.map((device, index) => {
            const neighborCount = device.lldpNeighbors.length + device.ospfNeighbors.length + device.bgpPeers.length;
            const vendorLabel = device.vendor ? device.vendor : 'unknown';
            return `
                <div class="device-chip" style="margin-bottom: 6px;">
                    <div class="device-chip-label">
                        <div class="device-chip-hostname">${escapeHtml(device.hostname)}</div>
                        <div class="device-chip-info">${neighborCount} neighbors &middot; ${escapeHtml(vendorLabel)}</div>
                    </div>
                    <button type="button" class="device-chip-remove"
                        onclick="removeDevice(${index}); renderWizardCollectedList();"
                        title="Remove device">&#215;</button>
                </div>
            `;
        }).join('')}
    `;
}

/**
 * Return a human-readable vendor label for a given VENDOR_COMMAND_META key.
 */
function vendorDisplayName(key) {
    const labels = {
        'cisco-ios':    'Cisco IOS / IOS-XE',
        'cisco-nxos':   'Cisco NX-OS',
        'aruba-aoscx':  'Aruba AOS-CX',
        'juniper-junos':'Juniper JunOS',
        'vyos':         'VyOS',
        'paloalto':     'Palo Alto PAN-OS',
        'fortios':      'Fortinet FortiOS',
        'sonic':        'Broadcom SONiC',
        'arista-eos':   'Arista EOS'
    };
    return labels[key] || key;
}

/**
 * Escape HTML special characters to prevent XSS in innerHTML assignments.
 */
function escapeHtml(str) {
    if (!str) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Add path selection button to search filter bar
    const searchBar = document.querySelector('.search-filter-bar');
    if (searchBar) {
        const pathBtn = document.createElement('button');
        pathBtn.type = 'button';
        pathBtn.className = 'btn-secondary';
        pathBtn.textContent = 'Find Path';
        pathBtn.onclick = startPathSelection;
        searchBar.appendChild(pathBtn);
    }

    // Populate sample topology dropdown
    const select = document.getElementById('sampleTopologySelect');
    if (select) {
        SAMPLE_TOPOLOGIES.forEach(function(topo) {
            const option = document.createElement('option');
            option.value = topo.id;
            option.textContent = topo.name + ' (' + topo.deviceCount + ' devices) [' + topo.difficulty.charAt(0).toUpperCase() + topo.difficulty.slice(1) + ']';
            select.appendChild(option);
        });
    }

    // Initial render of the wizard collected list (empty state on load)
    renderWizardCollectedList();

    // Close wizard on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const overlay = document.getElementById('wizardOverlay');
            if (overlay && overlay.style.display !== 'none') {
                closeWizard();
            }
        }
    });

    // Close wizard when clicking the overlay backdrop (outside the modal)
    const wizardOverlayEl = document.getElementById('wizardOverlay');
    if (wizardOverlayEl) {
        wizardOverlayEl.addEventListener('click', function(e) {
            if (e.target === wizardOverlayEl) {
                closeWizard();
            }
        });
    }
});

console.log('Dynamic Network Topology Mapper v3.1.0 initialized');
</script>