<?php
$f = "/var/www/html/mikrotik/views/dashboard.php";
$c = file_get_contents($f);

// 1. Aumenta altura e remove as spans de legenda manual (o Chart.js vai mostrar legenda)
$old1 = '            <!-- Mini gr' . "\xc3\xa1" . 'fico -->
            <div style="padding:10px 20px 0;">
                <div style="display:flex;gap:14px;margin-bottom:4px;">
                    <span style="font-size:0.7rem;font-weight:700;color:#22c55e;">&#9679; &#8595; Entrada</span>
                    <span style="font-size:0.7rem;font-weight:700;color:#ef4444;">&#9679; &#8593; Sa' . "\xc3\xad" . 'da</span>
                </div>
                <div style="position:relative;height:100px;">
                    <div id="loading-<?= $chartId ?>" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.8rem;">Carregando...</div>
                    <canvas id="<?= $chartId ?>" style="display:none;"></canvas>
                </div>
            </div>';

$new1 = '            <!-- Gr' . "\xc3\xa1" . 'fico de tr' . "\xc3\xa1" . 'fego -->
            <div style="padding:10px 20px 8px;">
                <div style="font-size:0.7rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;">&#x1F4C8; Tr' . "\xc3\xa1" . 'fego &mdash; ' . "\'ltima 1h" . '</div>
                <div style="position:relative;height:150px;">
                    <div id="loading-<?= $chartId ?>" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.8rem;">Carregando...</div>
                    <canvas id="<?= $chartId ?>" style="display:none;"></canvas>
                </div>
            </div>';

if (strpos($c, $old1) !== false) {
    $c = str_replace($old1, $new1, $c);
    echo "HTML OK\n";
} else {
    echo "FAIL HTML\n"; exit;
}

// 2. Atualiza datasets para ter label
$old2 = "{ data: data.in_bps,  borderColor: '#22c55e', borderWidth: 1.5, pointRadius: 0, fill: true, backgroundColor: 'rgba(34,197,94,0.07)', tension: 0.4 },
                        { data: data.out_bps, borderColor: '#ef4444', borderWidth: 1.5, pointRadius: 0, fill: true, backgroundColor: 'rgba(239,68,68,0.05)',  tension: 0.4 }";

$new2 = "{ label: '\u2193 Entrada', data: data.in_bps,  borderColor: '#22c55e', borderWidth: 2, pointRadius: 0, fill: true, backgroundColor: 'rgba(34,197,94,0.08)', tension: 0.3 },
                        { label: '\u2191 Sa\u00edda',   data: data.out_bps, borderColor: '#ef4444', borderWidth: 2, pointRadius: 0, fill: true, backgroundColor: 'rgba(239,68,68,0.06)',  tension: 0.3 }";

if (strpos($c, $old2) !== false) {
    $c = str_replace($old2, $new2, $c);
    echo "DATASETS OK\n";
} else {
    echo "WARN: datasets not found (may already be updated)\n";
}

// 3. Atualiza options do Chart.js para mostrar eixos e legenda
$old3 = "plugins: { legend: { display: false }, tooltip: { enabled: false } },
                    scales: {
                        x: { display: false },
                        y: { display: false, beginAtZero: true }
                    }";

$new3 = "interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: { font: { size: 10, weight: '700' }, padding: 6, boxWidth: 10, boxHeight: 2 }
                        },
                        tooltip: {
                            callbacks: { label: ctx => ' ' + ctx.dataset.label + ': ' + formatBps(ctx.parsed.y) }
                        }
                    },
                    scales: {
                        x: {
                            display: true,
                            ticks: { maxTicksLimit: 5, font: { size: 9 }, color: '#94a3b8', maxRotation: 0 },
                            grid: { display: false }
                        },
                        y: {
                            display: true,
                            beginAtZero: true,
                            ticks: { maxTicksLimit: 4, font: { size: 9 }, color: '#94a3b8', callback: v => formatBps(v) },
                            grid: { color: 'rgba(0,0,0,.04)' }
                        }
                    }";

if (strpos($c, $old3) !== false) {
    $c = str_replace($old3, $new3, $c);
    echo "JS OK\n";
} else {
    echo "WARN: JS options not found (may already be updated)\n";
}

file_put_contents($f, $c);
echo "DONE\n";
