{% extends 'base.html.twig' %}
{% import 'components/datalogger_tabs.html.twig' as tabs %}

{% block title %}HAT Sensoren Charts - 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>
        {% if datalogger is defined %}
            <a href="{{ path('app_datalogger_detail', {id: datalogger.id}) }}">{{ datalogger.name }}</a>
            <i class="fas fa-chevron-right"></i>
            <a href="{{ path('app_hats', {id: datalogger.id}) }}">HAT Sensoren</a>
            <i class="fas fa-chevron-right"></i>
        {% endif %}
        <span>Charts</span>
    </div>
    <div class="page-title">
        <i class="fas fa-chart-line"></i>
        <h2>HAT Sensoren Charts{% if datalogger is defined %} - {{ datalogger.name }}{% endif %}</h2>
    </div>
</div>

{# API-Warnung: data-Attribut für hats-charts.js (showToast) #}
<div id="hats-charts-root" data-api-unavailable="{{ (apiAvailable is defined and not apiAvailable) ? '1' : '0' }}" class="d-none"></div>

{% if datalogger is defined %}
{{ tabs.renderTabs(datalogger, app.request.attributes.get('_route')) }}
{% endif %}

<div class="hats-charts-toolbar">
    <div class="hats-charts-toolbar-inner">
        <div>
            <label for="timeRange" class="hats-charts-toolbar-label">Zeitraum:</label>
            <div class="hats-charts-toolbar-row">
                <select id="timeRange" class="form-select">
                    <option value="1">Letzte Stunde</option>
                    <option value="6">Letzte 6 Stunden</option>
                    <option value="24" selected>Letzte 24 Stunden</option>
                    <option value="48">Letzte 48 Stunden</option>
                    <option value="168">Letzte Woche</option>
                </select>
                <div class="hats-charts-quick-range">
                    <button type="button" class="quick-range-btn" data-range="1" title="1 Stunde">1h</button>
                    <button type="button" class="quick-range-btn" data-range="6" title="6 Stunden">6h</button>
                    <button type="button" class="quick-range-btn" data-range="24" title="24 Stunden">24h</button>
                </div>
            </div>
        </div>
        <div>
            <label for="refreshInterval" class="hats-charts-toolbar-label">Auto-Refresh:</label>
            <select id="refreshInterval" class="form-select">
                <option value="0">OFF</option>
                <option value="5000" selected>5s</option>
                <option value="10000">10s</option>
                <option value="30000">30s</option>
                <option value="60000">1min</option>
            </select>
        </div>
        <div class="hats-charts-actions">
            <button id="showAllSensors" class="btn btn-primary">
                <i class="fas fa-chart-bar"></i> Alle Sensoren
            </button>
            {% if selectedHat and selectedChannel is not null %}
                <a href="{{ path('app_export_hats_csv', {id: datalogger.id, hat: selectedHat, stack: selectedStack, channel: selectedChannel, timeRange: app.request.query.get('timeRange', '24h')}) }}" class="btn btn-secondary">
                    <i class="fas fa-download"></i> CSV Export
                </a>
            {% endif %}
        </div>
    </div>
</div>

{% set selectedHat = app.request.query.get('hat')|default('') %}
{% set selectedStack = app.request.query.get('stack')|default(0) %}
{% set selectedChannel = app.request.query.get('channel')|default(null) %}

<div id="charts-container">
    {% if selectedHat and selectedChannel is not null %}
        {# Einzelner Sensor Chart #}
        <div class="chart-card">
            <div class="chart-header">
                <div class="chart-header-row">
                    <h3>
                        <i class="fas fa-chart-line"></i>
                        {{ selectedHat }} - Stack {{ selectedStack }} - Channel {{ selectedChannel }}
                    </h3>
                    <div id="current-value-display" class="current-value-display">
                        <span class="label">Aktueller Wert:</span>
                        <span id="current-value-text" class="value">--</span>
                    </div>
                </div>
                <div id="trendIndicator" class="trend-indicator">
                    <i class="fas fa-minus" id="trendIcon"></i>
                    <span class="font-weight-500">Trend:</span>
                    <span id="trendText">Stabil</span>
                    <span id="trendPercent"></span>
                </div>
            </div>
            <div id="chart-loading-overlay" class="chart-loading-overlay">
                <div class="text-center">
                    <i class="fas fa-spinner fa-spin spinner"></i>
                    <p class="msg">Daten werden geladen...</p>
                    <p class="hint">Dies kann bei großen Zeiträumen einige Sekunden dauern.</p>
                    <div id="loading-progress" class="chart-loading-progress"></div>
                </div>
            </div>
            <div id="chart-empty-state" class="chart-empty-state">
                <i class="fas fa-chart-line empty-icon"></i>
                <h3>Keine Daten verfügbar</h3>
                <p>Für den ausgewählten Zeitraum wurden keine Sensordaten gefunden. Bitte versuchen Sie einen anderen Zeitraum oder prüfen Sie, ob Daten in InfluxDB vorhanden sind.</p>
                <div class="chart-empty-actions">
                    <button type="button" class="quick-range-btn btn" data-range="1"><i class="fas fa-clock"></i> Letzte Stunde</button>
                    <button type="button" class="quick-range-btn btn" data-range="6"><i class="fas fa-clock"></i> Letzte 6 Stunden</button>
                    <button type="button" class="quick-range-btn btn" data-range="24"><i class="fas fa-clock"></i> Letzte 24 Stunden</button>
                </div>
            </div>
            <canvas id="singleSensorChart" class="chart-canvas-hidden"></canvas>
        </div>
    {% else %}
        {# Alle Sensoren in einem Chart #}
        <div class="chart-card">
            <div class="chart-header">
                <h3><i class="fas fa-chart-line"></i> Alle Sensoren</h3>
            </div>
            <div id="all-chart-loading-overlay" class="chart-loading-overlay">
                <div class="text-center">
                    <i class="fas fa-spinner fa-spin spinner"></i>
                    <p class="msg">Daten werden geladen...</p>
                    <p class="hint">Dies kann bei großen Zeiträumen einige Sekunden dauern.</p>
                    <div id="all-loading-progress" class="chart-loading-progress"></div>
                </div>
            </div>
            <canvas id="allSensorsChart" class="chart-canvas-hidden"></canvas>
        </div>
    {% endif %}
</div>

{% endblock %}

{% block javascripts %}
<script>
window.APP_HATS_CHARTS = {
    dataloggerId: {{ datalogger.id|default('null') }},
    selectedHat: {{ (selectedHat|default(''))|json_encode|raw }},
    selectedStack: {{ selectedStack|default(0) }},
    selectedChannel: {{ selectedChannel|default(null)|json_encode|raw }},
    isAdmin: {{ (isAdmin is defined and isAdmin) ? 'true' : 'false' }},
    hiddenSensors: {{ (hiddenSensors|default([]))|json_encode|raw }},
    chartsAjaxUrl: {% if datalogger is defined %}{{ path('app_hats_charts_ajax', {id: datalogger.id})|json_encode|raw }}{% else %}{{ path('app_hats_charts_ajax')|json_encode|raw }}{% endif %},
    chartsIndexUrl: {% if datalogger is defined %}{{ path('app_hats_charts', {id: datalogger.id})|json_encode|raw }}{% else %}{{ path('app_hats_charts')|json_encode|raw }}{% endif %},
    apiAvailable: {{ (apiAvailable is defined and apiAvailable) ? 'true' : 'false' }}
};
</script>
<script src="{{ asset('js/hats-charts.js') }}"></script>
{% endblock %}