.. หัวเรื่อง: ผู้ช่วย BOM
.. ทาก: ผู้ช่วยบอม
.. วันที่: 05-01-2026 15:00:00 UTC
.. แท็ก: ฮาร์ดแวร์ การวางแผน bom เครื่องคิดเลข เครื่องมือ เซิร์ฟเวอร์ สวิตช์ เราเตอร์ ไฟร์วอลล์
..หมวดหมู่ : เครื่องมือ
.. ลิงค์:
.. คำอธิบาย: เครื่องมือวางแผนรายการวัสดุฮาร์ดแวร์สำหรับเซิร์ฟเวอร์ สวิตช์ เราเตอร์ และอุปกรณ์เครือข่าย คำนวณพลังงาน, BTU, TDP, พื้นที่แร็ค และต้นทุนสำหรับการปรับใช้ศูนย์ข้อมูล
.. ประเภท: ข้อความ
<style>
/* Main Container */
.bom-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

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

.bom-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5em;
}

.bom-header p {
    margin: 0;
    opacity: 0.9;
}

/* Device Selector Panel */
.device-selector {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.selector-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-group-inline {
    flex: 1;
    min-width: 200px;
}

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

.form-control {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
}

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

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

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

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

.btn-success:hover {
    background: #45a049;
}

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

.btn-secondary:hover {
    background: #5a6268;
}

.btn-danger {
    background: #dc3545;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
}

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

/* Action Buttons */
.action-buttons {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* BOM Table */
.bom-table-container {
    overflow-x: auto;
    margin-bottom: 30px;
}

.bom-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.bom-table thead {
    background: #667eea;
    color: white;
}

.bom-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #5568d3;
}

.bom-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
}

.bom-table tbody tr:hover {
    background: #f5f5f5;
}

.chassis-row {
    background: #f0f4ff;
    font-weight: 600;
}

.component-row {
    background: #fafbfc;
    font-size: 0.95em;
}

.component-row.collapsed {
    display: none;
}

.component-qty-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.btn-expand {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 5px;
}

.btn-expand:hover {
    background: #45a049;
}

/* Totals Panel */
.totals-panel {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

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

.total-item {
    text-align: center;
}

.total-item label {
    display: block;
    font-size: 0.9em;
    opacity: 0.9;
    margin-bottom: 5px;
}

.total-item .value {
    font-size: 2em;
    font-weight: 700;
}

.total-item .unit {
    font-size: 0.8em;
    opacity: 0.9;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

/* Loading State */
.loading {
    display: none;
    text-align: center;
    padding: 20px;
}

.loading.active {
    display: block;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    .bom-header {
        background: none;
        color: black;
        border-bottom: 3px solid black;
    }

    .bom-table {
        font-size: 10pt;
    }

    .chassis-row, .component-row {
        page-break-inside: avoid;
    }

    @page {
        margin: 0.5in;
    }
}

/* Category Tiles */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.category-tile {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 22px 16px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.category-tile:hover {
    border-color: #667eea;
    background: #f5f7ff;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
    transform: translateY(-2px);
}

.category-tile-icon {
    font-size: 2.4em;
    line-height: 1;
}

.category-tile-label {
    font-weight: 700;
    font-size: 1em;
    color: #333;
}

.category-tile-sub {
    font-size: 0.78em;
    color: #888;
    line-height: 1.4;
}

/* CSV Import */
.csv-import-container {
    margin-bottom: 20px;
}

.file-input-wrapper {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-right: 10px;
}

.file-input-wrapper input[type=file] {
    position: absolute;
    left: -9999px;
}

.file-input-label {
    display: inline-block;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.file-input-label:hover {
    background: #5a6268;
}

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

.modal-overlay.active {
    display: block;
}

.modal-content-wrapper {
    max-width: 1400px;
    margin: 30px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.8em;
}

.modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.modal-body {
    padding: 30px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Search and Filters */
.browser-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 300px;
}

.search-box input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.3s;
}

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

.filter-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.filter-section h4 {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    color: #333;
}

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

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

.filter-group label {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #555;
}

.filter-group select,
.filter-group input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    cursor: pointer;
}

.filter-checkboxes input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.filter-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* Product Table */
.product-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

.product-table thead {
    background: #667eea;
    color: white;
}

.product-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
}

.product-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.product-table th.sortable:hover {
    background: #5568d3;
}

.product-table th.sortable::after {
    content: ' ⇅';
    opacity: 0.5;
}

.product-table th.sort-asc::after {
    content: ' ▲';
    opacity: 1;
}

.product-table th.sort-desc::after {
    content: ' ▼';
    opacity: 1;
}

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

.product-table tbody tr {
    transition: background 0.2s;
}

.product-table tbody tr:hover {
    background: #f5f5f5;
}

.product-name {
    font-weight: 600;
    color: #333;
}

.product-vendor {
    color: #666;
    font-size: 0.9em;
}

.price-badge {
    background: #4CAF50;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}

.btn-select {
    padding: 8px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
    margin-right: 5px;
}

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

.btn-details {
    padding: 8px 15px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-details:hover {
    background: #5a6268;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.page-btn {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s;
}

.page-btn:hover {
    background: #f5f5f5;
    border-color: #667eea;
}

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

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    padding: 8px 15px;
    color: #666;
    font-size: 0.9em;
}

/* Product Details Modal */
.details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table tr {
    border-bottom: 1px solid #e0e0e0;
}

.specs-table td {
    padding: 10px;
}

.specs-table td:first-child {
    font-weight: 600;
    color: #555;
    width: 40%;
}

.specs-table td:last-child {
    color: #333;
}

.pricing-panel {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.vendor-price-item {
    background: white;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 2px solid #e0e0e0;
    transition: border-color 0.3s;
}

.vendor-price-item:hover {
    border-color: #667eea;
}

.vendor-price-item.best-price {
    border-color: #4CAF50;
    background: #f1f8f4;
}

.vendor-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.vendor-price {
    font-size: 1.3em;
    color: #4CAF50;
    font-weight: 700;
}

.vendor-stock {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
}

.best-price-badge {
    background: #4CAF50;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75em;
    margin-left: 8px;
}

/* Empty State */
.empty-products {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-products-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

/* Component Configuration Wizard */
.wizard-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1100;
    overflow-y: auto;
}

.wizard-modal.active {
    display: block;
}

.wizard-content {
    max-width: 1400px;
    margin: 30px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.4);
}

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

.wizard-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wizard-title {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0;
}

.wizard-subtitle {
    font-size: 0.9em;
    opacity: 0.9;
    margin-top: 5px;
}

.btn-back {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

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

.wizard-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    padding: 30px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.component-sections {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.component-section {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.component-section:hover {
    border-color: #667eea;
}

.section-header {
    background: #667eea;
    color: white;
    padding: 15px 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.section-header:hover {
    background: #5568d3;
}

.section-header .badge {
    background: rgba(255,255,255,0.25);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.9em;
}

.component-options {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.component-option {
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
    transition: all 0.3s;
}

.component-option:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.component-option.selected {
    border-color: #4CAF50;
    background: #f1f8f4;
}

.component-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #4CAF50;
}

.component-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.component-name {
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

.component-specs {
    font-size: 0.9em;
    color: #666;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.component-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover:not(:disabled) {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.qty-input {
    width: 55px;
    text-align: center;
    padding: 6px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
}

.component-price {
    color: #4CAF50;
    font-weight: 700;
    font-size: 1.1em;
}

.component-subtotal {
    color: #666;
    font-size: 0.85em;
}

.config-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    position: sticky;
    top: 0;
    height: fit-content;
    border: 2px solid #e0e0e0;
}

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

.summary-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1em;
    border-bottom: 2px solid #667eea;
    padding-bottom: 8px;
}

.summary-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.95em;
    color: #555;
}

.summary-item-name {
    flex: 1;
}

.summary-item-value {
    font-weight: 600;
    color: #333;
}

.summary-divider {
    border-top: 1px solid #ddd;
    margin: 10px 0;
}

.summary-item.total {
    border-top: 2px solid #333;
    margin-top: 10px;
    padding-top: 15px;
    font-weight: 700;
    font-size: 1.4em;
}

.summary-item.total .summary-item-value {
    color: #4CAF50;
}

.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    padding: 6px 10px;
    border-radius: 4px;
}

.requirement.met {
    color: #2e7d32;
    background: #e8f5e9;
}

.requirement.unmet {
    color: #c62828;
    background: #ffebee;
}

.requirement-icon {
    font-weight: 700;
    font-size: 1.1em;
}

.wizard-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.btn-wizard-primary {
    width: 100%;
    padding: 16px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

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

.btn-wizard-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-recommended {
    width: 100%;
    padding: 12px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-recommended:hover {
    background: #0b7dda;
    transform: translateY(-1px);
}

.empty-components {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-content-wrapper {
        margin: 10px;
        width: calc(100% - 20px);
    }

    .browser-controls {
        flex-direction: column;
    }

    .filter-groups {
        grid-template-columns: 1fr;
    }

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

    .product-table {
        font-size: 0.85em;
    }

    .product-table th,
    .product-table td {
        padding: 8px 6px;
    }

    .wizard-body {
        grid-template-columns: 1fr;
    }

    .config-summary {
        position: relative;
    }

    .component-option {
        grid-template-columns: auto 1fr;
        gap: 10px;
    }

    .component-controls {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* API unavailability error display */
.api-error-banner {
    background: #fde8e8;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    color: #721c24;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.api-error-banner .error-icon { font-size: 20px; flex-shrink: 0; }
.api-error-banner .error-text { flex: 1; }
.api-error-banner .error-title { font-weight: 600; margin-bottom: 4px; }
.api-error-banner .error-detail { font-size: 13px; opacity: 0.8; }
</style>
<div class="bom-container">
ส่วนหัว
<div class="bom-header">
<h1>ผู้ช่วย BOM</h1>
<p>เครื่องมือวางแผนรายการวัสดุฮาร์ดแวร์สำหรับการปรับใช้ศูนย์ข้อมูล คำนวณพลังงาน, BTU, TDP, พื้นที่ชั้นวาง และต้นทุนทั้งหมด</p>
</div>
ตัวเลือกอุปกรณ์
<div class="device-selector no-print">
<h3 style="margin-top: 0;">เพิ่มฮาร์ดแวร์ลงใน BOM</h3>
<p style="margin-bottom: 20px; color: #666;">คลิกหมวดหมู่เพื่อเรียกดูและเลือกผลิตภัณฑ์</p>
<div class="category-tiles">
<button class="category-tile" onclick="browseCategoryProducts('servers')">
<span class="category-tile-icon">🖥️</span>
<span class="category-tile-label">เซิร์ฟเวอร์</span>
<span class="category-tile-sub">เดลล์ · HPE · ซูเปอร์ไมโคร</span>
</button>
<button class="category-tile" onclick="showNetworkBrowser()">
<span class="category-tile-icon">🔌</span>
<span class="category-tile-label">เครือข่าย</span>
<span class="category-tile-sub">สวิตช์ · เราเตอร์ · ไฟร์วอลล์ · LB</span>
</button>
<button class="category-tile" onclick="browseCategoryProducts('desktops')">
<span class="category-tile-icon">🖥️</span>
<span class="category-tile-label">เดสก์ท็อป</span>
<span class="category-tile-sub">เดลล์ · เลอโนโว</span>
</button>
<button class="category-tile" onclick="browseCategoryProducts('laptops')">
<span class="category-tile-icon">💻</span>
<span class="category-tile-label">แล็ปท็อป</span>
<span class="category-tile-sub">เดลล์ · เลอโนโว</span>
</button>
<button class="category-tile" onclick="browseCategoryProducts('storage')">
<span class="category-tile-icon">💾</span>
<span class="category-tile-label">พื้นที่จัดเก็บ</span>
<span class="category-tile-sub">ซินโนโลยี · QNAP</span>
</button>
</div>
เครื่องมือเลือกหมวดหมู่ย่อยของเครือข่าย (แสดงแบบอินไลน์เมื่อคลิกไทล์เครือข่าย)
<div id="networkSubCategories" style="display:none; margin-top:18px;">
<p style="margin-bottom:12px; color:#555; font-weight:600;">เลือกประเภทอุปกรณ์เครือข่าย:</p>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="btn btn-primary" onclick="browseCategoryProducts('switches')">🔌 สวิตช์</button>
<button class="btn btn-primary" onclick="browseCategoryProducts('routers')">🌐 เราเตอร์</button>
<button class="btn btn-primary" onclick="browseCategoryProducts('firewalls')">🔥 ไฟร์วอลล์</button>
<button class="btn btn-primary" onclick="browseCategoryProducts('load-balancers')">⚖️ โหลดบาลานเซอร์</button>
<button class="btn btn-primary" onclick="browseCategoryProducts('wireless-controllers')">📡 คอนโทรลเลอร์ไร้สาย</button>
<button class="btn btn-secondary" onclick="hideNetworkBrowser()" style="margin-left:auto;">✕ ปิด</button>
</div>
</div>
</div>
ปุ่มการดำเนินการ
<div class="action-buttons no-print">
<div class="file-input-wrapper">
<input accept=".csv" id="csvImport" type="file"/>
<label class="file-input-label" for="csvImport">นำเข้า CSV</label>
</div>
<button class="btn btn-success" id="exportCSVBtn">ส่งออก CSV</button>
<button class="btn btn-secondary" id="printBtn" onclick="window.print()">พิมพ์ / บันทึก PDF</button>
<button class="btn btn-primary" id="shareBtn" onclick="generatePermalink()">🔗 แบ่งปัน BOM</button>
<button class="btn btn-secondary" onclick="saveBOMToLocalStorage(); alert('BOM saved to browser storage.')">💾 บันทึก BOM</button>
<button class="btn btn-danger" id="clearBOMBtn">ล้าง BOM</button>
</div>
กำลังโหลดสถานะ
<div class="loading" id="loadingState">
<p>กำลังโหลดข้อมูลฮาร์ดแวร์...</p>
</div>
ตาราง BOM
<div class="bom-table-container">
<table class="bom-table" id="bomTable">
<thead>
<tr>
<th>หมวดหมู่</th>
<th>ผู้ขาย</th>
<th>ยี่ห้อ/รุ่น</th>
<th>ส่วนประกอบ</th>
<th>จำนวน</th>
<th>กำลัง (วัตต์)</th>
<th>บีทียู</th>
<th>ทีดีพี (ญ)</th>
<th>แร็ค ยู</th>
<th>แกนซีพียู</th>
<th>หน่วยความจำ (GB)</th>
<th>น้ำหนัก (กก.)</th>
<th class="no-print">การดำเนินการ</th>
</tr>
</thead>
<tbody id="bomTableBody">
<tr class="empty-state">
<td colspan="13">
<div class="empty-state-icon">📦</div>
<p>ยังไม่มีอุปกรณ์ใน BOM เพิ่มฮาร์ดแวร์โดยใช้ตัวเลือกด้านบน</p>
</td>
</tr>
</tbody>
</table>
</div>
แผงผลรวม
<div class="totals-panel">
<h3 style="margin-top: 0;">ผลรวม BOM</h3>
<div class="totals-grid">
<div class="total-item">
<label>กำลังทั้งหมด</label>
<div class="value" id="totalPower">0</div>
<div class="unit">วัตต์</div>
</div>
<div class="total-item">
<label>รวมบีทียู</label>
<div class="value" id="totalBTU">0</div>
<div class="unit">บีทียู/ชม</div>
</div>
<div class="total-item">
<label>ค่า TDP ทั้งหมด</label>
<div class="value" id="totalTDP">0</div>
<div class="unit">วัตต์</div>
</div>
<div class="total-item">
<label>พื้นที่แร็คทั้งหมด</label>
<div class="value" id="totalRackUnits">0</div>
<div class="unit">U</div>
</div>
<div class="total-item">
<label>แกน CPU ทั้งหมด</label>
<div class="value" id="totalCores">—</div>
<div class="unit">แกน</div>
</div>
<div class="total-item">
<label>หน่วยความจำทั้งหมด</label>
<div class="value" id="totalMemory">—</div>
<div class="unit">ติดตั้งแล้ว</div>
</div>
<div class="total-item">
<label>น้ำหนักรวม</label>
<div class="value" id="totalWeight">—</div>
<div class="unit">กก</div>
</div>
</div>
</div>
</div>
โมดอลเบราว์เซอร์ผลิตภัณฑ์
<div class="modal-overlay" id="productBrowserModal">
<div class="modal-content-wrapper">
<div class="modal-header">
<h2 id="browserModalTitle">เรียกดูผลิตภัณฑ์</h2>
<button class="modal-close" onclick="closeProductBrowser()">×</button>
</div>
<div class="modal-body">
การควบคุมการค้นหาและตัวกรอง
<div class="browser-controls">
<div class="search-box">
<input id="productSearch" oninput="filterAndRenderProducts()" placeholder="Search products by name, vendor, or model..." type="text"/>
</div>
</div>
ตัวกรอง
<div class="filter-section">
<h4>ตัวกรอง</h4>
<div class="filter-groups">
<div class="filter-group">
<label>เรียงตาม</label>
<select id="sortSelect" onchange="filterAndRenderProducts()">
<option value="name-asc">ชื่อ (ก-ฮ)</option>
<option value="name-desc">ชื่อ (ศ-ก)</option>
<option value="price-asc">ราคา (ต่ำไปสูง)</option>
<option value="price-desc">ราคา (สูงไปต่ำ)</option>
<option value="power-asc">กำลัง (ต่ำไปสูง)</option>
<option value="power-desc">กำลัง (สูงไปต่ำ)</option>
</select>
</div>
<div class="filter-group">
<label>ช่วงราคา</label>
<input id="priceMin" oninput="filterAndRenderProducts()" placeholder="Min $" type="number"/>
</div>
<div class="filter-group">
<label> </label>
<input id="priceMax" oninput="filterAndRenderProducts()" placeholder="Max $" type="number"/>
</div>
</div>
<div class="filter-group" id="vendorFilters" style="margin-top: 15px;">
<label>ผู้ขาย</label>
<div class="filter-checkboxes" id="vendorCheckboxes"></div>
</div>
<div class="filter-actions">
<button class="btn btn-secondary" onclick="clearFilters()">ล้างตัวกรอง</button>
</div>
</div>
ตารางผลิตภัณฑ์
<div id="productTableContainer">
<table class="product-table" id="productBrowserTable">
<thead>
<tr>
<th class="sortable" data-sort="name">ผลิตภัณฑ์</th>
<th class="sortable" data-sort="vendor">ผู้ขาย</th>
<th class="sortable" data-sort="formFactor">ฟอร์มแฟกเตอร์</th>
<th class="sortable" data-sort="power">กำลัง (วัตต์)</th>
<th class="sortable" data-sort="rackUnits">แร็ค ยู</th>
<th class="sortable" data-sort="price">ราคา</th>
<th>การดำเนินการ</th>
</tr>
</thead>
<tbody id="productBrowserTableBody">
<tr>
<td colspan="7" style="text-align: center; padding: 40px;">กำลังโหลดผลิตภัณฑ์...</td>
</tr>
</tbody>
</table>
</div>
การแบ่งหน้า
<div class="pagination" id="browserPagination"></div>
</div>
</div>
</div>
รายละเอียดสินค้า Modal
<div class="modal-overlay" id="productDetailsModal">
<div class="modal-content-wrapper">
<div class="modal-header">
<h2 id="detailsModalTitle">รายละเอียดสินค้า</h2>
<button class="modal-close" onclick="closeProductDetails()">×</button>
</div>
<div class="modal-body">
<div class="details-grid">
<div class="specs-column">
<h3>ข้อมูลจำเพาะ</h3>
<table class="specs-table" id="productSpecsTable">
<tbody></tbody>
</table>
</div>
<div class="pricing-column">
<h3>ราคา</h3>
<div class="pricing-panel" id="productPricingPanel"></div>
<div style="margin-top: 20px;">
<button class="btn btn-success" onclick="addSelectedProductToBOM()" style="width: 100%; padding: 15px; font-size: 16px;">เพิ่มลงใน BOM</button>
</div>
</div>
</div>
</div>
</div>
</div>
Modal ตัวช่วยสร้างการกำหนดค่าเซิร์ฟเวอร์
<div class="wizard-modal" id="serverConfigWizard">
<div class="wizard-content">
<div class="wizard-header">
<div class="wizard-header-left">
<button class="btn-back" onclick="closeServerConfigWizard()">← ย้อนกลับ</button>
<div>
<h2 class="wizard-title" id="wizardTitle">กำหนดค่าเซิร์ฟเวอร์</h2>
<p class="wizard-subtitle" id="wizardSubtitle">เลือกส่วนประกอบสำหรับเซิร์ฟเวอร์ของคุณ</p>
</div>
</div>
<button class="modal-close" onclick="closeServerConfigWizard()">×</button>
</div>
<div class="wizard-body">
<div class="component-sections" id="componentSections">
ส่วนส่วนประกอบจะแสดงผลที่นี่
</div>
<div class="config-summary" id="configSummary">
<div class="summary-section">
<h4>สรุปการกำหนดค่า</h4>
<div class="summary-items" id="summaryItems">
<div class="summary-item">
<span class="summary-item-name">แชสซี</span>
<span class="summary-item-value" id="summaryChassis">-</span>
</div>
</div>
</div>
<div class="summary-section">
<h4>ความต้องการ</h4>
<div class="requirements-list" id="requirementsList">
ข้อกำหนดจะแสดงที่นี่
</div>
</div>
<div class="summary-section">
<h4>ผลรวม</h4>
<div class="summary-items">
<div class="summary-item">
<span class="summary-item-name">พลัง</span>
<span class="summary-item-value" id="summaryPower">0 วัตต์</span>
</div>
<div class="summary-item">
<span class="summary-item-name">บีทียู</span>
<span class="summary-item-value" id="summaryBTU">0 บีทียู/ชม</span>
</div>
<div class="summary-item">
<span class="summary-item-name">ทีดีพี</span>
<span class="summary-item-value" id="summaryTDP">0 วัตต์</span>
</div>
<div class="summary-item">
<span class="summary-item-name">ติดตั้งหน่วยความจำแล้ว</span>
<span class="summary-item-value" id="summaryMemCeiling">0 กิกะไบต์</span>
</div>
<div class="summary-divider"></div>
<div class="summary-item total">
<span class="summary-item-name">ราคารวม</span>
<span class="summary-item-value" id="summaryPrice">$0</span>
</div>
</div>
</div>
<div class="wizard-actions">
<button class="btn-recommended" onclick="applyRecommendedConfig()">⭐ ใช้การกำหนดค่าที่แนะนำ</button>
<button class="btn-wizard-primary" disabled="" id="addToBOMButton" onclick="addConfiguredServerToBOM()">เพิ่มลงใน BOM</button>
</div>
</div>
</div>
</div>
</div>
การกำหนดค่า BOM API: ตั้งค่าเนื้อหาเป็น URL ฐาน API เพื่อเปิดใช้งานโหมด API เช่น http://localhost:5000
<meta content="" name="bom-api-base"/>
<script>
'use strict';

// Configuration
const CONFIG = {
    categories: {
        servers: { vendors: ['dell', 'hpe', 'supermicro'], label: 'Servers', icon: '🖥️' },
        switches: { vendors: ['cisco', 'edgecore'], label: 'Switches', icon: '🔌' },
        routers: { vendors: ['cisco'], label: 'Routers', icon: '🌐' },
        firewalls: { vendors: ['paloalto'], label: 'Firewalls', icon: '🔥' },
        desktops: { vendors: ['dell', 'lenovo'], label: 'Desktops', icon: '🖱️' },
        laptops: { vendors: ['dell', 'lenovo'], label: 'Laptops', icon: '💻' },
        storage: { vendors: ['synology', 'qnap'], label: 'Storage Arrays', icon: '💾' },
        'wireless-controllers': { vendors: [], label: 'Wireless Controllers', icon: '📡' },
        'load-balancers': { vendors: [], label: 'Load Balancers', icon: '⚖️' }
    },
    cacheEnabled: true,
    cacheTTL: 3600000,
    btuConversion: 3.412,
    apiBase: null     // set by meta[name="bom-api-base"] at runtime
};

// Cache for loaded data
const dataCache = new Map();

// ==================== API Module ====================
// Initialized immediately; reads <meta name="bom-api-base"> to set CONFIG.apiBase.
const bomApi = (() => {
    const meta = document.querySelector('meta[name="bom-api-base"]');
    if (meta && meta.content) {
        CONFIG.apiBase = meta.content.replace(/\/$/, ''); // strip trailing slash
    }

    async function get(path, params = {}) {
        if (!CONFIG.apiBase) return null;
        const url = new URL(CONFIG.apiBase + '/api/v1' + path);
        Object.entries(params).forEach(([k, v]) => {
            if (v !== undefined && v !== null) url.searchParams.set(k, String(v));
        });
        const cacheKey = url.toString();
        if (CONFIG.cacheEnabled && dataCache.has(cacheKey)) {
            return dataCache.get(cacheKey);
        }
        try {
            const resp = await fetch(url.toString());
            if (!resp.ok) throw new Error(`HTTP ${resp.status} for ${path}`);
            const data = await resp.json();
            if (CONFIG.cacheEnabled) {
                dataCache.set(cacheKey, data);
                setTimeout(() => dataCache.delete(cacheKey), CONFIG.cacheTTL);
            }
            return data;
        } catch (e) {
            console.error('bomApi.get error:', e);
            return null;
        }
    }

    return { get };
})();

// ==================== API Adapter Module ====================

/**
 * Convert a single SystemComponent dict (from API detail) to the legacy
 * component shape the wizard uses.
 */
function componentApiToLegacy(sc) {
    const comp = sc.component;
    const sp = comp.specs || {};
    const power = sp.tdp_w || sp.power_w || 0;
    const result = {
        id: comp.slug,
        name: comp.name,
        quantity: sc.default_quantity,
        maxQuantity: sc.max_quantity,
        power: power,
        tdp: power,
        price: comp.base_price || 0,
    };
    // CPU-specific
    if (sp.cores !== undefined) result.cores = sp.cores;
    if (sp.threads !== undefined) result.threads = sp.threads;
    if (sp.base_freq_ghz) result.baseFreq = `${sp.base_freq_ghz} GHz`;
    if (sp.socket) result.socket = sp.socket;
    // RAM-specific
    if (sp.capacity_gb !== undefined) result.capacity = `${sp.capacity_gb}GB`;
    if (sp.memory_type) result.type = sp.speed_mhz
        ? `${sp.memory_type}-${sp.speed_mhz}` : sp.memory_type;
    // Storage-specific
    if (sp.interface) result.interface = sp.interface;
    // NIC-specific
    if (sp.ports !== undefined) result.ports = sp.ports;
    if (sp.speed_gbe) result.speed = `${sp.speed_gbe} GbE`;
    // GPU-specific
    if (sp.vram_gb !== undefined) result.memory = `${sp.vram_gb}GB`;
    return result;
}

/**
 * Convert API detail response to the legacy components dict:
 *   { cpu: [...], ram: [...], storage: [...], nic: [...], gpu: [] }
 *
 * Both default_components and optional_components are merged.
 */
function systemDetailToComponents(detail) {
    const groups = { cpu: [], ram: [], storage: [], nic: [], gpu: [] };
    const allSc = [
        ...(detail.default_components || []),
        ...(detail.optional_components || []),
    ];
    for (const sc of allSc) {
        if (!sc.component) continue;
        const t = sc.component.type;
        if (groups[t]) {
            groups[t].push(componentApiToLegacy(sc));
        }
    }
    return groups;
}

/**
 * Convert an API system list item (no components) to the legacy catalog
 * product shape used by createProductRow, renderProductSpecs, selectProduct.
 */
function systemApiToProduct(sys) {
    const cs = sys.chassis_spec || {};
    return {
        id: sys.id,
        apiId: sys.id,       // presence of apiId signals "came from API"
        vendor: sys.vendor || '',
        key: sys.slug,
        name: sys.name,
        model: sys.model_number,
        type: sys.type,
        category: sys.category,
        formFactor: cs.form_factor,
        rackUnits: cs.rack_units,
        minPrice: sys.base_price || 0,
        maxPrice: sys.base_price || 0,
        chassis: {
            formFactor: cs.form_factor,
            rackUnits: cs.rack_units,
            basePower: cs.base_power_w,
            maxPower: cs.max_power_w,
            baseTDP: cs.base_tdp_w,
            maxTDP: cs.max_tdp_w,
            socket: cs.socket,
            cpuSockets: cs.cpu_sockets,
            memorySlots: cs.memory_slots,
            price: sys.base_price,
        },
        // Components are empty until lazy-loaded via selectProduct()
        components: {},
    };
}

/**
 * Smoke-tests for the adapter functions.
 * Run in browser console: bomAdapterTests()
 */
function bomAdapterTests() {
    let passed = 0; let failed = 0;
    function assert(condition, label) {
        if (condition) { console.log('  PASS:', label); passed++; }
        else { console.error('  FAIL:', label); failed++; }
    }

    console.group('bomAdapterTests');

    // componentApiToLegacy — CPU
    const cpuSc = {
        default_quantity: 2, max_quantity: 2,
        component: {
            slug: 'xeon-gold-6338', name: 'Intel Xeon Gold 6338',
            type: 'cpu', base_price: 2900,
            specs: { cores: 32, threads: 64, tdp_w: 205, base_freq_ghz: '2.0', socket: 'Intel_LGA4189' }
        }
    };
    const cpu = componentApiToLegacy(cpuSc);
    assert(cpu.id === 'xeon-gold-6338', 'cpu.id from slug');
    assert(cpu.quantity === 2, 'cpu.quantity from default_quantity');
    assert(cpu.maxQuantity === 2, 'cpu.maxQuantity');
    assert(cpu.power === 205, 'cpu.power from tdp_w');
    assert(cpu.tdp === 205, 'cpu.tdp from tdp_w');
    assert(cpu.cores === 32, 'cpu.cores');
    assert(cpu.baseFreq === '2.0 GHz', 'cpu.baseFreq formatted');
    assert(cpu.socket === 'Intel_LGA4189', 'cpu.socket');
    assert(cpu.price === 2900, 'cpu.price');

    // systemDetailToComponents
    const detail = {
        default_components: [cpuSc],
        optional_components: [{
            default_quantity: 0, max_quantity: 2,
            component: { slug: 'xeon-silver-4314', name: 'Intel Xeon Silver 4314',
                type: 'cpu', base_price: 1200, specs: { tdp_w: 135, cores: 16 } }
        }]
    };
    const groups = systemDetailToComponents(detail);
    assert(groups.cpu.length === 2, 'systemDetailToComponents merges default+optional');
    assert(groups.cpu[0].quantity === 2, 'default component has quantity=2');
    assert(groups.cpu[1].quantity === 0, 'optional component has quantity=0');
    assert(Array.isArray(groups.ram), 'ram array present');
    assert(Array.isArray(groups.gpu), 'gpu array present');

    // systemApiToProduct
    const apiSys = {
        id: 1, name: 'Dell PowerEdge R750', slug: 'dell-poweredge-r750',
        model_number: 'PowerEdge-R750', type: 'server', vendor: 'Dell',
        category: 'servers', base_price: 5000,
        chassis_spec: { form_factor: '2U Rack', rack_units: 2,
            base_power_w: 750, max_power_w: 1400, socket: 'Intel_LGA4189',
            cpu_sockets: 2, memory_slots: 32 }
    };
    const prod = systemApiToProduct(apiSys);
    assert(prod.apiId === 1, 'product.apiId set');
    assert(prod.key === 'dell-poweredge-r750', 'product.key from slug');
    assert(prod.model === 'PowerEdge-R750', 'product.model from model_number');
    assert(prod.chassis.formFactor === '2U Rack', 'chassis.formFactor camelCase');
    assert(prod.chassis.basePower === 750, 'chassis.basePower from base_power_w');
    assert(prod.chassis.socket === 'Intel_LGA4189', 'chassis.socket');
    assert(prod.minPrice === 5000, 'product.minPrice from base_price');
    assert(typeof prod.components === 'object', 'components is empty object');

    console.log(`\n${passed} passed, ${failed} failed`);
    console.groupEnd();
    return failed === 0;
}

/**
 * Show an error inside the product browser table body.
 * Replaces whatever is currently in the tbody with an error panel + retry button.
 * @param {string} message - Short human-readable error title
 * @param {string} category - Current category slug (used for retry onclick)
 */
function showBrowserError(message, category) {
    const tbody = document.getElementById('productBrowserTableBody');
    const safeCategory = (category || '').replace(/'/g, '');
    tbody.innerHTML = `
        <tr>
            <td colspan="7">
                <div class="api-error-banner">
                    <span class="error-icon">⚠</span>
                    <div class="error-text">
                        <div class="error-title">${message}</div>
                        <div class="error-detail">The hardware catalog service is unreachable. Check your network connection or try again shortly.</div>
                    </div>
                    ${safeCategory ? `<button class="btn btn-secondary" onclick="browseCategoryProducts('${safeCategory}')">Retry</button>` : ''}
                </div>
            </td>
        </tr>`;
}

/**
 * Show a persistent error banner at the top of .bom-container.
 * Used for page-load errors (e.g. permalink restore failure).
 * @param {string} message - Short human-readable error title
 */
function showPageError(message) {
    const existing = document.getElementById('bom-api-error');
    if (existing) existing.remove();
    const banner = document.createElement('div');
    banner.id = 'bom-api-error';
    banner.className = 'api-error-banner';
    banner.style.margin = '16px 0';
    banner.innerHTML = `
        <span class="error-icon">⚠</span>
        <div class="error-text">
            <div class="error-title">${message}</div>
            <div class="error-detail">The hardware catalog service is unreachable. Reload the page once the service is restored.</div>
        </div>`;
    const container = document.querySelector('.bom-container');
    container.insertBefore(banner, container.firstChild);
}

// Platform compatibility data (loaded once)
let platformsData = null;

async function loadPlatforms() {
    if (platformsData) return platformsData;
    try {
        const resp = await fetch('/data/hardware/platforms.json');
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
        platformsData = await resp.json();
    } catch (e) {
        console.error('Failed to load platforms.json:', e);
        platformsData = { platforms: {} };
    }
    return platformsData;
}

function getPlatform(socketId) {
    return platformsData?.platforms?.[socketId] || null;
}

// BOM State
const bomState = {
    devices: [],
    nextId: 1
};

// Product Browser State
const browserState = {
    currentCategory: '',
    allProducts: [],
    filteredProducts: [],
    currentPage: 1,
    productsPerPage: 25,
    sortBy: 'name-asc',
    filters: {
        search: '',
        vendors: [],
        priceMin: null,
        priceMax: null
    },
    selectedProduct: null
};

// Wizard State
const wizardState = {
    currentProduct: null,
    configuration: {
        chassis: null,
        components: {
            cpu: [],
            ram: [],
            storage: [],
            nic: [],
            gpu: []
        }
    }
};

// ==================== Data Loading Module ====================

function getVendors(category) {
    return CONFIG.categories[category]?.vendors || [];
}

// ==================== BOM State Management ====================

function addDevice(deviceData, quantity = 1) {
    const device = {
        id: bomState.nextId++,
        quantity: parseInt(quantity) || 1,
        ...deviceData,
        expandedComponents: false
    };

    bomState.devices.push(device);
    renderBOMTable();
    calculateTotals();
    saveBOMToLocalStorage();
}

function updateDeviceQuantity(deviceId, newQuantity) {
    const device = bomState.devices.find(d => d.id === deviceId);
    if (device) {
        device.quantity = parseInt(newQuantity) || 1;
        renderBOMTable();
        calculateTotals();
        saveBOMToLocalStorage();
    }
}

function removeDevice(deviceId) {
    const index = bomState.devices.findIndex(d => d.id === deviceId);
    if (index > -1) {
        if (confirm('Remove this device from the BOM?')) {
            bomState.devices.splice(index, 1);
            renderBOMTable();
            calculateTotals();
            saveBOMToLocalStorage();
        }
    }
}

function updateComponentQuantity(deviceId, componentType, componentId, newQuantity) {
    const device = bomState.devices.find(d => d.id === deviceId);
    if (device && device.components && device.components[componentType]) {
        const component = device.components[componentType].find(c => c.id === componentId);
        if (component) {
            component.quantity = parseInt(newQuantity) || 0;
            renderBOMTable();
            calculateTotals();
            saveBOMToLocalStorage();
        }
    }
}

function saveBOMToLocalStorage() {
    try {
        const saveData = {
            version: 2,
            savedAt: new Date().toISOString(),
            devices: bomState.devices
        };
        localStorage.setItem('bom-assistant-state', JSON.stringify(saveData));
    } catch (e) {
        console.error('Failed to save BOM to localStorage:', e);
    }
}

function loadBOMFromLocalStorage() {
    try {
        const raw = localStorage.getItem('bom-assistant-state');
        if (!raw) return false;
        const saveData = JSON.parse(raw);
        if (!saveData?.devices?.length) return false;
        bomState.devices = saveData.devices;
        bomState.nextId = Math.max(...saveData.devices.map(d => d.id), 0) + 1;
        renderBOMTable();
        calculateTotals();
        return true;
    } catch (e) {
        console.error('Failed to load BOM from localStorage:', e);
        return false;
    }
}

function toggleComponents(deviceId) {
    const device = bomState.devices.find(d => d.id === deviceId);
    if (device) {
        device.expandedComponents = !device.expandedComponents;
        renderBOMTable();
    }
}

function clearBOM() {
    if (bomState.devices.length > 0 && confirm('Clear all devices from the BOM?')) {
        bomState.devices = [];
        bomState.nextId = 1;
        renderBOMTable();
        calculateTotals();
    }
}

function calculateTotals() {
    let totalPower = 0;
    let totalBTU = 0;
    let totalTDP = 0;
    let totalRackUnits = 0;
    let totalCores = 0;
    let totalMemoryGb = 0;
    let totalWeightKg = 0;

    bomState.devices.forEach(device => {
        const deviceQty = device.quantity || 1;

        if (device.chassis) {
            // Chassis-based device (server, desktop, laptop)
            totalPower += (device.chassis?.basePower || 0) * deviceQty;
            totalTDP += (device.chassis?.baseTDP || 0) * deviceQty;
            totalRackUnits += (device.chassis?.rackUnits || 0) * deviceQty;
            totalWeightKg += (device.chassis?.weight?.kg || 0) * deviceQty;

            if (device.components) {
                ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(compType => {
                    if (device.components[compType]) {
                        device.components[compType].forEach(comp => {
                            const compQty = (comp.quantity || 0) * deviceQty;
                            totalPower += (comp.power || 0) * compQty;
                            totalTDP += (comp.tdp || comp.power || 0) * compQty;
                            totalWeightKg += (comp.weight?.kg || 0) * compQty;
                            if (compType === 'cpu') {
                                totalCores += (comp.cores || 0) * compQty;
                            }
                            if (compType === 'ram') {
                                totalMemoryGb += (comp.capacityGb || 0) * compQty;
                            }
                        });
                    }
                });
            }
        } else {
            // Flat devices (switches, routers, firewalls, NAS)
            totalPower += (device.power || 0) * deviceQty;
            totalTDP += (device.tdp || device.power || 0) * deviceQty;
            totalRackUnits += (device.rackUnits || 0) * deviceQty;
            totalWeightKg += (device.weight?.kg || 0) * deviceQty;
        }
    });

    // Convert power to BTU
    totalBTU = totalPower * CONFIG.btuConversion;

    // Update UI
    document.getElementById('totalPower').textContent = Math.round(totalPower).toLocaleString();
    document.getElementById('totalBTU').textContent = Math.round(totalBTU).toLocaleString();
    document.getElementById('totalTDP').textContent = Math.round(totalTDP).toLocaleString();
    document.getElementById('totalRackUnits').textContent = totalRackUnits.toLocaleString();
    document.getElementById('totalCores').textContent = totalCores > 0 ? totalCores.toLocaleString() : '—';
    document.getElementById('totalMemory').textContent = totalMemoryGb > 0 ? `${totalMemoryGb.toLocaleString()} GB` : '—';
    document.getElementById('totalWeight').textContent = totalWeightKg > 0 ? `${totalWeightKg.toFixed(1)} kg` : '—';
}

// ==================== Table Rendering Module ====================

function renderBOMTable() {
    const tbody = document.getElementById('bomTableBody');
    tbody.innerHTML = '';

    if (bomState.devices.length === 0) {
        tbody.innerHTML = `
            <tr class="empty-state">
                <td colspan="13">
                    <div class="empty-state-icon">📦</div>
                    <p>No devices in BOM yet. Add hardware using the selector above.</p>
                </td>
            </tr>
        `;
        return;
    }

    bomState.devices.forEach(device => {
        if (device.components && (device.components.cpu?.length > 0 || device.components.ram?.length > 0)) {
            renderServerDevice(tbody, device);
        } else {
            renderSimpleDevice(tbody, device);
        }
    });
}

function renderServerDevice(tbody, device) {
    // Calculate component count for rowspan
    let componentCount = 0;
    if (device.expandedComponents && device.components) {
        ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(compType => {
            if (device.components[compType]) {
                componentCount += device.components[compType].length;
            }
        });
    }

    const rowspan = 1 + (device.expandedComponents ? componentCount : 0);

    // Chassis row
    const chassisRow = document.createElement('tr');
    chassisRow.className = 'chassis-row';
    chassisRow.dataset.deviceId = device.id;

    const chassisBTU = Math.round((device.chassis?.basePower || 0) * CONFIG.btuConversion);

    const deviceQty = device.quantity || 1;
    const chassisPower = (device.chassis?.basePower || 0) * deviceQty;
    const chassisBTU_total = Math.round(chassisPower * CONFIG.btuConversion);
    const chassisTDP = (device.chassis?.baseTDP || 0) * deviceQty;
    const chassisRackUnits = (device.chassis?.rackUnits || 0) * deviceQty;

    chassisRow.innerHTML = `
        <td rowspan="${rowspan}">${formatCategory(device.category)}</td>
        <td rowspan="${rowspan}">${escapeHtml(device.vendor)}</td>
        <td rowspan="${rowspan}">${escapeHtml(device.chassis?.model || device.name)}</td>
        <td>Chassis</td>
        <td rowspan="${rowspan}">
            <input type="number" class="component-qty-input"
                   value="${deviceQty}"
                   min="1"
                   onchange="updateDeviceQuantity(${device.id}, this.value)">
        </td>
        <td>${chassisPower}</td>
        <td>${chassisBTU_total}</td>
        <td>${chassisTDP}</td>
        <td>${chassisRackUnits}</td>
        <td rowspan="${rowspan}">${getDeviceTotalCores(device) * (device.quantity || 1) > 0 ? (getDeviceTotalCores(device) * (device.quantity || 1)).toLocaleString() : '-'}</td>
        <td rowspan="${rowspan}">${getDeviceTotalMemoryGb(device) * (device.quantity || 1) > 0 ? (getDeviceTotalMemoryGb(device) * (device.quantity || 1)).toLocaleString() + ' GB' : '-'}</td>
        <td rowspan="${rowspan}">${((device.chassis?.weight?.kg || 0) + getDeviceComponentsWeightKg(device)) * (device.quantity || 1) > 0 ? (((device.chassis?.weight?.kg || 0) + getDeviceComponentsWeightKg(device)) * (device.quantity || 1)).toFixed(1) + ' kg' : '-'}</td>
        <td rowspan="${rowspan}" class="no-print">
            <button class="btn-expand" onclick="toggleComponents(${device.id})">${device.expandedComponents ? '−' : '+'}</button>
            <button class="btn-danger" onclick="removeDevice(${device.id})">Delete</button>
        </td>
    `;
    tbody.appendChild(chassisRow);

    // Component rows (if expanded)
    if (device.expandedComponents && device.components) {
        ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(compType => {
            if (device.components[compType]) {
                device.components[compType].forEach(comp => {
                    const compRow = document.createElement('tr');
                    compRow.className = 'component-row';

                    const compPower = (comp.power || 0) * comp.quantity * deviceQty;
                    const compBTU = Math.round(compPower * CONFIG.btuConversion);
                    const compTDP = (comp.tdp || comp.power || 0) * comp.quantity * deviceQty;

                    compRow.innerHTML = `
                        <td>${compType.toUpperCase()}: ${escapeHtml(comp.name)}</td>
                        <td>
                            <input type="number" class="component-qty-input"
                                   value="${comp.quantity}"
                                   min="0"
                                   max="${comp.maxQuantity}"
                                   onchange="updateComponentQuantity(${device.id}, '${compType}', '${comp.id}', this.value)">
                        </td>
                        <td>${compPower}</td>
                        <td>${compBTU}</td>
                        <td>${compTDP}</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                    `;
                    tbody.appendChild(compRow);
                });
            }
        });
    }
}

function getDeviceComponentsWeightKg(device) {
    if (!device.components) return 0;
    let w = 0;
    ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(t => {
        (device.components[t] || []).forEach(c => {
            w += (c.weight?.kg || 0) * (c.quantity || 0);
        });
    });
    return w;
}

function getDeviceTotalCores(device) {
    if (!device.components?.cpu) return 0;
    return device.components.cpu.reduce((sum, c) => sum + (c.cores || 0) * (c.quantity || 0), 0);
}

function getDeviceTotalMemoryGb(device) {
    if (!device.components?.ram) return 0;
    return device.components.ram.reduce((sum, r) => sum + (r.capacityGb || 0) * (r.quantity || 0), 0);
}

function renderSimpleDevice(tbody, device) {
    const row = document.createElement('tr');
    row.dataset.deviceId = device.id;

    const deviceQty = device.quantity || 1;
    const power = (device.power || 0) * deviceQty;
    const btu = Math.round(power * CONFIG.btuConversion);
    const tdp = (device.tdp || device.power || 0) * deviceQty;
    const rackUnits = (device.rackUnits || 0) * deviceQty;

    row.innerHTML = `
        <td>${formatCategory(device.category)}</td>
        <td>${escapeHtml(device.vendor)}</td>
        <td>${escapeHtml(device.model || device.name)}</td>
        <td>-</td>
        <td>
            <input type="number" class="component-qty-input"
                   value="${deviceQty}"
                   min="1"
                   onchange="updateDeviceQuantity(${device.id}, this.value)">
        </td>
        <td>${power}</td>
        <td>${btu}</td>
        <td>${tdp}</td>
        <td>${rackUnits}</td>
        <td>-</td>
        <td>-</td>
        <td>${((device.weight?.kg || 0) * (device.quantity || 1)).toFixed(1)}</td>
        <td class="no-print">
            <button class="btn-danger" onclick="removeDevice(${device.id})">Delete</button>
        </td>
    `;
    tbody.appendChild(row);
}

// ==================== CSV Export/Import Module ====================

function exportToCSV() {
    if (bomState.devices.length === 0) {
        alert('No devices in BOM to export.');
        return;
    }

    const headers = ['Category', 'Vendor', 'Make', 'Model', 'Component', 'Device Qty', 'Component Qty', 'Power(W)', 'BTU', 'TDP', 'Rack Units', 'Datasheet URL'];
    const rows = [];

    bomState.devices.forEach(device => {
        const deviceQty = device.quantity || 1;

        if (device.type === 'server') {
            // Chassis row
            const chassisPower = (device.chassis?.basePower || 0) * deviceQty;
            const chassisBTU = Math.round(chassisPower * CONFIG.btuConversion);
            const chassisTDP = (device.chassis?.baseTDP || 0) * deviceQty;
            const chassisRackUnits = (device.chassis?.rackUnits || 0) * deviceQty;

            rows.push([
                device.category,
                device.vendor,
                device.chassis?.model || '',
                device.chassis?.model || '',
                'Chassis',
                deviceQty,
                1,
                chassisPower,
                chassisBTU,
                chassisTDP,
                chassisRackUnits,
                device.chassis?.datasheet || ''
            ]);

            // Component rows
            if (device.components) {
                ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(compType => {
                    if (device.components[compType]) {
                        device.components[compType].forEach(comp => {
                            if (comp.quantity > 0) {
                                const compPower = (comp.power || 0) * comp.quantity * deviceQty;
                                const compBTU = Math.round(compPower * CONFIG.btuConversion);
                                const compTDP = (comp.tdp || comp.power || 0) * comp.quantity * deviceQty;

                                rows.push([
                                    device.category,
                                    device.vendor,
                                    device.chassis?.model || '',
                                    device.chassis?.model || '',
                                    `${compType}: ${comp.name}`,
                                    deviceQty,
                                    comp.quantity,
                                    compPower,
                                    compBTU,
                                    compTDP,
                                    0,
                                    ''
                                ]);
                            }
                        });
                    }
                });
            }
        } else {
            // Simple device
            const power = (device.power || 0) * deviceQty;
            const btu = Math.round(power * CONFIG.btuConversion);
            const tdp = (device.tdp || device.power || 0) * deviceQty;
            const rackUnits = (device.rackUnits || 0) * deviceQty;

            rows.push([
                device.category,
                device.vendor,
                device.model || device.name,
                device.model || device.name,
                '',
                deviceQty,
                1,
                power,
                btu,
                tdp,
                rackUnits,
                device.datasheet || ''
            ]);
        }
    });

    // Build CSV
    const csv = [headers, ...rows].map(row =>
        row.map(cell => {
            // Escape CSV values
            const str = String(cell);
            if (str.includes(',') || str.includes('"') || str.includes('\n')) {
                return '"' + str.replace(/"/g, '""') + '"';
            }
            return str;
        }).join(',')
    ).join('\n');

    // Download
    downloadCSV(csv, 'bom-export.csv');
}

function downloadCSV(csv, filename) {
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// ==================== Product Browser Module ====================

async function browseCategoryProducts(category) {
    browserState.currentCategory = category;
    browserState.currentPage = 1;

    document.getElementById('browserModalTitle').textContent = `Browse ${formatCategory(category)}`;
    document.getElementById('productBrowserModal').classList.add('active');
    document.getElementById('productBrowserTableBody').innerHTML =
        '<tr><td colspan="7" style="text-align:center;padding:40px;">Loading products...</td></tr>';

    try {
        await loadCatalog(category);
    } catch (e) {
        console.error('loadCatalog failed:', e);
        showBrowserError('Hardware catalog is currently unavailable.', category);
        return;
    }

    initializeVendorFilters();
    filterAndRenderProducts();
}

async function loadCatalog(category) {
    if (!CONFIG.apiBase) {
        throw new Error('No API base configured — set the bom-api-base meta tag content attribute.');
    }
    const cacheKey = `api:catalog:${category}`;
    if (CONFIG.cacheEnabled && dataCache.has(cacheKey)) {
        browserState.allProducts = dataCache.get(cacheKey);
        return;
    }
    const data = await bomApi.get('/systems', { category, limit: 200 });
    if (!data) {
        throw new Error(`Catalog unavailable for "${category}"`);
    }
    const products = (data.systems || []).map(systemApiToProduct);
    browserState.allProducts = products;
    if (CONFIG.cacheEnabled) {
        dataCache.set(cacheKey, products);
        setTimeout(() => dataCache.delete(cacheKey), CONFIG.cacheTTL);
    }
}

function initializeVendorFilters() {
    const vendors = [...new Set(browserState.allProducts.map(p => p.vendor))].sort();
    const checkboxContainer = document.getElementById('vendorCheckboxes');
    checkboxContainer.innerHTML = '';

    vendors.forEach(vendor => {
        const label = document.createElement('label');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.value = vendor;
        checkbox.checked = true;
        checkbox.onchange = filterAndRenderProducts;

        label.appendChild(checkbox);
        label.appendChild(document.createTextNode(vendor));
        checkboxContainer.appendChild(label);
    });
}

function filterAndRenderProducts() {
    // Get filter values
    const searchTerm = document.getElementById('productSearch').value.toLowerCase();
    const priceMin = parseFloat(document.getElementById('priceMin').value) || null;
    const priceMax = parseFloat(document.getElementById('priceMax').value) || null;
    const sortBy = document.getElementById('sortSelect').value;

    // Get selected vendors
    const vendorCheckboxes = document.querySelectorAll('#vendorCheckboxes input[type="checkbox"]');
    const selectedVendors = Array.from(vendorCheckboxes)
        .filter(cb => cb.checked)
        .map(cb => cb.value);

    // Filter products
    browserState.filteredProducts = browserState.allProducts.filter(product => {
        // Search filter
        if (searchTerm) {
            const searchableText = `${product.name} ${product.vendor} ${product.model || ''}`.toLowerCase();
            if (!searchableText.includes(searchTerm)) return false;
        }

        // Vendor filter
        if (selectedVendors.length > 0 && !selectedVendors.includes(product.vendor)) {
            return false;
        }

        // Price filter
        if (priceMin !== null && product.minPrice < priceMin) return false;
        if (priceMax !== null && product.minPrice > priceMax) return false;

        return true;
    });

    // Sort products
    sortProducts(sortBy);

    // Reset to page 1
    browserState.currentPage = 1;

    // Render
    renderProductTable();
    renderPagination();
}

function sortProducts(sortBy) {
    const [field, direction] = sortBy.split('-');

    browserState.filteredProducts.sort((a, b) => {
        let aVal, bVal;

        switch(field) {
            case 'name':
                aVal = (a.name || '').toLowerCase();
                bVal = (b.name || '').toLowerCase();
                break;
            case 'vendor':
                aVal = (a.vendor || '').toLowerCase();
                bVal = (b.vendor || '').toLowerCase();
                break;
            case 'price':
                aVal = a.minPrice || 0;
                bVal = b.minPrice || 0;
                break;
            case 'power':
                aVal = a.power || (a.chassis && a.chassis.basePower) || 0;
                bVal = b.power || (b.chassis && b.chassis.basePower) || 0;
                break;
            case 'formFactor':
                aVal = (a.formFactor || (a.chassis && a.chassis.formFactor) || '').toLowerCase();
                bVal = (b.formFactor || (b.chassis && b.chassis.formFactor) || '').toLowerCase();
                break;
            case 'rackUnits':
                aVal = a.rackUnits || (a.chassis && a.chassis.rackUnits) || 0;
                bVal = b.rackUnits || (b.chassis && b.chassis.rackUnits) || 0;
                break;
            default:
                return 0;
        }

        if (direction === 'asc') {
            return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
        } else {
            return aVal < bVal ? 1 : aVal > bVal ? -1 : 0;
        }
    });
}

function renderProductTable() {
    const tbody = document.getElementById('productBrowserTableBody');
    tbody.innerHTML = '';

    if (browserState.filteredProducts.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="7">
                    <div class="empty-products">
                        <div class="empty-products-icon">🔍</div>
                        <p>No products found matching your filters.</p>
                    </div>
                </td>
            </tr>
        `;
        return;
    }

    // Calculate pagination
    const start = (browserState.currentPage - 1) * browserState.productsPerPage;
    const end = start + browserState.productsPerPage;
    const pageProducts = browserState.filteredProducts.slice(start, end);

    // Render each product
    pageProducts.forEach(product => {
        const row = createProductRow(product);
        tbody.appendChild(row);
    });
}

function createProductRow(product) {
    const row = document.createElement('tr');

    const formFactor = product.formFactor || (product.chassis && product.chassis.formFactor) || '-';
    const power = product.power || (product.chassis && product.chassis.basePower) || '-';
    const rackUnits = product.rackUnits || (product.chassis && product.chassis.rackUnits) || '-';
    const price = product.minPrice || (product.price) || (product.chassis && product.chassis.price) || 0;

    row.innerHTML = `
        <td>
            <div class="product-name">${escapeHtml(product.name)}</div>
            ${product.model ? `<div class="product-vendor">Model: ${escapeHtml(product.model)}</div>` : ''}
        </td>
        <td>${escapeHtml(product.vendor)}</td>
        <td>${escapeHtml(formFactor)}</td>
        <td>${power === '-' ? '-' : power + 'W'}</td>
        <td>${rackUnits === '-' ? '-' : rackUnits + 'U'}</td>
        <td><span class="price-badge">$${price.toLocaleString()}</span></td>
        <td>
            <button class="btn-select" onclick='selectProduct(${JSON.stringify(product).replace(/'/g, "&#39;")})'>
                Select
            </button>
            <button class="btn-details" onclick='showProductDetails(${JSON.stringify(product).replace(/'/g, "&#39;")})'>
                Details
            </button>
        </td>
    `;

    return row;
}

function renderPagination() {
    const pagination = document.getElementById('browserPagination');
    pagination.innerHTML = '';

    const totalProducts = browserState.filteredProducts.length;
    const totalPages = Math.ceil(totalProducts / browserState.productsPerPage);

    if (totalPages <= 1) return;

    const currentPage = browserState.currentPage;

    // Previous button
    const prevBtn = document.createElement('button');
    prevBtn.className = 'page-btn';
    prevBtn.textContent = '« Previous';
    prevBtn.disabled = currentPage === 1;
    prevBtn.onclick = () => {
        if (currentPage > 1) {
            browserState.currentPage--;
            renderProductTable();
            renderPagination();
        }
    };
    pagination.appendChild(prevBtn);

    // Page numbers
    const maxButtons = 7;
    let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
    let endPage = Math.min(totalPages, startPage + maxButtons - 1);

    if (endPage - startPage < maxButtons - 1) {
        startPage = Math.max(1, endPage - maxButtons + 1);
    }

    for (let i = startPage; i <= endPage; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.className = 'page-btn' + (i === currentPage ? ' active' : '');
        pageBtn.textContent = i;
        pageBtn.onclick = () => {
            browserState.currentPage = i;
            renderProductTable();
            renderPagination();
        };
        pagination.appendChild(pageBtn);
    }

    // Next button
    const nextBtn = document.createElement('button');
    nextBtn.className = 'page-btn';
    nextBtn.textContent = 'Next »';
    nextBtn.disabled = currentPage === totalPages;
    nextBtn.onclick = () => {
        if (currentPage < totalPages) {
            browserState.currentPage++;
            renderProductTable();
            renderPagination();
        }
    };
    pagination.appendChild(nextBtn);

    // Info
    const info = document.createElement('span');
    info.className = 'page-info';
    const start = (currentPage - 1) * browserState.productsPerPage + 1;
    const end = Math.min(currentPage * browserState.productsPerPage, totalProducts);
    info.textContent = `Showing ${start}-${end} of ${totalProducts}`;
    pagination.appendChild(info);
}

async function selectProduct(product) {
    if (product.apiId) {
        const detail = await bomApi.get(`/systems/${product.apiId}`);
        if (!detail) {
            console.error('selectProduct: could not load system detail for', product.apiId);
            showBrowserError('Product details are currently unavailable.', browserState.currentCategory);
            return;
        }
        product.components = systemDetailToComponents(detail);
    }

    if (product.components && (product.components.cpu?.length > 0 || product.components.ram?.length > 0)) {
        openServerConfigWizard(product);
    } else {
        closeProductBrowser();
        addDevice({
            category: browserState.currentCategory,
            vendor: product.vendor,
            ...product
        });
    }
}

async function showProductDetails(product) {
    await loadPlatforms();
    browserState.selectedProduct = product;

    // Update modal title
    document.getElementById('detailsModalTitle').textContent = product.name;

    // Render specs
    renderProductSpecs(product);

    // Render pricing
    renderProductPricing(product);

    // Show details modal
    document.getElementById('productDetailsModal').classList.add('active');
}

function renderProductSpecs(product) {
    const tbody = document.getElementById('productSpecsTable').querySelector('tbody');
    tbody.innerHTML = '';

    const specs = [];

    specs.push(['Vendor', product.vendor]);
    specs.push(['Category', formatCategory(browserState.currentCategory)]);
    if (product.model) specs.push(['Model', product.model]);

    if (product.chassis) {
        const socket = product.chassis.socket;
        const platform = socket ? getPlatform(socket) : null;
        specs.push(['Form Factor', product.chassis.formFactor || '-']);
        specs.push(['Rack Units', (product.chassis.rackUnits || '-') + (product.chassis.rackUnits ? 'U' : '')]);
        if (socket) specs.push(['CPU Socket', platform ? `${socket} — ${platform.name}` : socket]);
        if (product.chassis.cpuSockets) specs.push(['CPU Sockets', product.chassis.cpuSockets]);
        if (product.chassis.memorySlots) specs.push(['Memory Slots', product.chassis.memorySlots]);
        if (platform) specs.push(['Memory Type', platform.memoryType + (platform.eccRequired ? ' ECC' : '')]);
        if (product.chassis.maxPower) specs.push(['Max Power', product.chassis.maxPower + 'W']);
        if (product.chassis.weight) specs.push(['Weight', `${product.chassis.weight.kg} kg (${product.chassis.weight.lbs} lbs)`]);
    } else {
        // Network device (switch, router, firewall, etc.)
        if (product.formFactor) specs.push(['Form Factor', product.formFactor]);
        if (product.rackUnits) specs.push(['Rack Units', product.rackUnits + 'U']);
        if (product.asic) specs.push(['ASIC', product.asic]);
        if (product.cpu) specs.push(['CPU', product.cpu]);
        if (product.memory) specs.push(['Memory', product.memory]);
        if (product.storage) specs.push(['Storage', product.storage]);
        if (product.switchingCapacity) specs.push(['Switching Capacity', product.switchingCapacity]);
        if (product.forwardingRate) specs.push(['Forwarding Rate', product.forwardingRate]);
        if (product.totalPorts) specs.push(['Total Ports', product.totalPorts]);
        if (product.portGroups && product.portGroups.length > 0) {
            product.portGroups.forEach((pg, i) => {
                const poeNote = pg.poe ? ` (${pg.poeType || 'PoE'}, ${pg.poeBudgetW || ''}W budget)` : '';
                specs.push([`Port Group ${i + 1}`, pg.label + poeNote]);
            });
        } else if (product.ports) {
            if (product.ports.ethernet) specs.push(['Ethernet Ports', product.ports.ethernet]);
            if (product.ports.speed) specs.push(['Port Speed', product.ports.speed]);
            if (product.ports.poe) specs.push(['PoE Support', product.ports.poe]);
        }
        if (product.weight) specs.push(['Weight', `${product.weight.kg} kg (${product.weight.lbs} lbs)`]);
        if (product.power) specs.push(['Power', product.power + 'W']);
        if (product.tdp) specs.push(['TDP', product.tdp + 'W']);
        if (product.driveBays) specs.push(['Drive Bays', `${product.driveBays}x ${product.driveBayType || 'SATA'}`]);
        if (product.maxRawCapacityTb) specs.push(['Max Raw Capacity', `${product.maxRawCapacityTb} TB`]);
        if (product.networkPorts) specs.push(['Network Ports', product.networkPorts]);
    }

    specs.forEach(([label, value]) => {
        const row = document.createElement('tr');
        row.innerHTML = `<td>${escapeHtml(label)}</td><td>${escapeHtml(String(value))}</td>`;
        tbody.appendChild(row);
    });
}

function renderProductPricing(product) {
    const panel = document.getElementById('productPricingPanel');
    panel.innerHTML = '';

    let prices = [];

    if (product.pricing && Array.isArray(product.pricing)) {
        prices = product.pricing;
    } else {
        const price = product.price || (product.chassis && product.chassis.price) || 0;
        const affUrls = product.affiliateUrls || product.chassis?.affiliateUrls || {};
        const priceDate = product.priceDate || product.chassis?.priceDate || null;
        prices = [{
            vendor: product.vendor,
            price: price,
            priceDate: priceDate,
            stock: 'Check current availability',
            url: affUrls.amazon || affUrls.newegg || product.datasheet || product.chassis?.datasheet || null,
            urlLabel: affUrls.amazon ? 'View on Amazon' : affUrls.newegg ? 'View on Newegg' : 'View Datasheet'
        }];
    }

    const minPrice = Math.min(...prices.map(p => p.price).filter(p => p > 0));

    prices.forEach(priceInfo => {
        const isBest = priceInfo.price === minPrice && prices.length > 1;
        const priceLabel = priceInfo.price > 0
            ? `$${priceInfo.price.toLocaleString()}${priceInfo.priceDate ? ` <small style="opacity:0.7">as of ${escapeHtml(priceInfo.priceDate)}</small>` : ''}`
            : 'Contact for pricing';

        const priceDiv = document.createElement('div');
        priceDiv.className = 'vendor-price-item' + (isBest ? ' best-price' : '');
        priceDiv.innerHTML = `
            <div class="vendor-name">
                ${escapeHtml(priceInfo.vendor)}
                ${isBest ? '<span class="best-price-badge">BEST PRICE</span>' : ''}
            </div>
            <div class="vendor-price">${priceLabel}</div>
            <div class="vendor-stock">${escapeHtml(priceInfo.stock || 'Check availability')}</div>
            ${priceInfo.url ? `<a href="${escapeHtml(priceInfo.url)}" target="_blank" rel="noopener" style="font-size:0.85em;color:#667eea;">${escapeHtml(priceInfo.urlLabel || 'View Product')} »</a>` : ''}
        `;
        panel.appendChild(priceDiv);
    });
}

function addSelectedProductToBOM() {
    if (!browserState.selectedProduct) return;

    const product = browserState.selectedProduct;

    // Check if this is a server that needs configuration
    if (product.components && (product.components.cpu?.length > 0 || product.components.ram?.length > 0)) {
        // Close details modal and open configuration wizard
        closeProductDetails();
        openServerConfigWizard(product);
    } else {
        // Add to BOM directly for non-server products
        addDevice({
            category: browserState.currentCategory,
            vendor: product.vendor,
            ...product
        });

        // Close modals
        closeProductDetails();
        closeProductBrowser();
    }
}

function closeProductBrowser() {
    document.getElementById('productBrowserModal').classList.remove('active');
}

function closeProductDetails() {
    document.getElementById('productDetailsModal').classList.remove('active');
}

function clearFilters() {
    document.getElementById('productSearch').value = '';
    document.getElementById('priceMin').value = '';
    document.getElementById('priceMax').value = '';
    document.getElementById('sortSelect').value = 'name-asc';

    // Check all vendor checkboxes
    document.querySelectorAll('#vendorCheckboxes input[type="checkbox"]').forEach(cb => {
        cb.checked = true;
    });

    filterAndRenderProducts();
}

// ==================== Server Configuration Wizard Module ====================

async function openServerConfigWizard(product) {
    await loadPlatforms();

    // Store the product
    wizardState.currentProduct = product;

    // Initialize configuration with chassis
    wizardState.configuration.chassis = {
        ...product.chassis,
        vendor: product.vendor,
        name: product.name
    };

    // Deep copy components and initialize selected state
    wizardState.configuration.components = {
        cpu: product.components?.cpu ? JSON.parse(JSON.stringify(product.components.cpu)) : [],
        ram: product.components?.ram ? JSON.parse(JSON.stringify(product.components.ram)) : [],
        storage: product.components?.storage ? JSON.parse(JSON.stringify(product.components.storage)) : [],
        nic: product.components?.nic ? JSON.parse(JSON.stringify(product.components.nic)) : [],
        gpu: product.components?.gpu ? JSON.parse(JSON.stringify(product.components.gpu)) : []
    };

    // Update wizard title
    document.getElementById('wizardTitle').textContent = `Configure ${product.name}`;
    const deviceTypeLabel = product.type === 'laptop' ? 'laptop'
        : product.type === 'desktop' ? 'desktop'
        : product.chassis?.formFactor || 'server';
    document.getElementById('wizardSubtitle').textContent = `Customize components for your ${deviceTypeLabel}`;

    // Render component sections
    renderComponentSections();

    // Update summary
    updateWizardSummary();

    // Close browser modal and show wizard
    closeProductBrowser();
    document.getElementById('serverConfigWizard').classList.add('active');
}

function closeServerConfigWizard() {
    document.getElementById('serverConfigWizard').classList.remove('active');

    // Reset wizard state
    wizardState.currentProduct = null;
    wizardState.configuration = {
        chassis: null,
        components: {
            cpu: [],
            ram: [],
            storage: [],
            nic: [],
            gpu: []
        }
    };
}

function parsePcieWidth(widthStr) {
    if (!widthStr) return 0;
    const m = String(widthStr).match(/x(\d+)/i);
    return m ? parseInt(m[1]) : 0;
}

function getCompatibilityWarning(chassis, componentType, component) {
    const socket = chassis?.socket;
    if (!socket) return null;

    const platform = getPlatform(socket);
    if (!platform) return null;

    if (componentType === 'cpu') {
        if (component.socket && component.socket !== socket) {
            return `Incompatible: CPU requires ${component.socket}, chassis uses ${socket}`;
        }
    }

    if (componentType === 'ram') {
        const memType = component.memoryType;
        if (memType && platform.memoryType && !platform.memoryType.includes(memType)) {
            return `Incompatible: chassis platform requires ${platform.memoryType}, this DIMM is ${memType}`;
        }
    }

    if (componentType === 'gpu' || componentType === 'nic') {
        const slots = chassis?.pcieSlots;
        // If chassis explicitly has no slots, block expansion cards
        if (Array.isArray(slots) && slots.length === 0) {
            return `No PCIe expansion slots on this chassis`;
        }
        // If chassis has slot data, check card fits
        if (Array.isArray(slots) && slots.length > 0 && component.pcieWidth) {
            const cardWidth = parsePcieWidth(component.pcieWidth);
            const bestSlot = slots.reduce((best, slot) => {
                const slotWidth = parsePcieWidth(slot.width);
                // Card must fit physically (card width ≤ slot width)
                if (cardWidth <= slotWidth) {
                    return (!best || slotWidth > parsePcieWidth(best.width)) ? slot : best;
                }
                return best;
            }, null);
            if (!bestSlot) {
                return `No compatible PCIe slot: card needs ${component.pcieWidth}, chassis has ${slots.map(s => s.width).join(', ')}`;
            }
            if (component.pcieGen && bestSlot.gen && component.pcieGen > bestSlot.gen) {
                return `Warning: ${component.name} is PCIe Gen${component.pcieGen} but best available slot is Gen${bestSlot.gen} — will run at reduced bandwidth`;
            }
        }
    }

    return null;
}

function renderComponentSections() {
    const container = document.getElementById('componentSections');
    container.innerHTML = '';

    const componentTypes = [
        { key: 'cpu', label: 'Processors (CPU)', icon: '🔷', required: true },
        { key: 'ram', label: 'Memory (RAM)', icon: '💾', required: true },
        { key: 'storage', label: 'Storage Drives', icon: '💿', required: false },
        { key: 'nic', label: 'Network Cards', icon: '🌐', required: false },
        { key: 'gpu', label: 'Graphics Cards (GPU)', icon: '🎮', required: false }
    ];

    componentTypes.forEach(type => {
        const components = wizardState.configuration.components[type.key];
        if (!components || components.length === 0) return;

        const section = createComponentSection(type, components);
        container.appendChild(section);
    });
}

function createComponentSection(type, components) {
    const section = document.createElement('div');
    section.className = 'component-section';

    // Count selected components
    const selectedCount = components.reduce((sum, c) => sum + (c.quantity || 0), 0);
    const totalAvailable = components.length;

    // Header
    const header = document.createElement('div');
    header.className = 'section-header';
    header.innerHTML = `
        <span>${type.icon} ${type.label}${type.required ? ' <span style="color: #ffeb3b;">*</span>' : ''}</span>
        <span class="badge">${selectedCount} selected</span>
    `;
    section.appendChild(header);

    // Options container
    const optionsContainer = document.createElement('div');
    optionsContainer.className = 'component-options';

    components.forEach((component, index) => {
        const option = createComponentOption(type.key, component, index);
        optionsContainer.appendChild(option);
    });

    section.appendChild(optionsContainer);

    return section;
}

function createComponentOption(componentType, component, index) {
    const option = document.createElement('div');
    option.className = 'component-option';
    if (component.quantity > 0) {
        option.classList.add('selected');
    }

    const uniqueId = `${componentType}-${component.id || index}`;

    // Build specs display
    const specs = [];
    if (component.cores) specs.push(`${component.cores} cores`);
    if (component.threads) specs.push(`${component.threads} threads`);
    if (component.baseFreq) specs.push(component.baseFreq);
    if (component.capacity) specs.push(component.capacity);
    if (component.type) specs.push(component.type);
    if (component.interface) specs.push(component.interface);
    if (component.speed) specs.push(component.speed);
    if (component.power) specs.push(`${component.power}W`);

    const specsHtml = specs.map(s => `<span class="spec-item">${escapeHtml(s)}</span>`).join('');

    // Calculate price
    const unitPrice = component.price || 0;
    const subtotal = unitPrice * (component.quantity || 0);

    const warning = getCompatibilityWarning(
        wizardState.configuration?.chassis,
        componentType,
        component
    );

    const warningHtml = warning
        ? `<div style="color:#c62828;font-size:0.85em;margin-top:4px;">⚠ ${escapeHtml(warning)}</div>`
        : '';

    const isIncompatible = warning !== null;

    option.innerHTML = `
        <input type="checkbox" class="component-checkbox"
               id="check-${uniqueId}"
               ${component.quantity > 0 ? 'checked' : ''}
               ${isIncompatible ? 'disabled' : ''}
               onchange="toggleComponent('${componentType}', ${index})">
        <div class="component-info">
            <div class="component-name">${escapeHtml(component.name)}</div>
            <div class="component-specs">${specsHtml}</div>
            ${warningHtml}
        </div>
        <div class="component-controls">
            <div class="component-price">$${unitPrice.toLocaleString()}</div>
            <div class="qty-control">
                <button class="qty-btn" onclick="decrementComponent('${componentType}', ${index})" ${component.quantity <= 0 ? 'disabled' : ''}>-</button>
                <input type="number" class="qty-input"
                       id="qty-${uniqueId}"
                       value="${component.quantity || 0}"
                       min="0"
                       max="${component.maxQuantity || 99}"
                       onchange="updateComponentQty('${componentType}', ${index}, this.value)">
                <button class="qty-btn" onclick="incrementComponent('${componentType}', ${index})" ${component.quantity >= (component.maxQuantity || 99) ? 'disabled' : ''}>+</button>
            </div>
            ${subtotal > 0 ? `<div class="component-subtotal">Subtotal: $${subtotal.toLocaleString()}</div>` : ''}
        </div>
    `;

    if (isIncompatible) {
        option.style.opacity = '0.4';
        option.style.pointerEvents = 'none';
    }

    return option;
}

function toggleComponent(componentType, index) {
    const component = wizardState.configuration.components[componentType][index];
    if (!component) return;

    if (component.quantity > 0) {
        // Unselect - set to 0
        component.quantity = 0;
    } else {
        // Select - set to 1 or default
        component.quantity = 1;
    }

    renderComponentSections();
    updateWizardSummary();
}

function incrementComponent(componentType, index) {
    const component = wizardState.configuration.components[componentType][index];
    if (!component) return;

    const maxQty = component.maxQuantity || 99;
    if (component.quantity < maxQty) {
        component.quantity = (component.quantity || 0) + 1;
        renderComponentSections();
        updateWizardSummary();
    }
}

function decrementComponent(componentType, index) {
    const component = wizardState.configuration.components[componentType][index];
    if (!component) return;

    if (component.quantity > 0) {
        component.quantity--;
        renderComponentSections();
        updateWizardSummary();
    }
}

function updateComponentQty(componentType, index, newQty) {
    const component = wizardState.configuration.components[componentType][index];
    if (!component) return;

    const qty = parseInt(newQty) || 0;
    const maxQty = component.maxQuantity || 99;
    component.quantity = Math.min(Math.max(0, qty), maxQty);

    renderComponentSections();
    updateWizardSummary();
}

function updateWizardSummary() {
    const chassis = wizardState.configuration.chassis;
    const components = wizardState.configuration.components;

    // Update chassis name
    document.getElementById('summaryChassis').textContent = chassis?.model || '-';

    // Calculate totals
    let totalPower = chassis?.basePower || 0;
    let totalTDP = chassis?.baseTDP || 0;
    let totalPrice = chassis?.price || 0;

    // Add component values
    ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(compType => {
        if (components[compType]) {
            components[compType].forEach(comp => {
                const qty = comp.quantity || 0;
                totalPower += (comp.power || 0) * qty;
                totalTDP += (comp.tdp || comp.power || 0) * qty;
                totalPrice += (comp.price || 0) * qty;
            });
        }
    });

    const totalBTU = totalPower * CONFIG.btuConversion;

    // Update UI
    document.getElementById('summaryPower').textContent = `${Math.round(totalPower).toLocaleString()} W`;
    document.getElementById('summaryBTU').textContent = `${Math.round(totalBTU).toLocaleString()} BTU/hr`;
    document.getElementById('summaryTDP').textContent = `${Math.round(totalTDP).toLocaleString()} W`;
    document.getElementById('summaryPrice').textContent = `$${Math.round(totalPrice).toLocaleString()}`;

    // Update requirements
    updateRequirements();

    // Calculate memory ceiling
    const socket = chassis?.socket;
    const platform = socket ? getPlatform(socket) : null;
    if (platform && chassis?.cpuSockets && chassis?.memorySlots) {
        const selectedCpuCount = (wizardState.configuration.components?.cpu || [])
            .reduce((sum, c) => sum + (c.quantity || 0), 0);
        const activeCpus = Math.max(selectedCpuCount, 1);
        const maxMemoryGb = activeCpus * platform.maxMemoryGbPerCpu;
        const installedMemoryGb = (wizardState.configuration.components?.ram || [])
            .reduce((sum, r) => sum + ((r.capacityGb || 0) * (r.quantity || 0)), 0);

        const memCeiling = document.getElementById('summaryMemCeiling');
        if (memCeiling) {
            memCeiling.textContent = `${installedMemoryGb.toLocaleString()} GB / ${maxMemoryGb.toLocaleString()} GB max`;
        }
    }

    // Validate configuration
    const isValid = validateConfiguration();
    document.getElementById('addToBOMButton').disabled = !isValid;
}

function updateRequirements() {
    const requirementsList = document.getElementById('requirementsList');
    requirementsList.innerHTML = '';

    const requirements = [
        {
            name: 'CPU Required',
            key: 'cpu',
            required: true,
            check: () => {
                const cpus = wizardState.configuration.components.cpu || [];
                return cpus.some(c => c.quantity > 0);
            }
        },
        {
            name: 'RAM Required',
            key: 'ram',
            required: true,
            check: () => {
                const rams = wizardState.configuration.components.ram || [];
                return rams.some(r => r.quantity > 0);
            }
        }
    ];

    requirements.forEach(req => {
        const met = req.check();
        const reqDiv = document.createElement('div');
        reqDiv.className = `requirement ${met ? 'met' : 'unmet'}`;
        reqDiv.innerHTML = `
            <span class="requirement-icon">${met ? '✓' : '✗'}</span>
            <span>${req.name}</span>
        `;
        requirementsList.appendChild(reqDiv);
    });
}

function validateConfiguration() {
    // Check CPU
    const cpus = wizardState.configuration.components.cpu || [];
    const hasCPU = cpus.some(c => c.quantity > 0);

    // Check RAM
    const rams = wizardState.configuration.components.ram || [];
    const hasRAM = rams.some(r => r.quantity > 0);

    return hasCPU && hasRAM;
}

function applyRecommendedConfig() {
    // Find and apply recommended components or components with quantity > 0 in the original data
    const components = wizardState.configuration.components;

    ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(compType => {
        if (components[compType]) {
            components[compType].forEach(comp => {
                // Look for components that originally had quantity > 0 in the JSON
                // or set quantity to 1 for the first component if none are pre-selected
                if (wizardState.currentProduct.components[compType]) {
                    const originalComp = wizardState.currentProduct.components[compType].find(c => c.id === comp.id);
                    if (originalComp && originalComp.quantity > 0) {
                        comp.quantity = originalComp.quantity;
                    }
                }
            });

            // If no components selected, select first one with qty 1 for required types
            const hasSelection = components[compType].some(c => c.quantity > 0);
            if (!hasSelection && (compType === 'cpu' || compType === 'ram')) {
                if (components[compType].length > 0) {
                    components[compType][0].quantity = 1;
                }
            }
        }
    });

    renderComponentSections();
    updateWizardSummary();
}

function addConfiguredServerToBOM() {
    if (!validateConfiguration()) {
        alert('Please configure required components (CPU and RAM) before adding to BOM.');
        return;
    }

    // Build device data with configured components
    const deviceData = {
        type: 'server',
        category: browserState.currentCategory,
        vendor: wizardState.currentProduct.vendor,
        name: wizardState.currentProduct.name,
        key: wizardState.currentProduct.key,
        chassis: wizardState.configuration.chassis,
        components: {}
    };

    // Copy only selected components (quantity > 0)
    ['cpu', 'ram', 'storage', 'nic', 'gpu'].forEach(compType => {
        const selected = wizardState.configuration.components[compType].filter(c => c.quantity > 0);
        if (selected.length > 0) {
            deviceData.components[compType] = selected;
        }
    });

    // Add to BOM
    addDevice(deviceData, 1);

    // Close wizard
    closeServerConfigWizard();
}

// ==================== Permalink Module ====================

function generatePermalink() {
    const buildData = {
        devices: bomState.devices.map(d => ({
            id: d.id,
            category: d.category,
            vendor: d.vendor,
            key: d.key,
            quantity: d.quantity
        })),
        version: 1
    };

    try {
        const encoded = btoa(JSON.stringify(buildData));
        const url = `${window.location.origin}${window.location.pathname}?build=${encoded}`;

        // Copy to clipboard
        navigator.clipboard.writeText(url).then(() => {
            alert('Permalink copied to clipboard!');
        }).catch(() => {
            prompt('Copy this permalink:', url);
        });
    } catch(e) {
        console.error('Error generating permalink:', e);
        alert('Error generating permalink');
    }
}

async function loadFromPermalink() {
    const urlParams = new URLSearchParams(window.location.search);
    const buildParam = urlParams.get('build');
    if (!buildParam) return;

    let decoded;
    try {
        decoded = JSON.parse(atob(buildParam));
    } catch (e) {
        console.error('Invalid build parameter:', e);
        return;
    }

    if (!decoded || !Array.isArray(decoded.devices)) return;

    if (!CONFIG.apiBase) {
        showPageError('Hardware catalog is unavailable — BOM could not be restored from permalink.');
        return;
    }

    for (const deviceData of decoded.devices) {
        try {
            const searchResult = await bomApi.get('/search', {
                q: deviceData.key,
                type: 'system',
                limit: 5,
            });
            if (!searchResult) {
                window.history.replaceState({}, document.title, window.location.pathname);
                showPageError('Hardware catalog is unavailable — BOM could not be restored from permalink.');
                return;
            }
            const match = (searchResult.systems || []).find(
                s => s.model_number === deviceData.key
            );
            if (match) {
                const detail = await bomApi.get(`/systems/${match.id}`);
                if (detail) {
                    const product = systemApiToProduct(detail);
                    product.components = systemDetailToComponents(detail);
                    addDevice({
                        category: deviceData.category,
                        vendor: product.vendor,
                        ...product,
                    }, deviceData.quantity);
                }
            }
        } catch (e) {
            console.error('Error restoring device from permalink:', e);
        }
    }

    window.history.replaceState({}, document.title, window.location.pathname);
}

// ==================== Category Tile Helpers ====================

function showNetworkBrowser() {
    const el = document.getElementById('networkSubCategories');
    if (el) {
        el.style.display = el.style.display === 'none' ? 'block' : 'none';
    }
}

function hideNetworkBrowser() {
    const el = document.getElementById('networkSubCategories');
    if (el) el.style.display = 'none';
}

// ==================== Utility Functions ====================

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function formatCategory(category) {
    return category.split('-').map(word =>
        word.charAt(0).toUpperCase() + word.slice(1)
    ).join(' ');
}

// ==================== Event Listeners ====================

document.addEventListener('DOMContentLoaded', async function() {

    // Export CSV button
    document.getElementById('exportCSVBtn').addEventListener('click', exportToCSV);

    // Clear BOM button
    document.getElementById('clearBOMBtn').addEventListener('click', clearBOM);

    // CSV Import
    document.getElementById('csvImport').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const csv = event.target.result;
                const lines = csv.split('\n').filter(l => l.trim());
                if (lines.length < 2) { alert('CSV appears empty.'); return; }
                const headers = lines[0].split(',').map(h => h.replace(/"/g, '').trim().toLowerCase());
                const nameIdx = headers.findIndex(h => h.includes('model') || h.includes('name'));
                const vendorIdx = headers.findIndex(h => h.includes('vendor'));
                const categoryIdx = headers.findIndex(h => h.includes('category'));
                const qtyIdx = headers.findIndex(h => h.includes('qty') || h.includes('quantity'));
                const powerIdx = headers.findIndex(h => h.includes('power'));
                const weightIdx = headers.findIndex(h => h.includes('weight'));
                const rackUIdx = headers.findIndex(h => h.includes('rack'));

                let imported = 0;
                lines.slice(1).forEach(line => {
                    const cells = line.split(',').map(c => c.replace(/"/g, '').trim());
                    const name = nameIdx >= 0 ? cells[nameIdx] : '';
                    if (!name) return;
                    addDevice({
                        type: 'imported',
                        category: categoryIdx >= 0 ? cells[categoryIdx] : 'imported',
                        vendor: vendorIdx >= 0 ? cells[vendorIdx] : 'Unknown',
                        name: name,
                        model: name,
                        power: powerIdx >= 0 ? parseFloat(cells[powerIdx]) || 0 : 0,
                        weight: weightIdx >= 0 ? { kg: parseFloat(cells[weightIdx]) || 0 } : { kg: 0 },
                        rackUnits: rackUIdx >= 0 ? parseInt(cells[rackUIdx]) || 0 : 0
                    }, qtyIdx >= 0 ? parseInt(cells[qtyIdx]) || 1 : 1);
                    imported++;
                });
                alert(`Imported ${imported} device(s) from CSV.`);
                e.target.value = '';
            };
            reader.readAsText(file);
        }
    });

    // Close modals on overlay click
    document.getElementById('productBrowserModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeProductBrowser();
        }
    });

    document.getElementById('productDetailsModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeProductDetails();
        }
    });

    // Close wizard on overlay click
    document.getElementById('serverConfigWizard').addEventListener('click', function(e) {
        if (e.target === this) {
            closeServerConfigWizard();
        }
    });

    // Initialize
    calculateTotals();

    // Load from localStorage first (before permalink overrides)
    loadBOMFromLocalStorage();

    // Load from permalink if present
    await loadFromPermalink();
});


</script>