{% extends "base.html" %}

{% block title %}CO2-verloop {{ lokaal }}{% endblock %}
{% block page_title %}CO2-verloop: {{ lokaal }}{% endblock %}
{% block main_class %}medium{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>📊 {{ lokaal }}</h2>
        <div class="actions">
            <a href="{{ url_for('co2_sensor.dashboard') }}" class="btn btn-light">⬅ Terug</a>
            <button type="button" onclick="downloadChart()" class="btn-success">💾 Download als JPEG</button>
        </div>
    </div>

    <div id="chart-wrapper" style="width: 100%; height: 420px; background: #fff;">
        <canvas id="co2Chart"></canvas>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const ctx = document.getElementById('co2Chart').getContext('2d');

    // Witte achtergrond zodat de JPEG-export niet zwart wordt
    const whiteBackgroundPlugin = {
        id: 'custom_canvas_background_color',
        beforeDraw: (chart) => {
            const c = chart.canvas.getContext('2d');
            c.save();
            c.globalCompositeOperation = 'destination-over';
            c.fillStyle = 'white';
            c.fillRect(0, 0, chart.width, chart.height);
            c.restore();
        }
    };

    const co2Chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{ labels|tojson }},
            datasets: [{
                label: 'CO2-gehalte (ppm)',
                data: {{ data|tojson }},
                borderColor: '#1e6fa5',
                backgroundColor: 'rgba(30, 111, 165, 0.1)',
                borderWidth: 2,
                pointRadius: 2,
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: false, suggestedMin: 400, title: { display: true, text: 'ppm' }, grid: { color: '#eef2f6' } },
                x: { title: { display: true, text: 'Tijdstip' }, grid: { display: false } }
            }
        },
        plugins: [whiteBackgroundPlugin]
    });

    function downloadChart() {
        const canvas = document.getElementById('co2Chart');
        const link = document.createElement('a');
        const timestamp = new Date().toISOString().slice(0, 10);
        link.download = `CO2_Grafiek_{{ lokaal }}_${timestamp}.jpg`;
        link.href = canvas.toDataURL('image/jpeg', 0.9);
        link.click();
    }
</script>
{% endblock %}