@extends('layouts.app')

@section('title', 'Dashboard - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/daterangepicker/daterangepicker.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/jsvectormap/jsvectormap.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/dashboard.css') }}">
@endpush

@section('content')
<div id="main-content">
    <div class="container-fluid ovpn-dashboard">

        {{-- Header --}}
        <div class="ovpn-dash-header">
            <div>
                <h2>Dashboard</h2>
                <p class="subtitle">Overview of your VPN service</p>
            </div>
            <div class="ovpn-dash-header-actions">
                <div class="ovpn-status-pill" id="systemsStatusPill">
                    <span class="dot"></span>
                    <span id="systemsStatusText">Checking systems...</span>
                </div>
                <div class="ovpn-date-range" id="dashboardDateRange">
                    <i class="fa fa-calendar"></i>
                    <span id="dashboardDateRangeLabel">Loading...</span>
                </div>
                <button type="button" class="ovpn-btn-refresh" onclick="refreshDashboard()">
                    <i class="fa fa-refresh"></i> Refresh
                </button>
            </div>
        </div>

        {{-- KPI cards --}}
        <div class="ovpn-kpi-grid">
            <div class="ovpn-kpi">
                <div class="ovpn-kpi-top">
                    <div class="ovpn-kpi-icon blue"><i class="fa fa-users"></i></div>
                </div>
                <div class="ovpn-kpi-label">Total Users</div>
                <div class="ovpn-kpi-value" id="kpiTotalUsers">—</div>
                <div class="ovpn-kpi-trend up" id="kpiTotalUsersTrend">vs last 7 days</div>
                <div class="ovpn-kpi-spark" id="sparkTotalUsers"></div>
            </div>
            <div class="ovpn-kpi">
                <div class="ovpn-kpi-top">
                    <div class="ovpn-kpi-icon green"><i class="fa fa-user"></i></div>
                </div>
                <div class="ovpn-kpi-label">Active Users</div>
                <div class="ovpn-kpi-value" id="kpiActiveUsers">—</div>
                <div class="ovpn-kpi-trend up" id="kpiActiveUsersTrend">vs yesterday</div>
                <div class="ovpn-kpi-spark" id="sparkActiveUsers"></div>
            </div>
            <div class="ovpn-kpi">
                <div class="ovpn-kpi-top">
                    <div class="ovpn-kpi-icon purple"><i class="fa fa-diamond"></i></div>
                </div>
                <div class="ovpn-kpi-label">Premium Users</div>
                <div class="ovpn-kpi-value" id="kpiPremiumUsers">—</div>
                <div class="ovpn-kpi-trend up" id="kpiPremiumUsersTrend">vs last 7 days</div>
                <div class="ovpn-kpi-spark" id="sparkPremiumUsers"></div>
            </div>
            <div class="ovpn-kpi">
                <div class="ovpn-kpi-top">
                    <div class="ovpn-kpi-icon cyan"><i class="fa fa-plug"></i></div>
                </div>
                <div class="ovpn-kpi-label">Live Connections</div>
                <div class="ovpn-kpi-value" id="kpiLiveConnections">—</div>
                <div class="ovpn-kpi-trend up" id="kpiLiveConnectionsTrend">vs yesterday</div>
                <div class="ovpn-kpi-spark" id="sparkLiveConnections"></div>
            </div>
            <div class="ovpn-kpi">
                <div class="ovpn-kpi-top">
                    <div class="ovpn-kpi-icon indigo"><i class="fa fa-user-plus"></i></div>
                </div>
                <div class="ovpn-kpi-label">New Registrations</div>
                <div class="ovpn-kpi-value" id="kpiNewRegistrations">—</div>
                <div class="ovpn-kpi-trend up" id="kpiNewRegistrationsTrend">vs yesterday</div>
                <div class="ovpn-kpi-spark" id="sparkNewRegistrations"></div>
            </div>
            <div class="ovpn-kpi">
                <div class="ovpn-kpi-top">
                    <div class="ovpn-kpi-icon orange"><i class="fa fa-clock-o"></i></div>
                </div>
                <div class="ovpn-kpi-label">Expiring Soon</div>
                <div class="ovpn-kpi-value" id="kpiExpiringSoon">—</div>
                <div class="ovpn-kpi-trend down" id="kpiExpiringSoonTrend">next 7 days</div>
                <div class="ovpn-kpi-spark" id="sparkExpiringSoon"></div>
            </div>
            <div class="ovpn-kpi">
                <div class="ovpn-kpi-top">
                    <div class="ovpn-kpi-icon teal"><i class="fa fa-check-circle"></i></div>
                </div>
                <div class="ovpn-kpi-label">Connection Success Rate</div>
                <div class="ovpn-kpi-value" id="kpiSuccessRate">—</div>
                <div class="ovpn-kpi-trend up" id="kpiSuccessRateTrend">server uptime</div>
                <div class="ovpn-kpi-spark" id="sparkSuccessRate"></div>
            </div>
        </div>

        {{-- Mid section --}}
        <div class="ovpn-mid-grid">
            <div class="ovpn-card">
                <div class="ovpn-card-header">
                    <h3>User Growth</h3>
                    <select id="growthDaysFilter" class="ovpn-select">
                        <option value="7" selected>7 Days</option>
                        <option value="14">14 Days</option>
                        <option value="30">30 Days</option>
                    </select>
                </div>
                <div class="ovpn-chart-wrap">
                    <div id="userGrowthLoader" class="ovpn-loader">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2 mb-0">Loading chart...</p>
                    </div>
                    <div id="userGrowthChart" style="display:none;"></div>
                </div>
            </div>

            <div class="ovpn-card">
                <div class="ovpn-card-header">
                    <h3>Users by Country</h3>
                    <span class="muted">From stats API</span>
                </div>
                <div id="countriesLoader" class="ovpn-loader">
                    <div class="spinner-border text-primary" role="status"></div>
                </div>
                <ul class="ovpn-country-list" id="countriesList" style="display:none;"></ul>
                <div class="ovpn-card-header" style="margin-top:8px;border-top:1px solid var(--ovpn-border);padding-top:12px;">
                    <h3>Users by ISP</h3>
                    <span class="muted">Top providers</span>
                </div>
                <ul class="ovpn-country-list" id="ispList">
                    <li class="ovpn-empty" style="display:block;">Loading...</li>
                </ul>
            </div>

            <div class="ovpn-card">
                <div class="ovpn-card-header">
                    <h3>Live Connections Map</h3>
                    <span class="muted">Click a marker for details</span>
                </div>
                <div class="ovpn-map-wrap">
                    <div id="liveConnectionsMap"></div>
                    <div class="ovpn-map-detail" id="mapLocationDetail" style="display:none;">
                        <button type="button" class="ovpn-map-detail-close" id="mapDetailClose" aria-label="Close">&times;</button>
                        <h4 id="mapDetailTitle">Location</h4>
                        <div class="ovpn-map-detail-grid">
                            <div><span>Connections / Users</span><strong id="mapDetailUsers">—</strong></div>
                            <div><span>Servers</span><strong id="mapDetailServers">—</strong></div>
                            <div><span>Country</span><strong id="mapDetailCountry">—</strong></div>
                        </div>
                    </div>
                </div>
                <div class="ovpn-map-top">
                    <h4>Top Locations</h4>
                    <p class="muted" style="margin:0 0 8px;font-size:12px;">By live VPN server connections (not user account country)</p>
                    <ul id="topLocationsList">
                        <li><span>Loading...</span><span></span></li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Live users (last 24 hours) --}}
        <div class="row clearfix">
            <div class="col-12 mb-3">
                <div class="ovpn-card">
                    <div class="ovpn-card-header">
                        <h3>Live Users <span class="muted" style="font-weight:400;font-size:13px;">· last 24 hours</span></h3>
                        <span class="muted" id="liveUsersCurrentLabel">Loading...</span>
                    </div>
                    <div class="ovpn-card-body" style="padding-top:8px;">
                        <div id="liveUsersLoader" class="ovpn-loader">
                            <div class="spinner-border text-primary" role="status"></div>
                        </div>
                        <div class="table-responsive" id="liveUsersWrap" style="display:none;">
                            <table class="table ovpn-table mb-0">
                                <thead>
                                    <tr>
                                        <th>Time</th>
                                        <th>Total Users</th>
                                        <th>Top Country #1</th>
                                        <th>Top Country #2</th>
                                        <th>Top Country #3</th>
                                    </tr>
                                </thead>
                                <tbody id="liveUsersBody"></tbody>
                            </table>
                        </div>
                        <div id="liveUsersEmpty" class="ovpn-empty" style="display:none;padding:16px;">No live user snapshots in the last 24 hours</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Bottom section --}}
        <div class="row clearfix">
            <div class="col-12 mb-3">
                <div class="ovpn-card">
                    <div class="ovpn-card-header">
                        <h3>Top Servers</h3>
                        <a href="{{ route('servers.index') }}" class="muted">View all</a>
                    </div>
                    <div class="ovpn-card-body" style="padding-top:8px;">
                        <div id="topServersLoader" class="ovpn-loader">
                            <div class="spinner-border text-primary" role="status"></div>
                        </div>
                        <div class="table-responsive" id="topServersWrap" style="display:none;">
                            <table class="table ovpn-table mb-0">
                                <thead>
                                    <tr>
                                        <th>Server</th>
                                        <th>CPU</th>
                                        <th>Conn</th>
                                        <th>Throughput</th>
                                        <th>Memory</th>
                                        <th>Uptime</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="topServersBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6 col-12 mb-3">
                <div class="ovpn-card h-100">
                    <div class="ovpn-card-header">
                        <h3>Server Health Overview</h3>
                    </div>
                    <div class="ovpn-donut-wrap">
                        <div id="serverHealthChart"></div>
                        <ul class="ovpn-donut-legend" id="serverHealthLegend"></ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6 col-12 mb-3">
                <div class="ovpn-card h-100">
                    <div class="ovpn-card-header">
                        <h3>Server Capacity</h3>
                    </div>
                    <div class="ovpn-donut-wrap">
                        <div id="serverCapacityChart"></div>
                    </div>
                    <div class="ovpn-capacity-stats" id="capacityStats">
                        <div><span>Total Capacity</span><span id="capTotal">—</span></div>
                        <div><span>In Use</span><span id="capInUse">—</span></div>
                        <div><span>Available</span><span id="capAvailable">—</span></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Activities + Alerts --}}
        <div class="row clearfix">
            <div class="col-lg-6 col-md-6 col-12 mb-3">
                <div class="ovpn-card ovpn-activities-card h-100">
                    <div class="ovpn-card-header">
                        <h3>Recent Activities</h3>
                        <a href="{{ route('users.index') }}" class="muted">View all</a>
                    </div>
                    <div class="ovpn-card-body">
                        <div class="ovpn-activities" id="activitiesList">
                            <div class="ovpn-empty">Loading activities...</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6 col-12 mb-3">
                <div class="ovpn-card h-100">
                    <div class="ovpn-card-header">
                        <h3>Recent Alerts</h3>
                    </div>
                    <div id="alertsLoader" class="ovpn-loader">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>
                    <ul class="ovpn-alerts" id="alertsList" style="display:none;"></ul>
                </div>
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="row clearfix">
            <div class="col-12 mb-3">
                <div class="ovpn-card">
                    <div class="ovpn-card-header">
                        <h3>Quick Actions</h3>
                    </div>
                    <div class="ovpn-card-body">
                        <div class="ovpn-actions">
                            <a class="ovpn-action" href="{{ route('servers.index') }}"><i class="fa fa-server"></i>Add Server</a>
                            <a class="ovpn-action" href="{{ route('protocols.index') }}"><i class="fa fa-bell"></i>Publish Config</a>
                            <a class="ovpn-action" href="{{ route('vouchers.index') }}"><i class="fa fa-ticket"></i>Create Voucher</a>
                            <a class="ovpn-action" href="{{ route('users.index') }}"><i class="fa fa-users"></i>Manage Users</a>
                            <a class="ovpn-action" href="{{ route('plans.index') }}"><i class="fa fa-credit-card"></i>Plans</a>
                            <a class="ovpn-action" href="javascript:void(0);" onclick="document.getElementById('alertsList')?.scrollIntoView({behavior:'smooth'})"><i class="fa fa-exclamation-triangle"></i>View Alerts</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/vendor/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jsvectormap/jsvectormap.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jsvectormap/world.js') }}"></script>
<script>
(function () {
    var sparkCharts = {};
    var growthChart = null;
    var healthChart = null;
    var capacityChart = null;
    var worldMap = null;
    var growthDays = 7;
    var timers = [];
    var mapMarkerData = [];
    var lastTopLocations = [];
    var lastGrowthResponse = null;
    var LIVE_MS = 4000;
    var STATS_MS = 30000;
    var CHART_MS = 60000;
    var LIVE_USERS_MS = 60000;
    var liveInFlight = false;
    var statsInFlight = false;
    var liveUsersInFlight = false;
    var liveXhr = null;
    var statsXhr = null;
    var liveUsersXhr = null;
    var lastLiveHash = '';
    var lastStatsHash = '';
    var lastLiveUsersHash = '';
    var lastMapHash = '';
    var lastServersHash = '';
    var lastAlertsHash = '';
    var lastHealthHash = '';
    var lastCapacityHash = '';
    var rangeStart = moment().subtract(6, 'days');
    var rangeEnd = moment();

    function numberFormat(num) {
        if (num === null || num === undefined || isNaN(num)) return '0';
        return Number(num).toLocaleString('en-US');
    }

    function showMapLocationDetail(marker) {
        if (!marker) return;
        $('#mapDetailTitle').text(marker.name || 'Location');
        $('#mapDetailUsers').text(numberFormat(marker.users || 0));
        $('#mapDetailServers').text(numberFormat(marker.servers || 0));
        $('#mapDetailCountry').text(marker.country || '—');
        $('#mapLocationDetail').fadeIn(150);
    }

    function hideMapLocationDetail() {
        $('#mapLocationDetail').hide();
    }

    function countryFlag(code) {
        if (!code || code === 'OT') return '🌐';
        try {
            return code.toUpperCase().replace(/./g, function (c) {
                return String.fromCodePoint(127397 + c.charCodeAt());
            });
        } catch (e) {
            return code;
        }
    }

    function sparkOptions(data, color) {
        return {
            chart: { type: 'area', height: 28, sparkline: { enabled: true }, animations: { enabled: false } },
            stroke: { curve: 'smooth', width: 2 },
            fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.35, opacityTo: 0.05, stops: [0, 100] } },
            series: [{ data: data && data.length ? data : [0, 0, 0, 0, 0, 0, 0] }],
            colors: [color],
            tooltip: { enabled: false }
        };
    }

    function renderSpark(id, data, color) {
        var el = document.querySelector('#' + id);
        if (!el) return;
        var series = (data && data.length) ? data : [0, 0, 0, 0, 0, 0, 0];
        if (sparkCharts[id]) {
            sparkCharts[id].updateSeries([{ data: series }], false);
            return;
        }
        sparkCharts[id] = new ApexCharts(el, sparkOptions(series, color));
        sparkCharts[id].render();
    }

    function initSparkPlaceholders() {
        renderSpark('sparkTotalUsers', null, '#3b82f6');
        renderSpark('sparkActiveUsers', null, '#10b981');
        renderSpark('sparkPremiumUsers', null, '#8b5cf6');
        renderSpark('sparkLiveConnections', null, '#06b6d4');
        renderSpark('sparkNewRegistrations', null, '#6366f1');
        renderSpark('sparkExpiringSoon', null, '#f59e0b');
        renderSpark('sparkSuccessRate', null, '#14b8a6');
    }

    function statusClass(status) {
        var s = (status || '').toLowerCase();
        if (s === 'running' || s === 'online') return 'online';
        if (s === 'standby' || s === 'reserved' || s === 'maintenance') return 'info';
        if (s === 'disabled' || s === 'offline') return 'offline';
        return 'warning';
    }

    function statusLabel(status) {
        var s = (status || '').toLowerCase();
        if (s === 'running' || s === 'online') return 'Online';
        if (s === 'disabled' || s === 'offline') return 'Offline';
        if (s === 'standby') return 'Standby';
        return status || 'Unknown';
    }

    function loadDashboardStats(force) {
        if (statsInFlight) {
            if (force && statsXhr && statsXhr.readyState !== 4) {
                try { statsXhr.abort(); } catch (e) {}
            } else {
                return;
            }
        }
        statsInFlight = true;
        statsXhr = $.ajax({
            url: '{{ route("dashboard.statistics") }}',
            method: 'GET',
            cache: false,
            data: {
                start_date: rangeStart.format('YYYY-MM-DD'),
                end_date: rangeEnd.format('YYYY-MM-DD'),
                _: Date.now()
            },
            timeout: 90000,
            success: function (res) {
                var fp = fingerprint(res);
                if (!force && fp === lastStatsHash) return;
                lastStatsHash = fp;

                $('#kpiTotalUsers').text(numberFormat(res.total_users));
                $('#kpiActiveUsers').text(numberFormat(res.active_users));
                $('#kpiPremiumUsers').text(numberFormat(res.premium_users));
                // Live connections / success rate are owned by the fast live poller
                if (!lastLiveHash) {
                    $('#kpiLiveConnections').text(numberFormat(res.live_connections || res.online_users));
                    $('#kpiSuccessRate').text((res.connection_success_rate || 0) + '%');
                }
                $('#kpiNewRegistrations').text(numberFormat(res.today_registrations));
                $('#kpiExpiringSoon').text(numberFormat(res.expiring_soon));

                var trends = res.trends || {};
                function applyTrend(id, text, fallback) {
                    var label = text || fallback;
                    var $el = $(id);
                    $el.text(label);
                    $el.removeClass('up down flat');
                    if (String(label).indexOf('-') === 0) {
                        $el.addClass('down');
                    } else if (String(label).indexOf('+') === 0) {
                        $el.addClass('up');
                    } else {
                        $el.addClass('flat');
                    }
                }
                applyTrend('#kpiTotalUsersTrend', trends.total_users, 'vs selected period');
                applyTrend('#kpiActiveUsersTrend', trends.active_users, 'vs prior period');
                applyTrend('#kpiPremiumUsersTrend', trends.premium_users, 'vs selected period');
                if (!lastLiveHash) {
                    applyTrend('#kpiLiveConnectionsTrend', trends.live_connections, 'concurrent now');
                    applyTrend('#kpiSuccessRateTrend', trends.success_rate, 'server uptime');
                }
                applyTrend('#kpiNewRegistrationsTrend', trends.today_registrations, 'vs prior period');
                applyTrend('#kpiExpiringSoonTrend', trends.expiring_soon, 'next 7 days');

                if (!lastLiveHash) {
                    if (res.systems_ok) {
                        $('#systemsStatusText').text('All Systems Operational');
                        $('#systemsStatusPill').removeClass('is-warn').addClass('is-ok');
                    } else {
                        $('#systemsStatusText').text('Attention Required');
                        $('#systemsStatusPill').removeClass('is-ok').addClass('is-warn');
                    }
                }

                var sparks = res.sparklines || {};
                renderSpark('sparkTotalUsers', sparks.total_users, '#3b82f6');
                renderSpark('sparkActiveUsers', sparks.active_users, '#10b981');
                renderSpark('sparkPremiumUsers', sparks.premium_users, '#8b5cf6');
                renderSpark('sparkLiveConnections', sparks.online_users, '#06b6d4');
                renderSpark('sparkNewRegistrations', sparks.registrations, '#6366f1');
                renderSpark('sparkExpiringSoon', sparks.expiring_soon, '#f59e0b');
                renderSpark('sparkSuccessRate', sparks.success_rate, '#14b8a6');

                renderCountries(res.countries || []);
                renderIsps(res.isps || []);
                renderActivities(res.activities || []);

                // Only apply heavy live widgets from full stats if live poll hasn't started yet
                if (!lastLiveHash) {
                    renderServerHealth(res.server_health || {});
                    renderCapacity(res.capacity || {});
                    renderMap(res.map_markers || [], res.top_locations || []);
                }
            },
            error: function (xhr, status) {
                if (status === 'abort' || status === 'timeout') {
                    if (status === 'timeout') {
                        console.warn('Dashboard stats timed out — retrying once');
                        setTimeout(function () { loadDashboardStats(true); }, 1500);
                    }
                    return;
                }
                // Keep previous numbers if we already have data; only show Error on first load
                ['#kpiTotalUsers', '#kpiActiveUsers', '#kpiPremiumUsers', '#kpiNewRegistrations', '#kpiExpiringSoon'].forEach(function (sel) {
                    var t = $(sel).text();
                    if (!t || t === '—' || t === 'Loading...' || t === '0' && !lastStatsHash) {
                        // leave as-is unless empty-looking
                    }
                    if (!lastStatsHash) {
                        $(sel).text('—');
                    }
                });
            },
            complete: function () {
                statsInFlight = false;
                statsXhr = null;
            }
        });
    }

    function renderCountries(list) {
        $('#countriesLoader').hide();
        var $ul = $('#countriesList').empty().show();
        if (!list.length) {
            $ul.html('<li class="ovpn-empty" style="display:block;">No country data yet</li>');
            return;
        }
        list.forEach(function (c) {
            $ul.append(
                '<li>' +
                    '<div style="font-size:18px;line-height:1;">' + countryFlag(c.code) + '</div>' +
                    '<div class="ovpn-country-meta">' +
                        '<div class="ovpn-country-name">' + (c.name || c.code) + '</div>' +
                        '<div class="ovpn-progress"><span style="width:' + (c.percent || 0) + '%"></span></div>' +
                    '</div>' +
                    '<div class="ovpn-country-pct">' + numberFormat(c.count || 0) + ' · ' + (c.percent || 0) + '%</div>' +
                '</li>'
            );
        });
    }

    function renderIsps(list) {
        var $ul = $('#ispList').empty();
        if (!list || !list.length) {
            $ul.html('<li class="ovpn-empty" style="display:block;">No ISP data yet</li>');
            return;
        }
        list.forEach(function (isp) {
            $ul.append(
                '<li>' +
                    '<div style="font-size:16px;line-height:1;opacity:.7;"><i class="fa fa-wifi"></i></div>' +
                    '<div class="ovpn-country-meta">' +
                        '<div class="ovpn-country-name">' + (isp.name || 'Unknown') + '</div>' +
                        '<div class="ovpn-progress"><span style="width:' + (isp.percent || 0) + '%"></span></div>' +
                    '</div>' +
                    '<div class="ovpn-country-pct">' + numberFormat(isp.count || 0) + ' · ' + (isp.percent || 0) + '%</div>' +
                '</li>'
            );
        });
    }

    function renderActivities(list) {
        var $wrap = $('#activitiesList').empty();
        if (!list.length) {
            $wrap.html('<div class="ovpn-empty">No recent activities</div>');
            return;
        }
        list.forEach(function (a) {
            $wrap.append(
                '<div class="ovpn-activity">' +
                    '<div class="ovpn-activity-icon"><i class="fa fa-' + (a.icon || 'info-circle') + '"></i></div>' +
                    '<div>' +
                        '<div class="ovpn-activity-title">' + (a.title || '') + '</div>' +
                        '<div class="ovpn-activity-meta">' + (a.meta || '') + '</div>' +
                    '</div>' +
                '</div>'
            );
        });
    }

    function renderServerHealth(h) {
        var series = [
            h.healthy || 0,
            h.warning || 0,
            h.critical || 0,
            h.offline || 0
        ];
        var labels = ['Healthy', 'Warning', 'Critical', 'Offline'];
        var colors = ['#22c55e', '#f59e0b', '#ef4444', '#94a3b8'];
        var options = {
            chart: { type: 'donut', height: 220 },
            series: series,
            labels: labels,
            colors: colors,
            legend: { show: false },
            dataLabels: { enabled: false },
            plotOptions: {
                pie: {
                    donut: {
                        size: '72%',
                        labels: {
                            show: true,
                            name: { show: true, fontSize: '12px', color: '#64748b', offsetY: 18 },
                            value: { show: true, fontSize: '22px', fontWeight: 800, color: '#0f172a', offsetY: -10, formatter: function () { return (h.healthy_pct || 0) + '%'; } },
                            total: { show: true, label: 'Healthy', formatter: function () { return (h.healthy_pct || 0) + '%'; } }
                        }
                    }
                }
            },
            stroke: { width: 0 }
        };

        if (healthChart) {
            healthChart.updateOptions(options);
        } else {
            healthChart = new ApexCharts(document.querySelector('#serverHealthChart'), options);
            healthChart.render();
        }

        var legend = '';
        labels.forEach(function (label, i) {
            legend += '<li><span class="left"><span class="swatch" style="background:' + colors[i] + '"></span>' + label + '</span><span class="val">' + numberFormat(series[i]) + '</span></li>';
        });
        legend += '<li><span class="left"><strong>Total Servers</strong></span><span class="val">' + numberFormat(h.total || 0) + '</span></li>';
        $('#serverHealthLegend').html(legend);
    }

    function renderCapacity(c) {
        var used = c.used_pct || 0;
        var dark = isDarkTheme();
        var inUse = Number(c.in_use || 0);
        var available = Number(c.available || 0);
        // Keep a blue ring even when usage is 0
        if (inUse <= 0 && available <= 0) {
            available = 1;
        }

        var options = {
            chart: { type: 'donut', height: 200, background: 'transparent' },
            series: [Math.max(inUse, 0), Math.max(available, 0)],
            labels: ['In Use', 'Available'],
            colors: ['#2563eb', '#93c5fd'],
            legend: { show: false },
            dataLabels: { enabled: false },
            plotOptions: {
                pie: {
                    donut: {
                        size: '75%',
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: '12px',
                                color: dark ? '#93c5fd' : '#2563eb',
                                offsetY: 18
                            },
                            value: {
                                show: true,
                                fontSize: '22px',
                                fontWeight: 800,
                                color: '#2563eb',
                                offsetY: -10,
                                formatter: function () { return used + '%'; }
                            },
                            total: {
                                show: true,
                                label: 'Used',
                                color: dark ? '#93c5fd' : '#2563eb',
                                formatter: function () { return used + '%'; }
                            }
                        }
                    }
                }
            },
            stroke: { width: 0 }
        };

        if (capacityChart) {
            capacityChart.updateOptions(options);
        } else {
            capacityChart = new ApexCharts(document.querySelector('#serverCapacityChart'), options);
            capacityChart.render();
        }

        $('#capTotal').text(numberFormat(c.total || 0));
        $('#capInUse').text(numberFormat(c.in_use || 0));
        $('#capAvailable').text(numberFormat(c.available || 0));
    }

    function isDarkTheme() {
        var theme = document.documentElement.getAttribute('data-theme')
            || document.body.getAttribute('data-theme')
            || localStorage.getItem('theme')
            || 'light';
        return theme === 'dark' || theme === 'high-contrast';
    }

    function getChartThemeColors() {
        var dark = isDarkTheme();
        return {
            dark: dark,
            background: 'transparent',
            grid: dark ? '#3b3f42' : '#e5e7eb',
            text: dark ? '#9ca3af' : '#64748b',
            regionFill: dark ? '#3b3f42' : '#dbe3ee',
            regionStroke: dark ? '#26282a' : '#ffffff',
            regionHover: dark ? '#4b5563' : '#93c5fd',
            markerStroke: dark ? '#1f2937' : '#ffffff'
        };
    }

    function renderGrowthChartFromData(res) {
        if (!res) return;
        lastGrowthResponse = res;
        var colors = getChartThemeColors();
        var values = (res.growth || res.users || []).map(function (v) {
            return Number(v) || 0;
        });
        var n = values.length || 7;

        // Blue → teal → green gradient across bars (matches feedback mock)
        var barColors = [];
        for (var i = 0; i < n; i++) {
            var t = n <= 1 ? 1 : i / (n - 1);
            barColors.push(lerpColor('#1d4ed8', '#22c55e', t));
        }

        // Zoom Y-axis into the data range so growth is visible (not flattened by zero baseline)
        var minVal = values.length ? Math.min.apply(null, values) : 0;
        var maxVal = values.length ? Math.max.apply(null, values) : 0;
        var span = Math.max(0, maxVal - minVal);
        var pad = Math.max(1, Math.ceil(span * 0.2) || Math.ceil(Math.max(maxVal, 1) * 0.05));
        var yMin = Math.max(0, minVal - pad);
        var yMax = maxVal + pad;
        if (yMin === yMax) {
            yMin = Math.max(0, yMin - 2);
            yMax = yMax + 2;
        }

        var options = {
            chart: {
                type: 'bar',
                height: 280,
                toolbar: { show: false },
                zoom: { enabled: false },
                background: 'transparent',
                foreColor: colors.text,
                animations: { enabled: true, speed: 450 }
            },
            theme: { mode: colors.dark ? 'dark' : 'light' },
            series: [{ name: 'Total Users', data: values }],
            colors: barColors,
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    columnWidth: n > 14 ? '70%' : '55%',
                    dataLabels: { position: 'top' }
                }
            },
            legend: { show: false },
            dataLabels: {
                enabled: n <= 14,
                offsetY: -16,
                style: {
                    fontSize: '11px',
                    fontWeight: 700,
                    colors: [colors.text]
                },
                formatter: function (v) { return numberFormat(Math.round(v || 0)); }
            },
            stroke: { show: false },
            fill: { opacity: 1 },
            grid: {
                borderColor: colors.grid,
                strokeDashArray: 4,
                yaxis: { lines: { show: true } },
                padding: { top: 18 }
            },
            xaxis: {
                categories: res.labels || [],
                labels: {
                    style: { colors: colors.text, fontSize: n > 14 ? '10px' : '11px' },
                    rotate: n > 14 ? -45 : 0,
                    hideOverlappingLabels: true
                },
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: {
                min: yMin,
                max: yMax,
                title: {
                    text: 'Total users',
                    style: { color: colors.text, fontSize: '11px', fontWeight: 600 }
                },
                labels: {
                    style: { colors: colors.text, fontSize: '11px' },
                    formatter: function (v) { return numberFormat(Math.round(v || 0)); }
                }
            },
            tooltip: {
                theme: colors.dark ? 'dark' : 'light',
                y: {
                    formatter: function (v) { return numberFormat(Math.round(v || 0)) + ' total users'; }
                }
            }
        };

        if (growthChart) {
            try { growthChart.destroy(); } catch (e) {}
            growthChart = null;
            $('#userGrowthChart').empty();
        }
        growthChart = new ApexCharts(document.querySelector('#userGrowthChart'), options);
        growthChart.render();
        $('#userGrowthLoader').hide();
        $('#userGrowthChart').show();
    }

    function lerpColor(a, b, t) {
        function hexToRgb(hex) {
            hex = hex.replace('#', '');
            return [
                parseInt(hex.substring(0, 2), 16),
                parseInt(hex.substring(2, 4), 16),
                parseInt(hex.substring(4, 6), 16)
            ];
        }
        var ca = hexToRgb(a);
        var cb = hexToRgb(b);
        var r = Math.round(ca[0] + (cb[0] - ca[0]) * t);
        var g = Math.round(ca[1] + (cb[1] - ca[1]) * t);
        var bl = Math.round(ca[2] + (cb[2] - ca[2]) * t);
        return '#' + [r, g, bl].map(function (x) {
            var h = x.toString(16);
            return h.length === 1 ? '0' + h : h;
        }).join('');
    }

    function refreshThemeVisuals() {
        if (lastGrowthResponse) {
            renderGrowthChartFromData(lastGrowthResponse);
        }
        if (mapMarkerData.length || lastTopLocations.length) {
            renderMap(mapMarkerData, lastTopLocations);
        }
    }

    function renderMap(markers, topLocations) {
        mapMarkerData = markers || [];
        lastTopLocations = topLocations || [];
        hideMapLocationDetail();

        var themeColors = getChartThemeColors();
        var $locs = $('#topLocationsList').empty();
        if (!lastTopLocations.length) {
            $locs.html('<li><span>No data</span><span>—</span></li>');
        } else {
            lastTopLocations.forEach(function (loc, idx) {
                $locs.append(
                    '<li data-loc-index="' + idx + '" data-loc-name="' + String(loc.name || '').replace(/"/g, '&quot;') + '">' +
                        '<span>' + loc.name + '</span><span>' + numberFormat(loc.count) + '</span>' +
                    '</li>'
                );
            });
        }

        $('#topLocationsList').off('click', 'li').on('click', 'li', function () {
            var name = $(this).data('loc-name');
            var match = mapMarkerData.find(function (m) {
                return String(m.name || '').toLowerCase() === String(name || '').toLowerCase();
            });
            if (match) {
                showMapLocationDetail(match);
            } else {
                var rawCount = $(this).find('span').last().text().replace(/,/g, '');
                showMapLocationDetail({
                    name: name,
                    users: parseInt(rawCount, 10) || 0,
                    servers: 0,
                    country: '—'
                });
            }
        });

        var maxUsers = 1;
        mapMarkerData.forEach(function (m) {
            maxUsers = Math.max(maxUsers, Number(m.users || 0), Number(m.servers || 0));
        });

        var mapMarkers = mapMarkerData.slice(0, 40).map(function (m) {
            var weight = Math.max(Number(m.users || 0), Number(m.servers || 0), 1);
            var radius = 4 + Math.round((weight / maxUsers) * 6);
            return {
                name: (m.name || 'Location') + ' (' + numberFormat(weight) + ')',
                coords: m.coords,
                style: {
                    fill: '#3b82f6',
                    stroke: themeColors.markerStroke,
                    strokeWidth: 1.5,
                    r: Math.min(12, Math.max(4, radius))
                }
            };
        });

        if (worldMap) {
            try { worldMap.destroy(); } catch (e) {}
            worldMap = null;
            $('#liveConnectionsMap').empty();
        }

        worldMap = new jsVectorMap({
            selector: '#liveConnectionsMap',
            map: 'world',
            backgroundColor: 'transparent',
            zoomButtons: false,
            zoomOnScroll: false,
            regionStyle: {
                initial: { fill: themeColors.regionFill, stroke: themeColors.regionStroke, strokeWidth: 0.5 },
                hover: { fill: themeColors.regionHover }
            },
            markers: mapMarkers,
            markerStyle: {
                initial: { fill: '#3b82f6', stroke: themeColors.markerStroke, strokeWidth: 1.5, r: 5 },
                hover: { fill: '#60a5fa' }
            },
            onMarkerClick: function (event, markerIndex) {
                var data = mapMarkerData[markerIndex];
                if (data) {
                    showMapLocationDetail(data);
                }
            }
        });

        $('#mapDetailClose').off('click').on('click', hideMapLocationDetail);
    }

    function loadGrowthChart(days) {
        growthDays = days || growthDays;
        $('#userGrowthLoader').show();
        $('#userGrowthChart').hide();

        $.ajax({
            url: '{{ route("dashboard.usage-chart-data") }}',
            method: 'GET',
            cache: false,
            data: { days: growthDays, _: Date.now() },
            success: function (res) {
                renderGrowthChartFromData(res);
            },
            error: function () {
                $('#userGrowthLoader').html('<p class="text-danger mb-0">Failed to load chart</p>');
            }
        });
    }

    function applyTopServers(rows) {
        var $body = $('#topServersBody').empty();
        $('#topServersLoader').hide();
        $('#topServersWrap').show();

        if (!rows || !rows.length) {
            $body.html('<tr><td colspan="7" class="text-center text-muted">No servers found</td></tr>');
            return;
        }

        rows.forEach(function (s) {
            var loadPct = s.cpu_usage != null ? s.cpu_usage : s.load_percent;
            var barClass = 'ok';
            var width = 0;
            if (loadPct !== null && loadPct !== undefined && !isNaN(loadPct)) {
                width = Math.max(0, Math.min(100, loadPct));
                if (width >= 80) barClass = 'crit';
                else if (width >= 60) barClass = 'warn';
            } else if (/high|critical|overload/i.test(String(s.load || ''))) {
                width = 85;
                barClass = 'crit';
            } else if (String(s.load || '').toLowerCase() !== 'n/a') {
                width = 35;
            }

            var loc = s.location && s.location !== 'N/A' ? s.location : (s.country || '');
            var hostLine = s.hostname && s.hostname !== s.name
                ? '<div class="ovpn-server-host">' + s.hostname + '</div>'
                : '';
            var locLine = loc
                ? '<div class="ovpn-server-loc">' + loc + '</div>'
                : '';

            var memPct = s.memory_percent;
            var memClass = 'ok';
            if (memPct != null && !isNaN(memPct)) {
                if (memPct >= 85) memClass = 'crit';
                else if (memPct >= 70) memClass = 'warn';
            }

            $body.append(
                '<tr>' +
                    '<td>' +
                        '<div class="ovpn-server-name">' + (s.name || '-') + '</div>' +
                        hostLine + locLine +
                    '</td>' +
                    '<td class="ovpn-load-cell">' +
                        '<div class="ovpn-load-bar"><span class="' + barClass + '" style="width:' + width + '%"></span></div>' +
                        '<div class="ovpn-load-text">' + (s.load || 'N/A') + '</div>' +
                    '</td>' +
                    '<td>' +
                        '<strong>' + numberFormat(s.user_count || 0) + '</strong>' +
                        (s.total_connections != null
                            ? '<div class="ovpn-server-meta">total ' + numberFormat(s.total_connections) + '</div>'
                            : '') +
                    '</td>' +
                    '<td><div class="ovpn-throughput">' + (s.throughput || 'N/A') + '</div></td>' +
                    '<td class="ovpn-load-cell">' +
                        (memPct != null
                            ? '<div class="ovpn-load-bar"><span class="' + memClass + '" style="width:' + Math.min(100, memPct) + '%"></span></div>'
                            : '') +
                        '<div class="ovpn-load-text">' + (s.memory || 'N/A') + '</div>' +
                    '</td>' +
                    '<td><div class="ovpn-uptime">' + (s.uptime || 'N/A') + '</div></td>' +
                    '<td><span class="ovpn-status-dot ' + statusClass(s.status) + '">' + statusLabel(s.status) + '</span></td>' +
                '</tr>'
            );
        });
    }

    function applyAlerts(alerts) {
        $('#alertsLoader').hide();
        var $list = $('#alertsList').empty().show();
        if (!alerts || !alerts.length) {
            $list.html('<li class="ovpn-empty" style="display:block;">No alerts</li>');
            return;
        }
        alerts.slice(0, 6).forEach(function (a) {
            var type = a.type || 'info';
            $list.append(
                '<li>' +
                    '<div class="ovpn-alert-icon ' + type + '"><i class="fa fa-' + (a.icon || 'info-circle') + '"></i></div>' +
                    '<div class="ovpn-alert-msg">' + (a.message || '') + '</div>' +
                    '<div class="ovpn-alert-time">' + (a.time || '') + '</div>' +
                '</li>'
            );
        });
    }

    function applyLivePayload(res) {
        if (!res) return;

        $('#kpiLiveConnections').text(numberFormat(res.live_connections || 0));
        if (res.connection_success_rate !== undefined && res.connection_success_rate !== null) {
            $('#kpiSuccessRate').text((res.connection_success_rate || 0) + '%');
        }

        var trends = res.trends || {};
        if (trends.live_connections) {
            $('#kpiLiveConnectionsTrend').text(trends.live_connections).removeClass('up down flat').addClass('flat');
        }
        if (trends.success_rate) {
            $('#kpiSuccessRateTrend').text(trends.success_rate).removeClass('up down flat').addClass('flat');
        }

        if (res.systems_ok) {
            $('#systemsStatusText').text('All Systems Operational');
            $('#systemsStatusPill').removeClass('is-warn').addClass('is-ok');
        } else if (res.systems_ok === false) {
            $('#systemsStatusText').text('Attention Required');
            $('#systemsStatusPill').removeClass('is-ok').addClass('is-warn');
        }

        var healthFp = fingerprint(res.server_health || {});
        if (healthFp !== lastHealthHash) {
            lastHealthHash = healthFp;
            renderServerHealth(res.server_health || {});
        }

        var cap = res.capacity || {};
        var capFp = fingerprint({
            in_use: cap.in_use,
            available: cap.available,
            used_pct: cap.used_pct,
            total: cap.total
        });
        if (capFp !== lastCapacityHash) {
            lastCapacityHash = capFp;
            renderCapacity(cap);
        }

        var mapFp = fingerprint({
            markers: res.map_markers || [],
            locations: res.top_locations || []
        });
        if (mapFp !== lastMapHash) {
            lastMapHash = mapFp;
            renderMap(res.map_markers || [], res.top_locations || []);
        }

        var serversFp = fingerprint((res.top_servers || []).map(function (s) {
            return {
                name: s.name,
                hostname: s.hostname,
                status: s.status,
                user_count: s.user_count,
                cpu_usage: s.cpu_usage,
                memory_percent: s.memory_percent,
                upload_bps: s.upload_bps,
                download_bps: s.download_bps,
                uptime: s.uptime,
                throughput: s.throughput,
                memory: s.memory,
                load: s.load,
                total_connections: s.total_connections,
                location: s.location
            };
        }));
        if (serversFp !== lastServersHash) {
            lastServersHash = serversFp;
            applyTopServers(res.top_servers || []);
        }

        var alertsFp = fingerprint(res.alerts || []);
        if (alertsFp !== lastAlertsHash) {
            lastAlertsHash = alertsFp;
            applyAlerts(res.alerts || []);
        }

        var sparks = res.sparklines || {};
        if (sparks.online_users) {
            renderSpark('sparkLiveConnections', sparks.online_users, '#06b6d4');
        }
        if (sparks.success_rate) {
            renderSpark('sparkSuccessRate', sparks.success_rate, '#14b8a6');
        }
    }

    function fingerprint(obj) {
        try { return JSON.stringify(obj); } catch (e) { return String(Date.now()); }
    }

    function liveFingerprint(res) {
        return fingerprint({
            live_connections: res.live_connections,
            connection_success_rate: res.connection_success_rate,
            systems_ok: res.systems_ok,
            server_health: res.server_health,
            capacity: {
                in_use: (res.capacity || {}).in_use,
                available: (res.capacity || {}).available,
                used_pct: (res.capacity || {}).used_pct,
                total: (res.capacity || {}).total
            },
            map_markers: res.map_markers,
            top_locations: res.top_locations,
            top_servers: (res.top_servers || []).map(function (s) {
                return {
                    name: s.name,
                    status: s.status,
                    user_count: s.user_count,
                    cpu_usage: s.cpu_usage,
                    memory_percent: s.memory_percent,
                    upload_bps: s.upload_bps,
                    download_bps: s.download_bps,
                    uptime: s.uptime
                };
            }),
            alerts: res.alerts,
            sparklines: res.sparklines || null
        });
    }

    function loadLiveSnapshot(force) {
        if (liveInFlight) {
            if (force && liveXhr && liveXhr.readyState !== 4) {
                try { liveXhr.abort(); } catch (e) {}
            } else {
                return;
            }
        }
        liveInFlight = true;
        liveXhr = $.ajax({
            url: '{{ route("dashboard.live") }}',
            method: 'GET',
            cache: false,
            data: { _: Date.now() },
            timeout: 12000,
            success: function (res) {
                var fp = liveFingerprint(res || {});
                if (!force && fp === lastLiveHash) return;
                lastLiveHash = fp;
                applyLivePayload(res);
            },
            complete: function () {
                liveInFlight = false;
                liveXhr = null;
            }
        });
    }

    function loadTopServers() {
        loadLiveSnapshot(true);
    }

    function loadAlerts() {
        loadLiveSnapshot(true);
    }

    function formatCountryCell(country) {
        if (!country) {
            return '<span class="muted">—</span>';
        }
        var code = country.code || '';
        var name = country.name || code || 'Unknown';
        var count = numberFormat(country.count || 0);
        var flag = code && code !== 'UNKNOWN' ? countryFlag(code) + ' ' : '';
        return flag + name + ' <span class="muted">(' + count + ')</span>';
    }

    function renderLiveUsersTable(res) {
        $('#liveUsersLoader').hide();
        var records = (res && res.records) ? res.records : [];
        var current = res && res.current ? res.current : null;

        if (current && current.total_users != null) {
            $('#liveUsersCurrentLabel').text('Now: ' + numberFormat(current.total_users) + ' users');
        } else {
            $('#liveUsersCurrentLabel').text('Last 24 hours');
        }

        var $body = $('#liveUsersBody').empty();
        if (!records.length) {
            $('#liveUsersWrap').hide();
            $('#liveUsersEmpty').show();
            return;
        }

        $('#liveUsersEmpty').hide();
        $('#liveUsersWrap').show();

        records.forEach(function (row) {
            var countries = row.top_countries || [];
            $body.append(
                '<tr>' +
                    '<td>' + (row.date_label || row.date || '—') + '</td>' +
                    '<td><strong>' + numberFormat(row.total_users || 0) + '</strong></td>' +
                    '<td>' + formatCountryCell(countries[0]) + '</td>' +
                    '<td>' + formatCountryCell(countries[1]) + '</td>' +
                    '<td>' + formatCountryCell(countries[2]) + '</td>' +
                '</tr>'
            );
        });
    }

    function loadLiveUsersStats(force) {
        if (liveUsersInFlight) {
            if (force && liveUsersXhr && liveUsersXhr.readyState !== 4) {
                try { liveUsersXhr.abort(); } catch (e) {}
            } else {
                return;
            }
        }
        liveUsersInFlight = true;
        liveUsersXhr = $.ajax({
            url: '{{ route("dashboard.live-users-stats") }}',
            method: 'GET',
            cache: false,
            data: { _: Date.now() },
            timeout: 30000,
            success: function (res) {
                var fp = fingerprint(res || {});
                if (!force && fp === lastLiveUsersHash) return;
                lastLiveUsersHash = fp;
                renderLiveUsersTable(res || {});
            },
            error: function () {
                $('#liveUsersLoader').hide();
                if (!lastLiveUsersHash) {
                    $('#liveUsersWrap').hide();
                    $('#liveUsersEmpty').text('Unable to load live users stats').show();
                    $('#liveUsersCurrentLabel').text('Unavailable');
                }
            },
            complete: function () {
                liveUsersInFlight = false;
                liveUsersXhr = null;
            }
        });
    }

    window.refreshDashboard = function () {
        lastLiveHash = '';
        lastStatsHash = '';
        lastLiveUsersHash = '';
        lastMapHash = '';
        lastServersHash = '';
        lastAlertsHash = '';
        lastHealthHash = '';
        lastCapacityHash = '';
        loadLiveSnapshot(true);
        loadDashboardStats(true);
        loadLiveUsersStats(true);
        loadGrowthChart(growthDays);
    };

    function startOptimizedPolling() {
        timers.forEach(clearInterval);
        timers = [];

        function runLive() {
            if (document.hidden) return;
            loadLiveSnapshot(false);
        }
        function runStats() {
            if (document.hidden) return;
            loadDashboardStats(false);
        }
        function runChart() {
            if (document.hidden) return;
            loadGrowthChart(growthDays);
        }
        function runLiveUsers() {
            if (document.hidden) return;
            loadLiveUsersStats(false);
        }

        // Stagger first loads so the browser isn't flooded; wait for live cache before heavy stats
        initSparkPlaceholders();
        loadLiveSnapshot(true);
        setTimeout(function () { loadDashboardStats(true); }, 400);
        setTimeout(function () { loadLiveUsersStats(true); }, 700);
        setTimeout(function () { loadGrowthChart(growthDays); }, 900);

        timers.push(setInterval(runLive, LIVE_MS));
        timers.push(setInterval(runStats, STATS_MS));
        timers.push(setInterval(runLiveUsers, LIVE_USERS_MS));
        timers.push(setInterval(runChart, CHART_MS));

        document.addEventListener('visibilitychange', function () {
            if (!document.hidden) {
                loadLiveSnapshot(true);
            }
        });
    }

    $(document).ready(function () {
        function setRangeLabel(s, e) {
            $('#dashboardDateRangeLabel').text(s.format('MMM DD, YYYY') + ' - ' + e.format('MMM DD, YYYY'));
        }
        setRangeLabel(rangeStart, rangeEnd);

        $('#dashboardDateRange').daterangepicker({
            startDate: rangeStart,
            endDate: rangeEnd,
            maxDate: moment(),
            opens: 'left',
            ranges: {
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 14 Days': [moment().subtract(13, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()]
            }
        }, function (s, e) {
            rangeStart = s.clone().startOf('day');
            rangeEnd = e.clone().startOf('day');
            setRangeLabel(rangeStart, rangeEnd);
            var days = rangeEnd.diff(rangeStart, 'days') + 1;
            growthDays = Math.min(30, Math.max(1, days));
            $('#growthDaysFilter').val(String(Math.min(30, Math.max(7, days))));
            lastStatsHash = '';
            loadDashboardStats(true);
            loadGrowthChart(growthDays);
        });

        $('#growthDaysFilter').on('change', function () {
            loadGrowthChart(parseInt($(this).val(), 10));
        });

        startOptimizedPolling();

        window.addEventListener('app-theme-changed', function () {
            setTimeout(refreshThemeVisuals, 50);
        });
    });

    $(window).on('beforeunload', function () {
        timers.forEach(clearInterval);
        if (liveXhr) { try { liveXhr.abort(); } catch (e) {} }
        if (statsXhr) { try { statsXhr.abort(); } catch (e) {} }
        if (liveUsersXhr) { try { liveUsersXhr.abort(); } catch (e) {} }
    });
})();
</script>
@endpush