<?php
declare(strict_types=1);

date_default_timezone_set('America/Toronto');

$dbFile = '/opt/meshcore-gateway/sms_gateway.db';
$healthUrl = 'http://127.0.0.1:8080/health';

function h($value): string {
    return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
}

function tableExists(PDO $db, string $table): bool {
    $stmt = $db->prepare("
        SELECT name
        FROM sqlite_master
        WHERE type='table' AND name=?
        LIMIT 1
    ");
    $stmt->execute([$table]);
    return (bool)$stmt->fetchColumn();
}

function formatSnr($snr): string {
    if ($snr === null || $snr === '') return 'N/A';
    return sprintf('%+.1f dB', (float)$snr);
}

function qualityClass($snr): string {
    if ($snr === null || $snr === '') return 'neutral';
    $snr = (float)$snr;
    if ($snr >= 8) return 'excellent';
    if ($snr >= 3) return 'good';
    if ($snr >= 0) return 'ok';
    if ($snr >= -5) return 'weak';
    return 'critical';
}

function qualityText($snr): string {
    if ($snr === null || $snr === '') return 'INCONNU';
    $snr = (float)$snr;
    if ($snr >= 8) return 'EXCELLENT';
    if ($snr >= 3) return 'GOOD';
    if ($snr >= 0) return 'OK';
    if ($snr >= -5) return 'WEAK';
    return 'CRITICAL';
}

function routeText($hops): string {
    $hops = (int)$hops;
    if ($hops <= 0) return 'Direct';
    if ($hops === 1) return '1 hop';
    return $hops . ' hops';
}

function formatLocal($value): string {
    if (!$value) return '—';
    try {
        $d = new DateTime((string)$value, new DateTimeZone('UTC'));
        $d->setTimezone(new DateTimeZone('America/Toronto'));
        return $d->format('Y-m-d H:i:s');
    } catch (Throwable $e) {
        return (string)$value;
    }
}

function formatUptime($seconds): string {
    if ($seconds === null) return '—';
    $seconds = max(0, (int)$seconds);
    $days = intdiv($seconds, 86400);
    $seconds %= 86400;
    $hours = intdiv($seconds, 3600);
    $seconds %= 3600;
    $minutes = intdiv($seconds, 60);

    $parts = [];
    if ($days) $parts[] = $days . 'j';
    if ($hours) $parts[] = $hours . 'h';
    if ($minutes) $parts[] = $minutes . 'm';
    return $parts ? implode(' ', $parts) : '<1m';
}

try {
    $db = new PDO(
        'sqlite:' . $dbFile,
        null,
        null,
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        ]
    );
} catch (Throwable $e) {
    http_response_code(500);
    die('Base du bot indisponible.');
}

$hasRadio = tableExists($db, 'radio_events');
$hasAi = tableExists($db, 'ai_usage');
$hasSmsOut = tableExists($db, 'sms_outgoing');
$hasSmsIn = tableExists($db, 'sms_incoming');
$hasTraceRuns = tableExists($db, 'trace_runs');
$hasTraceHops = tableExists($db, 'trace_hops');

$health = [];
$botOnline = false;

$context = stream_context_create([
    'http' => [
        'timeout' => 1.5,
        'ignore_errors' => true,
    ]
]);

$healthRaw = @file_get_contents($healthUrl, false, $context);

if ($healthRaw !== false) {
    $decoded = json_decode($healthRaw, true);
    if (is_array($decoded)) {
        $health = $decoded;
        $botOnline = (($decoded['status'] ?? '') === 'ok');
    }
}

$stats = [
    'messages_24h' => 0,
    'users_24h' => 0,
    'messages_1h' => 0,
    'users_1h' => 0,
];

$recentEvents = [];
$topUsers = [];
$recentTraces = [];
$aiToday = 0;
$smsOut24 = 0;
$smsIn24 = 0;

if ($hasRadio) {
    $row = $db->query("
        SELECT
            COUNT(*) AS total,
            COUNT(DISTINCT sender) AS users
        FROM radio_events
        WHERE received_at >= datetime('now','-24 hours')
    ")->fetch();

    $stats['messages_24h'] = (int)($row['total'] ?? 0);
    $stats['users_24h'] = (int)($row['users'] ?? 0);

    $row = $db->query("
        SELECT
            COUNT(*) AS total,
            COUNT(DISTINCT sender) AS users
        FROM radio_events
        WHERE received_at >= datetime('now','-1 hour')
    ")->fetch();

    $stats['messages_1h'] = (int)($row['total'] ?? 0);
    $stats['users_1h'] = (int)($row['users'] ?? 0);

    $recentEvents = $db->query("
        SELECT
            sender,
            channel_name,
            command,
            snr,
            hops,
            received_at
        FROM radio_events
        ORDER BY id DESC
        LIMIT 25
    ")->fetchAll();

    $topUsers = $db->query("
        SELECT
            sender,
            COUNT(*) AS total,
            MAX(received_at) AS last_seen
        FROM radio_events
        WHERE received_at >= datetime('now','-24 hours')
        GROUP BY sender
        ORDER BY total DESC
        LIMIT 8
    ")->fetchAll();
}

if ($hasAi) {
    $aiToday = (int)$db->query("
        SELECT COUNT(*)
        FROM ai_usage
        WHERE date(created_at,'localtime') = date('now','localtime')
    ")->fetchColumn();
}

if ($hasSmsOut) {
    $smsOut24 = (int)$db->query("
        SELECT COUNT(*)
        FROM sms_outgoing
        WHERE sent_at >= datetime('now','-24 hours')
    ")->fetchColumn();
}

if ($hasSmsIn) {
    $smsIn24 = (int)$db->query("
        SELECT COUNT(*)
        FROM sms_incoming
        WHERE received_at >= datetime('now','-24 hours')
    ")->fetchColumn();
}

if ($hasTraceRuns) {
    $recentTraces = $db->query("
        SELECT
            id,
            sender,
            hop_count,
            weakest_snr,
            weakest_name,
            created_at
        FROM trace_runs
        ORDER BY id DESC
        LIMIT 10
    ")->fetchAll();
}

$commands = [
    [
        'group' => 'Radio',
        'name' => 'test',
        'syntax' => 'test',
        'desc' => 'Test radio complet avec route, hops, SNR et maillon le plus faible.',
        'badge' => 'recommandé'
    ],
    [
        'group' => 'Radio',
        'name' => 'ping',
        'syntax' => 'ping',
        'desc' => 'Réponse rapide du bot avec le nombre de hops et le weakest SNR si disponible.',
        'badge' => 'rapide'
    ],
    [
        'group' => 'Radio',
        'name' => 'link',
        'syntax' => 'link',
        'desc' => 'Diagnostic détaillé du lien avec les répéteurs et le signal de chaque hop.',
        'badge' => 'diagnostic'
    ],
    [
        'group' => 'Radio',
        'name' => 'snr',
        'syntax' => 'snr',
        'desc' => 'Affiche les SNR du path et identifie le plus faible.',
        'badge' => ''
    ],
    [
        'group' => 'Radio',
        'name' => 'hop / hops',
        'syntax' => 'hops',
        'desc' => 'Affiche la route complète, les répéteurs connus et leur signal.',
        'badge' => ''
    ],
    [
        'group' => 'Radio',
        'name' => 'trace',
        'syntax' => 'trace [USER]',
        'desc' => 'Lance un TRACE MeshCore vers un utilisateur ou vers soi-même.',
        'badge' => 'avancé'
    ],
    [
        'group' => 'Radio',
        'name' => 'diag',
        'syntax' => 'diag [USER]',
        'desc' => 'Diagnostic complet du path et du maillon le plus faible.',
        'badge' => 'avancé'
    ],
    [
        'group' => 'IA',
        'name' => 'ai',
        'syntax' => '!ai ta question',
        'desc' => 'Pose une question à Gemini. Limite de 10 questions par jour par utilisateur.',
        'badge' => 'IA'
    ],
    [
        'group' => 'IA',
        'name' => 'aistatus',
        'syntax' => 'aistatus',
        'desc' => 'Affiche le quota IA utilisé et restant pour la journée.',
        'badge' => ''
    ],
    [
        'group' => 'IA',
        'name' => 'translate',
        'syntax' => 'translate en ton texte',
        'desc' => 'Traduit un texte vers la langue demandée.',
        'badge' => ''
    ],
    [
        'group' => 'IA',
        'name' => 'resume',
        'syntax' => 'resume ton texte',
        'desc' => 'Résume un texte en quelques phrases courtes.',
        'badge' => ''
    ],
    [
        'group' => 'Météo',
        'name' => 'meteo',
        'syntax' => 'meteo',
        'desc' => 'Affiche le menu des villes disponibles.',
        'badge' => ''
    ],
    [
        'group' => 'Météo',
        'name' => 'meteo 0-6',
        'syntax' => 'meteo 0',
        'desc' => '0 St-Jean · 1 Montréal · 2 Laval · 3 Sorel · 4 Longueuil · 5 Châteauguay · 6 Sherbrooke.',
        'badge' => ''
    ],
    [
        'group' => 'SMS',
        'name' => 'sms',
        'syntax' => '!sms tonnumero tonmessage',
        'desc' => 'Envoie un SMS via VoIP.ms.',
        'badge' => 'action'
    ],
    [
        'group' => 'SMS',
        'name' => 'reply',
        'syntax' => '!reply tonmessage',
        'desc' => 'Répond au dernier numéro SMS associé à ton utilisateur MeshCore.',
        'badge' => 'action'
    ],
    [
        'group' => 'SMS',
        'name' => 'smsstatus',
        'syntax' => 'smsstatus',
        'desc' => 'Affiche la conversation SMS active.',
        'badge' => ''
    ],
    [
        'group' => 'Mailbox',
        'name' => 'msg',
        'syntax' => 'msg USER ton message',
        'desc' => 'Dépose un message pour un utilisateur qui pourra le lire plus tard.',
        'badge' => 'offline'
    ],
    [
        'group' => 'Mailbox',
        'name' => 'inbox',
        'syntax' => 'inbox',
        'desc' => 'Affiche les messages en attente dans ta boîte.',
        'badge' => ''
    ],
    [
        'group' => 'Fun',
        'name' => 'dadjoke',
        'syntax' => 'dadjoke',
        'desc' => 'Dad joke aléatoire. Ajoute en pour une version anglaise.',
        'badge' => ''
    ],
    [
        'group' => 'Fun',
        'name' => 'joke',
        'syntax' => 'joke',
        'desc' => 'Blague aléatoire FR/EN.',
        'badge' => ''
    ],
    [
        'group' => 'Fun',
        'name' => 'fact',
        'syntax' => 'fact',
        'desc' => 'Fait aléatoire FR/EN.',
        'badge' => ''
    ],
    [
        'group' => 'Fun',
        'name' => 'coin',
        'syntax' => 'coin',
        'desc' => 'Pile ou face.',
        'badge' => ''
    ],
    [
        'group' => 'Fun',
        'name' => 'dice',
        'syntax' => 'dice 20',
        'desc' => 'Lance un dé du nombre de faces demandé.',
        'badge' => ''
    ],
    [
        'group' => 'Fun',
        'name' => 'choose',
        'syntax' => 'choose pizza burger sushi',
        'desc' => 'Choisit une option au hasard.',
        'badge' => ''
    ],
    [
        'group' => 'Système',
        'name' => 'status',
        'syntax' => 'status',
        'desc' => 'Affiche le statut général et l’uptime du bot.',
        'badge' => ''
    ],
    [
        'group' => 'Système',
        'name' => 'info',
        'syntax' => 'info',
        'desc' => 'Affiche les informations générales et l’adresse du dashboard.',
        'badge' => ''
    ],
    [
        'group' => 'Système',
        'name' => 'help',
        'syntax' => 'help',
        'desc' => 'Affiche l’aide abrégée directement dans MeshCore.',
        'badge' => ''
    ],
    [
        'group' => 'Système',
        'name' => 'advert',
        'syntax' => '!advert',
        'desc' => 'Envoie un advert FLOOD. Utilise !advert local pour ZERO-HOP.',
        'badge' => 'action'
    ],
];

$groups = [];
foreach ($commands as $cmd) {
    $groups[$cmd['group']] = true;
}
$groups = array_keys($groups);
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#07101a">
<title>MeshCore Bot — CECREVIER</title>

<style>
:root{
    --bg:#07101a;
    --bg2:#0b1623;
    --panel:#0e1b2a;
    --panel2:#122235;
    --border:rgba(255,255,255,.08);
    --border2:rgba(255,255,255,.14);
    --text:#edf6ff;
    --muted:#8ca0b5;
    --blue:#5db7ff;
    --cyan:#53d7e5;
    --green:#5ee294;
    --yellow:#f1d46f;
    --orange:#f8a65b;
    --red:#ff7171;
    --purple:#a99cff;
    --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 10% 0%,rgba(93,183,255,.12),transparent 26%),
        radial-gradient(circle at 100% 0%,rgba(169,156,255,.10),transparent 24%),
        linear-gradient(180deg,var(--bg),#050a10 70%);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}
.container{
    width:min(1460px,calc(100% - 28px));
    margin:auto;
    padding:18px 0 60px;
}
.topbar{
    position:sticky;
    top:10px;
    z-index:50;
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:space-between;
    padding:12px 15px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(7,16,26,.82);
    backdrop-filter:blur(18px);
    box-shadow:0 14px 40px rgba(0,0,0,.28);
}
.brand{
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:800;
    letter-spacing:-.02em;
}
.brand-icon{
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
    background:linear-gradient(135deg,rgba(93,183,255,.18),rgba(83,215,229,.08));
    border:1px solid rgba(93,183,255,.20);
}
.nav{
    display:flex;
    gap:6px;
}
.nav a{
    padding:7px 10px;
    border-radius:8px;
    color:var(--muted);
    font-size:13px;
}
.nav a:hover{
    background:rgba(255,255,255,.05);
    color:var(--text);
}
.hero{
    padding:42px 4px 30px;
}
.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--cyan);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.hero h1{
    margin:0;
    font-size:clamp(36px,6vw,68px);
    line-height:.98;
    letter-spacing:-.055em;
}
.hero p{
    max-width:900px;
    color:var(--muted);
    font-size:17px;
    margin:18px 0 0;
}
.quickline{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:20px;
}
.quick-pill{
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    color:#cfe2f4;
    border:1px solid var(--border);
    background:rgba(255,255,255,.025);
}
.section{
    margin-top:24px;
}
.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:13px;
}
.section-head h2{
    margin:0;
    font-size:24px;
    letter-spacing:-.03em;
}
.section-head p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:13px;
}
.command-toolbar{
    display:grid;
    grid-template-columns:minmax(260px,1fr) auto;
    gap:12px;
    margin-bottom:14px;
}
.search{
    width:100%;
    border:1px solid var(--border2);
    background:#0a1521;
    color:var(--text);
    padding:12px 14px;
    border-radius:12px;
    outline:none;
}
.search:focus{
    border-color:rgba(93,183,255,.45);
    box-shadow:0 0 0 3px rgba(93,183,255,.08);
}
.filters{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
.filter-btn{
    border:1px solid var(--border);
    background:#0b1623;
    color:var(--muted);
    padding:9px 11px;
    border-radius:10px;
    cursor:pointer;
    font-size:12px;
}
.filter-btn.active,
.filter-btn:hover{
    color:var(--text);
    border-color:rgba(93,183,255,.28);
    background:rgba(93,183,255,.08);
}
.command-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.command-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(18,34,53,.86),rgba(12,25,39,.86));
    padding:16px;
    min-height:168px;
    transition:.16s ease;
}
.command-card:hover{
    transform:translateY(-2px);
    border-color:rgba(93,183,255,.22);
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.command-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.command-name{
    font-weight:800;
    font-size:16px;
}
.command-group{
    color:var(--muted);
    font-size:11px;
    margin-top:2px;
}
.badge{
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:5px 7px;
    border-radius:999px;
    border:1px solid rgba(93,183,255,.20);
    color:var(--blue);
    background:rgba(93,183,255,.06);
}
.command-code{
    display:block;
    width:100%;
    margin:13px 0 10px;
    padding:9px 10px;
    border-radius:9px;
    color:var(--cyan);
    background:#08131e;
    border:1px solid rgba(83,215,229,.12);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;
    overflow:auto;
}
.command-desc{
    color:var(--muted);
    font-size:13px;
}
.cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.card{
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(14,27,42,.84);
    padding:17px;
}
.card-label{
    color:var(--muted);
    font-size:12px;
    margin-bottom:7px;
}
.card-value{
    font-size:28px;
    font-weight:800;
    letter-spacing:-.04em;
}
.card-sub{
    color:var(--muted);
    font-size:11px;
    margin-top:6px;
}
.grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.panel{
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(14,27,42,.84);
    overflow:hidden;
}
.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:15px 17px;
    border-bottom:1px solid var(--border);
}
.panel-head h3{
    margin:0;
    font-size:15px;
}
.panel-body{
    padding:15px 17px;
}
.table-wrap{overflow-x:auto}
table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}
th,td{
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
}
th{
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.05em;
}
tbody tr:hover{
    background:rgba(255,255,255,.02);
}
.excellent{color:var(--green)}
.good{color:#9ce38b}
.ok{color:var(--yellow)}
.weak{color:var(--orange)}
.critical{color:var(--red)}
.neutral{color:var(--muted)}
.status-box{
    border:1px solid var(--border);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(18,34,53,.9),rgba(9,20,31,.9));
    padding:20px;
}
.status-main{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:18px;
}
.status-dot{
    width:10px;height:10px;border-radius:50%;
}
.status-dot.online{
    background:var(--green);
    box-shadow:0 0 18px rgba(94,226,148,.65);
}
.status-dot.offline{
    background:var(--red);
}
.status-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:15px;
}
.status-item{
    border:1px solid var(--border);
    border-radius:12px;
    padding:11px;
    background:rgba(255,255,255,.02);
}
.status-item span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-bottom:4px;
}
.footer{
    text-align:center;
    color:var(--muted);
    font-size:11px;
    padding:28px 0 5px;
}
@media(max-width:1100px){
    .command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
    .container{width:min(100% - 18px,1460px)}
    .nav{display:none}
    .command-toolbar{grid-template-columns:1fr}
    .command-grid{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr}
    .hero{padding-top:30px}
}
@media(max-width:500px){
    .cards{grid-template-columns:1fr}
    .status-grid{grid-template-columns:1fr}
}
</style>
</head>

<body>
<div class="container">

    <div class="topbar">
        <div class="brand">
            <div class="brand-icon">📡</div>
            <div>MeshCore Bot</div>
        </div>
        <div class="nav">
            <a href="#commandes">Commandes</a>
            <a href="#activite">Activité</a>
            <a href="#traces">Traces</a>
            <a href="#status">Status</a>
        </div>
    </div>

    <section class="hero">
        <div class="hero-kicker">CECREVIER · MeshCore Gateway</div>
        <h1>Commandes d’abord.<br>Diagnostic ensuite.</h1>
        <p>
            Cette page sert de guide rapide pour utiliser le bot MeshCore.
            Les commandes les plus utiles sont immédiatement visibles, puis les statistiques et l’état du système sont affichés plus bas.
        </p>

        <div class="quickline">
            <div class="quick-pill">#bots</div>
            <div class="quick-pill">#test</div>
            <div class="quick-pill">Gemini <?= h($health['ai_model'] ?? 'IA') ?></div>
            <div class="quick-pill">10 questions IA / jour / user</div>
            <div class="quick-pill">SMS VoIP.ms</div>
            <div class="quick-pill">TRACE / weakest SNR</div>
        </div>
    </section>

    <section class="section" id="commandes">
        <div class="section-head">
            <div>
                <h2>Commandes</h2>
                <p>Recherche ou filtre par catégorie. Les commandes normales peuvent être utilisées sans !, sauf les actions indiquées.</p>
            </div>
        </div>

        <div class="command-toolbar">
            <input
                class="search"
                id="commandSearch"
                type="search"
                placeholder="Rechercher une commande… ex: ping, météo, ai, sms"
                autocomplete="off"
            >

            <div class="filters" id="filters">
                <button class="filter-btn active" data-group="all">Toutes</button>
                <?php foreach ($groups as $group): ?>
                    <button class="filter-btn" data-group="<?= h($group) ?>"><?= h($group) ?></button>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="command-grid" id="commandGrid">
            <?php foreach ($commands as $cmd): ?>
                <article
                    class="command-card"
                    data-group="<?= h($cmd['group']) ?>"
                    data-search="<?= h(strtolower($cmd['name'] . ' ' . $cmd['syntax'] . ' ' . $cmd['desc'] . ' ' . $cmd['group'])) ?>"
                >
                    <div class="command-top">
                        <div>
                            <div class="command-name"><?= h($cmd['name']) ?></div>
                            <div class="command-group"><?= h($cmd['group']) ?></div>
                        </div>
                        <?php if ($cmd['badge'] !== ''): ?>
                            <span class="badge"><?= h($cmd['badge']) ?></span>
                        <?php endif; ?>
                    </div>

                    <code class="command-code"><?= h($cmd['syntax']) ?></code>
                    <div class="command-desc"><?= h($cmd['desc']) ?></div>
                </article>
            <?php endforeach; ?>
        </div>
    </section>

    <section class="section">
        <div class="section-head">
            <div>
                <h2>Aperçu</h2>
                <p>Activité récente du bot et des services associés.</p>
            </div>
        </div>

        <div class="cards">
            <div class="card">
                <div class="card-label">Messages MeshCore / 24h</div>
                <div class="card-value"><?= h($stats['messages_24h']) ?></div>
                <div class="card-sub"><?= h($stats['messages_1h']) ?> dans la dernière heure</div>
            </div>

            <div class="card">
                <div class="card-label">Utilisateurs / 24h</div>
                <div class="card-value"><?= h($stats['users_24h']) ?></div>
                <div class="card-sub"><?= h($stats['users_1h']) ?> dans la dernière heure</div>
            </div>

            <div class="card">
                <div class="card-label">Requêtes IA aujourd’hui</div>
                <div class="card-value"><?= h($aiToday) ?></div>
                <div class="card-sub">Tous utilisateurs confondus</div>
            </div>

            <div class="card">
                <div class="card-label">SMS / 24h</div>
                <div class="card-value"><?= h($smsOut24 + $smsIn24) ?></div>
                <div class="card-sub"><?= h($smsOut24) ?> envoyés · <?= h($smsIn24) ?> reçus</div>
            </div>
        </div>
    </section>

    <section class="section" id="activite">
        <div class="grid-2">

            <div class="panel">
                <div class="panel-head">
                    <h3>🔥 Utilisateurs actifs</h3>
                    <span class="neutral">24h</span>
                </div>

                <div class="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Messages</th>
                                <th>Dernier</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php foreach ($topUsers as $row): ?>
                            <tr>
                                <td><strong>@<?= h($row['sender']) ?></strong></td>
                                <td><?= h($row['total']) ?></td>
                                <td><?= h(formatLocal($row['last_seen'])) ?></td>
                            </tr>
                        <?php endforeach; ?>

                        <?php if (!$topUsers): ?>
                            <tr><td colspan="3">Aucune donnée.</td></tr>
                        <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel">
                <div class="panel-head">
                    <h3>🛰️ Dernières traces</h3>
                    <span class="neutral">weakest path</span>
                </div>

                <div class="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Hops</th>
                                <th>Weakest</th>
                                <th>Maillon</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php foreach ($recentTraces as $row): ?>
                            <tr>
                                <td><strong>@<?= h($row['sender']) ?></strong></td>
                                <td><?= h($row['hop_count']) ?></td>
                                <td class="<?= h(qualityClass($row['weakest_snr'])) ?>">
                                    <?= h(formatSnr($row['weakest_snr'])) ?>
                                </td>
                                <td><?= h($row['weakest_name'] ?: '—') ?></td>
                            </tr>
                        <?php endforeach; ?>

                        <?php if (!$recentTraces): ?>
                            <tr><td colspan="4">Aucun TRACE enregistré.</td></tr>
                        <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </section>

    <section class="section">
        <div class="panel">
            <div class="panel-head">
                <h3>📨 Activité récente</h3>
                <span class="neutral">25 derniers événements</span>
            </div>

            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Heure</th>
                            <th>User</th>
                            <th>Canal</th>
                            <th>Commande</th>
                            <th>Hops</th>
                            <th>RX final</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($recentEvents as $row): ?>
                        <tr>
                            <td><?= h(formatLocal($row['received_at'])) ?></td>
                            <td><strong>@<?= h($row['sender']) ?></strong></td>
                            <td>#<?= h($row['channel_name']) ?></td>
                            <td><?= h($row['command'] ?: 'message') ?></td>
                            <td><?= h(routeText($row['hops'])) ?></td>
                            <td class="<?= h(qualityClass($row['snr'])) ?>">
                                <?= h(formatSnr($row['snr'])) ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>

                    <?php if (!$recentEvents): ?>
                        <tr><td colspan="6">Aucune donnée.</td></tr>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="section" id="status">
        <div class="section-head">
            <div>
                <h2>Status système</h2>
                <p>Placé ici volontairement, en bas de page.</p>
            </div>
        </div>

        <div class="status-box">
            <div class="status-main">
                <span class="status-dot <?= $botOnline ? 'online' : 'offline' ?>"></span>
                <?= $botOnline ? 'Bot en ligne' : 'Bot hors ligne' ?>
            </div>

            <div class="status-grid">
                <div class="status-item">
                    <span>Uptime</span>
                    <strong><?= h(formatUptime($health['uptime'] ?? null)) ?></strong>
                </div>

                <div class="status-item">
                    <span>Modèle IA</span>
                    <strong><?= h($health['ai_model'] ?? 'N/A') ?></strong>
                </div>

                <div class="status-item">
                    <span>Quota IA</span>
                    <strong><?= h($health['ai_daily_limit'] ?? 10) ?>/jour/user</strong>
                </div>

                <div class="status-item">
                    <span>Canaux</span>
                    <strong>
                        <?php
                        $channels = $health['channels'] ?? [];
                        echo $channels ? '#' . h(implode(' · #', $channels)) : 'N/A';
                        ?>
                    </strong>
                </div>
            </div>
        </div>
    </section>

    <div class="footer">
        © 2026 CECREVIER
    </div>

</div>

<script>
const search = document.getElementById('commandSearch');
const cards = [...document.querySelectorAll('.command-card')];
const buttons = [...document.querySelectorAll('.filter-btn')];

let activeGroup = 'all';

function refreshCommands(){
    const q = (search.value || '').trim().toLowerCase();

    cards.forEach(card => {
        const matchesText = !q || card.dataset.search.includes(q);
        const matchesGroup = activeGroup === 'all' || card.dataset.group === activeGroup;
        card.style.display = (matchesText && matchesGroup) ? '' : 'none';
    });
}

search.addEventListener('input', refreshCommands);

buttons.forEach(btn => {
    btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        activeGroup = btn.dataset.group;
        refreshCommands();
    });
});

// Rafraîchit les données du dashboard sans être agressif.
setTimeout(() => window.location.reload(), 60000);
</script>

</body>
</html>