// Production UI: Individual Facility Card (HTML Mount and Fine-grained DOM update)
import { getProduct, getNextMilestone, getUnitMilestoneMultiplier, SECTORS } from '../../data/products.js';
import { fmtCurrency, fmtNum } from '../../core/formatters.js';
import { calculateMultiCost, getProductOutputRates, computeProductNetFlow } from './ratesCalculator.js';

export function renderFacilityCardHtml(p, pState, state, buyMode) {
    const sector = SECTORS.find(s => s.id === p.sector);
    const isSelected = state.selectedProductId === p.id;

    if (!pState.unlocked) {
        const canAffordUnlock = state.cash >= p.unlockCost;
        return `
            <div class="facility-card locked-card ${isSelected ? 'selected' : ''}" id="card-${p.id}" data-product="${p.id}">
                <div class="facility-header">
                    <div class="facility-icon-wrap" style="background: ${p.color}15; color: ${p.color};">
                        <iconify-icon icon="${p.icon}" class="icon-lg"></iconify-icon>
                    </div>
                    <div class="facility-title-wrap">
                        <span class="sector-badge" style="color: ${sector?.color || '#64748b'};">
                            ${sector?.name || 'Industry'} &bull; Tier ${p.tier}
                        </span>
                        <h3 class="facility-name">${p.name}</h3>
                    </div>
                </div>
                <p class="facility-desc">${p.description}</p>
                <div class="locked-footer">
                    <button class="btn-primary-corp btn-unlock" id="btn-unlock-${p.id}" data-product="${p.id}" ${canAffordUnlock ? '' : 'disabled'}>
                        <iconify-icon icon="lucide:lock-open"></iconify-icon>
                        <span>Acquire Permit (${fmtCurrency(p.unlockCost)})</span>
                    </button>
                </div>
            </div>
        `;
    }

    const nextM = getNextMilestone(pState.lines);
    const rates = getProductOutputRates(p, pState, state);
    const milestoneMult = rates.milestoneMult || getUnitMilestoneMultiplier(pState.lines);
    const calc = calculateMultiCost(p.baseFacilityCost, pState.lines, buyMode);
    const canAffordBuy = state.cash >= calc.cost;
    const managerCost = p.baseManagerCost;
    const canAffordManager = state.cash >= managerCost;
    const logisticsCost = p.baseLogisticsCost * Math.pow(1.15, pState.logistics || 0);
    const canAffordLogistics = state.cash >= logisticsCost;

    const isRaw = !p.inputs || p.inputs.length === 0;
    let inputsHtml = '';
    if (!isRaw) {
        inputsHtml = `
            <div class="inputs-strip">
                <span class="inputs-label">Inputs per line:</span>
                <div class="inputs-chips">
                    ${p.inputs.map(inp => {
                        const inpProduct = getProduct(inp.id);
                        const currentStock = state.products[inp.id]?.stock || 0;
                        const neededPerLine = inp.amount * pState.lines;
                        const isLow = currentStock < neededPerLine;
                        return `
                            <span class="input-chip ${isLow ? 'low-stock' : ''}" id="chip-${p.id}-${inp.id}" title="${inpProduct?.name}">
                                <iconify-icon icon="${inpProduct?.icon || 'lucide:box'}"></iconify-icon>
                                ${inpProduct?.name}: <strong id="chip-val-${p.id}-${inp.id}">${fmtNum(currentStock, 0)}</strong> / ${fmtNum(neededPerLine, 0)}
                            </span>
                        `;
                    }).join('')}
                </div>
            </div>
        `;
    }

    let statusBadge = '';
    if (pState.isBottlenecked) {
        statusBadge = `<span class="status-badge badge-warning" id="badge-${p.id}"><iconify-icon icon="lucide:alert-triangle"></iconify-icon> Waiting for Inputs</span>`;
    } else if (pState.lines > 0) {
        statusBadge = `<span class="status-badge badge-success" id="badge-${p.id}"><iconify-icon icon="lucide:check-circle"></iconify-icon> Operating (${milestoneMult}x Speed)</span>`;
    } else {
        statusBadge = `<span class="status-badge badge-idle" id="badge-${p.id}">Idle (0 Lines)</span>`;
    }

    const progressPct = Math.min(100, Math.floor((pState.cycleProgress || 0) * 100));

    return `
        <div class="facility-card active-card ${isSelected ? 'selected' : ''}" id="card-${p.id}" data-product="${p.id}">
            <div class="facility-header">
                <div class="facility-icon-wrap" style="background: ${p.color}15; color: ${p.color};">
                    <iconify-icon icon="${p.icon}" class="icon-lg"></iconify-icon>
                </div>
                <div class="facility-title-wrap">
                    <div class="facility-meta-row">
                        <span class="sector-badge" style="color: ${sector?.color || '#64748b'};">
                            ${sector?.name} &bull; Tier ${p.tier}
                        </span>
                        <div id="badge-wrap-${p.id}">${statusBadge}</div>
                    </div>
                    <h3 class="facility-name">${p.name}</h3>
                    <span class="facility-type-sub" id="type-sub-${p.id}">${p.facilityName} &bull; <strong>${pState.lines}</strong> lines (${nextM - pState.lines} to 2x)</span>
                </div>
            </div>

            <!-- Cycle Progress Bar -->
            <div class="cycle-bar-track">
                <div class="cycle-bar-fill" id="progress-${p.id}" style="width: ${progressPct}%; background-color: ${p.color};"></div>
            </div>

            <!-- Stock, Velocity and Revenue Summary -->
            <div class="facility-stats-grid">
                <div class="stat-cell">
                    <span class="stat-label">Stockpile:</span>
                    <span class="stat-value font-mono"><strong id="stock-${p.id}">${fmtNum(pState.stock, 0)}</strong> ${p.unit}</span>
                </div>
                <div class="stat-cell">
                    <span class="stat-label">Production Output:</span>
                    <span class="stat-value font-mono ${rates.isBottlenecked ? 'text-warning' : 'text-profit'}" id="rate-units-${p.id}">
                        ${rates.isBottlenecked ? '0.0 (Paused)' : `${fmtNum(rates.prodRate, 1)}/s`}
                    </span>
                </div>
                <div class="stat-cell" title="Net Supply Flow = Factory Production minus Downstream Input Consumption minus Logistics Wholesale Sales">
                    <span class="stat-label">Net Balance:</span>
                    <span class="stat-value font-mono text-profit" id="net-flow-${p.id}">+0.0/s</span>
                </div>
                <div class="stat-cell">
                    <span class="stat-label">Logistics Rev:</span>
                    <span class="stat-value font-mono text-profit" id="rate-rev-${p.id}">+$${fmtNum(rates.revRate, 2)}/s</span>
                </div>
                <div class="stat-cell">
                    <span class="stat-label">Wholesale Price:</span>
                    <span class="stat-value font-mono">${fmtCurrency(p.basePrice)}</span>
                </div>
                <div class="stat-cell" title="Logistics fleets automatically sell stockpiled goods continuously onto the wholesale market (0.75 units/sec per fleet)">
                    <span class="stat-label">Logistics Auto-Sell:</span>
                    <span class="stat-value font-mono" id="logistics-${p.id}">
                        ${pState.logistics || 0} fleets (${(pState.logisticsEnabled !== false) ? `${fmtNum((pState.logistics || 0) * 0.75, 2)}/s` : 'Paused'})
                    </span>
                </div>
            </div>

            ${inputsHtml}

            <!-- Facility Supply & Distribution Policies -->
            <div class="facility-policy-bar">
                <span class="policy-label">Policy:</span>
                
                <button class="btn-policy-toggle ${(pState.logisticsEnabled !== false) ? 'active' : 'inactive'} btn-toggle-logistics" id="btn-toggle-logistics-${p.id}" data-product="${p.id}" title="Toggle Wholesale Distribution Fleet on/off">
                    <iconify-icon icon="${(pState.logisticsEnabled !== false) ? 'lucide:truck' : 'lucide:truck-x'}"></iconify-icon>
                    <span id="btn-toggle-logistics-text-${p.id}">Wholesale Fleet: ${(pState.logisticsEnabled !== false) ? 'ON' : 'OFF'}</span>
                </button>

                <button class="btn-policy-toggle ${(pState.supplyDownstreamEnabled !== false) ? 'active' : 'inactive'} btn-toggle-downstream" id="btn-toggle-downstream-${p.id}" data-product="${p.id}" title="Toggle raw material supply to downstream manufacturing factories on/off">
                    <iconify-icon icon="${(pState.supplyDownstreamEnabled !== false) ? 'lucide:git-pull-request' : 'lucide:git-pull-request-closed'}"></iconify-icon>
                    <span id="btn-toggle-downstream-text-${p.id}">Downstream Supply: ${(pState.supplyDownstreamEnabled !== false) ? 'ON' : 'OFF'}</span>
                </button>
            </div>

            <!-- Facility Actions Bar -->
            <div class="facility-actions-row">
                <button class="btn-corp-action btn-cycle" data-product="${p.id}" title="Run 1 manual production cycle">
                    <iconify-icon icon="lucide:play"></iconify-icon>
                    <span>Run Batch</span>
                </button>
                
                <button class="btn-primary-corp btn-expand" id="btn-expand-${p.id}" data-product="${p.id}" ${canAffordBuy ? '' : 'disabled'} title="Add more production lines to increase output volume">
                    <iconify-icon icon="lucide:plus-circle"></iconify-icon>
                    <span id="btn-expand-text-${p.id}">+${calc.count} Lines (${fmtCurrency(calc.cost)})</span>
                </button>

                ${!pState.manager ? `
                    <button class="btn-corp-secondary btn-hire-mgr" id="btn-hire-${p.id}" data-product="${p.id}" ${canAffordManager ? '' : 'disabled'} title="Hires a Facility Lead who automatically runs production continuously without clicking">
                        <iconify-icon icon="lucide:user-check"></iconify-icon>
                        <span>Hire Lead (${fmtCurrency(managerCost)})</span>
                    </button>
                ` : `
                    <span class="mgr-hired-badge" title="Facility Lead hired: 100% automated continuous production active">
                        <iconify-icon icon="lucide:bot"></iconify-icon> <span>Lead Active (Auto)</span>
                    </span>
                `}

                <button class="btn-corp-secondary btn-expand-logistics" id="btn-logistics-${p.id}" data-product="${p.id}" ${canAffordLogistics ? '' : 'disabled'} title="Deploys an automated distribution fleet (+0.75 units/sec passive wholesale sales)">
                    <iconify-icon icon="lucide:truck"></iconify-icon>
                    <span id="btn-logistics-text-${p.id}">+Fleet (${fmtCurrency(logisticsCost)})</span>
                </button>
            </div>
        </div>
    `;
}

export function updateFacilityCardDom(p, pState, state, buyMode) {
    const cash = state.cash;

    if (!pState.unlocked) {
        const btnUnlock = document.getElementById(`btn-unlock-${p.id}`);
        if (btnUnlock) {
            const canAfford = cash >= p.unlockCost;
            if (btnUnlock.disabled !== !canAfford) {
                btnUnlock.disabled = !canAfford;
            }
        }
        return;
    }

    // Live Individual Factory Rates & Output
    const rates = getProductOutputRates(p, pState, state);
    const elRateUnits = document.getElementById(`rate-units-${p.id}`);
    if (elRateUnits) {
        const unitsText = rates.isBottlenecked ? '0.0 (Paused)' : `${fmtNum(rates.prodRate, 1)}/s`;
        if (elRateUnits.textContent !== unitsText) {
            elRateUnits.textContent = unitsText;
        }
        elRateUnits.className = `stat-value font-mono ${rates.isBottlenecked ? 'text-warning' : 'text-profit'}`;
    }

    // Live Net Flow (Production minus Downstream Consumption minus Logistics Sales)
    const netFlow = computeProductNetFlow(p, state);
    const elNetFlow = document.getElementById(`net-flow-${p.id}`);
    if (elNetFlow) {
        const sign = netFlow.netRate > 0.01 ? '+' : '';
        const netText = `${sign}${fmtNum(netFlow.netRate, 1)}/s`;
        if (elNetFlow.textContent !== netText) {
            elNetFlow.textContent = netText;
        }
        const isDeficit = netFlow.netRate < -0.05;
        const isSurplus = netFlow.netRate > 0.05;
        elNetFlow.className = `stat-value font-mono ${isDeficit ? 'text-warning' : (isSurplus ? 'text-profit' : '')}`;
    }

    const elRateRev = document.getElementById(`rate-rev-${p.id}`);
    if (elRateRev) {
        const revText = `+$${fmtNum(rates.revRate, 2)}/s`;
        if (elRateRev.textContent !== revText) {
            elRateRev.textContent = revText;
        }
    }

    const elEff = document.getElementById(`eff-${p.id}`);
    if (elEff) {
        const effText = `${rates.milestoneMult}x Speed`;
        if (elEff.textContent !== effText) {
            elEff.textContent = effText;
        }
    }

    const elLogistics = document.getElementById(`logistics-${p.id}`);
    if (elLogistics) {
        const count = pState.logistics || 0;
        const isLogActive = pState.logisticsEnabled !== false;
        const ratePart = isLogActive ? `${fmtNum(count * 0.75, 2)}/s` : 'Paused';
        const logText = `${count} fleets (${ratePart})`;
        if (elLogistics.textContent !== logText) {
            elLogistics.textContent = logText;
        }
    }

    // Policy Button Toggles DOM State
    const btnToggleLog = document.getElementById(`btn-toggle-logistics-${p.id}`);
    if (btnToggleLog) {
        const isLogActive = pState.logisticsEnabled !== false;
        btnToggleLog.className = `btn-policy-toggle ${isLogActive ? 'active' : 'inactive'} btn-toggle-logistics`;
        const textSpan = document.getElementById(`btn-toggle-logistics-text-${p.id}`);
        if (textSpan) {
            const tText = `Wholesale Fleet: ${isLogActive ? 'ON' : 'OFF'}`;
            if (textSpan.textContent !== tText) textSpan.textContent = tText;
        }
        const iconEl = btnToggleLog.querySelector('iconify-icon');
        if (iconEl) {
            iconEl.setAttribute('icon', isLogActive ? 'lucide:truck' : 'lucide:truck-x');
        }
    }

    const btnToggleDown = document.getElementById(`btn-toggle-downstream-${p.id}`);
    if (btnToggleDown) {
        const isDownActive = pState.supplyDownstreamEnabled !== false;
        btnToggleDown.className = `btn-policy-toggle ${isDownActive ? 'active' : 'inactive'} btn-toggle-downstream`;
        const textSpan = document.getElementById(`btn-toggle-downstream-text-${p.id}`);
        if (textSpan) {
            const tText = `Downstream Supply: ${isDownActive ? 'ON' : 'OFF'}`;
            if (textSpan.textContent !== tText) textSpan.textContent = tText;
        }
        const iconEl = btnToggleDown.querySelector('iconify-icon');
        if (iconEl) {
            iconEl.setAttribute('icon', isDownActive ? 'lucide:git-pull-request' : 'lucide:git-pull-request-closed');
        }
    }

    const elProgress = document.getElementById(`progress-${p.id}`);
    if (elProgress) {
        const progressPct = Math.min(100, Math.floor((pState.cycleProgress || 0) * 100));
        elProgress.style.width = `${progressPct}%`;
    }

    // Stockpile Text
    const elStock = document.getElementById(`stock-${p.id}`);
    if (elStock) {
        const stockText = fmtNum(pState.stock, 0);
        if (elStock.textContent !== stockText) {
            elStock.textContent = stockText;
        }
    }

    // Status Badge
    const elBadge = document.getElementById(`badge-${p.id}`);
    if (elBadge) {
        const isBottlenecked = pState.isBottlenecked;
        const hasWarning = elBadge.classList.contains('badge-warning');
        if (isBottlenecked && !hasWarning) {
            elBadge.className = 'status-badge badge-warning';
            elBadge.innerHTML = `<iconify-icon icon="lucide:alert-triangle"></iconify-icon> Waiting for Inputs`;
        } else if (!isBottlenecked && hasWarning) {
            const milestoneMult = getUnitMilestoneMultiplier(pState.lines);
            elBadge.className = 'status-badge badge-success';
            elBadge.innerHTML = `<iconify-icon icon="lucide:check-circle"></iconify-icon> Operating (${milestoneMult}x Speed)`;
        }
    }

    // Input Chips Stock
    if (p.inputs && p.inputs.length > 0) {
        for (const inp of p.inputs) {
            const currentStock = state.products[inp.id]?.stock || 0;
            const elChipVal = document.getElementById(`chip-val-${p.id}-${inp.id}`);
            if (elChipVal) {
                const textVal = fmtNum(currentStock, 0);
                if (elChipVal.textContent !== textVal) {
                    elChipVal.textContent = textVal;
                }
            }
            const elChip = document.getElementById(`chip-${p.id}-${inp.id}`);
            if (elChip) {
                const needed = inp.amount * pState.lines;
                const isLow = currentStock < needed;
                elChip.classList.toggle('low-stock', isLow);
            }
        }
    }

    // Expand Button disabled state
    const calc = calculateMultiCost(p.baseFacilityCost, pState.lines, buyMode);
    const elBtnExpand = document.getElementById(`btn-expand-${p.id}`);
    if (elBtnExpand) {
        const canAfford = cash >= calc.cost;
        if (elBtnExpand.disabled !== !canAfford) {
            elBtnExpand.disabled = !canAfford;
        }
    }

    // Hire Manager disabled state
    const elBtnHire = document.getElementById(`btn-hire-${p.id}`);
    if (elBtnHire) {
        const canAfford = cash >= p.baseManagerCost;
        if (elBtnHire.disabled !== !canAfford) {
            elBtnHire.disabled = !canAfford;
        }
    }

    // Logistics Button disabled state
    const logisticsCost = p.baseLogisticsCost * Math.pow(1.15, pState.logistics || 0);
    const elBtnLogistics = document.getElementById(`btn-logistics-${p.id}`);
    if (elBtnLogistics) {
        const canAfford = cash >= logisticsCost;
        if (elBtnLogistics.disabled !== !canAfford) {
            elBtnLogistics.disabled = !canAfford;
        }
        const elBtnLogisticsText = document.getElementById(`btn-logistics-text-${p.id}`);
        if (elBtnLogisticsText) {
            const text = `+Fleet (${fmtCurrency(logisticsCost)})`;
            if (elBtnLogisticsText.textContent !== text) {
                elBtnLogisticsText.textContent = text;
            }
        }
    }

    // Selected Card class
    const elCard = document.getElementById(`card-${p.id}`);
    if (elCard) {
        const isSelected = state.selectedProductId === p.id;
        elCard.classList.toggle('selected', isSelected);
    }
}