// Production - The Idle Game: Corporate Milestones View
// Fine-grained DOM updates without innerHTML teardowns

import { ACHIEVEMENTS } from '../data/achievements.js';
import { fmtCurrency, fmtNum } from '../core/formatters.js';

export function mountAchievements(container, state, onAction) {
    const achState = state.achievements || {};

    let html = `
        <div class="achievements-header-pane">
            <h2 class="view-title">
                <iconify-icon icon="lucide:trophy" class="title-icon"></iconify-icon>
                Corporate Milestones & Accolades
            </h2>
            <p class="view-subtitle">
                Track your corporate conglomerate's historical accomplishments across production, revenue, tenders, and stock market triumphs.
            </p>
        </div>

        <div class="achievements-grid">
    `;

    for (const ach of ACHIEVEMENTS) {
        const currentTier = achState[ach.id] || 0;
        let currentVal = 0;
        if (ach.reqType === 'total_produced') currentVal = state.stats.totalProduced || 0;
        else if (ach.reqType === 'total_revenue') currentVal = state.lifetimeRevenue || 0;
        else if (ach.reqType === 'contracts_completed') currentVal = state.stats.contractsCompleted || 0;
        else if (ach.reqType === 'ipo_count') currentVal = state.ipoCount || 0;
        else if (ach.reqType === 'managers_hired') currentVal = state.stats.managersHired || 0;

        const maxTier = ach.thresholds.length;
        const isMaxed = currentTier >= maxTier;
        const nextThreshold = !isMaxed ? ach.thresholds[currentTier] : ach.thresholds[maxTier - 1];
        const progressPct = isMaxed ? 100 : Math.min(100, Math.floor((currentVal / nextThreshold) * 100));

        html += `
            <div class="achievement-card ${currentTier > 0 ? 'achieved' : ''}" id="ach-card-${ach.id}">
                <div class="ach-icon-col">
                    <div class="ach-icon-circle ${currentTier > 0 ? 'ach-unlocked' : ''}" id="ach-icon-${ach.id}">
                        <iconify-icon icon="${ach.icon}"></iconify-icon>
                    </div>
                </div>

                <div class="ach-info-col">
                    <div class="ach-title-row">
                        <h4 class="ach-title">${ach.title}</h4>
                        <span class="ach-tier-badge" id="ach-tier-${ach.id}">Tier ${currentTier} / ${maxTier}</span>
                    </div>
                    <p class="ach-desc">${ach.description}</p>
                    <div class="ach-progress-bar-track">
                        <div class="ach-progress-bar-fill" id="ach-fill-${ach.id}" style="width: ${progressPct}%;"></div>
                    </div>
                    <div class="ach-progress-labels font-mono">
                        <span id="ach-curr-val-${ach.id}">${ach.reqType === 'total_revenue' ? fmtCurrency(currentVal) : fmtNum(currentVal, 0)}</span>
                        <span id="ach-next-val-${ach.id}">${isMaxed ? 'Completed!' : (ach.reqType === 'total_revenue' ? fmtCurrency(nextThreshold) : fmtNum(nextThreshold, 0))}</span>
                    </div>
                </div>
            </div>
        `;
    }

    html += `</div>`;
    container.innerHTML = html;
}

export function updateAchievements(container, state) {
    const achState = state.achievements || {};

    for (const ach of ACHIEVEMENTS) {
        const currentTier = achState[ach.id] || 0;
        let currentVal = 0;
        if (ach.reqType === 'total_produced') currentVal = state.stats.totalProduced || 0;
        else if (ach.reqType === 'total_revenue') currentVal = state.lifetimeRevenue || 0;
        else if (ach.reqType === 'contracts_completed') currentVal = state.stats.contractsCompleted || 0;
        else if (ach.reqType === 'ipo_count') currentVal = state.ipoCount || 0;
        else if (ach.reqType === 'managers_hired') currentVal = state.stats.managersHired || 0;

        const maxTier = ach.thresholds.length;
        const isMaxed = currentTier >= maxTier;
        const nextThreshold = !isMaxed ? ach.thresholds[currentTier] : ach.thresholds[maxTier - 1];
        const progressPct = isMaxed ? 100 : Math.min(100, Math.floor((currentVal / nextThreshold) * 100));

        const elFill = document.getElementById(`ach-fill-${ach.id}`);
        if (elFill) elFill.style.width = `${progressPct}%`;

        const elCurr = document.getElementById(`ach-curr-val-${ach.id}`);
        if (elCurr) elCurr.textContent = ach.reqType === 'total_revenue' ? fmtCurrency(currentVal) : fmtNum(currentVal, 0);

        const elTier = document.getElementById(`ach-tier-${ach.id}`);
        if (elTier) elTier.textContent = `Tier ${currentTier} / ${maxTier}`;

        const elIcon = document.getElementById(`ach-icon-${ach.id}`);
        if (elIcon) elIcon.classList.toggle('ach-unlocked', currentTier > 0);
    }
}