<?php
require_once 'auth.php';
checkLogin();
/**
 * Página para ver historial filtrado por cambios significativos
 */
ini_set('memory_limit', '256M'); // Aumentar límite de memoria para el procesamiento de grandes volúmenes
require_once 'config.php';
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// 0. Determinar buque por defecto
$pdo = getDBConnection();
$assigned_ships = $_SESSION['assigned_ships'] ?? [];

// Si no hay buque en GET, buscar el primero asignado
$buque_filtro = $_GET['buque_id'] ?? null;
if (!$buque_filtro && !empty($assigned_ships)) {
    $buque_filtro = $assigned_ships[0];
}

// Validación de seguridad: el usuario debe tener acceso al buque solicitado
if ($buque_filtro && !hasShipAccess($buque_filtro)) {
    die("Error: No tiene permisos para ver este buque o el buque no existe.");
}

// 1. Obtener lista de buques para el selector (Solo los que tiene asignados)
$buques_disponibles = [];
if ($_SESSION['role'] === ROLE_SUPER_ADMIN) {
    if ($pdo) {
        try {
            $stmtB = $pdo->query("SELECT DISTINCT ship_id FROM ships ORDER BY ship_id ASC");
            $buques_disponibles = $stmtB->fetchAll(PDO::FETCH_COLUMN);
        } catch (PDOException $e) {
        }
    }
} else {
    $buques_disponibles = $assigned_ships;
}

// 1.5. Obtener Sensores Activos para el buque seleccionado
$active_sensors_list = [];
if ($pdo && $buque_filtro) {
    try {
        $stmtL = $pdo->prepare("SELECT sensor_id, label FROM sensor_positions WHERE buque_id = :buque ORDER BY sensor_id ASC");
        $stmtL->execute([':buque' => $buque_filtro]);
        $active_sensors_list = $stmtL->fetchAll(PDO::FETCH_ASSOC);

        foreach ($active_sensors_list as $row) {
            $sensor_labels[(int) $row['sensor_id']] = !empty($row['label']) ? $row['label'] : "SENSOR #" . $row['sensor_id'];
        }
    } catch (PDOException $e) {
    }
}

// Si no hay sensores configurados, mostrar los 16 por defecto (legacy)
if (empty($active_sensors_list)) {
    for ($i = 1; $i <= 16; $i++) {
        $active_sensors_list[] = ['sensor_id' => $i, 'label' => "SENSOR #$i"];
    }
}


// 2. Obtener todas las mediciones para el buque seleccionado (filtrado por fecha si existe)
$todas_las_mediciones = [];
$fecha_inicio = $_GET['fecha_inicio'] ?? '';
$fecha_fin = $_GET['fecha_fin'] ?? '';
$sensor_filtro = $_GET['sensor_id'] ?? 'all';

if ($pdo) {
    try {
        $sql = "SELECT id, buque_id, temp1, temp2, temp3, temp4, temp5, temp6, temp7, temp8, temp9, temp10, temp11, temp12, temp13, temp14, temp15, temp16, fecha 
                FROM mediciones 
                WHERE buque_id = :buque";

        $params = [':buque' => $buque_filtro];

        if ($fecha_inicio) {
            $sql .= " AND fecha >= :start";
            $params[':start'] = "$fecha_inicio 00:00:00";
        }
        if ($fecha_fin) {
            $sql .= " AND fecha <= :end";
            $params[':end'] = "$fecha_fin 23:59:59";
        }

        if (!$fecha_inicio && !$fecha_fin) {
            $sql .= " AND fecha >= DATE_SUB(NOW(), INTERVAL 30 DAY)"; // Por defecto solo últimos 30 días si no hay filtro
        }

        $sql .= " ORDER BY fecha ASC"; 

        $stmt = $pdo->prepare($sql);
        $stmt->execute($params);
        
        // --- PROCESAMIENTO OPTIMIZADO: Fila por fila para ahorrar memoria ---
        $filtered_events = []; 
        $last_temps = null;
        $last_displayed_event = null; 
        $threshold = 2.0;

        // Obtener umbrales dinámicos (Globales como fallback)
        $stmtConfig = $pdo->prepare("SELECT max_temp, min_temp FROM ships WHERE ship_id = :buque");
        $stmtConfig->execute([':buque' => $buque_filtro]);
        $config = $stmtConfig->fetch(PDO::FETCH_ASSOC);
        $global_alert_temp = $config ? (float) $config['max_temp'] : 25.0;
        $global_min_temp_limit = $config ? (float) $config['min_temp'] : 0.0;

        // Obtener umbrales por SENSOR (Granularidad)
        $stmtSensorConfig = $pdo->prepare("SELECT sensor_id, max_temp, min_temp FROM sensor_temperature_config WHERE buque_id = :buque");
        $stmtSensorConfig->execute([':buque' => $buque_filtro]);
        $sensor_configs = [];
        while ($sc = $stmtSensorConfig->fetch(PDO::FETCH_ASSOC)) {
            $sensor_configs[(int)$sc['sensor_id']] = [
                'max' => (float)$sc['max_temp'],
                'min' => (float)$sc['min_temp']
            ];
        }

        while ($m = $stmt->fetch(PDO::FETCH_ASSOC)) {
            $current_temps = [];
            $has_big_change = false;
            $has_alert = false;
            $deltas = [];

            foreach ($active_sensors_list as $sensor) {
                $i = (int) $sensor['sensor_id'];
                if ($sensor_filtro !== 'all' && (int) $sensor_filtro !== $i) {
                    $current_temps[$i] = (float) ($m["temp$i"] ?? 0);
                    $deltas[$i] = 0;
                    continue;
                }
                $val = (float) ($m["temp$i"] ?? 0);
                $current_temps[$i] = $val;

                // Umbrales específicos o globales
                $sMax = isset($sensor_configs[$i]) ? $sensor_configs[$i]['max'] : $global_alert_temp;
                $sMin = isset($sensor_configs[$i]) ? $sensor_configs[$i]['min'] : $global_min_temp_limit;

                if ($val >= $sMax || $val < $sMin) $has_alert = true;

                if ($last_temps !== null && isset($last_temps[$i])) {
                    $diff = abs($val - $last_temps[$i]);
                    $deltas[$i] = $val - $last_temps[$i];
                    if ($diff >= $threshold) $has_big_change = true;
                } else {
                    $has_big_change = true;
                    $deltas[$i] = 0;
                }
            }

            if ($has_big_change || $has_alert) {
                $shouldShowEvent = false;
                if ($has_big_change) {
                    $shouldShowEvent = true;
                } else if ($last_displayed_event === null) {
                    $shouldShowEvent = true;
                } else {
                    $timeSinceLastDisplay = strtotime($m['fecha']) - strtotime($last_displayed_event['fecha']);
                    $anySignificantAlertChange = false;
                    for ($idx = 1; $idx <= 16; $idx++) {
                        if (!isset($m["temp$idx"]) || !isset($last_displayed_event["temp$idx"])) continue;
                        $val = (float) $m["temp$idx"];
                        $oldVal = (float) $last_displayed_event["temp$idx"];
                        
                        $sMax = isset($sensor_configs[$idx]) ? $sensor_configs[$idx]['max'] : $global_alert_temp;
                        $sMin = isset($sensor_configs[$idx]) ? $sensor_configs[$idx]['min'] : $global_min_temp_limit;

                        if (($val >= $sMax || $val < $sMin) && abs($val - $oldVal) >= 0.5) {
                            $anySignificantAlertChange = true;
                            break;
                        }
                    }
                    if ($timeSinceLastDisplay >= 900 || $anySignificantAlertChange) $shouldShowEvent = true;
                }

                if ($shouldShowEvent) {
                    $m['deltas'] = $deltas;
                    $m['has_alert'] = $has_alert;
                    $filtered_events[] = $m;
                    $last_displayed_event = $m;
                }
                $last_temps = $current_temps;
            }
        }
    } catch (PDOException $e) {
    }
}

// Eliminamos el bloque foreach anterior que usaba $todas_las_mediciones
// y saltamos directo a la paginación con $filtered_events ya poblado.


// 4. LÓGICA DE PAGINACIÓN SOBRE RESULTADOS FILTRADOS
$items_per_page = 100;
$total_events = count($filtered_events);
$total_pages = ceil($total_events / $items_per_page);
$current_page = isset($_GET['page']) ? (int) $_GET['page'] : 1;
if ($current_page < 1)
    $current_page = 1;
if ($current_page > $total_pages && $total_pages > 0)
    $current_page = $total_pages;

// Invertir para mostrar lo más reciente primero antes de paginar
$filtered_events = array_reverse($filtered_events);

// Slice del array para la página actual
$offset = ($current_page - 1) * $items_per_page;
$mediciones_filtradas = array_slice($filtered_events, $offset, $items_per_page);

?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HISTORIAL DE TELEMETRÍA - PNA</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-dark: #050a10;
            --navy-dark: #0a192f;
            --cyan-glow: #00f2ff;
            --red-alert: #ff4d4d;
            --text-main: #e6f1ff;
            --text-secondary: #8892b0;
            --glass-bg: rgba(10, 25, 47, 0.7);
            --glass-border: rgba(0, 242, 255, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg-dark);
            background-image:
                radial-gradient(circle at 20% 30%, rgba(0, 242, 255, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(255, 77, 77, 0.03) 0%, transparent 40%);
            color: var(--text-main);
            min-height: 100vh;
            padding: 20px;
            line-height: 1.6;
        }

        .container {
            max-width: 98%;
            margin: 0 auto;
        }

        /* HEADER */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--glass-border);
        }

        .title-group h1 {
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: 2px;
            color: var(--cyan-glow);
            text-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
        }

        .title-group p {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .btn-back {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--cyan-glow);
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-back:hover {
            background: var(--cyan-glow);
            color: var(--bg-dark);
            box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
        }

        /* FILTROS */
        .controls {
            background: var(--glass-bg);
            padding: 15px 25px;
            border-radius: 12px;
            border: 1px solid var(--glass-border);
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .select-buque {
            background: var(--bg-dark);
            border: 1px solid var(--glass-border);
            color: var(--text-main);
            padding: 10px 15px;
            border-radius: 6px;
            font-family: inherit;
            font-weight: 600;
            cursor: pointer;
        }

        .info-pill {
            background: rgba(0, 242, 255, 0.1);
            color: var(--cyan-glow);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            border: 1px solid var(--glass-border);
        }

        /* TABLA */
        .table-wrap {
            background: var(--glass-bg);
            border-radius: 15px;
            border: 1px solid var(--glass-border);
            overflow-x: auto;
            /* Allow scrolling on desktop too */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
        }

        thead {
            background: rgba(0, 242, 255, 0.1);
            border-bottom: 2px solid var(--glass-border);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        th {
            padding: 8px 5px;
            /* Compact padding */
            text-align: left;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 1px;
            color: var(--text-secondary);
            vertical-align: top;
        }

        /* New styles for sensor headers */
        .th-sensor-id {
            color: var(--cyan-glow);
            display: block;
            margin-bottom: 4px;
            font-size: 0.7rem;
            opacity: 0.8;
        }

        .th-sensor-name {
            color: #fff;
            font-weight: 800;
            font-size: 0.85rem;
            display: block;
            /* Auto width */
            white-space: nowrap;
        }

        td {
            padding: 8px 5px;
            /* Compact padding */
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            vertical-align: middle;
        }

        tr:hover {
            background: rgba(255, 255, 255, 0.02);
        }

        .time-cell {
            font-family: monospace;
            color: var(--text-secondary);
            font-size: 0.85rem;
            white-space: nowrap;
        }

        .temp-val {
            font-weight: 600;
            display: flex;
            flex-direction: column;
            border-radius: 6px;
            padding: 5px;
            transition: all 0.3s;
        }

        .delta {
            font-size: 0.7rem;
            font-weight: 800;
            margin-top: 2px;
        }

        .delta-up {
            color: var(--red-alert);
        }

        .delta-down {
            color: #4db8ff;
        }

        .alert-row {
            background: rgba(255, 77, 77, 0.05) !important;
        }

        .alert-row td:first-child {
            border-left: 4px solid var(--red-alert);
        }

        /* Improved High Temp Highlighting */
        .high-temp {
            color: #fff;
            background: rgba(255, 77, 77, 0.2);
            border: 1px solid var(--red-alert);
            box-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            font-weight: 800;
            text-align: center;
        }

        .high-temp .delta-up {
            color: #fff;
            /* Make delta white inside red box for contrast */
        }

        .high-temp .delta-down {
            color: #fff;
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .header {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }

            /* Scroll horizontal para la tabla en móviles en vez de ocultar columnas */
            .table-wrap {
                overflow-x: auto;
            }

            table {
                min-width: 800px;
                /* Forzar scroll */
            }

            .controls {
                flex-direction: column;
                align-items: stretch;
            }
        }

        /* Modal Purga */
        .modal-purge {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            align-items: center;
            justify-content: center;
        }

        .modal-purge-content {
            background: #112240;
            border: 2px solid var(--red-alert);
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 0 30px rgba(255, 77, 77, 0.3);
            text-align: center;
        }

        .modal-purge-content h3 {
            color: var(--red-alert);
            margin-top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .modal-purge-content input {
            width: 100%;
            padding: 12px;
            margin: 20px 0;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 8px;
            text-align: center;
            font-size: 1.1rem;
        }

        .btn-danger {
            background: var(--red-alert);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: 800;
            cursor: pointer;
            width: 100%;
            transition: 0.3s;
        }

        .btn-danger:hover {
            filter: brightness(1.2);
            box-shadow: 0 0 15px var(--red-alert);
        }

        .btn-cancel {
            background: transparent;
            color: #aaa;
            border: 1px solid #444;
            padding: 10px;
            margin-top: 15px;
            cursor: pointer;
            width: 100%;
            border-radius: 8px;
        }

        /* PAGINACIÓN */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            margin-top: 30px;
            padding-bottom: 40px;
        }

        .page-link {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-secondary);
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .page-link:hover:not(.disabled) {
            background: rgba(0, 242, 255, 0.1);
            border-color: var(--cyan-glow);
            color: var(--cyan-glow);
        }

        .page-link.active {
            background: var(--cyan-glow);
            color: var(--bg-dark);
            border-color: var(--cyan-glow);
            box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
        }

        .page-link.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }

        .page-status {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin: 0 15px;
        }
    </style>
</head>

<body>

    <div class="container layout-wrapper">
        <div class="content-area" style="display: block; padding: 0;">
            <header class="header">
                <div class="title-group">
                    <h1>HISTORIAL CRÍTICO</h1>
                    <p>Registros con cambios > <?php echo $threshold; ?>°C o Alarmas activas según configuración por sensor</p>
                    <p style="font-size: 0.8rem; color: #666; margin-top: 5px;">* Datos retenidos solo por el mes en
                        curso</p>
                </div>
                <div class="actions-header" style="display: flex; gap: 10px;">
                    <?php if (($_SESSION['role'] ?? '') === 'admin'): ?>
                        <button onclick="openPurgeModal()" class="btn-back"
                            style="background: var(--red-alert); border-color: var(--red-alert); color: white;">
                            ⚠️ ELIMINAR
                        </button>
                    <?php endif; ?>
                    <a href="dashboard.php" class="btn-back">
                        <span>←</span> VOLVER AL DASHBOARD
                    </a>
                </div>
            </header>

            <section class="controls">
                <form action="" method="GET" style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
                    <select name="buque_id" class="select-buque" onchange="this.form.submit()">
                        <?php foreach ($buques_disponibles as $b): ?>
                            <option value="<?php echo htmlspecialchars($b); ?>" <?php echo $buque_filtro === $b ? 'selected' : ''; ?>>
                                <?php echo htmlspecialchars($b); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>

                    <input type="date" name="fecha_inicio" value="<?php echo htmlspecialchars($fecha_inicio); ?>"
                        class="select-buque" title="Fecha Inicio">
                    <input type="date" name="fecha_fin" value="<?php echo htmlspecialchars($fecha_fin); ?>"
                        max="<?php echo date('Y-m-d'); ?>" class="select-buque" title="Fecha Fin">

                    <select name="sensor_id" class="select-buque">
                        <option value="all">TODOS LOS SENSORES</option>
                        <?php foreach ($sensor_labels as $id => $label): ?>
                            <option value="<?php echo $id; ?>" <?php echo $sensor_filtro == $id ? 'selected' : ''; ?>>
                                <?php echo htmlspecialchars($label); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>

                    <button type="submit" class="info-pill"
                        style="cursor:pointer; background:var(--cyan-glow); color:#000; border:none;">FILTRAR</button>

                    <a href="api/export_history.php?buque_id=<?php echo urlencode($buque_filtro); ?>&fecha_inicio=<?php echo urlencode($fecha_inicio); ?>&fecha_fin=<?php echo urlencode($fecha_fin); ?>&sensor_id=<?php echo urlencode($sensor_filtro); ?>"
                        target="_blank" class="info-pill"
                        style="text-decoration:none; background:var(--green-safe); color:#fff; border:1px solid var(--green-safe); display: flex; align-items: center; gap: 8px; font-weight: bold; padding: 8px 16px;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="7 10 12 15 17 10"></polyline>
                            <line x1="12" y1="15" x2="12" y2="3"></line>
                        </svg>
                        EXPORTAR EXCEL
                    </a>
                </form>
                <div class="info-pill">
                    MOSTRANDO <?php echo count($mediciones_filtradas); ?> EVENTOS
                </div>
            </section>

            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th width="100">FECHA Y HORA</th>
                            <?php foreach ($active_sensors_list as $sensor):
                                $i = $sensor['sensor_id'];
                                ?>
                                <th>
                                    <span class="th-sensor-id">SENSOR <?php echo $i; ?></span>
                                    <span
                                        class="th-sensor-name"><?php echo htmlspecialchars($sensor_labels[$i] ?? "SENSOR #$i"); ?></span>
                                </th>
                            <?php endforeach; ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($mediciones_filtradas)): ?>
                            <tr>
                                <td colspan="15" style="text-align: center; padding: 50px; color: var(--text-secondary);">
                                    No se detectaron cambios bruscos ni alertas en los últimos registros recientes.
                                </td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($mediciones_filtradas as $m): ?>
                                <tr class="<?php echo $m['has_alert'] ? 'alert-row' : ''; ?>">
                                    <td class="time-cell">
                                        <div style="color: var(--text-main); font-weight: 600; margin-bottom: 2px;">
                                            <?php echo date('H:i:s', strtotime($m['fecha'])); ?>
                                        </div>
                                        <div><?php echo date('d/m/Y', strtotime($m['fecha'])); ?></div>
                                    </td>
                                    <?php foreach ($active_sensors_list as $sensor):
                                        $i = $sensor['sensor_id'];
                                        $v = (!isset($m["temp$i"]) || $m["temp$i"] === null || $m["temp$i"] === '') ? null : (float) $m["temp$i"];
                                        $d = $m['deltas'][$i] ?? 0;
                                        
                                        $sMax = isset($sensor_configs[$i]) ? $sensor_configs[$i]['max'] : $global_alert_temp;
                                        $sMin = isset($sensor_configs[$i]) ? $sensor_configs[$i]['min'] : $global_min_temp_limit;
                                        
                                        $class = ($v !== null && ($v >= $sMax || $v < $sMin)) ? 'high-temp' : '';
                                        ?>
                                        <td>
                                            <div class="temp-val <?php echo $class; ?>">
                                                <span><?php echo $v !== null ? number_format($v, 1) . '°C' : '--'; ?></span>
                                                <?php if (abs($d) >= $threshold): ?>
                                                    <span class="delta <?php echo $d > 0 ? 'delta-up' : 'delta-down'; ?>">
                                                        <?php echo ($d > 0 ? '▲ +' : '▼ ') . number_format($d, 1); ?>
                                                    </span>
                                                <?php endif; ?>
                                            </div>
                                        </td>
                                    <?php endforeach; ?>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>

            <!-- PAGINACIÓN UI -->
            <?php if ($total_pages > 1): ?>
                <div class="pagination">
                    <a href="?page=1&buque_id=<?php echo urlencode($buque_filtro); ?>&fecha_inicio=<?php echo urlencode($fecha_inicio); ?>&fecha_fin=<?php echo urlencode($fecha_fin); ?>&sensor_id=<?php echo urlencode($sensor_filtro); ?>"
                        class="page-link <?php echo $current_page == 1 ? 'disabled' : ''; ?>" title="Primera página">««</a>

                    <a href="?page=<?php echo $current_page - 1; ?>&buque_id=<?php echo urlencode($buque_filtro); ?>&fecha_inicio=<?php echo urlencode($fecha_inicio); ?>&fecha_fin=<?php echo urlencode($fecha_fin); ?>&sensor_id=<?php echo urlencode($sensor_filtro); ?>"
                        class="page-link <?php echo $current_page == 1 ? 'disabled' : ''; ?>">Anterior</a>

                    <div class="page-status">
                        Página <b><?php echo $current_page; ?></b> de <?php echo $total_pages; ?>
                        (<?php echo $total_events; ?> eventos)
                    </div>

                    <a href="?page=<?php echo $current_page + 1; ?>&buque_id=<?php echo urlencode($buque_filtro); ?>&fecha_inicio=<?php echo urlencode($fecha_inicio); ?>&fecha_fin=<?php echo urlencode($fecha_fin); ?>&sensor_id=<?php echo urlencode($sensor_filtro); ?>"
                        class="page-link <?php echo $current_page >= $total_pages ? 'disabled' : ''; ?>">Siguiente</a>

                    <a href="?page=<?php echo $total_pages; ?>&buque_id=<?php echo urlencode($buque_filtro); ?>&fecha_inicio=<?php echo urlencode($fecha_inicio); ?>&fecha_fin=<?php echo urlencode($fecha_fin); ?>&sensor_id=<?php echo urlencode($sensor_filtro); ?>"
                        class="page-link <?php echo $current_page >= $total_pages ? 'disabled' : ''; ?>"
                        title="Última página">»»</a>
                </div>
            <?php endif; ?>
        </div>
    </div>


    <!-- MODAL DE PURGA -->
    <div id="purgeModal" class="modal-purge">
        <div class="modal-purge-content">
            <h3>⚠️ ADVERTENCIA</h3>
            <p>¿Estás seguro de que deseas eliminar permanentemente <b>TODOS</b> los registros de la base de datos?</p>
            <p style="font-size: 0.8rem; color: #888;">Esta acción no se puede deshacer.</p>

            <input type="password" id="purgePassword" placeholder="Ingrese Contraseña Admin">

            <button class="btn-danger" id="btnConfirmPurge" onclick="confirmPurge()">
                SÍ, ELIMINAR TODO
            </button>

            <button class="btn-cancel" onclick="closePurgeModal()">Cancelar</button>
            <div id="purgeError" style="color: var(--red-alert); margin-top: 15px; display: none; font-size: 0.9rem;">
            </div>
        </div>
    </div>

    <script>
        function openPurgeModal() {
            document.getElementById('purgeModal').style.display = 'flex';
            document.getElementById('purgePassword').value = '';
            document.getElementById('purgeError').style.display = 'none';
        }

        function closePurgeModal() {
            document.getElementById('purgeModal').style.display = 'none';
        }

        async function confirmPurge() {
            const password = document.getElementById('purgePassword').value;
            const btn = document.getElementById('btnConfirmPurge');
            const errorEl = document.getElementById('purgeError');

            if (!password) {
                errorEl.textContent = "Debe ingresar la contraseña";
                errorEl.style.display = 'block';
                return;
            }

            if (!confirm("⚠️ ¡ATENCIÓN! ESTÁS A PUNTO DE BORRAR TODA LA BASE DE DATOS. ¿CONTINUAR?")) {
                return;
            }

            try {
                btn.disabled = true;
                btn.textContent = "PROCESANDO...";
                errorEl.style.display = 'none';

                const response = await fetch('api/purge_data.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ password })
                });

                const result = await response.json();

                if (result.success) {
                    alert('✅ Base de datos purgada exitosamente.');
                    location.reload();
                } else {
                    errorEl.textContent = result.message || 'Error al purgar';
                    errorEl.style.display = 'block';
                    btn.disabled = false;
                    btn.textContent = "SÍ, ELIMINAR TODO";
                }
            } catch (error) {
                console.error(error);
                errorEl.textContent = "Error de conexión con el servidor";
                errorEl.style.display = 'block';
                btn.disabled = false;
                btn.textContent = "SÍ, ELIMINAR TODO";
            }
        }

        // Scroll detection for Back to Top button
        window.addEventListener('scroll', () => {
            const btn = document.getElementById('backToTop');
            if (window.scrollY > 300) {
                btn.classList.add('visible');
            } else {
                btn.classList.remove('visible');
            }
        });

        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    </script>
    <button id="backToTop" class="back-to-top" onclick="scrollToTop()" title="Volver arriba">↑</button>
</body>

</html>