{% extends 'base.html.twig' %}

{% block title %}Alarm-Historie - {{ datalogger.name }}{% endblock %}

{% block content %}
<div data-alarm-ack-url-template="{{ path('app_alarm_acknowledge', {id: datalogger.id, alarmId: '__ID__'}) }}" class="hidden" aria-hidden="true"></div>
{% include 'components/datalogger_tabs.html.twig' with {
    'datalogger': datalogger,
    'activeTab': 'app_alarms',
    'activeAlarmsCount': activeAlarmsCount,
    'criticalAlarmsCount': criticalAlarmsCount
} %}

<div class="page-header">
    <div class="page-title">
        <i class="fas fa-bell"></i>
        <h2>Alarm-Historie - {{ datalogger.name }}</h2>
    </div>
</div>

{% if activeAlarms is not empty %}
<div class="status-card status-card--alarm" id="active-alarms-card">
    <div class="card-header">
        <h3><i class="fas fa-exclamation-triangle"></i> Aktive Alarme ({{ activeAlarms|length }})</h3>
    </div>
    <div class="card-body">
        <div class="alarm-list">
            {% for alarm in activeAlarms %}
            {% set alarmLevel = alarm.metadata.level|default(alarm.severity == 'critical' ? 'alarm' : 'warn') %}
            <div class="alarm-item alarm-item--{{ alarm.severity == 'critical' ? 'critical' : 'warning' }}{% if alarm.acknowledged %} alarm-item--acknowledged{% endif %}" data-alarm-id="{{ alarm.id }}">
                <div class="alarm-item-header">
                    <div>
                        <strong class="text-danger">{{ alarm.groupName ?? 'System' }}</strong>
                        <span class="badge badge--{{ alarm.severity == 'critical' ? 'danger' : 'warning' }}">{{ alarmLevel|alarm_level_label }}</span>
                        {% if alarm.acknowledged %}<span class="badge badge--info"><i class="fas fa-check"></i> Quittiert</span>{% endif %}
                    </div>
                    <div class="text-muted alarm-item-date">{{ alarm.createdAt|date('d.m.Y H:i:s') }}</div>
                </div>
                <div class="text-danger alarm-item-message">{{ alarm.message }}</div>
                <div class="alarm-item-meta">
                    <div class="alarm-meta-block"><span class="alarm-meta-label">Typ:</span><strong class="alarm-meta-value">{{ alarm.type|alarm_type_label }}</strong></div>
                    {% if alarm.value is not null %}<div class="alarm-meta-block"><span class="alarm-meta-label">Wert:</span><strong class="alarm-meta-value text-danger">{{ alarm.value|number_format(2) }} {{ alarm.type|alarm_unit }}</strong></div>{% endif %}
                    {% if alarm.threshold is not null and alarm.threshold > 0 %}<div class="alarm-meta-block"><span class="alarm-meta-label">Schwellenwert:</span><strong class="alarm-meta-value">{{ alarm.threshold|number_format(2) }} {{ alarm.type|alarm_unit }}</strong></div>{% endif %}
                    <div class="alarm-meta-block"><span class="alarm-meta-label">Status:</span><span class="alarm-meta-value {{ alarm.notified ? 'text-success' : 'text-muted' }}"><i class="fas fa-{{ alarm.notified ? 'check-circle' : 'clock' }}"></i> {{ alarm.notified ? 'Benachrichtigt' : 'Ausstehend' }}</span></div>
                </div>
                {% if alarm.metadata is not empty %}
                <div class="alarm-metadata-box">
                    {% if alarm.metadata.sensorName is defined %}<strong>Sensor:</strong> {{ alarm.metadata.sensorName }}<br>{% endif %}
                    {% if alarm.metadata.deviationPercent is defined %}<strong>Abweichung:</strong> {{ alarm.metadata.deviationPercent|number_format(1) }}%<br>{% endif %}
                    {% if alarm.metadata.flowRate is defined %}<strong>Geschwindigkeit:</strong> {{ alarm.metadata.flowRate|number_format(2) }} kg/min<br>{% endif %}
                    {% if alarm.metadata.pressureDrop is defined %}<strong>Druckabfall:</strong> {{ alarm.metadata.pressureDrop|number_format(2) }} bar<br>{% endif %}
                    {% if alarm.metadata.batteryLevel is defined %}<strong>Batterie:</strong> {{ alarm.metadata.batteryLevel|number_format(1) }}%<br>{% endif %}
                    {% if alarm.metadata.cpuTemp is defined %}<strong>CPU:</strong> {{ alarm.metadata.cpuTemp|number_format(1) }}°C<br>{% endif %}
                </div>
                {% endif %}
                {% set canAcknowledge = alarm.resolvedAt or alarm.type == 'leakage' %}
                {% if not alarm.acknowledged and canAcknowledge %}
                <div class="alarm-actions"><button type="button" data-alarm-id="{{ alarm.id }}" class="btn btn-primary btn-sm js-ack-btn"><i class="fas fa-check"></i> Quittieren</button></div>
                {% elseif alarm.acknowledged %}
                <div class="font-sm text-muted"><i class="fas fa-check-circle text-info"></i> Quittiert von {{ alarm.acknowledgedBy ?? 'Unbekannt' }} am {{ alarm.acknowledgedAt|date('d.m.Y H:i:s') }}</div>
                {% elseif not alarm.resolvedAt %}
                <div class="font-sm text-muted"><i class="fas fa-info-circle"></i> Alarm muss zuerst aufgelöst werden, bevor er quittiert werden kann (Ausnahme: Leckage)</div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<div class="status-card" id="alarms-history-card">
    <div class="card-header">
        <h3><i class="fas fa-history"></i> Alarm-Historie</h3>
    </div>
    <div class="card-body">
        {% if recentAlarms is empty %}
        <div class="empty-state">
            <i class="fas fa-check-circle empty-state-icon text-success"></i>
            <p>Keine Alarme in der Historie</p>
        </div>
        {% else %}
        <div class="overflow-x-auto">
            <table class="table-modern">
                <thead>
                    <tr>
                        <th>Zeitpunkt</th>
                        <th>Gruppe</th>
                        <th>Typ</th>
                        <th>Level</th>
                        <th>Wert</th>
                        <th>Schwellenwert</th>
                        <th>Status</th>
                        <th>Aktion</th>
                    </tr>
                </thead>
                <tbody>
                    {% for alarm in recentAlarms %}
                    {% set alarmLevel = alarm.metadata.level|default(alarm.severity == 'critical' ? 'alarm' : 'warn') %}
                    <tr class="{{ alarm.resolvedAt is null ? 'row--unresolved' : '' }}" data-alarm-id="{{ alarm.id }}">
                        <td>
                            {{ alarm.createdAt|date('d.m.Y H:i:s') }}
                            {% if alarm.resolvedAt %}<br><span class="text-success font-sm"><i class="fas fa-check"></i> Aufgelöst: {{ alarm.resolvedAt|date('d.m.Y H:i:s') }}</span>{% endif %}
                        </td>
                        <td><strong>{{ alarm.groupName ?? 'System' }}</strong></td>
                        <td>{{ alarm.type|alarm_type_label }}</td>
                        <td><span class="badge badge--{{ alarm.severity == 'critical' ? 'danger' : 'warning' }}">{{ alarmLevel|alarm_level_label }}</span></td>
                        <td>{% if alarm.value is not null %}<strong class="{{ alarm.resolvedAt is null ? 'text-danger' : '' }}">{{ alarm.value|number_format(2) }} {{ alarm.type|alarm_unit }}</strong>{% else %}<span class="text-muted">-</span>{% endif %}</td>
                        <td>{% if alarm.threshold is not null and alarm.threshold > 0 %}{{ alarm.threshold|number_format(2) }} {{ alarm.type|alarm_unit }}{% else %}<span class="text-muted">-</span>{% endif %}</td>
                        <td>
                            {% if alarm.resolvedAt %}
                                <span class="text-success"><i class="fas fa-check-circle"></i> Aufgelöst</span>
                            {% elseif alarm.acknowledged %}
                                <span class="text-info"><i class="fas fa-check-circle"></i> Quittiert</span>
                            {% else %}
                                <span class="text-danger"><i class="fas fa-exclamation-triangle"></i> Aktiv</span>
                            {% endif %}
                            {% if alarm.acknowledged %}<br><span class="text-info font-sm"><i class="fas fa-check"></i> Quittiert</span>{% endif %}
                            {% if alarm.notified %}<br><span class="text-success font-sm"><i class="fas fa-envelope"></i> Benachrichtigt</span>{% endif %}
                        </td>
                        <td>
                            {% set canAcknowledge = alarm.resolvedAt or alarm.type == 'leakage' %}
                            {% if not alarm.acknowledged and canAcknowledge %}<button type="button" data-alarm-id="{{ alarm.id }}" class="btn btn-sm btn-primary js-ack-btn"><i class="fas fa-check"></i> Quittieren</button>
                            {% elseif alarm.acknowledged %}<span class="text-info font-sm"><i class="fas fa-check-circle"></i> Quittiert</span>
                            {% elseif not alarm.resolvedAt %}<span class="text-muted font-sm"><i class="fas fa-info-circle"></i> Noch aktiv</span>
                            {% else %}<span class="text-muted">-</span>{% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/alarms.js') }}?v={{ 'now'|date('YmdHis') }}"></script>
{% endblock %}