.. title: Trình phân tích tình trạng và phân tích đầu ra CLI
.. sên: trình phân tích cú pháp đầu ra cli
.. ngày: 2026-02-02 14:00:00 UTC
.. tags: mạng, xử lý sự cố, trình phân tích cú pháp, trình phân tích, công cụ
.. thể loại: Công cụ
.. liên kết:
.. mô tả: Phân tích cú pháp và phân tích đầu ra CLI của thiết bị mạng để đánh giá tình trạng trên nhiều nhà cung cấp
.. loại: văn bản
<style>
    * {
        box-sizing: border-box;
    }

    .calc-container {
        max-width: 1000px;
        margin: 20px auto;
        padding: 20px;
    }

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

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

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

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

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

        .vendor-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .vendor-btn {
            padding: 10px 20px;
            border: 2px solid #667eea;
            background: white;
            color: #667eea;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

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

        .vendor-btn.active {
            background: #667eea;
            color: white;
        }

        .command-suggestions {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .command-suggestions h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .command-chips {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .command-chip {
            background: white;
            border: 1px solid #dee2e6;
            padding: 8px 16px;
            border-radius: 20px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            color: inherit;
        }

        .command-chip:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .command-chip:focus {
            outline: none;
            background: #667eea;
            color: white;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
        }

        .command-chip:active {
            transform: scale(0.98);
        }

        .input-area {
            margin-bottom: 20px;
        }

        .input-area label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }

        #cliInput {
            width: 100%;
            min-height: 300px;
            padding: 15px;
            border: 2px solid #ced4da;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            resize: vertical;
            transition: all 0.3s ease;
        }

        #cliInput:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }

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

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

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

        .btn-primary:active {
            background: #3d8b40;
            transform: translateY(0);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

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

        .results-section {
            display: none;
        }

        .results-section.active {
            display: block;
        }

        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .summary-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            border-left: 5px solid #667eea;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .summary-card.warning {
            border-left-color: #ffc107;
        }

        .summary-card.error {
            border-left-color: #dc3545;
        }

        .summary-card.success {
            border-left-color: #4CAF50;
        }

        .summary-card h3 {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .summary-card .value {
            font-size: 32px;
            font-weight: bold;
            color: #333;
        }

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

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

        .chassis-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .slot-row {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
        }

        .slot-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }

        .slot-title {
            font-weight: bold;
            font-size: 16px;
        }

        .slot-stats {
            font-size: 14px;
            color: #6c757d;
        }

        .ports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: 8px;
        }

        .port-box {
            background: #4CAF50;
            color: white;
            padding: 8px;
            border-radius: 6px;
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .port-box:hover {
            transform: scale(1.1);
            z-index: 10;
        }

        .port-box.warning {
            background: #ffc107;
            color: #000;
        }

        .port-box.error {
            background: #dc3545;
        }

        .port-box.disabled {
            background: #6c757d;
        }

        .port-box.down {
            background: #adb5bd;
        }

        .port-tooltip {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 100;
            margin-bottom: 5px;
        }

        .port-box:hover .port-tooltip {
            display: block;
        }

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

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

        .interface-table table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }

        .interface-table th {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .interface-table td {
            padding: 12px;
            border-bottom: 1px solid #dee2e6;
        }

        .interface-table tr:hover {
            background: #f8f9fa;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .status-up {
            background: #d4edda;
            color: #155724;
        }

        .status-down {
            background: #f8d7da;
            color: #721c24;
        }

        .status-admin-down {
            background: #d6d8db;
            color: #383d41;
        }

        .error-count {
            color: #dc3545;
            font-weight: bold;
        }

        .filter-controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-controls select,
        .filter-controls input {
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            font-size: 14px;
        }

        .legend {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
        }

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

        .legend-box {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        .export-section {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .export-section h3 {
            margin-bottom: 15px;
        }

        /* Three-Step Onboarding Wizard */
        .onboarding-wizard {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .wizard-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }

        .wizard-steps::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 60px;
            right: 60px;
            height: 2px;
            background: #dee2e6;
            z-index: 0;
        }

        .wizard-step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #dee2e6;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .wizard-step.active .step-circle {
            background: #667eea;
            color: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
        }

        .wizard-step.completed .step-circle {
            background: #4CAF50;
            color: white;
        }

        .wizard-step.completed .step-circle::before {
            content: '✓';
        }

        .step-label {
            font-size: 14px;
            color: #6c757d;
        }

        .wizard-step.active .step-label {
            color: #667eea;
            font-weight: 600;
        }

        .wizard-step.completed .step-label {
            color: #4CAF50;
        }

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

        .wizard-section {
            display: none;
        }

        .wizard-section.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

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

        .wizard-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #dee2e6;
        }

        .sample-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .sample-card {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sample-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        }

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

        .sample-card img {
            width: 48px;
            height: 48px;
            margin-bottom: 10px;
        }

        .sample-card h4 {
            margin: 10px 0 5px;
            color: #333;
            font-size: 16px;
        }

        .sample-card p {
            color: #666;
            font-size: 13px;
            margin: 0;
        }

        .input-method-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .method-card {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .method-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
        }

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

        .method-card.selected {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }

        .method-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .method-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .method-desc {
            font-size: 14px;
            color: #666;
        }

        /* Progressive Disclosure */
        .collapsible-section {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            margin-bottom: 20px;
            background: white;
        }

        .accordion-header {
            padding: 15px 20px;
            background: #f8f9fa;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s ease;
        }

        .accordion-header:hover {
            background: #e9ecef;
        }

        .accordion-header h3 {
            margin: 0;
            font-size: 18px;
            color: #333;
        }

        .section-header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 15px 20px;
        }

        .section-header h3 {
            margin: 0;
            font-size: 18px;
        }

        .toggle-indicator {
            font-size: 20px;
            transition: transform 0.3s ease;
            color: #667eea;
        }

        .toggle-indicator.open {
            transform: rotate(180deg);
        }

        .section-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .section-content.open {
            max-height: 5000px;
            padding: 20px;
        }

        .health-score-prominent {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .health-score-prominent h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
        }

        .health-interpretation {
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            font-size: 14px;
            color: #666;
        }

        .view-details-btn {
            margin-top: 15px;
            padding: 10px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: background 0.2s ease;
        }

        .view-details-btn:hover {
            background: #5568d3;
        }

        .view-details-btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8em;
            }

            .summary-cards {
                grid-template-columns: 1fr;
            }

            .ports-grid {
                grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            }

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

        .health-score {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
        }

        .health-score.excellent {
            color: #4CAF50;
        }

        .health-score.good {
            color: #5cb85c;
        }

        .health-score.fair {
            color: #ffc107;
        }

        .health-score.poor {
            color: #fd7e14;
        }

        .health-score.critical {
            color: #dc3545;
        }

        .transceiver-info {
            margin-top: 30px;
        }

        .transceiver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .transceiver-card {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
        }

        .transceiver-card.warning {
            border-color: #ffc107;
            background: #fff8e1;
        }

        .transceiver-card.error {
            border-color: #dc3545;
            background: #ffebee;
        }

        .optical-power {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            font-size: 14px;
        }

        .optical-power .label {
            color: #6c757d;
        }

        .optical-power .value {
            font-weight: bold;
        }

        /* Missing classes previously provided by external stylesheet */
        .how-to-use {
            border-left: 4px solid #bee5eb;
            background: #f0f8ff;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .how-to-use-header {
            display: flex;
            justify-content: space-between;
            padding: 12px 15px;
            cursor: pointer;
            font-weight: 600;
            color: #333;
            user-select: none;
        }

        .how-to-use-header:hover {
            background: rgba(0,0,0,0.04);
        }

        .how-to-use-content {
            padding: 0 15px 15px;
            display: none;
        }

        .toggle-icon {
            font-size: 14px;
            color: #667eea;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 15px;
        }

        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .session-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
        }

        .session-status {
            font-size: 13px;
            color: #6c757d;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 13px;
        }

        .tooltip-trigger {
            display: inline-block;
            width: 18px;
            height: 18px;
            background: #667eea;
            color: white;
            border-radius: 50%;
            text-align: center;
            font-size: 12px;
            cursor: help;
            margin-left: 5px;
            line-height: 18px;
            vertical-align: middle;
        }
    </style>
<div class="calc-container">
<div class="calc-header">
<h2>Trình phân tích tình trạng và phân tích đầu ra CLI</h2>
<p>Đánh giá và hiển thị tình trạng thiết bị mạng của nhiều nhà cung cấp. Phân tích đầu ra CLI từ các thiết bị Cisco, Aruba, Juniper, Broadcom SONiC, Dell, Fortigate và Palo Alto.</p>
</div>
Kiểm soát phiên
<div class="session-controls" id="sessionControls" style="display: none;">
<span class="session-status" id="sessionStatus">Chưa lưu</span>
<button class="btn btn-small btn-secondary" onclick="clearSession()">Xóa dữ liệu đã lưu</button>
</div>
Khôi phục biểu ngữ
<div class="alert alert-info" id="restoreBanner" style="display: none;">
<strong>Đã tìm thấy phiên trước đó!</strong>
<button class="btn btn-small btn-primary" onclick="restoreSession()" style="margin: 0 10px;">Khôi phục</button>
<button class="btn btn-small btn-secondary" onclick="dismissRestore()">Bắt đầu mới</button>
</div>
Cách sử dụng bảng điều khiển
<div class="how-to-use">
<div class="how-to-use-header">
<span>Cách sử dụng công cụ này</span>
<span class="toggle-icon">▼</span>
</div>
<div class="how-to-use-content">
<ul>
<li><strong>Chọn nhà cung cấp:</strong>Chọn nhà cung cấp thiết bị của bạn hoặc sử dụng Tự động phát hiện để nhận dạng tự động</li>
<li><strong>Tải mẫu:</strong>Nhấp vào danh sách thả xuống dữ liệu mẫu để xem kết quả đầu ra mẫu cho các nhà cung cấp khác nhau</li>
<li><strong>Dán đầu ra:</strong>Sao chép đầu ra CLI từ thiết bị của bạn và dán nó vào vùng văn bản</li>
<li><strong>Phân tích:</strong>Nhấp vào "Phân tích đầu ra" để phân tích dữ liệu và tạo thông tin chi tiết về sức khỏe</li>
<li><strong>Đánh giá thông tin chi tiết:</strong>Kiểm tra bảng Health Insights để biết các khuyến nghị hữu ích</li>
<li><strong>Xuất khẩu:</strong>Lưu kết quả dưới dạng JSON, CSV hoặc báo cáo văn bản để làm tài liệu</li>
</ul>
</div>
</div>
Trình hướng dẫn giới thiệu ba bước
<div class="onboarding-wizard" id="onboardingWizard">
<div class="wizard-steps">
<div class="wizard-step active" data-step="1">
<div class="step-circle">1</div>
<div class="step-label">Chọn nhà cung cấp</div>
</div>
<div class="wizard-step" data-step="2">
<div class="step-circle">2</div>
<div class="step-label">Chọn đầu vào</div>
</div>
<div class="wizard-step" data-step="3">
<div class="step-circle">3</div>
<div class="step-label">Phân tích</div>
</div>
</div>
<div class="wizard-content">
Bước 1: Chọn nhà cung cấp
<div class="wizard-section active" id="wizardStep1">
<h3 style="text-align: center; margin-bottom: 10px;">Bước 1: Chọn nhà cung cấp mạng của bạn</h3>
<p style="text-align: center; color: #666; margin-bottom: 30px;">Chọn nhà cung cấp cho thiết bị mạng của bạn hoặc để chúng tôi tự động phát hiện</p>
<div class="vendor-selector" style="justify-content: center;">
<button class="vendor-btn wizard-vendor-btn active" data-vendor="auto" onclick="selectWizardVendor('auto')">Tự động phát hiện</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="cisco" onclick="selectWizardVendor('cisco')">Cisco</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="aruba" onclick="selectWizardVendor('aruba')">Aruba</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="juniper" onclick="selectWizardVendor('juniper')">cây bách xù</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="sonic" onclick="selectWizardVendor('sonic')">SONiC</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="dell" onclick="selectWizardVendor('dell')">Dell</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="fortigate" onclick="selectWizardVendor('fortigate')">tăng cường</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="paloalto" onclick="selectWizardVendor('paloalto')">Palo Alto</button>
</div>
</div>
Bước 2: Chọn Phương thức nhập
<div class="wizard-section" id="wizardStep2">
<h3 style="text-align: center; margin-bottom: 10px;">Bước 2: Chọn Phương thức nhập</h3>
<p style="text-align: center; color: #666; margin-bottom: 30px;">Dán đầu ra CLI của riêng bạn hoặc khám phá bằng dữ liệu mẫu</p>
<div class="input-method-cards">
<button aria-label="Paste your own CLI output" class="method-card" onclick="selectInputMethod('paste')">
<div class="method-icon">📋</div>
<div class="method-title">Dán đầu ra CLI</div>
<div class="method-desc">Sao chép đầu ra từ thiết bị mạng của bạn và dán nó vào đây</div>
</button>
<button aria-label="Load sample data to explore" class="method-card" onclick="selectInputMethod('sample')">
<div class="method-icon">🔬</div>
<div class="method-title">Tải dữ liệu mẫu</div>
<div class="method-desc">Khám phá với kết quả đầu ra ví dụ từ các nhà cung cấp khác nhau</div>
</button>
</div>
Thư viện mẫu (hiển thị khi mẫu được chọn)
<div id="sampleGallery" style="display: none; margin-top: 30px;">
<h4 style="text-align: center; margin-bottom: 20px;">Chọn một mẫu</h4>
<div class="sample-gallery">
<button aria-label="Load Cisco interfaces sample" class="sample-card" onclick="loadWizardSample('cisco-show-int')">
<div style="font-size: 36px;">🔷</div>
<h4>Giao diện Cisco</h4>
<p>hiển thị đầu ra giao diện</p>
</button>
<button aria-label="Load Cisco version sample" class="sample-card" onclick="loadWizardSample('cisco-show-version')">
<div style="font-size: 36px;">🔷</div>
<h4>Phiên bản Cisco</h4>
<p>hiển thị đầu ra phiên bản</p>
</button>
<button aria-label="Load Aruba interfaces sample" class="sample-card" onclick="loadWizardSample('aruba-show-int-brief')">
<div style="font-size: 36px;">🟠</div>
<h4>Giao diện Aruba</h4>
<p>hiển thị giao diện tóm tắt</p>
</button>
<button aria-label="Load Juniper interfaces sample" class="sample-card" onclick="loadWizardSample('juniper-show-int-terse')">
<div style="font-size: 36px;">🟢</div>
<h4>Giao diện cây bách xù</h4>
<p>hiển thị giao diện ngắn gọn</p>
</button>
</div>
</div>
Vùng dán (hiển thị khi chọn dán)
<div id="pasteArea" style="display: none; margin-top: 30px;">
<textarea id="wizardTextarea" placeholder="Paste CLI output here..." style="width: 100%; height: 200px; padding: 15px; border: 2px solid #ced4da; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 13px;"></textarea>
</div>
</div>
Bước 3: Phân tích
<div class="wizard-section" id="wizardStep3">
<h3 style="text-align: center; margin-bottom: 10px;">Bước 3: Phân tích đầu ra</h3>
<p style="text-align: center; color: #666; margin-bottom: 30px;">Xem lại các lựa chọn của bạn và bắt đầu phân tích</p>
<div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
<p><strong>Người bán:</strong> <span id="wizardSelectedVendor">Tự động phát hiện</span></p>
<p><strong>Phương thức nhập:</strong> <span id="wizardSelectedMethod">Không được chọn</span></p>
<p><strong>Sẵn sàng:</strong> <span id="wizardReadyStatus">❌ Hoàn thành Bước 2</span></p>
</div>
</div>
</div>
<div class="wizard-buttons">
<button class="btn btn-secondary" id="wizardBackBtn" onclick="wizardPrevStep()" style="display: none;">← Quay lại</button>
<div></div>
<button class="btn btn-primary" id="wizardNextBtn" onclick="wizardNextStep()">Tiếp theo →</button>
</div>
</div>
Phần đầu vào
<div class="input-section" id="mainInputSection" style="display: none;">
<h3 class="section-title">Chọn nhà cung cấp và dán đầu ra CLI</h3>
Bộ chọn dữ liệu mẫu (Tính năng P0)
<div style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
<label style="display: block; margin-bottom: 10px; font-weight: 600;">Tải dữ liệu mẫu:<span class="tooltip-trigger" data-tooltip="See example CLI outputs for each vendor to understand the format.">?</span>
</label>
<select id="sampleSelect" onchange="loadSample(this.value)" style="width: 100%; max-width: 400px; padding: 10px; border: 2px solid #ced4da; border-radius: 6px;">
<option value="">-- Chọn mẫu --</option>
<option value="cisco-show-int">Cisco: hiển thị giao diện</option>
<option value="cisco-show-version">Cisco: hiển thị phiên bản</option>
<option value="aruba-show-int-brief">Aruba: hiển thị giao diện ngắn gọn</option>
<option value="juniper-show-int-terse">Juniper: hiển thị giao diện ngắn gọn</option>
<option value="sonic-show-int-status">SONiC: hiển thị trạng thái giao diện</option>
</select>
</div>
Huy hiệu phát hiện nhà cung cấp (Tính năng P0)
<div class="alert alert-success" id="detectedVendor" style="display: none; margin-bottom: 20px;">✓ Đã phát hiện:<strong id="detectedVendorName">Cisco IOS</strong>- Yêu cầu:<strong id="detectedCommand">hiển thị giao diện</strong>
</div>
<div class="vendor-selector">
<button class="vendor-btn active" data-vendor="auto">Tự động phát hiện</button>
<button class="vendor-btn" data-vendor="cisco">Cisco</button>
<button class="vendor-btn" data-vendor="aruba">Aruba</button>
<button class="vendor-btn" data-vendor="juniper">cây bách xù</button>
<button class="vendor-btn" data-vendor="sonic">SONiC</button>
<button class="vendor-btn" data-vendor="dell">Dell</button>
<button class="vendor-btn" data-vendor="fortigate">tăng cường</button>
<button class="vendor-btn" data-vendor="paloalto">Palo Alto</button>
</div>
<div class="command-suggestions">
<h3>Các lệnh được đề xuất (bấm để sao chép):</h3>
<div aria-label="Command suggestions" class="command-chips" id="commandChips" role="group">
<button aria-label="Copy command: show version" class="command-chip" data-command="show version">hiển thị phiên bản</button>
<button aria-label="Copy command: show interfaces" class="command-chip" data-command="show interfaces">hiển thị giao diện</button>
<button aria-label="Copy command: show interfaces status" class="command-chip" data-command="show interfaces status">hiển thị trạng thái giao diện</button>
<button aria-label="Copy command: show interfaces transceiver" class="command-chip" data-command="show interfaces transceiver">hiển thị giao diện thu phát</button>
<button aria-label="Copy command: show platform" class="command-chip" data-command="show platform">nền tảng hiển thị</button>
<button aria-label="Copy command: show environment" class="command-chip" data-command="show environment">môi trường hiển thị</button>
<button aria-label="Copy command: show interfaces counters errors" class="command-chip" data-command="show interfaces counters errors">hiển thị lỗi bộ đếm giao diện</button>
</div>
</div>
<div class="input-area">
<label for="cliInput">Dán đầu ra CLI vào đây:</label>
<textarea id="cliInput" placeholder="Paste output from 'show interfaces', 'show version', 'show platform', etc.

Example Cisco output:
GigabitEthernet1/0/1 is up, line protocol is up (connected)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f001
  ...

Or paste multiple command outputs together. The parser will automatically detect the vendor and command type."></textarea>
</div>
<div class="button-group">
<button class="btn btn-primary" id="analyzeBtn" style="width: 100%;">Phân tích đầu ra</button>
<button class="btn btn-secondary" id="clearBtn">Thông thoáng</button>
<button class="btn btn-secondary" id="loadSampleBtn">Tải dữ liệu mẫu</button>
</div>
</div>
Phần kết quả
<div aria-atomic="false" aria-live="polite" class="results-section" id="resultsSection" style="display: none;">
Điểm sức khỏe nổi bật (Luôn hiển thị)
<div class="health-score-prominent">
<h3>Điểm tình trạng mạng tổng thể</h3>
<div aria-label="Health score value" class="health-score" id="healthScore">--</div>
<div class="health-interpretation" id="healthInterpretation">Phân tích sẽ xuất hiện ở đây sau khi phân tích đầu ra CLI</div>
</div>
Phần tóm tắt có thể thu gọn
<div class="collapsible-section">
<div aria-controls="summarySection" aria-expanded="false" class="accordion-header" onclick="toggleSection('summarySection')" role="button">
<h3>Tóm tắt giao diện</h3>
<span class="toggle-indicator" id="summaryToggle">▼</span>
</div>
<div class="section-content" id="summarySection">
<div aria-label="Interface summary statistics" class="summary-cards" id="summaryCards" role="region"></div>
</div>
</div>
Trực quan hóa khung gầm có thể gập lại
<div class="collapsible-section">
<div aria-controls="chassisSection" aria-expanded="false" class="accordion-header" onclick="toggleSection('chassisSection')" role="button">
<h3>Hình dung khung gầm</h3>
<span class="toggle-indicator" id="chassisToggle">▼</span>
</div>
<div class="section-content" id="chassisSection">
<div aria-label="Visual representation of chassis and interface status" class="chassis-visualization" id="chassisViz" role="region">
<h3>Hình dung khung gầm</h3>
<div class="legend" id="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4CAF50;"></div>
<span>✓ Khỏe mạnh (Lên, Không lỗi)</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #ffc107;"></div>
<span>⚠ Cảnh báo (Lỗi nhỏ)</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #dc3545;"></div>
<span>✗ Nghiêm trọng (Lỗi lớn)</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #adb5bd;"></div>
<span>- Xuống</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #6c757d;"></div>
<span>⊗ Quản trị viên xuống</span>
</div>
</div>
<div class="chassis-container" id="chassisContainer"></div>
</div>
</div>
</div>
Bảng giao diện có thể thu gọn
<div class="collapsible-section">
<div aria-controls="interfaceSection" aria-expanded="false" class="accordion-header" onclick="toggleSection('interfaceSection')" role="button">
<h3>Bảng chi tiết giao diện</h3>
<span class="toggle-indicator" id="interfaceToggle">▼</span>
</div>
<div class="section-content" id="interfaceSection">
<div class="interface-table">
<h3>Chi tiết giao diện</h3>
<div class="filter-controls">
<select id="filterStatus">
<option value="all">Tất cả trạng thái</option>
<option value="up">Chỉ lên</option>
<option value="down">Chỉ xuống</option>
<option value="errors">Có lỗi</option>
</select>
<select id="filterSlot">
<option value="all">Tất cả các vị trí</option>
</select>
<input id="filterSearch" placeholder="Search interface name..." type="text"/>
</div>
<div style="overflow-x: auto;">
<table id="interfaceTable">
<thead>
<tr>
<th>Giao diện</th>
<th>Trạng thái</th>
<th>Tốc độ/Hai mặt</th>
<th>Lỗi đầu vào</th>
<th>Lỗi đầu ra</th>
<th>CRC</th>
<th>Giọt</th>
<th>Va chạm</th>
</tr>
</thead>
<tbody id="interfaceTableBody"></tbody>
</table>
</div>
</div>
</div>
</div>
Thông tin thu phát
<div class="transceiver-info" id="transceiverInfo" style="display: none;">
<h2 style="margin-bottom: 15px;">Thông tin thu phát</h2>
<div class="transceiver-grid" id="transceiverGrid"></div>
</div>
Phần xuất khẩu
<div class="export-section">
<h3>Xuất kết quả</h3>
<div class="button-group">
<button class="btn btn-primary" id="exportJsonBtn">Xuất JSON</button>
<button class="btn btn-primary" id="exportCsvBtn">Xuất CSV</button>
<button class="btn btn-primary" id="exportReportBtn">Xuất báo cáo (Văn bản)</button>
</div>
</div>
</div>
</div>

<script>
        // Global state
        let currentVendor = 'auto';
        let parsedData = null;
        let wizardState = {
            currentStep: 1,
            vendor: 'auto',
            inputMethod: null,
            sampleData: null,
            pasteData: null
        };

        // Wizard Navigation Functions
        function wizardNextStep() {
            if (wizardState.currentStep === 1) {
                // Move to step 2
                showWizardStep(2);
            } else if (wizardState.currentStep === 2) {
                // Check if input method is selected
                if (!wizardState.inputMethod) {
                    alert('Please select an input method (Paste or Sample)');
                    return;
                }
                // Move to step 3
                updateWizardSummary();
                showWizardStep(3);
            } else if (wizardState.currentStep === 3) {
                // Complete wizard and show main interface
                completeWizard();
            }
        }

        function wizardPrevStep() {
            if (wizardState.currentStep > 1) {
                showWizardStep(wizardState.currentStep - 1);
            }
        }

        function showWizardStep(step) {
            // Update step indicators
            document.querySelectorAll('.wizard-step').forEach(el => {
                const stepNum = parseInt(el.dataset.step);
                el.classList.remove('active', 'completed');
                if (stepNum === step) {
                    el.classList.add('active');
                } else if (stepNum < step) {
                    el.classList.add('completed');
                }
            });

            // Show/hide sections
            document.querySelectorAll('.wizard-section').forEach(el => {
                el.classList.remove('active');
            });
            document.getElementById(`wizardStep${step}`).classList.add('active');

            // Update buttons
            const backBtn = document.getElementById('wizardBackBtn');
            const nextBtn = document.getElementById('wizardNextBtn');

            backBtn.style.display = step > 1 ? 'block' : 'none';
            nextBtn.textContent = step === 3 ? 'Analyze Output' : 'Next →';

            wizardState.currentStep = step;
        }

        function selectWizardVendor(vendor) {
            wizardState.vendor = vendor;
            currentVendor = vendor;

            // Update button states
            document.querySelectorAll('.wizard-vendor-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.closest('.vendor-btn').classList.add('active');
        }

        function selectInputMethod(method) {
            wizardState.inputMethod = method;

            // Update visual state
            document.querySelectorAll('.method-card').forEach(card => {
                card.classList.remove('selected');
            });
            event.target.closest('.method-card').classList.add('selected');

            // Show appropriate interface
            const sampleGallery = document.getElementById('sampleGallery');
            const pasteArea = document.getElementById('pasteArea');

            if (method === 'sample') {
                sampleGallery.style.display = 'block';
                pasteArea.style.display = 'none';
            } else {
                sampleGallery.style.display = 'none';
                pasteArea.style.display = 'block';
            }
        }

        function loadWizardSample(sampleId) {
            wizardState.sampleData = sampleId;
            // Visual feedback
            document.querySelectorAll('.sample-card').forEach(card => {
                card.style.borderColor = '#dee2e6';
            });
            event.target.closest('.sample-card').style.borderColor = '#667eea';
        }

        function updateWizardSummary() {
            document.getElementById('wizardSelectedVendor').textContent =
                wizardState.vendor === 'auto' ? 'Auto-Detect' : wizardState.vendor.charAt(0).toUpperCase() + wizardState.vendor.slice(1);
            document.getElementById('wizardSelectedMethod').textContent =
                wizardState.inputMethod === 'sample' ? 'Sample Data' : 'Paste CLI Output';

            const isReady = wizardState.inputMethod &&
                           (wizardState.inputMethod === 'paste' ? document.getElementById('wizardTextarea').value.trim() : wizardState.sampleData);

            document.getElementById('wizardReadyStatus').innerHTML = isReady ? '✅ Ready to analyze' : '❌ Complete Step 2';
        }

        function completeWizard() {
            // Hide wizard, show main interface
            document.getElementById('onboardingWizard').style.display = 'none';
            document.getElementById('mainInputSection').style.display = 'block';

            // Set vendor
            currentVendor = wizardState.vendor;
            document.querySelectorAll('.vendor-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.vendor === currentVendor) {
                    btn.classList.add('active');
                }
            });

            // Load sample or paste data
            if (wizardState.inputMethod === 'sample' && wizardState.sampleData) {
                loadSample(wizardState.sampleData);
                // Auto-analyze
                setTimeout(() => {
                    document.getElementById('analyzeBtn').click();
                }, 500);
            } else if (wizardState.inputMethod === 'paste') {
                const pasteData = document.getElementById('wizardTextarea').value;
                document.getElementById('cliInput').value = pasteData;
                // Auto-analyze if there's data
                if (pasteData.trim()) {
                    setTimeout(() => {
                        document.getElementById('analyzeBtn').click();
                    }, 500);
                }
            }

            // Scroll to results
            setTimeout(() => {
                document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
            }, 1000);
        }

        // Progressive Disclosure Functions
        function toggleSection(sectionId) {
            const content = document.getElementById(sectionId);
            const toggle = document.getElementById(sectionId.replace('Section', 'Toggle'));
            const header = content.previousElementSibling;

            const isOpen = content.classList.contains('open');

            if (isOpen) {
                content.classList.remove('open');
                toggle.classList.remove('open');
                header.setAttribute('aria-expanded', 'false');
            } else {
                content.classList.add('open');
                toggle.classList.add('open');
                header.setAttribute('aria-expanded', 'true');
            }
        }

        function updateHealthInterpretation(score, healthyPorts, warningPorts, errorPorts, downPorts, errorInterfaces, warningInterfaces) {
            errorInterfaces = errorInterfaces || [];
            warningInterfaces = warningInterfaces || [];

            const interpretation = document.getElementById('healthInterpretation');
            const scoreEl = document.getElementById('healthScore');

            let statusText = '';
            let recommendations = [];

            // Always surface issues regardless of score — a 96 with errors is not "all clear"
            if (errorPorts > 0) {
                var intfList = errorInterfaces.length > 0 ? ': ' + errorInterfaces.join(', ') : '';
                recommendations.push(errorPorts + ' port(s) with significant errors — investigate immediately' + intfList);
            }
            if (warningPorts > 0) {
                var warnList = warningInterfaces.length > 0 ? ': ' + warningInterfaces.join(', ') : '';
                recommendations.push(warningPorts + ' port(s) with minor errors — monitor closely' + warnList);
            }

            var hasIssues = recommendations.length > 0;

            if (score >= 95 && !hasIssues) {
                statusText = '✅ Excellent — Network is in great shape';
            } else if (score >= 95) {
                statusText = '⚠ High score but issues detected — do not ignore';
                // Change the score circle border to amber so it doesn't look all-green
                if (scoreEl) {
                    scoreEl.className = 'health-score fair';
                }
            } else if (score >= 85) {
                statusText = '✓ Good — Network is healthy with minor issues';
            } else if (score >= 70) {
                statusText = '⚠ Fair — Issues detected, attention needed';
            } else if (score >= 50) {
                statusText = '⚠ Poor — Multiple issues requiring immediate attention';
                recommendations.push('Review network configuration and cabling');
            } else {
                statusText = '✗ Critical — Serious network health issues detected';
                recommendations.push(downPorts + ' port(s) are down');
                recommendations.push('Immediate troubleshooting required');
            }

            var html = '<strong>' + statusText + '</strong>';
            if (recommendations.length > 0) {
                html += '<ul style="margin: 10px 0 0 0; padding-left: 20px; text-align: left;">';
                recommendations.forEach(function(rec) {
                    html += '<li>' + rec + '</li>';
                });
                html += '</ul>';
            }

            interpretation.innerHTML = html;
        }

        // How-to-use collapsible panel toggle
        const howToUseHeader = document.querySelector('.how-to-use-header');
        if (howToUseHeader) {
            howToUseHeader.addEventListener('click', function() {
                const content = this.nextElementSibling;
                const icon = this.querySelector('.toggle-icon');
                if (!content.style.display || content.style.display === 'none') {
                    content.style.display = 'block';
                    if (icon) icon.textContent = '▲';
                } else {
                    content.style.display = 'none';
                    if (icon) icon.textContent = '▼';
                }
            });
        }

        // Vendor button handlers
        document.querySelectorAll('.vendor-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.vendor-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                currentVendor = this.dataset.vendor;
                updateCommandSuggestions(currentVendor);
            });
        });

        // Command chip handlers (copy to clipboard)
        document.querySelectorAll('.command-chip').forEach(chip => {
            chip.addEventListener('click', function() {
                const command = this.dataset.command;
                navigator.clipboard.writeText(command).then(() => {
                    const originalText = this.textContent;
                    this.textContent = '✓ Copied!';
                    setTimeout(() => {
                        this.textContent = originalText;
                    }, 2000);
                });
            });
        });

        // Update command suggestions based on vendor
        function updateCommandSuggestions(vendor) {
            const commandsDiv = document.getElementById('commandChips');
            let commands = [];

            switch(vendor) {
                case 'cisco':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces status',
                        'show interfaces transceiver',
                        'show platform',
                        'show environment',
                        'show interfaces counters errors'
                    ];
                    break;
                case 'aruba':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces brief',
                        'show interfaces transceiver',
                        'show system',
                        'show environment'
                    ];
                    break;
                case 'juniper':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces terse',
                        'show interfaces diagnostics optics',
                        'show chassis hardware',
                        'show chassis environment'
                    ];
                    break;
                case 'sonic':
                    commands = [
                        'show version',
                        'show interface status',
                        'show interface counters',
                        'show interface transceiver dom',
                        'show platform environment'
                    ];
                    break;
                case 'dell':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces status',
                        'show interfaces transceiver',
                        'show system'
                    ];
                    break;
                case 'fortigate':
                    commands = [
                        'get system status',
                        'get hardware nic',
                        'diagnose hardware deviceinfo nic',
                        'diagnose hardware sysinfo'
                    ];
                    break;
                case 'paloalto':
                    commands = [
                        'show system info',
                        'show interface all',
                        'show interface hardware'
                    ];
                    break;
                default:
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces status',
                        'show interfaces transceiver',
                        'show platform',
                        'show environment'
                    ];
            }

            commandsDiv.innerHTML = commands.map(cmd =>
                `<button class="command-chip" data-command="${cmd}" aria-label="Copy command: ${cmd}">${cmd}</button>`
            ).join('');

            // Re-attach click handlers
            document.querySelectorAll('.command-chip').forEach(chip => {
                chip.addEventListener('click', function() {
                    const command = this.dataset.command;
                    navigator.clipboard.writeText(command).then(() => {
                        const originalText = this.textContent;
                        this.textContent = '✓ Copied!';
                        setTimeout(() => {
                            this.textContent = originalText;
                        }, 2000);
                    });
                });
            });
        }

        // Analyze button handler
        document.getElementById('analyzeBtn').addEventListener('click', function() {
            const input = document.getElementById('cliInput').value.trim();
            if (!input) {
                alert('Please paste CLI output first');
                return;
            }

            // Parse the input
            parsedData = parseCliOutput(input, currentVendor);

            // Display results
            displayResults(parsedData);

            // Show results section
            document.getElementById('resultsSection').style.display = 'block';

            // Scroll to results
            setTimeout(() => {
                document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
            }, 100);
        });

        // Clear button handler
        document.getElementById('clearBtn').addEventListener('click', function() {
            document.getElementById('cliInput').value = '';
            document.getElementById('resultsSection').style.display = 'none';
            parsedData = null;
        });

        // Load sample data
        document.getElementById('loadSampleBtn').addEventListener('click', function() {
            const sampleData = generateSampleData();
            document.getElementById('cliInput').value = sampleData;
        });

        // Main parsing function
        function parseCliOutput(input, vendor) {
            // Auto-detect vendor if set to auto
            if (vendor === 'auto') {
                vendor = detectVendor(input);
            }

            const data = {
                vendor: vendor,
                interfaces: [],
                transceivers: [],
                chassis: {},
                metadata: {
                    hostname: '',
                    model: '',
                    version: '',
                    serial: ''
                }
            };

            // Parse based on vendor
            switch(vendor) {
                case 'cisco':
                    parseCisco(input, data);
                    break;
                case 'aruba':
                    parseAruba(input, data);
                    break;
                case 'juniper':
                    parseJuniper(input, data);
                    break;
                case 'sonic':
                    parseSonic(input, data);
                    break;
                case 'dell':
                    parseDell(input, data);
                    break;
                case 'fortigate':
                    parseFortigate(input, data);
                    break;
                case 'paloalto':
                    parsePaloAlto(input, data);
                    break;
                default:
                    parseCisco(input, data); // Fallback to Cisco
            }

            // Organize interfaces by chassis/slot/port
            organizeInterfacesByChassis(data);

            // Calculate health metrics
            calculateHealthMetrics(data);

            return data;
        }

        // Vendor detection
        function detectVendor(input) {
            const lowerInput = input.toLowerCase();

            if (lowerInput.includes('cisco') ||
                lowerInput.match(/gigabitethernet|tengigabitethernet|fastethernet/)) {
                return 'cisco';
            }
            if (lowerInput.includes('aruba') || lowerInput.includes('arubaos')) {
                return 'aruba';
            }
            if (lowerInput.includes('junos') || lowerInput.match(/ge-\d+\/\d+\/\d+/)) {
                return 'juniper';
            }
            if (lowerInput.includes('sonic') || lowerInput.includes('broadcom') ||
                lowerInput.match(/software version\s*:/) || lowerInput.includes('hwsku') ||
                lowerInput.includes('enterprise sonic distribution')) {
                return 'sonic';
            }
            if (lowerInput.includes('dell') || lowerInput.includes('force10')) {
                return 'dell';
            }
            if (lowerInput.includes('fortigate') || lowerInput.includes('fortios')) {
                return 'fortigate';
            }
            if (lowerInput.includes('palo alto') || lowerInput.includes('pan-os')) {
                return 'paloalto';
            }

            return 'cisco'; // Default fallback
        }

        // Cisco parser
        function parseCisco(input, data) {
            const lines = input.split('\n');
            let currentInterface = null;

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];

                // Parse hostname from prompt
                const hostnameMatch = line.match(/^(\S+)#/);
                if (hostnameMatch && !data.metadata.hostname) {
                    data.metadata.hostname = hostnameMatch[1];
                }

                // Parse version info
                if (line.includes('Cisco IOS')) {
                    const versionMatch = line.match(/Version\s+([^\s,]+)/);
                    if (versionMatch) data.metadata.version = versionMatch[1];
                }

                // Parse model
                if (line.match(/cisco\s+(\S+)\s+\(/i)) {
                    const modelMatch = line.match(/cisco\s+(\S+)\s+\(/i);
                    if (modelMatch) data.metadata.model = modelMatch[1];
                }

                // Parse interface status line
                // Format: GigabitEthernet1/0/1 is up, line protocol is up
                const intfStatusMatch = line.match(/^(\S+)\s+is\s+(up|down|admin\s+down|administratively\s+down)/i);
                if (intfStatusMatch) {
                    currentInterface = {
                        name: intfStatusMatch[1],
                        status: intfStatusMatch[2].toLowerCase().replace('administratively ', 'admin-'),
                        lineProtocol: line.match(/line\s+protocol\s+is\s+(up|down)/i)?.[1] || 'unknown',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: '',
                        duplex: '',
                        description: ''
                    };
                    data.interfaces.push(currentInterface);
                }

                // Parse interface counters
                if (currentInterface && line.trim()) {
                    // Input errors
                    const inputErrorsMatch = line.match(/(\d+)\s+input\s+errors/i);
                    if (inputErrorsMatch) currentInterface.inputErrors = parseInt(inputErrorsMatch[1]);

                    // Output errors
                    const outputErrorsMatch = line.match(/(\d+)\s+output\s+errors/i);
                    if (outputErrorsMatch) currentInterface.outputErrors = parseInt(outputErrorsMatch[1]);

                    // CRC errors
                    const crcMatch = line.match(/(\d+)\s+CRC/i);
                    if (crcMatch) currentInterface.crc = parseInt(crcMatch[1]);

                    // Drops
                    const dropsMatch = line.match(/(\d+)\s+(?:input|output)?\s*drops/i);
                    if (dropsMatch) currentInterface.drops += parseInt(dropsMatch[1]);

                    // Collisions
                    const collisionsMatch = line.match(/(\d+)\s+collisions/i);
                    if (collisionsMatch) currentInterface.collisions = parseInt(collisionsMatch[1]);

                    // Speed/Duplex
                    const speedMatch = line.match(/(\d+[MG]b\/s)[,\s]/i);
                    if (speedMatch) currentInterface.speed = speedMatch[1];

                    const duplexMatch = line.match(/(full|half|auto)-duplex/i);
                    if (duplexMatch) currentInterface.duplex = duplexMatch[1];

                    // Description
                    const descMatch = line.match(/Description:\s*(.+)$/i);
                    if (descMatch) currentInterface.description = descMatch[1].trim();
                }

                // Parse transceiver info
                if (line.match(/transceiver|sfp|temperature|tx power|rx power/i)) {
                    parseTransceiverLine(line, data);
                }
            }
        }

        // Aruba parser
        function parseAruba(input, data) {
            const lines = input.split('\n');
            let currentInterface = null;

            for (let line of lines) {
                // Aruba interface format varies by OS version
                // Format: 1/1/1  Up    10GbE    Full
                const intfMatch = line.match(/^(\d+\/\d+\/\d+)\s+(Up|Down|Disabled)/i);
                if (intfMatch) {
                    currentInterface = {
                        name: intfMatch[1],
                        status: intfMatch[2].toLowerCase(),
                        lineProtocol: intfMatch[2].toLowerCase(),
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: '',
                        duplex: '',
                        description: ''
                    };

                    // Try to parse speed/duplex from same line
                    const speedMatch = line.match(/(\d+[MG]bE?)/i);
                    if (speedMatch) currentInterface.speed = speedMatch[1];

                    const duplexMatch = line.match(/(Full|Half)/i);
                    if (duplexMatch) currentInterface.duplex = duplexMatch[1];

                    data.interfaces.push(currentInterface);
                }
            }
        }

        // Juniper parser
        function parseJuniper(input, data) {
            const lines = input.split('\n');

            for (let line of lines) {
                // Juniper format: ge-0/0/0    up    up
                const intfMatch = line.match(/^([\w-]+\/\d+\/\d+\/\d+|[\w-]+\/\d+\/\d+)\s+(up|down)/i);
                if (intfMatch) {
                    const intf = {
                        name: intfMatch[1],
                        status: intfMatch[2].toLowerCase(),
                        lineProtocol: 'up',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: '',
                        duplex: '',
                        description: ''
                    };

                    // Parse additional info from line
                    const parts = line.split(/\s+/);
                    if (parts[2]) intf.lineProtocol = parts[2].toLowerCase();

                    data.interfaces.push(intf);
                }
            }
        }

        // SONiC parser — supports Broadcom SONiC 4.x panel-port naming (Eth1/X)
        function parseSonic(input, data) {
            const lines = input.split('\n');

            // Section state tracking
            let inVersionSection = false;
            let inStatusSection = false;
            let inCountersSection = false;
            let inTransceiverSection = false;

            // Transceiver block state
            let currentTransceiver = null;
            let inChannelMonitor = false;
            let inModuleMonitor = false;

            // Counter lookup: interface name -> counter object for later merging
            const counterMap = {};

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];
                const trimmed = line.trim();

                // --- Hostname detection from shell prompt ---
                if (!data.metadata.hostname) {
                    const promptMatch = line.match(/^([\w][\w.\-:]+)#\s/);
                    if (promptMatch) {
                        data.metadata.hostname = promptMatch[1];
                    }
                }

                // --- Section detection from shell prompt lines ---
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+version/i)) {
                    inVersionSection = true;
                    inStatusSection = false;
                    inCountersSection = false;
                    inTransceiverSection = false;
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    continue;
                }
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+interfaces?\s+status/i)) {
                    inStatusSection = true;
                    inVersionSection = false;
                    inCountersSection = false;
                    inTransceiverSection = false;
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    continue;
                }
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+interfaces?\s+counters/i)) {
                    inCountersSection = true;
                    inStatusSection = false;
                    inVersionSection = false;
                    inTransceiverSection = false;
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    continue;
                }
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+interfaces?\s+transceiver/i)) {
                    inTransceiverSection = true;
                    inStatusSection = false;
                    inVersionSection = false;
                    inCountersSection = false;
                    continue;
                }
                // Any other prompt line ends current section
                if (line.match(/^[\w][\w.\-:]+#\s*\S/)) {
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    inVersionSection = false;
                    inStatusSection = false;
                    inCountersSection = false;
                    inTransceiverSection = false;
                    continue;
                }

                // ======== SHOW VERSION ========
                if (inVersionSection) {
                    const versionMatch = line.match(/^Software Version\s*:\s*(.+)/i);
                    if (versionMatch) data.metadata.version = versionMatch[1].trim();

                    const hwskuMatch = line.match(/^HwSKU\s*:\s*(.+)/i);
                    if (hwskuMatch) data.metadata.model = hwskuMatch[1].trim();

                    const serialMatch = line.match(/^Serial Number\s*:\s*(.+)/i);
                    if (serialMatch) data.metadata.serial = serialMatch[1].trim();

                    const platformMatch = line.match(/^Platform\s*:\s*(.+)/i);
                    if (platformMatch && !data.metadata.platform) {
                        data.metadata.platform = platformMatch[1].trim();
                    }
                    continue;
                }

                // ======== SHOW INTERFACE STATUS ========
                if (inStatusSection) {
                    // Skip separator and header lines
                    if (trimmed.match(/^-{5,}$/) || trimmed.match(/^Name\s+Description/i)) continue;
                    if (!trimmed) continue;

                    // Parse: Name  Description  Oper  Reason  AutoNeg  Speed  MTU  AlternateName
                    // Use 2+ spaces as column delimiter (SONiC space-padded table format)
                    const statusMatch = line.match(/^(Eth\d+\/\d+(?:\/\d+)?|PortChannel\d+)\s{2,}/i);
                    if (statusMatch) {
                        const name = statusMatch[1];
                        const cols = trimmed.split(/\s{2,}/);
                        // cols[0]=name, cols[1]=description, cols[2]=oper, cols[3]=reason,
                        // cols[4]=autoneg, cols[5]=speed, cols[6]=mtu, cols[7]=altname
                        const oper = (cols[2] || '').toLowerCase();
                        const reason = (cols[3] || '').toLowerCase();
                        const speedRaw = cols[5] || '';
                        const mtu = cols[6] || '';
                        const description = (cols[1] || '').trim();

                        let status = oper; // 'up' or 'down'
                        if (reason === 'admin-down') status = 'admin-down';

                        // Format speed from Mbps integer (e.g. 25000 -> 25G, 100000 -> 100G)
                        let speed = '';
                        const speedNum = parseInt(speedRaw);
                        if (!isNaN(speedNum) && speedNum > 0) {
                            speed = speedNum >= 1000 ? `${speedNum / 1000}G` : `${speedNum}M`;
                        }

                        const intf = {
                            name: name,
                            status: status,
                            lineProtocol: status,
                            reason: reason,
                            inputErrors: 0,
                            outputErrors: 0,
                            crc: 0,
                            drops: 0,
                            collisions: 0,
                            rxOk: 0,
                            txOk: 0,
                            speed: speed,
                            mtu: mtu,
                            duplex: '',
                            description: description === '-' ? '' : description
                        };
                        data.interfaces.push(intf);
                    }
                    continue;
                }

                // ======== SHOW INTERFACE COUNTERS ========
                if (inCountersSection) {
                    // Skip header/separator lines
                    if (trimmed.match(/^-{5,}$/) || trimmed.match(/^Interface\s+State/i)) continue;
                    if (!trimmed) continue;

                    // Format: Eth1/1  U  rxOk  rxErr  rxDrp  rxOversize  txOk  txErr  txDrp  txOversize
                    const counterMatch = line.match(
                        /^(Eth\d+\/\d+(?:\/\d+)?|PortChannel\d+)\s+(U|D)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/i
                    );
                    if (counterMatch) {
                        counterMap[counterMatch[1]] = {
                            state: counterMatch[2].toUpperCase() === 'U' ? 'up' : 'down',
                            rxOk: parseInt(counterMatch[3]),
                            rxErr: parseInt(counterMatch[4]),
                            rxDrp: parseInt(counterMatch[5]),
                            txOk: parseInt(counterMatch[7]),
                            txErr: parseInt(counterMatch[8]),
                            txDrp: parseInt(counterMatch[9])
                        };
                    }
                    continue;
                }

                // ======== SHOW INTERFACE TRANSCEIVER DOM ========
                if (inTransceiverSection) {
                    // Port header: "Port 1/1" or "Port 1/55/1"
                    const portMatch = trimmed.match(/^Port\s+(\d+\/\d+(?:\/\d+)?)\s*$/i);
                    if (portMatch) {
                        if (currentTransceiver && currentTransceiver.identifier) {
                            data.transceivers.push(currentTransceiver);
                        }
                        // Map "Port 1/1" -> interface name "Eth1/1"
                        currentTransceiver = {
                            port: 'Eth' + portMatch[1],
                            portLabel: 'Port ' + portMatch[1],
                            identifier: null,
                            vendorName: '',
                            vendorPart: '',
                            wavelength: '',
                            temperature: null,
                            vcc: null,
                            rxPower: null,
                            txBias: null,
                            txPower: null,
                            domSupported: true
                        };
                        inChannelMonitor = false;
                        inModuleMonitor = false;
                        continue;
                    }

                    if (currentTransceiver) {
                        if (trimmed === 'None detected') {
                            // Skip ports with no transceiver installed
                            currentTransceiver = null;
                            continue;
                        }
                        if (trimmed === 'DOM is not supported') {
                            currentTransceiver.domSupported = false;
                            data.transceivers.push(currentTransceiver);
                            currentTransceiver = null;
                            continue;
                        }

                        // Dashed separator lines inside transceiver block — skip
                        if (trimmed.match(/^-{5,}$/)) continue;

                        // Section context: ChannelMonitorValues / ModuleMonitorValues / ThresholdValues
                        if (trimmed === 'ChannelMonitorValues:') {
                            inChannelMonitor = true;
                            inModuleMonitor = false;
                            continue;
                        }
                        if (trimmed === 'ModuleMonitorValues:') {
                            inModuleMonitor = true;
                            inChannelMonitor = false;
                            continue;
                        }
                        if (trimmed.match(/ThresholdValues:/)) {
                            inChannelMonitor = false;
                            inModuleMonitor = false;
                            continue;
                        }

                        // Key: Value pairs
                        const kvMatch = trimmed.match(/^(\w[\w\s]+?)\s*:\s*(.+)$/);
                        if (kvMatch) {
                            const key = kvMatch[1].trim();
                            const val = kvMatch[2].trim();
                            switch (key) {
                                case 'Identifier':   currentTransceiver.identifier = val; break;
                                case 'Vendor Name':  currentTransceiver.vendorName = val; break;
                                case 'Vendor Part':  currentTransceiver.vendorPart = val; break;
                                case 'Wavelength':   currentTransceiver.wavelength = val; break;
                                case 'Temperature':
                                    if (inModuleMonitor || inChannelMonitor) {
                                        currentTransceiver.temperature = parseFloat(val);
                                    }
                                    break;
                                case 'Vcc':         currentTransceiver.vcc = parseFloat(val); break;
                                case 'Rx1Power':    currentTransceiver.rxPower = parseFloat(val); break;
                                case 'Tx1Power':    currentTransceiver.txPower = parseFloat(val); break;
                                case 'Tx1Bias':     currentTransceiver.txBias = parseFloat(val); break;
                            }
                        }
                    }
                    continue;
                }
            }

            // Push last transceiver block if still pending
            if (currentTransceiver && currentTransceiver.identifier) {
                data.transceivers.push(currentTransceiver);
            }

            // Merge counter data into interface objects matched by name
            data.interfaces.forEach(intf => {
                const c = counterMap[intf.name];
                if (c) {
                    intf.inputErrors = c.rxErr;
                    intf.outputErrors = c.txErr;
                    intf.drops = c.rxDrp + c.txDrp;
                    intf.rxOk = c.rxOk;
                    intf.txOk = c.txOk;
                }
            });
        }

        // Dell parser
        function parseDell(input, data) {
            // Similar to Cisco but with slight variations
            parseCisco(input, data); // Reuse Cisco parser as base
        }

        // Fortigate parser
        function parseFortigate(input, data) {
            const lines = input.split('\n');

            for (let line of lines) {
                // Fortigate format varies
                const intfMatch = line.match(/^(port\d+|wan\d+|lan\d+|internal)\s+(\d+[MG])/i);
                if (intfMatch) {
                    const intf = {
                        name: intfMatch[1],
                        status: 'up', // Need to determine from context
                        lineProtocol: 'up',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: intfMatch[2],
                        duplex: '',
                        description: ''
                    };
                    data.interfaces.push(intf);
                }
            }
        }

        // Palo Alto parser
        function parsePaloAlto(input, data) {
            const lines = input.split('\n');

            for (let line of lines) {
                // Palo Alto format
                const intfMatch = line.match(/^(ethernet\d+\/\d+)\s+(\d+[MG])/i);
                if (intfMatch) {
                    const intf = {
                        name: intfMatch[1],
                        status: 'up',
                        lineProtocol: 'up',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: intfMatch[2],
                        duplex: '',
                        description: ''
                    };
                    data.interfaces.push(intf);
                }
            }
        }

        // Parse transceiver information
        function parseTransceiverLine(line, data) {
            // This is a simplified parser - expand based on needs
            const tempMatch = line.match(/(\d+\.?\d*)\s*C\s+temperature/i);
            const txMatch = line.match(/TX.*?(-?\d+\.?\d*)\s*dBm/i);
            const rxMatch = line.match(/RX.*?(-?\d+\.?\d*)\s*dBm/i);

            if (tempMatch || txMatch || rxMatch) {
                // Add transceiver data
            }
        }

        // Organize interfaces by chassis/slot/port
        function organizeInterfacesByChassis(data) {
            data.chassis = {};

            data.interfaces.forEach(intf => {
                const parsed = parseInterfaceName(intf.name);
                if (!parsed) return;

                const slotKey = `${parsed.chassis}/${parsed.slot}`;

                if (!data.chassis[slotKey]) {
                    data.chassis[slotKey] = {
                        chassis: parsed.chassis,
                        slot: parsed.slot,
                        ports: []
                    };
                }

                data.chassis[slotKey].ports.push({
                    port: parsed.port,
                    interface: intf
                });
            });

            // Sort ports within each slot
            Object.values(data.chassis).forEach(slot => {
                slot.ports.sort((a, b) => a.port - b.port);
            });
        }

        // Parse interface name to extract chassis/slot/port
        function parseInterfaceName(name) {
            // Skip non-physical interfaces
            const skipPatterns = [
                /^vlan/i,
                /^loopback/i,
                /^tunnel/i,
                /^port-channel/i,
                /^portchannel/i,
                /^po\d+$/i,
                /^ae\d+$/i,
                /^lag\d+$/i,
                /^bvi/i,
                /^irb/i,
                /^bridge/i,
                /^null/i,
                /^management$/i,
                /^mgmt$/i
            ];

            for (let pattern of skipPatterns) {
                if (pattern.test(name)) {
                    return null; // Exclude from chassis visualization
                }
            }

            // Cisco format: GigabitEthernet1/0/1, TenGigabitEthernet1/1/1
            let match = name.match(/(\w+)(\d+)\/(\d+)\/(\d+)/);
            if (match) {
                return {
                    type: match[1],
                    chassis: parseInt(match[2]),
                    slot: parseInt(match[3]),
                    port: parseInt(match[4])
                };
            }

            // Aruba format: 1/1/1
            match = name.match(/^(\d+)\/(\d+)\/(\d+)$/);
            if (match) {
                return {
                    type: 'Port',
                    chassis: parseInt(match[1]),
                    slot: parseInt(match[2]),
                    port: parseInt(match[3])
                };
            }

            // Juniper format: ge-0/0/0, xe-1/2/3
            match = name.match(/([xg]e)-(\d+)\/(\d+)\/(\d+)/i);
            if (match) {
                return {
                    type: match[1],
                    chassis: parseInt(match[2]),
                    slot: parseInt(match[3]),
                    port: parseInt(match[4])
                };
            }

            // SONiC panel-port format: Eth1/1, Eth1/55/1 (breakout sub-port)
            match = name.match(/^Eth(\d+)\/(\d+)(?:\/(\d+))?$/i);
            if (match) {
                const chassis = parseInt(match[1]);
                const panelPort = parseInt(match[2]);
                const subPort = match[3] ? parseInt(match[3]) : 0;
                if (subPort > 0) {
                    // Breakout: group under the parent panel port as slot
                    return { type: 'Eth', chassis: chassis, slot: panelPort, port: subPort };
                }
                return { type: 'Eth', chassis: chassis, slot: 0, port: panelPort };
            }

            // SONiC legacy format: Ethernet0
            match = name.match(/^Ethernet(\d+)$/i);
            if (match) {
                const portNum = parseInt(match[1]);
                return {
                    type: 'Ethernet',
                    chassis: 0,
                    slot: Math.floor(portNum / 48), // Assume 48 ports per slot
                    port: (portNum % 48)
                };
            }

            // Fortigate format: port1, port2
            match = name.match(/^port(\d+)$/i);
            if (match) {
                const portNum = parseInt(match[1]);
                return {
                    type: 'Port',
                    chassis: 0,
                    slot: Math.floor((portNum - 1) / 24),
                    port: ((portNum - 1) % 24) + 1
                };
            }

            // Palo Alto format: ethernet1/1
            match = name.match(/^ethernet(\d+)\/(\d+)$/i);
            if (match) {
                return {
                    type: 'Ethernet',
                    chassis: 0,
                    slot: parseInt(match[1]),
                    port: parseInt(match[2])
                };
            }

            // Dell/Generic format: Te 1/0/1
            match = name.match(/^(?:Te|Gi|Fo|Eth)\s*(\d+)\/(\d+)\/(\d+)$/i);
            if (match) {
                return {
                    type: 'Port',
                    chassis: parseInt(match[1]),
                    slot: parseInt(match[2]),
                    port: parseInt(match[3])
                };
            }

            // Fallback: exclude from chassis view
            return null;
        }

        // Calculate health metrics with proper error rate analysis
        function calculateHealthMetrics(data) {
            let totalPorts = data.interfaces.length;
            let healthyPorts = 0;
            let warningPorts = 0;
            let errorPorts = 0;
            let downPorts = 0;
            let unknownPorts = 0;
            let errorInterfaces = [];
            let warningInterfaces = [];

            data.interfaces.forEach(intf => {
                const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                const totalPackets = (intf.inputPackets || 0) + (intf.outputPackets || 0);

                // Calculate error rate if we have packet counts
                let errorRate = 0;
                if (totalPackets > 0) {
                    errorRate = (totalErrors / totalPackets) * 100;
                }

                // Classify interface health
                if (intf.status === 'down' || intf.status === 'admin-down') {
                    downPorts++;
                } else if (totalPackets === 0 && totalErrors === 0) {
                    // Interface up but no traffic - consider healthy
                    healthyPorts++;
                } else if (totalPackets > 0) {
                    // We have packet counts - use error rate
                    if (errorRate < 0.01) {
                        healthyPorts++; // < 0.01% error rate
                    } else if (errorRate < 0.1) {
                        warningPorts++;
                        warningInterfaces.push(intf.name);
                    } else {
                        errorPorts++;
                        errorInterfaces.push(intf.name);
                    }
                } else {
                    // No packet counts - use absolute error thresholds
                    if (totalErrors === 0) {
                        healthyPorts++;
                    } else if (totalErrors < 1000) {
                        warningPorts++;
                        warningInterfaces.push(intf.name);
                    } else {
                        errorPorts++;
                        errorInterfaces.push(intf.name);
                    }
                }
            });

            // Calculate health score (0-100)
            // Only count interfaces that are administratively up
            const activeInterfaceCount = totalPorts - downPorts;
            const healthScore = activeInterfaceCount > 0
                ? Math.round((healthyPorts / activeInterfaceCount) * 100) || 0
                : 0;

            data.healthMetrics = {
                totalPorts,
                healthyPorts,
                warningPorts,
                errorPorts,
                downPorts,
                healthScore,
                errorInterfaces: errorInterfaces,
                warningInterfaces: warningInterfaces
            };
        }

        // Display results
        function displayResults(data) {
            displaySummaryCards(data);
            displayHealthScore(data);
            displayChassisVisualization(data);
            displayInterfaceTable(data);

            if (data.transceivers.length > 0) {
                displayTransceiverInfo(data);
            }
        }

        // Display summary cards
        function displaySummaryCards(data) {
            const container = document.getElementById('summaryCards');
            const metrics = data.healthMetrics;

            container.innerHTML = `
                <div class="summary-card success">
                    <h3>Healthy Ports</h3>
                    <div class="value">${metrics.healthyPorts}</div>
                </div>
                <div class="summary-card warning">
                    <h3>Warning Ports</h3>
                    <div class="value">${metrics.warningPorts}</div>
                </div>
                <div class="summary-card error">
                    <h3>Error Ports</h3>
                    <div class="value">${metrics.errorPorts}</div>
                </div>
                <div class="summary-card">
                    <h3>Down Ports</h3>
                    <div class="value">${metrics.downPorts}</div>
                </div>
                <div class="summary-card">
                    <h3>Total Ports</h3>
                    <div class="value">${metrics.totalPorts}</div>
                </div>
            `;
        }

        // Display health score
        function displayHealthScore(data) {
            const scoreElement = document.getElementById('healthScore');
            const score = data.healthMetrics.healthScore;

            scoreElement.className = 'health-score';

            let statusIcon = '';
            let statusText = '';
            if (score >= 95) {
                scoreElement.classList.add('excellent');
                statusIcon = '✓';
                statusText = 'Excellent';
            } else if (score >= 85) {
                scoreElement.classList.add('good');
                statusIcon = '✓';
                statusText = 'Good';
            } else if (score >= 70) {
                scoreElement.classList.add('fair');
                statusIcon = '⚠';
                statusText = 'Fair';
            } else if (score >= 50) {
                scoreElement.classList.add('poor');
                statusIcon = '⚠';
                statusText = 'Poor';
            } else {
                scoreElement.classList.add('critical');
                statusIcon = '✗';
                statusText = 'Critical';
            }

            scoreElement.innerHTML = `${statusIcon} ${score}<br><span style="font-size: 18px; opacity: 0.8;">${statusText}</span>`;

            // Update health interpretation
            const metrics = data.healthMetrics;
            updateHealthInterpretation(
                score,
                metrics.healthyPorts,
                metrics.warningPorts,
                metrics.errorPorts,
                metrics.downPorts,
                metrics.errorInterfaces,
                metrics.warningInterfaces
            );
        }

        // Display chassis visualization
        function displayChassisVisualization(data) {
            const container = document.getElementById('chassisContainer');
            container.innerHTML = '';

            // Sort slots
            const slots = Object.keys(data.chassis).sort();

            if (slots.length === 0) {
                container.innerHTML = '<p>No chassis information available. Interfaces may not follow standard naming convention.</p>';
                return;
            }

            slots.forEach(slotKey => {
                const slot = data.chassis[slotKey];
                const slotDiv = document.createElement('div');
                slotDiv.className = 'slot-row';

                // Calculate stats for this slot
                const stats = {
                    total: slot.ports.length,
                    up: 0,
                    down: 0,
                    errors: 0,
                    warnings: 0
                };

                slot.ports.forEach(port => {
                    const intf = port.interface;
                    if (intf.status === 'up') stats.up++;
                    else if (intf.status === 'down') stats.down++;

                    const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                    if (totalErrors >= 100) stats.errors++;
                    else if (totalErrors > 0) stats.warnings++;
                });

                slotDiv.innerHTML = `
                    <div class="slot-header">
                        <div class="slot-title">Chassis ${slot.chassis} / Slot ${slot.slot}</div>
                        <div class="slot-stats">
                            ${stats.total} ports |
                            ${stats.up} up |
                            ${stats.down} down |
                            ${stats.errors} errors |
                            ${stats.warnings} warnings
                        </div>
                    </div>
                    <div class="ports-grid" id="slot-${slotKey}"></div>
                `;

                container.appendChild(slotDiv);

                // Add ports
                const portsGrid = document.getElementById(`slot-${slotKey}`);
                slot.ports.forEach(port => {
                    const intf = port.interface;
                    const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;

                    let statusClass = 'error';
                    if (intf.status === 'admin-down') statusClass = 'disabled';
                    else if (intf.status === 'down') statusClass = 'down';
                    else if (totalErrors === 0) statusClass = '';
                    else if (totalErrors < 100) statusClass = 'warning';

                    const portBox = document.createElement('div');
                    portBox.className = `port-box ${statusClass}`;
                    portBox.innerHTML = `
                        ${port.port}
                        <div class="port-tooltip">
                            ${intf.name}<br>
                            Status: ${intf.status}<br>
                            Errors: ${totalErrors}<br>
                            ${intf.speed ? `Speed: ${intf.speed}<br>` : ''}
                            ${intf.description ? `Desc: ${intf.description}` : ''}
                        </div>
                    `;
                    portsGrid.appendChild(portBox);
                });
            });
        }

        // Display interface table
        function displayInterfaceTable(data) {
            const tbody = document.getElementById('interfaceTableBody');
            tbody.innerHTML = '';

            // Populate slot filter
            const slotFilter = document.getElementById('filterSlot');
            const slots = [...new Set(data.interfaces.map(intf => {
                const parsed = parseInterfaceName(intf.name);
                return parsed ? `${parsed.chassis}/${parsed.slot}` : '0/0';
            }))].sort();

            slotFilter.innerHTML = '<option value="all">All Slots</option>' +
                slots.map(slot => `<option value="${slot}">Slot ${slot}</option>`).join('');

            // Display all interfaces initially
            displayFilteredInterfaces(data.interfaces);

            // Attach filter handlers
            document.getElementById('filterStatus').addEventListener('change', () => filterInterfaces(data));
            document.getElementById('filterSlot').addEventListener('change', () => filterInterfaces(data));
            document.getElementById('filterSearch').addEventListener('input', () => filterInterfaces(data));
        }

        // Display filtered interfaces
        function displayFilteredInterfaces(interfaces) {
            const tbody = document.getElementById('interfaceTableBody');
            tbody.innerHTML = '';

            interfaces.forEach(intf => {
                const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;

                let statusClass = 'status-up';
                if (intf.status.includes('down')) {
                    statusClass = intf.status === 'admin-down' ? 'status-admin-down' : 'status-down';
                }

                const row = document.createElement('tr');
                row.innerHTML = `
                    <td><strong>${intf.name}</strong>${intf.description ? `<br><small>${intf.description}</small>` : ''}</td>
                    <td><span class="status-badge ${statusClass}">${intf.status}</span></td>
                    <td>${intf.speed}${intf.duplex ? ` / ${intf.duplex}` : ''}</td>
                    <td class="${intf.inputErrors > 0 ? 'error-count' : ''}">${intf.inputErrors}</td>
                    <td class="${intf.outputErrors > 0 ? 'error-count' : ''}">${intf.outputErrors}</td>
                    <td class="${intf.crc > 0 ? 'error-count' : ''}">${intf.crc}</td>
                    <td class="${intf.drops > 0 ? 'error-count' : ''}">${intf.drops}</td>
                    <td class="${intf.collisions > 0 ? 'error-count' : ''}">${intf.collisions}</td>
                `;
                tbody.appendChild(row);
            });
        }

        // Filter interfaces
        function filterInterfaces(data) {
            const statusFilter = document.getElementById('filterStatus').value;
            const slotFilter = document.getElementById('filterSlot').value;
            const searchFilter = document.getElementById('filterSearch').value.toLowerCase();

            let filtered = data.interfaces.filter(intf => {
                // Status filter
                if (statusFilter !== 'all') {
                    if (statusFilter === 'up' && intf.status !== 'up') return false;
                    if (statusFilter === 'down' && !intf.status.includes('down')) return false;
                    if (statusFilter === 'errors') {
                        const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                        if (totalErrors === 0) return false;
                    }
                }

                // Slot filter
                if (slotFilter !== 'all') {
                    const parsed = parseInterfaceName(intf.name);
                    if (!parsed) return false;
                    const slot = `${parsed.chassis}/${parsed.slot}`;
                    if (slot !== slotFilter) return false;
                }

                // Search filter
                if (searchFilter && !intf.name.toLowerCase().includes(searchFilter)) {
                    return false;
                }

                return true;
            });

            displayFilteredInterfaces(filtered);
        }

        // Display transceiver info
        function displayTransceiverInfo(data) {
            const section = document.getElementById('transceiverInfo');
            const grid = document.getElementById('transceiverGrid');
            section.style.display = 'block';
            grid.innerHTML = '';

            data.transceivers.forEach(trans => {
                const card = document.createElement('div');

                // Classify card by optical Rx power thresholds
                const rxPowerLow = trans.rxPower !== null && trans.rxPower < -15;
                const rxPowerVeryLow = trans.rxPower !== null && trans.rxPower < -30;
                let cardClass = 'transceiver-card';
                if (rxPowerVeryLow) cardClass += ' error';
                else if (rxPowerLow) cardClass += ' warning';
                card.className = cardClass;

                // Build DOM section based on available data
                let domHtml = '';
                if (trans.domSupported === false) {
                    domHtml = '<p style="color:#666;font-style:italic;margin:8px 0 0">DOM not supported</p>';
                } else if (!trans.identifier) {
                    domHtml = '<p style="color:#666;font-style:italic;margin:8px 0 0">No data</p>';
                } else {
                    const rxColor = rxPowerVeryLow ? '#dc3545' : rxPowerLow ? '#e6a817' : '#2d7a2d';
                    domHtml = `
                        <table style="width:100%;font-size:12px;border-collapse:collapse">
                            <tr>
                                <td style="padding:3px 0;color:#555">Rx Power</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600;color:${rxColor}">
                                    ${trans.rxPower !== null ? trans.rxPower.toFixed(2) + ' dBm' : 'N/A'}
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:3px 0;color:#555">Tx Power</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">
                                    ${trans.txPower !== null ? trans.txPower.toFixed(2) + ' dBm' : 'N/A'}
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:3px 0;color:#555">Tx Bias</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">
                                    ${trans.txBias !== null ? trans.txBias.toFixed(2) + ' mA' : 'N/A'}
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:3px 0;color:#555">Temperature</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">
                                    ${trans.temperature !== null ? trans.temperature.toFixed(1) + ' \u00b0C' : 'N/A'}
                                </td>
                            </tr>
                            ${trans.vcc !== null ? `<tr>
                                <td style="padding:3px 0;color:#555">Vcc</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">${trans.vcc.toFixed(3)} V</td>
                            </tr>` : ''}
                        </table>
                    `;
                }

                card.innerHTML = `
                    <div style="font-size:14px;font-weight:bold;margin:0 0 6px">${trans.portLabel || trans.port}</div>
                    ${trans.identifier ? `<div style="font-size:11px;color:#555;margin-bottom:4px">${trans.identifier}</div>` : ''}
                    ${trans.vendorName || trans.vendorPart ? `<div style="font-size:11px;color:#444;margin-bottom:4px">${trans.vendorName} ${trans.vendorPart}</div>` : ''}
                    ${trans.wavelength ? `<div style="font-size:11px;color:#666;margin-bottom:8px">\u03bb ${trans.wavelength}</div>` : ''}
                    ${domHtml}
                `;
                grid.appendChild(card);
            });
        }

        // Export functions
        document.getElementById('exportJsonBtn').addEventListener('click', function() {
            if (!parsedData) return;
            const json = JSON.stringify(parsedData, null, 2);
            downloadFile(json, 'network-analysis.json', 'application/json');
        });

        document.getElementById('exportCsvBtn').addEventListener('click', function() {
            if (!parsedData) return;
            let csv = 'Interface,Status,Speed,Duplex,Input Errors,Output Errors,CRC,Drops,Collisions\n';
            parsedData.interfaces.forEach(intf => {
                csv += `${intf.name},${intf.status},${intf.speed},${intf.duplex},${intf.inputErrors},${intf.outputErrors},${intf.crc},${intf.drops},${intf.collisions}\n`;
            });
            downloadFile(csv, 'network-analysis.csv', 'text/csv');
        });

        document.getElementById('exportReportBtn').addEventListener('click', function() {
            if (!parsedData) return;
            let report = `Network Health Analysis Report\n`;
            report += `Generated: ${new Date().toLocaleString()}\n`;
            report += `Vendor: ${parsedData.vendor}\n`;
            report += `Hostname: ${parsedData.metadata.hostname}\n`;
            report += `\n=== Summary ===\n`;
            report += `Total Ports: ${parsedData.healthMetrics.totalPorts}\n`;
            report += `Healthy: ${parsedData.healthMetrics.healthyPorts}\n`;
            report += `Warnings: ${parsedData.healthMetrics.warningPorts}\n`;
            report += `Errors: ${parsedData.healthMetrics.errorPorts}\n`;
            report += `Down: ${parsedData.healthMetrics.downPorts}\n`;
            report += `Health Score: ${parsedData.healthMetrics.healthScore}/100\n`;
            report += `\n=== Interfaces with Errors ===\n`;
            parsedData.interfaces.forEach(intf => {
                const total = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                if (total > 0) {
                    report += `${intf.name}: ${total} total errors (In: ${intf.inputErrors}, Out: ${intf.outputErrors}, CRC: ${intf.crc}, Drops: ${intf.drops})\n`;
                }
            });
            downloadFile(report, 'network-analysis.txt', 'text/plain');
        });

        function downloadFile(content, filename, mimeType) {
            const blob = new Blob([content], { type: mimeType });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // Generate sample data for testing
        function generateSampleData() {
            let sample = `Router# show interfaces
GigabitEthernet1/0/1 is up, line protocol is up (connected)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f001
  Description: Uplink to Core
  Internet address is 10.0.1.1/30
  MTU 1500 bytes, BW 1000000 Kbit/sec, DLY 10 usec,
     reliability 255/255, txload 1/255, rxload 1/255
  Encapsulation ARPA, loopback not set
  Keepalive set (10 sec)
  Full-duplex, 1000Mb/s, media type is 10/100/1000BaseTX
  input flow-control is off, output flow-control is unsupported
  ARP type: ARPA, ARP Timeout 04:00:00
  Last input 00:00:01, output 00:00:00, output hang never
  Last clearing of "show interface" counters never
  Input queue: 0/75/0/0 (size/max/drops/flushes); Total output drops: 0
  Queueing strategy: fifo
  Output queue: 0/40 (size/max)
  5 minute input rate 1000 bits/sec, 2 packets/sec
  5 minute output rate 2000 bits/sec, 3 packets/sec
     1234567 packets input, 98765432 bytes, 0 no buffer
     Received 1234 broadcasts (0 IP multicasts)
     0 runts, 0 giants, 0 throttles
     0 input errors, 0 CRC, 0 frame, 0 overrun, 0 ignored
     0 watchdog, 123 multicast, 0 pause input
     0 input packets with dribble condition detected
     2345678 packets output, 123456789 bytes, 0 underruns
     0 output errors, 0 collisions, 1 interface resets
     0 unknown protocol drops
     0 babbles, 0 late collision, 0 deferred
     0 lost carrier, 0 no carrier, 0 pause output
     0 output buffer failures, 0 output buffers swapped out

GigabitEthernet1/0/2 is up, line protocol is up (connected)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f002
  Description: Server VLAN
  MTU 1500 bytes, BW 1000000 Kbit/sec
  Full-duplex, 1000Mb/s
     1000 packets input, 50000 bytes
     5 input errors, 2 CRC, 3 frame, 0 overrun, 0 ignored
     2000 packets output, 100000 bytes
     10 output errors, 5 collisions

GigabitEthernet1/0/3 is down, line protocol is down (notconnect)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f003
     0 packets input, 0 bytes
     0 input errors, 0 CRC, 0 frame, 0 overrun, 0 ignored
     0 packets output, 0 bytes
     0 output errors, 0 collisions

`;

            // Add more interfaces for realistic testing
            for (let slot = 0; slot <= 2; slot++) {
                for (let port = 1; port <= 48; port++) {
                    const hasErrors = Math.random() > 0.9;
                    const isDown = Math.random() > 0.95;
                    const status = isDown ? 'down' : 'up';
                    const inputErrors = hasErrors ? Math.floor(Math.random() * 500) : 0;
                    const crc = hasErrors ? Math.floor(Math.random() * 50) : 0;

                    sample += `
GigabitEthernet1/${slot}/${port} is ${status}, line protocol is ${status}
  Hardware is Gigabit Ethernet
  Full-duplex, 1000Mb/s
     ${Math.floor(Math.random() * 1000000)} packets input
     ${inputErrors} input errors, ${crc} CRC, 0 frame
     ${Math.floor(Math.random() * 1000000)} packets output
     ${hasErrors ? Math.floor(Math.random() * 100) : 0} output errors
`;
                }
            }

            return sample;
        }
    </script>