{% extends "base.html" %}
{% block title %}Migration Cost Estimator - ICDEV™ Dashboard{% endblock %}
{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" style="margin-bottom:0.5rem;">
        <span><a href="/" style="color:#1976d2;text-decoration:none;">Home</a></span>
        <span style="color:#999;"> &gt; </span>
        <span style="color:#333;">Migration Cost</span>
    </nav>

    <h1>Migration Cost Estimator</h1>
    <p class="text-muted">Estimate, compare, and project migration costs across 7R strategies with ATO compliance multipliers and ROI analysis.</p>

    <!-- ================================================================= -->
    <!-- 1. Portfolio Summary Cards                                         -->
    <!-- ================================================================= -->
    <div id="portfolio-cards" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0;">
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="card-total-cost" style="font-size:1.8rem;font-weight:bold;color:#1976d2;">—</div>
            <div style="color:#666;">Total Migration Cost</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="card-compliance" style="font-size:1.8rem;font-weight:bold;color:#ff9800;">—</div>
            <div style="color:#666;">Compliance Overhead</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="card-roi" style="font-size:1.8rem;font-weight:bold;color:#4caf50;">—</div>
            <div style="color:#666;">Avg. ROI Period</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="card-apps" style="font-size:1.8rem;font-weight:bold;color:#7b1fa2;">—</div>
            <div style="color:#666;">Total Apps Assessed</div>
        </div>
    </div>

    <!-- ================================================================= -->
    <!-- 2. Cost Calculator                                                 -->
    <!-- ================================================================= -->
    <div style="margin:1.5rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;">
        <h2 style="margin:0 0 1rem;font-size:1.15rem;">Cost Calculator</h2>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem;">
            <div>
                <label for="calc-hours" style="display:block;font-size:0.85rem;color:#555;margin-bottom:0.25rem;">Hours</label>
                <input id="calc-hours" type="number" min="0" value="500" style="width:100%;padding:0.5rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
            </div>
            <div>
                <label for="calc-strategy" style="display:block;font-size:0.85rem;color:#555;margin-bottom:0.25rem;">Strategy</label>
                <select id="calc-strategy" style="width:100%;padding:0.5rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
                    <option value="rehost">Rehost (1.0x)</option>
                    <option value="replatform">Replatform (1.5x)</option>
                    <option value="refactor" selected>Refactor (2.5x)</option>
                    <option value="rearchitect">Rearchitect (3.5x)</option>
                    <option value="repurchase">Repurchase (0.8x)</option>
                    <option value="retire">Retire (0.3x)</option>
                    <option value="retain">Retain (0.1x)</option>
                </select>
            </div>
            <div>
                <label for="calc-ato" style="display:block;font-size:0.85rem;color:#555;margin-bottom:0.25rem;">ATO Impact</label>
                <select id="calc-ato" style="width:100%;padding:0.5rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
                    <option value="none">None (1.0x)</option>
                    <option value="low">Low (1.15x)</option>
                    <option value="medium" selected>Medium (1.35x)</option>
                    <option value="high">High (1.60x)</option>
                    <option value="critical">Critical (2.0x)</option>
                </select>
            </div>
            <div>
                <label for="calc-team" style="display:block;font-size:0.85rem;color:#555;margin-bottom:0.25rem;">Team Size</label>
                <input id="calc-team" type="number" min="1" value="5" style="width:100%;padding:0.5rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
            </div>
        </div>
        <button id="calc-btn" onclick="runCalculation()" style="background:#1976d2;color:#fff;border:none;padding:0.6rem 1.5rem;border-radius:4px;cursor:pointer;font-size:0.95rem;">Calculate</button>
        <div id="calc-result" style="display:none;margin-top:1rem;padding:1rem;background:#f5f8ff;border-radius:6px;border:1px solid #bbdefb;">
            <h3 style="margin:0 0 0.75rem;font-size:1rem;color:#1976d2;">Cost Breakdown</h3>
            <div id="calc-body"></div>
        </div>
    </div>

    <!-- ================================================================= -->
    <!-- 3. Strategy Cost Comparison                                        -->
    <!-- ================================================================= -->
    <div style="margin:1.5rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;">
        <h2 style="margin:0 0 1rem;font-size:1.15rem;">Strategy Cost Comparison</h2>
        <div style="margin-bottom:1rem;">
            <label for="comp-app" style="font-size:0.85rem;color:#555;margin-right:0.5rem;">Application:</label>
            <select id="comp-app" onchange="loadComparison()" style="padding:0.4rem;border:1px solid #ccc;border-radius:4px;min-width:200px;font-size:0.95rem;">
                <option value="">-- Select app --</option>
            </select>
        </div>
        <div id="comparison-chart" style="display:flex;flex-direction:column;gap:0.5rem;"></div>
        <div id="comparison-empty" style="display:none;padding:1.5rem;text-align:center;color:#999;">Select an application above to compare strategies.</div>
    </div>

    <!-- ================================================================= -->
    <!-- 4. Per-Application Cost Table                                      -->
    <!-- ================================================================= -->
    <div style="margin:1.5rem 0;">
        <h2 style="font-size:1.15rem;">Per-Application Cost Estimate</h2>
        <div style="overflow-x:auto;">
            <table id="estimate-table" style="width:100%;border-collapse:collapse;font-size:0.9rem;">
                <thead>
                    <tr style="background:#f5f5f5;border-bottom:2px solid #ddd;">
                        <th style="padding:0.6rem 0.75rem;text-align:left;">App ID</th>
                        <th style="padding:0.6rem 0.75rem;text-align:left;">Strategy</th>
                        <th style="padding:0.6rem 0.75rem;text-align:right;">Base Hours</th>
                        <th style="padding:0.6rem 0.75rem;text-align:right;">Strategy Mult.</th>
                        <th style="padding:0.6rem 0.75rem;text-align:right;">Compliance Mult.</th>
                        <th style="padding:0.6rem 0.75rem;text-align:right;">Total Cost</th>
                        <th style="padding:0.6rem 0.75rem;text-align:right;">Timeline (wks)</th>
                        <th style="padding:0.6rem 0.75rem;text-align:left;">ATO Impact</th>
                    </tr>
                </thead>
                <tbody id="estimate-body"></tbody>
            </table>
        </div>
        <div id="estimate-empty" style="display:none;padding:2rem;text-align:center;color:#999;">No cost estimates available.</div>
    </div>

    <!-- ================================================================= -->
    <!-- 5. ROI Projection                                                  -->
    <!-- ================================================================= -->
    <div style="margin:1.5rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;">
        <h2 style="margin:0 0 1rem;font-size:1.15rem;">ROI Projection (5 Years)</h2>
        <div id="roi-chart" style="position:relative;height:280px;border:1px solid #e0e0e0;border-radius:4px;background:#fafafa;overflow:hidden;"></div>
        <div id="roi-legend" style="display:flex;gap:1.5rem;margin-top:0.75rem;font-size:0.85rem;">
            <span><span style="display:inline-block;width:12px;height:12px;background:#d32f2f;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>Migration Cost</span>
            <span><span style="display:inline-block;width:12px;height:12px;background:#4caf50;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>Cumulative Savings</span>
            <span><span style="display:inline-block;width:12px;height:12px;background:#1976d2;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>Net Value</span>
        </div>
        <div id="roi-summary" style="margin-top:0.75rem;font-size:0.9rem;color:#555;"></div>
    </div>

    <!-- ================================================================= -->
    <!-- 6. Cost Breakdown by Strategy                                      -->
    <!-- ================================================================= -->
    <div style="margin:1.5rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;">
        <h2 style="margin:0 0 1rem;font-size:1.15rem;">Cost Breakdown by Strategy</h2>
        <div id="strategy-stacked" style="margin-bottom:0.75rem;"></div>
        <div id="strategy-legend" style="display:flex;flex-wrap:wrap;gap:1rem;font-size:0.85rem;"></div>
    </div>
</div>

<script>
const STRATEGY_COLORS = {
    rehost: '#1976d2',
    replatform: '#0288d1',
    refactor: '#7b1fa2',
    rearchitect: '#c62828',
    repurchase: '#ef6c00',
    retire: '#78909c',
    retain: '#9e9e9e'
};

const ATO_COLORS = {
    none: '#4caf50',
    low: '#8bc34a',
    medium: '#ff9800',
    high: '#f44336',
    critical: '#b71c1c'
};

function fmt$(v) {
    if (v >= 1e6) return '$' + (v / 1e6).toFixed(2) + 'M';
    if (v >= 1e3) return '$' + (v / 1e3).toFixed(1) + 'K';
    return '$' + v.toFixed(0);
}

/* ---- Portfolio Cards ---- */
async function loadPortfolio() {
    try {
        const res = await fetch('/api/migration-cost/portfolio');
        const d = await res.json();
        document.getElementById('card-total-cost').textContent = fmt$(d.total_estimated_cost || 0);
        document.getElementById('card-compliance').textContent = fmt$(d.compliance_overhead || 0);
        document.getElementById('card-roi').textContent = (d.avg_roi_weeks || 0) + ' wks';
        document.getElementById('card-apps').textContent = d.total_apps || 0;

        renderStrategyStacked(d.strategy_breakdown || {}, d.total_estimated_cost || 0);
    } catch (e) {
        console.error('Portfolio load error:', e);
    }
}

/* ---- Cost Calculator ---- */
async function runCalculation() {
    const payload = {
        hours: parseFloat(document.getElementById('calc-hours').value) || 0,
        strategy: document.getElementById('calc-strategy').value,
        ato_impact: document.getElementById('calc-ato').value,
        team_size: parseInt(document.getElementById('calc-team').value) || 1
    };
    try {
        const res = await fetch('/api/migration-cost/calculate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });
        const d = await res.json();
        if (d.error) { alert(d.error); return; }

        const b = d.breakdown;
        let html = '<table style="width:100%;border-collapse:collapse;font-size:0.9rem;">';
        html += '<tr style="border-bottom:1px solid #ddd;"><td style="padding:0.4rem 0;color:#555;">Base Cost (hours x blended rate)</td><td style="text-align:right;font-weight:bold;">' + fmt$(b.base_cost) + '</td></tr>';
        html += '<tr style="border-bottom:1px solid #ddd;"><td style="padding:0.4rem 0;color:#555;">Strategy Overhead (' + b.strategy_factor + 'x)</td><td style="text-align:right;">' + fmt$(b.strategy_overhead) + '</td></tr>';
        html += '<tr style="border-bottom:1px solid #ddd;"><td style="padding:0.4rem 0;color:#555;">Compliance Overhead (' + b.compliance_multiplier + 'x)</td><td style="text-align:right;">' + fmt$(b.compliance_overhead) + '</td></tr>';
        html += '<tr style="border-top:2px solid #1976d2;"><td style="padding:0.5rem 0;font-weight:bold;color:#1976d2;">Total Cost</td><td style="text-align:right;font-weight:bold;font-size:1.1rem;color:#1976d2;">' + fmt$(b.total_cost) + '</td></tr>';
        html += '</table>';

        html += '<div style="margin-top:0.75rem;font-size:0.85rem;color:#666;">Estimated timeline: <strong>' + d.timeline_weeks + ' weeks</strong> with ' + payload.team_size + ' team member(s)</div>';

        html += '<h4 style="margin:1rem 0 0.5rem;font-size:0.95rem;">Role Breakdown</h4>';
        html += '<table style="width:100%;border-collapse:collapse;font-size:0.85rem;">';
        html += '<tr style="background:#f5f5f5;"><th style="padding:0.4rem;text-align:left;">Role</th><th style="text-align:right;padding:0.4rem;">Hours</th><th style="text-align:right;padding:0.4rem;">Rate</th><th style="text-align:right;padding:0.4rem;">Cost</th></tr>';
        for (const [role, info] of Object.entries(b.role_costs)) {
            html += '<tr style="border-bottom:1px solid #eee;"><td style="padding:0.3rem 0.4rem;">' + role.replace(/_/g, ' ') + '</td>';
            html += '<td style="text-align:right;padding:0.3rem 0.4rem;">' + info.hours + '</td>';
            html += '<td style="text-align:right;padding:0.3rem 0.4rem;">$' + info.rate + '/hr</td>';
            html += '<td style="text-align:right;padding:0.3rem 0.4rem;">' + fmt$(info.cost) + '</td></tr>';
        }
        html += '</table>';

        document.getElementById('calc-body').innerHTML = html;
        document.getElementById('calc-result').style.display = 'block';
    } catch (e) {
        console.error('Calculation error:', e);
    }
}

/* ---- Strategy Comparison ---- */
async function loadComparison() {
    const appId = document.getElementById('comp-app').value;
    const chart = document.getElementById('comparison-chart');
    const empty = document.getElementById('comparison-empty');
    if (!appId) { chart.innerHTML = ''; empty.style.display = 'block'; return; }
    empty.style.display = 'none';

    try {
        const res = await fetch('/api/migration-cost/comparison?legacy_app_id=' + encodeURIComponent(appId));
        const d = await res.json();
        const comps = d.comparisons || [];
        const maxCost = Math.max(...comps.map(c => c.total_cost), 1);

        let html = '';
        for (const c of comps) {
            const pct = (c.total_cost / maxCost * 100).toFixed(1);
            const color = STRATEGY_COLORS[c.strategy] || '#999';
            html += '<div style="display:flex;align-items:center;gap:0.75rem;">';
            html += '<div style="width:100px;font-size:0.85rem;text-align:right;color:#555;">' + c.strategy + '</div>';
            html += '<div style="flex:1;background:#f0f0f0;border-radius:4px;height:28px;position:relative;">';
            html += '<div style="width:' + pct + '%;background:' + color + ';height:100%;border-radius:4px;transition:width 0.4s;"></div>';
            html += '</div>';
            html += '<div style="width:90px;font-size:0.85rem;font-weight:bold;">' + fmt$(c.total_cost) + '</div>';
            html += '</div>';
        }
        chart.innerHTML = html;
    } catch (e) {
        console.error('Comparison load error:', e);
    }
}

/* ---- Per-Application Cost Table ---- */
async function loadEstimate() {
    try {
        const res = await fetch('/api/migration-cost/estimate');
        const d = await res.json();
        const apps = d.apps || [];
        const tbody = document.getElementById('estimate-body');
        const empty = document.getElementById('estimate-empty');
        const select = document.getElementById('comp-app');

        if (!apps.length) {
            tbody.innerHTML = '';
            empty.style.display = 'block';
            return;
        }
        empty.style.display = 'none';

        // Populate comparison dropdown
        let opts = '<option value="">-- Select app --</option>';
        const seen = new Set();
        for (const a of apps) {
            if (!seen.has(a.legacy_app_id)) {
                seen.add(a.legacy_app_id);
                opts += '<option value="' + a.legacy_app_id + '">' + a.legacy_app_id + '</option>';
            }
        }
        select.innerHTML = opts;

        // Cost color coding thresholds
        function costColor(v) {
            if (v >= 500000) return '#b71c1c';
            if (v >= 200000) return '#e65100';
            if (v >= 100000) return '#f57f17';
            if (v >= 50000) return '#1976d2';
            return '#4caf50';
        }

        let html = '';
        for (const a of apps) {
            const cc = costColor(a.total_cost);
            const ac = ATO_COLORS[a.ato_impact] || '#999';
            html += '<tr style="border-bottom:1px solid #eee;">';
            html += '<td style="padding:0.6rem 0.75rem;">' + (a.legacy_app_id || '—') + '</td>';
            html += '<td style="padding:0.6rem 0.75rem;"><span style="display:inline-block;padding:0.15rem 0.5rem;border-radius:3px;font-size:0.8rem;background:' + (STRATEGY_COLORS[a.strategy] || '#999') + ';color:#fff;">' + a.strategy + '</span></td>';
            html += '<td style="padding:0.6rem 0.75rem;text-align:right;">' + (a.base_hours || 0) + '</td>';
            html += '<td style="padding:0.6rem 0.75rem;text-align:right;">' + a.strategy_factor + 'x</td>';
            html += '<td style="padding:0.6rem 0.75rem;text-align:right;">' + a.compliance_multiplier + 'x</td>';
            html += '<td style="padding:0.6rem 0.75rem;text-align:right;font-weight:bold;color:' + cc + ';">' + fmt$(a.total_cost) + '</td>';
            html += '<td style="padding:0.6rem 0.75rem;text-align:right;">' + (a.timeline_weeks || '—') + '</td>';
            html += '<td style="padding:0.6rem 0.75rem;"><span style="display:inline-block;padding:0.15rem 0.5rem;border-radius:3px;font-size:0.8rem;background:' + ac + ';color:#fff;">' + (a.ato_impact || 'none') + '</span></td>';
            html += '</tr>';
        }
        tbody.innerHTML = html;
    } catch (e) {
        console.error('Estimate load error:', e);
    }
}

/* ---- ROI Projection ---- */
async function loadROI() {
    try {
        const res = await fetch('/api/migration-cost/roi?years=5');
        const d = await res.json();
        const projs = d.projections || [];
        const chart = document.getElementById('roi-chart');
        const summary = document.getElementById('roi-summary');

        if (!projs.length || d.migration_cost === 0) {
            chart.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;">No ROI data available.</div>';
            summary.textContent = '';
            return;
        }

        // Find max absolute value for scaling
        const allVals = [d.migration_cost];
        for (const p of projs) {
            allVals.push(Math.abs(p.cumulative_savings), Math.abs(p.net_value));
        }
        const maxVal = Math.max(...allVals, 1);
        const chartH = 240;
        const padTop = 20;
        const baseline = padTop + chartH / 2;

        function yPos(v) {
            return baseline - (v / maxVal) * (chartH / 2 - 10);
        }

        // SVG line chart
        let svg = '<svg width="100%" height="280" viewBox="0 0 600 280" preserveAspectRatio="xMidYMid meet" style="font-family:sans-serif;">';

        // Baseline (zero line)
        svg += '<line x1="60" y1="' + baseline + '" x2="560" y2="' + baseline + '" stroke="#bbb" stroke-dasharray="4"/>';
        svg += '<text x="55" y="' + (baseline + 4) + '" text-anchor="end" font-size="11" fill="#999">$0</text>';

        // Migration cost horizontal line
        const costY = yPos(-d.migration_cost);

        // Grid labels
        svg += '<text x="55" y="' + (padTop + 10) + '" text-anchor="end" font-size="10" fill="#999">' + fmt$(maxVal) + '</text>';
        svg += '<text x="55" y="' + (padTop + chartH - 5) + '" text-anchor="end" font-size="10" fill="#999">-' + fmt$(maxVal) + '</text>';

        // Data points
        const stepX = 500 / (projs.length + 1);
        let savingsPath = '';
        let netPath = '';

        for (let i = 0; i < projs.length; i++) {
            const x = 60 + stepX * (i + 1);
            const sy = yPos(projs[i].cumulative_savings);
            const ny = yPos(projs[i].net_value);

            savingsPath += (i === 0 ? 'M' : 'L') + x + ',' + sy;
            netPath += (i === 0 ? 'M' : 'L') + x + ',' + ny;

            // Year labels
            svg += '<text x="' + x + '" y="' + (padTop + chartH + 15) + '" text-anchor="middle" font-size="11" fill="#666">Y' + projs[i].year + '</text>';

            // Data dots
            svg += '<circle cx="' + x + '" cy="' + sy + '" r="4" fill="#4caf50"/>';
            svg += '<circle cx="' + x + '" cy="' + ny + '" r="4" fill="#1976d2"/>';

            // Breakeven marker
            if (d.breakeven_year && projs[i].year === d.breakeven_year) {
                svg += '<line x1="' + x + '" y1="' + padTop + '" x2="' + x + '" y2="' + (padTop + chartH) + '" stroke="#4caf50" stroke-dasharray="6" stroke-width="1.5"/>';
                svg += '<text x="' + x + '" y="' + (padTop - 4) + '" text-anchor="middle" font-size="10" fill="#4caf50" font-weight="bold">Breakeven</text>';
            }
        }

        // Migration cost line
        svg += '<line x1="60" y1="' + costY + '" x2="560" y2="' + costY + '" stroke="#d32f2f" stroke-width="2" stroke-dasharray="6"/>';
        svg += '<text x="565" y="' + (costY + 4) + '" font-size="10" fill="#d32f2f">' + fmt$(d.migration_cost) + '</text>';

        // Lines
        svg += '<path d="' + savingsPath + '" fill="none" stroke="#4caf50" stroke-width="2.5"/>';
        svg += '<path d="' + netPath + '" fill="none" stroke="#1976d2" stroke-width="2.5"/>';

        svg += '</svg>';
        chart.innerHTML = svg;

        // Summary text
        let sumText = 'Migration cost: ' + fmt$(d.migration_cost) + ' | Annual savings: ' + fmt$(d.annual_savings);
        if (d.breakeven_year) {
            sumText += ' | Breakeven: Year ' + d.breakeven_year;
        } else {
            sumText += ' | Breakeven: >5 years';
        }
        summary.textContent = sumText;
    } catch (e) {
        console.error('ROI load error:', e);
    }
}

/* ---- Strategy Stacked Bar ---- */
function renderStrategyStacked(breakdown, totalCost) {
    const container = document.getElementById('strategy-stacked');
    const legend = document.getElementById('strategy-legend');

    if (!Object.keys(breakdown).length || totalCost === 0) {
        container.innerHTML = '<div style="padding:1rem;text-align:center;color:#999;">No strategy data available.</div>';
        legend.innerHTML = '';
        return;
    }

    // Stacked horizontal bar
    let barHtml = '<div style="display:flex;height:36px;border-radius:4px;overflow:hidden;">';
    let legendHtml = '';

    for (const [strategy, info] of Object.entries(breakdown)) {
        const pct = ((info.total_cost / totalCost) * 100).toFixed(1);
        const color = STRATEGY_COLORS[strategy] || '#999';
        if (parseFloat(pct) > 0) {
            barHtml += '<div style="width:' + pct + '%;background:' + color + ';display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-weight:bold;min-width:' + (parseFloat(pct) > 5 ? '0' : '20px') + ';" title="' + strategy + ': ' + fmt$(info.total_cost) + ' (' + pct + '%)">';
            if (parseFloat(pct) > 8) barHtml += pct + '%';
            barHtml += '</div>';
        }
        legendHtml += '<span><span style="display:inline-block;width:12px;height:12px;background:' + color + ';border-radius:2px;margin-right:4px;vertical-align:middle;"></span>' + strategy + ': ' + fmt$(info.total_cost) + ' (' + info.count + ' apps)</span>';
    }

    barHtml += '</div>';
    container.innerHTML = barHtml;
    legend.innerHTML = legendHtml;
}

/* ---- Init ---- */
document.addEventListener('DOMContentLoaded', function() {
    loadPortfolio();
    loadEstimate();
    loadROI();
});
</script>
{% endblock %}