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

{% block title %}Datalogger Übersicht - 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>Alle Datalogger</span>
    </div>
    <div class="page-title">
        <i class="fas fa-server"></i>
        <h2>Datalogger Übersicht</h2>
    </div>
</div>

{% if dataloggers is not empty %}
{% set onlineCount = 0 %}
{% set gpsCount = 0 %}
{% set movingCount = 0 %}
{% for dataloggerData in dataloggers %}
    {% if (dataloggerData.cardDataLoading is not defined or not dataloggerData.cardDataLoading) and dataloggerData.apiAvailable %}
        {% set onlineCount = onlineCount + 1 %}
    {% endif %}
    {% if (dataloggerData.cardDataLoading is not defined or not dataloggerData.cardDataLoading) and dataloggerData.currentGps is defined and dataloggerData.currentGps is not null %}
        {% set gpsCount = gpsCount + 1 %}
    {% endif %}
    {% if (dataloggerData.cardDataLoading is not defined or not dataloggerData.cardDataLoading) and dataloggerData.currentGps is defined and dataloggerData.currentGps is not null and dataloggerData.currentGps.speed_kmh is defined and dataloggerData.currentGps.speed_kmh > 2 %}
        {% set movingCount = movingCount + 1 %}
    {% endif %}
{% endfor %}

<div class="stats-overview">
    <div class="stat-card">
        <div class="stat-icon total">
            <i class="fas fa-server"></i>
        </div>
        <div class="stat-content">
            <span class="stat-value">{{ dataloggers|length }}</span>
            <span class="stat-label">Gesamt</span>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon online">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="stat-content">
            <span class="stat-value" id="stat-online-count">{{ onlineCount }}</span>
            <span class="stat-label">Online</span>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon offline">
            <i class="fas fa-times-circle"></i>
        </div>
        <div class="stat-content">
            <span class="stat-value" id="stat-offline-count">{{ dataloggers|length - onlineCount }}</span>
            <span class="stat-label">Offline</span>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon gps">
            <i class="fas fa-map-marker-alt"></i>
        </div>
        <div class="stat-content">
            <span class="stat-value" id="stat-gps-count">{{ gpsCount }}</span>
            <span class="stat-label">Mit GPS</span>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon online">
            <i class="fas fa-route"></i>
        </div>
        <div class="stat-content">
            <span class="stat-value" id="stat-moving-count">{{ movingCount }}</span>
            <span class="stat-label">In Bewegung</span>
        </div>
    </div>
    {% if activeAlarmsCount is defined and activeAlarmsCount > 0 %}
    <div class="stat-card {% if criticalAlarmsCount > 0 %}stat-card-alarm-critical{% else %}stat-card-alarm{% endif %}">
        <div class="stat-icon">
            <i class="fas fa-bell"></i>
        </div>
        <div class="stat-content">
            <span class="stat-value">{{ activeAlarmsCount }}</span>
            <span class="stat-label">Aktive Alarme</span>
            {% if criticalAlarmsCount > 0 %}
                <small class="alarm-badge-small">
                    <i class="fas fa-exclamation-triangle"></i> {{ criticalAlarmsCount }} kritisch
                </small>
            {% endif %}
        </div>
        <a href="{{ path('app_alarms_all') }}" 
           class="stat-card-alarm-link {% if criticalAlarmsCount > 0 %}stat-card-alarm-link-critical{% else %}stat-card-alarm-link-warning{% endif %}"
           title="Alle Alarme anzeigen">
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
    {% endif %}
</div>

<div class="dashboard-controls">
    <div class="dashboard-filter">
        <button class="filter-btn active" data-filter="all">
            <i class="fas fa-list"></i> Alle
        </button>
        <button class="filter-btn" data-filter="online">
            <i class="fas fa-check-circle"></i> Online
        </button>
        <button class="filter-btn" data-filter="offline">
            <i class="fas fa-times-circle"></i> Offline
        </button>
        <button class="filter-btn" data-filter="gps">
            <i class="fas fa-map-marker-alt"></i> Mit GPS
        </button>
    </div>
    <div class="dashboard-view-toggle" role="group" aria-label="Ansicht wechseln">
        <button class="view-toggle-btn" id="viewCardsBtn" data-view="cards" type="button">
            <i class="fas fa-th-large"></i> Karten
        </button>
        <button class="view-toggle-btn active" id="viewTableBtn" data-view="table" type="button">
            <i class="fas fa-table"></i> Tabelle
        </button>
    </div>
    <div class="dashboard-search">
        <i class="fas fa-search"></i>
        <input type="text" id="datalogger-search" placeholder="Datalogger suchen...">
    </div>
</div>
{% endif %}

<div class="content-grid dashboard-grid-full">
    <!-- Main Content Area -->
    <div class="content-main">
        {% if dataloggers is empty %}
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Keine Datalogger konfiguriert:</strong> Bitte fügen Sie Datalogger in der Datenbank hinzu.
        </div>
        {% else %}
            <div class="status-cards" id="datalogger-cards" data-card-data-url="{{ path('app_dashboard_card_data', { id: '__ID__' }) }}" data-card-data-batch-url="{{ path('app_dashboard_card_data_batch') }}" data-sparklines-url="{{ path('app_dashboard_sparklines_batch') }}">
                {% for dataloggerData in dataloggers %}
                {% set dl = dataloggerData.entity %}
                {% set status = dataloggerData.status %}
                {% set health = dataloggerData.health %}
                {% set system = dataloggerData.system %}
                {% set version = dataloggerData.version %}
                {% set apiAvailable = dataloggerData.apiAvailable %}
                {% set hasGps = dataloggerData.currentGps is defined and dataloggerData.currentGps is not null %}
                {% set loading = dataloggerData.cardDataLoading is defined and dataloggerData.cardDataLoading %}
                
                <div class="datalogger-card {{ loading ? 'status-loading' : (apiAvailable ? 'status-online' : 'status-offline') }}" 
                     data-datalogger-id="{{ dl.id }}"
                     data-status="{{ loading ? 'offline' : (apiAvailable ? 'online' : 'offline') }}"
                     data-has-gps="{{ loading ? 'false' : (hasGps ? 'true' : 'false') }}"
                     data-name="{{ dl.name|lower }}">
                    <div class="card-header-modern">
                        <div class="card-title-modern">
                            <span class="status-indicator-modern {{ loading ? 'offline' : (apiAvailable ? 'online' : 'offline') }}"></span>
                            <div>
                                <h3 class="m-0">{{ dl.name }}</h3>
                                <small class="card-status-text text-secondary text-xs">
                                    {% if loading %}
                                        <i class="fas fa-spinner fa-spin"></i> Lade…
                                    {% else %}
                                        {{ apiAvailable ? 'Online' : 'Offline' }}
                                        {% if dataloggerData.currentGps is defined and dataloggerData.currentGps is not null and dataloggerData.currentGps.datetime is defined %}
                                            • {{ dataloggerData.currentGps.datetime|date('d.m.Y H:i') }}
                                        {% endif %}
                                    {% endif %}
                                </small>
                            </div>
                        </div>
                        <div class="card-actions">
                                {% if dataloggerData.activeAlarmsCount is defined and dataloggerData.activeAlarmsCount > 0 %}
                                <a href="{{ path('app_alarms', {id: dl.id}) }}" 
                                   class="btn btn-sm card-alarm-badge {% if dataloggerData.criticalAlarmsCount > 0 %}card-alarm-badge-critical{% else %}card-alarm-badge-warning{% endif %}"
                                   title="{{ dataloggerData.activeAlarmsCount }} aktive Alarm{{ dataloggerData.activeAlarmsCount != 1 ? 'e' : '' }}{% if dataloggerData.criticalAlarmsCount > 0 %} ({{ dataloggerData.criticalAlarmsCount }} kritisch){% endif %}">
                                    <i class="fas fa-bell"></i> <span class="card-alarm-count">{{ dataloggerData.activeAlarmsCount }}</span>
                                </a>
                            {% endif %}
                            <a href="{{ path('app_datalogger_detail', {id: dl.id}) }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-eye"></i> Details
                            </a>
                        </div>
                    </div>
                    
                    <div class="card-body-modern">
                        <div class="info-grid-modern">
                            <div class="info-item-modern">
                                <span class="info-label-modern">Standort</span>
                                <span class="info-value-modern card-location" data-fallback="{{ (dl.location ?? 'Nicht angegeben')|e('html_attr') }}">
                                    {% if loading %}
                                        <i class="fas fa-spinner fa-spin text-secondary"></i> Lade…
                                    {% elseif dataloggerData.currentGps is defined and dataloggerData.currentGps is not null and dataloggerData.currentGps.location is defined %}
                                        <i class="fas fa-map-marker-alt icon-success"></i>
                                        {{ dataloggerData.currentGps.location }}
                                        {% if dataloggerData.currentGps.datetime is defined %}
                                            <small class="block text-secondary text-xs mt-quarter">
                                                <i class="fas fa-clock"></i> {{ dataloggerData.currentGps.datetime|date('d.m.Y H:i') }}
                                            </small>
                                        {% endif %}
                                    {% elseif dataloggerData.currentGps is defined and dataloggerData.currentGps is not null and dataloggerData.currentGps.lat is defined and dataloggerData.currentGps.lon is defined %}
                                        <i class="fas fa-map-marker-alt icon-warning"></i>
                                        {{ dataloggerData.currentGps.lat|number_format(6) }}, {{ dataloggerData.currentGps.lon|number_format(6) }}
                                    {% else %}
                                        <i class="fas fa-map-marker-alt text-secondary"></i>
                                        {{ dl.location ?? 'Nicht angegeben' }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        
                        <div class="card-metrics-container">
                            {% if loading %}
                                <div class="metrics-grid-modern card-metrics-placeholder">
                                    <span class="text-secondary"><i class="fas fa-spinner fa-spin"></i> Lade API-Daten…</span>
                                </div>
                            {% elseif system is defined and system is not null and (system.error is not defined) %}
                            <div class="card-metrics">
                                {% if (dataloggerData.totalMassKg is defined and dataloggerData.totalMassKg is not null) or (dataloggerData.avgTemperature is defined and dataloggerData.avgTemperature is not null) or (dataloggerData.batterySocPct is defined and dataloggerData.batterySocPct is not null) %}
                                    <div class="metrics-grid-modern card-metrics-main">
                                        {% if dataloggerData.batterySocPct is defined and dataloggerData.batterySocPct is not null %}
                                        <div class="metric-item-modern">
                                            <div class="metric-icon battery">
                                                <i class="fas fa-battery-three-quarters"></i>
                                            </div>
                                            <div class="metric-content-modern">
                                                <span class="metric-value-modern card-soc-value">{{ dataloggerData.batterySocPct|round(0) }}%</span>
                                                <span class="metric-label-modern">Batterie SOC</span>
                                            </div>
                                        </div>
                                        {% endif %}
                                        {% if dataloggerData.totalMassKg is defined and dataloggerData.totalMassKg is not null %}
                                        <div class="metric-item-modern">
                                            <div class="metric-icon mass">
                                                <i class="fas fa-weight"></i>
                                            </div>
                                            <div class="metric-content-modern">
                                                <span class="metric-value-modern">{{ dataloggerData.totalMassKg|number_format(2) }} kg</span>
                                                <span class="metric-label-modern">
                                                    H₂-Masse
                                                    {% if dataloggerData.groupMasses is defined and dataloggerData.groupMasses|length > 0 %}
                                                        <small class="metric-label-small">
                                                            {{ dataloggerData.groupMasses|length }} Gruppe(n)
                                                        </small>
                                                    {% endif %}
                                                </span>
                                            </div>
                                        </div>
                                        {% endif %}
                                        {% if dataloggerData.avgTemperature is defined and dataloggerData.avgTemperature is not null %}
                                        <div class="metric-item-modern">
                                            <div class="metric-icon temp">
                                                <i class="fas fa-thermometer-half"></i>
                                            </div>
                                            <div class="metric-content-modern">
                                                <span class="metric-value-modern">{{ dataloggerData.avgTemperature|number_format(1) }}°C</span>
                                                <span class="metric-label-modern">Ø Temperatur Behälter</span>
                                            </div>
                                        </div>
                                        {% endif %}
                                    </div>
                                {% endif %}

                                {% if (dataloggerData.totalMassKg is defined and dataloggerData.totalMassKg is not null) or (dataloggerData.avgTemperature is defined and dataloggerData.avgTemperature is not null) or (dataloggerData.massDiagnosis is defined and dataloggerData.massDiagnosis.fillLevelPercent is defined and dataloggerData.massDiagnosis.fillLevelPercent is not null) or (dataloggerData.groupMasses is defined and dataloggerData.groupMasses|length > 0) %}
                                <details class="card-more-details">
                                    <summary><i class="fas fa-chevron-down card-more-summary-icon"></i> Werte &amp; Gesamtwerte</summary>
                                    <div class="card-more-content">
                                        <div class="card-system-details-inner">
                                            <span class="card-system-details-label"><i class="fas fa-calculator"></i> Werte</span>
                                            <div style="margin-top:0.35rem;">
                                                {% if dataloggerData.totalMassKg is defined and dataloggerData.totalMassKg is not null %}
                                                <div style="display:flex;justify-content:space-between;gap:0.75rem;padding:0.25rem 0;">
                                                    <span class="text-secondary">Gesamtmasse</span>
                                                    <strong>{{ dataloggerData.totalMassKg|number_format(2) }} kg</strong>
                                                </div>
                                                {% endif %}
                                                {% if dataloggerData.avgTemperature is defined and dataloggerData.avgTemperature is not null %}
                                                <div style="display:flex;justify-content:space-between;gap:0.75rem;padding:0.25rem 0;">
                                                    <span class="text-secondary">Ø Temperatur</span>
                                                    <strong>{{ dataloggerData.avgTemperature|number_format(1) }}°C</strong>
                                                </div>
                                                {% endif %}
                                                {% if dataloggerData.massDiagnosis is defined and dataloggerData.massDiagnosis.fillLevelPercent is defined and dataloggerData.massDiagnosis.fillLevelPercent is not null %}
                                                <div style="display:flex;justify-content:space-between;gap:0.75rem;padding:0.25rem 0;">
                                                    <span class="text-secondary">Füllstand</span>
                                                    <strong>{{ dataloggerData.massDiagnosis.fillLevelPercent|number_format(1) }}%</strong>
                                                </div>
                                                {% endif %}
                                            </div>

                                            {% if dataloggerData.groupMasses is defined and dataloggerData.groupMasses|length > 0 %}
                                            <div style="margin-top:0.35rem;">
                                                <span class="card-system-details-label"><i class="fas fa-layer-group"></i> Gruppen</span>
                                                {% for group in dataloggerData.groupMasses %}
                                                <div style="border:1px solid #e2e8f0;border-radius:8px;padding:0.5rem 0.65rem;margin-top:0.5rem;background:#f8fafc;">
                                                    <div style="font-weight:600;color:#0f172a;">{{ group.groupName ?: 'Gruppe' }}</div>
                                                    <div style="display:flex;justify-content:space-between;gap:0.75rem;margin-top:0.3rem;">
                                                        <span class="text-secondary">Masse</span>
                                                        <strong>{{ group.massKg is defined and group.massKg is not null ? group.massKg|number_format(2) ~ ' kg' : '--' }}</strong>
                                                    </div>
                                                    <div style="display:flex;justify-content:space-between;gap:0.75rem;">
                                                        <span class="text-secondary">Nutzbar</span>
                                                        <strong>{{ group.usableMassKg is defined and group.usableMassKg is not null ? group.usableMassKg|number_format(2) ~ ' kg' : '--' }}</strong>
                                                    </div>
                                                    <div style="display:flex;justify-content:space-between;gap:0.75rem;">
                                                        <span class="text-secondary">Füllstand</span>
                                                        <strong>{{ group.fillLevelPercent is defined and group.fillLevelPercent is not null ? group.fillLevelPercent|number_format(1) ~ '%' : '--' }}</strong>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </details>
                                {% endif %}
                                
                                {% if system.cpu_temp is defined or system.cpu_usage is defined or (system.memory_usage is defined and system.memory_total is defined) %}
                                <details class="card-more-details">
                                    <summary><i class="fas fa-chevron-down card-more-summary-icon"></i> Weitere Infos</summary>
                                    <div class="card-more-content">
                                        <div class="card-system-details-inner">
                                            <span class="card-system-details-label"><i class="fas fa-microchip"></i> System</span>
                                            <div class="metrics-grid-modern card-metrics-system">
                                                {% if system.cpu_temp is defined %}
                                                <div class="metric-item-modern">
                                                    <div class="metric-icon temp">
                                                        <i class="fas fa-thermometer-half"></i>
                                                    </div>
                                                    <div class="metric-content-modern">
                                                        <span class="metric-value-modern">{{ system.cpu_temp }}°C</span>
                                                        <span class="metric-label-modern">CPU Temp</span>
                                                    </div>
                                                </div>
                                                {% endif %}
                                                {% if system.cpu_usage is defined %}
                                                <div class="metric-item-modern">
                                                    <div class="metric-icon cpu">
                                                        <i class="fas fa-microchip"></i>
                                                    </div>
                                                    <div class="metric-content-modern">
                                                        <span class="metric-value-modern">{{ system.cpu_usage }}%</span>
                                                        <span class="metric-label-modern">CPU</span>
                                                    </div>
                                                </div>
                                                {% endif %}
                                                {% if system.memory_usage is defined and system.memory_total is defined %}
                                                <div class="metric-item-modern">
                                                    <div class="metric-icon memory">
                                                        <i class="fas fa-memory"></i>
                                                    </div>
                                                    <div class="metric-content-modern">
                                                        <span class="metric-value-modern">{{ ((system.memory_usage / system.memory_total) * 100)|round(1) }}%</span>
                                                        <span class="metric-label-modern">RAM</span>
                                                    </div>
                                                </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </details>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                </div>
                {% endfor %}
            </div>
            <div id="datalogger-table-wrapper" class="dashboard-table-wrapper hidden">
                <table class="table-modern dashboard-table" id="datalogger-table">
                    <thead>
                    <tr>
                        <th>Datalogger</th>
                        <th>Status</th>
                        <th>Standort</th>
                        <th>BMS / SOC</th>
                        <th>Ø Druck</th>
                        <th>Ø Temp</th>
                        <th>Speed</th>
                        <th>H₂-Masse</th>
                        <th>24h Trend</th>
                        <th>Alarme</th>
                        <th>Aktionen</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for dataloggerData in dataloggers %}
                        {% set dl = dataloggerData.entity %}
                        {% set hasGps = dataloggerData.currentGps is defined and dataloggerData.currentGps is not null %}
                        {% set loading = dataloggerData.cardDataLoading is defined and dataloggerData.cardDataLoading %}
                        <tr class="datalogger-row"
                            id="datalogger-row-{{ dl.id }}"
                            data-detail-url="{{ path('app_datalogger_detail', {id: dl.id}) }}"
                            data-datalogger-id="{{ dl.id }}"
                            data-status="{{ loading ? 'offline' : (dataloggerData.apiAvailable ? 'online' : 'offline') }}"
                            data-has-gps="{{ loading ? 'false' : (hasGps ? 'true' : 'false') }}"
                            data-name="{{ dl.name|lower }}">
                            <td><strong>{{ dl.name }}</strong></td>
                            <td class="row-status">
                                <span class="status-pill {{ loading ? 'status-pill-loading' : (dataloggerData.apiAvailable ? 'status-pill-online' : 'status-pill-offline') }}">
                                    {{ loading ? 'Lade…' : (dataloggerData.apiAvailable ? 'Online' : 'Offline') }}
                                </span>
                            </td>
                            <td class="row-location">{{ dl.location ?? 'Nicht angegeben' }}</td>
                            <td class="row-soc">{{ dataloggerData.batterySocPct is defined and dataloggerData.batterySocPct is not null ? dataloggerData.batterySocPct|round(0) ~ ' %' : '--' }}</td>
                            <td class="row-pressure">{{ dataloggerData.avgPressure is defined and dataloggerData.avgPressure is not null ? dataloggerData.avgPressure|number_format(1) ~ ' bar' : '--' }}</td>
                            <td class="row-temp">{{ dataloggerData.avgTemperature is defined and dataloggerData.avgTemperature is not null ? dataloggerData.avgTemperature|number_format(1) ~ '°C' : '--' }}</td>
                            <td class="row-speed">--</td>
                            <td class="row-mass">
                                --
                                <span class="diag-badge diag-badge-unknown">--</span>
                            </td>
                            <td>
                                <div class="table-sparkline" id="mass-sparkline-table-{{ dl.id }}"></div>
                                <small class="text-secondary row-trend">--</small>
                            </td>
                            <td class="row-alarms">
                                {% if dataloggerData.activeAlarmsCount is defined and dataloggerData.activeAlarmsCount > 0 %}
                                    <span class="alarm-pill alarm-pill-active">{{ dataloggerData.activeAlarmsCount }}</span>
                                {% else %}
                                    <span class="alarm-pill alarm-pill-none">0</span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ path('app_datalogger_detail', {id: dl.id}) }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-eye"></i> Details
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>

</div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/dashboard-index.js') }}?v=20260507-1"></script>
{% endblock %}