{% 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>

<!-- 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>Severity</th>
                <th>Title</th>
                <th>Source</th>
                <th>Project</th>
                <th>Auto-Healed</th>
                <th>Created</th>
            </tr>
        </thead>
        <tbody>
            {% for alert in firing_alerts %}
            <tr>
                <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>
                    {% 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>
            {% 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>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-{{ 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>

<!-- 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>
            </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>
            </tr>
            {% else %}
            <tr class="empty-row"><td colspan="7">No self-healing events recorded</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script>
(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>
{% endblock %}