.. tiêu đề: Công cụ mô phỏng & thiết kế mạng BGP
.. sên: lập kế hoạch bgp
.. ngày: 2025-02-03 16:00:00 UTC
.. tags: mạng, bgp, định tuyến, mô phỏng, thiết kế, công cụ
.. thể loại: Công cụ
.. liên kết:
.. mô tả: Công cụ mô phỏng và thiết kế mạng BGP trực quan với thông tin sóng mang và thuật toán đường dẫn tốt nhất
.. loại: văn bản
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<style>
    * {
        box-sizing: border-box;
    }

    #bgp-app {
        display: grid;
        grid-template-columns: 280px 1fr;
        grid-template-rows: 1fr 300px;
        height: 85vh;
        gap: 2px;
        background: #2d2d2d;
        margin: 0;
    }

    /* Sidebar */
    #bgp-sidebar {
        grid-row: 1 / 3;
        background: #252526;
        padding: 15px;
        overflow-y: auto;
        border-right: 2px solid #3e3e42;
    }

    #bgp-sidebar h2 {
        color: #4fc3f7;
        margin-bottom: 15px;
        font-size: 18px;
        border-bottom: 2px solid #4fc3f7;
        padding-bottom: 5px;
    }

    .palette-section {
        margin-bottom: 20px;
    }

    .palette-section h3 {
        color: #81c784;
        font-size: 14px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .palette-section h3 .add-btn {
        background: #4fc3f7;
        color: #000;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
    }

    .palette-section h3 .add-btn:hover {
        background: #29b6f6;
    }

    .palette-item {
        background: #3c3c3c;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 6px;
        cursor: grab;
        border: 2px solid #555;
        transition: all 0.2s;
        text-align: center;
        user-select: none;
    }

    .palette-item:active {
        cursor: grabbing;
    }

    .palette-item:hover {
        background: #4a4a4a;
        border-color: #4fc3f7;
        transform: translateX(5px);
        box-shadow: 0 4px 8px rgba(79, 195, 247, 0.3);
    }

    .palette-item.router {
        border-left: 4px solid #ff9800;
    }

    .palette-item.carrier {
        border-left: 4px solid #9c27b0;
    }

    .policy-item {
        background: #3c3c3c;
        padding: 8px 10px;
        margin-bottom: 6px;
        border-radius: 4px;
        border-left: 3px solid #4fc3f7;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .policy-item:hover {
        background: #4a4a4a;
        transform: translateX(3px);
    }

    .policy-item-name {
        font-size: 12px;
        font-weight: bold;
        color: #e0e0e0;
    }

    .policy-item-type {
        font-size: 10px;
        color: #9e9e9e;
    }

    .policy-item-actions {
        display: flex;
        gap: 5px;
    }

    .policy-item-actions button {
        background: none;
        border: none;
        color: #9e9e9e;
        cursor: pointer;
        padding: 2px 5px;
        font-size: 14px;
    }

    .policy-item-actions button:hover {
        color: #4fc3f7;
    }

    .policy-item-actions .delete-btn:hover {
        color: #e57373;
    }

    .controls {
        margin-top: 20px;
    }

    .btn {
        width: 100%;
        padding: 12px;
        margin-bottom: 10px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s;
        font-size: 13px;
    }

    .btn-primary {
        background: #4fc3f7;
        color: #000;
    }

    .btn-primary:hover {
        background: #29b6f6;
    }

    .btn-success {
        background: #81c784;
        color: #000;
    }

    .btn-success:hover {
        background: #66bb6a;
    }

    .btn-success.active {
        background: #66bb6a;
        box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.3);
    }

    .btn-danger {
        background: #e57373;
        color: #000;
    }

    .btn-danger:hover {
        background: #ef5350;
    }

    .btn-secondary {
        background: #81c784;
        color: #000;
    }

    .btn-secondary:hover {
        background: #66bb6a;
    }

    .btn-small {
        padding: 6px 12px;
        font-size: 11px;
        width: auto;
    }

    /* Canvas */
    #canvas-container {
        background: #1e1e1e;
        position: relative;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 50px 50px;
        border: 3px dashed rgba(79, 195, 247, 0.3);
        transition: border-color 0.3s;
    }

    #canvas-container::before {
        content: 'Drag routers and carriers here';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, 0.2);
        font-size: 24px;
        font-weight: bold;
        pointer-events: none;
        z-index: 0;
    }

    #canvas-container.has-nodes::before {
        display: none;
    }

    #canvas-container.peering-mode {
        border-color: #81c784;
        border-width: 4px;
    }

    #cy {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
    }

    /* Looking Glass Panel */
    #looking-glass {
        background: #252526;
        border-top: 2px solid #3e3e42;
        display: flex;
        flex-direction: column;
    }

    .tabs {
        display: flex;
        background: #2d2d2d;
        border-bottom: 2px solid #3e3e42;
    }

    .tab {
        padding: 12px 24px;
        cursor: pointer;
        border: none;
        background: transparent;
        color: #9e9e9e;
        font-weight: bold;
        transition: all 0.2s;
        border-bottom: 3px solid transparent;
    }

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

    .tab:hover {
        background: #3e3e42;
    }

    .tab-content {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        display: none;
        color: #e0e0e0;
    }

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

    .rib-entry {
        background: #2d2d2d;
        padding: 10px;
        margin-bottom: 8px;
        border-radius: 4px;
        border-left: 4px solid #4fc3f7;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        transition: all 0.2s;
    }

    .rib-entry:hover {
        background: #3a3a3a;
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3);
    }

    .rib-entry.best {
        border-left-color: #81c784;
        background: #1b5e20;
    }

    .rib-entry.best:hover {
        background: #2e7d32;
    }

    .rib-entry.modified {
        border-left-color: #ff9800;
        background: #4a2c00;
    }

    .rib-entry.modified:hover {
        background: #663d00;
    }

    .rib-entry.originated {
        border-left-color: #42a5f5;
        background: #1a237e;
    }

    .rib-entry.originated:hover {
        background: #283593;
    }

    .route-map-impact {
        margin-top: 8px;
        padding: 8px;
        background: rgba(255, 152, 0, 0.1);
        border-left: 2px solid #ff9800;
        font-size: 11px;
        font-style: italic;
    }

    .config-preview {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        line-height: 1.6;
        white-space: pre-wrap;
        background: #1e1e1e;
        padding: 15px;
        border-radius: 4px;
    }

    /* Modal Styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        overflow-y: auto;
    }

    .modal.active {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 20px;
    }

    .modal-content {
        background: #2d2d2d;
        padding: 30px;
        border-radius: 8px;
        max-width: 800px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        border: 2px solid #4fc3f7;
        color: #e0e0e0;
        margin: 20px auto;
    }

    .modal-content h3 {
        color: #4fc3f7;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .modal-section {
        margin-bottom: 25px;
        padding: 15px;
        background: #1e1e1e;
        border-radius: 6px;
        border-left: 4px solid #4fc3f7;
    }

    .modal-section h4 {
        color: #81c784;
        margin-bottom: 15px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #81c784;
        font-weight: bold;
        font-size: 13px;
    }

    .form-group label .required {
        color: #e57373;
    }

    .form-group label .optional {
        color: #9e9e9e;
        font-weight: normal;
        font-size: 11px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 10px;
        background: #2d2d2d;
        border: 1px solid #555;
        border-radius: 4px;
        color: #e0e0e0;
        font-family: inherit;
        font-size: 13px;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #4fc3f7;
        box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
    }

    .form-group input:disabled,
    .form-group select:disabled {
        background: #1a1a1a;
        color: #666;
        cursor: not-allowed;
    }

    .form-group .help-text {
        font-size: 11px;
        color: #9e9e9e;
        margin-top: 4px;
        font-style: italic;
    }

    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px;
        background: #2d2d2d;
        border-radius: 4px;
    }

    .checkbox-group input[type="checkbox"] {
        width: auto;
        cursor: pointer;
    }

    .checkbox-group label {
        margin: 0;
        cursor: pointer;
        font-weight: normal;
    }

    /* Phase 3.1: Networks list styling */
    .networks-list {
        margin-bottom: 15px;
        max-height: 200px;
        overflow-y: auto;
        background: #2d2d2d;
        border-radius: 4px;
        padding: 10px;
    }

    .network-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        background: #3e3e42;
        border-radius: 4px;
        margin-bottom: 6px;
        border-left: 3px solid #81c784;
    }

    .network-item .network-prefix {
        color: #81c784;
        font-family: 'Courier New', monospace;
        font-weight: bold;
    }

    .network-item .network-delete {
        background: #e57373;
        color: #000;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
    }

    .network-item .network-delete:hover {
        background: #ef5350;
    }

    .modal-actions {
        display: flex;
        gap: 10px;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 2px solid #3e3e42;
    }

    .collapsible-section {
        margin-top: 15px;
    }

    .collapsible-header {
        background: #3e3e42;
        padding: 12px 15px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.2s;
    }

    .collapsible-header:hover {
        background: #4a4a4a;
    }

    .collapsible-header .arrow {
        transition: transform 0.2s;
    }

    .collapsible-header.active .arrow {
        transform: rotate(90deg);
    }

    .collapsible-content {
        display: none;
        padding: 15px;
        background: #2d2d2d;
        border-radius: 0 0 4px 4px;
    }

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

    /* Route-Map Builder Styles */
    .route-map-statement {
        background: #1e1e1e;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 6px;
        border-left: 4px solid #4fc3f7;
    }

    .route-map-statement-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #3e3e42;
    }

    .route-map-statement-header h5 {
        color: #4fc3f7;
        margin: 0;
    }

    .match-set-section {
        margin-bottom: 15px;
    }

    .match-set-section h6 {
        color: #81c784;
        font-size: 12px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .prefix-list-entry,
    .as-path-entry {
        background: #2d2d2d;
        padding: 10px;
        margin-bottom: 8px;
        border-radius: 4px;
        display: grid;
        grid-template-columns: 80px 100px 1fr 80px 80px 40px;
        gap: 10px;
        align-items: center;
    }

    .prefix-list-entry input,
    .prefix-list-entry select,
    .as-path-entry input,
    .as-path-entry select {
        padding: 6px;
        font-size: 12px;
    }

    .entry-actions {
        display: flex;
        gap: 5px;
        justify-content: center;
    }

    .entry-actions button {
        background: #e57373;
        border: none;
        padding: 4px 8px;
        border-radius: 3px;
        cursor: pointer;
        color: #000;
        font-size: 11px;
        font-weight: bold;
    }

    .info-box, .peer-info-box {
        background: #1e3a5f;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 15px;
        border-left: 4px solid #4fc3f7;
    }

    .peer-info-box h4 {
        color: #4fc3f7;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .peer-info-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .peer-info-row:last-child {
        border-bottom: none;
    }

    .peer-info-label {
        color: #81c784;
        font-weight: bold;
        font-size: 12px;
    }

    .peer-info-value {
        color: #e0e0e0;
        font-size: 12px;
        font-family: 'Courier New', monospace;
    }

    .community-badge {
        display: inline-block;
        background: #9c27b0;
        color: #fff;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 10px;
        margin-right: 4px;
    }

    .attribute-tag {
        display: inline-block;
        background: #555;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 10px;
        margin-right: 4px;
    }

    .attribute-tag.changed {
        background: #ff9800;
        color: #000;
    }

    .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .status-badge.established {
        background: #81c784;
        color: #000;
    }

    .status-badge.configured {
        background: #ff9800;
        color: #000;
    }

    .status-badge.filtered {
        background: #e57373;
        color: #fff;
    }

    #notification {
        position: fixed;
        top: 80px;
        right: 20px;
        background: #4fc3f7;
        color: #000;
        padding: 15px 20px;
        border-radius: 6px;
        font-weight: bold;
        z-index: 2000;
        display: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        max-width: 400px;
    }

    #notification.show {
        display: block;
        animation: slideIn 0.3s ease-out;
    }

    #notification.error {
        background: #e57373;
        color: #fff;
    }

    #notification.success {
        background: #81c784;
        color: #000;
    }

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

    .summary-section {
        margin-bottom: 20px;
    }

    .summary-section h4 {
        color: #81c784;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .summary-item {
        background: #2d2d2d;
        padding: 8px;
        margin-bottom: 5px;
        border-radius: 4px;
        font-size: 13px;
    }

    .edge-legend {
        background: #2d2d2d;
        padding: 15px;
        border-radius: 4px;
        margin-top: 15px;
    }

    .edge-legend h5 {
        color: #81c784;
        margin-bottom: 10px;
        font-size: 12px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        font-size: 11px;
    }

    .legend-line {
        width: 40px;
        height: 3px;
        border-radius: 2px;
    }

    .legend-line.established {
        background: #81c784;
    }

    .legend-line.configured {
        background: #ff9800;
    }

    .legend-line.ibgp {
        background: #4fc3f7;
        border: 2px dashed #4fc3f7;
        height: 1px;
    }

    .legend-line.ebgp {
        background: #81c784;
    }

    .legend-line.best-path {
        background: #66bb6a;
        height: 5px;
    }

    .legend-line.backup-path {
        background: #ffca28;
        height: 3px;
    }

    .legend-line.filtered-path {
        background: #ef5350;
        height: 2px;
        border: 1px dotted #ef5350;
    }

    .legend-line.has-localas {
        background: #ba68c8;
        border: 2px dotted #ba68c8;
        height: 2px;
    }

    .empty-state {
        text-align: center;
        padding: 30px;
        color: #9e9e9e;
        font-style: italic;
    }

    /* Phase 3.5: Validation Panel */
    .validation-panel {
        margin-top: 15px;
        background: #2d2d2d;
        border-radius: 4px;
        padding: 10px;
        max-height: 200px;
        overflow-y: auto;
    }

    .validation-panel h4 {
        color: #ffca28;
        font-size: 12px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .warning-item {
        background: #3e2723;
        border-left: 3px solid #ff9800;
        padding: 8px;
        margin-bottom: 6px;
        border-radius: 3px;
        font-size: 11px;
    }

    .warning-item.error {
        background: #4a1a1a;
        border-left-color: #ef5350;
    }

    .warning-item.success {
        background: #1b3a1b;
        border-left-color: #66bb6a;
    }

    .warning-item .warning-title {
        font-weight: bold;
        color: #ff9800;
        margin-bottom: 3px;
    }

    .warning-item.error .warning-title {
        color: #ef5350;
    }

    .warning-item.success .warning-title {
        color: #66bb6a;
    }

    .warning-item .warning-fix {
        color: #81c784;
        cursor: pointer;
        text-decoration: underline;
        margin-top: 3px;
        display: inline-block;
    }

    .warning-item .warning-fix:hover {
        color: #a5d6a7;
    }

    .validate-btn {
        margin-top: 10px;
    }

    .template-card:hover {
        border-color: #4fc3f7;
        background: #3a3a3a;
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(79, 195, 247, 0.3);
    }

    /* Beginner/Advanced Mode */
    .advanced-only {
        display: block;
    }

    body.beginner-mode .advanced-only {
        display: none !important;
    }

    /* Decision Process Viewer */
    .decision-step {
        background: #2d2d2d;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 4px;
        border-left: 4px solid #555;
    }

    .decision-step.passed {
        border-left-color: #81c784;
    }

    .decision-step.failed {
        border-left-color: #9e9e9e;
    }

    .decision-step.winner {
        border-left-color: #4fc3f7;
        background: #1a3a4a;
    }

    .decision-step-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .decision-step-title {
        font-weight: bold;
        font-size: 12px;
    }

    .decision-step.passed .decision-step-title {
        color: #81c784;
    }

    .decision-step.failed .decision-step-title {
        color: #9e9e9e;
    }

    .decision-step.winner .decision-step-title {
        color: #4fc3f7;
    }

    .decision-step-result {
        font-size: 11px;
        color: #e0e0e0;
    }

    .decision-comparison {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
        align-items: center;
        margin-top: 8px;
        font-size: 11px;
    }

    .decision-route {
        padding: 6px 10px;
        background: #1a1a1a;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
    }

    .decision-operator {
        color: #ffca28;
        font-weight: bold;
    }

    /* Bulk Selection Highlight */
    .cy-edge.bulk-selected {
        line-color: #ffca28 !important;
        target-arrow-color: #ffca28 !important;
        width: 5 !important;
    }

    /* Help Tooltips */
    .help-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: #4fc3f7;
        color: #000;
        border-radius: 50%;
        text-align: center;
        line-height: 16px;
        font-size: 12px;
        font-weight: bold;
        cursor: help;
        margin-left: 5px;
        position: relative;
    }

    .help-icon:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 25px;
        top: -5px;
        background: #1a1a1a;
        color: #e0e0e0;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #4fc3f7;
        width: 300px;
        font-size: 11px;
        font-weight: normal;
        line-height: 1.4;
        z-index: 1000;
        white-space: normal;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .help-icon:hover::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 3px;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 5px solid #4fc3f7;
        z-index: 1001;
    }
</style>
<div id="bgp-app">
<div id="bgp-sidebar">
<h2>🛠️ Công cụ thiết kế BGP</h2>
Chuyển đổi chế độ
<div class="mode-toggle-container" style="margin-bottom: 15px; padding: 10px; background: #2d2d2d; border-radius: 6px;">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="color: #9e9e9e; font-size: 12px; flex: 1;">Giao diện:</span>
<button class="btn btn-primary" id="mode-toggle-btn" onclick="BGPApp.toggleUserMode()" style="padding: 6px 12px; font-size: 11px; margin: 0;">
<span id="mode-toggle-text">🎓 Chế độ dành cho người mới bắt đầu</span>
</button>
</div>
<div id="mode-description" style="font-size: 10px; color: #81c784; margin-top: 5px;">Giao diện đơn giản hóa chỉ với các tùy chọn thiết yếu</div>
</div>
<div class="palette-section">
<h3>Bộ định tuyến</h3>
<div class="palette-item router" data-type="router" data-vendor="Cisco" draggable="true">🔷 Bộ định tuyến chung</div>
</div>
<div class="palette-section">
<h3>Hãng vận chuyển</h3>
<div class="palette-item carrier" data-asn="3356" data-carrier="Lumen" data-type="carrier" draggable="true">☁️ Lumen (AS3356)</div>
<div class="palette-item carrier" data-asn="6461" data-carrier="Zayo" data-type="carrier" draggable="true">☁️ Zayo (AS6461)</div>
<div class="palette-item carrier" data-asn="3257" data-carrier="GTT" data-type="carrier" draggable="true">☁️ GTT (AS3257)</div>
<div class="palette-item carrier" data-asn="6939" data-carrier="HE" data-type="carrier" draggable="true">☁️ NGÀI (AS6939)</div>
<div class="palette-item carrier" data-asn="2914" data-carrier="NTT" data-type="carrier" draggable="true">☁️ NTT (AS2914)</div>
</div>
MỚI: Phần Đối tượng Chính sách
<div class="palette-section">
<h3>📋 Đối tượng chính sách<button class="add-btn" onclick="BGPApp.showPolicyMenu()">➕</button>
</h3>
<div id="policy-objects-list"></div>
</div>
Giai đoạn 3.5: Bảng xác thực
<div class="palette-section">
<h3>⚠️ Xác thực</h3>
<button class="btn btn-primary btn-small validate-btn" onclick="BGPApp.runValidation()">🔍 Chạy kiểm tra</button>
<div class="validation-panel" id="validation-panel" style="display: none;">
<div id="validation-results"></div>
</div>
</div>
Bảng điều khiển hoạt động hàng loạt
<div class="palette-section advanced-only">
<h3>⚡ Hoạt động hàng loạt</h3>
<div style="font-size: 11px; color: #9e9e9e; margin-bottom: 10px;">Ctrl+Click các cạnh để chọn nhiều</div>
<div id="bulk-selection-count" style="font-size: 12px; color: #4fc3f7; margin-bottom: 10px; display: none;">
<strong id="selected-count">0</strong>đồng nghiệp đã chọn</div>
<button class="btn btn-primary btn-small" onclick="BGPApp.selectAlleBGP()" style="margin-bottom: 5px;">Chọn tất cả eBGP</button>
<button class="btn btn-primary btn-small" onclick="BGPApp.selectAlliBGP()" style="margin-bottom: 5px;">Chọn tất cả iBGP</button>
<button class="btn btn-secondary btn-small" onclick="BGPApp.clearBulkSelection()" style="margin-bottom: 10px;">Xóa lựa chọn</button>
<div style="border-top: 1px solid #555; margin: 10px 0; padding-top: 10px;">
<button class="btn btn-success btn-small" disabled="" id="bulk-md5-btn" onclick="BGPApp.bulkApplyMD5()" style="margin-bottom: 5px;">🔒 Áp dụng MD5</button>
<button class="btn btn-success btn-small" disabled="" id="bulk-prefix-btn" onclick="BGPApp.bulkSetPrefixLimit()" style="margin-bottom: 5px;">📊 Đặt giới hạn tiền tố</button>
<button class="btn btn-danger btn-small" disabled="" id="bulk-delete-btn" onclick="BGPApp.bulkDelete()">🗑️ Xóa đã chọn</button>
</div>
</div>
<div class="controls">
<button class="btn btn-danger" id="delete-btn" onclick="BGPApp.deleteSelected()" style="display: none;">🗑️ Xóa đã chọn</button>
<button class="btn btn-success" id="peer-btn" onclick="BGPApp.togglePeeringMode()">🔗 Tạo ngang hàng</button>
<button class="btn btn-primary" onclick="BGPApp.runSimulation()">♥️ Chạy mô phỏng</button>
<button class="btn btn-secondary" onclick="BGPApp.exportConfig()">📥 Xuất cấu hình</button>
<button class="btn btn-secondary" onclick="BGPApp.saveTopology()">💾 Lưu JSON</button>
<button class="btn btn-secondary" onclick="BGPApp.loadTopology()">📂 Tải JSON</button>
<button class="btn btn-success" onclick="BGPApp.showTemplateLibrary()">📚 Tải ví dụ</button>
<button class="btn btn-secondary" onclick="BGPApp.exportTopologyImage()">🖼️ Xuất PNG</button>
<button class="btn btn-danger" onclick="BGPApp.clearMap()">🗑️ Xóa bản đồ</button>
</div>
<div class="edge-legend">
<h5>🔗 Các kiểu kết nối</h5>
<div class="legend-item">
<div class="legend-line configured"></div>
<span>Đã định cấu hình</span>
</div>
<div class="legend-item">
<div class="legend-line ibgp"></div>
<span>iBGP (Nét đứt)</span>
</div>
<div class="legend-item">
<div class="legend-line ebgp"></div>
<span>eBGP</span>
</div>
<h5 style="margin-top: 15px;">📊 Trạng thái mô phỏng</h5>
<div class="legend-item">
<div class="legend-line best-path"></div>
<span>Đường đi tốt nhất (Xanh)</span>
</div>
<div class="legend-item">
<div class="legend-line backup-path"></div>
<span>Đường dẫn dự phòng (Vàng)</span>
</div>
<div class="legend-item">
<div class="legend-line filtered-path"></div>
<span>Đã lọc (Đỏ)</span>
</div>
<div class="legend-item">
<div class="legend-line has-localas"></div>
<span>Local-AS (Tím)</span>
</div>
</div>
</div>
<div id="canvas-container">
<div id="cy"></div>
</div>
<div id="looking-glass">
<div class="tabs">
<button class="tab active" onclick="BGPApp.switchTab('summary')">Bản tóm tắt</button>
<button class="tab" onclick="BGPApp.switchTab('rib')">RIB (Bảng định tuyến)</button>
<button class="tab" onclick="BGPApp.switchTab('config')">Xem trước cấu hình</button>
</div>
<div class="tab-content active" id="summary-tab">
<div class="info-box">
<strong>💡 Bắt đầu nhanh:</strong><br/>• Kéo bộ định tuyến/nhà cung cấp dịch vụ vào canvas<br/>• Nhấp vào "🔗 Tạo ngang hàng" rồi nhấp vào hai nút<br/>• Nhấp vào "📋 Đối tượng chính sách ➕" để tạo danh sách tiền tố &amp; bản đồ lộ trình<br/>• Nhấp đúp vào ngang hàng để áp dụng bản đồ lộ trình<br/>• Bấm vào "XXX️ Chạy mô phỏng" để xem kết quả</div>
<div id="summary-content"></div>
</div>
<div class="tab-content" id="rib-tab">
<div id="rib-content"></div>
</div>
<div class="tab-content" id="config-tab">
<div class="config-preview" id="config-content">Không có bộ định tuyến nào được chọn</div>
</div>
</div>
</div>
Phương thức menu chính sách
<div class="modal" id="policy-menu-modal">
<div class="modal-content" style="max-width: 400px;">
<h3>📋 Tạo đối tượng chính sách</h3>
<div class="modal-section">
<button class="btn btn-primary" onclick="BGPApp.openPrefixListModal()">📝 Danh sách tiền tố</button>
<button class="btn btn-primary" onclick="BGPApp.openAsPathListModal()">🛣️ Danh sách đường dẫn AS</button>
<button class="btn btn-primary" onclick="BGPApp.openCommunityListModal()">🏷️ Danh sách cộng đồng</button>
<button class="btn btn-success" onclick="BGPApp.openRouteMapModal()">🗺️ Bản đồ lộ trình</button>
</div>
<div class="modal-actions">
<button class="btn btn-danger" onclick="BGPApp.closePolicyMenu()">Đóng</button>
</div>
</div>
</div>
Phương thức danh sách tiền tố
<div class="modal" id="prefix-list-modal">
<div class="modal-content">
<h3>📝 Cấu hình danh sách tiền tố</h3>
<form id="prefix-list-form">
<div class="modal-section">
<h4>Thông tin cơ bản</h4>
<div class="form-row">
<div class="form-group">
<label>Tên<span class="required">*</span></label>
<input id="pl-name" placeholder="CUSTOMER-PREFIXES" required="" type="text"/>
</div>
<div class="form-group">
<label>Kiểu</label>
<select id="pl-type">
<option value="ipv4">IPv4</option>
<option value="ipv6">IPv6</option>
</select>
</div>
</div>
</div>
<div class="modal-section">
<h4>Mục nhập tiền tố</h4>
<div id="pl-entries-container"></div>
<button class="btn btn-success btn-small" onclick="BGPApp.addPrefixListEntry()" type="button">+ Thêm mục</button>
</div>
<div class="modal-actions">
<button class="btn btn-primary" type="submit">💾 Lưu danh sách tiền tố</button>
<button class="btn btn-danger" onclick="BGPApp.closePrefixListModal()" type="button">Hủy bỏ</button>
</div>
</form>
</div>
</div>
Phương thức danh sách đường dẫn AS
<div class="modal" id="aspath-list-modal">
<div class="modal-content">
<h3>🛣️ Danh sách truy cập đường dẫn AS</h3>
<form id="aspath-list-form">
<div class="modal-section">
<h4>Thông tin cơ bản</h4>
<div class="form-group">
<label>Tên<span class="required">*</span></label>
<input id="aspath-name" placeholder="ALLOW-UPSTREAM" required="" type="text"/>
<div class="help-text">Được sử dụng để khớp các đường dẫn AS bằng cách sử dụng biểu thức chính quy</div>
</div>
</div>
<div class="modal-section">
<h4>Mục nhập đường dẫn AS</h4>
<div class="info-box">
<strong>Ví dụ:</strong><br/>
<code>^65001_</code>- Xuất xứ từ AS65001<br/>
<code>_65002$</code>- Đã nhận từ AS65002<br/>
<code>_65003_</code>- Chuyển qua AS65003</div>
<div id="aspath-entries-container"></div>
<button class="btn btn-success btn-small" onclick="BGPApp.addAsPathEntry()" type="button">+ Thêm mục</button>
</div>
<div class="modal-actions">
<button class="btn btn-primary" type="submit">💾 Lưu danh sách đường dẫn AS</button>
<button class="btn btn-danger" onclick="BGPApp.closeAsPathListModal()" type="button">Hủy bỏ</button>
</div>
</form>
</div>
</div>
Phương thức danh sách cộng đồng
<div class="modal" id="community-list-modal">
<div class="modal-content">
<h3>🏷️ Danh sách cộng đồng</h3>
<form id="community-list-form">
<div class="modal-section">
<h4>Thông tin cơ bản</h4>
<div class="form-row">
<div class="form-group">
<label>Tên<span class="required">*</span></label>
<input id="comm-name" placeholder="TRANSIT-COMMUNITIES" required="" type="text"/>
</div>
<div class="form-group">
<label>Kiểu</label>
<select id="comm-type">
<option value="standard">Tiêu chuẩn</option>
<option value="extended">Mở rộng</option>
</select>
</div>
</div>
<div class="form-group">
<label>Cộng đồng<span class="optional">(được phân tách bằng dấu phẩy)</span></label>
<input id="comm-values" placeholder="3356:70,6461:80,no-export" type="text"/>
<div class="help-text">Định dạng: AS:Giá trị hoặc nổi tiếng (không xuất khẩu, không quảng cáo, internet)</div>
</div>
</div>
<div class="modal-actions">
<button class="btn btn-primary" type="submit">💾 Lưu danh sách cộng đồng</button>
<button class="btn btn-danger" onclick="BGPApp.closeCommunityListModal()" type="button">Hủy bỏ</button>
</div>
</form>
</div>
</div>
Phương thức bản đồ lộ trình
<div class="modal" id="routemap-modal">
<div class="modal-content">
<h3>🗺️ Trình tạo bản đồ tuyến đường</h3>
<form id="routemap-form">
<div class="modal-section">
<h4>Thông tin cơ bản</h4>
<div class="form-group">
<label>Tên bản đồ lộ trình<span class="required">*</span></label>
<input id="rm-name" placeholder="RM-CUSTOMER-IN" required="" type="text"/>
<div class="help-text">Được sử dụng để áp dụng chính sách cho hàng xóm BGP</div>
</div>
</div>
<div class="modal-section">
<h4>Tuyên bố bản đồ lộ trình</h4>
<div id="rm-statements-container"></div>
<button class="btn btn-success btn-small" onclick="BGPApp.addRouteMapStatement()" type="button">+ Thêm câu lệnh</button>
</div>
Phần chính sách kiểm tra
<div class="modal-section" style="background: #1a1a1a; padding: 15px; border-radius: 6px; border: 2px solid #4fc3f7;">
<h4>🧪 Chính sách kiểm tra</h4>
<div class="form-row">
<div class="form-group" style="flex: 2;">
<label>Tiền tố kiểm tra</label>
<input id="rm-test-prefix" placeholder="192.168.1.0/24 or 10.0.0.0/8" type="text"/>
<div class="help-text">Nhập tiền tố để xem bản đồ lộ trình này sẽ xử lý nó như thế nào</div>
</div>
<div class="form-group" style="align-self: flex-end;">
<button class="btn btn-success" onclick="BGPApp.testRouteMap()" type="button">♥️ Kiểm tra</button>
</div>
</div>
<div id="rm-test-results" style="margin-top: 15px;"></div>
</div>
<div class="modal-actions">
<button class="btn btn-primary" type="submit">💾 Lưu bản đồ lộ trình</button>
<button class="btn btn-danger" onclick="BGPApp.closeRouteMapModal()" type="button">Hủy bỏ</button>
</div>
</form>
</div>
</div>
Phương thức nút
<div class="modal" id="node-modal">
<div class="modal-content">
<h3>⚙️ Định cấu hình nút</h3>
<form id="node-form">
<div class="modal-section">
<h4>Thông tin cơ bản</h4>
<div class="form-row">
<div class="form-group">
<label>ASN<span class="required">*</span></label>
<input id="node-asn" max="4294967295" min="1" required="" type="number"/>
</div>
<div class="form-group">
<label>Mã bộ định tuyến<span class="required">*</span></label>
<input id="node-router-id" placeholder="1.1.1.1" required="" type="text"/>
</div>
</div>
<div class="form-group">
<label>Người bán</label>
<select id="node-vendor">
<option value="Cisco">Cisco IOS/IOS-XE</option>
<option value="Cisco-NXOS">Hệ điều hành Cisco NX</option>
<option value="Juniper">Juniper JunOS</option>
<option value="VyOS">VyOS</option>
<option value="Aruba">Aruba AOS-CX</option>
</select>
</div>
</div>
Giai đoạn 3.1: Phần Quảng cáo Mạng
<div class="modal-section">
<h4>📡 Quảng cáo mạng</h4>
<div class="networks-list" id="node-networks-list"></div>
<div class="form-row">
<div class="form-group">
<label>Thêm tiền tố</label>
<input id="node-network-prefix" placeholder="192.0.2.0/24 or 2001:db8::/32" type="text"/>
</div>
<div class="form-group" style="align-self: flex-end;">
<button class="btn btn-secondary" onclick="BGPApp.addNetwork()" type="button">➕ Thêm</button>
</div>
</div>
<div class="help-text">Các mạng mà bộ định tuyến này sẽ khởi tạo/quảng cáo tới các hàng xóm BGP</div>
</div>
<div class="modal-actions">
<button class="btn btn-primary" type="submit">💾 Lưu</button>
<button class="btn btn-danger" onclick="BGPApp.closeModal()" type="button">Hủy bỏ</button>
</div>
</form>
</div>
</div>
Phương thức cạnh nâng cao với danh sách thả xuống Bản đồ lộ trình
<div class="modal" id="edge-modal">
<div class="modal-content">
<h3>🔗 Định cấu hình ngang hàng BGP</h3>
<form id="edge-form">
<div class="modal-section">
<h4>Cấu hình cơ bản</h4>
<div class="form-group">
<label>Sự miêu tả</label>
<input id="edge-description" placeholder="Connection to ISP" type="text"/>
</div>
<div class="form-row">
<div class="form-group">
<label>ASN cục bộ</label>
<input disabled="" id="edge-local-asn" type="text"/>
</div>
<div class="form-group">
<label>ASN từ xa</label>
<input disabled="" id="edge-remote-asn" type="text"/>
</div>
</div>
<div class="form-group advanced-only">
<label>Ghi đè Local-AS (Tùy chọn)<span class="help-icon" data-tooltip="What: Advertise a different AS number to this specific peer instead of the router's global AS. | When: Use during ISP migrations, multi-homing scenarios, or PE-CE deployments. | Example: Migrating from AS 65000 to AS 65001, advertise old AS to legacy peers.">?</span>
</label>
<input id="edge-localas-override" max="4294967295" min="1" placeholder="Leave empty to use router's global AS" type="number"/>
</div>
</div>
<div class="modal-section">
<h4>Cấu hình IPv4</h4>
<div class="checkbox-group">
<input checked="" id="edge-ipv4-enabled" type="checkbox"/>
<label for="edge-ipv4-enabled">Kích hoạt IPv4</label>
</div>
<div id="ipv4-config">
<div class="form-row">
<div class="form-group">
<label>IPv4 cục bộ</label>
<input id="edge-ipv4-local" placeholder="10.0.0.1" type="text"/>
</div>
<div class="form-group">
<label>IPv4 từ xa</label>
<input id="edge-ipv4-remote" placeholder="10.0.0.2" type="text"/>
</div>
</div>
</div>
</div>
MỚI: Phần chính sách về bản đồ lộ trình
<div class="modal-section">
<h4>🗺️ Chính sách bản đồ lộ trình</h4>
<div class="form-row">
<div class="form-group">
<label>Bản đồ lộ trình trong</label>
<select id="edge-routemap-in">
<option value="">-- Không có --</option>
</select>
<div class="help-text">Áp dụng cho các tuyến đã nhận</div>
</div>
<div class="form-group">
<label>Bản đồ lộ trình</label>
<select id="edge-routemap-out">
<option value="">-- Không có --</option>
</select>
<div class="help-text">Áp dụng cho các tuyến đường được quảng cáo</div>
</div>
</div>
</div>
<div class="collapsible-section advanced-only">
<div class="collapsible-header" onclick="BGPApp.toggleCollapsible(this)">
<span>🔒 Bảo mật &amp; Hẹn giờ</span>
<span class="arrow">▶</span>
</div>
<div class="collapsible-content">
<div class="form-group">
<label>Mật khẩu MD5<span class="help-icon" data-tooltip="What: Shared secret password for BGP session authentication (RFC 2385). | When: Always use on eBGP sessions for security. Required by many ISPs. | Example: Generate random 16+ character password. Both peers must configure identical password.">?</span>
</label>
<input id="edge-md5-password" type="password"/>
</div>
<div class="form-row">
<div class="form-group">
<label>lưu giữ<span class="help-icon" data-tooltip="What: Frequency (in seconds) that BGP keepalive messages are sent. | When: Default is 60s. Reduce for faster failure detection. | Example: For critical links use 10s keepalive with 30s holdtime.">?</span>
</label>
<input id="edge-keepalive" type="number" value="60"/>
</div>
<div class="form-group">
<label>thời gian chờ<span class="help-icon" data-tooltip="What: Time (in seconds) to wait before declaring peer dead if no messages received. Must be 3x keepalive or higher. | When: Default is 180s. Reduce for faster convergence. | Example: 30s holdtime with 10s keepalive.">?</span>
</label>
<input id="edge-holdtime" type="number" value="180"/>
</div>
</div>
</div>
</div>
<div class="collapsible-section advanced-only">
<div class="collapsible-header" onclick="BGPApp.toggleCollapsible(this)">
<span>⚡ Tùy chọn nâng cao</span>
<span class="arrow">▶</span>
</div>
<div class="collapsible-content">
<div class="checkbox-group">
<input id="edge-next-hop-self" type="checkbox"/>
<label for="edge-next-hop-self">Next-Hop-Self<span class="help-icon" data-tooltip="What: Change next-hop to own IP address when advertising routes to this peer. | When: Required for iBGP peers when route reflectors are not used. Prevents next-hop reachability issues. | Example: Enable on all iBGP sessions in non-route-reflector topologies.">?</span>
</label>
</div>
<div class="form-group">
<label>Tiền tố tối đa (0=không giới hạn)<span class="help-icon" data-tooltip="What: Maximum number of prefixes to accept from this peer before tearing down session. | When: Always set on eBGP sessions for protection against route leaks/attacks. | Example: Customers: 10-100, Peers: 50-200, Transit: 500-1000. Set 0 for iBGP.">?</span>
</label>
<input id="edge-max-prefix" type="number" value="0"/>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn btn-primary" type="submit">💾 Lưu ngang hàng</button>
<button class="btn btn-danger" onclick="BGPApp.closeEdgeModal()" type="button">Hủy bỏ</button>
</div>
</form>
</div>
</div>
Phương thức thư viện mẫu
<div class="modal" id="template-library-modal">
<div class="modal-content" style="max-width: 700px;">
<h3>📚 Mẫu cấu trúc liên kết BGP</h3>
<div class="modal-section">
<p style="color: #9e9e9e; font-size: 13px; margin-bottom: 20px;">Tải cấu trúc liên kết BGP dựng sẵn để bắt đầu nhanh chóng. Mỗi mẫu bao gồm các cấu hình thực hành tốt nhất.</p>
<div class="template-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
Mẫu 1: Biên ISP đơn
<div class="template-card" onclick="BGPApp.loadTemplate('single-isp')" style="background: #2d2d2d; padding: 15px; border-radius: 6px; border: 2px solid #555; cursor: pointer; transition: all 0.2s;">
<h4 style="color: #4fc3f7; margin: 0 0 8px 0; font-size: 14px;">🌐 Biên ISP đơn</h4>
<p style="font-size: 11px; color: #9e9e9e; margin: 0 0 8px 0;">Biên internet cơ bản với một kết nối ISP. Lý tưởng cho các văn phòng chi nhánh nhỏ hoặc học các kiến ​​thức cơ bản về BGP.</p>
<div style="font-size: 10px; color: #81c784;">✓ 1 Bộ định tuyến • 1 Nhà cung cấp dịch vụ • Phiên eBGP • Bản đồ lộ trình cơ bản</div>
</div>
Mẫu 2: ISP hai nhà
<div class="template-card" onclick="BGPApp.loadTemplate('dual-homed')" style="background: #2d2d2d; padding: 15px; border-radius: 6px; border: 2px solid #555; cursor: pointer; transition: all 0.2s;">
<h4 style="color: #4fc3f7; margin: 0 0 8px 0; font-size: 14px;">🔄 ISP hai nhà</h4>
<p style="font-size: 11px; color: #9e9e9e; margin: 0 0 8px 0;">Internet dự phòng với hai kết nối ISP. Kích hoạt/sao lưu bằng cách sử dụng thao tác Local-Preference.</p>
<div style="font-size: 10px; color: #81c784;">✓ 1 Bộ định tuyến • 2 Nhà cung cấp dịch vụ • Cân bằng tải • Chuyển đổi dự phòng</div>
</div>
Mẫu 3: Phản ánh lộ trình
<div class="template-card" onclick="BGPApp.loadTemplate('route-reflector')" style="background: #2d2d2d; padding: 15px; border-radius: 6px; border: 2px solid #555; cursor: pointer; transition: all 0.2s;">
<h4 style="color: #4fc3f7; margin: 0 0 8px 0; font-size: 14px;">🔁 Cấu trúc liên kết phản xạ tuyến đường</h4>
<p style="font-size: 11px; color: #9e9e9e; margin: 0 0 8px 0;">Thiết kế iBGP có thể mở rộng với bộ phản xạ tuyến đường. Tránh yêu cầu lưới đầy đủ cho các mạng lớn.</p>
<div style="font-size: 10px; color: #81c784;">✓ 4 Bộ định tuyến • Cụm RR • Máy khách ngang hàng • Thoát eBGP</div>
</div>
Mẫu 4: Multi-Site WAN
<div class="template-card" onclick="BGPApp.loadTemplate('multi-site')" style="background: #2d2d2d; padding: 15px; border-radius: 6px; border: 2px solid #555; cursor: pointer; transition: all 0.2s;">
<h4 style="color: #4fc3f7; margin: 0 0 8px 0; font-size: 14px;">🏢 Doanh nghiệp đa địa điểm</h4>
<p style="font-size: 11px; color: #9e9e9e; margin: 0 0 8px 0;">Ba trang web có đường trục Internet và MPLS dự phòng. Thể hiện chính sách BGP phức tạp.</p>
<div style="font-size: 10px; color: #81c784;">✓ 6 Bộ định tuyến • 3 Trang web • MPLS • Internet dự phòng</div>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn btn-danger" onclick="BGPApp.closeTemplateLibrary()">Đóng</button>
</div>
</div>
</div>
Phương thức xem quy trình quyết định BGP
<div class="modal" id="decision-process-modal">
<div class="modal-content" style="max-width: 800px;">
<h3>🔍 Quy trình quyết định đường đi tốt nhất của BGP</h3>
<div class="modal-section">
<div id="decision-route-info" style="background: #2d2d2d; padding: 12px; border-radius: 4px; margin-bottom: 15px;">
<div id="decision-prefix" style="font-size: 13px; color: #4fc3f7; font-weight: bold;"></div>
<div id="decision-router" style="font-size: 11px; color: #9e9e9e; margin-top: 5px;"></div>
</div>
<div id="decision-steps" style="max-height: 500px; overflow-y: auto;">
Các bước quyết định sẽ được điền ở đây
</div>
</div>
<div class="modal-actions">
<button class="btn btn-danger" onclick="BGPApp.closeDecisionViewer()">Đóng</button>
</div>
</div>
</div>
<div id="notification"></div>
<script>
const BGPApp = {
    cy: null,
    topology: { nodes: [], edges: [] },
    policyObjects: {
        prefixLists: {},
        asPathLists: {},
        communityLists: {},
        routeMaps: {}
    },
    selectedNode: null,
    selectedEdge: null,
    draggedItem: null,
    nodeCounter: 0,
    edgeCounter: 0,
    peeringMode: false,
    peeringSourceNode: null,
    simulationRun: false,
    editingPolicyName: null,
    userMode: 'beginner', // 'beginner' or 'expert'
    validationResults: { errors: [], warnings: [], successes: [] },
    bulkSelectedEdges: [],
    configCache: null, // Cache for generated configurations

    // Carrier Database - Real-world carriers with BGP communities and owned prefixes
    CARRIER_DATABASE: {
        // Existing carriers (5)
        'Lumen': {
            asn: 3356,
            tier: 1,
            region: 'Global',
            communities: {
                'customer': '3356:3',
                'peer': '3356:22',
                'upstream': '3356:9',
                'prepend_1x': '3356:70',
                'prepend_2x': '3356:80',
                'prepend_3x': '3356:90',
                'blackhole': '3356:666'
            },
            prefixes: [
                '4.0.0.0/9',
                '38.0.0.0/8',
                '205.0.0.0/8',
                '4.68.0.0/14',
                '65.200.0.0/13'
            ]
        },
        'Zayo': {
            asn: 6461,
            tier: 1,
            region: 'Global',
            communities: {
                'customer': '6461:100',
                'peer': '6461:200',
                'prepend_1x': '6461:1001',
                'prepend_2x': '6461:1002',
                'prepend_3x': '6461:1003',
                'blackhole': '6461:666'
            },
            prefixes: [
                '64.125.0.0/16',
                '66.192.0.0/11',
                '204.0.0.0/8',
                '69.84.0.0/14',
                '74.80.0.0/13'
            ]
        },
        'GTT': {
            asn: 3257,
            tier: 1,
            region: 'Global',
            communities: {
                'customer': '3257:8794',
                'peer': '3257:8888',
                'prepend_1x': '3257:2100',
                'prepend_2x': '3257:2200',
                'prepend_3x': '3257:2300',
                'blackhole': '3257:666'
            },
            prefixes: [
                '8.24.0.0/13',
                '89.221.0.0/16',
                '141.136.0.0/16',
                '195.66.224.0/19',
                '213.200.0.0/16'
            ]
        },
        'HE': {
            asn: 6939,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '6939:100',
                'prepend_2x': '6939:200',
                'prepend_3x': '6939:300',
                'blackhole': '6939:666'
            },
            prefixes: [
                '216.66.0.0/20',
                '184.104.0.0/16',
                '2001:470::/32',
                '64.62.128.0/17',
                '216.218.128.0/17'
            ]
        },
        'NTT': {
            asn: 2914,
            tier: 1,
            region: 'Global',
            communities: {
                'customer': '2914:410',
                'peer': '2914:420',
                'prepend_1x': '2914:400',
                'prepend_2x': '2914:401',
                'prepend_3x': '2914:402',
                'blackhole': '2914:666'
            },
            prefixes: [
                '129.250.0.0/16',
                '140.174.0.0/16',
                '198.104.0.0/16',
                '157.238.0.0/16',
                '203.141.128.0/17'
            ]
        },

        // New carriers (15)
        'Cogent': {
            asn: 174,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '174:1010',
                'prepend_2x': '174:1020',
                'prepend_3x': '174:1030',
                'customer_learned': '174:10',
                'peer_learned': '174:20',
                'upstream_learned': '174:30',
                'blackhole': '174:666'
            },
            prefixes: [
                '38.0.0.0/8',
                '154.0.0.0/8',
                '38.104.0.0/13',
                '66.28.0.0/16',
                '154.54.0.0/16'
            ]
        },
        'Telia': {
            asn: 1299,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '1299:1100',
                'prepend_2x': '1299:1200',
                'prepend_3x': '1299:1300',
                'europe_only': '1299:5000',
                'americas_only': '1299:6000',
                'asia_only': '1299:7000',
                'blackhole': '1299:666'
            },
            prefixes: [
                '62.115.0.0/16',
                '80.239.0.0/16',
                '213.248.0.0/16',
                '81.228.0.0/16',
                '90.224.0.0/13'
            ]
        },
        'Verizon': {
            asn: 701,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '701:1',
                'prepend_2x': '701:2',
                'prepend_3x': '701:3',
                'customer': '701:10',
                'peer': '701:20',
                'upstream': '701:30',
                'blackhole': '701:666'
            },
            prefixes: [
                '4.0.0.0/9',
                '8.0.0.0/8',
                '4.16.0.0/12',
                '4.68.0.0/14',
                '65.200.0.0/13'
            ]
        },
        'Liberty-Global': {
            asn: 6830,
            tier: 2,
            region: 'Europe/Global',
            communities: {
                'europe': '6830:17000',
                'americas': '6830:18000',
                'customer': '6830:16100',
                'peer': '6830:16200',
                'blackhole': '6830:666'
            },
            prefixes: [
                '62.179.0.0/16',
                '84.116.0.0/14',
                '85.92.0.0/14',
                '195.130.128.0/17',
                '213.127.0.0/16'
            ]
        },
        'Tata': {
            asn: 6453,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '6453:1100',
                'prepend_2x': '6453:1200',
                'prepend_3x': '6453:1300',
                'asia': '6453:5000',
                'europe': '6453:5001',
                'americas': '6453:5002',
                'blackhole': '6453:666'
            },
            prefixes: [
                '202.87.0.0/17',
                '202.40.32.0/19',
                '64.86.0.0/16',
                '82.195.160.0/19',
                '213.42.0.0/16'
            ]
        },
        'PCCW-Global': {
            asn: 3491,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '3491:1100',
                'prepend_2x': '3491:1200',
                'prepend_3x': '3491:1300',
                'hong_kong': '3491:1000',
                'singapore': '3491:1001',
                'japan': '3491:1002',
                'blackhole': '3491:666'
            },
            prefixes: [
                '202.12.64.0/19',
                '203.88.0.0/16',
                '202.67.0.0/16',
                '202.155.0.0/16',
                '203.186.0.0/16'
            ]
        },
        'China-Telecom': {
            asn: 4134,
            tier: 1,
            region: 'Asia/Global',
            communities: {
                'china': '4134:1000',
                'asia': '4134:2000',
                'europe': '4134:3000',
                'americas': '4134:4000',
                'customer': '4134:100',
                'peer': '4134:200'
            },
            prefixes: [
                '202.96.0.0/12',
                '202.112.0.0/14',
                '218.0.0.0/11',
                '61.128.0.0/10',
                '202.101.0.0/16'
            ]
        },
        'Vodafone': {
            asn: 1273,
            tier: 2,
            region: 'Europe/Global',
            communities: {
                'prepend_1x': '1273:110',
                'prepend_2x': '1273:120',
                'prepend_3x': '1273:130',
                'europe': '1273:1000',
                'blackhole': '1273:666'
            },
            prefixes: [
                '212.183.0.0/16',
                '217.114.0.0/16',
                '195.89.0.0/16',
                '83.97.0.0/16',
                '91.109.0.0/16'
            ]
        },
        'Deutsche-Telekom': {
            asn: 3320,
            tier: 1,
            region: 'Europe/Global',
            communities: {
                'prepend_1x': '3320:1000',
                'prepend_2x': '3320:2000',
                'prepend_3x': '3320:3000',
                'germany': '3320:9010',
                'europe': '3320:9020',
                'blackhole': '3320:666'
            },
            prefixes: [
                '62.154.0.0/15',
                '80.150.0.0/16',
                '217.0.0.0/16',
                '91.32.0.0/11',
                '217.5.0.0/16'
            ]
        },
        'ATT': {
            asn: 7018,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '7018:1',
                'prepend_2x': '7018:2',
                'prepend_3x': '7018:3',
                'customer': '7018:5000',
                'peer': '7018:5001',
                'blackhole': '7018:666'
            },
            prefixes: [
                '12.0.0.0/8',
                '192.205.0.0/16',
                '135.0.0.0/8',
                '144.160.0.0/11',
                '166.48.0.0/12'
            ]
        },
        'Sprint': {
            asn: 1239,
            tier: 1,
            region: 'Global',
            communities: {
                'prepend_1x': '1239:100',
                'prepend_2x': '1239:200',
                'prepend_3x': '1239:300',
                'customer': '1239:1000',
                'peer': '1239:2000',
                'blackhole': '1239:666'
            },
            prefixes: [
                '144.228.0.0/16',
                '206.158.0.0/16',
                '208.49.0.0/16',
                '65.104.0.0/14',
                '144.232.0.0/16'
            ]
        },
        'Orange': {
            asn: 5511,
            tier: 1,
            region: 'Europe/Global',
            communities: {
                'prepend_1x': '5511:1',
                'prepend_2x': '5511:2',
                'prepend_3x': '5511:3',
                'france': '5511:1000',
                'europe': '5511:2000',
                'blackhole': '5511:666'
            },
            prefixes: [
                '80.10.0.0/16',
                '81.52.0.0/14',
                '193.251.0.0/16',
                '212.234.0.0/16',
                '90.0.0.0/13'
            ]
        },
        'Sparkle': {
            asn: 6762,
            tier: 1,
            region: 'Europe/Global',
            communities: {
                'prepend_1x': '6762:100',
                'prepend_2x': '6762:200',
                'prepend_3x': '6762:300',
                'italy': '6762:1000',
                'europe': '6762:2000',
                'americas': '6762:3000',
                'blackhole': '6762:666'
            },
            prefixes: [
                '193.205.0.0/16',
                '212.31.0.0/16',
                '217.175.0.0/16',
                '62.94.0.0/16',
                '85.37.0.0/16'
            ]
        },
        'BT': {
            asn: 5400,
            tier: 1,
            region: 'Europe/Global',
            communities: {
                'prepend_1x': '5400:100',
                'prepend_2x': '5400:200',
                'prepend_3x': '5400:300',
                'uk': '5400:1000',
                'europe': '5400:2000',
                'blackhole': '5400:666'
            },
            prefixes: [
                '81.138.0.0/15',
                '195.99.0.0/16',
                '217.41.0.0/16',
                '109.148.0.0/14',
                '212.23.0.0/16'
            ]
        },
        'RETN': {
            asn: 9002,
            tier: 2,
            region: 'Europe/Global',
            communities: {
                'prepend_1x': '9002:100',
                'prepend_2x': '9002:200',
                'prepend_3x': '9002:300',
                'moscow': '9002:1000',
                'frankfurt': '9002:2000',
                'blackhole': '9002:666'
            },
            prefixes: [
                '195.34.48.0/21',
                '195.54.160.0/19',
                '217.106.112.0/20',
                '91.206.120.0/21',
                '84.52.112.0/20'
            ]
        }
    },

    carrierCommunities: {
        // Existing carriers
        '3356': { '3356:70': { action: 'prepend', value: 1 }, '3356:80': { action: 'prepend', value: 2 }, '3356:90': { action: 'prepend', value: 3 }, '3356:666': { action: 'blackhole', value: null } },
        '6461': { '6461:1001': { action: 'prepend', value: 1 }, '6461:1002': { action: 'prepend', value: 2 }, '6461:1003': { action: 'prepend', value: 3 }, '6461:666': { action: 'blackhole', value: null } },
        '3257': { '3257:2100': { action: 'prepend', value: 1 }, '3257:2200': { action: 'prepend', value: 2 }, '3257:2300': { action: 'prepend', value: 3 }, '3257:666': { action: 'blackhole', value: null } },
        '6939': { '6939:100': { action: 'prepend', value: 1 }, '6939:200': { action: 'prepend', value: 2 }, '6939:300': { action: 'prepend', value: 3 }, '6939:666': { action: 'blackhole', value: null } },
        '2914': { '2914:400': { action: 'prepend', value: 1 }, '2914:401': { action: 'prepend', value: 2 }, '2914:402': { action: 'prepend', value: 3 }, '2914:666': { action: 'blackhole', value: null } },
        // New carriers
        '174': { '174:1010': { action: 'prepend', value: 1 }, '174:1020': { action: 'prepend', value: 2 }, '174:1030': { action: 'prepend', value: 3 }, '174:666': { action: 'blackhole', value: null } },
        '1299': { '1299:1100': { action: 'prepend', value: 1 }, '1299:1200': { action: 'prepend', value: 2 }, '1299:1300': { action: 'prepend', value: 3 }, '1299:666': { action: 'blackhole', value: null } },
        '701': { '701:1': { action: 'prepend', value: 1 }, '701:2': { action: 'prepend', value: 2 }, '701:3': { action: 'prepend', value: 3 }, '701:666': { action: 'blackhole', value: null } },
        '6830': { '6830:666': { action: 'blackhole', value: null } },
        '6453': { '6453:1100': { action: 'prepend', value: 1 }, '6453:1200': { action: 'prepend', value: 2 }, '6453:1300': { action: 'prepend', value: 3 }, '6453:666': { action: 'blackhole', value: null } },
        '3491': { '3491:1100': { action: 'prepend', value: 1 }, '3491:1200': { action: 'prepend', value: 2 }, '3491:1300': { action: 'prepend', value: 3 }, '3491:666': { action: 'blackhole', value: null } },
        '4134': {},
        '1273': { '1273:110': { action: 'prepend', value: 1 }, '1273:120': { action: 'prepend', value: 2 }, '1273:130': { action: 'prepend', value: 3 }, '1273:666': { action: 'blackhole', value: null } },
        '3320': { '3320:1000': { action: 'prepend', value: 1 }, '3320:2000': { action: 'prepend', value: 2 }, '3320:3000': { action: 'prepend', value: 3 }, '3320:666': { action: 'blackhole', value: null } },
        '7018': { '7018:1': { action: 'prepend', value: 1 }, '7018:2': { action: 'prepend', value: 2 }, '7018:3': { action: 'prepend', value: 3 }, '7018:666': { action: 'blackhole', value: null } },
        '1239': { '1239:100': { action: 'prepend', value: 1 }, '1239:200': { action: 'prepend', value: 2 }, '1239:300': { action: 'prepend', value: 3 }, '1239:666': { action: 'blackhole', value: null } },
        '5511': { '5511:1': { action: 'prepend', value: 1 }, '5511:2': { action: 'prepend', value: 2 }, '5511:3': { action: 'prepend', value: 3 }, '5511:666': { action: 'blackhole', value: null } },
        '6762': { '6762:100': { action: 'prepend', value: 1 }, '6762:200': { action: 'prepend', value: 2 }, '6762:300': { action: 'prepend', value: 3 }, '6762:666': { action: 'blackhole', value: null } },
        '5400': { '5400:100': { action: 'prepend', value: 1 }, '5400:200': { action: 'prepend', value: 2 }, '5400:300': { action: 'prepend', value: 3 }, '5400:666': { action: 'blackhole', value: null } },
        '9002': { '9002:100': { action: 'prepend', value: 1 }, '9002:200': { action: 'prepend', value: 2 }, '9002:300': { action: 'prepend', value: 3 }, '9002:666': { action: 'blackhole', value: null } }
    },

    init() {
        this.initUserMode();
        this.initCytoscape();
        this.initDragDrop();
        this.initEvents();
        this.loadTopologyFromStorage();
        this.updatePolicyObjectsList();
    },

    initCytoscape() {
        this.cy = cytoscape({
            container: document.getElementById('cy'),
            style: [
                {
                    selector: 'node',
                    style: {
                        'label': 'data(label)',
                        'text-valign': 'center',
                        'text-halign': 'center',
                        'background-color': '#4fc3f7',
                        'color': '#fff',
                        'font-size': '12px',
                        'width': '60px',
                        'height': '60px',
                        'border-width': '3px',
                        'border-color': '#29b6f6'
                    }
                },
                {
                    selector: 'node[type="carrier"]',
                    style: {
                        'background-color': '#9c27b0',
                        'border-color': '#7b1fa2',
                        'shape': 'ellipse'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 3,
                        'line-color': '#ff9800',
                        'target-arrow-color': '#ff9800',
                        'target-arrow-shape': 'triangle',
                        'curve-style': 'bezier',
                        'label': 'data(label)',
                        'font-size': '10px',
                        'color': '#fff',
                        'text-rotation': 'autorotate',
                        'text-margin-y': -10
                    }
                },
                {
                    selector: 'edge.established',
                    style: {
                        'line-color': '#81c784',
                        'target-arrow-color': '#81c784',
                        'width': 4
                    }
                },
                {
                    selector: 'edge.has-routemap',
                    style: {
                        'line-color': '#e57373',
                        'target-arrow-color': '#e57373',
                        'line-style': 'dashed'
                    }
                },
                {
                    selector: 'edge.has-localas',
                    style: {
                        'line-color': '#ba68c8',
                        'target-arrow-color': '#ba68c8',
                        'line-style': 'dotted',
                        'width': 4
                    }
                },
                {
                    selector: 'edge.ibgp',
                    style: {
                        'line-style': 'dashed',
                        'line-color': '#4fc3f7',
                        'target-arrow-color': '#4fc3f7'
                    }
                },
                {
                    selector: 'edge.best-path',
                    style: {
                        'line-color': '#66bb6a',
                        'target-arrow-color': '#66bb6a',
                        'width': 5,
                        'line-style': 'solid'
                    }
                },
                {
                    selector: 'edge.backup-path',
                    style: {
                        'line-color': '#ffca28',
                        'target-arrow-color': '#ffca28',
                        'width': 3,
                        'line-style': 'solid'
                    }
                },
                {
                    selector: 'edge.filtered-path',
                    style: {
                        'line-color': '#ef5350',
                        'target-arrow-color': '#ef5350',
                        'width': 2,
                        'line-style': 'dotted'
                    }
                },
                {
                    selector: 'edge.highlighted',
                    style: {
                        'line-color': '#00e5ff',
                        'target-arrow-color': '#00e5ff',
                        'width': 6,
                        'z-index': 999
                    }
                },
                {
                    selector: 'node.highlighted',
                    style: {
                        'border-color': '#00e5ff',
                        'border-width': '6px'
                    }
                },
                {
                    selector: ':selected',
                    style: {
                        'border-width': '5px',
                        'border-color': '#ffeb3b'
                    }
                },
                {
                    selector: 'edge:selected',
                    style: {
                        'line-color': '#ffeb3b',
                        'target-arrow-color': '#ffeb3b',
                        'width': 5
                    }
                },
                {
                    selector: 'node.peering-source',
                    style: {
                        'border-width': '6px',
                        'border-color': '#81c784'
                    }
                }
            ],
            layout: { name: 'preset' }
        });

        this.cy.on('tap', 'node', (evt) => {
            const node = evt.target;
            if (this.peeringMode) {
                this.handlePeeringClick(node);
            } else {
                this.selectNode(node);
                this.showDeleteButton('node');
            }
        });

        this.cy.on('tap', 'edge', (evt) => {
            const edge = evt.target;
            const originalEvent = evt.originalEvent;

            // Ctrl+Click for multi-select
            if (originalEvent && (originalEvent.ctrlKey || originalEvent.metaKey)) {
                this.toggleBulkSelectEdge(edge);
            } else {
                this.selectEdge(edge);
                this.showDeleteButton('edge');
            }
        });

        this.cy.on('tap', (evt) => {
            // Tap on background
            if (evt.target === this.cy) {
                this.hideDeleteButton();
            }
        });

        this.cy.on('dbltap', 'node', (evt) => {
            if (!this.peeringMode) {
                this.openNodeModal(evt.target);
            }
        });

        this.cy.on('dbltap', 'edge', (evt) => {
            this.openEdgeModal(evt.target);
        });
    },

    initDragDrop() {
        const paletteItems = document.querySelectorAll('.palette-item');
        paletteItems.forEach(item => {
            item.addEventListener('dragstart', (e) => {
                this.draggedItem = {
                    type: e.target.dataset.type,
                    carrier: e.target.dataset.carrier,
                    asn: e.target.dataset.asn,
                    vendor: e.target.dataset.vendor || 'Cisco'
                };
                e.dataTransfer.effectAllowed = 'copy';
                e.dataTransfer.setData('text/plain', 'node');
            });
        });

        const canvasContainer = document.getElementById('canvas-container');
        canvasContainer.addEventListener('dragover', (e) => {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        });

        canvasContainer.addEventListener('drop', (e) => {
            e.preventDefault();
            if (this.draggedItem) {
                const canvas = document.getElementById('cy');
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                this.addNode(x, y, this.draggedItem);
                this.draggedItem = null;
                canvasContainer.classList.add('has-nodes');
            }
        });
    },

    initEvents() {
        document.getElementById('node-form').addEventListener('submit', (e) => {
            e.preventDefault();
            this.saveNodeConfig();
        });

        document.getElementById('edge-form').addEventListener('submit', (e) => {
            e.preventDefault();
            this.saveEdgeConfig();
        });

        document.getElementById('prefix-list-form').addEventListener('submit', (e) => {
            e.preventDefault();
            this.savePrefixList();
        });

        document.getElementById('aspath-list-form').addEventListener('submit', (e) => {
            e.preventDefault();
            this.saveAsPathList();
        });

        document.getElementById('community-list-form').addEventListener('submit', (e) => {
            e.preventDefault();
            this.saveCommunityList();
        });

        document.getElementById('routemap-form').addEventListener('submit', (e) => {
            e.preventDefault();
            this.saveRouteMap();
        });

        document.getElementById('edge-ipv4-enabled').addEventListener('change', (e) => {
            document.getElementById('ipv4-config').style.display = e.target.checked ? 'block' : 'none';
        });

        // Keyboard shortcut for delete
        document.addEventListener('keydown', (e) => {
            // Delete or Backspace key
            if (e.key === 'Delete' || e.key === 'Backspace') {
                // Don't trigger if typing in input field
                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
                    return;
                }

                e.preventDefault();
                this.deleteSelected();
            }
        });
    },

    // ========== Policy Object Management ==========

    showPolicyMenu() {
        document.getElementById('policy-menu-modal').classList.add('active');
    },

    closePolicyMenu() {
        document.getElementById('policy-menu-modal').classList.remove('active');
    },

    updatePolicyObjectsList() {
        const container = document.getElementById('policy-objects-list');
        const all = [
            ...Object.keys(this.policyObjects.prefixLists).map(name => ({ name, type: 'prefix-list', icon: '📝' })),
            ...Object.keys(this.policyObjects.asPathLists).map(name => ({ name, type: 'as-path', icon: '🛣️' })),
            ...Object.keys(this.policyObjects.communityLists).map(name => ({ name, type: 'community', icon: '🏷️' })),
            ...Object.keys(this.policyObjects.routeMaps).map(name => ({ name, type: 'route-map', icon: '🗺️' }))
        ];

        if (all.length === 0) {
            container.innerHTML = '<div class="empty-state">No policy objects created</div>';
            return;
        }

        container.innerHTML = all.map(obj => `
            <div class="policy-item" onclick="BGPApp.editPolicyObject('${obj.type}', '${obj.name}')">
                <div>
                    <div class="policy-item-name">${obj.icon} ${obj.name}</div>
                    <div class="policy-item-type">${obj.type}</div>
                </div>
                <div class="policy-item-actions">
                    <button onclick="event.stopPropagation(); BGPApp.deletePolicyObject('${obj.type}', '${obj.name}')" class="delete-btn">🗑️</button>
                </div>
            </div>
        `).join('');
    },

    editPolicyObject(type, name) {
        this.editingPolicyName = name;
        if (type === 'prefix-list') this.openPrefixListModal(name);
        else if (type === 'as-path') this.openAsPathListModal(name);
        else if (type === 'community') this.openCommunityListModal(name);
        else if (type === 'route-map') this.openRouteMapModal(name);
    },

    deletePolicyObject(type, name) {
        if (!confirm(`Delete ${type} "${name}"?`)) return;

        if (type === 'prefix-list') delete this.policyObjects.prefixLists[name];
        else if (type === 'as-path') delete this.policyObjects.asPathLists[name];
        else if (type === 'community') delete this.policyObjects.communityLists[name];
        else if (type === 'route-map') delete this.policyObjects.routeMaps[name];

        this.updatePolicyObjectsList();
        this.notify(`${type} "${name}" deleted`, 'success');
    },

    // ========== Prefix List ==========

    openPrefixListModal(name = null) {
        this.closePolicyMenu();
        document.getElementById('pl-name').value = name || '';
        document.getElementById('pl-type').value = 'ipv4';
        document.getElementById('pl-entries-container').innerHTML = '';

        if (name && this.policyObjects.prefixLists[name]) {
            const pl = this.policyObjects.prefixLists[name];
            document.getElementById('pl-type').value = pl.afi;
            pl.entries.forEach(entry => this.addPrefixListEntry(entry));
        } else {
            this.addPrefixListEntry();
        }

        document.getElementById('prefix-list-modal').classList.add('active');
    },

    closePrefixListModal() {
        document.getElementById('prefix-list-modal').classList.remove('active');
        this.editingPolicyName = null;
    },

    addPrefixListEntry(entry = null) {
        const container = document.getElementById('pl-entries-container');
        const id = Date.now();
        const html = `
            <div class="prefix-list-entry" id="pl-entry-${id}">
                <input type="number" placeholder="Seq" value="${entry?.seq || 10}" min="1" max="65535" required>
                <select required>
                    <option value="permit" ${entry?.action === 'permit' ? 'selected' : ''}>Permit</option>
                    <option value="deny" ${entry?.action === 'deny' ? 'selected' : ''}>Deny</option>
                </select>
                <input type="text" placeholder="Prefix (e.g., 192.168.0.0/24)" value="${entry?.prefix || ''}" required>
                <input type="number" placeholder="le" value="${entry?.le || ''}" min="0" max="32">
                <input type="number" placeholder="ge" value="${entry?.ge || ''}" min="0" max="32">
                <div class="entry-actions">
                    <button type="button" onclick="document.getElementById('pl-entry-${id}').remove()">🗑️</button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    },

    savePrefixList() {
        const name = document.getElementById('pl-name').value.trim();
        if (!name) return;

        const afi = document.getElementById('pl-type').value;
        const entries = [];

        document.querySelectorAll('.prefix-list-entry').forEach(div => {
            const inputs = div.querySelectorAll('input, select');
            entries.push({
                seq: parseInt(inputs[0].value),
                action: inputs[1].value,
                prefix: inputs[2].value,
                le: inputs[3].value ? parseInt(inputs[3].value) : null,
                ge: inputs[4].value ? parseInt(inputs[4].value) : null
            });
        });

        this.policyObjects.prefixLists[name] = { afi, entries };
        this.updatePolicyObjectsList();
        this.closePrefixListModal();
        this.notify(`Prefix list "${name}" saved`, 'success');
    },

    // ========== AS-Path List ==========

    openAsPathListModal(name = null) {
        this.closePolicyMenu();
        document.getElementById('aspath-name').value = name || '';
        document.getElementById('aspath-entries-container').innerHTML = '';

        if (name && this.policyObjects.asPathLists[name]) {
            const list = this.policyObjects.asPathLists[name];
            list.entries.forEach(entry => this.addAsPathEntry(entry));
        } else {
            this.addAsPathEntry();
        }

        document.getElementById('aspath-list-modal').classList.add('active');
    },

    closeAsPathListModal() {
        document.getElementById('aspath-list-modal').classList.remove('active');
        this.editingPolicyName = null;
    },

    addAsPathEntry(entry = null) {
        const container = document.getElementById('aspath-entries-container');
        const id = Date.now();
        const html = `
            <div class="as-path-entry" id="aspath-entry-${id}">
                <input type="number" placeholder="Seq" value="${entry?.seq || 10}" min="1" max="65535" required>
                <select required>
                    <option value="permit" ${entry?.action === 'permit' ? 'selected' : ''}>Permit</option>
                    <option value="deny" ${entry?.action === 'deny' ? 'selected' : ''}>Deny</option>
                </select>
                <input type="text" placeholder="Regex (e.g., ^65001_)" value="${entry?.regex || ''}" required style="grid-column: span 2;">
                <div></div>
                <div class="entry-actions">
                    <button type="button" onclick="document.getElementById('aspath-entry-${id}').remove()">🗑️</button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    },

    saveAsPathList() {
        const name = document.getElementById('aspath-name').value.trim();
        if (!name) return;

        const entries = [];
        document.querySelectorAll('.as-path-entry').forEach(div => {
            const inputs = div.querySelectorAll('input, select');
            entries.push({
                seq: parseInt(inputs[0].value),
                action: inputs[1].value,
                regex: inputs[2].value
            });
        });

        this.policyObjects.asPathLists[name] = { entries };
        this.updatePolicyObjectsList();
        this.closeAsPathListModal();
        this.notify(`AS-Path list "${name}" saved`, 'success');
    },

    // ========== Community List ==========

    openCommunityListModal(name = null) {
        this.closePolicyMenu();
        document.getElementById('comm-name').value = name || '';
        document.getElementById('comm-type').value = 'standard';
        document.getElementById('comm-values').value = '';

        if (name && this.policyObjects.communityLists[name]) {
            const list = this.policyObjects.communityLists[name];
            document.getElementById('comm-type').value = list.type;
            document.getElementById('comm-values').value = list.values.join(',');
        }

        document.getElementById('community-list-modal').classList.add('active');
    },

    closeCommunityListModal() {
        document.getElementById('community-list-modal').classList.remove('active');
        this.editingPolicyName = null;
    },

    saveCommunityList() {
        const name = document.getElementById('comm-name').value.trim();
        if (!name) return;

        const type = document.getElementById('comm-type').value;
        const values = document.getElementById('comm-values').value.split(',').map(v => v.trim()).filter(v => v);

        this.policyObjects.communityLists[name] = { type, values };
        this.updatePolicyObjectsList();
        this.closeCommunityListModal();
        this.notify(`Community list "${name}" saved`, 'success');
    },

    // ========== Route-Map ==========

    openRouteMapModal(name = null) {
        this.closePolicyMenu();
        document.getElementById('rm-name').value = name || '';
        document.getElementById('rm-statements-container').innerHTML = '';

        if (name && this.policyObjects.routeMaps[name]) {
            const rm = this.policyObjects.routeMaps[name];
            rm.statements.forEach(stmt => this.addRouteMapStatement(stmt));
        } else {
            this.addRouteMapStatement();
        }

        document.getElementById('routemap-modal').classList.add('active');
    },

    closeRouteMapModal() {
        document.getElementById('routemap-modal').classList.remove('active');
        this.editingPolicyName = null;
    },

    addRouteMapStatement(stmt = null) {
        const container = document.getElementById('rm-statements-container');
        const id = Date.now();

        const prefixListsOptions = Object.keys(this.policyObjects.prefixLists).map(name =>
            `<option value="${name}" ${stmt?.match?.prefixList === name ? 'selected' : ''}>${name}</option>`
        ).join('');

        const asPathListsOptions = Object.keys(this.policyObjects.asPathLists).map(name =>
            `<option value="${name}" ${stmt?.match?.asPath === name ? 'selected' : ''}>${name}</option>`
        ).join('');

        const communityListsOptions = Object.keys(this.policyObjects.communityLists).map(name =>
            `<option value="${name}" ${stmt?.match?.community === name ? 'selected' : ''}>${name}</option>`
        ).join('');

        const html = `
            <div class="route-map-statement" id="rm-stmt-${id}">
                <div class="route-map-statement-header">
                    <h5>Sequence ${stmt?.seq || 10}</h5>
                    <button type="button" class="btn btn-danger btn-small" onclick="document.getElementById('rm-stmt-${id}').remove()">Delete</button>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>Sequence</label>
                        <input type="number" class="rm-seq" value="${stmt?.seq || 10}" min="1" max="65535" required>
                    </div>
                    <div class="form-group">
                        <label>Action</label>
                        <select class="rm-action" required>
                            <option value="permit" ${stmt?.action === 'permit' ? 'selected' : ''}>Permit</option>
                            <option value="deny" ${stmt?.action === 'deny' ? 'selected' : ''}>Deny</option>
                        </select>
                    </div>
                </div>

                <div class="match-set-section">
                    <h6>Match Conditions</h6>
                    <div class="form-group">
                        <label>Prefix List</label>
                        <select class="rm-match-pl">
                            <option value="">-- None --</option>
                            ${prefixListsOptions}
                        </select>
                    </div>
                    <div class="form-group">
                        <label>AS-Path</label>
                        <select class="rm-match-aspath">
                            <option value="">-- None --</option>
                            ${asPathListsOptions}
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Community</label>
                        <select class="rm-match-comm">
                            <option value="">-- None --</option>
                            ${communityListsOptions}
                        </select>
                    </div>
                </div>

                <div class="match-set-section">
                    <h6>Set Actions</h6>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Local Preference</label>
                            <input type="number" class="rm-set-lp" placeholder="None" value="${stmt?.set?.localPref || ''}" min="0">
                        </div>
                        <div class="form-group">
                            <label>MED</label>
                            <input type="number" class="rm-set-med" placeholder="None" value="${stmt?.set?.med || ''}" min="0">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>AS-Path Prepend Count</label>
                            <input type="number" class="rm-set-prepend" placeholder="0" value="${stmt?.set?.prependCount || ''}" min="0" max="10">
                        </div>
                        <div class="form-group">
                            <label>Set Community</label>
                            <select class="rm-set-comm-preset" onchange="if(this.value) this.nextElementSibling.value = this.value">
                                <option value="">-- Select Standard or Custom --</option>
                                <option value="no-export">NO_EXPORT (RFC 1997)</option>
                                <option value="no-advertise">NO_ADVERTISE (RFC 1997)</option>
                                <option value="local-as">LOCAL_AS (RFC 1997)</option>
                                <option value="internet">INTERNET (RFC 1997)</option>
                                <option value="">--- Custom Community ---</option>
                            </select>
                            <input type="text" class="rm-set-comm" placeholder="65000:100 or no-export" value="${stmt?.set?.community || ''}" style="margin-top: 5px;">
                            <div class="help-text" style="font-size: 10px;">Standard: no-export, no-advertise, local-as | Custom: ASN:value</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    },

    saveRouteMap() {
        const name = document.getElementById('rm-name').value.trim();
        if (!name) return;

        const statements = [];
        document.querySelectorAll('.route-map-statement').forEach(div => {
            statements.push({
                seq: parseInt(div.querySelector('.rm-seq').value),
                action: div.querySelector('.rm-action').value,
                match: {
                    prefixList: div.querySelector('.rm-match-pl').value || null,
                    asPath: div.querySelector('.rm-match-aspath').value || null,
                    community: div.querySelector('.rm-match-comm').value || null
                },
                set: {
                    localPref: div.querySelector('.rm-set-lp').value ? parseInt(div.querySelector('.rm-set-lp').value) : null,
                    med: div.querySelector('.rm-set-med').value ? parseInt(div.querySelector('.rm-set-med').value) : null,
                    prependCount: div.querySelector('.rm-set-prepend').value ? parseInt(div.querySelector('.rm-set-prepend').value) : 0,
                    community: div.querySelector('.rm-set-comm').value || null
                }
            });
        });

        this.policyObjects.routeMaps[name] = { statements };
        this.updatePolicyObjectsList();
        this.updateEdgeRouteMapDropdowns();
        this.closeRouteMapModal();
        this.notify(`Route-map "${name}" saved`, 'success');
    },

    testRouteMap() {
        const testPrefix = document.getElementById('rm-test-prefix').value.trim();
        const resultsDiv = document.getElementById('rm-test-results');

        if (!testPrefix) {
            resultsDiv.innerHTML = '<div style="color: #e57373; font-size: 12px;">⚠️ Please enter a test prefix</div>';
            return;
        }

        // Validate prefix format (basic check)
        if (!testPrefix.match(/^\d+\.\d+\.\d+\.\d+\/\d+$/)) {
            resultsDiv.innerHTML = '<div style="color: #e57373; font-size: 12px;">⚠️ Invalid prefix format. Use CIDR notation (e.g., 192.168.1.0/24)</div>';
            return;
        }

        // Get current route-map statements from the form
        const statements = [];
        document.querySelectorAll('.route-map-statement').forEach(div => {
            statements.push({
                seq: parseInt(div.querySelector('.rm-seq').value),
                action: div.querySelector('.rm-action').value,
                match: {
                    prefixList: div.querySelector('.rm-match-pl').value || null,
                    asPath: div.querySelector('.rm-match-aspath').value || null,
                    community: div.querySelector('.rm-match-comm').value || null
                },
                set: {
                    localPref: div.querySelector('.rm-set-lp').value ? parseInt(div.querySelector('.rm-set-lp').value) : null,
                    med: div.querySelector('.rm-set-med').value ? parseInt(div.querySelector('.rm-set-med').value) : null,
                    prependCount: div.querySelector('.rm-set-prepend').value ? parseInt(div.querySelector('.rm-set-prepend').value) : 0,
                    community: div.querySelector('.rm-set-comm').value || null
                }
            });
        });

        if (statements.length === 0) {
            resultsDiv.innerHTML = '<div style="color: #e57373; font-size: 12px;">⚠️ No statements defined. Add at least one statement to test.</div>';
            return;
        }

        // Sort statements by sequence
        statements.sort((a, b) => a.seq - b.seq);

        // Simulate route-map processing
        let matched = false;
        let matchedStatement = null;
        let testResults = [];

        for (const stmt of statements) {
            let stmtMatches = true;
            const matchDetails = [];

            // Check prefix-list match
            if (stmt.match.prefixList) {
                const pl = this.policyObjects.prefixLists[stmt.match.prefixList];
                if (pl) {
                    const prefixMatches = this.checkPrefixListMatch(testPrefix, pl);
                    stmtMatches = stmtMatches && prefixMatches;
                    matchDetails.push(`Prefix-list ${stmt.match.prefixList}: ${prefixMatches ? '✓ Match' : '✗ No match'}`);
                } else {
                    matchDetails.push(`Prefix-list ${stmt.match.prefixList}: ⚠️ Not found`);
                    stmtMatches = false;
                }
            }

            // AS-path and community checks would be added here if test route had those attributes
            if (stmt.match.asPath) {
                matchDetails.push(`AS-path ${stmt.match.asPath}: ℹ️ Skipped (requires route context)`);
            }
            if (stmt.match.community) {
                matchDetails.push(`Community ${stmt.match.community}: ℹ️ Skipped (requires route context)`);
            }

            // If no match criteria, statement matches by default
            if (!stmt.match.prefixList && !stmt.match.asPath && !stmt.match.community) {
                stmtMatches = true;
                matchDetails.push('No match criteria - matches all routes');
            }

            testResults.push({
                seq: stmt.seq,
                action: stmt.action,
                matched: stmtMatches,
                matchDetails,
                setActions: stmt.set
            });

            // If this statement matched, stop processing (unless it's continue)
            if (stmtMatches) {
                matched = true;
                matchedStatement = stmt;
                break;
            }
        }

        // Display results
        let html = '<div style="background: #2d2d2d; padding: 12px; border-radius: 4px; font-size: 12px;">';
        html += `<div style="font-weight: bold; color: #4fc3f7; margin-bottom: 10px;">Testing: ${testPrefix}</div>`;

        testResults.forEach(result => {
            const statusColor = result.matched ? '#81c784' : '#9e9e9e';
            const statusIcon = result.matched ? '✓' : '○';
            const bgColor = result.matched ? '#1a3a1a' : 'transparent';

            html += `
                <div style="padding: 10px; margin-bottom: 8px; border-left: 3px solid ${statusColor}; background: ${bgColor}; border-radius: 3px;">
                    <div style="font-weight: bold; color: ${statusColor};">${statusIcon} Sequence ${result.seq}: ${result.action.toUpperCase()}</div>
                    ${result.matchDetails.map(d => `<div style="font-size: 11px; color: #e0e0e0; margin-top: 4px;">• ${d}</div>`).join('')}
                    ${result.matched && result.action === 'permit' ? `
                        <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #555;">
                            <div style="color: #4fc3f7; font-weight: bold; margin-bottom: 4px;">Actions Applied:</div>
                            ${result.setActions.localPref ? `<div style="font-size: 11px;">• Set local-pref: ${result.setActions.localPref}</div>` : ''}
                            ${result.setActions.med ? `<div style="font-size: 11px;">• Set MED: ${result.setActions.med}</div>` : ''}
                            ${result.setActions.prependCount > 0 ? `<div style="font-size: 11px;">• Prepend AS ${result.setActions.prependCount} time(s)</div>` : ''}
                            ${result.setActions.community ? `<div style="font-size: 11px;">• Set community: ${result.setActions.community}</div>` : ''}
                            ${!result.setActions.localPref && !result.setActions.med && !result.setActions.prependCount && !result.setActions.community ? '<div style="font-size: 11px; color: #9e9e9e;">No set actions configured</div>' : ''}
                        </div>
                    ` : ''}
                    ${result.matched && result.action === 'deny' ? '<div style="margin-top: 4px; color: #e57373; font-weight: bold;">🚫 Route DENIED</div>' : ''}
                </div>
            `;
        });

        if (!matched) {
            html += '<div style="padding: 10px; background: #3e2723; border-left: 3px solid #e57373; border-radius: 3px; font-weight: bold; color: #e57373;">❌ No statement matched - Route would be DENIED (implicit deny)</div>';
        } else if (matchedStatement.action === 'permit') {
            html += '<div style="padding: 10px; background: #1a3a1a; border-left: 3px solid #81c784; border-radius: 3px; margin-top: 8px; font-weight: bold; color: #81c784;">✓ Result: Route PERMITTED</div>';
        }

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

    checkPrefixListMatch(testPrefix, prefixList) {
        // Simple prefix matching logic
        const testParts = testPrefix.split('/');
        const testAddr = testParts[0];
        const testMask = parseInt(testParts[1]);

        for (const entry of prefixList.entries) {
            const entryParts = entry.prefix.split('/');
            const entryAddr = entryParts[0];
            const entryMask = parseInt(entryParts[1]);
            const minLen = entry.minLength || entryMask;
            const maxLen = entry.maxLength || entryMask;

            // Check if prefix matches and mask is in range
            if (testAddr.startsWith(entryAddr.split('.').slice(0, 2).join('.')) &&
                testMask >= minLen && testMask <= maxLen) {
                return entry.action === 'permit';
            }
        }
        return false;
    },

    updateEdgeRouteMapDropdowns() {
        const rmNames = Object.keys(this.policyObjects.routeMaps);
        const options = rmNames.map(name => `<option value="${name}">${name}</option>`).join('');

        ['edge-routemap-in', 'edge-routemap-out'].forEach(id => {
            const select = document.getElementById(id);
            const current = select.value;
            select.innerHTML = '<option value="">-- None --</option>' + options;
            select.value = current;
        });
    },

    // ========== Node & Edge Management ==========

    toggleCollapsible(header) {
        header.classList.toggle('active');
        header.nextElementSibling.classList.toggle('active');
    },

    togglePeeringMode() {
        this.peeringMode = !this.peeringMode;
        const btn = document.getElementById('peer-btn');
        const container = document.getElementById('canvas-container');

        if (this.peeringMode) {
            btn.classList.add('active');
            container.classList.add('peering-mode');
            this.notify('Click first node, then second node');
        } else {
            btn.classList.remove('active');
            container.classList.remove('peering-mode');
            if (this.peeringSourceNode) {
                this.peeringSourceNode.removeClass('peering-source');
                this.peeringSourceNode = null;
            }
        }
    },

    handlePeeringClick(node) {
        if (!this.peeringSourceNode) {
            this.peeringSourceNode = node;
            node.addClass('peering-source');
            this.notify('Click target node...');
        } else {
            if (this.peeringSourceNode.id() === node.id()) {
                this.notify('Cannot peer with itself', 'error');
                return;
            }

            this.createEdge(this.peeringSourceNode, node);
            this.peeringSourceNode.removeClass('peering-source');
            this.peeringSourceNode = null;
            this.togglePeeringMode();
        }
    },

    addNode(x, y, itemData) {
        const id = `node_${++this.nodeCounter}`;
        const isCarrier = itemData.type === 'carrier';

        const nodeData = {
            id: id,
            type: itemData.type,
            label: isCarrier ? itemData.carrier : `Router ${this.nodeCounter}`,
            data: {
                asn: parseInt(itemData.asn) || 65000 + this.nodeCounter,
                routerId: `${this.nodeCounter}.${this.nodeCounter}.${this.nodeCounter}.${this.nodeCounter}`,
                vendor: itemData.vendor || 'Cisco',
                carrier: itemData.carrier || null,
                networks: [],  // Phase 3.1: Networks advertised by this router
                rib: []
            }
        };

        const newNode = this.cy.add({ group: 'nodes', data: nodeData, position: { x, y } });
        this.topology.nodes.push(nodeData);
        this.notify(`Added ${nodeData.label}`, 'success');

        // Feature 1: Prompt for AS configuration when router is dropped (not carriers)
        if (!isCarrier) {
            setTimeout(() => this.openNodeModal(newNode), 100);
        }
    },

    createEdge(sourceNode, targetNode) {
        const edgeId = `edge_${++this.edgeCounter}`;
        const srcData = sourceNode.data();
        const tgtData = targetNode.data();
        const isIBGP = srcData.data.asn === tgtData.data.asn;

        const edgeData = {
            id: edgeId,
            source: srcData.id,
            target: tgtData.id,
            label: `AS${srcData.data.asn}-AS${tgtData.data.asn}`,
            classes: isIBGP ? 'ibgp' : 'ebgp',
            data: {
                description: '',
                localAs: null,  // Feature 2: Local-AS override (advertise different AS to peer)
                ipv4: {
                    enabled: true,
                    localIp: `10.0.${this.edgeCounter}.1`,
                    remoteIp: `10.0.${this.edgeCounter}.2`
                },
                security: { md5Password: '', ebgpMultihop: 1 },
                timers: { keepalive: 60, holdtime: 180 },
                advanced: { nextHopSelf: false, maxPrefix: 0 },
                policy: {
                    routeMapIn: null,
                    routeMapOut: null
                }
            }
        };

        this.cy.add({ group: 'edges', data: edgeData, classes: edgeData.classes });
        this.topology.edges.push(edgeData);
        this.notify('Peering created! Double-click to configure.', 'success');
        setTimeout(() => this.openEdgeModal(this.cy.getElementById(edgeId)), 500);
    },

    selectEdge(edge) {
        this.selectedEdge = edge;
        this.updateEdgeLookingGlass(edge);
    },

    updateEdgeLookingGlass(edge) {
        const data = edge.data();
        const srcNode = this.cy.getElementById(data.source).data();
        const tgtNode = this.cy.getElementById(data.target).data();
        const isIBGP = srcNode.data.asn === tgtNode.data.asn;

        let summaryHtml = `
            <div class="peer-info-box">
                <h4>🔗 Peering Information</h4>
                <div class="peer-info-row">
                    <span class="peer-info-label">Type:</span>
                    <span class="peer-info-value">${isIBGP ? 'iBGP' : 'eBGP'}</span>
                </div>
                <div class="peer-info-row">
                    <span class="peer-info-label">Local:</span>
                    <span class="peer-info-value">${srcNode.label} (AS${srcNode.data.asn})</span>
                </div>
                <div class="peer-info-row">
                    <span class="peer-info-label">Remote:</span>
                    <span class="peer-info-value">${tgtNode.label} (AS${tgtNode.data.asn})</span>
                </div>
                <div class="peer-info-row">
                    <span class="peer-info-label">IPv4:</span>
                    <span class="peer-info-value">${data.data.ipv4.localIp} - ${data.data.ipv4.remoteIp}</span>
                </div>
                ${data.data.localAs ? `
                    <div class="peer-info-row">
                        <span class="peer-info-label">Local-AS:</span>
                        <span class="peer-info-value" style="color: #ba68c8; font-weight: bold;">AS${data.data.localAs} (override)</span>
                    </div>
                ` : ''}
            </div>

            ${data.data.policy.routeMapIn || data.data.policy.routeMapOut ? `
                <div class="summary-section">
                    <h4>🗺️ Applied Route-Maps</h4>
                    ${data.data.policy.routeMapIn ? `<div class="summary-item"><strong>Inbound:</strong> ${data.data.policy.routeMapIn}</div>` : ''}
                    ${data.data.policy.routeMapOut ? `<div class="summary-item"><strong>Outbound:</strong> ${data.data.policy.routeMapOut}</div>` : ''}
                </div>
            ` : ''}

            <div class="info-box" style="margin-top: 15px;">
                <strong>💡 Tip:</strong> Double-click to edit configuration and apply route-maps
            </div>
        `;

        document.getElementById('summary-content').innerHTML = summaryHtml;
    },

    openEdgeModal(edge) {
        const data = edge.data();
        const srcNode = this.cy.getElementById(data.source).data();
        const tgtNode = this.cy.getElementById(data.target).data();

        document.getElementById('edge-description').value = data.data.description || '';
        document.getElementById('edge-local-asn').value = `AS${srcNode.data.asn} (${srcNode.label})`;
        document.getElementById('edge-remote-asn').value = `AS${tgtNode.data.asn} (${tgtNode.label})`;
        document.getElementById('edge-localas-override').value = data.data.localAs || '';

        document.getElementById('edge-ipv4-enabled').checked = data.data.ipv4.enabled;
        document.getElementById('edge-ipv4-local').value = data.data.ipv4.localIp;
        document.getElementById('edge-ipv4-remote').value = data.data.ipv4.remoteIp;

        document.getElementById('edge-md5-password').value = data.data.security.md5Password || '';
        document.getElementById('edge-keepalive').value = data.data.timers.keepalive;
        document.getElementById('edge-holdtime').value = data.data.timers.holdtime;

        document.getElementById('edge-next-hop-self').checked = data.data.advanced.nextHopSelf;
        document.getElementById('edge-max-prefix').value = data.data.advanced.maxPrefix;

        this.updateEdgeRouteMapDropdowns();
        document.getElementById('edge-routemap-in').value = data.data.policy.routeMapIn || '';
        document.getElementById('edge-routemap-out').value = data.data.policy.routeMapOut || '';

        this.selectedEdge = edge;
        document.getElementById('edge-modal').classList.add('active');
    },

    closeEdgeModal() {
        document.getElementById('edge-modal').classList.remove('active');
        this.selectedEdge = null;
    },

    saveEdgeConfig() {
        if (!this.selectedEdge) return;

        const data = this.selectedEdge.data();
        data.data.description = document.getElementById('edge-description').value;

        // Feature 2: Save local-AS override
        const localAsValue = document.getElementById('edge-localas-override').value;
        data.data.localAs = localAsValue ? parseInt(localAsValue) : null;

        data.data.ipv4.enabled = document.getElementById('edge-ipv4-enabled').checked;
        data.data.ipv4.localIp = document.getElementById('edge-ipv4-local').value;
        data.data.ipv4.remoteIp = document.getElementById('edge-ipv4-remote').value;
        data.data.security.md5Password = document.getElementById('edge-md5-password').value;
        data.data.timers.keepalive = parseInt(document.getElementById('edge-keepalive').value);
        data.data.timers.holdtime = parseInt(document.getElementById('edge-holdtime').value);
        data.data.advanced.nextHopSelf = document.getElementById('edge-next-hop-self').checked;
        data.data.advanced.maxPrefix = parseInt(document.getElementById('edge-max-prefix').value);

        data.data.policy.routeMapIn = document.getElementById('edge-routemap-in').value || null;
        data.data.policy.routeMapOut = document.getElementById('edge-routemap-out').value || null;

        // Update edge classes for visual indication
        this.selectedEdge.removeClass('has-routemap has-localas');
        if (data.data.policy.routeMapIn || data.data.policy.routeMapOut) {
            this.selectedEdge.addClass('has-routemap');
        }
        if (data.data.localAs) {
            this.selectedEdge.addClass('has-localas');
        }

        this.selectedEdge.data(data);
        this.closeEdgeModal();
        this.notify('Peering saved!', 'success');

        if (this.selectedEdge) {
            this.updateEdgeLookingGlass(this.selectedEdge);
        }
    },

    openNodeModal(node) {
        const data = node.data();
        document.getElementById('node-asn').value = data.data.asn;
        document.getElementById('node-router-id').value = data.data.routerId;
        document.getElementById('node-vendor').value = data.data.vendor;
        this.selectedNode = node;
        this.updateNetworksList();  // Phase 3.1: Display networks
        document.getElementById('node-modal').classList.add('active');
    },

    closeModal() {
        document.getElementById('node-modal').classList.remove('active');
        this.selectedNode = null;
    },

    // Template Library Functions
    showTemplateLibrary() {
        document.getElementById('template-library-modal').classList.add('active');
    },

    closeTemplateLibrary() {
        document.getElementById('template-library-modal').classList.remove('active');
    },

    loadTemplate(templateId) {
        const templates = {
            'single-isp': {
                nodes: [
                    {
                        id: 'r1',
                        type: 'router',
                        label: 'Edge-Router (AS65001)',
                        position: { x: 300, y: 200 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.1',
                            vendor: 'Cisco',
                            networks: ['192.168.1.0/24', '192.168.2.0/24']
                        }
                    },
                    {
                        id: 'c1',
                        type: 'carrier',
                        label: 'Lumen (AS3356)',
                        position: { x: 300, y: 400 },
                        data: {
                            asn: 3356,
                            routerId: '3.3.5.6',
                            carrier: 'Lumen',
                            networks: ['0.0.0.0/0']
                        }
                    }
                ],
                edges: [
                    {
                        id: 'e1',
                        source: 'r1',
                        target: 'c1',
                        data: {
                            ipv4: { enabled: true, local: '10.0.0.1', remote: '10.0.0.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: 'BGP2025!', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 1000 },
                            localAs: null
                        }
                    }
                ]
            },
            'dual-homed': {
                nodes: [
                    {
                        id: 'r1',
                        type: 'router',
                        label: 'Edge-Router (AS65001)',
                        position: { x: 300, y: 300 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.1',
                            vendor: 'Cisco',
                            networks: ['192.168.0.0/16']
                        }
                    },
                    {
                        id: 'c1',
                        type: 'carrier',
                        label: 'Lumen (AS3356)',
                        position: { x: 150, y: 500 },
                        data: {
                            asn: 3356,
                            routerId: '3.3.5.6',
                            carrier: 'Lumen',
                            networks: ['0.0.0.0/0']
                        }
                    },
                    {
                        id: 'c2',
                        type: 'carrier',
                        label: 'Zayo (AS6461)',
                        position: { x: 450, y: 500 },
                        data: {
                            asn: 6461,
                            routerId: '6.4.6.1',
                            carrier: 'Zayo',
                            networks: ['0.0.0.0/0']
                        }
                    }
                ],
                edges: [
                    {
                        id: 'e1',
                        source: 'r1',
                        target: 'c1',
                        data: {
                            ipv4: { enabled: true, local: '10.0.1.1', remote: '10.0.1.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: 'Primary!2025', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 1000 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e2',
                        source: 'r1',
                        target: 'c2',
                        data: {
                            ipv4: { enabled: true, local: '10.0.2.1', remote: '10.0.2.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: 'Backup!2025', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 1000 },
                            localAs: null
                        }
                    }
                ]
            },
            'route-reflector': {
                nodes: [
                    {
                        id: 'rr1',
                        type: 'router',
                        label: 'Route-Reflector-1 (AS65001)',
                        position: { x: 250, y: 150 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.1',
                            vendor: 'Cisco',
                            networks: []
                        }
                    },
                    {
                        id: 'rr2',
                        type: 'router',
                        label: 'Route-Reflector-2 (AS65001)',
                        position: { x: 450, y: 150 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.2',
                            vendor: 'Cisco',
                            networks: []
                        }
                    },
                    {
                        id: 'r1',
                        type: 'router',
                        label: 'Edge-1 (AS65001)',
                        position: { x: 150, y: 350 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.11',
                            vendor: 'Cisco',
                            networks: ['10.1.0.0/16']
                        }
                    },
                    {
                        id: 'r2',
                        type: 'router',
                        label: 'Edge-2 (AS65001)',
                        position: { x: 550, y: 350 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.12',
                            vendor: 'Cisco',
                            networks: ['10.2.0.0/16']
                        }
                    },
                    {
                        id: 'c1',
                        type: 'carrier',
                        label: 'HE (AS6939)',
                        position: { x: 150, y: 500 },
                        data: {
                            asn: 6939,
                            routerId: '6.9.3.9',
                            carrier: 'HE',
                            networks: ['0.0.0.0/0']
                        }
                    }
                ],
                edges: [
                    {
                        id: 'e1',
                        source: 'rr1',
                        target: 'rr2',
                        data: {
                            ipv4: { enabled: true, local: '10.255.0.1', remote: '10.255.0.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: '', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 0 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e2',
                        source: 'rr1',
                        target: 'r1',
                        data: {
                            ipv4: { enabled: true, local: '10.255.1.1', remote: '10.255.1.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: '', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 0 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e3',
                        source: 'rr2',
                        target: 'r2',
                        data: {
                            ipv4: { enabled: true, local: '10.255.2.1', remote: '10.255.2.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: '', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 0 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e4',
                        source: 'r1',
                        target: 'c1',
                        data: {
                            ipv4: { enabled: true, local: '10.0.1.1', remote: '10.0.1.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: 'HE!2025', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 1000 },
                            localAs: null
                        }
                    }
                ]
            },
            'multi-site': {
                nodes: [
                    {
                        id: 'hq1',
                        type: 'router',
                        label: 'HQ-Router-1 (AS65001)',
                        position: { x: 300, y: 150 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.1',
                            vendor: 'Cisco',
                            networks: ['10.1.0.0/16']
                        }
                    },
                    {
                        id: 'hq2',
                        type: 'router',
                        label: 'HQ-Router-2 (AS65001)',
                        position: { x: 500, y: 150 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.2',
                            vendor: 'Cisco',
                            networks: []
                        }
                    },
                    {
                        id: 'br1',
                        type: 'router',
                        label: 'Branch-1 (AS65001)',
                        position: { x: 150, y: 350 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.11',
                            vendor: 'Cisco',
                            networks: ['10.2.0.0/16']
                        }
                    },
                    {
                        id: 'br2',
                        type: 'router',
                        label: 'Branch-2 (AS65001)',
                        position: { x: 650, y: 350 },
                        data: {
                            asn: 65001,
                            routerId: '1.1.1.12',
                            vendor: 'Cisco',
                            networks: ['10.3.0.0/16']
                        }
                    },
                    {
                        id: 'c1',
                        type: 'carrier',
                        label: 'Lumen (AS3356)',
                        position: { x: 200, y: 500 },
                        data: {
                            asn: 3356,
                            routerId: '3.3.5.6',
                            carrier: 'Lumen',
                            networks: ['0.0.0.0/0']
                        }
                    },
                    {
                        id: 'c2',
                        type: 'carrier',
                        label: 'NTT (AS2914)',
                        position: { x: 600, y: 500 },
                        data: {
                            asn: 2914,
                            routerId: '2.9.1.4',
                            carrier: 'NTT',
                            networks: ['0.0.0.0/0']
                        }
                    }
                ],
                edges: [
                    {
                        id: 'e1',
                        source: 'hq1',
                        target: 'hq2',
                        data: {
                            ipv4: { enabled: true, local: '10.255.0.1', remote: '10.255.0.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: '', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: true, maxPrefix: 0 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e2',
                        source: 'hq1',
                        target: 'br1',
                        data: {
                            ipv4: { enabled: true, local: '10.255.1.1', remote: '10.255.1.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: '', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: true, maxPrefix: 0 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e3',
                        source: 'hq2',
                        target: 'br2',
                        data: {
                            ipv4: { enabled: true, local: '10.255.2.1', remote: '10.255.2.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: '', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: true, maxPrefix: 0 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e4',
                        source: 'hq1',
                        target: 'c1',
                        data: {
                            ipv4: { enabled: true, local: '10.0.1.1', remote: '10.0.1.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: 'Lumen2025!', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 1000 },
                            localAs: null
                        }
                    },
                    {
                        id: 'e5',
                        source: 'hq2',
                        target: 'c2',
                        data: {
                            ipv4: { enabled: true, local: '10.0.2.1', remote: '10.0.2.2' },
                            ipv6: { enabled: false },
                            policy: { routeMapIn: '', routeMapOut: '', prefixListIn: '', prefixListOut: '' },
                            security: { md5Password: 'NTT2025!', ttlSecurity: false },
                            timers: { keepalive: 60, holdtime: 180 },
                            advanced: { nextHopSelf: false, maxPrefix: 1000 },
                            localAs: null
                        }
                    }
                ]
            }
        };

        const template = templates[templateId];
        if (!template) {
            this.notify('Template not found', 'error');
            return;
        }

        // Clear existing topology
        this.clearMap();

        // Load template data
        template.nodes.forEach(nodeData => {
            this.topology.nodes.push(nodeData);
            this.cy.add({
                group: 'nodes',
                data: {
                    id: nodeData.id,
                    label: nodeData.label,
                    type: nodeData.type,
                    data: nodeData.data
                },
                position: nodeData.position
            });
        });

        template.edges.forEach(edgeData => {
            this.topology.edges.push(edgeData);
            this.cy.add({
                group: 'edges',
                data: {
                    id: edgeData.id,
                    source: edgeData.source,
                    target: edgeData.target,
                    label: this.generateEdgeLabel(edgeData.source, edgeData.target),
                    data: edgeData.data
                }
            });
        });

        // Update canvas state
        document.getElementById('canvas-container').classList.add('has-nodes');

        // Close modal and notify
        this.closeTemplateLibrary();
        this.notify(`Loaded ${templateId} template successfully`, 'success');
    },

    // Beginner/Expert Mode Toggle
    toggleUserMode() {
        if (this.userMode === 'beginner') {
            this.userMode = 'expert';
            document.body.classList.remove('beginner-mode');
            document.getElementById('mode-toggle-text').textContent = '🔧 Expert Mode';
            document.getElementById('mode-description').textContent = 'Full interface with all advanced options';
            localStorage.setItem('bgp-tool-mode', 'expert');
            this.notify('Switched to Expert Mode - All features unlocked', 'success');
        } else {
            this.userMode = 'beginner';
            document.body.classList.add('beginner-mode');
            document.getElementById('mode-toggle-text').textContent = '🎓 Beginner Mode';
            document.getElementById('mode-description').textContent = 'Simplified interface with essential options only';
            localStorage.setItem('bgp-tool-mode', 'beginner');
            this.notify('Switched to Beginner Mode - Simplified interface', 'success');
        }
    },

    initUserMode() {
        // Load saved mode from localStorage
        const savedMode = localStorage.getItem('bgp-tool-mode') || 'beginner';
        this.userMode = savedMode;

        if (this.userMode === 'beginner') {
            document.body.classList.add('beginner-mode');
            document.getElementById('mode-toggle-text').textContent = '🎓 Beginner Mode';
            document.getElementById('mode-description').textContent = 'Simplified interface with essential options only';
        } else {
            document.getElementById('mode-toggle-text').textContent = '🔧 Expert Mode';
            document.getElementById('mode-description').textContent = 'Full interface with all advanced options';
        }
    },

    saveNodeConfig() {
        if (!this.selectedNode) return;

        const data = this.selectedNode.data();
        data.data.asn = parseInt(document.getElementById('node-asn').value);
        data.data.routerId = document.getElementById('node-router-id').value;
        data.data.vendor = document.getElementById('node-vendor').value;
        data.label = `${data.label.split(' (AS')[0]} (AS${data.data.asn})`;

        this.selectedNode.data(data);
        this.closeModal();
        this.notify('Node saved', 'success');
    },

    // Phase 3.1: Network Advertisement Functions
    addNetwork() {
        if (!this.selectedNode) return;

        const prefixInput = document.getElementById('node-network-prefix');
        const prefix = prefixInput.value.trim();

        // Basic validation for IPv4/IPv6 CIDR
        const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}\/\d{1,2}$/;
        const ipv6Regex = /^([0-9a-fA-F:]+)\/\d{1,3}$/;

        if (!prefix) {
            this.notify('Please enter a prefix', 'error');
            return;
        }

        if (!ipv4Regex.test(prefix) && !ipv6Regex.test(prefix)) {
            this.notify('Invalid prefix format. Use CIDR notation (e.g., 192.0.2.0/24 or 2001:db8::/32)', 'error');
            return;
        }

        const data = this.selectedNode.data();
        if (!data.data.networks) {
            data.data.networks = [];
        }

        // Check for duplicate
        if (data.data.networks.includes(prefix)) {
            this.notify('Network already added', 'error');
            return;
        }

        data.data.networks.push(prefix);
        this.selectedNode.data(data);
        prefixInput.value = '';
        this.updateNetworksList();
        this.notify(`Added ${prefix}`, 'success');
    },

    removeNetwork(index) {
        if (!this.selectedNode) return;

        const data = this.selectedNode.data();
        const removed = data.data.networks.splice(index, 1)[0];
        this.selectedNode.data(data);
        this.updateNetworksList();
        this.notify(`Removed ${removed}`, 'success');
    },

    updateNetworksList() {
        if (!this.selectedNode) return;

        const data = this.selectedNode.data();
        const networks = data.data.networks || [];
        const container = document.getElementById('node-networks-list');

        if (networks.length === 0) {
            container.innerHTML = '<div style="color: #9e9e9e; font-style: italic; padding: 10px;">No networks configured</div>';
            return;
        }

        container.innerHTML = networks.map((prefix, idx) => `
            <div class="network-item">
                <span class="network-prefix">${prefix}</span>
                <button class="network-delete" onclick="BGPApp.removeNetwork(${idx})">🗑️ Remove</button>
            </div>
        `).join('');
    },

    selectNode(node) {
        this.selectedNode = node;
        this.updateLookingGlass(node);
    },

    updateLookingGlass(node) {
        const data = node.data();
        let summaryHtml = `
            <div class="summary-section">
                <h4>Node Information</h4>
                <div class="summary-item"><strong>Type:</strong> ${data.type}</div>
                <div class="summary-item"><strong>ASN:</strong> ${data.data.asn}</div>
                <div class="summary-item"><strong>Router ID:</strong> ${data.data.routerId}</div>
                <div class="summary-item"><strong>Vendor:</strong> ${data.data.vendor}</div>
            </div>
        `;

        // Carrier Communities Display
        if (data.type === 'carrier' && data.data.carrier) {
            const carrierInfo = this.CARRIER_DATABASE[data.data.carrier];
            if (carrierInfo && carrierInfo.communities) {
                summaryHtml += `<div class="summary-section"><h4>BGP Communities</h4>`;
                summaryHtml += `<table style="width:100%; font-size:12px; border-collapse:collapse;">`;
                summaryHtml += `<tr style="background:#1e1e1e;"><th style="padding:6px; text-align:left;">Purpose</th><th style="padding:6px; text-align:left;">Community</th></tr>`;
                Object.entries(carrierInfo.communities).forEach(([purpose, value]) => {
                    summaryHtml += `<tr style="border-bottom:1px solid #3e3e42;">`;
                    summaryHtml += `<td style="padding:6px;">${purpose.replace(/_/g, ' ')}</td>`;
                    summaryHtml += `<td style="padding:6px; font-family:monospace;">${value}</td></tr>`;
                });
                summaryHtml += `</table></div>`;
            }
        }

        document.getElementById('summary-content').innerHTML = summaryHtml;
        this.updateRIBView(node);
        this.updateConfigView(node);
    },

    updateConfigView(node) {
        const configContent = document.getElementById('config-content');

        if (!node) {
            configContent.innerHTML = '<div class="info-box">No router selected</div>';
            return;
        }

        const data = node.data();

        if (data.type !== 'router') {
            configContent.innerHTML = '<div class="info-box">⚠️ Select a router to view configuration<br><small>Carriers do not have configuration templates</small></div>';
            return;
        }

        // Check if we have a cached config and it's still valid
        const cacheKey = `${node.id()}-${this.simulationRun}-${data.data.lastModified || ''}`;
        if (this.configCache && this.configCache.key === cacheKey) {
            configContent.textContent = this.configCache.config;
            return;
        }

        // Generate config based on vendor
        let config = '';
        try {
            switch (data.data.vendor) {
                case 'Cisco':
                    config = this.generateCiscoConfig(node, false);
                    break;
                case 'Cisco-NXOS':
                    config = this.generateCiscoNXOSConfig(node, false);
                    break;
                case 'Juniper':
                    config = this.generateJuniperConfig(node, false);
                    break;
                case 'VyOS':
                    config = this.generateVyOSConfig(node, false);
                    break;
                case 'Aruba':
                    config = this.generateArubaConfig(node, false);
                    break;
                default:
                    config = `! Unknown vendor: ${data.data.vendor}\n! Configuration preview not available\n! Supported vendors: Cisco IOS/IOS-XE, Cisco NX-OS, Juniper JunOS, VyOS, Aruba AOS-CX`;
            }

            // Cache the generated config
            this.configCache = {
                key: cacheKey,
                config: config
            };

            configContent.textContent = config;
        } catch (error) {
            configContent.innerHTML = `<div class="info-box" style="background: #e57373;">⚠️ Error generating configuration: ${error.message}</div>`;
            console.error('Config generation error:', error);
        }
    },

    updateRIBView(node) {
        const data = node.data();
        let ribHtml = '';

        if (!data.data.rib || data.data.rib.length === 0) {
            ribHtml = '<div class="info-box">No routes in RIB. Run simulation to populate.</div>';
        } else {
            data.data.rib.forEach((route, idx) => {
                const isBest = route.best;
                const isModified = route.modifiedBy;
                const routeData = JSON.stringify({
                    prefix: route.prefix,
                    sourceNodeId: route.sourceNodeId,
                    targetNodeId: data.id,
                    asPath: route.as_path
                }).replace(/"/g, '&quot;');

                const routeForDecision = JSON.stringify(route).replace(/"/g, '&quot;');
                const routerLabel = data.label;

                ribHtml += `
                    <div class="rib-entry ${isBest ? 'best' : ''} ${isModified ? 'modified' : ''} ${route.locallyOriginated ? 'originated' : ''}"
                         style="position: relative;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div style="flex: 1; cursor: pointer;" onclick='BGPApp.highlightRoutePath(${routeData})' title="Click to highlight path">
                                <strong>${route.prefix}</strong> ${isBest ? '⭐ BEST' : ''} ${route.locallyOriginated ? '📡 LOCAL' : ''} ${route.carrierOwned ? '<span class="attribute-tag" style="background:#9c27b0;">CARRIER</span>' : ''} ${route.customCarrier ? '<span class="attribute-tag" style="background:#ff9800;">CUSTOM</span>' : ''}
                            </div>
                            <button class="btn btn-primary btn-small"
                                    onclick='BGPApp.showDecisionProcess(JSON.parse("${routeForDecision}".replace(/&quot;/g, "\"")), "${routerLabel}")'
                                    style="padding: 2px 8px; font-size: 10px; margin-left: 10px;"
                                    title="Show why this path was selected">
                                🔍 Why?
                            </button>
                        </div>
                        <div>Next Hop: ${route.next_hop} | AS Path: ${route.as_path.length > 0 ? route.as_path.join(' ') : 'Local'}</div>
                        <div>
                            <span class="attribute-tag ${route.modifiedBy?.includes('LP') ? 'changed' : ''}">LP: ${route.local_pref}</span>
                            <span class="attribute-tag ${route.modifiedBy?.includes('MED') ? 'changed' : ''}">MED: ${route.med}</span>
                            <span class="attribute-tag">Weight: ${route.weight}</span>
                            <span class="attribute-tag">Origin: ${route.origin}</span>
                            ${route.communities && route.communities.length > 0 ? route.communities.map(c => `<span class="community-badge">${c}</span>`).join('') : ''}
                        </div>
                        ${route.modifiedBy ? `<div class="route-map-impact">🗺️ Modified by route-map: ${route.modifiedBy.join(', ')}</div>` : ''}
                    </div>
                `;
            });
        }

        document.getElementById('rib-content').innerHTML = ribHtml;
    },

    // ========== Simulation ==========

    runSimulation() {
        this.notify('Running BGP simulation...');
        this.simulationRun = true;

        // Clear config cache since simulation affects configuration
        this.configCache = null;

        // Clear RIBs and edge route tracking
        this.cy.nodes().forEach(node => {
            const data = node.data();
            data.data.rib = [];
            node.data(data);
        });

        this.cy.edges().forEach(edge => {
            const data = edge.data();
            data.data.routes = [];
            edge.data(data);
            // Remove previous simulation classes
            edge.removeClass('established best-path backup-path filtered-path');
        });

        this.injectCarrierRoutes();
        this.injectNetworkRoutes();  // Phase 3.1: Inject configured networks
        this.propagateRoutes();
        this.runBestPathSelection();

        // Phase 3.3: Apply visual styling to edges
        this.applyEdgeVisualization();

        if (this.selectedNode) {
            this.updateLookingGlass(this.selectedNode);
        }

        this.notify('Simulation complete! Check RIB tab.', 'success');
    },

    injectCarrierRoutes() {
        const carriers = this.cy.nodes('[type = "carrier"]');
        carriers.forEach(carrier => {
            const data = carrier.data();
            const carrierName = data.data.carrier;
            const carrierInfo = this.CARRIER_DATABASE[carrierName];
            data.data.rib = [];

            if (carrierName === 'Custom' && data.data.customPrefixes) {
                // Handle custom carriers
                data.data.customPrefixes.forEach(prefix => {
                    data.data.rib.push({
                        prefix: prefix,
                        next_hop: data.data.routerId,
                        as_path: [data.data.asn],
                        local_pref: 100,
                        med: 0,
                        origin: 'IGP',
                        weight: 0,
                        communities: data.data.customCommunities ?
                            data.data.customCommunities.split(',').map(c => c.trim()) : [],
                        best: false,
                        modifiedBy: null,
                        carrierOwned: true,
                        customCarrier: true
                    });
                });
            } else if (carrierInfo && carrierInfo.prefixes) {
                // Use carrier-specific prefixes from CARRIER_DATABASE
                carrierInfo.prefixes.forEach(prefix => {
                    data.data.rib.push({
                        prefix: prefix,
                        next_hop: data.data.routerId,
                        as_path: [data.data.asn],
                        local_pref: 100,
                        med: 0,
                        origin: 'IGP',
                        weight: 0,
                        communities: [],
                        best: false,
                        modifiedBy: null,
                        carrierOwned: true
                    });
                });
            } else {
                // Fallback for unknown carriers
                data.data.rib = [
                    {
                        prefix: '8.8.8.0/24',
                        next_hop: data.data.routerId,
                        as_path: [data.data.asn, 15169],
                        local_pref: 100,
                        med: 0,
                        origin: 'IGP',
                        weight: 0,
                        communities: [],
                        best: false,
                        modifiedBy: null
                    },
                    {
                        prefix: '1.1.1.0/24',
                        next_hop: data.data.routerId,
                        as_path: [data.data.asn, 13335],
                        local_pref: 100,
                        med: 0,
                        origin: 'IGP',
                        weight: 0,
                        communities: [],
                        best: false,
                        modifiedBy: null
                    }
                ];
            }
            carrier.data(data);
        });
    },

    // Phase 3.1: Inject network routes from router configurations
    injectNetworkRoutes() {
        const routers = this.cy.nodes('[type = "router"]');
        routers.forEach(router => {
            const data = router.data();
            if (!data.data.networks || data.data.networks.length === 0) return;

            // Create routes for each configured network
            data.data.networks.forEach(prefix => {
                const route = {
                    prefix: prefix,
                    next_hop: '0.0.0.0',  // Locally originated
                    as_path: [],  // Empty AS path for local routes
                    local_pref: 100,
                    med: 0,
                    origin: 'IGP',
                    weight: 32768,  // Highest weight for locally originated routes
                    communities: [],
                    best: true,  // Local routes are always best
                    modifiedBy: null,
                    locallyOriginated: true  // Mark as locally originated
                };

                if (!data.data.rib) {
                    data.data.rib = [];
                }
                data.data.rib.push(route);
            });

            router.data(data);
        });
    },

    propagateRoutes() {
        // Iterate until convergence (max 10 rounds to prevent infinite loops)
        for (let round = 0; round < 10; round++) {
            let newRoutes = 0;
            this.cy.edges().forEach(edge => {
                const edgeData = edge.data();
                const sourceNode = this.cy.getElementById(edgeData.source);
                const targetNode = this.cy.getElementById(edgeData.target);
                const beforeCount = sourceNode.data().data.rib.length + targetNode.data().data.rib.length;
                this.propagateRoutesAcrossEdge(sourceNode, targetNode, edgeData);
                this.propagateRoutesAcrossEdge(targetNode, sourceNode, edgeData);
                const afterCount = sourceNode.data().data.rib.length + targetNode.data().data.rib.length;
                newRoutes += (afterCount - beforeCount);
            });
            if (newRoutes === 0) break; // Converged
        }
    },

    propagateRoutesAcrossEdge(fromNode, toNode, edgeData) {
        const fromData = fromNode.data();
        const toData = toNode.data();

        if (!fromData.data.rib || fromData.data.rib.length === 0) return;

        // Phase 3.3: Initialize edge route tracking
        const edge = this.cy.edges().filter(e => e.data().id === edgeData.id).first();
        if (!edgeData.data.routes) {
            edgeData.data.routes = [];
        }

        fromData.data.rib.forEach(route => {
            let newRoute = JSON.parse(JSON.stringify(route));
            newRoute.as_path = [fromData.data.asn, ...newRoute.as_path];
            newRoute.next_hop = edgeData.data.ipv4.localIp;
            newRoute.sourceNodeId = fromData.id;
            newRoute.targetNodeId = toData.id;

            // AS-path loop prevention - reject if receiving router's ASN is already in path
            if (newRoute.as_path.includes(toData.data.asn)) return;

            // Determine eBGP vs iBGP based on ASN comparison
            newRoute.path_type = (fromData.data.asn !== toData.data.asn) ? 'eBGP' : 'iBGP';

            // Apply route-map IN on receiving side
            let denied = false;
            if (edgeData.data.policy.routeMapIn) {
                newRoute = this.applyRouteMap(newRoute, edgeData.data.policy.routeMapIn, 'in');
                if (newRoute === null) {
                    denied = true;
                    // Track filtered routes on edge
                    edgeData.data.routes.push({
                        prefix: route.prefix,
                        status: 'filtered',
                        direction: `${fromData.id}->${toData.id}`
                    });
                    return; // Route denied
                }
            }

            newRoute = this.applyCarrierCommunities(newRoute, toData.data.asn);
            if (newRoute.blackhole) {
                edgeData.data.routes.push({
                    prefix: route.prefix,
                    status: 'blackholed',
                    direction: `${fromData.id}->${toData.id}`
                });
                return;
            }

            // Track accepted routes on edge
            edgeData.data.routes.push({
                prefix: newRoute.prefix,
                as_path: newRoute.as_path.join(' '),
                status: 'accepted',
                direction: `${fromData.id}->${toData.id}`,
                sourceNodeId: fromData.id,
                targetNodeId: toData.id
            });

            toData.data.rib.push(newRoute);
        });

        if (edge.length > 0) {
            edge.data(edgeData);
        }
        toNode.data(toData);
    },

    applyRouteMap(route, rmName, direction) {
        const rm = this.policyObjects.routeMaps[rmName];
        if (!rm) return route;

        let modified = [];

        for (const stmt of rm.statements) {
            // Check match conditions
            let matchPassed = true;

            if (stmt.match.prefixList) {
                const pl = this.policyObjects.prefixLists[stmt.match.prefixList];
                if (pl && !this.matchPrefixList(route.prefix, pl)) {
                    matchPassed = false;
                }
            }

            if (stmt.match.asPath) {
                const apl = this.policyObjects.asPathLists[stmt.match.asPath];
                if (apl && !this.matchAsPath(route.as_path, apl)) {
                    matchPassed = false;
                }
            }

            if (matchPassed) {
                if (stmt.action === 'deny') {
                    return null; // Route denied
                }

                // Apply set actions
                if (stmt.set.localPref !== null) {
                    route.local_pref = stmt.set.localPref;
                    modified.push('LP=' + stmt.set.localPref);
                }

                if (stmt.set.med !== null) {
                    route.med = stmt.set.med;
                    modified.push('MED=' + stmt.set.med);
                }

                if (stmt.set.prependCount > 0) {
                    const prependAsn = route.as_path[0];
                    for (let i = 0; i < stmt.set.prependCount; i++) {
                        route.as_path.unshift(prependAsn);
                    }
                    modified.push('Prepend x' + stmt.set.prependCount);
                }

                if (stmt.set.community) {
                    if (!route.communities) route.communities = [];
                    route.communities.push(stmt.set.community);
                    modified.push('Community=' + stmt.set.community);
                }

                route.modifiedBy = modified.length > 0 ? modified : null;
                return route; // Matched and permitted
            }
        }

        return route; // No match, implicit permit
    },

    matchPrefixList(prefix, pl) {
        const [routeNetwork, routeMaskStr] = prefix.split('/');
        const routeMask = parseInt(routeMaskStr);
        const routeIP = this.ipToLong(routeNetwork);

        for (const entry of pl.entries) {
            const [entryNetwork, entryMaskStr] = entry.prefix.split('/');
            const entryMask = parseInt(entryMaskStr);
            const entryIP = this.ipToLong(entryNetwork);

            // Check if route falls within the prefix-list entry's network
            const entryNetMask = entryMask === 0 ? 0 : (0xFFFFFFFF << (32 - entryMask)) >>> 0;
            if ((routeIP & entryNetMask) !== (entryIP & entryNetMask)) continue;

            // Check ge/le constraints
            const ge = entry.ge ? parseInt(entry.ge) : entryMask;
            const le = entry.le ? parseInt(entry.le) : (entry.ge ? 32 : entryMask);

            if (routeMask >= ge && routeMask <= le) {
                return entry.action === 'permit';
            }
        }
        return false;
    },

    ipToLong(ip) {
        return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet), 0) >>> 0;
    },

    matchAsPath(asPath, apl) {
        const pathStr = asPath.join('_');
        for (const entry of apl.entries) {
            const regex = new RegExp(entry.regex);
            if (regex.test(pathStr)) {
                return entry.action === 'permit';
            }
        }
        return false;
    },

    applyCarrierCommunities(route, localAsn) {
        const asnStr = localAsn.toString();
        if (!this.carrierCommunities[asnStr]) return route;

        const carrierRules = this.carrierCommunities[asnStr];
        route.communities.forEach(community => {
            if (carrierRules[community]) {
                const rule = carrierRules[community];
                switch (rule.action) {
                    case 'local_pref':
                        route.local_pref = rule.value;
                        break;
                    case 'prepend':
                        for (let i = 0; i < rule.value; i++) {
                            route.as_path.unshift(localAsn);
                        }
                        break;
                    case 'blackhole':
                        route.blackhole = true;
                        break;
                }
            }
        });

        return route;
    },

    runBestPathSelection() {
        this.cy.nodes('[type = "router"]').forEach(node => {
            const data = node.data();
            if (!data.data.rib || data.data.rib.length === 0) return;

            const routesByPrefix = {};
            data.data.rib.forEach(route => {
                if (!routesByPrefix[route.prefix]) routesByPrefix[route.prefix] = [];
                routesByPrefix[route.prefix].push(route);
            });

            Object.keys(routesByPrefix).forEach(prefix => {
                const routes = routesByPrefix[prefix];
                const bestRoute = this.selectBestPath(routes);
                routes.forEach(r => { r.best = (r === bestRoute); });
            });

            node.data(data);
        });
    },

    selectBestPath(routes) {
        if (routes.length === 1) return routes[0];

        let candidates = [...routes];

        // Step 1: Weight (Cisco-specific)
        const maxWeight = Math.max(...candidates.map(r => r.weight));
        candidates = candidates.filter(r => r.weight === maxWeight);
        if (candidates.length === 1) return candidates[0];

        // Step 2: Local Preference
        const maxLocalPref = Math.max(...candidates.map(r => r.local_pref));
        candidates = candidates.filter(r => r.local_pref === maxLocalPref);
        if (candidates.length === 1) return candidates[0];

        // Step 3: Locally originated (skip for now - handled by weight)

        // Step 4: AS-Path Length
        const minAsPath = Math.min(...candidates.map(r => r.as_path.length));
        candidates = candidates.filter(r => r.as_path.length === minAsPath);
        if (candidates.length === 1) return candidates[0];

        // Step 5: Origin Code
        const originPref = { 'IGP': 0, 'EGP': 1, 'Incomplete': 2 };
        const bestOrigin = Math.min(...candidates.map(r => originPref[r.origin]));
        candidates = candidates.filter(r => originPref[r.origin] === bestOrigin);
        if (candidates.length === 1) return candidates[0];

        // Step 6: MED - only compare routes from same neighboring AS (RFC 4271)
        const firstASes = candidates.map(r => r.as_path.length > 0 ? r.as_path[0] : null);
        const allSameAS = firstASes.every(as => as === firstASes[0]);
        if (allSameAS && firstASes[0] !== null) {
            const minMed = Math.min(...candidates.map(r => r.med));
            candidates = candidates.filter(r => r.med === minMed);
            if (candidates.length === 1) return candidates[0];
        }

        // Step 7: eBGP over iBGP (NEW - was missing!)
        const ebgpRoutes = candidates.filter(r => r.path_type === 'eBGP');
        if (ebgpRoutes.length > 0) {
            candidates = ebgpRoutes;
        }
        if (candidates.length === 1) return candidates[0];

        // Step 8+: IGP metric, router-ID, etc. (simplified - just return first)
        return candidates[0];
    },

    selectBestPathWithDecision(routes, prefix, routerId) {
        // Enhanced version that tracks decision process for visualization
        if (routes.length === 1) {
            return {
                winner: routes[0],
                steps: [
                    {
                        step: 1,
                        name: 'Single Route',
                        description: 'Only one route available',
                        result: 'Selected by default',
                        status: 'winner',
                        routes: [routes[0]]
                    }
                ]
            };
        }

        const steps = [];
        let candidates = [...routes];
        let stepNum = 1;

        // Step 1: Weight
        const weights = candidates.map(r => r.weight);
        const maxWeight = Math.max(...weights);
        const weightFiltered = candidates.filter(r => r.weight === maxWeight);
        steps.push({
            step: stepNum++,
            name: 'Weight',
            description: 'Higher weight is preferred (Cisco-specific)',
            result: weights.every(w => w === weights[0]) ? 'All equal' : `Selected weight ${maxWeight}`,
            status: weightFiltered.length === candidates.length ? 'failed' : 'passed',
            comparison: candidates.map(r => ({ route: r, value: r.weight })),
            selected: weightFiltered.length
        });
        candidates = weightFiltered;
        if (candidates.length === 1) {
            steps[steps.length - 1].status = 'winner';
            return { winner: candidates[0], steps };
        }

        // Step 2: Local Preference
        const localPrefs = candidates.map(r => r.local_pref);
        const maxLocalPref = Math.max(...localPrefs);
        const lpFiltered = candidates.filter(r => r.local_pref === maxLocalPref);
        steps.push({
            step: stepNum++,
            name: 'Local Preference',
            description: 'Higher local preference is preferred',
            result: localPrefs.every(lp => lp === localPrefs[0]) ? 'All equal' : `Selected local-pref ${maxLocalPref}`,
            status: lpFiltered.length === candidates.length ? 'failed' : 'passed',
            comparison: candidates.map(r => ({ route: r, value: r.local_pref })),
            selected: lpFiltered.length
        });
        candidates = lpFiltered;
        if (candidates.length === 1) {
            steps[steps.length - 1].status = 'winner';
            return { winner: candidates[0], steps };
        }

        // Step 3: AS-Path Length
        const asPathLengths = candidates.map(r => r.as_path.length);
        const minAsPath = Math.min(...asPathLengths);
        const asPathFiltered = candidates.filter(r => r.as_path.length === minAsPath);
        steps.push({
            step: stepNum++,
            name: 'AS-Path Length',
            description: 'Shorter AS path is preferred',
            result: asPathLengths.every(len => len === asPathLengths[0]) ? 'All equal' : `Selected length ${minAsPath}`,
            status: asPathFiltered.length === candidates.length ? 'failed' : 'passed',
            comparison: candidates.map(r => ({ route: r, value: r.as_path.length })),
            selected: asPathFiltered.length
        });
        candidates = asPathFiltered;
        if (candidates.length === 1) {
            steps[steps.length - 1].status = 'winner';
            return { winner: candidates[0], steps };
        }

        // Step 4: Origin Code
        const originPref = { 'IGP': 0, 'EGP': 1, 'Incomplete': 2 };
        const origins = candidates.map(r => originPref[r.origin]);
        const bestOrigin = Math.min(...origins);
        const originFiltered = candidates.filter(r => originPref[r.origin] === bestOrigin);
        steps.push({
            step: stepNum++,
            name: 'Origin Code',
            description: 'IGP > EGP > Incomplete',
            result: origins.every(o => o === origins[0]) ? 'All equal' : `Selected ${Object.keys(originPref).find(k => originPref[k] === bestOrigin)}`,
            status: originFiltered.length === candidates.length ? 'failed' : 'passed',
            comparison: candidates.map(r => ({ route: r, value: r.origin })),
            selected: originFiltered.length
        });
        candidates = originFiltered;
        if (candidates.length === 1) {
            steps[steps.length - 1].status = 'winner';
            return { winner: candidates[0], steps };
        }

        // Step 5: MED - only compare routes from same neighboring AS (RFC 4271)
        const firstASes = candidates.map(r => r.as_path.length > 0 ? r.as_path[0] : null);
        const allSameAS = firstASes.every(as => as === firstASes[0]);
        let medFiltered = candidates;
        if (allSameAS && firstASes[0] !== null) {
            const meds = candidates.map(r => r.med);
            const minMed = Math.min(...meds);
            medFiltered = candidates.filter(r => r.med === minMed);
            steps.push({
                step: stepNum++,
                name: 'MED (Metric)',
                description: 'Lower MED is preferred (same-AS only)',
                result: meds.every(m => m === meds[0]) ? 'All equal' : `Selected MED ${minMed}`,
                status: medFiltered.length === candidates.length ? 'failed' : 'passed',
                comparison: candidates.map(r => ({ route: r, value: r.med })),
                selected: medFiltered.length
            });
        } else {
            steps.push({
                step: stepNum++,
                name: 'MED (Metric)',
                description: 'Lower MED is preferred (same-AS only)',
                result: 'Routes from different ASes - skipped',
                status: 'failed',
                comparison: candidates.map(r => ({ route: r, value: `AS${r.as_path[0] || 'local'}` })),
                selected: candidates.length
            });
        }
        candidates = medFiltered;
        if (candidates.length === 1) {
            steps[steps.length - 1].status = 'winner';
            return { winner: candidates[0], steps };
        }

        // Step 6: eBGP over iBGP
        const ebgpRoutes = candidates.filter(r => r.path_type === 'eBGP');
        const ibgpRoutes = candidates.filter(r => r.path_type === 'iBGP');
        if (ebgpRoutes.length > 0 && ibgpRoutes.length > 0) {
            steps.push({
                step: stepNum++,
                name: 'eBGP over iBGP',
                description: 'Prefer external BGP routes over internal',
                result: 'Selected eBGP routes',
                status: 'passed',
                comparison: candidates.map(r => ({ route: r, value: r.path_type })),
                selected: ebgpRoutes.length
            });
            candidates = ebgpRoutes;
            if (candidates.length === 1) {
                steps[steps.length - 1].status = 'winner';
                return { winner: candidates[0], steps };
            }
        } else {
            steps.push({
                step: stepNum++,
                name: 'eBGP over iBGP',
                description: 'Prefer external BGP routes over internal',
                result: 'All same type',
                status: 'failed',
                comparison: candidates.map(r => ({ route: r, value: r.path_type })),
                selected: candidates.length
            });
        }

        // Final: First route wins (router-ID would be here)
        steps.push({
            step: stepNum++,
            name: 'Tie-breaker',
            description: 'All attributes equal - selected first route',
            result: 'First route selected',
            status: 'winner',
            comparison: [],
            selected: 1
        });

        return { winner: candidates[0], steps };
    },

    // Phase 3.3: Apply visual styling to edges based on route status
    applyEdgeVisualization() {
        // Collect all best paths from all routers
        const bestPaths = new Set();
        this.cy.nodes('[type = "router"]').forEach(node => {
            const data = node.data();
            if (!data.data.rib) return;

            data.data.rib.forEach(route => {
                if (route.best) {
                    // Create a key that identifies this route's path
                    const pathKey = `${route.prefix}:${route.sourceNodeId}:${data.id}`;
                    bestPaths.add(pathKey);
                }
            });
        });

        // Apply styling to edges
        this.cy.edges().forEach(edge => {
            const edgeData = edge.data();
            if (!edgeData.data.routes || edgeData.data.routes.length === 0) {
                edge.addClass('established');
                return;
            }

            let hasBestPath = false;
            let hasBackupPath = false;
            let hasFilteredPath = false;
            let asPathsOnEdge = [];

            edgeData.data.routes.forEach(routeInfo => {
                if (routeInfo.status === 'filtered' || routeInfo.status === 'blackholed') {
                    hasFilteredPath = true;
                } else if (routeInfo.status === 'accepted') {
                    const pathKey = `${routeInfo.prefix}:${routeInfo.sourceNodeId}:${routeInfo.targetNodeId}`;
                    if (bestPaths.has(pathKey)) {
                        hasBestPath = true;
                    } else {
                        hasBackupPath = true;
                    }

                    // Collect AS paths for label
                    if (routeInfo.as_path && !asPathsOnEdge.includes(routeInfo.as_path)) {
                        asPathsOnEdge.push(routeInfo.as_path);
                    }
                }
            });

            // Apply classes in order of priority
            if (hasBestPath) {
                edge.addClass('best-path');
            } else if (hasBackupPath) {
                edge.addClass('backup-path');
            } else if (hasFilteredPath) {
                edge.addClass('filtered-path');
            } else {
                edge.addClass('established');
            }

            // Update edge label with AS paths (show first one if multiple)
            if (asPathsOnEdge.length > 0) {
                const originalLabel = edgeData.label.split('\n')[0]; // Get original label
                edgeData.label = `${originalLabel}\n${asPathsOnEdge[0]}`;
                if (asPathsOnEdge.length > 1) {
                    edgeData.label += ` +${asPathsOnEdge.length - 1}`;
                }
                edge.data(edgeData);
            }
        });
    },

    // Phase 3.3: Highlight path when RIB entry is clicked
    highlightRoutePath(routeInfo) {
        // Clear previous highlights
        this.cy.edges().removeClass('highlighted');
        this.cy.nodes().removeClass('highlighted');

        if (!routeInfo || !routeInfo.prefix || !routeInfo.asPath) {
            return;
        }

        // Find edges that carry this specific route
        const edgesToHighlight = [];

        this.cy.edges().forEach(edge => {
            const edgeData = edge.data();
            if (!edgeData.data.routes) return;

            // Check if this edge carries the route
            const matchingRoute = edgeData.data.routes.find(r =>
                r.prefix === routeInfo.prefix &&
                r.status === 'accepted' &&
                r.as_path === routeInfo.asPath.join(' ')
            );

            if (matchingRoute) {
                edgesToHighlight.push(edge);
            }
        });

        // Highlight the edges and connected nodes
        if (edgesToHighlight.length > 0) {
            edgesToHighlight.forEach(edge => {
                edge.addClass('highlighted');
                // Also highlight connected nodes
                const srcNode = this.cy.getElementById(edge.data().source);
                const tgtNode = this.cy.getElementById(edge.data().target);
                srcNode.addClass('highlighted');
                tgtNode.addClass('highlighted');
            });

            this.notify(`Highlighted path for ${routeInfo.prefix}`, 'info');

            // Auto-clear after 5 seconds
            setTimeout(() => {
                this.cy.edges().removeClass('highlighted');
                this.cy.nodes().removeClass('highlighted');
            }, 5000);
        } else {
            this.notify('No path found for this route', 'error');
        }
    },

    // ========== Utility ==========

    switchTab(tabName) {
        document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
        event.target.classList.add('active');
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
        document.getElementById(`${tabName}-tab`).classList.add('active');

        // Refresh config tab when switched to
        if (tabName === 'config' && this.selectedNode) {
            this.updateConfigView(this.selectedNode);
        }
    },

    // Phase 3.2: Multi-Vendor Config Generator
    exportConfig() {
        const routers = this.cy.nodes().filter(n => n.data().type === 'router');

        if (routers.length === 0) {
            this.notify('No routers to export', 'error');
            return;
        }

        // Create selection modal
        const routerOptions = routers.map(r => {
            const data = r.data();
            return `<option value="${data.id}">${data.label} (${data.data.vendor})</option>`;
        }).join('');

        const modal = document.createElement('div');
        modal.className = 'modal active';
        modal.innerHTML = `
            <div class="modal-content" style="max-width: 500px;">
                <h3>📥 Export Router Configuration</h3>
                <div class="modal-section">
                    <div class="form-group">
                        <label>Select Router</label>
                        <select id="export-router-select">${routerOptions}</select>
                    </div>
                    <div class="checkbox-group" style="margin-top: 15px; padding: 12px; background: #1a3a1a; border-radius: 4px; border: 2px solid #66bb6a;">
                        <input type="checkbox" id="export-production-mode" checked>
                        <label for="export-production-mode" style="color: #81c784; font-weight: bold;">
                            🛡️ Production Hardening Mode
                        </label>
                        <div style="font-size: 11px; color: #9e9e9e; margin-top: 5px; margin-left: 22px;">
                            Includes security & stability features: TTL Security, soft-reconfiguration, log-neighbor-changes, prefix-list filtering
                        </div>
                    </div>
                </div>
                <div class="modal-actions">
                    <button class="btn btn-primary" onclick="BGPApp.generateConfig()">Generate Config</button>
                    <button class="btn btn-danger" onclick="this.closest('.modal').remove()">Cancel</button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    },

    generateConfig() {
        const routerId = document.getElementById('export-router-select').value;
        const routerNode = this.cy.getElementById(routerId);
        const routerData = routerNode.data();
        const productionMode = document.getElementById('export-production-mode')?.checked || false;

        let config = '';
        let fileExtension = 'cfg';

        switch (routerData.data.vendor) {
            case 'Cisco':
                config = this.generateCiscoConfig(routerNode, productionMode);
                break;
            case 'Cisco-NXOS':
                config = this.generateCiscoNXOSConfig(routerNode, productionMode);
                break;
            case 'Juniper':
                config = this.generateJuniperConfig(routerNode, productionMode);
                fileExtension = 'conf';
                break;
            case 'VyOS':
                config = this.generateVyOSConfig(routerNode, productionMode);
                fileExtension = 'sh';
                break;
            case 'Aruba':
                config = this.generateArubaConfig(routerNode, productionMode);
                break;
            default:
                this.notify('Unknown vendor', 'error');
                return;
        }

        // Download config
        const blob = new Blob([config], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${routerData.label.replace(/\s/g, '_')}_${routerData.data.vendor}.${fileExtension}`;
        a.click();
        URL.revokeObjectURL(url);

        document.querySelector('.modal').remove();
        this.notify('Configuration exported!', 'success');
    },

    // Enhanced Cisco IOS/IOS-XE Config Generator - Validated Syntax (IOS 15.x+, IOS-XE 17.x+)
    generateCiscoConfig(routerNode, productionMode = false) {
        const data = routerNode.data();
        const edges = this.cy.edges().filter(e =>
            e.data().source === data.id || e.data().target === data.id
        );

        // Helper function to convert CIDR to mask
        const cidrToMask = (cidr) => {
            const [network, bits] = cidr.split('/');
            const maskBits = parseInt(bits);
            const mask = (0xFFFFFFFF << (32 - maskBits)) >>> 0;
            return `${(mask >>> 24) & 0xFF}.${(mask >>> 16) & 0xFF}.${(mask >>> 8) & 0xFF}.${mask & 0xFF}`;
        };

        let config = `!\n! Cisco IOS/IOS-XE BGP Configuration for ${data.label}\n`;
        config += `! Generated by BGP Network Planning Tool\n`;
        config += `! Compatible with IOS 15.x and IOS-XE 17.x\n`;
        if (productionMode) {
            config += `! PRODUCTION HARDENING MODE ENABLED\n`;
            config += `! Includes: TTL Security, Soft-Reconfig, Max-Paths, Log-Neighbor-Changes\n`;
        }
        config += `!\n`;
        config += `hostname ${data.label.replace(/\s/g, '-')}\n!\n`;

        // Collect used policies
        const usedPolicies = new Set();
        const usedPrefixLists = new Set();
        edges.forEach(edge => {
            const edgeData = edge.data();
            if (edgeData.data.policy.routeMapIn) {
                usedPolicies.add(edgeData.data.policy.routeMapIn);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapIn];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
            if (edgeData.data.policy.routeMapOut) {
                usedPolicies.add(edgeData.data.policy.routeMapOut);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapOut];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
        });

        // Prefix Lists (before router bgp)
        if (usedPrefixLists.size > 0) {
            config += `! Prefix Lists\n`;
            usedPrefixLists.forEach(plName => {
                const pl = this.policyObjects.prefixLists[plName];
                if (pl) {
                    pl.entries.forEach((entry, idx) => {
                        const seq = (idx + 1) * 10;
                        let cmd = `ip prefix-list ${plName} seq ${seq} ${entry.action} ${entry.prefix}`;
                        if (entry.ge) cmd += ` ge ${entry.ge}`;
                        if (entry.le) cmd += ` le ${entry.le}`;
                        config += cmd + `\n`;
                    });
                }
            });
            config += `!\n`;
        }

        // Route Maps (before router bgp)
        if (usedPolicies.size > 0) {
            config += `! Route Maps\n`;
            usedPolicies.forEach(rmName => {
                const rm = this.policyObjects.routeMaps[rmName];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        config += `route-map ${rmName} ${stmt.action} ${stmt.seq}\n`;
                        if (stmt.match.prefixList) {
                            config += ` match ip address prefix-list ${stmt.match.prefixList}\n`;
                        }
                        if (stmt.match.asPath) {
                            config += ` match as-path ${stmt.match.asPath}\n`;
                        }
                        if (stmt.set.localPref !== null) {
                            config += ` set local-preference ${stmt.set.localPref}\n`;
                        }
                        if (stmt.set.med !== null) {
                            config += ` set metric ${stmt.set.med}\n`;
                        }
                        if (stmt.set.prependCount > 0) {
                            const asnRepeat = Array(stmt.set.prependCount).fill(data.data.asn).join(' ');
                            config += ` set as-path prepend ${asnRepeat}\n`;
                        }
                        if (stmt.set.community) {
                            config += ` set community ${stmt.set.community}\n`;
                        }
                    });
                }
            });
            config += `!\n`;
        }

        // BGP Process
        config += `! BGP Configuration\n`;
        config += `router bgp ${data.data.asn}\n`;
        config += ` bgp router-id ${data.data.routerId}\n`;
        config += ` bgp log-neighbor-changes\n`;
        config += ` no bgp default ipv4-unicast\n`; // Best practice: explicit activation

        if (productionMode) {
            config += ` !\n ! Production Hardening - Load Balancing\n`;
            config += ` bgp bestpath as-path multipath-relax\n`;
            config += ` maximum-paths 4\n`;
            config += ` maximum-paths ibgp 4\n`;
        }

        // Neighbor definitions (outside address-family)
        config += ` !\n ! Neighbor Definitions\n`;
        edges.forEach(edge => {
            const edgeData = edge.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
            const peerAsn = peerNode.data.asn;
            const isEBGP = peerAsn !== data.data.asn;

            config += ` !\n ! Neighbor: ${peerNode.label}\n`;
            config += ` neighbor ${remoteIp} remote-as ${peerAsn}\n`;
            config += ` neighbor ${remoteIp} description ${peerNode.label}\n`;

            // Production Hardening for iBGP: update-source
            if (productionMode && !isEBGP) {
                config += ` neighbor ${remoteIp} update-source Loopback0\n`;
            }

            // Local-AS with proper flags
            if (edgeData.data.localAs) {
                config += ` neighbor ${remoteIp} local-as ${edgeData.data.localAs} no-prepend replace-as\n`;
            }

            // Security
            if (edgeData.data.security.md5Password) {
                config += ` neighbor ${remoteIp} password 0 ${edgeData.data.security.md5Password}\n`;
            }

            // Production Hardening for eBGP: TTL Security (GTSM)
            if (productionMode && isEBGP) {
                config += ` neighbor ${remoteIp} ttl-security hops 1\n`;
            }

            // Timers
            config += ` neighbor ${remoteIp} timers ${edgeData.data.timers.keepalive} ${edgeData.data.timers.holdtime}\n`;
        });

        // Address-Family IPv4 Unicast
        config += ` !\n ! Address Family IPv4 Unicast\n`;
        config += ` address-family ipv4 unicast\n`;

        // Network advertisements in address-family
        if (data.data.networks && data.data.networks.length > 0) {
            config += `  !\n  ! Network advertisements\n`;
            data.data.networks.forEach(prefix => {
                if (!prefix.includes(':')) { // IPv4 only in this AF
                    const [network, bits] = prefix.split('/');
                    const mask = cidrToMask(prefix);
                    config += `  network ${network} mask ${mask}\n`;
                }
            });
        }

        // Activate neighbors and apply policies in address-family
        edges.forEach(edge => {
            const edgeData = edge.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;

            config += `  !\n  ! Neighbor: ${peerNode.label}\n`;
            config += `  neighbor ${remoteIp} activate\n`;

            // Production Hardening: Soft-reconfiguration inbound
            if (productionMode) {
                config += `  neighbor ${remoteIp} soft-reconfiguration inbound\n`;
            }

            if (edgeData.data.advanced.nextHopSelf) {
                config += `  neighbor ${remoteIp} next-hop-self\n`;
            }

            if (edgeData.data.advanced.maxPrefix > 0) {
                config += `  neighbor ${remoteIp} maximum-prefix ${edgeData.data.advanced.maxPrefix}\n`;
            }

            if (edgeData.data.policy.routeMapIn) {
                config += `  neighbor ${remoteIp} route-map ${edgeData.data.policy.routeMapIn} in\n`;
            }

            if (edgeData.data.policy.routeMapOut) {
                config += `  neighbor ${remoteIp} route-map ${edgeData.data.policy.routeMapOut} out\n`;
            }
        });

        config += ` exit-address-family\n`;

        // Check for IPv6 networks
        const hasIPv6Networks = data.data.networks && data.data.networks.some(p => p.includes(':'));
        if (hasIPv6Networks) {
            config += ` !\n ! Address Family IPv6 Unicast\n`;
            config += ` address-family ipv6 unicast\n`;
            data.data.networks.forEach(prefix => {
                if (prefix.includes(':')) {
                    config += `  network ${prefix}\n`;
                }
            });
            edges.forEach(edge => {
                const edgeData = edge.data();
                const isSource = edgeData.source === data.id;
                const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
                config += `  neighbor ${remoteIp} activate\n`;
            });
            config += ` exit-address-family\n`;
        }

        config += `!\nend\n`;
        config += `!\n! Save configuration\n`;
        config += `! copy running-config startup-config\n`;
        return config;
    },

    // Cisco NX-OS Config Generator - Validated Syntax (NX-OS 9.x+)
    generateCiscoNXOSConfig(routerNode, productionMode = false) {
        const data = routerNode.data();
        const edges = this.cy.edges().filter(e =>
            e.data().source === data.id || e.data().target === data.id
        );

        let config = `!\n! Cisco NX-OS BGP Configuration for ${data.label}\n`;
        config += `! Generated by BGP Network Planning Tool\n`;
        config += `! Compatible with NX-OS 9.x+\n!\n`;
        config += `hostname ${data.label.replace(/\s/g, '-')}\n!\n`;

        // Enable BGP feature
        config += `! Enable BGP feature\n`;
        config += `feature bgp\n!\n`;

        // Collect used policies
        const usedPolicies = new Set();
        const usedPrefixLists = new Set();
        edges.forEach(edge => {
            const edgeData = edge.data();
            if (edgeData.data.policy.routeMapIn) {
                usedPolicies.add(edgeData.data.policy.routeMapIn);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapIn];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
            if (edgeData.data.policy.routeMapOut) {
                usedPolicies.add(edgeData.data.policy.routeMapOut);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapOut];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
        });

        // Prefix Lists
        if (usedPrefixLists.size > 0) {
            config += `! Prefix Lists\n`;
            usedPrefixLists.forEach(plName => {
                const pl = this.policyObjects.prefixLists[plName];
                if (pl) {
                    config += `ip prefix-list ${plName}\n`;
                    pl.entries.forEach((entry, idx) => {
                        const seq = (idx + 1) * 10;
                        let cmd = `  seq ${seq} ${entry.action} ${entry.prefix}`;
                        if (entry.ge) cmd += ` ge ${entry.ge}`;
                        if (entry.le) cmd += ` le ${entry.le}`;
                        config += cmd + `\n`;
                    });
                }
            });
            config += `!\n`;
        }

        // Route Maps
        if (usedPolicies.size > 0) {
            config += `! Route Maps\n`;
            usedPolicies.forEach(rmName => {
                const rm = this.policyObjects.routeMaps[rmName];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        config += `route-map ${rmName} ${stmt.action} ${stmt.seq}\n`;
                        if (stmt.match.prefixList) {
                            config += `  match ip address prefix-list ${stmt.match.prefixList}\n`;
                        }
                        if (stmt.match.asPath) {
                            config += `  match as-path ${stmt.match.asPath}\n`;
                        }
                        if (stmt.set.localPref !== null) {
                            config += `  set local-preference ${stmt.set.localPref}\n`;
                        }
                        if (stmt.set.med !== null) {
                            config += `  set metric ${stmt.set.med}\n`;
                        }
                        if (stmt.set.prependCount > 0) {
                            const asnRepeat = Array(stmt.set.prependCount).fill(data.data.asn).join(' ');
                            config += `  set as-path prepend ${asnRepeat}\n`;
                        }
                        if (stmt.set.community) {
                            config += `  set community ${stmt.set.community}\n`;
                        }
                    });
                }
            });
            config += `!\n`;
        }

        // BGP Configuration
        config += `! BGP Configuration\n`;
        config += `router bgp ${data.data.asn}\n`;
        config += `  router-id ${data.data.routerId}\n`;
        config += `  log-neighbor-changes\n`;

        // Neighbor Template (best practice for NX-OS)
        const hasIBGP = edges.some(e => {
            const edgeData = e.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            return peerNode.data.asn === data.data.asn;
        });

        const hasEBGP = edges.some(e => {
            const edgeData = e.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            return peerNode.data.asn !== data.data.asn;
        });

        // Neighbor configurations
        config += `  !\n  ! Neighbor Configurations\n`;
        edges.forEach(edge => {
            const edgeData = edge.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
            const peerAsn = peerNode.data.asn;
            const isIBGP = peerAsn === data.data.asn;

            config += `  !\n  ! Neighbor: ${peerNode.label}\n`;
            config += `  neighbor ${remoteIp}\n`;
            config += `    remote-as ${peerAsn}\n`;
            config += `    description ${peerNode.label}\n`;

            // Local-AS
            if (edgeData.data.localAs) {
                config += `    local-as ${edgeData.data.localAs} no-prepend replace-as\n`;
            }

            // Security
            if (edgeData.data.security.md5Password) {
                config += `    password 0 ${edgeData.data.security.md5Password}\n`;
            }

            // Timers
            config += `    timers ${edgeData.data.timers.keepalive} ${edgeData.data.timers.holdtime}\n`;

            // Address-family configuration
            config += `    address-family ipv4 unicast\n`;

            if (edgeData.data.advanced.nextHopSelf && isIBGP) {
                config += `      next-hop-self\n`;
            }

            if (edgeData.data.advanced.maxPrefix > 0) {
                config += `      maximum-prefix ${edgeData.data.advanced.maxPrefix}\n`;
            }

            if (edgeData.data.policy.routeMapIn) {
                config += `      route-map ${edgeData.data.policy.routeMapIn} in\n`;
            }

            if (edgeData.data.policy.routeMapOut) {
                config += `      route-map ${edgeData.data.policy.routeMapOut} out\n`;
            }

            config += `    exit\n`; // Exit address-family
            config += `  exit\n`; // Exit neighbor
        });

        // Network statements in VRF context
        if (data.data.networks && data.data.networks.length > 0) {
            config += `  !\n  ! Network Advertisements\n`;
            config += `  address-family ipv4 unicast\n`;
            data.data.networks.forEach(prefix => {
                if (!prefix.includes(':')) { // IPv4 only
                    config += `    network ${prefix}\n`;
                }
            });
            config += `  exit\n`;

            // IPv6 networks if any
            const hasIPv6 = data.data.networks.some(p => p.includes(':'));
            if (hasIPv6) {
                config += `  address-family ipv6 unicast\n`;
                data.data.networks.forEach(prefix => {
                    if (prefix.includes(':')) {
                        config += `    network ${prefix}\n`;
                    }
                });
                config += `  exit\n`;
            }
        }

        config += `exit\n!\n`;
        config += `! Save configuration\n`;
        config += `! copy running-config startup-config\n`;
        return config;
    },

    // Enhanced Juniper JunOS Config Generator - Validated Syntax (JunOS 20.x+)
    generateJuniperConfig(routerNode, productionMode = false) {
        const data = routerNode.data();
        const edges = this.cy.edges().filter(e =>
            e.data().source === data.id || e.data().target === data.id
        );

        let config = `# Juniper JunOS BGP Configuration for ${data.label}\n`;
        config += `# Generated by BGP Network Planning Tool\n`;
        config += `# Compatible with JunOS 20.x+\n`;
        config += `# Commands in 'set' configuration mode\n\n`;

        // System configuration
        config += `# System Configuration\n`;
        config += `set system host-name ${data.label.replace(/\s/g, '-')}\n\n`;

        // Routing options
        config += `# Routing Options\n`;
        config += `set routing-options router-id ${data.data.routerId}\n`;
        config += `set routing-options autonomous-system ${data.data.asn}\n\n`;

        // Collect policy objects used
        const usedPolicies = new Set();
        const usedPrefixLists = new Set();

        edges.forEach(edge => {
            const edgeData = edge.data();
            if (edgeData.data.policy.routeMapIn) {
                usedPolicies.add(edgeData.data.policy.routeMapIn);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapIn];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
            if (edgeData.data.policy.routeMapOut) {
                usedPolicies.add(edgeData.data.policy.routeMapOut);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapOut];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
        });

        // Policy-options configuration
        if (usedPrefixLists.size > 0 || usedPolicies.size > 0) {
            config += `# Policy Options\n`;

            // Prefix lists as route-filters in policy-statements
            usedPrefixLists.forEach(plName => {
                const pl = this.policyObjects.prefixLists[plName];
                if (pl) {
                    config += `# Prefix list: ${plName}\n`;
                    pl.entries.forEach((entry, idx) => {
                        const policyName = `${plName}-policy`;
                        const termName = `term-${idx + 1}`;
                        config += `set policy-options policy-statement ${policyName} term ${termName} from route-filter ${entry.prefix}`;
                        if (entry.le || entry.ge) {
                            if (entry.le && entry.ge) {
                                config += ` prefix-length-range /${entry.ge}-/${entry.le}`;
                            } else if (entry.le) {
                                config += ` upto /${entry.le}`;
                            } else if (entry.ge) {
                                config += ` longer`;
                            }
                        } else {
                            config += ` exact`;
                        }
                        config += `\n`;
                        config += `set policy-options policy-statement ${policyName} term ${termName} then ${entry.action}\n`;
                    });
                }
            });

            // Route-maps as policy-statements
            usedPolicies.forEach(rmName => {
                const rm = this.policyObjects.routeMaps[rmName];
                if (rm) {
                    config += `# Route-map: ${rmName}\n`;
                    rm.statements.forEach(stmt => {
                        const termName = `seq-${stmt.seq}`;

                        // Match conditions
                        if (stmt.match.prefixList) {
                            const pl = this.policyObjects.prefixLists[stmt.match.prefixList];
                            if (pl && pl.entries.length > 0) {
                                pl.entries.forEach(entry => {
                                    config += `set policy-options policy-statement ${rmName} term ${termName} from route-filter ${entry.prefix}`;
                                    if (entry.le || entry.ge) {
                                        if (entry.le && entry.ge) {
                                            config += ` prefix-length-range /${entry.ge}-/${entry.le}`;
                                        } else if (entry.le) {
                                            config += ` upto /${entry.le}`;
                                        } else {
                                            config += ` longer`;
                                        }
                                    } else {
                                        config += ` exact`;
                                    }
                                    config += `\n`;
                                });
                            }
                        }

                        if (stmt.match.asPath) {
                            config += `set policy-options policy-statement ${rmName} term ${termName} from as-path ${stmt.match.asPath}\n`;
                            // Also need to define the AS path
                            const apl = this.policyObjects.asPathLists[stmt.match.asPath];
                            if (apl && apl.entries.length > 0) {
                                config += `set policy-options as-path ${stmt.match.asPath} "${apl.entries[0].pattern}"\n`;
                            }
                        }

                        // Set actions (then clause)
                        if (stmt.set.localPref !== null) {
                            config += `set policy-options policy-statement ${rmName} term ${termName} then local-preference ${stmt.set.localPref}\n`;
                        }
                        if (stmt.set.med !== null) {
                            config += `set policy-options policy-statement ${rmName} term ${termName} then metric ${stmt.set.med}\n`;
                        }
                        if (stmt.set.prependCount > 0) {
                            const prependValue = Array(stmt.set.prependCount).fill(data.data.asn).join(' ');
                            config += `set policy-options policy-statement ${rmName} term ${termName} then as-path-prepend "${prependValue}"\n`;
                        }
                        if (stmt.set.community) {
                            const commName = stmt.set.community.replace(/:/g, '_');
                            config += `set policy-options policy-statement ${rmName} term ${termName} then community add ${commName}\n`;
                            config += `set policy-options community ${commName} members ${stmt.set.community}\n`;
                        }

                        // Action
                        config += `set policy-options policy-statement ${rmName} term ${termName} then ${stmt.action === 'permit' ? 'accept' : 'reject'}\n`;
                    });

                    // Default deny at the end
                    config += `set policy-options policy-statement ${rmName} term default-deny then reject\n`;
                }
            });
            config += `\n`;
        }

        // Static routes for network advertisements
        if (data.data.networks && data.data.networks.length > 0) {
            config += `# Static routes for network advertisements\n`;
            data.data.networks.forEach(prefix => {
                config += `set routing-options static route ${prefix} discard\n`;
            });
            config += `\n`;

            // Create export policy for originated routes
            config += `# Export policy for originated routes\n`;
            config += `set policy-options policy-statement EXPORT-STATIC term 10 from protocol static\n`;
            config += `set policy-options policy-statement EXPORT-STATIC term 10 then accept\n\n`;
        }

        // BGP configuration
        config += `# BGP Configuration\n`;

        // Group neighbors by type (internal/external)
        const groups = {};
        edges.forEach(edge => {
            const edgeData = edge.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
            const peerAsn = peerNode.data.asn;
            const groupName = peerAsn === data.data.asn ? 'IBGP' : 'EBGP';

            if (!groups[groupName]) {
                groups[groupName] = [];
            }
            groups[groupName].push({ edgeData, peerNode, remoteIp, peerAsn });
        });

        // Configure BGP groups
        Object.keys(groups).forEach(groupName => {
            const groupType = groupName === 'IBGP' ? 'internal' : 'external';
            config += `\n# BGP Group: ${groupName}\n`;
            config += `set protocols bgp group ${groupName} type ${groupType}\n`;

            // Next-hop-self at group level (for iBGP)
            if (groupName === 'IBGP') {
                const hasNHS = groups[groupName].some(p => p.edgeData.data.advanced.nextHopSelf);
                if (hasNHS) {
                    config += `set protocols bgp group ${groupName} next-hop-self\n`;
                }
            }

            // Add export policy for static routes
            if (data.data.networks && data.data.networks.length > 0) {
                config += `set protocols bgp group ${groupName} export EXPORT-STATIC\n`;
            }

            // Per-neighbor configuration
            groups[groupName].forEach(({ edgeData, peerNode, remoteIp, peerAsn }) => {
                config += `# Neighbor: ${peerNode.label}\n`;
                config += `set protocols bgp group ${groupName} neighbor ${remoteIp} description "${peerNode.label}"\n`;

                // For EBGP, specify peer-as
                if (groupName === 'EBGP') {
                    config += `set protocols bgp group ${groupName} neighbor ${remoteIp} peer-as ${peerAsn}\n`;
                }

                // Local-AS
                if (edgeData.data.localAs) {
                    config += `set protocols bgp group ${groupName} neighbor ${remoteIp} local-as ${edgeData.data.localAs}\n`;
                }

                // Authentication
                if (edgeData.data.security.md5Password) {
                    config += `set protocols bgp group ${groupName} neighbor ${remoteIp} authentication-key "${edgeData.data.security.md5Password}"\n`;
                }

                // Timers
                config += `set protocols bgp group ${groupName} neighbor ${remoteIp} hold-time ${edgeData.data.timers.holdtime}\n`;

                // Import/Export policies (route-maps)
                if (edgeData.data.policy.routeMapIn) {
                    config += `set protocols bgp group ${groupName} neighbor ${remoteIp} import ${edgeData.data.policy.routeMapIn}\n`;
                }
                if (edgeData.data.policy.routeMapOut) {
                    config += `set protocols bgp group ${groupName} neighbor ${remoteIp} export ${edgeData.data.policy.routeMapOut}\n`;
                }

                // Prefix limit
                if (edgeData.data.advanced.maxPrefix > 0) {
                    config += `set protocols bgp group ${groupName} neighbor ${remoteIp} family inet unicast prefix-limit maximum ${edgeData.data.advanced.maxPrefix}\n`;
                }
            });
        });

        config += `\n# Commit the configuration\n`;
        config += `# commit and-quit\n`;
        return config;
    },

    // Enhanced VyOS Config Generator - Validated Syntax (VyOS 1.4+/FRR 8.x)
    generateVyOSConfig(routerNode, productionMode = false) {
        const data = routerNode.data();
        const edges = this.cy.edges().filter(e =>
            e.data().source === data.id || e.data().target === data.id
        );

        let config = `#!/bin/vbash\n`;
        config += `# VyOS BGP Configuration for ${data.label}\n`;
        config += `# Generated by BGP Network Planning Tool\n`;
        config += `# VyOS 1.4+ / FRRouting 8.x\n\n`;

        config += `# Enter configuration mode\n`;
        config += `configure\n\n`;

        // BGP System Configuration
        config += `# BGP System Parameters\n`;
        config += `set protocols bgp ${data.data.asn} parameters router-id '${data.data.routerId}'\n`;
        config += `set protocols bgp ${data.data.asn} parameters log-neighbor-changes\n\n`;

        // Network advertisements
        if (data.data.networks && data.data.networks.length > 0) {
            config += `# Advertised Networks\n`;
            data.data.networks.forEach(prefix => {
                const isIPv6 = prefix.includes(':');
                if (isIPv6) {
                    config += `set protocols bgp ${data.data.asn} address-family ipv6-unicast network '${prefix}'\n`;
                } else {
                    config += `set protocols bgp ${data.data.asn} address-family ipv4-unicast network '${prefix}'\n`;
                }
            });
            config += `\n`;
        }

        // Collect policy objects used
        const usedRouteMaps = new Set();
        const usedPrefixLists = new Set();

        edges.forEach(edge => {
            const edgeData = edge.data();
            if (edgeData.data.policy.routeMapIn) {
                usedRouteMaps.add(edgeData.data.policy.routeMapIn);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapIn];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
            if (edgeData.data.policy.routeMapOut) {
                usedRouteMaps.add(edgeData.data.policy.routeMapOut);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapOut];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList);
                    });
                }
            }
        });

        // Prefix Lists
        if (usedPrefixLists.size > 0) {
            config += `# Prefix Lists\n`;
            usedPrefixLists.forEach(plName => {
                const pl = this.policyObjects.prefixLists[plName];
                if (pl) {
                    pl.entries.forEach((entry, idx) => {
                        const rule = (idx + 1) * 10;
                        config += `set policy prefix-list ${plName} rule ${rule} action '${entry.action}'\n`;
                        config += `set policy prefix-list ${plName} rule ${rule} prefix '${entry.prefix}'\n`;
                        if (entry.le) {
                            config += `set policy prefix-list ${plName} rule ${rule} le '${entry.le}'\n`;
                        }
                        if (entry.ge) {
                            config += `set policy prefix-list ${plName} rule ${rule} ge '${entry.ge}'\n`;
                        }
                    });
                }
            });
            config += `\n`;
        }

        // Route Maps
        if (usedRouteMaps.size > 0) {
            config += `# Route Maps\n`;
            usedRouteMaps.forEach(rmName => {
                const rm = this.policyObjects.routeMaps[rmName];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        config += `set policy route-map ${rmName} rule ${stmt.seq} action '${stmt.action}'\n`;

                        // Match conditions
                        if (stmt.match.prefixList) {
                            config += `set policy route-map ${rmName} rule ${stmt.seq} match ip address prefix-list '${stmt.match.prefixList}'\n`;
                        }
                        if (stmt.match.asPath) {
                            config += `set policy route-map ${rmName} rule ${stmt.seq} match as-path '${stmt.match.asPath}'\n`;
                        }

                        // Set actions
                        if (stmt.set.localPref !== null) {
                            config += `set policy route-map ${rmName} rule ${stmt.seq} set local-preference '${stmt.set.localPref}'\n`;
                        }
                        if (stmt.set.med !== null) {
                            config += `set policy route-map ${rmName} rule ${stmt.seq} set metric '${stmt.set.med}'\n`;
                        }
                        if (stmt.set.prependCount > 0) {
                            const prependValue = Array(stmt.set.prependCount).fill(data.data.asn).join(' ');
                            config += `set policy route-map ${rmName} rule ${stmt.seq} set as-path prepend '${prependValue}'\n`;
                        }
                        if (stmt.set.community) {
                            config += `set policy route-map ${rmName} rule ${stmt.seq} set community '${stmt.set.community}'\n`;
                        }
                    });
                }
            });
            config += `\n`;
        }

        // BGP Neighbors
        config += `# BGP Neighbors\n`;
        edges.forEach(edge => {
            const edgeData = edge.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
            const peerAsn = peerNode.data.asn;

            config += `\n# Neighbor: ${peerNode.label}\n`;
            config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} remote-as '${peerAsn}'\n`;
            config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} description '${peerNode.label}'\n`;

            // Local-AS
            if (edgeData.data.localAs) {
                config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} local-as '${edgeData.data.localAs}'\n`;
            }

            // Security
            if (edgeData.data.security.md5Password) {
                config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} password '${edgeData.data.security.md5Password}'\n`;
            }

            // Timers
            config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} timers holdtime '${edgeData.data.timers.holdtime}'\n`;
            config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} timers keepalive '${edgeData.data.timers.keepalive}'\n`;

            // Address Family IPv4 - Activate neighbor
            config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} address-family ipv4-unicast\n`;

            // Route-maps in address-family context
            if (edgeData.data.policy.routeMapIn) {
                config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} address-family ipv4-unicast route-map import '${edgeData.data.policy.routeMapIn}'\n`;
            }
            if (edgeData.data.policy.routeMapOut) {
                config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} address-family ipv4-unicast route-map export '${edgeData.data.policy.routeMapOut}'\n`;
            }

            // Next-hop-self
            if (edgeData.data.advanced.nextHopSelf) {
                config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} address-family ipv4-unicast next-hop-self\n`;
            }

            // Max-prefix
            if (edgeData.data.advanced.maxPrefix > 0) {
                config += `set protocols bgp ${data.data.asn} neighbor ${remoteIp} address-family ipv4-unicast maximum-prefix '${edgeData.data.advanced.maxPrefix}'\n`;
            }
        });

        config += `\n# Commit and save\n`;
        config += `commit\n`;
        config += `save\n`;
        config += `exit\n`;

        return config;
    },

    generateArubaConfig(routerNode, productionMode = false) {
        const data = routerNode.data();
        const edges = this.cy.edges().filter(e =>
            e.data().source === data.id || e.data().target === data.id
        );

        let config = `!\n! Aruba AOS-CX BGP Configuration for ${data.label}\n`;
        config += `! Generated by BGP Network Planning Tool\n`;
        config += `! Compatible with AOS-CX 10.x+\n!\n`;
        config += `hostname ${data.label.replace(/\s/g, '-')}\n!\n`;

        // Collect used policies
        const usedPolicies = new Set();
        const usedPrefixLists = new Set();
        edges.forEach(edge => {
            const edgeData = edge.data();
            if (edgeData.data.policy.routeMapIn) {
                usedPolicies.add(edgeData.data.policy.routeMapIn);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapIn];
                if (rm) rm.statements.forEach(stmt => { if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList); });
            }
            if (edgeData.data.policy.routeMapOut) {
                usedPolicies.add(edgeData.data.policy.routeMapOut);
                const rm = this.policyObjects.routeMaps[edgeData.data.policy.routeMapOut];
                if (rm) rm.statements.forEach(stmt => { if (stmt.match.prefixList) usedPrefixLists.add(stmt.match.prefixList); });
            }
        });

        // Prefix Lists
        if (usedPrefixLists.size > 0) {
            config += `! Prefix Lists\n`;
            usedPrefixLists.forEach(plName => {
                const pl = this.policyObjects.prefixLists[plName];
                if (pl) {
                    pl.entries.forEach((entry, idx) => {
                        const seq = (idx + 1) * 10;
                        let cmd = `ip prefix-list ${plName} seq ${seq} ${entry.action} ${entry.prefix}`;
                        if (entry.ge) cmd += ` ge ${entry.ge}`;
                        if (entry.le) cmd += ` le ${entry.le}`;
                        config += cmd + `\n`;
                    });
                }
            });
            config += `!\n`;
        }

        // Route Maps
        if (usedPolicies.size > 0) {
            config += `! Route Maps\n`;
            usedPolicies.forEach(rmName => {
                const rm = this.policyObjects.routeMaps[rmName];
                if (rm) {
                    rm.statements.forEach(stmt => {
                        config += `route-map ${rmName} ${stmt.action} ${stmt.seq}\n`;
                        if (stmt.match.prefixList) config += `     match ip address prefix-list ${stmt.match.prefixList}\n`;
                        if (stmt.match.asPath) config += `     match as-path ${stmt.match.asPath}\n`;
                        if (stmt.set.localPref !== null) config += `     set local-preference ${stmt.set.localPref}\n`;
                        if (stmt.set.med !== null) config += `     set metric ${stmt.set.med}\n`;
                        if (stmt.set.prependCount > 0) {
                            const asnRepeat = Array(stmt.set.prependCount).fill(data.data.asn).join(' ');
                            config += `     set as-path prepend ${asnRepeat}\n`;
                        }
                        if (stmt.set.community) config += `     set community ${stmt.set.community}\n`;
                    });
                }
            });
            config += `!\n`;
        }

        // BGP Configuration
        config += `! BGP Configuration\n`;
        config += `router bgp ${data.data.asn}\n`;
        config += `    bgp router-id ${data.data.routerId}\n`;
        config += `    bgp log-neighbor-changes\n`;

        // Neighbor definitions
        edges.forEach(edge => {
            const edgeData = edge.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
            const peerAsn = peerNode.data.asn;
            const isEBGP = peerAsn !== data.data.asn;

            config += `    !\n    ! Neighbor: ${peerNode.label}\n`;
            config += `    neighbor ${remoteIp} remote-as ${peerAsn}\n`;
            config += `    neighbor ${remoteIp} description ${peerNode.label}\n`;

            if (edgeData.data.localAs) {
                config += `    neighbor ${remoteIp} local-as ${edgeData.data.localAs}\n`;
            }
            if (edgeData.data.security.md5Password) {
                config += `    neighbor ${remoteIp} password plaintext ${edgeData.data.security.md5Password}\n`;
            }
            if (productionMode && isEBGP) {
                config += `    neighbor ${remoteIp} ttl-security hops 1\n`;
            }
            config += `    neighbor ${remoteIp} timers ${edgeData.data.timers.keepalive} ${edgeData.data.timers.holdtime}\n`;
        });

        // Address-Family IPv4 Unicast
        config += `    !\n    address-family ipv4 unicast\n`;

        if (data.data.networks && data.data.networks.length > 0) {
            data.data.networks.forEach(prefix => {
                if (!prefix.includes(':')) {
                    config += `        network ${prefix}\n`;
                }
            });
        }

        edges.forEach(edge => {
            const edgeData = edge.data();
            const isSource = edgeData.source === data.id;
            const peerNode = this.cy.getElementById(isSource ? edgeData.target : edgeData.source).data();
            const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
            const peerAsn = peerNode.data.asn;
            const isIBGP = peerAsn === data.data.asn;

            config += `        neighbor ${remoteIp} activate\n`;
            if (edgeData.data.advanced.nextHopSelf && isIBGP) {
                config += `        neighbor ${remoteIp} next-hop-self\n`;
            }
            if (edgeData.data.advanced.maxPrefix > 0) {
                config += `        neighbor ${remoteIp} maximum-prefix ${edgeData.data.advanced.maxPrefix}\n`;
            }
            if (edgeData.data.policy.routeMapIn) {
                config += `        neighbor ${remoteIp} route-map ${edgeData.data.policy.routeMapIn} in\n`;
            }
            if (edgeData.data.policy.routeMapOut) {
                config += `        neighbor ${remoteIp} route-map ${edgeData.data.policy.routeMapOut} out\n`;
            }
        });

        config += `    exit-address-family\n`;

        // IPv6 if applicable
        const hasIPv6 = data.data.networks && data.data.networks.some(p => p.includes(':'));
        if (hasIPv6) {
            config += `    !\n    address-family ipv6 unicast\n`;
            data.data.networks.forEach(prefix => {
                if (prefix.includes(':')) config += `        network ${prefix}\n`;
            });
            edges.forEach(edge => {
                const edgeData = edge.data();
                const isSource = edgeData.source === data.id;
                const remoteIp = isSource ? edgeData.data.ipv4.remoteIp : edgeData.data.ipv4.localIp;
                config += `        neighbor ${remoteIp} activate\n`;
            });
            config += `    exit-address-family\n`;
        }

        config += `!\nend\n`;
        config += `!\n! Save configuration\n`;
        config += `! copy running-config startup-config\n`;
        return config;
    },

    saveTopology() {
        localStorage.setItem('bgp_topology', JSON.stringify({
            nodes: this.cy.nodes().map(n => ({ data: n.data(), position: n.position() })),
            edges: this.cy.edges().map(e => e.data()),
            policyObjects: this.policyObjects
        }));
        this.notify('Topology saved', 'success');
    },

    loadTopology() {
        const saved = localStorage.getItem('bgp_topology');
        if (!saved) {
            this.notify('No saved topology', 'error');
            return;
        }

        try {
            const topology = JSON.parse(saved);
            this.cy.elements().remove();
            topology.nodes.forEach(nodeObj => {
                this.cy.add({ group: 'nodes', data: nodeObj.data, position: nodeObj.position });
            });
            topology.edges.forEach(edgeData => {
                this.cy.add({ group: 'edges', data: edgeData, classes: edgeData.classes });
            });
            if (topology.policyObjects) {
                this.policyObjects = topology.policyObjects;
                this.updatePolicyObjectsList();
            }
            this.notify('Topology loaded', 'success');
        } catch (e) {
            this.notify('Error loading: ' + e.message, 'error');
        }
    },

    loadTopologyFromStorage() {
        const saved = localStorage.getItem('bgp_topology');
        if (saved) {
            try {
                const topology = JSON.parse(saved);
                topology.nodes.forEach(nodeObj => {
                    this.cy.add({ group: 'nodes', data: nodeObj.data, position: nodeObj.position });
                });
                topology.edges.forEach(edgeData => {
                    this.cy.add({ group: 'edges', data: edgeData, classes: edgeData.classes });
                });
                if (topology.policyObjects) {
                    this.policyObjects = topology.policyObjects;
                    this.updatePolicyObjectsList();
                }
            } catch (e) {
                console.error('Error auto-loading:', e);
            }
        }
    },

    clearMap() {
        if (confirm('Clear entire topology?')) {
            this.cy.elements().remove();
            this.topology = { nodes: [], edges: [] };
            this.nodeCounter = 0;
            this.edgeCounter = 0;
            this.simulationRun = false;
            localStorage.removeItem('bgp_topology');
            this.notify('Topology cleared', 'success');
            document.getElementById('validation-panel').style.display = 'none';
            this.hideDeleteButton();
        }
    },

    // Delete Functionality
    showDeleteButton(type) {
        const btn = document.getElementById('delete-btn');
        if (type === 'node') {
            const nodeType = this.selectedNode.data().type;
            btn.textContent = `🗑️ Delete ${nodeType === 'carrier' ? 'Carrier' : 'Router'}`;
        } else {
            btn.textContent = '🗑️ Delete Peer';
        }
        btn.style.display = 'block';
    },

    hideDeleteButton() {
        const btn = document.getElementById('delete-btn');
        if (btn) {
            btn.style.display = 'none';
        }
    },

    deleteSelected() {
        if (this.selectedNode) {
            this.deleteSelectedNode();
        } else if (this.selectedEdge) {
            this.deleteSelectedEdge();
        }
    },

    deleteSelectedNode() {
        if (!this.selectedNode) return;

        const nodeId = this.selectedNode.id();
        const label = this.selectedNode.data().label;

        // Find connected edges
        const connectedEdges = this.cy.edges().filter(e =>
            e.data().source === nodeId || e.data().target === nodeId
        );

        // Confirm if has peers
        if (connectedEdges.length > 0) {
            if (!confirm(`Delete ${label} and ${connectedEdges.length} connected peer(s)?`)) {
                return;
            }
        }

        // Remove from Cytoscape
        connectedEdges.remove();
        this.selectedNode.remove();

        // Update data structures (CRITICAL!)
        this.topology.nodes = this.topology.nodes.filter(n => n.id !== nodeId);
        this.topology.edges = this.topology.edges.filter(e =>
            e.source !== nodeId && e.target !== nodeId
        );

        // Clear UI state
        this.selectedNode = null;
        this.hideDeleteButton();

        // Clear Looking Glass
        document.getElementById('summary-content').innerHTML = '';
        document.getElementById('rib-content').innerHTML =
            '<div class="info-box">Select a node to view details</div>';

        // Clear validation panel if open
        const validationPanel = document.getElementById('validation-panel');
        if (validationPanel && validationPanel.style.display === 'block') {
            validationPanel.style.display = 'none';
        }

        // Update canvas placeholder
        if (this.cy.nodes().length === 0) {
            document.getElementById('canvas-container').classList.remove('has-nodes');
        }

        this.notify(`Deleted ${label} and ${connectedEdges.length} peer(s)`, 'success');
    },

    deleteSelectedEdge() {
        if (!this.selectedEdge) return;

        const edgeId = this.selectedEdge.id();
        const srcNode = this.cy.getElementById(this.selectedEdge.data().source);
        const tgtNode = this.cy.getElementById(this.selectedEdge.data().target);
        const srcLabel = srcNode.data().label;
        const tgtLabel = tgtNode.data().label;

        // Remove from Cytoscape
        this.selectedEdge.remove();

        // Update data structures (CRITICAL!)
        this.topology.edges = this.topology.edges.filter(e => e.id !== edgeId);

        // Clear UI state
        this.selectedEdge = null;
        this.hideDeleteButton();

        // Clear edge-specific Looking Glass if displayed
        const summaryContent = document.getElementById('summary-content');
        if (summaryContent && summaryContent.innerHTML.includes('Peering Information')) {
            summaryContent.innerHTML = '';
        }

        this.notify(`Deleted peer ${srcLabel} ↔ ${tgtLabel}`, 'success');
    },

    // Bulk Operations Functions
    toggleBulkSelectEdge(edge) {
        const edgeId = edge.id();
        const index = this.bulkSelectedEdges.findIndex(e => e.id() === edgeId);

        if (index > -1) {
            // Deselect
            this.bulkSelectedEdges.splice(index, 1);
            edge.removeClass('bulk-selected');
        } else {
            // Select
            this.bulkSelectedEdges.push(edge);
            edge.addClass('bulk-selected');
        }

        this.updateBulkSelectionUI();
    },

    updateBulkSelectionUI() {
        const count = this.bulkSelectedEdges.length;
        const countDiv = document.getElementById('bulk-selection-count');
        const countSpan = document.getElementById('selected-count');

        if (count > 0) {
            countDiv.style.display = 'block';
            countSpan.textContent = count;
            // Enable bulk action buttons
            document.getElementById('bulk-md5-btn').disabled = false;
            document.getElementById('bulk-prefix-btn').disabled = false;
            document.getElementById('bulk-delete-btn').disabled = false;
        } else {
            countDiv.style.display = 'none';
            // Disable bulk action buttons
            document.getElementById('bulk-md5-btn').disabled = true;
            document.getElementById('bulk-prefix-btn').disabled = true;
            document.getElementById('bulk-delete-btn').disabled = true;
        }
    },

    selectAlleBGP() {
        this.clearBulkSelection();
        this.cy.edges().forEach(edge => {
            const srcNode = this.cy.getElementById(edge.data().source);
            const tgtNode = this.cy.getElementById(edge.data().target);
            const srcAsn = srcNode.data().data.asn;
            const tgtAsn = tgtNode.data().data.asn;

            if (srcAsn !== tgtAsn) {
                this.bulkSelectedEdges.push(edge);
                edge.addClass('bulk-selected');
            }
        });
        this.updateBulkSelectionUI();
        this.notify(`Selected ${this.bulkSelectedEdges.length} eBGP peers`, 'success');
    },

    selectAlliBGP() {
        this.clearBulkSelection();
        this.cy.edges().forEach(edge => {
            const srcNode = this.cy.getElementById(edge.data().source);
            const tgtNode = this.cy.getElementById(edge.data().target);
            const srcAsn = srcNode.data().data.asn;
            const tgtAsn = tgtNode.data().data.asn;

            if (srcAsn === tgtAsn) {
                this.bulkSelectedEdges.push(edge);
                edge.addClass('bulk-selected');
            }
        });
        this.updateBulkSelectionUI();
        this.notify(`Selected ${this.bulkSelectedEdges.length} iBGP peers`, 'success');
    },

    clearBulkSelection() {
        this.bulkSelectedEdges.forEach(edge => edge.removeClass('bulk-selected'));
        this.bulkSelectedEdges = [];
        this.updateBulkSelectionUI();
    },

    bulkApplyMD5() {
        if (this.bulkSelectedEdges.length === 0) return;

        const password = prompt('Enter MD5 password for all selected peers:');
        if (!password) return;

        this.bulkSelectedEdges.forEach(edge => {
            const edgeData = edge.data();
            edgeData.data.security.md5Password = password;
            edge.data(edgeData);

            // Update topology
            const topologyEdge = this.topology.edges.find(e => e.id === edgeData.id);
            if (topologyEdge) {
                topologyEdge.data.security.md5Password = password;
            }
        });

        this.notify(`Applied MD5 password to ${this.bulkSelectedEdges.length} peers`, 'success');
        this.clearBulkSelection();
    },

    bulkSetPrefixLimit() {
        if (this.bulkSelectedEdges.length === 0) return;

        const limit = prompt('Enter maximum prefix limit for all selected peers:', '1000');
        if (!limit) return;

        const maxPrefix = parseInt(limit);
        if (isNaN(maxPrefix)) {
            this.notify('Invalid prefix limit', 'error');
            return;
        }

        this.bulkSelectedEdges.forEach(edge => {
            const edgeData = edge.data();
            edgeData.data.advanced.maxPrefix = maxPrefix;
            edge.data(edgeData);

            // Update topology
            const topologyEdge = this.topology.edges.find(e => e.id === edgeData.id);
            if (topologyEdge) {
                topologyEdge.data.advanced.maxPrefix = maxPrefix;
            }
        });

        this.notify(`Set max-prefix to ${maxPrefix} on ${this.bulkSelectedEdges.length} peers`, 'success');
        this.clearBulkSelection();
    },

    bulkDelete() {
        if (this.bulkSelectedEdges.length === 0) return;

        if (!confirm(`Delete ${this.bulkSelectedEdges.length} selected peer(s)?`)) {
            return;
        }

        const count = this.bulkSelectedEdges.length;
        this.bulkSelectedEdges.forEach(edge => {
            const edgeId = edge.id();
            edge.remove();

            // Update topology
            this.topology.edges = this.topology.edges.filter(e => e.id !== edgeId);
        });

        this.bulkSelectedEdges = [];
        this.updateBulkSelectionUI();
        this.notify(`Deleted ${count} peers`, 'success');
    },

    // Phase 3.4: Export Topology as Image
    exportTopologyImage() {
        const png = this.cy.png({
            output: 'blob',
            bg: '#2d2d2d',
            full: true,
            scale: 2
        });

        const url = URL.createObjectURL(png);
        const a = document.createElement('a');
        a.href = url;
        a.download = `bgp-topology-${Date.now()}.png`;
        a.click();
        URL.revokeObjectURL(url);
        this.notify('Topology exported as PNG', 'success');
    },

    // Phase 3.5: Validation Functions
    runValidation() {
        const warnings = [];
        const errors = [];
        const successes = [];

        // Check 1: Routing loops (AS-path analysis)
        const loops = this.detectRoutingLoops();
        if (loops.length > 0) {
            loops.forEach(loop => {
                errors.push({
                    title: 'Routing Loop Detected',
                    message: `Loop in AS path: ${loop.asPath.join(' → ')}`,
                    fix: null
                });
            });
        } else if (this.simulationRun) {
            successes.push({
                title: 'No Routing Loops',
                message: 'All AS paths are loop-free'
            });
        }

        // Check 2: Prefix conflicts
        const conflicts = this.detectPrefixConflicts();
        if (conflicts.length > 0) {
            conflicts.forEach(conflict => {
                warnings.push({
                    title: 'Prefix Conflict',
                    message: `${conflict.prefix1} and ${conflict.prefix2} overlap on routers ${conflict.router1} and ${conflict.router2}`,
                    fix: null
                });
            });
        }

        // Check 3: iBGP full mesh or route reflectors
        const ibgpIssues = this.checkIBGPMesh();
        if (ibgpIssues.length > 0) {
            ibgpIssues.forEach(issue => {
                warnings.push({
                    title: 'iBGP Connectivity Issue',
                    message: issue.message,
                    fix: null
                });
            });
        } else {
            const routers = this.cy.nodes('[type="router"]');
            if (routers.length > 1) {
                successes.push({
                    title: 'iBGP Topology',
                    message: 'iBGP connectivity appears correct'
                });
            }
        }

        // Check 4: Route-maps on customer edges
        const missingRouteMaps = this.checkCustomerRouteMaps();
        if (missingRouteMaps.length > 0) {
            missingRouteMaps.forEach(edge => {
                warnings.push({
                    title: 'Missing Route-Map',
                    message: `eBGP peer ${edge.peerLabel} has no route-maps configured`,
                    fix: null
                });
            });
        }

        // Check 5: MD5 authentication on external peers
        const missingMD5 = this.checkMD5Auth();
        if (missingMD5.length > 0) {
            missingMD5.forEach(edge => {
                warnings.push({
                    title: 'No MD5 Authentication',
                    message: `eBGP peer ${edge.peerLabel} has no MD5 password configured`,
                    fix: {
                        type: 'md5',
                        edgeId: edge.edgeId,
                        action: 'generateMD5'
                    }
                });
            });
        }

        // Check 6: Prefix limits
        const missingPrefixLimits = this.checkPrefixLimits();
        if (missingPrefixLimits.length > 0) {
            missingPrefixLimits.forEach(edge => {
                warnings.push({
                    title: 'No Prefix Limit',
                    message: `eBGP peer ${edge.peerLabel} has no maximum-prefix configured`,
                    fix: {
                        type: 'prefixLimit',
                        edgeId: edge.edgeId,
                        action: 'setPrefixLimit'
                    }
                });
            });
        }

        // Check 7: Orphaned or incomplete policies
        const orphanedPolicies = this.checkOrphanedPolicies();
        if (orphanedPolicies.length > 0) {
            orphanedPolicies.forEach(policy => {
                warnings.push({
                    title: 'Incomplete Policy Configuration',
                    message: policy.message,
                    fix: null
                });
            });
        }

        // Display results
        this.displayValidationResults(errors, warnings, successes);
    },

    detectRoutingLoops() {
        const loops = [];
        if (!this.simulationRun) return loops;

        this.cy.nodes('[type="router"]').forEach(node => {
            const data = node.data();
            if (!data.data.rib) return;

            data.data.rib.forEach(route => {
                const asPath = route.as_path;
                const asSet = new Set();

                for (let i = 0; i < asPath.length; i++) {
                    if (asSet.has(asPath[i])) {
                        loops.push({
                            router: data.label,
                            prefix: route.prefix,
                            asPath: asPath
                        });
                        break;
                    }
                    asSet.add(asPath[i]);
                }
            });
        });

        return loops;
    },

    detectPrefixConflicts() {
        const conflicts = [];
        const routers = this.cy.nodes('[type="router"]');
        const routerNetworks = [];

        routers.forEach(router => {
            const data = router.data();
            if (data.data.networks && data.data.networks.length > 0) {
                routerNetworks.push({
                    router: data.label,
                    networks: data.data.networks
                });
            }
        });

        // Check for overlaps
        for (let i = 0; i < routerNetworks.length; i++) {
            for (let j = i + 1; j < routerNetworks.length; j++) {
                const r1 = routerNetworks[i];
                const r2 = routerNetworks[j];

                r1.networks.forEach(net1 => {
                    r2.networks.forEach(net2 => {
                        if (this.prefixesOverlap(net1, net2)) {
                            conflicts.push({
                                prefix1: net1,
                                prefix2: net2,
                                router1: r1.router,
                                router2: r2.router
                            });
                        }
                    });
                });
            }
        }

        return conflicts;
    },

    prefixesOverlap(prefix1, prefix2) {
        // Simplified overlap check - exact match or containment
        if (prefix1 === prefix2) return true;

        // Extract network and mask
        const [net1, mask1] = prefix1.split('/');
        const [net2, mask2] = prefix2.split('/');

        // If different IP versions, no overlap
        if ((net1.includes(':') && !net2.includes(':')) || (!net1.includes(':') && net2.includes(':'))) {
            return false;
        }

        // For simplicity, only check exact match
        // Full implementation would require IP address math
        return false;
    },

    checkIBGPMesh() {
        const issues = [];
        const asnGroups = {};

        // Group routers by ASN
        this.cy.nodes('[type="router"]').forEach(node => {
            const asn = node.data().data.asn;
            if (!asnGroups[asn]) {
                asnGroups[asn] = [];
            }
            asnGroups[asn].push(node);
        });

        // Check each ASN group for full mesh
        Object.keys(asnGroups).forEach(asn => {
            const routers = asnGroups[asn];
            if (routers.length < 2) return;

            // Check if full mesh exists
            const needed = (routers.length * (routers.length - 1)) / 2;
            let found = 0;

            routers.forEach((r1, i) => {
                routers.slice(i + 1).forEach(r2 => {
                    const edge = this.cy.edges().filter(e => {
                        const src = e.data().source;
                        const tgt = e.data().target;
                        return (src === r1.id() && tgt === r2.id()) || (src === r2.id() && tgt === r1.id());
                    });

                    if (edge.length > 0) {
                        found++;
                    }
                });
            });

            if (found < needed) {
                issues.push({
                    asn: asn,
                    message: `AS${asn} has ${routers.length} routers but only ${found}/${needed} iBGP sessions. Consider route reflectors or full mesh.`
                });
            }
        });

        return issues;
    },

    checkCustomerRouteMaps() {
        const missing = [];

        this.cy.edges().forEach(edge => {
            const edgeData = edge.data();
            const srcNode = this.cy.getElementById(edgeData.source).data();
            const tgtNode = this.cy.getElementById(edgeData.target).data();

            // Check if eBGP
            if (srcNode.data.asn !== tgtNode.data.asn) {
                if (!edgeData.data.policy.routeMapIn && !edgeData.data.policy.routeMapOut) {
                    missing.push({
                        edgeId: edgeData.id,
                        peerLabel: `${srcNode.label} ↔ ${tgtNode.label}`
                    });
                }
            }
        });

        return missing;
    },

    checkMD5Auth() {
        const missing = [];

        this.cy.edges().forEach(edge => {
            const edgeData = edge.data();
            const srcNode = this.cy.getElementById(edgeData.source).data();
            const tgtNode = this.cy.getElementById(edgeData.target).data();

            // Check if eBGP
            if (srcNode.data.asn !== tgtNode.data.asn) {
                if (!edgeData.data.security.md5Password) {
                    missing.push({
                        edgeId: edgeData.id,
                        peerLabel: `${srcNode.label} ↔ ${tgtNode.label}`
                    });
                }
            }
        });

        return missing;
    },

    checkPrefixLimits() {
        const missing = [];

        this.cy.edges().forEach(edge => {
            const edgeData = edge.data();
            const srcNode = this.cy.getElementById(edgeData.source).data();
            const tgtNode = this.cy.getElementById(edgeData.target).data();

            // Check if eBGP
            if (srcNode.data.asn !== tgtNode.data.asn) {
                if (edgeData.data.advanced.maxPrefix === 0) {
                    missing.push({
                        edgeId: edgeData.id,
                        peerLabel: `${srcNode.label} ↔ ${tgtNode.label}`
                    });
                }
            }
        });

        return missing;
    },

    checkOrphanedPolicies() {
        const issues = [];

        this.cy.edges().forEach(edge => {
            const edgeData = edge.data();
            const srcNode = this.cy.getElementById(edgeData.source).data();
            const tgtNode = this.cy.getElementById(edgeData.target).data();
            const peerLabel = `${srcNode.label} ↔ ${tgtNode.label}`;

            // Check if eBGP
            if (srcNode.data.asn !== tgtNode.data.asn) {
                const policy = edgeData.data.policy;

                // Check for asymmetric route-map configuration
                if (policy.routeMapIn && !policy.routeMapOut) {
                    issues.push({
                        edgeId: edgeData.id,
                        message: `${peerLabel} has inbound route-map (${policy.routeMapIn}) but no outbound route-map`
                    });
                } else if (!policy.routeMapIn && policy.routeMapOut) {
                    issues.push({
                        edgeId: edgeData.id,
                        message: `${peerLabel} has outbound route-map (${policy.routeMapOut}) but no inbound route-map`
                    });
                }

                // Check for asymmetric prefix-list configuration
                if (policy.prefixListIn && !policy.prefixListOut) {
                    issues.push({
                        edgeId: edgeData.id,
                        message: `${peerLabel} has inbound prefix-list (${policy.prefixListIn}) but no outbound prefix-list`
                    });
                } else if (!policy.prefixListIn && policy.prefixListOut) {
                    issues.push({
                        edgeId: edgeData.id,
                        message: `${peerLabel} has outbound prefix-list (${policy.prefixListOut}) but no inbound prefix-list`
                    });
                }
            }
        });

        return issues;
    },

    displayValidationResults(errors, warnings, successes) {
        const panel = document.getElementById('validation-panel');
        const container = document.getElementById('validation-results');

        // Store for Quick Fix access
        this.validationResults = { errors, warnings, successes };

        let html = '';

        if (errors.length === 0 && warnings.length === 0 && successes.length === 0) {
            html = '<div class="info-box">No issues found. Topology looks good!</div>';
        } else {
            errors.forEach(err => {
                html += `
                    <div class="warning-item error">
                        <div class="warning-title">❌ ${err.title}</div>
                        <div>${err.message}</div>
                    </div>
                `;
            });

            warnings.forEach((warn, index) => {
                const fixButton = warn.fix ? `
                    <button class="btn btn-success btn-small"
                            onclick="BGPApp.applyQuickFix(${index}, 'warning')"
                            style="margin-top: 8px; padding: 4px 8px; font-size: 10px;">
                        🔧 Quick Fix
                    </button>
                ` : '';
                html += `
                    <div class="warning-item" data-warning-index="${index}">
                        <div class="warning-title">⚠️ ${warn.title}</div>
                        <div>${warn.message}</div>
                        ${fixButton}
                    </div>
                `;
            });

            successes.forEach(success => {
                html += `
                    <div class="warning-item success">
                        <div class="warning-title">✅ ${success.title}</div>
                        <div>${success.message}</div>
                    </div>
                `;
            });
        }

        container.innerHTML = html;
        panel.style.display = 'block';

        const totalIssues = errors.length + warnings.length;
        if (totalIssues > 0) {
            this.notify(`Validation complete: ${totalIssues} issue(s) found`, 'error');
        } else {
            this.notify('Validation complete: No issues found!', 'success');
        }
    },

    // BGP Decision Process Viewer
    showDecisionProcess(routeInfo, routerLabel) {
        if (!this.selectedNode || !this.selectedNode.data().data.rib) {
            this.notify('No route data available', 'error');
            return;
        }

        // Find all routes for this prefix to compare
        const allRoutes = this.selectedNode.data().data.rib.filter(r => r.prefix === routeInfo.prefix);

        if (allRoutes.length === 0) {
            this.notify('Route not found', 'error');
            return;
        }

        // Get decision process
        const decision = this.selectBestPathWithDecision(allRoutes, routeInfo.prefix, this.selectedNode.id());

        // Populate modal
        document.getElementById('decision-prefix').textContent = `Prefix: ${routeInfo.prefix}`;
        document.getElementById('decision-router').textContent = `Router: ${routerLabel} | Comparing ${allRoutes.length} route(s)`;

        let stepsHtml = '';
        decision.steps.forEach(step => {
            const statusClass = step.status;
            const statusIcon = step.status === 'winner' ? '🏆' : (step.status === 'passed' ? '✓' : '○');

            let comparisonHtml = '';
            if (step.comparison && step.comparison.length > 0) {
                comparisonHtml = '<div class="decision-comparison">';
                step.comparison.forEach((comp, idx) => {
                    const isWinner = step.status === 'winner' || (step.status === 'passed' && step.selected <= step.comparison.length / 2);
                    const highlight = comp.route === decision.winner ? 'background: #1a3a4a;' : '';
                    comparisonHtml += `
                        <div class="decision-route" style="${highlight}">
                            Route ${idx + 1}: <strong>${comp.value}</strong>
                        </div>
                        ${idx < step.comparison.length - 1 ? '<div class="decision-operator">vs</div>' : ''}
                    `;
                });
                comparisonHtml += '</div>';
            }

            stepsHtml += `
                <div class="decision-step ${statusClass}">
                    <div class="decision-step-header">
                        <div class="decision-step-title">${statusIcon} Step ${step.step}: ${step.name}</div>
                        <div style="font-size: 10px; color: #9e9e9e;">${step.selected} candidate(s)</div>
                    </div>
                    <div class="decision-step-result">${step.description}</div>
                    <div class="decision-step-result" style="margin-top: 4px; color: #4fc3f7;"><strong>Result:</strong> ${step.result}</div>
                    ${comparisonHtml}
                </div>
            `;
        });

        document.getElementById('decision-steps').innerHTML = stepsHtml;
        document.getElementById('decision-process-modal').classList.add('active');
    },

    closeDecisionViewer() {
        document.getElementById('decision-process-modal').classList.remove('active');
    },

    // Auto-Fix Functions
    applyQuickFix(index, type) {
        if (type !== 'warning') return;

        const warning = this.validationResults.warnings[index];
        if (!warning || !warning.fix) return;

        const fix = warning.fix;

        if (fix.action === 'generateMD5') {
            this.fixMissingMD5(fix.edgeId);
        } else if (fix.action === 'setPrefixLimit') {
            this.fixMissingPrefixLimit(fix.edgeId);
        }

        // Re-run validation to update results
        setTimeout(() => this.runValidation(), 500);
    },

    fixMissingMD5(edgeId) {
        const edge = this.cy.getElementById(edgeId);
        if (!edge) return;

        // Generate secure random password
        const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%';
        let password = '';
        for (let i = 0; i < 16; i++) {
            password += chars.charAt(Math.floor(Math.random() * chars.length));
        }

        const edgeData = edge.data();
        edgeData.data.security.md5Password = password;
        edge.data(edgeData);

        // Update topology
        const topologyEdge = this.topology.edges.find(e => e.id === edgeId);
        if (topologyEdge) {
            topologyEdge.data.security.md5Password = password;
        }

        this.notify(`✓ Generated MD5 password for ${edgeData.label}: ${password}`, 'success');
    },

    fixMissingPrefixLimit(edgeId) {
        const edge = this.cy.getElementById(edgeId);
        if (!edge) return;

        const edgeData = edge.data();
        const srcNode = this.cy.getElementById(edgeData.source);
        const tgtNode = this.cy.getElementById(edgeData.target);

        // Determine appropriate limit based on peer type
        let suggestedLimit = 1000; // Default for transit providers

        // Check if target is a carrier (known transit)
        if (tgtNode.data().type === 'carrier') {
            suggestedLimit = 1000; // Transit provider
        } else {
            // Could be customer or peer - use smaller limit
            suggestedLimit = 100;
        }

        edgeData.data.advanced.maxPrefix = suggestedLimit;
        edge.data(edgeData);

        // Update topology
        const topologyEdge = this.topology.edges.find(e => e.id === edgeId);
        if (topologyEdge) {
            topologyEdge.data.advanced.maxPrefix = suggestedLimit;
        }

        this.notify(`✓ Set max-prefix to ${suggestedLimit} for ${edgeData.label}`, 'success');
    },

    notify(message, type = 'info') {
        const notification = document.getElementById('notification');
        notification.textContent = message;
        notification.className = type === 'error' ? 'error' : (type === 'success' ? 'success' : '');
        notification.classList.add('show');
        setTimeout(() => notification.classList.remove('show'), 3500);
    }
};

window.addEventListener('DOMContentLoaded', () => {
    BGPApp.init();
});
</script>