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

{% block title %}Versteckte HAT-Sensoren verwalten - Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <a href="{{ path('app_user_list') }}">Administration</a>
        <i class="fas fa-chevron-right"></i>
        <span>Versteckte HAT-Sensoren - {{ datalogger.name }}</span>
    </div>
    <div class="page-title">
        <i class="fas fa-eye-slash"></i>
        <h2>Versteckte HAT-Sensoren verwalten</h2>
    </div>
</div>

<div class="content-card">
    <div class="section-block">
        <h2 class="section-block h2 mb-1">Datalogger: {{ datalogger.name }}</h2>
        {% if datalogger.location %}
            <p class="section-muted"><i class="fas fa-map-marker-alt"></i> {{ datalogger.location }}</p>
        {% endif %}
    </div>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            <span>{{ message }}</span>
        </div>
    {% endfor %}

    {% for message in app.flashes('error') %}
        <div class="alert alert-error">
            <i class="fas fa-exclamation-circle"></i>
            <span>{{ message }}</span>
        </div>
    {% endfor %}

    {% if not apiAvailable %}
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Warnung:</strong> Datalogger API ist nicht erreichbar. Die HAT-Sensoren können nicht geladen werden.
        </div>
    {% endif %}

    {% if hatsData.error is defined %}
        <div class="alert alert-error">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Fehler:</strong> {{ hatsData.error }}
        </div>
    {% elseif hatsData %}
        {% set hatDataToProcess = hatsData.hat_data is defined and hatsData.hat_data is iterable ? hatsData.hat_data : (hatsData is iterable ? hatsData : {}) %}
        
        {% if hatDataToProcess and hatDataToProcess is iterable %}
            <div class="section-block">
                <h3 class="section-block h3 mb-1">Verfügbare HAT-Sensoren</h3>
                <p class="section-muted mb-15">Klicken Sie auf einen Sensor oder Channel, um ihn für normale User zu verstecken/zeigen.</p>

                {% for hatKey, hat in hatDataToProcess %}
                    {% if hat is iterable and hat.inputs is defined and hat.inputs is iterable %}
                        {% set hatName = hat.name is not iterable ? hat.name : hatKey %}
                        {% set hatStack = hat.stack is not iterable ? hat.stack : null %}
                        <div class="hat-management-card">
                            <div class="hat-management-card-header">
                                <div>
                                    <h4 class="hat-management-card h4">
                                        <i class="fas fa-microchip"></i>
                                        {{ hatName }}
                                        {% if hatStack is not null %}<span class="stack-pill">Stack {{ hatStack }}</span>{% endif %}
                                    </h4>
                                </div>
                                <form method="post" action="{{ path('app_hidden_hat_sensors_toggle', {dataloggerId: datalogger.id}) }}" class="form-inline">
                                    <input type="hidden" name="hatName" value="{{ hatName }}">
                                    <input type="hidden" name="stack" value="{{ hatStack ?? '' }}">
                                    <input type="hidden" name="channel" value="">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle_hat_' ~ hatName ~ '_' ~ hatStack) }}">
                                    {% set hatKey = hatName ~ '_' ~ (hatStack ?? 'null') ~ '_null' %}
                                    <button type="submit" class="btn {% if hatKey in hiddenMap|keys %}btn-warning{% else %}btn-secondary{% endif %} btn-inline">
                                        {% if hatKey in hiddenMap|keys %}<i class="fas fa-eye"></i> Gesamten HAT zeigen{% else %}<i class="fas fa-eye-slash"></i> Gesamten HAT verstecken{% endif %}
                                    </button>
                                </form>
                            </div>
                            <div class="channel-grid">
                                {% for input in hat.inputs %}
                                    {% if input is iterable %}
                                        {% set inputChannel = input.channel is not iterable ? input.channel : null %}
                                        {% set channelKey = hatName ~ '_' ~ (hatStack ?? 'null') ~ '_' ~ (inputChannel ?? 'null') %}
                                        {% set isHidden = channelKey in hiddenMap|keys %}
                                        <div class="channel-toggle-card{% if isHidden %} channel-toggle-card--hidden{% endif %}">
                                            <form method="post" action="{{ path('app_hidden_hat_sensors_toggle', {dataloggerId: datalogger.id}) }}" class="form-no-margin">
                                                <input type="hidden" name="hatName" value="{{ hatName }}">
                                                <input type="hidden" name="stack" value="{{ hatStack ?? '' }}">
                                                <input type="hidden" name="channel" value="{{ inputChannel ?? '' }}">
                                                <input type="hidden" name="_token" value="{{ csrf_token('toggle_channel_' ~ hatName ~ '_' ~ hatStack ~ '_' ~ inputChannel) }}">
                                                <div class="channel-label">
                                                    {% if isHidden %}<i class="fas fa-eye-slash text-danger"></i>{% else %}<i class="fas fa-eye text-success"></i>{% endif %}
                                                    <strong>Channel {{ inputChannel ?? 'N/A' }}</strong>
                                                </div>
                                                {% if input.sensor_name is defined and input.sensor_name is not iterable %}
                                                    <div class="datalogger-card-sub mb-half">{{ input.sensor_name }}</div>
                                                {% endif %}
                                                <button type="submit" class="btn {% if isHidden %}btn-success{% else %}btn-danger{% endif %} btn-full">
                                                    {% if isHidden %}<i class="fas fa-eye"></i> Zeigen{% else %}<i class="fas fa-eye-slash"></i> Verstecken{% endif %}
                                                </button>
                                            </form>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                <strong>Keine HAT-Daten verfügbar</strong>
            </div>
        {% endif %}
    {% endif %}

    <div class="section-block section-block-border">
        <h3 class="mb-1">Aktuell versteckte Sensoren</h3>
        {% if hiddenSensors is empty %}
            <p class="section-muted">Keine Sensoren versteckt.</p>
        {% else %}
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>HAT Name</th>
                            <th>Stack</th>
                            <th>Channel</th>
                            <th>Erstellt am</th>
                            <th>Aktionen</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for hidden in hiddenSensors %}
                        <tr>
                            <td><strong>{{ hidden.hatName }}</strong></td>
                            <td>{{ hidden.stack ?? '-' }}</td>
                            <td>{{ hidden.channel ?? '-' }}</td>
                            <td>{{ hidden.createdAt|date('d.m.Y H:i') }}</td>
                            <td>
                                <form method="post" action="{{ path('app_hidden_hat_sensors_delete', {dataloggerId: datalogger.id, id: hidden.id}) }}" class="form-inline">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete_' ~ hidden.id) }}">
                                    <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> Entfernen</button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>

    <div class="mt-2">
        <a href="{{ path('app_dashboard') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Zurück zum Dashboard</a>
    </div>
</div>
{% endblock %}