{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content %}
<h1>🖥️ Monitoring en direct</h1>

<style>
    .controls {
        margin-bottom: 1em;
        background: #f3f3f3;
        padding: 1em;
        border-radius: 6px;
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        align-items: center;
    }

    .device-grid {
        display: grid;
        gap: 1rem;
    }

    .device-card {
        border: 1px solid #ccc;
        padding: 1rem;
        background: #fff;
        text-align: center;
        overflow: hidden;
    }

    .device-card img {
        width: 100%;
        height: auto;
        max-width: 400px; /* valeur par défaut, sera ajustée */
    }

    .device-offline {
        color: red;
        font-weight: bold;
    }

    .last-update {
        font-size: 0.85em;
        color: #666;
        margin-top: 0.5em;
    }
</style>

<div class="controls">
    <label>Colonnes :
        <select id="columns" onchange="updateGrid()">
            <option>1</option>
            <option selected>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </label>

    <label>Taille image :
        <select id="imageSize" onchange="updateImageSize()">
            <option value="300">300px</option>
            <option value="400" selected>400px</option>
            <option value="600">600px</option>
            <option value="800">800px</option>
        </select>
    </label>
</div>

<div id="grid" class="device-grid">
    {% if devices is empty %}
        <p>Aucun device détecté.</p>
    {% else %}
        {% for deviceId, deviceInfo in devices %}
            <div class="device-card">
                <h4>{{ deviceId }}</h4>

                {% if deviceInfo.isOnline %}
                    <img id="img-{{ deviceId }}"
                         data-refresh-interval="{{ (deviceInfo.maxAgeSeconds * 1000)|round }}"
                         src="/monitoring/{{ deviceId }}/screenshot.png?{{ random() }}"
                         alt="Capture {{ deviceId }}">
                {% else %}
                    <p class="device-offline">⚠️ Device éteint ou non disponible</p>
                {% endif %}

                {% if deviceInfo.lastUpdate %}
                    <p class="last-update">Dernière mise à jour : {{ deviceInfo.lastUpdate|date('d/m/Y H:i:s') }}</p>
                {% endif %}
            </div>
        {% endfor %}
    {% endif %}
</div>

<script>
    function updateGrid() {
        const columns = document.getElementById('columns').value;
        document.getElementById('grid').style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
        localStorage.setItem('columns', columns);
    }

    function updateImageSize() {
        const size = document.getElementById('imageSize').value;
        document.querySelectorAll('.device-card img').forEach(img => {
            img.style.maxWidth = size + 'px';
        });
        localStorage.setItem('imageSize', size);
    }

    window.addEventListener('DOMContentLoaded', () => {
        const storedCols = localStorage.getItem('columns') || '2';
        const storedSize = localStorage.getItem('imageSize') || '400';

        document.getElementById('columns').value = storedCols;
        document.getElementById('imageSize').value = storedSize;

        updateGrid();
        updateImageSize();

        // Pour chaque image, on crée un timer spécifique avec son intervalle
        document.querySelectorAll('img[id^="img-"]').forEach(img => {
            const refreshInterval = parseInt(img.getAttribute('data-refresh-interval')) || 5000;

            setInterval(() => {
                const src = img.src.split('?')[0];
                img.src = src + '?t=' + new Date().getTime();
            }, refreshInterval);
        });
    });
</script>
{% endblock %}