<?php
require_once 'includes/auth_check.php';
require_once 'includes/db_connect.php';

$user_id = $_SESSION['user_id'];

// Lade alle aktiven Pflanzen, die mindestens einen Sensoreintrag haben
$plants_with_sensors = [];
$sql = "SELECT DISTINCT p.id, 
                        s.strain_name, 
                        s.internal_name,
                        z.name AS zone_name,
                        c.name AS container_name
        FROM plants p 
        JOIN seeds s ON p.seed_id = s.id
        JOIN zones z ON p.zone_id = z.id
        JOIN containers c ON p.container_id = c.id
        JOIN sensor_data sd ON p.id = sd.plant_id
        WHERE p.user_id = ? AND p.status = 'Eingepflanzt'
        ORDER BY c.name ASC";

if ($stmt = $mysqli->prepare($sql)) {
    $stmt->bind_param("i", $user_id);
    $stmt->execute();
    $result = $stmt->get_result();
    while ($row = $result->fetch_assoc()) {
        $plants_with_sensors[] = $row;
    }
    $stmt->close();
}

require_once 'includes/header.php';
?>

<div class="card header-card mb-4">
    <div class="card-body">
        <h1 class="mb-0">Sensor-Übersicht</h1>
        <p class="card-text mt-2">Live-Daten aller deiner aktiven Pflanzen.</p>
    </div>
</div>

<div class="d-flex justify-content-center gap-2 mb-4">
    <button class="btn btn-sm btn-outline-dark sensor-range-btn active" data-range="24h">24 Stunden</button>
    <button class="btn btn-sm btn-outline-dark sensor-range-btn" data-range="7d">7 Tage</button>
    <button class="btn btn-sm btn-outline-dark sensor-range-btn" data-range="30d">30 Tage</button>
</div>

<div class="row">
    <?php if (empty($plants_with_sensors)): ?>
        <div class="col-12">
            <div class="alert alert-light text-center border shadow-sm">
                <h5>Keine Sensordaten verfügbar</h5>
                <p class="text-muted">Für deine aktiven Pflanzen wurden noch keine Sensordaten über die API gesendet.</p>
            </div>
        </div>
    <?php else: ?>
        <?php foreach ($plants_with_sensors as $plant): ?>
            <div class="col-lg-6 mb-4">
                <div class="card h-100 border-0 shadow-sm" style="background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px);">
                    <div class="card-header bg-dark text-white py-3">
                        <h5 class="mb-0 fs-6 text-white fw-bold text-uppercase ls-1">
                            <a href="plant_detail.php?id=<?php echo $plant['id']; ?>" class="text-white text-decoration-none">
                                <?php echo htmlspecialchars($plant['container_name']); ?> 
                                <span class="text-white-50 fw-normal mx-1">|</span> 
                                <?php echo htmlspecialchars($plant['strain_name']); ?>
                            </a>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row sensor-chart-group" data-plant-id="<?php echo $plant['id']; ?>">
                            <div class="col-md-6 mb-3 mb-md-0" id="temp-chart-wrapper-<?php echo $plant['id']; ?>">
                                <div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm" role="status"></div></div>
                            </div>
                            <div class="col-md-6" id="humidity-chart-wrapper-<?php echo $plant['id']; ?>">
                                <div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm" role="status"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

<?php require_once 'includes/footer.php'; ?>

<script>
$(document).ready(function() {
    // Store chart instances to destroy them before re-creating
    const charts = {};

    function loadAllCharts(range) {
        $('.sensor-chart-group').each(function() {
            const plantId = $(this).data('plant-id');
            const tempWrapper = $(this).find('#temp-chart-wrapper-' + plantId);
            const humidityWrapper = $(this).find('#humidity-chart-wrapper-' + plantId);

            // Show spinners only if empty (optional UX choice, here we force reload)
            // tempWrapper.html('<div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm"></div></div>');
            // humidityWrapper.html('<div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm"></div></div>');

            $.ajax({
                type: 'GET',
                url: 'ajax_handler.php',
                data: { action: 'get_sensor_data', plant_id: plantId, range: range },
                dataType: 'json',
                success: function(response) {
                    tempWrapper.empty();
                    humidityWrapper.empty();

                    if (response.success && response.data.labels.length > 0) {
                        // Temp Chart
                        if (response.data.temperature.some(v => v !== null)) {
                            tempWrapper.append('<h6 class="text-center fw-bold text-dark mb-2">Temperatur</h6>');
                            let canvasId = 'temp-canvas-' + plantId;
                            tempWrapper.append($('<div style="height: 180px;">').append($('<canvas id="' + canvasId + '">')));
                            
                            if(charts[canvasId]) charts[canvasId].destroy();
                            charts[canvasId] = new Chart(document.getElementById(canvasId), {
                                type: 'line',
                                data: { labels: response.data.labels, datasets: [{ label: '°C', data: response.data.temperature, borderColor: '#ff6b6b', backgroundColor: 'rgba(255, 107, 107, 0.1)', fill: true, tension: 0.3, pointRadius: 3, pointHoverRadius: 5 }] },
                                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { ticks: { color: '#212529', font: { size: 12 } }, grid: { color: 'rgba(0,0,0,0.05)' } } } }
                            });
                        } else {
                            tempWrapper.html('<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Keine Temperaturdaten</div>');
                        }

                        // Humidity Chart
                        if (response.data.humidity.some(v => v !== null)) {
                            humidityWrapper.append('<h6 class="text-center fw-bold text-dark mb-2">Feuchtigkeit</h6>');
                            let canvasId = 'humidity-canvas-' + plantId;
                            humidityWrapper.append($('<div style="height: 180px;">').append($('<canvas id="' + canvasId + '">')));
                            
                            if(charts[canvasId]) charts[canvasId].destroy();
                            charts[canvasId] = new Chart(document.getElementById(canvasId), {
                                type: 'line',
                                data: { labels: response.data.labels, datasets: [{ label: '%', data: response.data.humidity, borderColor: '#4dabf7', backgroundColor: 'rgba(77, 171, 247, 0.1)', fill: true, tension: 0.3, pointRadius: 3, pointHoverRadius: 5 }] },
                                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { ticks: { color: '#212529', font: { size: 12 } }, grid: { color: 'rgba(0,0,0,0.05)' } } } }
                            });
                        } else {
                            humidityWrapper.html('<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Keine Feuchtigkeitsdaten</div>');
                        }
                    } else {
                        const noDataHtml = '<div class="col-12 text-center py-4 text-muted small">Keine Sensordaten für diesen Zeitraum.</div>';
                        tempWrapper.parent().html(noDataHtml);
                    }
                },
                error: function() {
                    const errorHtml = '<div class="col-12 text-center py-4 text-danger small">Fehler beim Laden.</div>';
                    tempWrapper.parent().html(errorHtml);
                }
            });
        });
    }

    // Initial load
    loadAllCharts('24h');

    // Filter click handler
    $('.sensor-range-btn').click(function() {
        $('.sensor-range-btn').removeClass('active');
        $(this).addClass('active');
        loadAllCharts($(this).data('range'));
    });
});
</script>