// קובץ: dc_print_logic.js
// גרסה: Final v3 - With Rack Disk Summary Logic

function printCleanReport() {
    // 1. שליפת נתונים בסיסיים
    const clientName = document.getElementById('client_name').value || "Client";
    const projectName = document.getElementById('project_name').value || "Project";
    const prepByInput = document.getElementById('prepared_by');
    const preparedBy = (prepByInput && prepByInput.value) ? prepByInput.value : "Lenovo Data Center Group";

    // 2. זמן ישראל
    const now = new Date();
    const options = { timeZone: 'Asia/Jerusalem', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false };
    const formatter = new Intl.DateTimeFormat('en-GB', options);
    const parts = formatter.formatToParts(now);
    const getPart = (type) => parts.find(p => p.type === type).value;
    const fullDateDisplay = `${getPart('day')}/${getPart('month')}/${getPart('year')}, ${getPart('hour')}:${getPart('minute')}`;
    const fileTimestamp = `${getPart('year')}-${getPart('month')}-${getPart('day')}_${getPart('hour')}-${getPart('minute')}`;

    const safeClient = clientName.replace(/\s+/g, '_');
    const safeProject = projectName.replace(/\s+/g, '_');
    document.title = `Sizing_${safeProject}_${safeClient}_${fileTimestamp}`;

    // 3. זיהוי דגם שרת
    const serverBlades = document.querySelectorAll('.server-blade');
    let rawModelText = "Generic Server";
    if (serverBlades.length > 0) {
        const fullText = serverBlades[0].innerText;
        const match = fullText.match(/Node \d+\s+([^\n]+)/);
        if (match) rawModelText = match[1].replace(/^2x\s+/, '').trim(); 
    }
    const filterEl = document.getElementById('server_model_filter');
    let selectedModel = (filterEl && filterEl.value !== 'all') ? filterEl.value : rawModelText;
    const upperModel = selectedModel.toUpperCase();
    const isVx = upperModel.includes('VX'); 
    const models1U_List = ['HX630', 'VX630', 'SR630', 'SR635', 'SR645', 'SR570', 'SR530', 'SE350', 'SR250', '1U'];
    const is1U = models1U_List.some(m => upperModel.includes(m));
    const showDisks = isVx || window.isVsanMode || window.isNutanixMode;

    // 4. Snapshot Data
    const getVal = (id) => { 
        const el = document.getElementById(id); 
        return el ? parseFloat(el.innerText.replace(/,/g, '')) : 0; 
    };
    const getValStr = (id) => { const el = document.getElementById(id); return el ? el.innerText.trim() : '-'; };

    const rawTotalVCpu = getVal('sum_vcpu');
    const rawTotalRam = getVal('sum_ram');
    const rawPhyCoresNeeded = getVal('sum_phy_cores_needed');
    
    // --- לוגיקה חדשה לשליפת נפח אחסון ---
    // ניסיון לשלוף מהאלמנט המיוחד של Rack Disk Summary
    let totalStorageDisplay = getValStr('sum_storage_top'); // ברירת מחדל
    
    const rackSummaryEl = document.getElementById('rack_disk_summary');
    if (rackSummaryEl) {
        const effSpan = rackSummaryEl.querySelector('span[title]') || rackSummaryEl.querySelector('span');
        if (effSpan && /TB/i.test(effSpan.innerText)) {
            totalStorageDisplay = effSpan.innerText.trim();
        }
    }

    const snapshotData = [
        { label: "VMs", current: getValStr('sum_vms'), proj: getValStr('proj_vms') },
        { label: "TOTAL vCPU", current: getValStr('sum_vcpu'), proj: getValStr('proj_vcpu') },
        { label: "TOTAL RAM (GB)", current: getValStr('sum_ram'), proj: getValStr('proj_ram') },
        { label: "USABLE STORAGE", current: totalStorageDisplay, proj: getValStr('proj_storage') },
        { label: "PHYSICAL CORES", current: getValStr('sum_phy_cores_needed'), proj: getValStr('proj_phy_cores') },
        { label: "GHz DEMAND", current: getValStr('sum_ghz_needed'), proj: "Target" }
    ];

    let snapshotHtml = '';
    snapshotData.forEach(item => {
        let projText = item.proj;
        if (item.label !== "GHz DEMAND") projText = `Proj: ${item.proj}`;
        snapshotHtml += `<div class="snap-box"><div class="snap-val">${item.current}</div><div class="snap-label">${item.label}</div><div class="snap-proj">${projText}</div></div>`;
    });

    // 5. Workload Summary (Logical)
    let finalWorkloadSection = ''; 
    const hasImportData = window.importedClusters && window.importedClusters.length > 0;
    const manualContainer = document.getElementById('workloads_container');

    if (hasImportData) {
        let rows = '';
        window.importedClusters.forEach(c => {
            const vms = c.count || 0;
            const avgVcpu = c.vcpu || 0;
            const avgRam = c.ram || 0;
            const totalVcpu = (avgVcpu * vms);
            const totalRam = (avgRam * vms);
            rows += `<tr><td style="text-align:left;font-weight:bold;color:#1e3a8a;">${c.name || "Cluster"}</td><td><b>${vms}</b></td><td><div><b>${totalVcpu.toFixed(0)}</b></div><div style="font-size:9px;color:#64748b;">${avgVcpu} per VM</div></td><td><div><b>${totalRam.toFixed(0)}</b></div><div style="font-size:9px;color:#64748b;">${avgRam} GB per VM</div></td><td>...</td><td>-</td></tr>`;
        });
        finalWorkloadSection = `<div class="no-break-inside"><div class="sec-title">Workload Summary (Logical Allocation)</div><table class="flat-tbl"><thead><tr><th style="text-align:left;">WORKLOAD</th><th>VMs</th><th>vCPU (Total)</th><th>RAM (Total)</th><th>RATIO</th></tr></thead><tbody>${rows}</tbody></table></div>`;
    } 
    else if (manualContainer) {
        const rows = manualContainer.querySelectorAll('.workload-row');
        if (rows.length > 0) {
            let manualRowsHtml = '';
            let validManual = false;
            rows.forEach(row => {
                const name = row.querySelector('.row-name')?.value || "Manual Workload";
                const count = parseInt(row.querySelector('.row-count')?.value || 0);
                const vcpu = parseInt(row.querySelector('.row-vcpu')?.value || 0);
                const ram = parseInt(row.querySelector('.row-ram')?.value || 0);
                const storage = parseInt(row.querySelector('.row-storage')?.value || 0);
                if (count > 0) {
                    validManual = true;
                    manualRowsHtml += `<tr><td style="text-align:left;font-weight:bold;color:#1e3a8a;">${name}</td><td><b>${count}</b></td><td><div><b>${(count*vcpu)}</b></div><div style="font-size:9px;color:#64748b;">${vcpu} per VM</div></td><td><div><b>${(count*ram)}</b></div><div style="font-size:9px;color:#64748b;">${ram} GB per VM</div></td><td><div><b>${(count*storage).toLocaleString()}</b></div><div style="font-size:9px;color:#64748b;">${storage} GB per VM</div></td><td style="font-weight:bold;color:#475569;">1:-</td></tr>`;
                }
            });
            if (validManual) {
                finalWorkloadSection = `<div class="no-break-inside"><div class="sec-title">Workload Summary (Manual Input)</div><table class="flat-tbl"><thead><tr><th style="text-align:left;">WORKLOAD</th><th>VMs</th><th>vCPU (Total)</th><th>RAM (Total)</th><th>DISK (Total)</th><th>RATIO</th></tr></thead><tbody>${manualRowsHtml}</tbody></table></div>`;
            }
        }
    }

    // Gap Analysis (Fixed)
    let finalGapSection = '';
    const gapEl = document.getElementById('global_inventory_content');
    if (gapEl && gapEl.innerText.trim().length > 20) { 
        finalGapSection = `<div class="sec-title">Gap Analysis (Current vs Required)</div><div class="gap-wrapper">${gapEl.innerHTML}</div>`;
    }

    // 6. Unified Cluster Analysis (The Super-Card)
    let finalClusterSection = '';
    if (hasImportData) {
        let cardsHtml = '';
        window.importedClusters.forEach(c => {
            const phy = c.cluster_stats.phy_stats || {};
            const hostCount = phy.host_count || 0;
            const totalPhyCores = phy.total_phy_cores || 0;
            const totalPhyRam = phy.total_phy_ram_gb ? Math.round(phy.total_phy_ram_gb) : 1;
            
            const peakCpu = c.cluster_stats.peak_cpu_ghz.toFixed(0);
            const totalCpuGhz = phy.total_phy_ghz ? phy.total_phy_ghz.toFixed(0) : 0;
            const cpuPct = (totalCpuGhz > 0) ? ((peakCpu / totalCpuGhz) * 100).toFixed(1) : 0;
            
            const peakRam = (c.cluster_stats.peak_ram_mib / 1024).toFixed(0);
            const ramPct = (totalPhyRam > 1) ? ((peakRam / totalPhyRam) * 100).toFixed(1) : 0;

            const vms = c.count || 0;
            const avgVcpu = c.vcpu || 0;
            const totalVcpu = (avgVcpu * vms);
            let ratio = "-";
            if (totalPhyCores > 0 && totalVcpu > 0) {
                ratio = (totalVcpu / totalPhyCores).toFixed(1) + ":1";
            }

            let statusIcon = '<i class="fas fa-check-circle text-green-600 text-xl"></i>';
            let statusTitle = '<span class="text-sm font-bold text-green-600">Balanced</span>';
            let statusDesc = 'Optimal load.';
            const maxUtil = Math.max(parseFloat(cpuPct), parseFloat(ramPct));

            if (maxUtil >= 80) {
                statusIcon = '<i class="fas fa-heart-broken text-red-600 text-xl"></i>';
                statusTitle = '<span class="text-sm font-bold text-red-600">Stressed</span>';
                statusDesc = `High load (${maxUtil.toFixed(1)}%). High growth factors required.`;
            } else if (maxUtil <= 40) {
                statusIcon = '<i class="fas fa-snowflake text-blue-500 text-xl"></i>';
                statusTitle = '<span class="text-sm font-bold text-blue-500">Oversized</span>';
                statusDesc = `Low utilization (${maxUtil.toFixed(1)}%). Consider lower growth factors.`;
            }

            cardsHtml += `
            <div class="cluster-card grid grid-cols-12 gap-4 items-center p-3 border border-gray-200 rounded-lg mb-3 break-inside-avoid">
                <div class="col-span-3 border-l-4 border-slate-300 pl-3 flex flex-col justify-center h-full">
                    <div class="text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-1">${c.name}</div>
                    <div class="text-lg font-bold text-slate-700 flex items-center gap-2">
                        <i class="fas fa-server text-slate-400"></i>
                        <span>${hostCount} Hosts</span>
                    </div>
                    <div class="text-[11px] text-slate-600 mb-2">
                        <i class="fas fa-microchip text-slate-400 mr-1"></i> ${totalPhyCores} Phy. Cores
                    </div>
                    <div class="border-t border-gray-200 my-1 w-3/4"></div>
                    <div class="flex flex-col mt-1">
                        <div class="flex items-center gap-2">
                            <span class="text-lg font-bold text-blue-800">${vms}</span>
                            <span class="text-[10px] text-gray-500 font-bold uppercase">VMs</span>
                        </div>
                        <div class="text-[10px] text-gray-500">
                            Ratio: <span class="font-bold text-slate-700">${ratio}</span>
                        </div>
                    </div>
                </div>
                <div class="col-span-5 space-y-3">
                    <div>
                        <div class="flex justify-between items-center text-[10px] mb-1">
                            <span class="font-bold text-gray-600">CPU</span>
                            <span class="font-bold text-gray-800">${peakCpu} / ${totalCpuGhz} GHz</span>
                        </div>
                        <div class="w-full bg-gray-100 border border-gray-200 h-3 rounded-full overflow-hidden">
                            <div class="bg-gradient-to-r from-blue-400 to-blue-600 h-full" style="width: ${cpuPct}%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between items-center text-[10px] mb-1">
                            <span class="font-bold text-gray-600">RAM</span>
                            <span class="font-bold text-gray-800">${peakRam} / ${totalPhyRam} GB</span>
                        </div>
                        <div class="w-full bg-gray-100 border border-gray-200 h-3 rounded-full overflow-hidden">
                            <div class="bg-gradient-to-r from-purple-400 to-purple-600 h-full" style="width: ${ramPct}%"></div>
                        </div>
                    </div>
                </div>
                <div class="col-span-4 bg-gray-50 p-2 rounded border border-gray-100 h-full flex flex-col justify-center">
                    <div class="flex items-center gap-2 mb-1 pb-1 border-b border-gray-200">
                        ${statusIcon}
                        ${statusTitle}
                    </div>
                    <p class="text-[10px] text-gray-600 leading-snug">${statusDesc}</p>
                </div>
            </div>`;
        });
        finalClusterSection = `<div class="no-break-inside" style="padding-top: 40px;"><div class="sec-title">Cluster Analysis (Physical & Logical)</div>${cardsHtml}</div>`;
    }
    else if (manualContainer) {
        const rows = manualContainer.querySelectorAll('.workload-row');
        if (rows.length > 0) {
            let manualRowsHtml = '';
            rows.forEach(row => {
                const name = row.querySelector('.row-name')?.value || "Manual Workload";
                const count = parseInt(row.querySelector('.row-count')?.value || 0);
                const vcpu = parseInt(row.querySelector('.row-vcpu')?.value || 0);
                const ram = parseInt(row.querySelector('.row-ram')?.value || 0);
                const storage = parseInt(row.querySelector('.row-storage')?.value || 0);
                if (count > 0) {
                    manualRowsHtml += `<tr><td style="text-align:left;font-weight:bold;color:#1e3a8a;">${name}</td><td><b>${count}</b></td><td><div><b>${(count*vcpu)}</b></div><div style="font-size:9px;color:#64748b;">${vcpu} per VM</div></td><td><div><b>${(count*ram)}</b></div><div style="font-size:9px;color:#64748b;">${ram} GB per VM</div></td><td><div><b>${(count*storage).toLocaleString()}</b></div><div style="font-size:9px;color:#64748b;">${storage} GB per VM</div></td><td style="font-weight:bold;color:#475569;">1:-</td></tr>`;
                }
            });
            if (manualRowsHtml) {
                finalClusterSection = `<div class="no-break-inside" style="padding-top: 40px;"><div class="sec-title">Workload Summary (Manual Input)</div><table class="flat-tbl"><thead><tr><th style="text-align:left;">WORKLOAD</th><th>VMs</th><th>vCPU (Total)</th><th>RAM (Total)</th><th>DISK (Total)</th><th>RATIO</th></tr></thead><tbody>${manualRowsHtml}</tbody></table></div>`;
            }
        }
    }

    // 7. BOM & Node Stats
    let rackHtml = '';
    let bomSummaryHtml = '';
    let nodeStatsHtml = '';

    if (serverBlades.length > 0) {
        const fullTextOne = serverBlades[0].innerText;
        const nodeCount = serverBlades.length;
        const cpuMatch = fullTextOne.match(/2x\s+([^\n]+)/);
        const cpuString = cpuMatch ? "2x " + cpuMatch[1].trim() : "2x CPU";
        const ramMatch = fullTextOne.match(/(\d{2,})\s*GB/i); 
        const ramPerNode = ramMatch ? parseInt(ramMatch[1]) : 0;
        
        const coresMatch = cpuString.match(/\((\d+)C/i);
        const coresPerCpu = coresMatch ? parseInt(coresMatch[1]) : 16;
        const sol = (typeof window.currentSolution !== 'undefined' && window.currentSolution) ? window.currentSolution : null;
        const coresPerNode = sol ? sol.coresPerNode : (coresPerCpu * 2);
        const nodeCountEff = sol ? sol.nodes : nodeCount;
        const ramPerNodeEff = sol ? sol.ramPerNode : ramPerNode;

        // Same overhead model as sizer UI (CVM / hypervisor — not a flat 1.2 factor)
        const isNutanix = !!window.isNutanixMode;
        const esxiEl = document.getElementById('overhead_esxi');
        const ramPctEl = document.getElementById('overhead_ram_pct');
        const cpuPctEl = document.getElementById('overhead_cpu_pct');
        const cvmProfileEl = document.getElementById('nutanix_cvm_profile');
        const hypervisorRamOverhead = esxiEl ? (parseFloat(esxiEl.value) || 12) : 12;
        const ramOverheadPct = ramPctEl ? (parseFloat(ramPctEl.value) / 100) : 0;
        const cpuOverheadPct = cpuPctEl ? (parseFloat(cpuPctEl.value) / 100) : 0;

        let cvmRamOverhead = 0;
        let cvmCpuOverhead = 0;
        if (isNutanix) {
            const cvmProfiles = { typical: { ram: 32, cpu: 12 }, high: { ram: 64, cpu: 12 } };
            const selectedProfile = cvmProfileEl ? cvmProfileEl.value : 'typical';
            const profile = cvmProfiles[selectedProfile] || cvmProfiles.typical;
            cvmRamOverhead = profile.ram;
            cvmCpuOverhead = profile.cpu;
        }

        const variableRamOverheadVal = Math.round(ramPerNodeEff * ramOverheadPct);
        const systemOverheadRam = isNutanix
            ? (cvmRamOverhead + 4)
            : (hypervisorRamOverhead + variableRamOverheadVal);
        const systemOverheadCpu = isNutanix
            ? (cvmCpuOverhead + 1)
            : (coresPerNode * cpuOverheadPct);

        // Prefer solution totals (include growth) — same source as rack UI
        const totalRamNeeded = sol ? sol.totalRamNeeded : rawTotalRam;
        const totalCoresNeeded = sol
            ? sol.totalCoresNeeded
            : (rawPhyCoresNeeded > 0 ? rawPhyCoresNeeded : (rawTotalVCpu / 4));

        const vmRamPerNode = totalRamNeeded / Math.max(nodeCountEff, 1);
        const usedCoresPerNode = totalCoresNeeded / Math.max(nodeCountEff, 1);
        const ramDisplayVal = Math.min(ramPerNodeEff, Math.round(vmRamPerNode + systemOverheadRam));
        const coresDisplayVal = Math.min(coresPerNode, Math.ceil(usedCoresPerNode + systemOverheadCpu));

        const cpuFreq = sol && sol.cpu && sol.cpu.freq
            ? sol.cpu.freq
            : (parseFloat((cpuString.match(/@\s*([\d.]+)\s*GHz/i) || [])[1]) || 0);
        const growthEl = document.getElementById('growth_buffer');
        const yearsEl = document.getElementById('growth_years');
        const growthRate = growthEl ? (parseInt(growthEl.value) / 100) : 0;
        const years = yearsEl ? parseInt(yearsEl.value) : 3;
        const growthFactor = Math.pow(1 + growthRate, years);
        const peakGhzInput = document.getElementById('peak_ghz_demand');
        const peakGhzDemand = peakGhzInput && peakGhzInput.value ? parseFloat(peakGhzInput.value) : 0;
        const finalGhzNeeded = peakGhzDemand * growthFactor;
        const ghzPerNode = coresPerNode * cpuFreq;
        const demandGhzPerNode = finalGhzNeeded > 0
            ? (finalGhzNeeded / Math.max(nodeCountEff, 1))
            : (usedCoresPerNode * cpuFreq);
        const overheadGhzPerNode = systemOverheadCpu * cpuFreq;
        const ghzDisplayVal = Math.min(ghzPerNode, demandGhzPerNode + overheadGhzPerNode);

        let cpuBarPct = Math.min(100, (coresDisplayVal / coresPerNode) * 100).toFixed(0);
        let ramBarPct = Math.min(100, (ramDisplayVal / ramPerNodeEff) * 100).toFixed(0);
        let ghzBarPct = ghzPerNode > 0 ? Math.min(100, (ghzDisplayVal / ghzPerNode) * 100).toFixed(0) : 0;
        if (cpuBarPct < 5) cpuBarPct = 5; 
        if (ramBarPct < 5) ramBarPct = 5;
        if (ghzBarPct < 5 && ghzDisplayVal > 0) ghzBarPct = 5;

        const ohLabel = isNutanix
            ? `CVM ${Math.round(systemOverheadRam)}GB / ${Math.round(systemOverheadCpu)} vCPU`
            : `O/H ${Math.round(systemOverheadRam)}GB / ${Math.round(systemOverheadCpu)} cores`;
        const cpuBarText = `Cores ${coresDisplayVal} / ${coresPerNode} (${cpuBarPct}%)`;
        const ramBarText = `GB ${ramDisplayVal} / ${ramPerNodeEff} (${ramBarPct}%)`;
        const ghzBarText = ghzPerNode > 0
            ? `GHz ${ghzDisplayVal.toLocaleString(undefined, {maximumFractionDigits: 1})} / ${ghzPerNode.toLocaleString(undefined, {maximumFractionDigits: 1})} (${ghzBarPct}%)`
            : 'GHz -';

        nodeStatsHtml = `
        <div class="node-spec-box">
            <div class="spec-left">
                <i class="fas fa-server" style="font-size:24px; color:#2563eb; margin-bottom:8px;"></i>
                <div class="spec-title">Per Node Specs</div>
                <div class="spec-detail">${cpuString}</div>
                <div class="spec-detail" style="margin-top:2px;">${ramPerNodeEff} GB RAM</div>
            </div>
            <div class="spec-right">
                <div class="spec-title" style="margin-bottom:4px;">Estimated Node Load (Avg + System O/H)</div>
                <div style="font-size:9px;color:#64748b;margin-bottom:10px;">${ohLabel}</div>
                <div style="display:flex; align-items:center; margin-bottom:8px;">
                    <span style="font-size:10px; font-weight:bold; width:160px;">${ramBarText}</span>
                    <div style="flex-grow:1; background:#e2e8f0; height:12px; border-radius:6px; overflow:hidden; margin:0 10px; position:relative;">
                        <div style="width:${ramBarPct}%; background:#16a34a; height:100%;"></div>
                    </div>
                    <span style="font-size:10px; font-weight:bold; width:30px; text-align:right;">RAM</span>
                </div>
                <div style="display:flex; align-items:center; margin-bottom:8px;">
                    <span style="font-size:10px; font-weight:bold; width:160px;">${cpuBarText}</span>
                    <div style="flex-grow:1; background:#e2e8f0; height:12px; border-radius:6px; overflow:hidden; margin:0 10px; position:relative;">
                        <div style="width:${cpuBarPct}%; background:#2563eb; height:100%;"></div>
                    </div>
                    <span style="font-size:10px; font-weight:bold; width:30px; text-align:right;">CPU</span>
                </div>
                <div style="display:flex; align-items:center;">
                    <span style="font-size:10px; font-weight:bold; width:160px;">${ghzBarText}</span>
                    <div style="flex-grow:1; background:#e2e8f0; height:12px; border-radius:6px; overflow:hidden; margin:0 10px; position:relative;">
                        <div style="width:${ghzBarPct}%; background:#4f46e5; height:100%;"></div>
                    </div>
                    <span style="font-size:10px; font-weight:bold; width:30px; text-align:right;">GHz</span>
                </div>
            </div>
        </div>`;

        // *** BOM Summary - UPDATED to 6 Columns & Include Storage ***
        bomSummaryHtml = `
            <div class="bom-box"><div class="bom-label">SERVER MODEL</div><div class="bom-val">${nodeCountEff}x ${selectedModel}</div></div>
            <div class="bom-box"><div class="bom-label">PROCESSOR / NODE</div><div class="bom-val">${cpuString}</div></div>
            <div class="bom-box"><div class="bom-label">MEMORY / NODE</div><div class="bom-val">${ramPerNodeEff} GB</div></div>
            <div class="bom-box total"><div class="bom-label">TOTAL CORES</div><div class="bom-val" style="color:#7c3aed">${nodeCountEff * coresPerNode}</div></div>
            <div class="bom-box total"><div class="bom-label">TOTAL STORAGE</div><div class="bom-val" style="color:#059669">${totalStorageDisplay}</div><div class="bom-sub">${showDisks ? '(Usable)' : '(Raw)'}</div></div>
            <div class="bom-box total"><div class="bom-label">TOTAL CLUSTER RAM</div><div class="bom-val" style="color:#2563eb">${(ramPerNodeEff * nodeCountEff).toLocaleString()} GB</div></div>
        `;

        const chassisClass = is1U ? 'u1' : 'u2';
        const maxSlots = is1U ? 10 : 24; 
        
        serverBlades.forEach((srv, i) => {
            let disksHtml = '';
            if (showDisks) {
                 let diskCount = 7; 
                 const diskMatch = srv.innerText.match(/(\d+)\s*\/\s*\d+\s*Disks/i);
                 if (diskMatch) diskCount = parseInt(diskMatch[1]);

                for(let j=0; j < maxSlots; j++) {
                    const activeClass = (j < diskCount) ? 'active' : ''; 
                    disksHtml += `<div class="disk ${activeClass}"></div>`;
                }
            }
            rackHtml += `
            <div class="server-chassis ${chassisClass}">
                <div class="node-label">NODE ${i+1}</div>
                <div class="drive-bays">${disksHtml}</div>
            </div>`;
        });
    }

    // HTML Output
    const printWin = window.open('', '_blank', 'width=1200,height=1200');
    if (!printWin) { alert("Popups blocked!"); return; }

    const finalHtml = `
    <!DOCTYPE html>
    <html dir="ltr">
    <head>
        <title>${document.title}</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
            @page { margin: 0; size: A4 portrait; }
            body { margin: 0; padding: 15mm; font-family: 'Roboto', sans-serif; color: #333; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            
            .header-wrapper { display:flex; justify-content:space-between; align-items:flex-end; border-bottom: 4px solid #e11d48; padding-bottom: 15px; margin-bottom: 30px; }
            .header-left h1 { font-size: 32px; font-weight: 900; color: #0f172a; margin: 0; line-height: 1.1; }
            .header-left h2 { font-size: 18px; font-weight: 500; color: #64748b; margin: 5px 0 0 0; }
            .doc-type { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #e11d48; text-transform: uppercase; margin-bottom: 8px; }
            .header-right { text-align: right; }
            .lenovo-logo { height: 22px; margin-bottom: 12px; display: block; margin-left: auto; }
            .meta-info { font-size: 11px; color: #64748b; font-weight: 500; line-height: 1.4; }

            .sec-title { background: #f8fafc; border-left: 5px solid #0f172a; padding: 8px 12px; font-weight: 700; font-size: 15px; margin: 25px 0 15px 0; text-transform: uppercase; letter-spacing: 0.5px; }
            .snap-container { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
            .snap-box { flex: 1; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px 5px; text-align: center; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
            .snap-val { font-size: 20px; font-weight: 800; color: #1e3a8a; line-height: 1.2; }
            .snap-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; margin: 3px 0; }
            .snap-proj { font-size: 11px; color: #059669; font-weight: 500; border-top: 1px solid #f1f5f9; padding-top: 3px; margin-top: 3px; line-height: 1.2; }
            
            .flat-tbl { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 20px; page-break-inside: avoid; }
            .flat-tbl th { text-align: center; background: #f1f5f9; padding: 8px; border-bottom: 2px solid #cbd5e1; font-weight: 700; color: #475569; text-transform: uppercase; }
            .flat-tbl td { text-align: center; padding: 8px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
            
            /* BOM GRID Updated to 6 Columns */
            .bom-wrapper { page-break-inside: avoid; padding-top: 40px; }
            .bom-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid #cbd5e1; border-radius: 6px; margin-bottom: 20px; overflow: hidden; }
            .bom-box { padding: 8px; text-align: center; border-right: 1px solid #cbd5e1; background: #fff; display: flex; flex-direction: column; justify-content: center; }
            .bom-box:last-child { border-right: none; }
            .bom-box.total { background: #f0fdf4; }
            .bom-label { font-size: 9px; font-weight: 700; color: #64748b; margin-bottom: 4px; text-transform: uppercase; }
            .bom-val { font-size: 11px; font-weight: 700; color: #0f172a; word-wrap: break-word; }
            .bom-sub { font-size: 8px; color: #64748b; margin-top: 2px; }
            
            .node-spec-box { display: flex; border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; margin-bottom: 15px; padding: 10px; align-items: center; }
            .spec-left { width: 35%; border-right: 1px solid #e2e8f0; padding-right: 15px; display: flex; flex-direction: column; justify-content: center; }
            .spec-right { width: 65%; padding-left: 15px; }
            .spec-title { font-size: 9px; font-weight: 700; color: #64748b; text-transform: uppercase; }
            .spec-detail { font-size: 11px; font-weight: 700; color: #0f172a; }

            .rack-frame { background: #ffffff; padding: 10px; border: none; width: 100%; box-sizing: border-box; }
            .server-chassis { margin-bottom: 1px; position: relative; background-repeat: no-repeat; background-size: 100% 100%; border-radius: 0px; }
            .node-label { position: absolute; left: -45px; top: 50%; transform: translateY(-50%); color: #000; font-size: 11px; font-weight: 900; font-family: 'Roboto', sans-serif; letter-spacing: 0.5px; }

            .disk { position: relative; opacity: 0; }
            .disk.active { opacity: 1; }

            .server-chassis.u1 { background-image: url('server_1u_bg.png'); height: 50px; }
            .server-chassis.u1 .drive-bays { 
                height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; 
                padding-left: 7%; padding-right: 20.9%; padding-top: 6px; padding-bottom: 3px; column-gap: 2px; row-gap: 0px;
                align-items: center; justify-items: center;
            }
            .server-chassis.u1 .disk { width: 85%; height: 70%; }
            .server-chassis.u1 .disk.active::after { 
                content: ''; position: absolute; top: 0; left: 8%; width: 2px; height: 90%; 
                background: #ff0000; box-shadow: 0 0 6px #ff0000; border-radius: 2px;
            }

            .server-chassis.u2 { background-image: url('server_2u_bg.png'); height: 100px; }
            .server-chassis.u2 .drive-bays { 
                height: 100%; display: grid; grid-template-columns: repeat(24, 1fr); 
                padding-left: 5.1%; padding-right: 10%; column-gap: 1px; align-items: center; padding-bottom: 80px;
            }
            .server-chassis.u2 .disk { width: 70%; height: 90%; margin: 0 auto; }
            .server-chassis.u2 .disk.active::after { 
                content: ''; position: absolute; bottom: 15%; left: 161%; transform: translateX(-50%);
                width: 80%; height: 3px; background: #ff0000; box-shadow: 0 0 6px #ff0000; border-radius: 2px;
            }
            
            .gap-wrapper { width: 100%; }
            .gap-wrapper > div {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 15px !important;
                width: 100% !important;
            }
            .gap-wrapper > div > div {
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 6px;
                padding: 10px;
                box-sizing: border-box;
            }
            .gap-wrapper > div > div:nth-child(1) { border-top: 4px solid #334155; }
            .gap-wrapper > div > div:nth-child(2) { border-top: 4px solid #3b82f6; }
            .gap-wrapper > div > div:nth-child(3) { border-top: 4px solid #10b981; }

            .no-break-inside { page-break-inside: avoid; }
        </style>
    </head>
    <body>
        <div class="header-wrapper">
            <div class="header-left">
                <div class="doc-type">INFRASTRUCTURE SIZING ASSESSMENT</div>
                <h1>${clientName}</h1>
                <h2>${projectName}</h2>
            </div>
            <div class="header-right">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Lenovo_logo_2015.svg" class="lenovo-logo" alt="Lenovo">
                <div class="meta-info">${fullDateDisplay}</div>
                <div class="meta-info">Prepared by: ${preparedBy}</div>
            </div>
        </div>

        <div class="sec-title">Infrastructure Snapshot</div><div class="snap-container">${snapshotHtml}</div>
        ${finalGapSection}
        ${finalClusterSection}

        <div class="bom-wrapper">
            <div class="sec-title">Proposed Architecture (BOM)</div>
            <div class="bom-grid">${bomSummaryHtml}</div>
            ${nodeStatsHtml}
            <div class="rack-frame">${rackHtml}</div>
        </div>

        <script>
(function () {
    var printed = false;
    function triggerPrint() {
        if (printed) return;
        printed = true;
        try {
            window.focus();
            window.print();
        } catch (e) {}
    }
    function schedulePrint() {
        // Short delay so fonts/logo finish painting before the system dialog
        setTimeout(triggerPrint, 450);
    }
    window.addEventListener('load', schedulePrint);
    if (document.readyState === 'complete') schedulePrint();
    window.addEventListener('afterprint', function () {
        try { window.close(); } catch (e) {}
    });
})();
        </script>
    </body>
    </html>
    `;
    printWin.document.write(finalHtml);
    printWin.document.close();
}