{% extends "base.html" %}
{% set active = "strategos" %}
{% block title %}Commander's Dashboard — Strategos{% endblock %}

{% block extra_css %}
<style>
.cmd-section-title { font-size:.68rem;font-weight:700;text-transform:uppercase;
                     letter-spacing:.1em;color:var(--text-muted);margin-bottom:.5rem }
.cmd-stat { font-size:2rem;font-weight:700;line-height:1 }
.cmd-stat-label { font-size:.78rem;color:var(--text-secondary);margin-top:.25rem }
.ccir-alert { border-left:3px solid #e94560;background:rgba(233,69,96,.06);
              border-radius:0 4px 4px 0;padding:.5rem .9rem;margin-bottom:.5rem }
.trend-favourable { color:#10b981 }
.trend-adverse    { color:#e94560 }
.trend-neutral    { color:#f59e0b }
.trend-unknown    { color:var(--text-muted) }
.endurance-bar { height:8px;border-radius:4px;background:var(--bg-secondary);
                 overflow:hidden;margin-top:.4rem }
.endurance-bar-fill { height:100%;border-radius:4px;transition:width .4s }
.pulse-dot { width:8px;height:8px;border-radius:50%;display:inline-block;
             animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.cls-banner { background:#0a1628;border:1px solid #1e3a5f;border-left:4px solid #3b82f6;
              border-radius:6px;padding:.4rem .9rem;font-size:.75rem;font-weight:700;
              letter-spacing:.06em;color:#60a5fa;margin-bottom:1rem }
</style>
{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Commander's Dashboard
        <span style="font-size:0.65em;color:var(--text-secondary);font-weight:400;">J2 Battle Picture</span>
    </h1>
    <div style="display:flex;align-items:center;gap:1rem">
        <span id="last-updated" style="font-size:.78rem;color:var(--text-muted)">Loading…</span>
        <button class="btn" onclick="loadPicture()" style="font-size:.78rem;padding:.3rem .8rem">Refresh</button>
        <a href="/strategos" style="font-size:.85rem;color:var(--text-secondary)">&larr; Back to Strategos</a>
    </div>
</div>

<div class="cls-banner">CUI // SP-CTI &nbsp;&#183;&nbsp; This dashboard is a live J2 intelligence product</div>

<!-- Row 1: Key metrics -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem">
    <div class="card" style="text-align:center">
        <div id="stat-ccir" class="cmd-stat" style="color:#e94560">—</div>
        <div class="cmd-stat-label">Active CCIRs</div>
    </div>
    <div class="card" style="text-align:center">
        <div id="stat-triggered" class="cmd-stat" style="color:#f59e0b">—</div>
        <div class="cmd-stat-label">Triggered (24h)</div>
    </div>
    <div class="card" style="text-align:center">
        <div id="stat-pir" class="cmd-stat" style="color:#3b82f6">—</div>
        <div class="cmd-stat-label">Active PIRs</div>
    </div>
    <div class="card" style="text-align:center">
        <div id="stat-signals" class="cmd-stat" style="color:#10b981">—</div>
        <div class="cmd-stat-label">Signal Activity (24h)</div>
    </div>
</div>

<!-- Row 2: CCIR alerts + INTSUM + endurance -->
<div style="display:grid;grid-template-columns:1fr 1fr 280px;gap:1rem;margin-bottom:1rem">

    <!-- CCIR Trigger Alerts -->
    <div class="card">
        <div class="cmd-section-title">
            <span class="pulse-dot" id="alert-dot" style="background:#e94560;margin-right:.4rem"></span>
            CCIR Trigger Alerts
        </div>
        <div id="ccir-alerts">
            <div style="color:var(--text-muted);font-size:.85rem">Loading…</div>
        </div>
        <div style="margin-top:.75rem;display:flex;gap:.5rem">
            <button class="btn" onclick="evaluateCCIRs()" style="font-size:.75rem;padding:.3rem .75rem">
                Run Evaluation
            </button>
            <a href="/strategos/pir" class="btn" style="font-size:.75rem;padding:.3rem .75rem;text-decoration:none">
                Manage CCIRs
            </a>
        </div>
        <div id="eval-status" style="font-size:.75rem;color:var(--text-muted);margin-top:.4rem"></div>
    </div>

    <!-- Latest INTSUM summary -->
    <div class="card">
        <div class="cmd-section-title">Latest INTSUM</div>
        <div id="intsum-panel">
            <div style="color:var(--text-muted);font-size:.85rem">Loading…</div>
        </div>
        <div style="margin-top:.75rem">
            <a href="/strategos/intsum" class="btn" style="font-size:.75rem;padding:.3rem .75rem;text-decoration:none">
                Full INTSUM →
            </a>
        </div>
    </div>

    <!-- War Endurance -->
    <div class="card">
        <div class="cmd-section-title">War Endurance</div>
        <div id="endurance-panel">
            <div style="color:var(--text-muted);font-size:.85rem">Loading…</div>
        </div>
        <div style="margin-top:.75rem">
            <a href="/strategos/war-council" class="btn" style="font-size:.75rem;padding:.3rem .75rem;text-decoration:none">
                War Council →
            </a>
        </div>
    </div>

</div>

<!-- Row 3: Signal activity + ORBAT summary -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">

    <!-- Signal Activity -->
    <div class="card">
        <div class="cmd-section-title">Signal Activity (24h)</div>
        <div id="signal-activity">
            <div style="color:var(--text-muted);font-size:.85rem">Loading…</div>
        </div>
    </div>

    <!-- ORBAT Summary -->
    <div class="card">
        <div class="cmd-section-title">ORBAT — Force Summary</div>
        <div id="orbat-summary">
            <div style="color:var(--text-muted);font-size:.85rem">Loading…</div>
        </div>
        <div style="margin-top:.75rem">
            <a href="/strategos/orbat" class="btn" style="font-size:.75rem;padding:.3rem .75rem;text-decoration:none">
                Full ORBAT →
            </a>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
let _picture = null;

async function loadPicture() {
    try {
        const res = await fetch('/api/strategos/commander/picture');
        if (!res.ok) return;
        _picture = await res.json();
        renderPicture(_picture);
        document.getElementById('last-updated').textContent =
            'Updated: ' + new Date().toLocaleTimeString();
    } catch (e) {
        console.error('[Commander] load failed:', e);
    }
}

async function loadEndurance() {
    try {
        const res = await fetch('/api/strategos/endurance');
        if (!res.ok) return;
        const data = await res.json();
        renderEndurance(data);
    } catch (e) {}
}

async function evaluateCCIRs() {
    const st = document.getElementById('eval-status');
    st.textContent = 'Evaluating…';
    try {
        const res = await fetch('/api/strategos/ccir/evaluate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({lookback_hours: 12}),
        });
        const data = await res.json();
        st.textContent = `Evaluated ${data.evaluated || 0} CCIRs against ${data.signal_count || 0} signals. ` +
                         `${(data.triggered || []).length} triggered.`;
        loadPicture();
    } catch (e) {
        st.textContent = 'Evaluation failed: ' + e;
    }
}

function renderPicture(pic) {
    const cs = pic.ccir_summary || {};
    document.getElementById('stat-ccir').textContent      = cs.active_ccirs ?? '—';
    document.getElementById('stat-triggered').textContent = (pic.triggered_ccirs || []).length;
    document.getElementById('stat-pir').textContent       = cs.active_pirs ?? '—';

    // Signal total
    const activity = pic.signal_activity || {};
    const total = Object.values(activity).reduce((a, b) => a + b, 0);
    document.getElementById('stat-signals').textContent = total || '0';

    // CCIR alerts
    const alerts = pic.triggered_ccirs || [];
    const alertDot = document.getElementById('alert-dot');
    alertDot.style.background = alerts.length > 0 ? '#e94560' : '#10b981';
    if (alerts.length === 0) {
        document.getElementById('ccir-alerts').innerHTML =
            '<div style="color:var(--text-muted);font-size:.85rem">No unresolved trigger events.</div>';
    } else {
        document.getElementById('ccir-alerts').innerHTML = alerts.map(a => `
            <div class="ccir-alert">
                <div style="font-size:.82rem;font-weight:600;color:var(--text-primary)">
                    ${a.topic || 'CCIR'}
                </div>
                <div style="font-size:.75rem;color:var(--text-muted);margin-top:.15rem">
                    Source: ${a.signal_source || '—'} &nbsp;|&nbsp;
                    Score: ${((a.match_score || 0) * 100).toFixed(0)}% &nbsp;|&nbsp;
                    ${(a.created_at || '').slice(0, 16)}
                </div>
                <button onclick="resolveAlert('${a.id}')"
                        style="margin-top:.35rem;font-size:.72rem;padding:.2rem .5rem;border-radius:3px;
                               border:1px solid rgba(233,69,96,.3);background:transparent;
                               color:#e94560;cursor:pointer">
                    Acknowledge
                </button>
            </div>
        `).join('');
    }

    // INTSUM panel
    const intsum = pic.latest_intsum;
    if (intsum) {
        document.getElementById('intsum-panel').innerHTML = `
            <div style="font-size:.82rem;font-weight:500;color:var(--text-primary);margin-bottom:.4rem">
                ${(intsum.theater || 'global').replace(/_/g,' ').toUpperCase()}
                &nbsp;<span style="font-size:.72rem;font-weight:400;color:var(--text-muted)">
                    ${(intsum.created_at || '').slice(0,16)}
                </span>
            </div>
            <div style="font-size:.8rem;color:var(--text-secondary);line-height:1.55">
                ${intsum.assessment_snippet || '<em>No assessment paragraph available.</em>'}
            </div>
        `;
    } else {
        document.getElementById('intsum-panel').innerHTML =
            '<div style="color:var(--text-muted);font-size:.85rem">No INTSUM generated yet.</div>';
    }

    // Signal activity
    const sigHtml = Object.entries(activity).map(([src, cnt]) => `
        <div style="display:flex;justify-content:space-between;align-items:center;
                    padding:.35rem 0;border-bottom:1px solid var(--border-color);font-size:.85rem">
            <span style="color:var(--text-secondary)">${src}</span>
            <span style="font-weight:600;color:var(--text-primary)">${cnt}</span>
        </div>
    `).join('');
    document.getElementById('signal-activity').innerHTML =
        sigHtml || '<div style="color:var(--text-muted);font-size:.85rem">No data.</div>';

    // ORBAT
    const orbat = pic.orbat_summary || {};
    const orbatHtml = Object.entries(orbat).map(([side, cnt]) => `
        <div style="display:flex;justify-content:space-between;align-items:center;
                    padding:.35rem 0;border-bottom:1px solid var(--border-color);font-size:.85rem">
            <span style="color:var(--text-secondary);text-transform:capitalize">${side}</span>
            <span style="font-weight:600;color:var(--text-primary)">${cnt} units</span>
        </div>
    `).join('');
    document.getElementById('orbat-summary').innerHTML =
        orbatHtml || '<div style="color:var(--text-muted);font-size:.85rem">No ORBAT data.</div>';
}

function renderEndurance(data) {
    const trend = data.trend || 'unknown';
    const trendClass = `trend-${trend}`;
    const forceRatio = data.force_ratio != null ? data.force_ratio.toFixed(2) : '—';
    const attrition  = data.attrition_rate_pct != null ? data.attrition_rate_pct.toFixed(1) + '%' : '—';
    const supplyDays = data.supply_days != null ? data.supply_days + ' days' : '—';
    const fillW = data.force_ratio != null ? Math.min(100, (data.force_ratio / 3) * 100) : 0;
    const fillColor = trend === 'favourable' ? '#10b981' : trend === 'adverse' ? '#e94560' : '#f59e0b';

    document.getElementById('endurance-panel').innerHTML = `
        <div style="margin-bottom:.6rem">
            <div style="font-size:.72rem;color:var(--text-muted);margin-bottom:.2rem">Force Ratio (Blue:Red)</div>
            <div style="font-size:1.4rem;font-weight:700;color:var(--text-primary)">${forceRatio}</div>
            <div class="endurance-bar">
                <div class="endurance-bar-fill" style="width:${fillW}%;background:${fillColor}"></div>
            </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;font-size:.82rem">
            <div>
                <div style="color:var(--text-muted);font-size:.7rem;margin-bottom:.1rem">Attrition Rate</div>
                <div style="font-weight:600;color:var(--text-primary)">${attrition}</div>
            </div>
            <div>
                <div style="color:var(--text-muted);font-size:.7rem;margin-bottom:.1rem">Supply Est.</div>
                <div style="font-weight:600;color:var(--text-primary)">${supplyDays}</div>
            </div>
        </div>
        <div style="margin-top:.6rem;font-size:.78rem">
            Trend: <span class="${trendClass}" style="font-weight:600;text-transform:capitalize">${trend}</span>
        </div>
    `;
}

async function resolveAlert(eventId) {
    try {
        await fetch('/api/strategos/ccir/triggers/' + eventId + '/resolve', {method: 'POST'});
        loadPicture();
    } catch (e) {}
}

// Auto-refresh every 60s
loadPicture();
loadEndurance();
setInterval(() => { loadPicture(); loadEndurance(); }, 60000);
</script>
{% endblock %}