{% extends "base.html" %}
{% block title %}CPMP Portfolio - ICDEV™{% endblock %}

{% block content %}
{% from "includes/classification_macros.html" import design_classification_banner %}
{{ design_classification_banner('CUI') }}
{% include "includes/ai_brief_banner.html" ignore missing %}
<div class="breadcrumbs"><a href="/">Home</a><span class="separator">/</span><span>CPMP Portfolio</span></div>

<div class="page-header" style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
    <div>
        <h1>Contract Portfolio</h1>
        <p class="subtitle">Contract Performance Management Portal &mdash; single pane of glass</p>
    </div>
    <div style="display:flex; gap:8px; flex-wrap:wrap;">
        <a href="/cpmp/reports" class="btn btn-primary" style="font-size:13px;">&#128196; View PMO Briefs</a>
        <a href="/cpmp/deliverables" class="btn btn-secondary" style="font-size:13px;">All Deliverables &rarr;</a>
    </div>
</div>

<!-- ── Cross-Portfolio Aggregate Banner (loaded async) ───────────────── -->
<div id="agg-banner" style="display:none; background:var(--bg-secondary,#12122a); border:1px solid var(--border-color,#2a2a4a); border-radius:8px; padding:14px 20px; margin-bottom:20px;">
    <div style="font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;">Portfolio Aggregates</div>
    <div style="display:flex; gap:32px; flex-wrap:wrap;">
        <div><span style="font-size:22px; font-weight:700;" id="agg-cpi">—</span><br><span style="font-size:11px; color:var(--text-secondary);">Avg CPI</span></div>
        <div><span style="font-size:22px; font-weight:700;" id="agg-spi">—</span><br><span style="font-size:11px; color:var(--text-secondary);">Avg SPI</span></div>
        <div><span style="font-size:22px; font-weight:700;" id="agg-ontime">—</span><br><span style="font-size:11px; color:var(--text-secondary);">Deliverables On-Time</span></div>
        <div><span style="font-size:22px; font-weight:700; color:var(--status-red,#dc3545);" id="agg-opts">—</span><br><span style="font-size:11px; color:var(--text-secondary);">Critical Option Windows</span></div>
    </div>
</div>

<!-- Stat Grid -->
<div class="stat-grid" aria-label="Portfolio summary statistics">
    <div class="stat-card">
        <div class="stat-value">{{ portfolio.total_contracts | default(0) }}</div>
        <div class="stat-label">Total Contracts</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ portfolio.active_contracts | default(0) }}</div>
        <div class="stat-label">Active</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">${{ '{:,.0f}'.format(portfolio.total_value | default(0)) }}</div>
        <div class="stat-label">Total Value</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">${{ '{:,.0f}'.format(portfolio.burn_rate | default(0)) }}</div>
        <div class="stat-label">Burn Rate</div>
    </div>
    <div class="stat-card">
        <div class="stat-value {% if portfolio.overdue_deliverables | default(0) > 0 %}text-danger{% endif %}">{{ portfolio.overdue_deliverables | default(0) }}</div>
        <div class="stat-label">Overdue Deliverables</div>
    </div>
    <div class="stat-card">
        <div class="stat-value {% if (portfolio.health_distribution.yellow | default(0)) + (portfolio.health_distribution.red | default(0)) > 0 %}text-warning{% endif %}">
            {{ (portfolio.health_distribution.yellow | default(0)) + (portfolio.health_distribution.red | default(0)) }}
        </div>
        <div class="stat-label">At-Risk</div>
    </div>
</div>

<!-- Health Distribution -->
<div class="table-container" style="margin-top: 20px;">
    <div class="table-header">
        <h2>Health Distribution</h2>
    </div>
    <div style="padding: 16px;" role="img" aria-label="Contract health distribution: {{ portfolio.health_distribution.green | default(0) }} green, {{ portfolio.health_distribution.yellow | default(0) }} yellow, {{ portfolio.health_distribution.red | default(0) }} red">
        {% set green_count = portfolio.health_distribution.green | default(0) %}
        {% set yellow_count = portfolio.health_distribution.yellow | default(0) %}
        {% set red_count = portfolio.health_distribution.red | default(0) %}
        {% set health_total = green_count + yellow_count + red_count %}

        <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
            <div style="flex: 1; min-width: 200px;">
                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                    <span class="badge badge-success" style="min-width: 60px; text-align: center;">Green</span>
                    <div style="flex: 1; margin: 0 12px; background: var(--bg-secondary, #1a1a2e); border-radius: 4px; height: 24px; overflow: hidden;">
                        <div style="width: {{ ((green_count / health_total * 100) | round(0) | int) if health_total > 0 else 0 }}%; height: 100%; background: var(--status-green, #28a745); border-radius: 4px; transition: width 0.3s;"></div>
                    </div>
                    <span style="min-width: 30px; text-align: right; font-weight: bold;">{{ green_count }}</span>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                    <span class="badge badge-warning" style="min-width: 60px; text-align: center;">Yellow</span>
                    <div style="flex: 1; margin: 0 12px; background: var(--bg-secondary, #1a1a2e); border-radius: 4px; height: 24px; overflow: hidden;">
                        <div style="width: {{ ((yellow_count / health_total * 100) | round(0) | int) if health_total > 0 else 0 }}%; height: 100%; background: var(--status-yellow, #ffc107); border-radius: 4px; transition: width 0.3s;"></div>
                    </div>
                    <span style="min-width: 30px; text-align: right; font-weight: bold;">{{ yellow_count }}</span>
                </div>
                <div style="display: flex; align-items: center;">
                    <span class="badge badge-error" style="min-width: 60px; text-align: center;">Red</span>
                    <div style="flex: 1; margin: 0 12px; background: var(--bg-secondary, #1a1a2e); border-radius: 4px; height: 24px; overflow: hidden;">
                        <div style="width: {{ ((red_count / health_total * 100) | round(0) | int) if health_total > 0 else 0 }}%; height: 100%; background: var(--status-red, #dc3545); border-radius: 4px; transition: width 0.3s;"></div>
                    </div>
                    <span style="min-width: 30px; text-align: right; font-weight: bold;">{{ red_count }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contract Table -->
<div class="table-container" style="margin-top: 20px;">
    <div class="table-header">
        <h2>Contracts</h2>
    </div>
    <table aria-label="Contract portfolio listing">
        <thead>
            <tr>
                <th>Contract #</th>
                <th>Title</th>
                <th>Agency</th>
                <th>Type</th>
                <th>Status</th>
                <th>Health</th>
                <th>POP End</th>
                <th>Value</th>
                <th>CPI</th>
                <th>SPI</th>
            </tr>
        </thead>
        <tbody>
            {% for contract in contracts %}
            <tr>
                <td><a href="/cpmp/{{ contract.id }}">{{ contract.contract_number | default('—') }}</a></td>
                <td><a href="/cpmp/{{ contract.id }}">{{ contract.title | default('—') }}</a></td>
                <td>{{ contract.agency | default('—') }}</td>
                <td>{{ contract.contract_type | default('—') }}</td>
                <td>
                    {% set cstatus = contract.status | default('unknown') %}
                    {% set cstatus_colors = {'active': 'success', 'complete': 'info', 'at_risk': 'warning', 'overdue': 'error', 'closed': 'info', 'pending': 'warning'} %}
                    <span class="badge badge-{{ cstatus_colors.get(cstatus, 'info') }}">{{ cstatus | replace('_', ' ') | title }}</span>
                </td>
                <td>
                    {% set health = contract.health | default('unknown') %}
                    {% if health == 'green' %}
                    <span class="badge badge-success">Green</span>
                    {% elif health == 'yellow' %}
                    <span class="badge badge-warning">Yellow</span>
                    {% elif health == 'red' %}
                    <span class="badge badge-error">Red</span>
                    {% else %}
                    <span class="badge">{{ health | title }}</span>
                    {% endif %}
                </td>
                <td>{{ contract.pop_end | default('—') }}</td>
                <td>${{ '{:,.0f}'.format(contract.value | default(0)) }}</td>
                <td>
                    {% set cpi = contract.cpi %}
                    {% if cpi is not none %}
                    <span class="{% if cpi < 0.85 %}text-danger{% elif cpi < 0.95 %}text-warning{% endif %}" style="font-weight: bold;">
                        {{ cpi | round(2) }}
                    </span>
                    {% else %}
                    <span class="text-muted">—</span>
                    {% endif %}
                </td>
                <td>
                    {% set spi = contract.spi %}
                    {% if spi is not none %}
                    <span class="{% if spi < 0.85 %}text-danger{% elif spi < 0.95 %}text-warning{% endif %}" style="font-weight: bold;">
                        {{ spi | round(2) }}
                    </span>
                    {% else %}
                    <span class="text-muted">—</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr><td colspan="10" class="text-muted" style="text-align: center;">No contracts in portfolio.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Risk Register Summary -->
<div class="table-container" style="margin-top: 20px;">
    <div class="table-header">
        <h2>Program Risk Summary</h2>
    </div>
    <div style="padding: 16px;">
        {% set rs = risk_summary | default({}) %}
        <div class="stat-grid" style="margin-bottom: 16px;">
            <div class="stat-card">
                <div class="stat-value">{{ rs.total | default(0) }}</div>
                <div class="stat-label">Total Risks</div>
            </div>
            <div class="stat-card">
                <div class="stat-value {% if rs.open | default(0) > 0 %}text-warning{% endif %}">{{ rs.open | default(0) }}</div>
                <div class="stat-label">Open</div>
            </div>
            <div class="stat-card">
                <div class="stat-value {% if rs.critical | default(0) > 0 %}text-danger{% endif %}">{{ rs.critical | default(0) }}</div>
                <div class="stat-label">Critical (≥16)</div>
            </div>
            <div class="stat-card">
                <div class="stat-value {% if rs.high | default(0) > 0 %}text-warning{% endif %}">{{ rs.high | default(0) }}</div>
                <div class="stat-label">High (11–15)</div>
            </div>
        </div>
        {% if rs.total | default(0) == 0 %}
        <p class="text-muted" style="text-align: center;">No risks registered. Open a contract to add risks.</p>
        {% endif %}
    </div>
</div>

<!-- Upcoming Deliverables -->
<div class="table-container" style="margin-top: 20px;">
    <div class="table-header">
        <h2>Upcoming Deliverables</h2>
    </div>
    <table aria-label="Upcoming contract deliverables">
        <thead>
            <tr>
                <th>CDRL #</th>
                <th>Title</th>
                <th>Contract</th>
                <th>Due Date</th>
                <th>Days Until Due</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for d in upcoming_deliverables %}
            <tr>
                <td>{{ d.cdrl_number | default('—') }}</td>
                <td>{{ d.title | default('—') }}</td>
                <td>{{ d.contract_number | default('—') }}</td>
                <td>{{ d.due_date | default('—') }}</td>
                <td class="{% if d.days_until_due is not none and d.days_until_due <= 7 %}text-danger{% elif d.days_until_due is not none and d.days_until_due <= 14 %}text-warning{% endif %}">
                    {% if d.days_until_due is not none %}
                        {{ d.days_until_due | round(0) | int }}
                    {% else %}
                        —
                    {% endif %}
                </td>
                <td>
                    {% set dstatus = d.status | default('pending') %}
                    {% set dstatus_colors = {'submitted': 'success', 'approved': 'success', 'in_progress': 'info', 'pending': 'warning', 'overdue': 'error', 'rejected': 'error', 'draft': 'info'} %}
                    <span class="badge badge-{{ dstatus_colors.get(dstatus, 'info') }}">{{ dstatus | replace('_', ' ') | title }}</span>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="text-muted" style="text-align: center;">No upcoming deliverables.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- ── Health Dimension Matrix (built from contracts data via JS) ──────── -->
<div class="table-container" style="margin-top:20px;">
    <div class="table-header" style="display:flex; align-items:center; justify-content:space-between;">
        <h2>Health Matrix</h2>
        <span style="font-size:11px; color:var(--text-secondary);">
            <span style="color:#28a745;">&#9646;</span> Green &nbsp;
            <span style="color:#ffc107;">&#9646;</span> Yellow &nbsp;
            <span style="color:#dc3545;">&#9646;</span> Red &nbsp;
            <span style="color:#888;">&#9646;</span> No data
        </span>
    </div>
    <div id="matrix-container">
        <div id="matrix-loading" style="padding:20px; text-align:center; color:var(--text-secondary); font-size:13px;">Loading…</div>
    </div>
</div>

<!-- ── Option Period Countdown (server-side rendered) ────────────────── -->
<div class="table-container" style="margin-top:20px;">
    <div class="table-header"><h2>Option Period Countdown</h2></div>
    {% if option_countdown %}
    <div style="padding:12px; display:flex; flex-wrap:wrap; gap:10px;">
        {% for o in option_countdown %}
        {% set tier = o.risk_tier | default('') %}
        {% set days = o.days_to_deadline %}
        {% set tier_styles = {
            'critical': 'border-color:#dc3545;background:rgba(220,53,69,0.07);',
            'warning':  'border-color:#ffc107;background:rgba(255,193,7,0.07);',
            'watch':    'border-color:#4a90d9;background:rgba(74,144,217,0.07);'
        } %}
        {% set day_colors = {'critical':'#dc3545','warning':'#ffc107','watch':'#4a90d9'} %}
        <div style="display:inline-flex;flex-direction:column;padding:12px 16px;border-radius:8px;
                    border:1px solid var(--border-color,#2a2a4a);min-width:200px;max-width:260px;
                    {{ tier_styles.get(tier,'') }}">
            <div style="font-size:11px;font-weight:700;color:var(--text-secondary);margin-bottom:4px;">
                {{ o.contract_number | default('—') }} — Option {{ o.option_number | default('?') }}
            </div>
            <div style="font-size:24px;font-weight:700;color:{{ day_colors.get(tier,'#888') }};">
                {% if days is not none %}{{ days }}d{% else %}—{% endif %}
            </div>
            <div style="font-size:11px;color:var(--text-secondary);">to exercise deadline</div>
            <div style="font-size:11px;margin-top:4px;">{{ o.exercise_deadline | default('') }}</div>
            {% if o.ceiling_value %}<div style="font-size:11px;color:var(--text-secondary);">${{ '{:,.0f}'.format(o.ceiling_value) }}</div>{% endif %}
            {% if tier %}<div style="margin-top:6px;"><span class="badge {% if tier=='critical' %}badge-error{% elif tier=='warning' %}badge-warning{% else %}badge-info{% endif %}" style="font-size:10px;">{{ tier | upper }}</span></div>{% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div style="padding:16px; text-align:center; color:var(--text-secondary); font-size:13px;">
        No pending option periods tracked. Add them on individual contract pages once the Option Period Tracker is populated.
    </div>
    {% endif %}
</div>

<!-- IQE Query Widget -->
{% set iqe_canvas = "cpmp" %}
{% set iqe_api_route = "/api/cpmp/iqe-query" %}
{% set iqe_title = "Ask the AI — Contract Portfolio" %}
{% set iqe_examples = [
    {"label": "Active contracts", "query": "show all active contracts with health status"},
    {"label": "Low CPI alert", "query": "list contracts where CPI is below 0.9"},
    {"label": "CPARS scores", "query": "show latest CPARS assessment for each contract"}
] %}
{% include "includes/iqe_query_widget.html" %}

<style>
.text-danger { color: var(--status-red, #dc3545) !important; font-weight: bold; }
.text-warning { color: var(--status-yellow, #ffc107) !important; }
</style>

<script>
// ── Health Matrix (built from contracts already on the page) ──────────
function buildHealthMatrix(contracts) {
    var container = document.getElementById('matrix-container');
    if (!contracts || !contracts.length) {
        container.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text-secondary);">No contracts to display.</div>';
        return;
    }

    function _esc(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
    function cpiTier(v) {
        if (v == null) return 'unknown';
        return v >= 0.95 ? 'green' : v >= 0.85 ? 'yellow' : 'red';
    }
    function healthBadge(h) {
        var cls = h === 'green' ? 'badge-success' : h === 'yellow' ? 'badge-warning' : h === 'red' ? 'badge-error' : '';
        return '<span class="badge ' + cls + '" style="font-size:10px;">' + (h || '—') + '</span>';
    }
    function dot(tier) {
        var bg = tier === 'green' ? '#28a745' : tier === 'yellow' ? '#ffc107' : tier === 'red' ? '#dc3545' : '#555';
        return '<span style="display:inline-block;width:18px;height:18px;border-radius:4px;background:' + bg + ';" title="' + tier + '"></span>';
    }

    var rows = contracts.map(function(c) {
        var overall = c.health || 'unknown';
        var evm = (c.cpi != null && c.spi != null)
            ? (Math.min(parseFloat(c.cpi), parseFloat(c.spi)) >= 0.95 ? 'green' : Math.min(parseFloat(c.cpi), parseFloat(c.spi)) >= 0.85 ? 'yellow' : 'red')
            : 'unknown';
        var cpiTierVal = cpiTier(c.cpi != null ? parseFloat(c.cpi) : null);
        var score = c.health_score != null ? Math.round(parseFloat(c.health_score) * (parseFloat(c.health_score) <= 1.0 ? 100 : 1)) : '—';
        return '<tr>' +
            '<td><a href="/cpmp/' + (c.id || c.contract_id) + '" style="font-size:13px;">' + _esc(c.contract_number || '—') + '</a>' +
            (c.agency ? '<br><small style="color:var(--text-secondary);font-size:10px;">' + _esc(c.agency) + '</small>' : '') + '</td>' +
            '<td style="text-align:center;">' + healthBadge(overall) + '</td>' +
            '<td style="text-align:center;" title="EVM: CPI ' + (c.cpi||'?') + ' / SPI ' + (c.spi||'?') + '">' + dot(evm) + '</td>' +
            '<td style="text-align:center;">' + dot(overall) + '</td>' +
            '<td style="text-align:center;">' + dot(c.cpars_rating_current === 'exceptional' || c.cpars_rating_current === 'very_good' ? 'green' : c.cpars_rating_current === 'satisfactory' ? 'yellow' : c.cpars_rating_current ? 'red' : 'unknown') + '</td>' +
            '<td style="text-align:center;">' + dot(overall) + '</td>' +
            '<td style="text-align:center;">' + dot(overall) + '</td>' +
            '<td style="text-align:center;font-weight:700;font-size:13px;">' + score + '</td>' +
            '</tr>';
    });

    container.innerHTML = '<div style="overflow-x:auto;"><table aria-label="Contract health dimension matrix">' +
        '<thead><tr>' +
        '<th style="min-width:140px;">Contract</th>' +
        '<th style="text-align:center;">Overall</th>' +
        '<th style="text-align:center;" title="Cost/Schedule Performance">EVM</th>' +
        '<th style="text-align:center;" title="Deliverable status">Deliverables</th>' +
        '<th style="text-align:center;" title="CPARS rating">CPARS</th>' +
        '<th style="text-align:center;" title="Funding health">Funding</th>' +
        '<th style="text-align:center;" title="Negative events">Neg. Events</th>' +
        '<th style="text-align:center;">Score</th>' +
        '</tr></thead><tbody>' + rows.join('') + '</tbody></table></div>';
}

// ── Aggregate Banner (computed from server-side contract data) ────────
document.addEventListener('DOMContentLoaded', function() {
    var contracts = {{ (contracts | default([])) | tojson | safe }};
    buildHealthMatrix(contracts);
    var cpis = contracts.map(function(c) { return parseFloat(c.cpi); }).filter(function(v) { return !isNaN(v) && isFinite(v); });
    var spis = contracts.map(function(c) { return parseFloat(c.spi); }).filter(function(v) { return !isNaN(v) && isFinite(v); });
    var avgCpi = cpis.length ? (cpis.reduce(function(a,b){return a+b;},0)/cpis.length).toFixed(2) : '—';
    var avgSpi = spis.length ? (spis.reduce(function(a,b){return a+b;},0)/spis.length).toFixed(2) : '—';

    var cpiEl = document.getElementById('agg-cpi');
    if (cpiEl) {
        cpiEl.textContent = avgCpi;
        if (avgCpi !== '—') {
            var v = parseFloat(avgCpi);
            cpiEl.style.color = v < 0.85 ? '#dc3545' : v < 0.95 ? '#ffc107' : '#28a745';
        }
    }
    var spiEl = document.getElementById('agg-spi');
    if (spiEl) {
        spiEl.textContent = avgSpi;
        if (avgSpi !== '—') {
            var sv = parseFloat(avgSpi);
            spiEl.style.color = sv < 0.85 ? '#dc3545' : sv < 0.95 ? '#ffc107' : '#28a745';
        }
    }

    var upcoming = {{ (upcoming_deliverables | default([])) | tojson | safe }};
    var onTime = upcoming.filter(function(d) { return (d.days_until_due == null) || (d.days_until_due >= 0); }).length;
    var ontimeEl = document.getElementById('agg-ontime');
    if (ontimeEl) ontimeEl.textContent = upcoming.length > 0 ? onTime + '/' + upcoming.length : '—';

    var optsEl = document.getElementById('agg-opts');
    if (optsEl) {
        var optCD = {{ (option_countdown | default([])) | tojson | safe }};
        var critCount = optCD.filter(function(o) { return o.risk_tier === 'critical'; }).length;
        optsEl.textContent = critCount;
    }

    document.getElementById('agg-banner').style.display = 'block';
});
</script>
{% endblock %}