<?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 glass-effect mb-4">
    <div class="card-body">
        <h1 class="mb-0">Sensor-Übersicht</h1>
        <p class="card-text text-white-50 mt-2">Live-Daten aller deiner aktiven Pflanzen.</p>
    </div>
</div>

<div class="row">
    <?php if (empty($plants_with_sensors)): ?>
        <div class="col-12">
            <div class="cazubu-table-frameless glass-effect p-4 text-center">
                <h5 class="text-white">Keine Sensordaten verfügbar</h5>
                <p class="text-white-50">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="cazubu-table-frameless glass-effect">
                    <table class="table mb-0">
                        <thead class="table-dark">
                            <tr><th><a href="plant_detail.php?id=<?php echo $plant['id']; ?>" class="text-white text-decoration-none h5 mb-0"><?php echo htmlspecialchars($plant['container_name']) . ' (' . htmlspecialchars($plant['zone_name']) . ') - ' . htmlspecialchars($plant['strain_name']) . ' (' . htmlspecialchars($plant['internal_name']) . ')'; ?></a></th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="p-3">
                                    <div class="row sensor-chart-group" data-plant-id="<?php echo $plant['id']; ?>">
                                        <div class="col-md-6" id="temp-chart-wrapper-<?php echo $plant['id']; ?>">
                                            <div class="text-center p-4"><div class="spinner-border text-light 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-light spinner-border-sm" role="status"></div></div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

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

<style>
.chart-wrapper {
    position: relative;
    height: 200px; /* Höhe weiter reduziert für kompaktere Darstellung */
    width: 100%;
    background-color: rgba(255,255,255,0.7);
    border-radius: 0.5rem;
    padding: 0.5rem;
}
</style>

<script>
$(document).ready(function() {
    $('.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);

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

                if (response.success && response.data.labels.length > 0) {
                    // Temperatur-Chart
                    if (response.data.temperature.some(v => v !== null)) {
                        tempWrapper.append('<h6 class="text-dark text-center small">Temperatur</h6>');
                        let tempCanvas = $('<canvas>');
                        tempWrapper.append($('<div>').addClass('chart-wrapper').append(tempCanvas));
                        new Chart(tempCanvas, { type: 'line', data: { labels: response.data.labels, datasets: [{ label: '°C', data: response.data.temperature, borderColor: 'rgba(255, 99, 132, 1)', tension: 0.2, spanGaps: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { ticks: { color: '#212529', display: false } }, y: { ticks: { color: '#212529' } } } } });
                    } else {
                        tempWrapper.html('<div class="chart-wrapper d-flex align-items-center justify-content-center"><p class="text-muted mb-0">Keine Temperaturdaten.</p></div>');
                    }
                    // Feuchtigkeits-Chart
                    if (response.data.humidity.some(v => v !== null)) {
                        humidityWrapper.append('<h6 class="text-dark text-center small">Feuchtigkeit</h6>');
                        let humidityCanvas = $('<canvas>');
                        humidityWrapper.append($('<div>').addClass('chart-wrapper').append(humidityCanvas));
                        new Chart(humidityCanvas, { type: 'line', data: { labels: response.data.labels, datasets: [{ label: '%', data: response.data.humidity, borderColor: 'rgba(54, 162, 235, 1)', tension: 0.2, spanGaps: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { ticks: { color: '#212529', display: false } }, y: { ticks: { color: '#212529' } } } } });
                    } else {
                        humidityWrapper.html('<div class="chart-wrapper d-flex align-items-center justify-content-center"><p class="text-muted mb-0">Keine Feuchtigkeitsdaten.</p></div>');
                    }
                } else {
                    const noDataHtml = '<div class="col-12 text-center"><p class="text-white-50">Keine Sensordaten.</p></div>';
                    chartsContainer.html(noDataHtml);
                }
            },
            error: function() {
                const errorHtml = '<div class="col-12 text-center"><p class="text-danger">Fehler beim Laden.</p></div>';
                chartsContainer.html(errorHtml);
            }
        });
    });
});
</script>
