{% extends "base.html" %}
{% block title %}Usage Report - OpenVPN Manager{% endblock %}

{% block content %}
<style>
.usage-bar-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
}
.light-theme .usage-bar-track {
    background: rgba(100, 116, 139, 0.16);
}
.usage-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--stat-rgb), 0.7), rgb(var(--stat-rgb)));
    box-shadow: 0 0 6px 0 rgba(var(--stat-rgb), 0.6);
    transition: width 0.6s ease;
}
.light-theme .usage-bar-fill {
    background: linear-gradient(90deg, rgba(var(--stat-rgb-light), 0.7), rgb(var(--stat-rgb-light)));
    box-shadow: 0 0 6px 0 rgba(var(--stat-rgb-light), 0.5);
}

.usage-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;
}
.usage-preset-btn:hover {
    background: rgba(96,165,250,0.18);
    border-color: rgba(96,165,250,0.45);
}
.light-theme .usage-preset-btn {
    background: rgba(37,99,235,0.08);
    border-color: rgba(37,99,235,0.22);
    color: #1d4ed8;
}
.light-theme .usage-preset-btn:hover {
    background: rgba(37,99,235,0.15);
}

.usage-report-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.light-theme .usage-report-row {
    border-bottom-color: rgba(17,24,39,0.08);
}
.usage-report-row:last-child {
    border-bottom: none;
}
.usage-report-rank {
    flex-shrink: 0;
    width: 1.75rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}
.usage-report-rank.top1 { color: #facc15; }
.usage-report-rank.top2 { color: #cbd5e1; }
.usage-report-rank.top3 { color: #d97706; }
.usage-report-main {
    flex-grow: 1;
    min-width: 0;
}
.usage-report-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.usage-report-name {
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.light-theme .usage-report-name { color: #111827; }
.usage-report-total {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgb(var(--stat-rgb));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.light-theme .usage-report-total { color: rgb(var(--stat-rgb-light)); }
.usage-report-breakdown {
    display: flex;
    gap: 0.9rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.light-theme .usage-report-breakdown { color: #6b7280; }
.usage-report-breakdown i { margin-inline-end: 0.3rem; }

.usage-report-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #9ca3af;
}
.usage-report-empty i {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.6;
}

.report-chart-box {
    position: relative;
    height: 240px;
}

.usage-search-wrap {
    position: relative;
}
.usage-search-wrap i {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.85rem;
    pointer-events: none;
}
.usage-search-wrap input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.5rem;
    background: #374151;
    color: #ffffff;
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
}
.usage-search-wrap input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(74,222,128,0.5);
}
.light-theme .usage-search-wrap input {
    background: #ffffff;
    color: #111827;
    border-color: #d1d5db;
}
.light-theme .usage-search-wrap i {
    color: #9ca3af;
}

.select-resellers-cta {
    background: linear-gradient(135deg, #22c55e, #0d9488);
    color: #ffffff;
    box-shadow: 0 6px 18px -6px rgba(13,148,136,0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.select-resellers-cta:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 22px -6px rgba(13,148,136,0.7);
}
.light-theme .select-resellers-cta {
    background: linear-gradient(135deg, #16a34a, #0f766e);
    box-shadow: 0 6px 18px -6px rgba(15,118,110,0.35);
}
.light-theme .select-resellers-cta:hover {
    filter: brightness(1.05);
}

#detailedReportModal {
    z-index: 60;
}
#detailedReportModal .settings-modal-content {
    max-width: 60rem;
}

@media print {
    body * { visibility: hidden !important; }
    #detailedReportPrintArea, #detailedReportPrintArea * { visibility: visible !important; }
    #detailedReportPrintArea {
        position: absolute !important;
        top: 0; left: 0;
        width: 100% !important;
        background: #ffffff !important;
        color: #111827 !important;
        padding: 1rem !important;
    }
    #detailedReportPrintArea .usage-report-name,
    #detailedReportPrintArea .usage-report-total { color: #111827 !important; }
    #detailedReportPrintArea canvas { max-width: 100% !important; }
}
</style>

<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ url_for('sub_admins_management') }}" 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>Back to Sub-Admins</span>
        </a>
    </div>

    <div class="mb-6 flex items-center gap-3">
        <span class="system-status-icon-badge text-purple-400 bg-purple-900">
            <i class="fas fa-chart-column"></i>
        </span>
        <div>
            <h2 class="text-2xl font-bold text-white">Usage Report</h2>
            <p class="text-sm text-gray-400">Traffic consumed by each reseller's users during a date range</p>
        </div>
    </div>

    <div class="compact-card mb-6" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
        <h3 class="compact-card-title"><i class="fas fa-calendar-range text-blue-400"></i> Select Date Range</h3>
        <div class="flex flex-col md:flex-row md:items-end gap-4">
            <div class="flex-grow">
                <label class="block text-sm font-medium text-gray-300 mb-1">Date Range</label>
                <input type="text" id="usageDateRange" placeholder="Select a date range..."
                       class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-tarikh">
            </div>
            <button id="generateReportBtn" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-semibold px-6 py-2 rounded-lg shadow-sm transition-all duration-200 hover:shadow-lg flex items-center justify-center gap-2">
                <i class="fas fa-magnifying-glass-chart"></i>
                <span>Generate Report</span>
            </button>
        </div>
        <div class="flex flex-wrap gap-2 mt-3">
            <button type="button" class="usage-preset-btn" data-preset="today">Today</button>
            <button type="button" class="usage-preset-btn" data-preset="7">Last 7 Days</button>
            <button type="button" class="usage-preset-btn" data-preset="30">Last 30 Days</button>
            <button type="button" class="usage-preset-btn" data-preset="month">This Month</button>
        </div>
    </div>

    <div class="usage-search-wrap mb-6">
        <i class="fas fa-magnifying-glass"></i>
        <input type="text" id="mainListSearchInput" placeholder="Search resellers in the list below..." autocomplete="off">
    </div>

    <div class="mb-6">
        <button id="openSelectResellersBtn" type="button" class="select-resellers-cta font-semibold px-6 py-3 rounded-lg flex items-center justify-center gap-2 w-full sm:w-auto">
            <i class="fas fa-users"></i>
            <span>Select Resellers for a Detailed Report</span>
        </button>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6">
        <div class="mini-stat-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
            <div>
                <p class="mini-stat-label">Total Download</p>
                <p class="mini-stat-value" id="reportTotalDownload">0 B</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-arrow-down"></i></div>
        </div>
        <div class="mini-stat-card" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
            <div>
                <p class="mini-stat-label">Total Upload</p>
                <p class="mini-stat-value" id="reportTotalUpload">0 B</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-arrow-up"></i></div>
        </div>
        <div class="mini-stat-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
            <div>
                <p class="mini-stat-label">Grand Total</p>
                <p class="mini-stat-value" id="reportGrandTotal">0 B</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-database"></i></div>
        </div>
    </div>

    <div class="compact-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
        <h3 class="compact-card-title"><i class="fas fa-ranking-star text-purple-400"></i> Usage by Reseller</h3>
        <div id="usageReportList">
            <div class="usage-report-empty">
                <i class="fas fa-circle-notch fa-spin"></i>
                Loading...
            </div>
        </div>
    </div>
</div>

<div id="selectResellersModal" class="fixed inset-0 bg-black bg-opacity-80 hidden flex items-center justify-center p-4" style="z-index: 70;">
    <div class="bg-gray-800 bg-opacity-90 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-lg border border-gray-700 flex flex-col" style="height:75vh; max-height: 560px;">

        <div class="flex-shrink-0 flex justify-between items-center pb-4 border-b border-gray-700">
            <div class="flex items-center gap-3">
                <h2 class="text-lg font-bold text-white flex items-center gap-3">
                    <span class="system-status-icon-badge bg-green-900 text-green-400"><i class="fas fa-users"></i></span>
                    <span>Select Resellers</span>
                </h2>
                <span class="text-xs text-gray-500 bg-gray-900 px-2 py-1 rounded-md" id="resellerModalCount">0 selected</span>
            </div>
            <label class="flex items-center gap-2 cursor-pointer hover:text-white text-gray-400 transition-colors mr-2">
                <span class="text-[10px] font-mono uppercase tracking-wider">Select All</span>
                <input type="checkbox" id="resellerSelectAllToggle" class="form-checkbox h-4 w-4 text-green-500 rounded bg-gray-700 border-gray-600 focus:ring-0">
            </label>
        </div>

        <div class="usage-search-wrap flex-shrink-0 mt-4 mb-1">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" id="resellerSearchInput" placeholder="Search resellers..." autocomplete="off">
        </div>

        <div id="resellerTileGrid" class="flex-grow my-4 pr-2 -mr-2 overflow-y-auto custom-scroll grid grid-cols-2 gap-2 content-start">
            <div class="col-span-2 text-center text-gray-400 p-8"><i class="fas fa-spinner fa-spin text-2xl"></i></div>
        </div>

        <div class="flex-shrink-0 pt-4 border-t border-gray-700 flex justify-end gap-3">
            <button type="button" id="closeSelectResellersBtn" class="picker-cancel-btn px-4 py-2.5 rounded-xl text-sm font-medium">
                Cancel
            </button>
            <button type="button" id="generateDetailedReportBtn" class="px-6 py-2.5 bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white font-semibold rounded-xl shadow-sm text-sm transition-all flex items-center gap-2">
                <i class="fas fa-file-lines"></i>
                <span>Generate Report</span>
            </button>
        </div>
    </div>
</div>

<div id="detailedReportModal" class="fixed inset-0 bg-black bg-opacity-70 hidden flex items-center justify-center p-4">
    <div class="settings-modal-content bg-gray-800 bg-opacity-90 backdrop-blur-xl border border-gray-700 rounded-2xl shadow-2xl w-full flex flex-col" style="height:90vh; max-height: 800px;">
        <div class="flex-shrink-0 flex justify-between items-center p-4 border-b border-gray-700">
            <h2 class="text-xl font-bold text-white flex items-center gap-3">
                <span class="system-status-icon-badge bg-green-900 text-green-400"><i class="fas fa-file-lines"></i></span>
                <span>Detailed Usage Report</span>
            </h2>
            <div class="flex items-center gap-2">
                <button id="downloadReportPdfBtn" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white text-sm font-semibold px-4 py-2 rounded-lg shadow-sm flex items-center gap-2">
                    <i class="fas fa-file-pdf"></i> <span>Download PDF</span>
                </button>
                <button onclick="closeDetailedReportModal()" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fas fa-times fa-lg"></i>
                </button>
            </div>
        </div>

        <div class="flex-grow p-4 md:p-6 custom-scroll overflow-y-auto">
            <div id="detailedReportPrintArea">
                <div class="mb-4">
                    <div class="text-lg font-bold text-white" id="detailedReportTitle">Selected Resellers</div>
                    <div class="text-sm text-gray-400" id="detailedReportSubtitle">Date range</div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6">
                    <div class="mini-stat-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                        <div>
                            <p class="mini-stat-label">Total Download</p>
                            <p class="mini-stat-value" id="detailedTotalDownload">0 B</p>
                        </div>
                        <div class="mini-stat-icon"><i class="fas fa-arrow-down"></i></div>
                    </div>
                    <div class="mini-stat-card" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                        <div>
                            <p class="mini-stat-label">Total Upload</p>
                            <p class="mini-stat-value" id="detailedTotalUpload">0 B</p>
                        </div>
                        <div class="mini-stat-icon"><i class="fas fa-arrow-up"></i></div>
                    </div>
                    <div class="mini-stat-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                        <div>
                            <p class="mini-stat-label">Grand Total</p>
                            <p class="mini-stat-value" id="detailedGrandTotal">0 B</p>
                        </div>
                        <div class="mini-stat-icon"><i class="fas fa-database"></i></div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div class="compact-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                        <h3 class="compact-card-title"><i class="fas fa-chart-pie text-blue-400"></i> Download vs Upload</h3>
                        <div class="report-chart-box"><canvas id="reportDonutChart"></canvas></div>
                    </div>
                    <div class="compact-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                        <h3 class="compact-card-title"><i class="fas fa-chart-column text-purple-400"></i> Usage Over Time</h3>
                        <div class="report-chart-box"><canvas id="reportTrendChart"></canvas></div>
                    </div>
                </div>

                <div class="compact-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                    <h3 class="compact-card-title"><i class="fas fa-ranking-star text-purple-400"></i> Ranking</h3>
                    <div id="detailedReportRanking"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='vendor/chart/chart.umd.min.js') }}"></script>
<script>
function formatTraffic(b) {
    if (b == null || isNaN(b) || !isFinite(b) || b <= 0) return '0 B';
    var k = 1024, m = 1048576, g = 1073741824, t = 1099511627776;
    if (b < m) return (b / k).toFixed(1) + ' KB';
    if (b < g) return (b / m).toFixed(1) + ' MB';
    if (b < t) return (b / g).toFixed(1) + ' GB';
    return (b / t).toFixed(2) + ' TB';
}

function escapeHtml(text) {
    if (!text) return '';
    var div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function renderRows(container, rows) {
    if (!rows || rows.length === 0) {
        container.innerHTML = '<div class="usage-report-empty">No data found</div>';
        return;
    }
    var maxTotal = Math.max(1, ...rows.map(function(r) { return r.total_bytes || 0; }));
    container.innerHTML = rows.map(function(r, i) {
        var pct = Math.max(2, Math.round(((r.total_bytes || 0) / maxTotal) * 100));
        var rankClass = i === 0 ? 'top1' : i === 1 ? 'top2' : i === 2 ? 'top3' : '';
        var username = r.username || '';
        return `
            <div class="usage-report-row" data-username="${username.replace(/"/g, '&quot;')}">
                <div class="usage-report-rank ${rankClass}">${i + 1}</div>
                <div class="usage-report-main">
                    <div class="usage-report-name-row">
                        <span class="usage-report-name">${username}</span>
                        <span class="usage-report-total">${formatTraffic(r.total_bytes)}</span>
                    </div>
                    <div class="usage-bar-track">
                        <div class="usage-bar-fill" style="width: ${pct}%;"></div>
                    </div>
                    <div class="usage-report-breakdown">
                        <span><i class="fas fa-arrow-down text-blue-400"></i>${formatTraffic(r.upload_bytes)}</span>
                        <span><i class="fas fa-arrow-up text-green-400"></i>${formatTraffic(r.download_bytes)}</span>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

document.addEventListener('DOMContentLoaded', function() {
    var rangeInput = document.getElementById('usageDateRange');
    var generateBtn = document.getElementById('generateReportBtn');
    var listEl = document.getElementById('usageReportList');
    var totalDownloadEl = document.getElementById('reportTotalDownload');
    var totalUploadEl = document.getElementById('reportTotalUpload');
    var grandTotalEl = document.getElementById('reportGrandTotal');

    function todayStr() {
        var now = new Date();
        var year = now.getFullYear();
        var month = String(now.getMonth() + 1).padStart(2, '0');
        var day = String(now.getDate()).padStart(2, '0');
        return year + '-' + month + '-' + day;
    }

    function formatDate(date) {
        if (!date) return '';
        var d = new Date(date);
        var year = d.getFullYear();
        var month = String(d.getMonth() + 1).padStart(2, '0');
        var day = String(d.getDate()).padStart(2, '0');
        return year + '-' + month + '-' + day;
    }

    var today = new Date();
    var weekAgo = new Date();
    weekAgo.setDate(today.getDate() - 6);

    var fp = JalaliCalendar.initDatePicker(rangeInput, {
        mode: 'range',
        dateFormat: 'Y-m-d',
        defaultDate: [weekAgo, today]
    });

    function rankClass(i) {
        if (i === 0) return 'top1';
        if (i === 1) return 'top2';
        if (i === 2) return 'top3';
        return '';
    }

    function renderReport(data) {
        var rows = data.rows || [];

        var totalDownload = rows.reduce(function(s, r) { return s + Number(r.upload_bytes); }, 0);
        var totalUpload = rows.reduce(function(s, r) { return s + Number(r.download_bytes); }, 0);
        totalDownloadEl.textContent = formatTraffic(totalDownload);
        totalUploadEl.textContent = formatTraffic(totalUpload);
        grandTotalEl.textContent = formatTraffic(totalDownload + totalUpload);

        cachedResellerRows = rows;
        if (document.getElementById('selectResellersModal').classList.contains('hidden') === false) {
            renderResellerTiles();
        }

        if (!rows.length) {
            listEl.innerHTML = '<div class="usage-report-empty"><i class="fas fa-inbox"></i>No resellers found.</div>';
            return;
        }
        if (rows.every(function(r) { return r.total_bytes === 0; })) {
            listEl.innerHTML = '<div class="usage-report-empty"><i class="fas fa-inbox"></i>No usage recorded in this range yet.</div>';
            return;
        }

        renderRows(listEl, rows);
        applyMainListSearchFilter();
    }

    var mainListSearchInput = document.getElementById('mainListSearchInput');
    function applyMainListSearchFilter() {
        var q = mainListSearchInput.value.trim().toLowerCase();
        listEl.querySelectorAll('.usage-report-row').forEach(function(row) {
            var name = (row.dataset.username || '').toLowerCase();
            row.style.display = name.includes(q) ? '' : 'none';
        });
    }
    mainListSearchInput.addEventListener('input', applyMainListSearchFilter);

    var cachedResellerRows = [];
    var selectedResellers = new Set();
    var searchInput = document.getElementById('resellerSearchInput');
    var tileGridEl = document.getElementById('resellerTileGrid');
    var modalCountEl = document.getElementById('resellerModalCount');
    var selectAllToggle = document.getElementById('resellerSelectAllToggle');
    var generateDetailedBtn = document.getElementById('generateDetailedReportBtn');
    var openSelectResellersBtn = document.getElementById('openSelectResellersBtn');
    var closeSelectResellersBtn = document.getElementById('closeSelectResellersBtn');
    var selectResellersModal = document.getElementById('selectResellersModal');

    function updateModalCount() {
        modalCountEl.textContent = selectedResellers.size + ' selected';
        var visibleTiles = Array.from(tileGridEl.querySelectorAll('.subadmin-tile'));
        var visibleCount = visibleTiles.length;
        var visibleSelectedCount = visibleTiles.filter(function(t) { return selectedResellers.has(t.dataset.username); }).length;
        if (visibleCount > 0 && visibleSelectedCount === visibleCount) {
            selectAllToggle.checked = true;
            selectAllToggle.indeterminate = false;
        } else if (visibleSelectedCount > 0) {
            selectAllToggle.checked = false;
            selectAllToggle.indeterminate = true;
        } else {
            selectAllToggle.checked = false;
            selectAllToggle.indeterminate = false;
        }
    }

    function toggleResellerTile(username, element) {
        if (selectedResellers.has(username)) {
            selectedResellers.delete(username);
            element.classList.remove('subadmin-tile-selected');
        } else {
            selectedResellers.add(username);
            element.classList.add('subadmin-tile-selected');
        }
        updateModalCount();
    }

    function renderResellerTiles() {
        var q = searchInput.value.trim().toLowerCase();
        var filtered = cachedResellerRows.filter(function(r) { return r.username.toLowerCase().includes(q); });
        var sorted = filtered.slice().sort(function(a, b) { return a.username.localeCompare(b.username); });

        if (!cachedResellerRows.length) {
            tileGridEl.innerHTML = '<div class="col-span-2 text-center text-gray-500 py-4">No resellers found.</div>';
            updateModalCount();
            return;
        }
        if (!sorted.length) {
            tileGridEl.innerHTML = '<div class="col-span-2 text-center text-gray-500 py-4">No matches.</div>';
            updateModalCount();
            return;
        }

        tileGridEl.innerHTML = sorted.map(function(r) {
            return `
                <div class="subadmin-tile${selectedResellers.has(r.username) ? ' subadmin-tile-selected' : ''}" data-username="${escapeHtml(r.username)}">
                    <span class="subadmin-tile-icon"><i class="fas fa-user-shield"></i></span>
                    <span class="subadmin-tile-body">
                        <span class="subadmin-tile-name">${escapeHtml(r.username)}</span>
                        <span class="subadmin-tile-id">${formatTraffic(r.total_bytes)}</span>
                    </span>
                </div>
            `;
        }).join('');

        tileGridEl.querySelectorAll('.subadmin-tile').forEach(function(tile) {
            tile.addEventListener('click', function() { toggleResellerTile(tile.dataset.username, tile); });
        });

        updateModalCount();
    }

    searchInput.addEventListener('input', renderResellerTiles);

    selectAllToggle.addEventListener('change', function() {
        var visibleTiles = Array.from(tileGridEl.querySelectorAll('.subadmin-tile'));
        if (this.checked) {
            visibleTiles.forEach(function(t) { selectedResellers.add(t.dataset.username); });
        } else {
            visibleTiles.forEach(function(t) { selectedResellers.delete(t.dataset.username); });
        }
        renderResellerTiles();
    });

    function openSelectResellersModal() {
        selectResellersModal.classList.remove('hidden');
        renderResellerTiles();
    }
    function closeSelectResellersModal() {
        selectResellersModal.classList.add('hidden');
    }
    openSelectResellersBtn.addEventListener('click', openSelectResellersModal);
    closeSelectResellersBtn.addEventListener('click', closeSelectResellersModal);
    selectResellersModal.addEventListener('click', function(e) {
        if (e.target === selectResellersModal) closeSelectResellersModal();
    });

    var donutChart = null;
    var trendChart = null;

    function chartColors() {
        var isLight = document.body.classList.contains('light-theme');
        return {
            text: isLight ? '#374151' : '#cbd5e1',
            grid: isLight ? 'rgba(17,24,39,0.08)' : 'rgba(255,255,255,0.08)'
        };
    }

    function renderDonutChart(totalDownload, totalUpload) {
        var ctx = document.getElementById('reportDonutChart');
        var colors = chartColors();
        if (donutChart) donutChart.destroy();
        donutChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Download', 'Upload'],
                datasets: [{
                    data: [totalDownload, totalUpload],
                    backgroundColor: ['rgba(96,165,250,0.85)', 'rgba(74,222,128,0.85)'],
                    borderColor: 'transparent',
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { color: colors.text } },
                    tooltip: { callbacks: { label: function(c) { return c.label + ': ' + formatTraffic(c.raw); } } }
                }
            }
        });
    }

    function renderTrendChart(daily) {
        var ctx = document.getElementById('reportTrendChart');
        var colors = chartColors();
        if (trendChart) trendChart.destroy();
        trendChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: daily.map(function(d) { return JalaliCalendar.formatDateDisplay(d.date, { dateOnly: true }); }),
                datasets: [{
                    label: 'Total Traffic',
                    data: daily.map(function(d) { return d.total_bytes; }),
                    backgroundColor: 'rgba(192,132,252,0.75)',
                    borderRadius: 4,
                    maxBarThickness: 36
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { ticks: { color: colors.text }, grid: { display: false } },
                    y: { ticks: { color: colors.text, callback: function(v) { return formatTraffic(v); } }, grid: { color: colors.grid } }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: function(c) { return formatTraffic(c.raw); } } }
                }
            }
        });
    }

    function openDetailedReportModal() {
        document.getElementById('detailedReportModal').classList.remove('hidden');
    }
    window.closeDetailedReportModal = function() {
        document.getElementById('detailedReportModal').classList.add('hidden');
    };

    function fetchDetailedReport() {
        if (!selectedResellers.size) {
            showAlert('error', 'Select at least one reseller first.');
            return;
        }
        var start = '';
        var end = '';
        if (fp && fp.selectedDates && fp.selectedDates.length === 2) {
            start = formatDate(fp.selectedDates[0]);
            end = formatDate(fp.selectedDates[1]);
        } else {
            start = weekAgoStr;
            end = todayStr();
        }

        generateDetailedBtn.disabled = true;
        generateDetailedBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i><span>Generating...</span>';

        fetch('/api/v1/sub-admins/usage_report_detailed', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ usernames: Array.from(selectedResellers), start_date: start, end_date: end })
        })
            .then(function(res) { return res.json(); })
            .then(function(data) {
                if (!data.success) {
                    showAlert('error', data.message || 'Failed to generate report.');
                    return;
                }
                document.getElementById('detailedReportTitle').textContent = data.rows.length + ' Reseller' + (data.rows.length === 1 ? '' : 's') + ' Selected';
                document.getElementById('detailedReportSubtitle').textContent = JalaliCalendar.formatDateDisplay(start, { dateOnly: true }) + ' - ' + JalaliCalendar.formatDateDisplay(end, { dateOnly: true });
                document.getElementById('detailedTotalDownload').textContent = formatTraffic(data.total_upload);
                document.getElementById('detailedTotalUpload').textContent = formatTraffic(data.total_download);
                document.getElementById('detailedGrandTotal').textContent = formatTraffic(data.total_bytes);

                renderRows(document.getElementById('detailedReportRanking'), data.rows);
                renderDonutChart(data.total_upload, data.total_download);
                renderTrendChart(data.daily || []);

                closeSelectResellersModal();
                openDetailedReportModal();
            })
            .catch(function() {
                showAlert('error', 'Network error while generating report.');
            })
            .finally(function() {
                generateDetailedBtn.disabled = false;
                generateDetailedBtn.innerHTML = '<i class="fas fa-file-lines"></i><span>Generate Report</span>';
            });
    }

    generateDetailedBtn.addEventListener('click', fetchDetailedReport);
    document.getElementById('downloadReportPdfBtn').addEventListener('click', function() {
        window.print();
    });

    var weekAgoStr = (function() {
        var d = new Date();
        d.setDate(d.getDate() - 7);
        var year = d.getFullYear();
        var month = String(d.getMonth() + 1).padStart(2, '0');
        var day = String(d.getDate()).padStart(2, '0');
        return year + '-' + month + '-' + day;
    })();

    function fetchReport() {
        var start = '';
        var end = '';
        if (fp && fp.selectedDates && fp.selectedDates.length === 2) {
            start = formatDate(fp.selectedDates[0]);
            end = formatDate(fp.selectedDates[1]);
        } else {
            start = weekAgoStr;
            end = todayStr();
        }

        listEl.innerHTML = '<div class="usage-report-empty"><i class="fas fa-circle-notch fa-spin"></i>Loading...</div>';

        var params = new URLSearchParams({ start_date: start, end_date: end });
        fetch('/api/v1/sub-admins/usage_report?' + params.toString())
            .then(function(res) { return res.json(); })
            .then(function(data) {
                if (data.success) {
                    renderReport(data);
                } else {
                    listEl.innerHTML = '<div class="usage-report-empty"><i class="fas fa-triangle-exclamation"></i>Failed to load report.</div>';
                }
            })
            .catch(function() {
                listEl.innerHTML = '<div class="usage-report-empty"><i class="fas fa-triangle-exclamation"></i>Network error.</div>';
            });
    }

    generateBtn.addEventListener('click', fetchReport);

    document.querySelectorAll('.usage-preset-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var preset = btn.dataset.preset;
            var end = new Date();
            var start = new Date();
            if (preset === 'today') {
                start = new Date();
            } else 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);
            }
            fp.setDate([start, end], true);
            fetchReport();
        });
    });

    setTimeout(function() {
        fetchReport();
    }, 150);
});
</script>
{% endblock %}