// Production - The Idle Game: Corporate Milestones View

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

export function renderAchievements(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' : ''}">
                <div class="ach-icon-col">
                    <div class="ach-icon-circle ${currentTier > 0 ? 'ach-unlocked' : ''}">
                        <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">Tier ${currentTier} / ${maxTier}</span>
                    </div>
                    <p class="ach-desc">${ach.description}</p>
                    <div class="ach-progress-bar-track">
                        <div class="ach-progress-bar-fill" style="width: ${progressPct}%;"></div>
                    </div>
                    <div class="ach-progress-labels font-mono">
                        <span>${ach.reqType === 'total_revenue' ? fmtCurrency(currentVal) : fmtNum(currentVal, 0)}</span>
                        <span>${isMaxed ? 'Completed!' : (ach.reqType === 'total_revenue' ? fmtCurrency(nextThreshold) : fmtNum(nextThreshold, 0))}</span>
                    </div>
                </div>
            </div>
        `;
    }

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