{% extends "base.html" %}
{% block title %}Traffic Monitoring - OpenVPN Manager{% endblock %}

{% block content %}
<script src="{{ url_for('static', filename='vendor/chart/chart.umd.min.js') }}"></script>
<style>
.routing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.10), rgba(17, 24, 39, 0.55) 65%);
    border: 1px solid rgba(var(--stat-rgb), 0.25);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 10px 26px -18px rgba(var(--stat-rgb), 0.6);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.routing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--stat-rgb), 0.5);
    box-shadow: 0 14px 28px -14px rgba(var(--stat-rgb), 0.4);
}
.light-theme .routing-card {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.07), rgba(255, 255, 255, 0.85) 65%);
    border-color: rgba(var(--stat-rgb-light), 0.28);
    box-shadow: 0 10px 22px -18px rgba(var(--stat-rgb-light), 0.35);
}
.light-theme .routing-card:hover {
    border-color: rgba(var(--stat-rgb-light), 0.55);
    box-shadow: 0 14px 24px -14px rgba(var(--stat-rgb-light), 0.28);
}
.routing-btn {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: rgba(75, 85, 99, 0.3);
    color: #d1d5db;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.routing-btn:hover { background-color: #4f46e5; color: #fff; }
.light-theme .routing-btn { background-color: rgba(209, 213, 219, 0.5); color: #374151; }
.routing-input { width: 100%; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(75, 85, 99, 0.5); color: inherit; font-size: 0.85rem; }
.light-theme .routing-input { background: #f3f4f6; border-color: rgba(209, 213, 219, 0.8); }
.routing-label { font-size: 0.75rem; font-weight: 600; color: #9ca3af; display: block; margin-bottom: 0.35rem; }
.light-theme .routing-label { color: #4b5563; }
.routing-mini-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.14), rgba(17, 24, 39, 0.25) 65%);
    border: 1px solid rgba(var(--stat-rgb), 0.22);
    transition: border-color 0.2s ease;
}
.routing-mini-stat-card:hover { border-color: rgba(var(--stat-rgb), 0.45); }
.light-theme .routing-mini-stat-card {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.09), rgba(255, 255, 255, 0.7) 65%);
    border-color: rgba(var(--stat-rgb-light), 0.25);
}
.light-theme .routing-mini-stat-card:hover { border-color: rgba(var(--stat-rgb-light), 0.5); }
.routing-mini-stat-label { font-size: 0.66rem; font-weight: 500; color: #9ca3af; margin-bottom: 0.1rem; }
.light-theme .routing-mini-stat-label { color: #4b5563; }
.routing-mini-stat-value { font-size: 1.05rem; font-weight: 700; line-height: 1.2; color: rgb(var(--stat-rgb)); font-variant-numeric: tabular-nums; }
.light-theme .routing-mini-stat-value { color: rgb(var(--stat-rgb-light)); }
.routing-mini-stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 9999px; font-size: 0.75rem;
    background-color: rgba(var(--stat-rgb), 0.18); color: rgb(var(--stat-rgb)); flex-shrink: 0;
}
.light-theme .routing-mini-stat-icon { background-color: rgba(var(--stat-rgb-light), 0.12); color: rgb(var(--stat-rgb-light)); }
.routing-stat-sub { font-size: 0.63rem; color: #6b7280; margin-top: 0.15rem; font-weight: 600; }
.light-theme .routing-stat-sub { color: #9ca3af; }
.routing-stat-sub span { color: #d1d5db; }
.light-theme .routing-stat-sub span { color: #374151; }
.routing-range-selector { display: flex; gap: 0.25rem; background: rgba(75, 85, 99, 0.12); border: 1px solid rgba(75, 85, 99, 0.3); border-radius: 0.5rem; padding: 0.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; width: fit-content; }
.light-theme .routing-range-selector { background: rgba(243, 244, 246, 0.8); border-color: rgba(209, 213, 219, 0.7); }
.routing-range-btn { background: transparent; border: none; color: #9ca3af; padding: 0.35rem 0.85rem; border-radius: 0.35rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; transition: .15s; }
.routing-range-btn.active { background: #4f46e5; color: #fff; }
.routing-range-btn:hover:not(.active) { background: rgba(79, 70, 229, 0.1); color: #818cf8; }
.routing-chart-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin: 0 0 0.5rem; }
.routing-chart-canvas-wrap { height: 220px; width: 100%; position: relative; margin-bottom: 1.1rem; }
.routing-chart-canvas-wrap:last-child { margin-bottom: 0; }
.routing-report-error { color: #f87171; font-size: 0.75rem; margin-bottom: 0.6rem; display: none; }
.routing-report-error.show { display: block; }
.routing-report-range-field { width: 18rem; max-width: 100%; }
.routing-report-range-field .routing-input { cursor: pointer; }
.routing-report-get-btn { padding: 0.6rem 1rem; }
.routing-preset-btn { font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.75rem; border-radius: 0.6rem; background: rgba(96,165,250,0.10); border: 1px solid rgba(96,165,250,0.25); color: #93c5fd; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.routing-preset-btn:hover { background: rgba(96,165,250,0.18); border-color: rgba(96,165,250,0.45); }
.routing-preset-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.light-theme .routing-preset-btn { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.22); color: #1d4ed8; }
.light-theme .routing-preset-btn:hover { background: rgba(37,99,235,0.15); }
.routing-report-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.routing-report-stat { background: rgba(96, 165, 250, 0.06); border: 1px solid rgba(75, 85, 99, 0.3); border-radius: 0.6rem; padding: 0.7rem 0.85rem; }
.light-theme .routing-report-stat { border-color: rgba(209, 213, 219, 0.7); }
.routing-report-stat .rr-label { display: block; font-size: 0.62rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.35rem; font-weight: 700; }
.routing-report-stat .rr-value { font-size: 1rem; font-weight: 700; direction: ltr; display: block; }
@media(max-width:720px) { .routing-report-cards { grid-template-columns: 1fr 1fr; } }
</style>

<div class="container mx-auto px-4 py-8">

    <div class="mb-6 flex justify-between items-center">
        <a href="{{ url_for('index_with_path') }}" class="bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white px-6 py-2 rounded-lg items-center gap-2 transition-all duration-200 hover:shadow-lg">
            <i class="fas fa-arrow-left fa-fw"></i>
            <span>Home</span>
        </a>
    </div>

    <div class="mb-6">
        <h1 class="text-xl font-bold"><i class="fas fa-chart-line mr-2 text-indigo-400"></i>Traffic Monitoring</h1>
        <p class="text-sm opacity-70">Live bandwidth, historical charts and date-range usage reports for every routed source.</p>
    </div>

    <div class="routing-card mb-4" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
        <div class="flex items-center justify-between flex-wrap gap-2 mb-3">
            <h3 class="font-bold"><i class="fas fa-chart-line mr-2"></i>Live Traffic</h3>
            <select class="routing-input" id="routingTrafficSourceSelect" style="width:auto;min-width:14rem;" onchange="routingOnTrafficControlsChange()"></select>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-3">
            <div class="routing-mini-stat-card" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                <div><p class="routing-mini-stat-label">Download</p><p class="routing-mini-stat-value" id="routingTrafficCardTotalDl">0 B</p><p class="routing-stat-sub">Speed: <span id="routingTrafficCardSpeedDl">0 B/s</span></p></div>
                <div class="routing-mini-stat-icon"><i class="fas fa-arrow-down"></i></div>
            </div>
            <div class="routing-mini-stat-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                <div><p class="routing-mini-stat-label">Upload</p><p class="routing-mini-stat-value" id="routingTrafficCardTotalUl">0 B</p><p class="routing-stat-sub">Speed: <span id="routingTrafficCardSpeedUl">0 B/s</span></p></div>
                <div class="routing-mini-stat-icon"><i class="fas fa-arrow-up"></i></div>
            </div>
            <div class="routing-mini-stat-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                <div><p class="routing-mini-stat-label">Total Bandwidth</p><p class="routing-mini-stat-value" id="routingTrafficCardOverall">0 B</p><p class="routing-stat-sub">Speed: <span id="routingTrafficCardOverallSpeed">0 B/s</span></p></div>
                <div class="routing-mini-stat-icon"><i class="fas fa-chart-pie"></i></div>
            </div>
            <div class="routing-mini-stat-card" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
                <div><p class="routing-mini-stat-label">Active Sources</p><p class="routing-mini-stat-value" id="routingTrafficCardActiveSources">0</p><p class="routing-stat-sub" id="routingTrafficCardActiveSourcesTotal">of 0 total</p></div>
                <div class="routing-mini-stat-icon"><i class="fas fa-signal"></i></div>
            </div>
        </div>
        <div class="routing-range-selector" id="routingTrafficRangeButtons">
            <button type="button" class="routing-range-btn active" data-range="live">Live</button>
            <button type="button" class="routing-range-btn" data-range="10min">10 Min</button>
            <button type="button" class="routing-range-btn" data-range="30min">30 Min</button>
            <button type="button" class="routing-range-btn" data-range="hour">1 Hour</button>
            <button type="button" class="routing-range-btn" data-range="day">1 Day</button>
        </div>
        <div class="routing-chart-section-label">Speed (MB/s)</div>
        <div class="routing-chart-canvas-wrap"><canvas id="routingTrafficSpeedChart"></canvas></div>
        <div class="routing-chart-section-label">Volume</div>
        <div class="routing-chart-canvas-wrap"><canvas id="routingTrafficVolChart"></canvas></div>
    </div>

    <div class="routing-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
        <h3 class="font-bold mb-4"><i class="fas fa-calendar-days mr-2"></i>Traffic Date Range Report</h3>
        <div class="flex flex-wrap items-end gap-3 mb-3">
            <div class="routing-report-range-field">
                <label class="routing-label">Date Range</label>
                <input type="text" class="routing-input" id="routingTrafficReportRange" placeholder="Select a date range...">
            </div>
            <button type="button" class="routing-btn routing-report-get-btn" style="background:#4f46e5;color:#fff;" onclick="routingFetchTrafficReport()"><i class="fas fa-file-invoice"></i> Get Report</button>
        </div>
        <div class="flex flex-wrap gap-2 mb-3">
            <button type="button" class="routing-preset-btn" data-preset="today">Today</button>
            <button type="button" class="routing-preset-btn" data-preset="7">Last 7 Days</button>
            <button type="button" class="routing-preset-btn" data-preset="30">Last 30 Days</button>
            <button type="button" class="routing-preset-btn" data-preset="month">This Month</button>
        </div>
        <p class="routing-report-error" id="routingTrafficReportErr"></p>
        <div class="routing-report-cards" id="routingTrafficReportCards" style="display:none">
            <div class="routing-report-stat"><span class="rr-label">Download</span><span class="rr-value" id="routingTrafficReportDl">-</span></div>
            <div class="routing-report-stat"><span class="rr-label">Upload</span><span class="rr-value" id="routingTrafficReportUl">-</span></div>
            <div class="routing-report-stat"><span class="rr-label">Avg Speed Down</span><span class="rr-value" id="routingTrafficReportSpeedDl">-</span></div>
            <div class="routing-report-stat"><span class="rr-label">Avg Speed Up</span><span class="rr-value" id="routingTrafficReportSpeedUl">-</span></div>
        </div>
    </div>
</div>

<script>
function routingEscapeHtml(str) {
    return String(str ?? '').replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
}

function routingFormatBytes(bytes) {
    if (!bytes || bytes < 1) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let i = Math.floor(Math.log(bytes) / Math.log(1024));
    if (i >= units.length) i = units.length - 1;
    const val = bytes / Math.pow(1024, i);
    return (i === 0 ? val.toFixed(0) : val.toFixed(val < 10 ? 2 : 1)) + ' ' + units[i];
}
function routingFormatSpeed(bytesPerSec) { return routingFormatBytes(bytesPerSec) + '/s'; }

const ROUTING_TRAFFIC_ACTIVE_THRESHOLD = 100;

let routingLastTrafficSnapshot = {};
let routingTrafficSpeedChart = null;
let routingTrafficVolChart = null;
let routingCurrentTrafficRange = 'live';
let routingCurrentTrafficSource = 'total';
let routingTrafficReportPicker = null;
let routingAllTrafficSourcesCount = 0;

function routingApplyTrafficData(data) {
    routingLastTrafficSnapshot = data;
    routingUpdateTrafficStatCards();
}

function routingUpdateTrafficStatCards() {
    const td = routingLastTrafficSnapshot[routingCurrentTrafficSource];
    const speedDl = td ? td.speed_dl : 0, speedUl = td ? td.speed_ul : 0;
    const totalDl = td ? td.total_dl : 0, totalUl = td ? td.total_ul : 0;
    const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
    set('routingTrafficCardSpeedDl', routingFormatSpeed(speedDl));
    set('routingTrafficCardSpeedUl', routingFormatSpeed(speedUl));
    set('routingTrafficCardTotalDl', routingFormatBytes(totalDl));
    set('routingTrafficCardTotalUl', routingFormatBytes(totalUl));
    set('routingTrafficCardOverall', routingFormatBytes(totalDl + totalUl));
    set('routingTrafficCardOverallSpeed', routingFormatSpeed(speedDl + speedUl));

    let activeCount = 0;
    for (const key in routingLastTrafficSnapshot) {
        if (key === 'total') continue;
        const lt = routingLastTrafficSnapshot[key];
        if (lt && (lt.speed_dl + lt.speed_ul) >= ROUTING_TRAFFIC_ACTIVE_THRESHOLD) activeCount++;
    }
    set('routingTrafficCardActiveSources', activeCount);
    set('routingTrafficCardActiveSourcesTotal', `of ${routingAllTrafficSourcesCount} total`);
}

function routingLoadTrafficSnapshot() {
    fetch('{{ url_for("api_routing_traffic") }}').then(r => r.json()).then(routingApplyTrafficData).catch(() => {});
}

function routingInitTrafficCharts() {
    if (routingTrafficSpeedChart) return;
    const ctxSpeed = document.getElementById('routingTrafficSpeedChart').getContext('2d');
    const ctxVol = document.getElementById('routingTrafficVolChart').getContext('2d');
    const accentRgb = '99,102,241';
    const textRgb = document.body.classList.contains('light-theme') ? '55,65,81' : '209,213,219';
    const gradDl = ctxSpeed.createLinearGradient(0, 0, 0, 220);
    gradDl.addColorStop(0, `rgba(${accentRgb},0.28)`); gradDl.addColorStop(1, `rgba(${accentRgb},0.01)`);
    const gradUl = ctxSpeed.createLinearGradient(0, 0, 0, 220);
    gradUl.addColorStop(0, `rgba(${textRgb},0.18)`); gradUl.addColorStop(1, `rgba(${textRgb},0.01)`);

    const commonOptions = {
        responsive: true, maintainAspectRatio: false, animation: { duration: 0 },
        plugins: { legend: { labels: { color: '#9ca3af', font: { size: 10 } } } },
        scales: {
            x: { grid: { display: false }, ticks: { color: '#6b7280', font: { size: 9 }, autoSkip: true, maxTicksLimit: 10 } },
            y: { grid: { color: 'rgba(107,114,128,0.2)' }, ticks: { color: '#9ca3af', font: { size: 9 } } },
        },
        interaction: { intersect: false, mode: 'index' },
    };
    const speedOptions = JSON.parse(JSON.stringify(commonOptions));
    speedOptions.plugins.tooltip = { callbacks: { label: c => c.dataset.label + ': ' + c.parsed.y.toFixed(1) + ' MB/s' } };
    routingTrafficSpeedChart = new Chart(ctxSpeed, {
        type: 'line',
        data: { labels: [], datasets: [
            { label: 'Download', borderColor: '#818cf8', backgroundColor: gradDl, pointRadius: 0, borderWidth: 2, fill: true, tension: 0.3, data: [] },
            { label: 'Upload', borderColor: `rgba(${textRgb},0.7)`, backgroundColor: gradUl, pointRadius: 0, borderWidth: 2, fill: true, tension: 0.3, data: [] },
        ] },
        options: speedOptions,
    });
    const volOptions = JSON.parse(JSON.stringify(commonOptions));
    volOptions.plugins.tooltip = { callbacks: { label: c => { const v = c.parsed.y; return c.dataset.label + ': ' + (v < 1 ? (v * 1024).toFixed(1) + ' MB' : v.toFixed(2) + ' GB'); } } };
    routingTrafficVolChart = new Chart(ctxVol, {
        type: 'bar',
        data: { labels: [], datasets: [
            { label: 'Download Volume', backgroundColor: 'rgba(99,102,241,0.35)', borderColor: '#818cf8', borderWidth: 1, data: [] },
            { label: 'Upload Volume', backgroundColor: `rgba(${textRgb},0.25)`, borderColor: `rgba(${textRgb},0.6)`, borderWidth: 1, data: [] },
        ] },
        options: volOptions,
    });
}

function routingPopulateTrafficSourceSelect() {
    const sel = document.getElementById('routingTrafficSourceSelect');
    fetch('{{ url_for("api_routing_traffic_sources_list") }}').then(r => r.json()).then(sources => {
        routingAllTrafficSourcesCount = sources.length;
        let html = '<option value="total">All Sources (Total)</option>';
        sources.forEach(s => { html += `<option value="${routingEscapeHtml(s.key)}">${routingEscapeHtml(s.label)}${s.sub ? ' (' + routingEscapeHtml(s.sub) + ')' : ''}</option>`; });
        sel.innerHTML = html;
        sel.value = routingCurrentTrafficSource;
        routingUpdateTrafficStatCards();
    }).catch(() => {});
}

function routingOnTrafficControlsChange() {
    routingCurrentTrafficSource = document.getElementById('routingTrafficSourceSelect').value;
    routingUpdateTrafficStatCards();
    routingLoadTrafficChart();
}

function routingLoadTrafficChart() {
    if (!routingTrafficSpeedChart) return;
    fetch(`{{ url_for("api_routing_traffic_chart") }}?source=${encodeURIComponent(routingCurrentTrafficSource)}&range=${routingCurrentTrafficRange}`)
        .then(r => r.json()).then(routingRenderTrafficCharts).catch(() => {});
}

function routingRenderTrafficCharts(hData) {
    const labels = [], speedDl = [], speedUl = [], volDl = [], volUl = [];
    hData.forEach(pt => {
        const d = new Date(pt.time * 1000);
        labels.push(routingCurrentTrafficRange === 'day' ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }));
        speedDl.push(+(pt.speed_dl / 1048576).toFixed(1));
        speedUl.push(+(pt.speed_ul / 1048576).toFixed(1));
        volDl.push(+((pt.vol_dl || 0) / 1073741824).toFixed(4));
        volUl.push(+((pt.vol_ul || 0) / 1073741824).toFixed(4));
    });
    routingTrafficSpeedChart.data.labels = labels;
    routingTrafficSpeedChart.data.datasets[0].data = speedDl;
    routingTrafficSpeedChart.data.datasets[1].data = speedUl;
    routingTrafficSpeedChart.update('none');
    routingTrafficVolChart.data.labels = labels;
    routingTrafficVolChart.data.datasets[0].data = volDl;
    routingTrafficVolChart.data.datasets[1].data = volUl;
    routingTrafficVolChart.update('none');
}

function routingTrafficReportFormatDate(date) {
    if (!date) return '';
    const d = new Date(date);
    return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
}

function routingFetchTrafficReport() {
    const errBox = document.getElementById('routingTrafficReportErr');
    const cards = document.getElementById('routingTrafficReportCards');
    let start = '', end = '';
    if (routingTrafficReportPicker && routingTrafficReportPicker.selectedDates && routingTrafficReportPicker.selectedDates.length === 2) {
        start = routingTrafficReportFormatDate(routingTrafficReportPicker.selectedDates[0]);
        end = routingTrafficReportFormatDate(routingTrafficReportPicker.selectedDates[1]);
    }
    if (!start || !end) {
        errBox.textContent = 'Please select a date range.';
        errBox.classList.add('show');
        cards.style.display = 'none';
        return;
    }
    fetch(`{{ url_for("api_routing_traffic_report") }}?source=${encodeURIComponent(routingCurrentTrafficSource)}&start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`)
        .then(r => r.json()).then(d => {
            if (d.error) { errBox.textContent = d.error; errBox.classList.add('show'); cards.style.display = 'none'; return; }
            errBox.classList.remove('show');
            cards.style.display = 'grid';
            document.getElementById('routingTrafficReportDl').textContent = routingFormatBytes(d.total_dl);
            document.getElementById('routingTrafficReportUl').textContent = routingFormatBytes(d.total_ul);
            document.getElementById('routingTrafficReportSpeedDl').textContent = routingFormatSpeed(d.avg_speed_dl);
            document.getElementById('routingTrafficReportSpeedUl').textContent = routingFormatSpeed(d.avg_speed_ul);
        }).catch(() => { errBox.textContent = 'Network error'; errBox.classList.add('show'); cards.style.display = 'none'; });
}

document.addEventListener('DOMContentLoaded', function () {
    routingInitTrafficCharts();
    routingPopulateTrafficSourceSelect();

    const today = new Date();
    const weekAgo = new Date();
    weekAgo.setDate(today.getDate() - 6);
    const rangeInput = document.getElementById('routingTrafficReportRange');
    if (typeof JalaliCalendar !== 'undefined' && rangeInput) {
        routingTrafficReportPicker = JalaliCalendar.initDatePicker(rangeInput, { mode: 'range', dateFormat: 'Y-m-d', defaultDate: [weekAgo, today] });
    }
    document.querySelectorAll('.routing-preset-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const preset = this.dataset.preset;
            const end = new Date();
            let start = new Date();
            if (preset === '7') start.setDate(end.getDate() - 6);
            else if (preset === '30') start.setDate(end.getDate() - 29);
            else if (preset === 'month') start = new Date(end.getFullYear(), end.getMonth(), 1);
            if (routingTrafficReportPicker) routingTrafficReportPicker.setDate([start, end], true);
            routingFetchTrafficReport();
        });
    });
    document.querySelectorAll('#routingTrafficRangeButtons .routing-range-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            document.querySelectorAll('#routingTrafficRangeButtons .routing-range-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            routingCurrentTrafficRange = this.dataset.range;
            routingLoadTrafficChart();
        });
    });
    setTimeout(routingFetchTrafficReport, 150);

    routingLoadTrafficSnapshot();
    setInterval(routingLoadTrafficSnapshot, 2000);
    routingLoadTrafficChart();
    setInterval(routingLoadTrafficChart, 1000);
});
</script>
{% endblock %}