.. عنوان: BOM اسسٹنٹ
.. slug: bom-assistant
.. تاریخ: 2026-01-05 15:00:00 UTC
.. ٹیگز: ہارڈ ویئر، منصوبہ بندی، بم، کیلکولیٹر، ٹول، سرورز، سوئچز، روٹرز، فائر والز
.. زمرہ: اوزار
.. لنک:
.. تفصیل: سرورز، سوئچز، روٹرز، اور نیٹ ورک آلات کے لیے ہارڈ ویئر بل آف میٹریل پلاننگ ٹول۔ ڈیٹا سینٹر کی تعیناتیوں کے لیے پاور، 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">Synology · 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()">پی ڈی ایف پرنٹ/محفوظ کریں۔</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>پاور (W)</th>
<th>بی ٹی یو</th>
<th>TDP (W)</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>کل BTU</label>
<div class="value" id="totalBTU">0</div>
<div class="unit">BTU/hr</div>
</div>
<div class="total-item">
<label>کل ٹی ڈی پی</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">نام (A-Z)</option>
<option value="name-desc">نام (Z-A)</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">پاور (W)</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>
مصنوعات کی تفصیلات کا ماڈل
<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>
سرور کنفیگریشن وزرڈ موڈل
<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 BTU/hr</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 کنفیگریشن: API موڈ کو فعال کرنے کے لیے مواد کو API بیس URL پر سیٹ کریں، جیسے 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>