{% extends "base.html" %}
{% block title %}Monitoring - ICDEV™ Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Monitoring Overview</h1>
    <p class="subtitle">System health, alerts, and self-healing activity</p>
</div>

<!-- Health Banner -->
<div id="health-status" class="health-banner {{ health_status }}" role="alert">
    <span class="status-dot {% if health_status == 'healthy' %}green{% elif health_status == 'degraded' %}yellow{% else %}red{% endif %}" role="img" aria-label="{{ health_status }}"></span>
    {% if health_status == 'healthy' %}&#x2713;{% elif health_status == 'degraded' %}&#x26A0;{% else %}&#x2717;{% endif %}
    System Status: {{ health_status | upper }}
    {% if health_status == 'healthy' %} &mdash; All systems operational
    {% elif health_status == 'degraded' %} &mdash; Some issues detected, review alerts below
    {% else %} &mdash; Critical issues require immediate attention
    {% endif %}
</div>

<!-- Summary Stats -->
<div class="stat-grid mb-3">
    <div class="stat-card">
        <div class="stat-value {% if firing_count > 0 %}text-red{% else %}text-green{% endif %}">{{ firing_count }}</div>
        <div class="stat-label">Firing Alerts</div>
    </div>
    <div class="stat-card">
        <div class="stat-value text-green">{{ resolved_count }}</div>
        <div class="stat-label">Resolved Alerts</div>
    </div>
    <div class="stat-card">
        <div class="stat-value {% if unresolved_failures > 0 %}text-yellow{% else %}text-green{% endif %}">{{ unresolved_failures }}</div>
        <div class="stat-label">Unresolved Failures</div>
    </div>
    <div class="stat-card">
        <div class="stat-value text-blue">{{ healing_events|length }}</div>
        <div class="stat-label">Self-Healing Events</div>
    </div>
</div>

<!-- WATCHCON Tier Summary -->
{% if watchcon_summary and watchcon_summary.tiers %}
<div class="stat-grid mb-3">
    <div class="stat-card">
        <div class="stat-value text-blue">{{ watchcon_summary.tiers['4']['count'] }}</div>
        <div class="stat-label">WATCHCON 4 (Routine)</div>
    </div>
    <div class="stat-card">
        <div class="stat-value text-yellow">{{ watchcon_summary.tiers['3']['count'] }}</div>
        <div class="stat-label">WATCHCON 3 (Elevated)</div>
    </div>
    <div class="stat-card">
        <div class="stat-value text-red">{{ watchcon_summary.tiers['2']['count'] }}</div>
        <div class="stat-label">WATCHCON 2 (High)</div>
    </div>
</div>
{% endif %}

<!-- Self-Healing Decision Flow -->
<h3 class="section-header">Self-Healing Decision Logic</h3>
<div class="mermaid-container" role="img" aria-label="Self-healing confidence-based decision flow">
<pre class="mermaid">
flowchart TD
    F[Failure Detected] --> A{Confidence<br/>Level?}
    A -->|">= 0.7"| AUTO[Auto-Remediate]
    A -->|"0.3 - 0.7"| SUGGEST[Suggest Fix<br/>Await Approval]
    A -->|"< 0.3"| ESC[Escalate with<br/>Full Context]
    AUTO --> CHECK{"Heals/hr<br/>< 5?"}
    CHECK -->|Yes| HEAL[Execute<br/>Remediation]
    CHECK -->|No| COOL[Cooldown<br/>10 min]
    HEAL --> LOG[Log to<br/>Audit Trail]
    SUGGEST --> LOG
    ESC --> LOG
    style AUTO fill:#1a3a2d,stroke:#28a745,color:#e0e0e0
    style ESC fill:#3a1a1a,stroke:#dc3545,color:#e0e0e0
    style SUGGEST fill:#3a3a1a,stroke:#ffc107,color:#e0e0e0
</pre>
</div>

<!-- Alert Distribution Charts -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px;">
    <div class="card" style="padding: 20px;">
        <div class="card-label">Alert Severity Distribution</div>
        <div id="chart-mon-severity" style="min-height: 180px;"></div>
    </div>
    <div class="card" style="padding: 20px;">
        <div class="card-label">Alert Status</div>
        <div id="chart-mon-status" style="min-height: 180px;"></div>
    </div>
</div>

<!-- Firing Alerts (highest priority, shown first) -->
<div class="table-container" id="firing-alerts">
    <div class="table-header">
        <h2>Firing Alerts ({{ firing_count }})</h2>
    </div>
    {% if firing_alerts %}
    <table>
        <thead>
            <tr>
                <th>WATCHCON</th>
                <th>Severity</th>
                <th>Title</th>
                {# The cause, the budget and the PR were only ever in the alert's
                   `description`, which this table never rendered. They are the
                   facts that decide which remediation can work, so on 2026-08-10
                   they were read out of the database while 12 alerts were
                   cleared by hand. #}
                <th>Cause</th>
                <th>Budget</th>
                <th>PR</th>
                <th>Seen</th>
                <th>Source</th>
                <th>Created</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for alert in firing_alerts %}
            <tr {% if alert.is_stale %}class="alert-stale"{% endif %}>
                <td><span class="badge badge-info">W{{ alert.watchcon_tier or 4 }}</span></td>
                <td><span class="badge badge-{{ alert.severity }}">{{ alert.severity }}</span></td>
                <td>
                    {{ alert.title }}
                    {% if alert.is_stale %}
                    {# The sweep in pr_watcher clears these; this is the window
                       between the task finishing and the next poll — and the
                       backstop for any case the sweep does not reach. #}
                    <span class="badge badge-muted" title="The task is {{ alert.task_status or 'gone' }} — this alert describes work that is over">stale</span>
                    {% endif %}
                </td>
                <td>
                    {% if alert.hitl %}
                    <span class="badge badge-{{ 'high' if alert.hitl.cause == 'merge_conflict' else 'medium' }}">{{ alert.hitl.cause_label }}</span>
                    {% else %}
                    <span class="text-muted">&mdash;</span>
                    {% endif %}
                </td>
                <td class="text-muted">{{ alert.hitl.cycle_display if alert.hitl and alert.hitl.cycle_display else '—' }}</td>
                <td>
                    {% if alert.hitl and alert.hitl.pr_url %}
                    <a href="{{ alert.hitl.pr_url }}" target="_blank" rel="noopener">#{{ alert.hitl.pr_number or 'PR' }}</a>
                    {% else %}
                    <span class="text-muted">&mdash;</span>
                    {% endif %}
                </td>
                <td class="text-muted">
                    {# Re-fire churn. The #1513 flap wrote 27 rows for one task in
                       a day and this page could not show it. #}
                    {% if alert.refire_count and alert.refire_count > 1 %}
                    <span title="First seen {{ alert.first_seen }}">re-fired {{ alert.refire_count }}&times;</span>
                    {% else %}
                    once
                    {% endif %}
                </td>
                <td>{{ alert.source }}</td>
                <td class="text-muted">{{ alert.created_at }}</td>
                <td>
                    {# Only a pr_watcher HITL alert names a task these verbs can
                       act on. Every other alert source gets no buttons rather
                       than buttons that would fail — an control that does
                       nothing teaches people to distrust the ones that work.
                       Same reasoning, applied to the CAUSE: rebase_and_push
                       refuses a real conflict, so offering Rebase there is a
                       control that cannot work either. #}
                    {% if alert.source and alert.source.startswith('pr_watcher:hitl:') %}
                    <div class="hitl-actions" data-alert-id="{{ alert.id }}">
                      {% if alert.rebase_refusal %}
                      <button class="btn btn-sm" data-act="rebase" disabled
                              title="{{ alert.rebase_refusal }}">Rebase</button>
                      {% else %}
                      <button class="btn btn-sm" data-act="rebase"
                              title="Rebase onto main and let CI re-run — keeps this PR">Rebase</button>
                      {% endif %}
                      <button class="btn btn-sm" data-act="requeue"
                              title="Clean rebuild from current main — abandons the stuck attempt">Requeue</button>
                      <button class="btn btn-sm btn-muted" data-act="dismiss"
                              title="Clear without acting">Dismiss</button>
                      <span class="hitl-result text-muted">{% if alert.rebase_refusal %}{{ alert.rebase_refusal }}{% endif %}</span>
                    </div>
                    {% else %}
                    <span class="text-muted">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-row" style="padding:1rem;">No alerts currently firing &mdash; all systems operational.</div>
    {% endif %}
</div>

<!-- Recent Alerts Table (all statuses, history view) -->
<div class="table-container" id="recent-alerts" style="margin-top:1.5rem;">
    <div class="table-header">
        <h2>Recent Alerts (all statuses)</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th>WATCHCON</th>
                <th>Severity</th>
                <th>Title</th>
                <th>Source</th>
                <th>Project</th>
                <th>Status</th>
                <th>Auto-Healed</th>
                <th>Created</th>
            </tr>
        </thead>
        <tbody>
            {% for alert in alerts %}
            <tr>
                <td><span class="badge badge-info">W{{ alert.watchcon_tier or 4 }}</span></td>
                <td><span class="badge badge-{{ alert.severity }}">{{ alert.severity }}</span></td>
                <td>{{ alert.title }}</td>
                <td>{{ alert.source }}</td>
                <td>
                    {% if alert.project_id %}
                    <a href="/projects/{{ alert.project_id }}">{{ alert.project_id[:12] }}</a>
                    {% else %}
                    <span class="text-muted">&mdash;</span>
                    {% endif %}
                </td>
                <td><span class="badge badge-{{ alert.status }}">{{ alert.status }}</span></td>
                <td>
                    {% if alert.auto_healed %}
                    <span class="text-green">Yes</span>
                    {% else %}
                    <span class="text-muted">No</span>
                    {% endif %}
                </td>
                <td class="text-muted">{{ alert.created_at }}</td>
            </tr>
            {% else %}
            <tr class="empty-row"><td colspan="7">No recent alerts</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Runtime Performance (runtime_invocations rollup — loads async) -->
{% include "monitoring/_runtime_performance.html" %}

<!-- Self-Healing Events Table -->
<div class="table-container mt-2">
    <div class="table-header">
        <h2>Self-Healing Events</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th>Trigger Source</th>
                <th>Pattern</th>
                <th>Action Taken</th>
                <th>Outcome</th>
                <th>Duration (s)</th>
                <th>Escalated To</th>
                <th>Created</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for event in healing_events %}
            <tr>
                <td>{{ event.trigger_source }}</td>
                <td>{{ event.pattern_description or '—' }}</td>
                <td>{{ event.action_taken or '—' }}</td>
                <td>
                    {% if event.outcome %}
                    <span class="badge badge-{% if event.outcome == 'success' %}success{% elif event.outcome == 'failed' %}error{% else %}info{% endif %}">{{ event.outcome }}</span>
                    {% else %}
                    <span class="text-muted">—</span>
                    {% endif %}
                </td>
                <td>{{ event.duration_seconds or '—' }}</td>
                <td>{{ event.escalated_to or '—' }}</td>
                <td class="text-muted">{{ event.created_at }}</td>
                <td><button class="btn btn-sm btn-explain" onclick="showExplain({{ event.id }})">Explain</button></td>
            </tr>
            {% else %}
            <tr class="empty-row"><td colspan="8">No self-healing events recorded</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script>
// charts.js loads with defer — must wait for DOMContentLoaded before ICDEV.donutChart exists.
document.addEventListener('DOMContentLoaded', function() {
    if (!window.ICDEV || !ICDEV.donutChart) return;
    var alerts = {{ alerts | tojson }};
    if (alerts.length > 0) {
        var sevCounts = {};
        var sevColors = { critical: '#dc3545', high: '#e8590c', medium: '#ffc107', low: '#28a745', info: '#4a90d9' };
        alerts.forEach(function(a) { var s = a.severity || 'info'; sevCounts[s] = (sevCounts[s] || 0) + 1; });
        ICDEV.donutChart('chart-mon-severity', {
            segments: Object.keys(sevCounts).map(function(s) {
                return { label: s, value: sevCounts[s], color: sevColors[s] || '#6c6c80' };
            }),
            size: 150, thickness: 24, centerLabel: String(alerts.length), centerSubLabel: 'Total', showLegend: true,
        });
        var statCounts = {};
        var statColors = { firing: '#dc3545', resolved: '#28a745', acknowledged: '#ffc107' };
        alerts.forEach(function(a) { var s = a.status || 'unknown'; statCounts[s] = (statCounts[s] || 0) + 1; });
        ICDEV.donutChart('chart-mon-status', {
            segments: Object.keys(statCounts).map(function(s) {
                return { label: s, value: statCounts[s], color: statColors[s] || '#6c6c80' };
            }),
            size: 150, thickness: 24, centerLabel: String({{ firing_count }}), centerSubLabel: 'Firing', showLegend: true,
        });
    } else {
        document.getElementById('chart-mon-severity').innerHTML = '<p class="text-muted" style="text-align:center;padding:50px 0;">No alert data</p>';
        document.getElementById('chart-mon-status').innerHTML = '<p class="text-muted" style="text-align:center;padding:50px 0;">No alert data</p>';
    }
});
</script>

{# The HITL handler MUST stay inside `block scripts`. It sat after the closing
   endblock tag, and Jinja silently discards anything outside a block in a
   template that extends a base — so the 14 Rebase/Requeue/Dismiss buttons
   rendered with no listener attached and clicking them did nothing at all,
   not even the 'working…' text. Nothing errors; the code is simply absent. #}
<script>
// HITL alert actions. base.html already patches fetch() to carry the CSRF
// header, so there is nothing to add here.
//
// One listener on the table rather than one per button: the row set is
// server-rendered and can change on reload, and per-button handlers would be
// re-bound (or silently lost) each time.
(function () {
  var table = document.getElementById('firing-alerts');
  if (!table) return;
  table.addEventListener('click', function (ev) {
    var btn = ev.target.closest('button[data-act]');
    if (!btn) return;
    var box = btn.closest('.hitl-actions');
    var out = box.querySelector('.hitl-result');
    var act = btn.getAttribute('data-act');
    // Disable the whole group, not just the clicked button: rebase-then-requeue
    // on the same alert is two remediations racing on one branch.
    box.querySelectorAll('button').forEach(function (b) { b.disabled = true; });
    out.textContent = ' working…';
    fetch('/api/kanban/alerts/' + encodeURIComponent(box.dataset.alertId) + '/action', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: act })
    }).then(function (r) {
      return r.json().then(function (j) { return { ok: r.ok, body: j }; });
    }).then(function (res) {
      if (res.ok && res.body.ok) {
        out.textContent = ' ' + act + ' ok — reloading';
        setTimeout(function () { location.reload(); }, 900);
      } else {
        // Say WHY, and re-enable: a failed remediation is often retryable once
        // the cause is read.
        var why = (res.body && (res.body.error ||
                   (res.body.detail && res.body.detail.reason))) || 'failed';
        out.textContent = ' ' + why;
        box.querySelectorAll('button').forEach(function (b) { b.disabled = false; });
      }
    }).catch(function (e) {
      out.textContent = ' ' + e;
      box.querySelectorAll('button').forEach(function (b) { b.disabled = false; });
    });
  });
})();
</script>
{% endblock %}