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

{% block title %}Alarm-Konfiguration - Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Home</a>
        <i class="fas fa-chevron-right"></i>
        <span>Alarm-Konfiguration</span>
    </div>
    <div class="page-title">
        <i class="fas fa-cog"></i>
        <h2>Alarm-Konfiguration</h2>
    </div>
</div>

<div class="info-box info-box--blue mb-15">
    <p><i class="fas fa-info-circle"></i> <strong>Hinweis:</strong> Konfigurieren Sie Alarme Schritt für Schritt: Wählen Sie zuerst einen Datalogger, dann die Alarmtypen und schließlich die betroffenen Sektionen.</p>
</div>

<div class="status-card mb-15">
    <div class="stepper-bar">
        <div class="stepper-step active" data-step="1"><div class="stepper-num">1</div><div class="stepper-label">Datalogger</div></div>
        <div class="stepper-connector"></div>
        <div class="stepper-step" data-step="2"><div class="stepper-num">2</div><div class="stepper-label">Alarmtypen</div></div>
        <div class="stepper-connector"></div>
        <div class="stepper-step" data-step="3"><div class="stepper-num">3</div><div class="stepper-label">Sektionen</div></div>
    </div>
</div>

<form method="post" id="alarm-config-form">
    <div id="step-1" class="config-step is-active">
        <div class="status-card">
            <div class="card-header">
                <h3><i class="fas fa-server card-icon-blue"></i> Schritt 1: Datalogger auswählen</h3>
            </div>
            <div class="card-body">
                <p class="help-text">Wählen Sie den Datalogger aus, für den Sie Alarme konfigurieren möchten.</p>
                <div class="grid-cards">
                    {% for datalogger in allDataloggers %}
                    <label class="datalogger-card" data-datalogger-id="{{ datalogger.id }}">
                        <input type="radio" name="selected_datalogger" value="{{ datalogger.id }}" class="datalogger-radio hidden">
                        <div class="flex align-center gap-half">
                            <div class="datalogger-card-icon"><i class="fas fa-server"></i></div>
                            <div class="flex-1">
                                <div class="datalogger-card-title">{{ datalogger.name }}</div>
                                {% if datalogger.location %}
                                <div class="datalogger-card-sub"><i class="fas fa-map-marker-alt"></i> {{ datalogger.location }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
                <div class="step-actions">
                    <button type="button" class="btn btn-primary" data-goto-step="2" id="step1-next" disabled>
                        Weiter <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="step-2" class="config-step">
        <div class="status-card">
            <div class="card-header">
                <h3><i class="fas fa-bell card-icon-danger"></i> Schritt 2: Alarmtypen auswählen</h3>
            </div>
            <div class="card-body">
                <p class="help-text">Wählen Sie die Alarmtypen aus, die Sie für den ausgewählten Datalogger aktivieren möchten.</p>
                <div id="selected-datalogger-info" class="selected-datalogger-info">
                    <strong>Datalogger:</strong> <span id="selected-datalogger-name">-</span>
                    <input type="hidden" name="selected_datalogger" id="selected-datalogger-id" value="">
                </div>
                <div class="grid-cards-wide">
                    {% for alarmType, info in alarmTypes %}
                    {% set config = configs[alarmType] ?? null %}
                    {# Hinweis: config ist hier global, wird beim Speichern datalogger-spezifisch #}
                    <div class="alarm-type-card" data-alarm-type="{{ alarmType }}">
                        <div class="alarm-type-card-header">
                            <div class="flex-1">
                                <h4 class="datalogger-card-title alarm-type-title-row">
                                    <i class="fas fa-{{ alarmType == 'sensor_deviation' ? 'chart-line' : (alarmType == 'sensor_failure' ? 'exclamation-triangle' : (alarmType == 'flow_rate' ? 'tachometer-alt' : (alarmType == 'leakage' ? 'droplet' : (alarmType == 'cpu_temperature' ? 'microchip' : 'battery-half')))) }} {% if alarmType == 'sensor_failure' or alarmType == 'leakage' %}card-icon-danger{% else %}overview-item-icon--warning{% endif %}"></i>
                                    {{ info.label }}
                                </h4>
                                <p class="datalogger-card-sub">{{ info.description }}</p>
                            </div>
                            <label class="checkbox-label">
                                <input type="checkbox" name="enabled_{{ alarmType }}" value="1" class="alarm-type-checkbox" data-alarm-type="{{ alarmType }}" {{ config and config.enabled ? 'checked' : (not config ? 'checked' : '') }}>
                                <span class="font-weight-500">Aktiv</span>
                            </label>
                        </div>
                        <div class="alarm-settings-{{ alarmType }} alarm-settings-panel hidden">
                            <div class="alarm-settings-grid {% if info.hasSecondary %}cols-3{% else %}cols-2{% endif %}">
                                <div>
                                    <label class="settings-label">Schwellenwert {% if info.hasSecondary %}(Warnung){% endif %} {% if info.unit %}<span class="unit">({{ info.unit }})</span>{% endif %}</label>
                                    <input type="number" step="0.1" name="threshold_{{ alarmType }}" value="{% if config and config.threshold is not null %}{{ config.threshold }}{% else %}{% if alarmType == 'sensor_deviation' %}10.0{% elseif alarmType == 'flow_rate' %}5.0{% elseif alarmType == 'leakage' %}0.5{% elseif alarmType == 'battery' %}20.0{% elseif alarmType == 'cpu_temperature' %}70.0{% endif %}{% endif %}" placeholder="{% if alarmType == 'sensor_deviation' %}10.0{% elseif alarmType == 'flow_rate' %}5.0{% elseif alarmType == 'leakage' %}0.5{% elseif alarmType == 'battery' %}20.0{% elseif alarmType == 'cpu_temperature' %}70.0{% endif %}" class="input-full{% if alarmType == 'sensor_failure' %} input-disabled{% endif %}" {% if alarmType == 'sensor_failure' %}disabled{% endif %}>
                                </div>
                                {% if info.hasSecondary %}
                                <div>
                                    <label class="settings-label">{{ info.secondaryLabel ?? 'Kritisch' }} {% if info.secondaryUnit %}<span class="unit">({{ info.secondaryUnit }})</span>{% endif %}</label>
                                    <input type="number" step="0.1" name="threshold_secondary_{{ alarmType }}" value="{% if config and config.thresholdSecondary is not null %}{{ config.thresholdSecondary }}{% else %}{% if alarmType == 'sensor_deviation' %}20.0{% elseif alarmType == 'leakage' %}1.5{% elseif alarmType == 'battery' %}10.0{% elseif alarmType == 'cpu_temperature' %}80.0{% endif %}{% endif %}" placeholder="{% if alarmType == 'sensor_deviation' %}20.0{% elseif alarmType == 'leakage' %}1.5{% elseif alarmType == 'battery' %}10.0{% elseif alarmType == 'cpu_temperature' %}80.0{% endif %}" class="input-full">
                                </div>
                                {% endif %}
                                <div>
                                    <label class="settings-label">Level-Eskalation</label>
                                    <select name="severity_{{ alarmType }}" class="select-full">
                                        <option value="warning" {{ config and config.severity == 'warning' ? 'selected' : (not config or alarmType == 'sensor_failure' or alarmType == 'leakage' ? '' : 'selected') }}>Warnlevel</option>
                                        <option value="critical" {{ config and config.severity == 'critical' ? 'selected' : (alarmType == 'sensor_failure' or alarmType == 'leakage' ? 'selected' : '') }}>Alarmlevel</option>
                                    </select>
                                </div>
                            </div>
                            
                            {% if alarmType == 'leakage' %}
                            <div class="info-box info-box--leakage mt-1">
                                <label class="settings-label"><i class="fas fa-clock"></i> Leckage-Erkennungszeiträume</label>
                                <div class="form-grid-2 mt-half">
                                    <div>
                                        <label class="settings-label settings-label-xs">Kurzzeit (schnelle Leckage) in Minuten</label>
                                        <input type="number" min="1" step="1" name="short_term_time_{{ alarmType }}" value="{% if config and config.shortTermTimeMinutes is not null %}{{ config.shortTermTimeMinutes }}{% else %}1{% endif %}" placeholder="1" class="input-full">
                                    </div>
                                    <div>
                                        <label class="settings-label settings-label-xs">Langzeit (langsame Leckage) in Minuten</label>
                                        <input type="number" min="1" step="1" name="long_term_time_{{ alarmType }}" value="{% if config and config.longTermTimeMinutes is not null %}{{ config.longTermTimeMinutes }}{% else %}30{% endif %}" placeholder="30" class="input-full">
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="step-nav">
                    <button type="button" class="btn btn-secondary" data-goto-step="1"><i class="fas fa-arrow-left"></i> Zurück</button>
                    <button type="button" class="btn btn-primary" data-goto-step="3" id="step2-next" disabled>Weiter <i class="fas fa-arrow-right"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div id="step-3" class="config-step">
        <div class="status-card">
            <div class="card-header">
                <h3><i class="fas fa-layer-group card-icon-blue"></i> Schritt 3: Sektionen/Gruppen auswählen</h3>
            </div>
            <div class="card-body">
                <p class="help-text">Wählen Sie die Sektionen/Gruppen aus, für die die ausgewählten Alarme aktiv sein sollen.</p>
                <div id="step3-datalogger-info" class="selected-datalogger-info"> <strong>Datalogger:</strong> <span id="step3-datalogger-name">-</span> </div>
                <div id="step3-alarm-types" class="info-box info-box--warning mb-2"> <strong>Ausgewählte Alarmtypen:</strong> <span id="step3-alarm-types-list">-</span> </div>
                <div id="groups-selection-container">
                    <p class="section-empty">Bitte wählen Sie zuerst einen Datalogger und Alarmtypen aus.</p>
                </div>
                <div class="step-nav">
                    <button type="button" class="btn btn-secondary" data-goto-step="2"><i class="fas fa-arrow-left"></i> Zurück</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Konfiguration speichern</button>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="status-card mt-2">
    <div class="card-header">
        <h3><i class="fas fa-list text-success"></i> Übersicht: Aktive Alarm-Konfigurationen</h3>
    </div>
    <div class="card-body">
        <div id="overview-container" class="grid-cards-wide overview-grid-cards">
            {% if overviewData is defined %}
                {% for dataloggerId, data in overviewData %}
                <div class="overview-card">
                    <div class="overview-card-header" data-datalogger-id="{{ dataloggerId }}" role="button" tabindex="0" aria-expanded="false">
                        <div class="overview-card-main">
                            <div class="datalogger-card-title overview-title-row">
                                <i class="fas fa-server card-icon-blue"></i>
                                <span>{{ data.datalogger.name }}</span>
                            </div>
                            {% if data.datalogger.location %}
                            <div class="datalogger-card-sub ml-1-5"><i class="fas fa-map-marker-alt"></i> {{ data.datalogger.location }}</div>
                            {% endif %}
                            <div class="datalogger-card-sub mt-half ml-1-5">
                                <span class="font-weight-500 {{ data.activeAlarms is not empty ? 'text-success' : 'text-muted' }}">{{ data.activeAlarms|length }} aktive Alarm{{ data.activeAlarms|length != 1 ? 'e' : '' }}</span>
                                {% set specificCount = data.activeAlarms|filter(a => a.isDataloggerSpecific is defined and a.isDataloggerSpecific)|length %}
                                {% if specificCount > 0 %}<span class="ml-half text-primary text-2xs">({{ specificCount }} spezifisch)</span>{% endif %}
                            </div>
                        </div>
                        <i class="fas fa-chevron-down overview-chevron" data-datalogger-id="{{ dataloggerId }}"></i>
                    </div>
                    <div class="overview-card-content" data-datalogger-id="{{ dataloggerId }}">
                        {% if data.activeAlarms is not empty %}
                            <div class="overview-item-column">
                                {% for alarm in data.activeAlarms %}
                                <div class="overview-item{% if alarm.severity == 'critical' %} overview-item--critical{% endif %}">
                                    <div class="overview-item-header">
                                        <div class="flex-1">
                                            <div class="overview-item-title-row">
                                                <i class="fas fa-{{ alarm.type == 'sensor_deviation' ? 'chart-line' : (alarm.type == 'sensor_failure' ? 'exclamation-triangle' : (alarm.type == 'flow_rate' ? 'tachometer-alt' : (alarm.type == 'leakage' ? 'droplet' : (alarm.type == 'cpu_temperature' ? 'microchip' : 'battery-half')))) }} {% if alarm.type == 'sensor_failure' or alarm.type == 'leakage' %}overview-item-icon--critical{% else %}overview-item-icon--warning{% endif %} icon-sm"></i>
                                                <span class="font-weight-500">{{ alarm.label }}</span>
                                            </div>
                                            <span class="severity-badge {% if alarm.severity == 'critical' %}severity-badge--critical{% else %}severity-badge--warning{% endif %}">{% if alarm.severity == 'critical' %}Kritisch{% else %}Warnung{% endif %}</span>
                                        </div>
                                        <div class="text-right ml-half">
                                            {% if alarm.threshold is not null %}<div class="font-weight-500">{{ alarm.threshold }}{% if alarm.type == 'sensor_deviation' or alarm.type == 'battery' %}%{% elseif alarm.type == 'flow_rate' %} kg/min{% elseif alarm.type == 'leakage' %} bar{% elseif alarm.type == 'cpu_temperature' %} °C{% endif %}</div>{% endif %}
                                            {% if alarm.thresholdSecondary is not null %}<div class="datalogger-card-sub mt-quarter">Kritisch: {{ alarm.thresholdSecondary }}{% if alarm.type == 'sensor_deviation' or alarm.type == 'battery' %}%{% elseif alarm.type == 'leakage' %} bar{% elseif alarm.type == 'cpu_temperature' %} °C{% endif %}</div>{% endif %}
                                        </div>
                                    </div>
                                    {% if alarm.type == 'leakage' and (alarm.shortTermTimeMinutes is not null or alarm.longTermTimeMinutes is not null) %}
                                    <div class="datalogger-card-sub overview-item-meta">Kurz: {% if alarm.shortTermTimeMinutes %}{{ alarm.shortTermTimeMinutes }} Min{% else %}-{% endif %} · Lang: {% if alarm.longTermTimeMinutes %}{{ alarm.longTermTimeMinutes }} Min{% else %}-{% endif %}</div>
                                    {% endif %}
                                    {% if alarm.isDataloggerSpecific is defined and alarm.isDataloggerSpecific %}
                                    <div class="datalogger-card-sub overview-item-meta text-primary"><i class="fas fa-server"></i> Datalogger-spezifisch</div>
                                    {% endif %}
                                    <div class="overview-item-groups">
                                        <div class="datalogger-card-sub mb-quarter"><i class="fas fa-layer-group"></i> Gruppen:</div>
                                        <div class="overview-groups-wrap">
                                            {% for groupName in alarm.groups %}<span class="group-pill">{{ groupName }}</span>{% endfor %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="section-empty section-empty-center"><i class="fas fa-info-circle"></i> Keine aktiven Alarme konfiguriert</div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="section-empty grid-col-full">Keine Daten verfügbar.</div>
            {% endif %}
        </div>
    </div>
</div>

<script>
window.APP_ALARM_CONFIG = {
    configUrl: {{ path('app_alarm_config')|json_encode|raw }},
    allGroups: {{ allGroups|map(g => {'id': g.id, 'name': g.name, 'description': g.description})|json_encode|raw }},
    alarmTypeKeys: {{ alarmTypes|keys|json_encode|raw }}
};
</script>
{% endblock %}

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