<?php
date_default_timezone_set("America/La_Paz");

// Configuración de la base de datos
$host = "192.168.0.13";
$dbname = "forza_mqtt2";
$user = "bot";
$password = "Vanaeph.2022";

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Error al conectar a la base de datos: " . $e->getMessage());
}

// Obtener los últimos datos
$stmt = $pdo->query("SELECT * FROM ups_data ORDER BY created_at DESC LIMIT 1");
$latest_data = $stmt->fetch(PDO::FETCH_ASSOC);

// Obtener datos históricos para gráficos (últimas 24 horas)
$stmt = $pdo->query("SELECT input_voltage, out_voltage, battery_voltage, created_at FROM ups_data WHERE created_at >= DATE_SUB(NOW(), INTERVAL 24 HOUR) ORDER BY created_at ASC");
$historical_data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Preparar datos para gráficos
$labels = [];
$input_voltage_data = [];
$output_voltage_data = [];
$battery_voltage_data = [];

foreach ($historical_data as $row) {
    $labels[] = date('H:i', strtotime($row['created_at']));
    $input_voltage_data[] = $row['input_voltage'];
    $output_voltage_data[] = $row['out_voltage'];
    $battery_voltage_data[] = $row['battery_voltage'];
}

// Verificar si hay datos SNMP disponibles
$has_data = !empty($latest_data);
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard UPS - Monitoreo SNMP</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .card {
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .card-header {
            font-weight: bold;
            background-color: #f8f9fa;
        }
        .value-display {
            font-size: 24px;
            font-weight: bold;
        }
        .unit {
            font-size: 14px;
            color: #6c757d;
        }
        .status-good {
            color: #28a745;
        }
        .status-warning {
            color: #ffc107;
        }
        .status-danger {
            color: #dc3545;
        }
        .last-update {
            font-size: 12px;
            color: #6c757d;
            text-align: right;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">Dashboard UPS - Monitoreo SNMP</h1>
        
        <?php if (!$has_data): ?>
        <div class="alert alert-warning">
            No hay datos SNMP disponibles. Verifique la conexión con el router.
        </div>
        <?php else: ?>
        
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">Voltaje de Entrada</div>
                    <div class="card-body">
                        <div class="value-display <?php echo ($latest_data['input_voltage'] < 200 || $latest_data['input_voltage'] > 240) ? 'status-warning' : 'status-good'; ?>">
                            <?php echo $latest_data['input_voltage']; ?> <span class="unit">V</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">Voltaje de Salida</div>
                    <div class="card-body">
                        <div class="value-display <?php echo ($latest_data['out_voltage'] < 200 || $latest_data['out_voltage'] > 240) ? 'status-warning' : 'status-good'; ?>">
                            <?php echo $latest_data['out_voltage']; ?> <span class="unit">V</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">Voltaje de Batería</div>
                    <div class="card-body">
                        <div class="value-display <?php echo ($latest_data['battery_voltage'] < 10) ? 'status-danger' : 'status-good'; ?>">
                            <?php echo $latest_data['battery_voltage']; ?> <span class="unit">V</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Temperatura de Batería</div>
                    <div class="card-body">
                        <div class="value-display <?php echo ($latest_data['battery_temperature'] > 40) ? 'status-warning' : 'status-good'; ?>">
                            <?php echo $latest_data['battery_temperature']; ?> <span class="unit">°C</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Carga de Salida</div>
                    <div class="card-body">
                        <div class="value-display <?php echo ($latest_data['out_percent_load'] > 80) ? 'status-warning' : 'status-good'; ?>">
                            <?php echo $latest_data['out_percent_load']; ?> <span class="unit">%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">Gráfico de Voltajes (Últimas 24 horas)</div>
                    <div class="card-body">
                        <canvas id="voltageChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="last-update">
            Última actualización: <?php echo date('d/m/Y H:i:s', strtotime($latest_data['created_at'])); ?>
        </div>
        
        <script>
            // Configuración del gráfico
            const ctx = document.getElementById('voltageChart').getContext('2d');
            const voltageChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: <?php echo json_encode($labels); ?>,
                    datasets: [
                        {
                            label: 'Voltaje de Entrada',
                            data: <?php echo json_encode($input_voltage_data); ?>,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            tension: 0.1
                        },
                        {
                            label: 'Voltaje de Salida',
                            data: <?php echo json_encode($output_voltage_data); ?>,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            tension: 0.1
                        },
                        {
                            label: 'Voltaje de Batería',
                            data: <?php echo json_encode($battery_voltage_data); ?>,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            tension: 0.1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
        </script>
        <?php endif; ?>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>