<?php
/**
 * Renders a stacked daily-trend line chart via Chart.js.
 *
 * @var \BotGuard\Core\View $this
 * @var array<int,array<string,mixed>> $trend
 * @var string $chartId
 */
$chartId = $chartId ?? 'trendChart';
$labels = array_map(static fn ($r) => $r['day'], $trend);
$humans = array_map(static fn ($r) => (int) $r['humans'], $trend);
$susp = array_map(static fn ($r) => (int) $r['suspicious'], $trend);
$bots = array_map(static fn ($r) => (int) $r['bots'], $trend);
?>
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <h6 class="card-title mb-3">Traffic Trend</h6>
        <canvas id="<?= e($chartId) ?>" height="90"></canvas>
    </div>
</div>
<?php $this->section('scripts', '<script>(function(){
    var ctx = document.getElementById(' . json_encode($chartId) . ');
    if(!ctx) return;
    new Chart(ctx, {
        type: "line",
        data: {
            labels: ' . json_encode($labels) . ',
            datasets: [
                { label: "Humans", data: ' . json_encode($humans) . ', borderColor: "#16a34a", tension: .3, fill: false },
                { label: "Suspicious", data: ' . json_encode($susp) . ', borderColor: "#d97706", tension: .3, fill: false },
                { label: "Bots", data: ' . json_encode($bots) . ', borderColor: "#dc2626", tension: .3, fill: false }
            ]
        },
        options: { responsive: true, plugins: { legend: { position: "bottom" } }, scales: { y: { beginAtZero: true } } }
    });
})();</script>'); ?>
