<?php
require_once __DIR__ . '/config.php';
$pdo = db();

/**
 * Devuelve el responsable según el día de la semana.
 * Lunes (1), martes (2), miércoles (3): Juan
 * Jueves (4), viernes (5): Gonza
 * Sábado (6), domingo (7): sin asignar (cadena vacía)
 */
function getResponsablePorDia($fecha)
{
    $dow = (int)date('N', strtotime($fecha)); // 1 (lun) - 7 (dom)
    if ($dow >= 1 && $dow <= 3) {
        return 'Juan';
    }
    if ($dow == 4 || $dow == 5) {
        return 'Gonza';
    }
    return '';
}

/**
 * Devuelve el nombre del día en español (Lunes, Martes, etc.).
 */
function getNombreDia($fecha)
{
    $dow = (int)date('N', strtotime($fecha)); // 1 (lun) - 7 (dom)
    switch ($dow) {
        case 1: return 'Lunes';
        case 2: return 'Martes';
        case 3: return 'Miércoles';
        case 4: return 'Jueves';
        case 5: return 'Viernes';
        case 6: return 'Sábado';
        case 7: return 'Domingo';
    }
    return '';
}

// ------------------------------
// Parámetros de filtro
// ------------------------------
$mode    = isset($_GET['mode']) ? $_GET['mode'] : 'day'; // 'day' o 'week'
$dateStr = isset($_GET['date']) ? $_GET['date'] : date('Y-m-d');

// Validar formato de fecha
if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $dateStr)) {
    $dateStr = date('Y-m-d');
}

$baseTs = strtotime($dateStr);

// Rango de fechas según modo
if ($mode === 'week') {
    // Lunes de esa semana
    $dow = date('N', $baseTs); // 1 (lun) - 7 (dom)
    $startTs = strtotime('-' . ($dow - 1) . ' days', $baseTs);
    $endTs   = strtotime('+6 days', $startTs);
} else {
    // Día simple
    $startTs = $baseTs;
    $endTs   = $baseTs;
}

$startDate = date('Y-m-d', $startTs);
$endDate   = date('Y-m-d', $endTs);

$startDateTime = $startDate . ' 00:00:00';
$endDateTime   = $endDate . ' 23:59:59';

// ------------------------------
// Datos por hora (0 a 23)
// ------------------------------
$horas = [];
for ($h = 0; $h <= 23; $h++) {
    $horas[] = $h;
}
$recibidosPorHora    = array_fill(0, count($horas), 0);
$enviadosPorHora     = array_fill(0, count($horas), 0);
$primerosPorHora     = array_fill(0, count($horas), 0); // primeros recibidos (amarillos) por hora
$totalPrimeros       = 0;

// Conteos por hora (todos los recibidos / enviados, 24 hs)
$sql = "
    SELECT direccion, HOUR(fecha) AS h, COUNT(*) AS cnt
    FROM charlas
    WHERE fecha BETWEEN :ini AND :fin
    GROUP BY direccion, HOUR(fecha)
";
$stmt = $pdo->prepare($sql);
$stmt->execute([
    ':ini' => $startDateTime,
    ':fin' => $endDateTime,
]);

$totalRecibidos = 0;
$totalEnviados  = 0;

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $h    = (int)$row['h'];
    $cnt  = (int)$row['cnt'];
    $dir  = $row['direccion'];

    $idx = array_search($h, $horas);
    if ($idx === false) {
        continue;
    }

    if ($dir === 'recibido') {
        $recibidosPorHora[$idx] += $cnt;
        $totalRecibidos += $cnt;
    } elseif ($dir === 'enviado') {
        $enviadosPorHora[$idx] += $cnt;
        $totalEnviados += $cnt;
    }
}

// ------------------------------
// Hits por minuto (00:00–23:59)
// ------------------------------
$hitsRecibidos       = [];
$hitsEnviados        = [];
$hitsRecibidosInicio = []; // subset en amarillo

// 24 horas * 60 = 1440 minutos
$totalMinutos = 24 * 60; // 0 a 1439

// Todos los mensajes del rango, para timeline
$sqlHits = "
    SELECT direccion,
           HOUR(fecha) AS hh,
           MINUTE(fecha) AS mm
    FROM charlas
    WHERE fecha BETWEEN :ini AND :fin
    ORDER BY fecha ASC
";
$stmtHits = $pdo->prepare($sqlHits);
$stmtHits->execute([
    ':ini' => $startDateTime,
    ':fin' => $endDateTime,
]);

while ($row = $stmtHits->fetch(PDO::FETCH_ASSOC)) {
    $hh  = (int)$row['hh'];
    $mm  = (int)$row['mm'];
    $dir = $row['direccion'];

    // Minuto desde las 00:00
    $minDesde0 = $hh * 60 + $mm; // 0..1439

    if ($minDesde0 < 0 || $minDesde0 >= $totalMinutos) {
        continue;
    }

    if ($dir === 'recibido') {
        $hitsRecibidos[] = $minDesde0;
    } elseif ($dir === 'enviado') {
        $hitsEnviados[] = $minDesde0;
    }
}

// ------------------------------
// Primer mensaje RECIBIDO de cada contacto (inicio de charla)
// Contamos por hora y preparamos amarillos para el canvas
// ------------------------------
$sqlInicios = "
    SELECT MIN(fecha) AS primera
    FROM charlas
    WHERE direccion = 'recibido'
    GROUP BY contacto_id
";
$stmtInicios = $pdo->query($sqlInicios);

while ($row = $stmtInicios->fetch(PDO::FETCH_ASSOC)) {
    $primera = $row['primera'];
    if (!$primera) continue;

    // Sólo si cae dentro del rango actual
    if ($primera < $startDateTime || $primera > $endDateTime) {
        continue;
    }

    $ts = strtotime($primera);
    $hh = (int)date('H', $ts);
    $mm = (int)date('i', $ts);

    if ($hh < 0 || $hh > 23) {
        continue;
    }

    // contar por hora
    $idxHora = array_search($hh, $horas);
    if ($idxHora !== false) {
        $primerosPorHora[$idxHora]++;
        $totalPrimeros++;
    }

    // para timeline amarilla
    $minDesde0 = $hh * 60 + $mm;
    if ($minDesde0 < 0 || $minDesde0 >= $totalMinutos) {
        continue;
    }
    $hitsRecibidosInicio[] = $minDesde0;
}

// ------------------------------
// Primer mensaje ENVIADO por día (últimos 30 días)
// ------------------------------
$sqlFirst = "
    SELECT DATE(fecha) AS dia, MIN(fecha) AS primera
    FROM charlas
    WHERE direccion = 'enviado'
      AND fecha >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
    GROUP BY DATE(fecha)
    ORDER BY dia DESC
";
$stmtFirst = $pdo->query($sqlFirst);
$primeros30 = $stmtFirst->fetchAll(PDO::FETCH_ASSOC);

// Texto de rango
if ($mode === 'week') {
    $rangoTexto = 'Semana del ' . date('d/m/Y', $startTs) . ' al ' . date('d/m/Y', $endTs);
} else {
    $rangoTexto = 'Día ' . date('d/m/Y', $baseTs);
}

// Fechas rápidas
$hoy      = date('Y-m-d');
$ayerTs   = strtotime('-1 day');
$ayer     = date('Y-m-d', $ayerTs);
$anteTs   = strtotime('-2 day');
$anteayer = date('Y-m-d', $anteTs);

// ------------------------------
// Horas efectivas trabajadas (según enviados del rango actual)
// Reglas:
// 1) primer mensaje enviado
// 2) ultimo mensaje enviado
// 3) total minutos de inicio a fin
// 4) minutos AFK (minutos dentro de la ventana sin ningún enviado)
// 5) trabajado = total - afk
// 6) mostrar total trabajado
// ------------------------------
function fmt_hhmm_from_minutes($mins) {
    $mins = (int)$mins;
    if ($mins < 0) $mins = 0;
    $h = (int)floor($mins / 60);
    $m = $mins % 60;
    return sprintf('%02d:%02d', $h, $m);
}

$sqlWork = "
    SELECT MIN(fecha) AS first_sent,
           MAX(fecha) AS last_sent
    FROM charlas
    WHERE direccion = 'enviado'
      AND fecha BETWEEN :ini AND :fin
";
$stmtWork = $pdo->prepare($sqlWork);
$stmtWork->execute([
    ':ini' => $startDateTime,
    ':fin' => $endDateTime,
]);
$rowWork = $stmtWork->fetch(PDO::FETCH_ASSOC);

$firstSent = ($rowWork && $rowWork['first_sent']) ? $rowWork['first_sent'] : null;
$lastSent  = ($rowWork && $rowWork['last_sent'])  ? $rowWork['last_sent']  : null;

$firstSentText = $firstSent ? date('H:i', strtotime($firstSent)) : '-';
$lastSentText  = $lastSent  ? date('H:i', strtotime($lastSent))  : '-';

$totalWindowMinutes = 0;  // (3)
$afkMinutes         = 0;  // (4)
$workedMinutes      = 0;  // (5)

if ($firstSent && $lastSent) {

    // Minuto desde 00:00 del día (bin 0..1439)
    $tFirst = strtotime($firstSent);
    $tLast  = strtotime($lastSent);

    $firstBin = ((int)date('H', $tFirst) * 60) + (int)date('i', $tFirst);
    $lastBin  = ((int)date('H', $tLast)  * 60) + (int)date('i', $tLast);

    if ($lastBin < $firstBin) {
        $tmp = $firstBin;
        $firstBin = $lastBin;
        $lastBin  = $tmp;
    }

    // (3) Total ventana (minutos, inclusivo)
    $totalWindowMinutes = ($lastBin - $firstBin) + 1;

    // Minutos activos: minutos únicos con al menos 1 enviado en la ventana
    $activeSet = [];
    if (!empty($hitsEnviados) && is_array($hitsEnviados)) {
        foreach ($hitsEnviados as $m) {
            $m = (int)$m;
            if ($m >= $firstBin && $m <= $lastBin) {
                $activeSet[$m] = 1;
            }
        }
    }
    $activeMinutes = count($activeSet);

    // (4) AFK = ventana - activos
    $afkMinutes = $totalWindowMinutes - $activeMinutes;
    if ($afkMinutes < 0) $afkMinutes = 0;

    // (5) Trabajado = ventana - AFK
    $workedMinutes = $totalWindowMinutes - $afkMinutes;
    if ($workedMinutes < 0) $workedMinutes = 0;
}

$totalWindowHHMM = fmt_hhmm_from_minutes($totalWindowMinutes);
$afkHHMM         = fmt_hhmm_from_minutes($afkMinutes);
$workedHHMM      = fmt_hhmm_from_minutes($workedMinutes);
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Estadísticas WhatsApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

    <style>
        body {
            background: #0b141a;
            color: #e9edef;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        .stats-container {
            min-height: 100vh;
            padding: 20px;
        }
        .card {
            background: #202c33;
            border: 1px solid #202c33;
            border-radius: 10px;
        }
        .card-header {
            background: #111b21;
            border-bottom: 1px solid #111b21;
            color: #e9edef;
        }
        .form-control, .form-select {
            background: #111b21;
            color: #e9edef;
            border: 1px solid #202c33;
        }
        .form-control:focus, .form-select:focus {
            background: #111b21;
            color: #e9edef;
            box-shadow: none;
            border-color: #00a884;
        }
        .table {
            color: #e9edef;
        }
        .table thead {
            background: #111b21;
        }
        .table tbody tr:nth-child(even) {
            background: #111b21;
        }
        .badge-recibido {
            background-color: #ef4444;
        }
        .badge-enviado {
            background-color: #22c55e;
        }
        .badge-primeros {
            background-color: #eab308;
        }
        .timeline-wrapper {
            border: 2px solid #000;
            margin-bottom: 10px;
            background: #111b21;
        }
        .timeline-label {
            font-size: 0.85rem;
            color: #e9edef;
            margin-bottom: 4px;
        }
        canvas.timeline {
            width: 100%;
            height: 70px;
            display: block;
        }
        .timeline-scale {
            font-size: 0.75rem;
            color: #94a3b8;
            margin-top: 4px;
        }
        #gapTooltip {
            position: fixed;
            display: none;
            z-index: 2000;
            background: #111b21;
            color: #e9edef;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            border: 1px solid #22c55e;
            pointer-events: none;
        }

        /* Barras de primer mensaje */
        .firstmsg-bars {
            margin-top: 10px;
        }
        .firstmsg-bar {
            height: 28px;
            border-radius: 6px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            font-size: 0.85rem;
            color: #0b141a;
            font-weight: 500;
        }
        .firstmsg-green {
            background-color: #22c55e;
        }
        .firstmsg-yellow {
            background-color: #facc15;
        }
        .firstmsg-red {
            background-color: #ef4444;
        }
        .firstmsg-label-date {
            margin-right: 8px;
            font-weight: 600;
        }
        .firstmsg-label-day {
            margin-right: 8px;
        }
        .firstmsg-label-time {
            margin-right: 8px;
        }
        .firstmsg-label-resp {
            margin-left: auto;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="stats-container container-fluid">
    <div class="row mb-3">
        <div class="col-lg-8">
            <h2 class="mb-1">Estadísticas de mensajes</h2>
            <div class="text-muted"><?= htmlspecialchars($rangoTexto) ?></div>
        </div>
        <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
            <span class="me-2">
                <span class="badge badge-recibido">Entraron: <?= (int)$totalRecibidos ?></span>
            </span>
            <span class="me-2">
                <span class="badge badge-enviado">Salieron: <?= (int)$totalEnviados ?></span>
            </span>
            <span>
                <span class="badge badge-primeros">Primeros (amarillos): <?= (int)$totalPrimeros ?></span>
            </span>
        </div>
    </div>

    <!-- Botones rápidos Hoy / Ayer / Anteayer -->
    <div class="row mb-3">
        <div class="col-12 col-lg-6">
            <div class="btn-group" role="group">
                <a href="estadisticas.php?mode=day&date=<?= htmlspecialchars($anteayer) ?>"
                   class="btn btn-sm btn-outline-light<?= $mode==='day' && $dateStr===$anteayer ? ' active' : '' ?>">
                    Anteayer (<?= date('d/m', strtotime($anteayer)) ?>)
                </a>
                <a href="estadisticas.php?mode=day&date=<?= htmlspecialchars($ayer) ?>"
                   class="btn btn-sm btn-outline-light<?= $mode==='day' && $dateStr===$ayer ? ' active' : '' ?>">
                    Ayer (<?= date('d/m', strtotime($ayer)) ?>)
                </a>
                <a href="estadisticas.php?mode=day&date=<?= htmlspecialchars($hoy) ?>"
                   class="btn btn-sm btn-outline-light<?= $mode==='day' && $dateStr===$hoy ? ' active' : '' ?>">
                    Hoy (<?= date('d/m', strtotime($hoy)) ?>)
                </a>
            </div>
        </div>
    </div>

    <!-- Filtros de fecha / rango -->
    <div class="row mb-4">
        <div class="col-12 col-lg-6">
            <form method="get" class="card">
                <div class="card-header">
                    Filtros de período
                </div>
                <div class="card-body row g-3 align-items-end">
                    <div class="col-sm-6">
                        <label for="date" class="form-label">Fecha base</label>
                        <input type="date"
                               class="form-control"
                               id="date"
                               name="date"
                               value="<?= htmlspecialchars($dateStr) ?>">
                    </div>
                    <div class="col-sm-6">
                        <label for="mode" class="form-label">Rango</label>
                        <select class="form-select" id="mode" name="mode">
                            <option value="day" <?= $mode === 'day' ? 'selected' : '' ?>>Día</option>
                            <option value="week" <?= $mode === 'week' ? 'selected' : '' ?>>Semana</option>
                        </select>
                    </div>
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-success">
                            Aplicar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Timelines tipo "rayitas" -->
    <div class="row">
        <div class="col-12 col-xl-8 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    Línea de tiempo por mensaje (00:00 a 23:59)
                </div>
                <div class="card-body">
                    <div class="timeline-label">Mensajes que ingresaron</div>
                    <div class="timeline-wrapper">
                        <canvas id="canvasRecibidos" class="timeline"></canvas>
                    </div>

                    <div class="timeline-label">Mensajes que salieron (respondidos)</div>
                    <div class="timeline-wrapper">
                        <canvas id="canvasEnviados" class="timeline"></canvas>
                    </div>

                    <div class="timeline-scale">
                        Escala: 00:00 a 23:59 (cada línea vertical = un mensaje, agrupado por minuto).<br>
                        Las rayas amarillas marcan el primer mensaje recibido de un contacto.
                        Al pasar el mouse por zonas sin mensajes en la línea inferior se muestra el tiempo sin mensajes salientes.
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabla por hora -->
        <div class="col-12 col-xl-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    Resumen por hora
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead>
                            <tr>
                                <th style="width: 30%;">Hora</th>
                                <th style="width: 23%;">Entraron</th>
                                <th style="width: 23%;">Salieron</th>
                                <th style="width: 24%;">Primeros</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php foreach ($horas as $idx => $h): ?>
                                <tr>
                                    <td><?= sprintf('%02d:00', $h) ?>–<?= sprintf('%02d:59', $h) ?></td>
                                    <td><?= (int)$recibidosPorHora[$idx] ?></td>
                                    <td><?= (int)$enviadosPorHora[$idx] ?></td>
                                    <td><?= (int)$primerosPorHora[$idx] ?></td>
                                </tr>
                            <?php endforeach; ?>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>Total</th>
                                <th><?= (int)$totalRecibidos ?></th>
                                <th><?= (int)$totalEnviados ?></th>
                                <th><?= (int)$totalPrimeros ?></th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Control único de horario del primer mensaje (barras de colores) -->
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-header">
                    Primer mensaje enviado del día (últimos 30 días)
                </div>
                <div class="card-body">
                    <?php if (count($primeros30) === 0): ?>
                        <p class="text-muted mb-0">
                            No hay datos de mensajes enviados en los últimos 30 días.
                        </p>
                    <?php else: ?>
                        <p class="small text-muted mb-2">
                            Verde: hasta 09:05 · Amarillo: hasta 09:20 · Rojo: después de 09:20.
                            Se muestra fecha, día, hora del primer mensaje y quién estaba de turno (Juan o Gonza).
                        </p>
                        <div class="firstmsg-bars">
                            <?php
                            $limiteVerde    = 9 * 60 + 5;   // 09:05
                            $limiteAmarillo = 9 * 60 + 20;  // 09:20
                            foreach ($primeros30 as $row):
                                $dia         = $row['dia'];
                                $primera     = $row['primera'];
                                $responsable = getResponsablePorDia($dia);
                                $nombreDia   = getNombreDia($dia);

                                if ($primera) {
                                    $tsPrimera = strtotime($primera);
                                    $minDesde0 = (int)date('H', $tsPrimera) * 60 + (int)date('i', $tsPrimera);
                                    if ($minDesde0 <= $limiteVerde) {
                                        $colorClass = 'firstmsg-green';
                                    } elseif ($minDesde0 <= $limiteAmarillo) {
                                        $colorClass = 'firstmsg-yellow';
                                    } else {
                                        $colorClass = 'firstmsg-red';
                                    }
                                    $horaText = date('H:i', $tsPrimera);
                                } else {
                                    $colorClass = 'firstmsg-red';
                                    $horaText = '-';
                                }
                                ?>
                                <div class="firstmsg-bar <?= $colorClass ?>">
                                    <span class="firstmsg-label-date">
                                        <?= date('d/m', strtotime($dia)) ?>
                                    </span>
                                    <span class="firstmsg-label-day">
                                        <?= htmlspecialchars($nombreDia) ?>
                                    </span>
                                    <span class="firstmsg-label-time">
                                        <?= htmlspecialchars($horaText) ?>
                                    </span>
                                    <?php if ($responsable): ?>
                                        <span class="firstmsg-label-resp">
                                            <?= htmlspecialchars($responsable) ?>
                                        </span>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <!-- Total trabajado del día -->
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-header">
                    Total trabajado del día (primer enviado → último enviado, menos AFK)
                </div>
                <div class="card-body">
                    <?php if ((int)$totalEnviados <= 0 || !$firstSent || !$lastSent): ?>
                        <p class="text-muted mb-0">
                            No hay mensajes enviados en el período seleccionado. Total trabajado: 00:00.
                        </p>
                    <?php else: ?>
                        <div class="row g-3">
                            <div class="col-12 col-md-3">
                                <div class="small text-muted">1) Primer mensaje enviado</div>
                                <div class="h5 mb-0"><?= htmlspecialchars($firstSentText) ?></div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="small text-muted">2) Último mensaje enviado</div>
                                <div class="h5 mb-0"><?= htmlspecialchars($lastSentText) ?></div>
                            </div>
                            <div class="col-12 col-md-2">
                                <div class="small text-muted">3) Total (inicio→fin)</div>
                                <div class="h5 mb-0"><?= htmlspecialchars($totalWindowHHMM) ?></div>
                            </div>
                            <div class="col-12 col-md-2">
                                <div class="small text-muted">4) AFK (sin enviados)</div>
                                <div class="h5 mb-0"><?= htmlspecialchars($afkHHMM) ?></div>
                            </div>
                            <div class="col-12 col-md-2">
                                <div class="small text-muted">6) Total trabajado</div>
                                <div class="h4 mb-0"><?= htmlspecialchars($workedHHMM) ?></div>
                            </div>
                        </div>

                        <div class="small text-muted mt-3">
                            AFK se calcula por minuto: dentro de la ventana entre el primer y el último enviado,
                            cada minuto sin al menos 1 mensaje enviado cuenta como AFK.
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Tooltip para gaps -->
<div id="gapTooltip"></div>

<script>
// Datos desde PHP
var totalMinutos = <?= (int)$totalMinutos ?>; // 1440
var hitsRecibidos = <?= json_encode($hitsRecibidos) ?>;
var hitsRecibidosInicio = <?= json_encode($hitsRecibidosInicio) ?>;
var hitsEnviados  = <?= json_encode($hitsEnviados) ?>;

// Padding usado en el canvas
var paddingLeft   = 10;
var paddingRight  = 10;
var paddingTop    = 5;
var paddingBottom = 5;

// Gaps (huecos) sin enviados (para tooltip del canvas)
var gapsEnviados = [];

function computeGapsEnviados() {
    gapsEnviados = [];
    if (!Array.isArray(hitsEnviados) || hitsEnviados.length === 0) {
        gapsEnviados.push({ start: 0, end: totalMinutos - 1, duration: totalMinutos });
        return;
    }

    var mins = hitsEnviados.slice().sort(function(a,b){return a-b;});
    var unique = [];
    for (var i = 0; i < mins.length; i++) {
        if (i === 0 || mins[i] !== mins[i-1]) unique.push(mins[i]);
    }

    if (unique[0] > 0) {
        gapsEnviados.push({ start: 0, end: unique[0] - 1, duration: unique[0] - 0 });
    }
    for (var j = 0; j < unique.length - 1; j++) {
        var a = unique[j];
        var b = unique[j+1];
        if (b > a + 1) {
            gapsEnviados.push({ start: a + 1, end: b - 1, duration: (b - a - 1) });
        }
    }
    var last = unique[unique.length - 1];
    if (last < totalMinutos - 1) {
        gapsEnviados.push({ start: last + 1, end: totalMinutos - 1, duration: (totalMinutos - 1 - last) });
    }
}

// Dibuja timeline genérica
function dibujarTimeline(canvasId, hits, colorLinea, hitsEspecial, colorEspecial) {
    var canvas = document.getElementById(canvasId);
    if (!canvas) return;

    var rect = canvas.getBoundingClientRect();
    canvas.width  = rect.width;
    canvas.height = rect.height;

    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var anchoUtil = canvas.width - paddingLeft - paddingRight;

    // Línea base
    ctx.strokeStyle = '#0f172a';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(paddingLeft, canvas.height - paddingBottom);
    ctx.lineTo(canvas.width - paddingRight, canvas.height - paddingBottom);
    ctx.stroke();

    // Ticks de horas (00 a 23)
    ctx.strokeStyle = '#1e293b';
    ctx.lineWidth = 1;
    ctx.font = '10px system-ui';
    ctx.fillStyle = '#64748b';
    for (var h = 0; h <= 23; h++) {
        var minDesde0 = h * 60;
        var x = paddingLeft + (minDesde0 / totalMinutos) * anchoUtil;
        ctx.beginPath();
        ctx.moveTo(x, paddingTop);
        ctx.lineTo(x, canvas.height - paddingBottom);
        ctx.stroke();
        var label = (h < 10 ? '0' + h : h) + ':00';
        ctx.fillText(label, x + 2, paddingTop + 10);
    }

    // Rayas base
    ctx.strokeStyle = colorLinea;
    ctx.lineWidth = 1;
    hits.forEach(function(minDesde0) {
        var x = paddingLeft + (minDesde0 / totalMinutos) * anchoUtil;
        ctx.beginPath();
        ctx.moveTo(x, paddingTop);
        ctx.lineTo(x, canvas.height - paddingBottom);
        ctx.stroke();
    });

    // Rayas especiales
    if (Array.isArray(hitsEspecial) && hitsEspecial.length > 0 && colorEspecial) {
        ctx.strokeStyle = colorEspecial;
        ctx.lineWidth = 1.2;
        hitsEspecial.forEach(function(minDesde0) {
            var x = paddingLeft + (minDesde0 / totalMinutos) * anchoUtil;
            ctx.beginPath();
            ctx.moveTo(x, paddingTop);
            ctx.lineTo(x, canvas.height - paddingBottom);
            ctx.stroke();
        });
    }
}

function redibujar() {
    dibujarTimeline('canvasRecibidos', hitsRecibidos, '#ef4444', hitsRecibidosInicio, '#eab308');
    dibujarTimeline('canvasEnviados',  hitsEnviados,  '#22c55e', [], null);
}

// Helpers para gaps (tooltip)
function formatMinutes(m) {
    m = Math.round(m);
    if (m < 60) return m + ' min';
    var h = Math.floor(m / 60);
    var r = m % 60;
    if (r === 0) return h + ' h';
    return h + ' h ' + r + ' min';
}

function findGapForMinute(minute) {
    for (var i = 0; i < gapsEnviados.length; i++) {
        var g = gapsEnviados[i];
        if (minute >= g.start && minute <= g.end) return g;
    }
    return null;
}

function initGapHover() {
    var canvas = document.getElementById('canvasEnviados');
    var tooltip = document.getElementById('gapTooltip');
    if (!canvas || !tooltip) return;

    canvas.addEventListener('mousemove', function(e) {
        var rect = canvas.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;

        var anchoUtil = canvas.width - paddingLeft - paddingRight;

        if (y < paddingTop || y > canvas.height - paddingBottom ||
            x < paddingLeft || x > canvas.width - paddingRight) {
            tooltip.style.display = 'none';
            return;
        }

        var frac = (x - paddingLeft) / anchoUtil;
        if (frac < 0) frac = 0;
        if (frac > 1) frac = 1;
        var minute = Math.floor(frac * totalMinutos);

        var gap = findGapForMinute(minute);
        if (!gap || gap.duration <= 0) {
            tooltip.style.display = 'none';
            return;
        }

        tooltip.textContent = 'Tiempo sin mensajes salientes: ' + formatMinutes(gap.duration);
        tooltip.style.display = 'block';
        tooltip.style.left = (e.clientX + 12) + 'px';
        tooltip.style.top  = (e.clientY + 12) + 'px';
    });

    canvas.addEventListener('mouseleave', function() {
        var tooltip = document.getElementById('gapTooltip');
        if (tooltip) tooltip.style.display = 'none';
    });
}

// Init
window.addEventListener('load', function() {
    computeGapsEnviados();
    redibujar();
    initGapHover();
});
window.addEventListener('resize', redibujar);
</script>
</body>
</html>
