{% extends "base.html" %}

{% block title %}积分与邀请管理 - AI 视界{% endblock %}

{% block content %}
<div class="w-full h-full overflow-hidden flex flex-col p-6 lg:p-10 bg-slate-50/50">
    <div class="max-w-7xl w-full mx-auto flex flex-col h-full space-y-6">

        <!-- Header -->
        <div class="flex items-center justify-between shrink-0">
            <div class="flex items-center gap-4">
                <div
                    class="w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-200">
                    <i data-lucide="gift" class="w-7 h-7"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-black text-slate-900 tracking-tight">积分与邀请管理</h1>
                    <p class="text-slate-400 text-sm font-medium italic">Points & Growth Ecosystem</p>
                </div>
            </div>

            <!-- Tabs Switcher -->
            <div
                class="bg-white/80 backdrop-blur-md p-1.5 rounded-2xl flex font-black text-[12px] uppercase tracking-wider shadow-sm border border-slate-100/50">
                <button onclick="switchTab('grant')" id="tab-grant"
                    class="px-6 py-2.5 rounded-xl transition-all duration-300">发放积分</button>
                <button onclick="switchTab('history')" id="tab-history"
                    class="px-6 py-2.5 rounded-xl transition-all duration-300">发放记录</button>
                <button onclick="switchTab('invite')" id="tab-invite"
                    class="px-6 py-2.5 rounded-xl transition-all duration-300">邀请统计</button>
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 shrink-0">
            <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center">
                        <i data-lucide="users" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">总邀请用户</p>
                        <h3 id="stat-total-invited" class="text-2xl font-black text-slate-900">0</h3>
                    </div>
                </div>
            </div>
            <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-amber-50 text-amber-600 rounded-2xl flex items-center justify-center">
                        <i data-lucide="zap" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">累计奖励积分</p>
                        <h3 id="stat-total-rewards" class="text-2xl font-black text-slate-900">0</h3>
                    </div>
                </div>
            </div>
            <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center">
                        <i data-lucide="send" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">手动发放总计</p>
                        <h3 id="stat-total-grants" class="text-2xl font-black text-slate-900">0</h3>
                    </div>
                </div>
            </div>
            <div class="bg-indigo-600 p-6 rounded-[2rem] shadow-xl shadow-indigo-200/50 text-white">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center">
                        <i data-lucide="crown" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black text-indigo-200 uppercase tracking-widest">邀请达人榜首</p>
                        <h3 id="stat-top-inviter" class="text-lg font-black truncate w-32">加载中...</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content (Grant Tab) -->
        <div id="view-grant"
            class="flex-1 flex flex-col min-h-0 space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <!-- Action Bar -->
            <div
                class="flex items-center justify-between gap-4 bg-white/50 backdrop-blur-md p-4 rounded-3xl border border-white/50 shadow-sm">
                <div class="relative w-96">
                    <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                    <input type="text" id="userSearchInput" onkeyup="if(event.key === 'Enter') loadUserList()"
                        placeholder="搜索手机号或用户ID..."
                        class="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-2xl text-sm font-bold outline-none focus:border-indigo-500 transition-all">
                </div>

                <div class="flex items-center gap-3">
                    <button onclick="openGrantModal('selected')"
                        class="px-5 py-2.5 bg-indigo-600 text-white rounded-2xl text-xs font-black hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 flex items-center gap-2">
                        <i data-lucide="check-square" class="w-4 h-4"></i> 发放选中用户
                    </button>
                    <button onclick="openGrantModal('all')"
                        class="px-5 py-2.5 bg-slate-900 text-white rounded-2xl text-xs font-black hover:bg-slate-800 transition-all shadow-lg shadow-slate-200 flex items-center gap-2">
                        <i data-lucide="globe" class="w-4 h-4"></i> 全员发放 (Global)
                    </button>
                </div>
            </div>

            <!-- User Data Table -->
            <div
                class="bg-white rounded-[2.5rem] shadow-2xl shadow-slate-200/50 border border-slate-100 flex-1 flex flex-col overflow-hidden">
                <div class="flex-1 overflow-auto custom-scrollbar">
                    <table class="w-full text-left border-collapse">
                        <thead class="sticky top-0 bg-white z-10">
                            <tr>
                                <th class="px-8 py-5 border-b border-slate-50">
                                    <input type="checkbox" id="selectAllUsers" onchange="toggleSelectAll(this)"
                                        class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 transition-all">
                                </th>
                                <th
                                    class="px-4 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    用户 ID</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    手机号</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    当前积分</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    用户角色</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50 text-right">
                                    注册时间</th>
                            </tr>
                        </thead>
                        <tbody id="userTableBody" class="divide-y divide-slate-50">
                            <!-- Dynamic Content -->
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="p-6 border-t border-slate-50 flex items-center justify-between bg-slate-50/30">
                    <span class="text-xs font-bold text-slate-400" id="userPageInfo">加载中...</span>
                    <div class="flex items-center gap-2">
                        <button onclick="changeUserPage(-1)"
                            class="p-2.5 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 disabled:opacity-50 transition-all shadow-sm">
                            <i data-lucide="chevron-left" class="w-4 h-4 text-slate-600"></i>
                        </button>
                        <button onclick="changeUserPage(1)"
                            class="p-2.5 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 disabled:opacity-50 transition-all shadow-sm">
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-600"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- History Tab (Hidden by Default) -->
        <div id="view-history"
            class="hidden flex-1 flex flex-col min-h-0 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <!-- Same History Table Structure as before, but full width -->
            <div
                class="bg-white rounded-[2.5rem] shadow-2xl shadow-slate-200/50 border border-slate-100 flex-1 flex flex-col overflow-hidden">
                <div class="p-6 border-b border-slate-50 bg-slate-50/30 flex justify-between items-center">
                    <div class="relative w-96">
                        <i data-lucide="search"
                            class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                        <input type="text" id="historySearch" onkeyup="if(event.key === 'Enter') loadGrantHistory()"
                            placeholder="搜索手机号或操作备注..."
                            class="w-full pl-10 pr-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold outline-none focus:border-indigo-500 transition-all">
                    </div>
                </div>
                <div class="flex-1 overflow-auto custom-scrollbar">
                    <table class="w-full text-left border-collapse">
                        <thead class="sticky top-0 bg-white z-10">
                            <tr>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    接收用户</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    积分数</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    发放原因</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    操作人</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50 text-right">
                                    时间</th>
                            </tr>
                        </thead>
                        <tbody id="grantHistoryTable" class="divide-y divide-slate-50">
                            <!-- Dynamic Content -->
                        </tbody>
                    </table>
                </div>
                <div class="p-6 border-t border-slate-50 flex items-center justify-between bg-slate-50/30">
                    <span class="text-xs font-bold text-slate-400" id="grantPageInfo">共 0 条记录</span>
                    <div class="flex items-center gap-2">
                        <button onclick="changeGrantPage(-1)"
                            class="p-2.5 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 disabled:opacity-50 transition-all shadow-sm"><i
                                data-lucide="chevron-left" class="w-4 h-4"></i></button>
                        <button onclick="changeGrantPage(1)"
                            class="p-2.5 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 disabled:opacity-50 transition-all shadow-sm"><i
                                data-lucide="chevron-right" class="w-4 h-4"></i></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Invite Tab (Hidden by Default) -->
        <div id="view-invite"
            class="hidden flex-1 flex flex-col min-h-0 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div
                class="bg-white rounded-[2.5rem] shadow-2xl shadow-slate-200/50 border border-slate-100 flex-1 flex flex-col overflow-hidden">
                <div class="p-6 border-b border-slate-50 bg-slate-50/30 flex justify-between items-center">
                    <h3 class="font-black text-slate-800 flex items-center gap-2">
                        <i data-lucide="list-tree" class="w-5 h-5 text-indigo-500"></i>
                        邀请奖励明细
                    </h3>
                    <div class="relative w-72">
                        <i data-lucide="search"
                            class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                        <input type="text" id="inviteSearch" onkeyup="if(event.key === 'Enter') loadInviteRewards()"
                            placeholder="搜索邀请双方..."
                            class="w-full pl-10 pr-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold outline-none focus:border-indigo-500 transition-all">
                    </div>
                </div>
                <div class="flex-1 overflow-auto custom-scrollbar">
                    <table class="w-full text-left border-collapse">
                        <thead class="sticky top-0 bg-white z-10">
                            <tr>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    邀请人</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    被邀请人</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    奖励积分 (10%)</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
                                    充值轮次</th>
                                <th
                                    class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50 text-right">
                                    结算时间</th>
                            </tr>
                        </thead>
                        <tbody id="inviteRewardsTable" class="divide-y divide-slate-50">
                            <!-- Dynamic Content -->
                        </tbody>
                    </table>
                </div>
                <div class="p-6 border-t border-slate-50 flex items-center justify-between bg-slate-50/30">
                    <span class="text-xs font-bold text-slate-400" id="invitePageInfo">共 0 条数据</span>
                    <div class="flex items-center gap-2">
                        <button onclick="changeInvitePage(-1)"
                            class="p-2.5 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 disabled:opacity-50 transition-all shadow-sm"><i
                                data-lucide="chevron-left" class="w-4 h-4"></i></button>
                        <button onclick="changeInvitePage(1)"
                            class="p-2.5 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 disabled:opacity-50 transition-all shadow-sm"><i
                                data-lucide="chevron-right" class="w-4 h-4"></i></button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Grant Modal -->
<div id="grantModal"
    class="hidden fixed inset-0 z-50 flex items-center justify-center p-6 backdrop-blur-md bg-slate-900/20 animate-in fade-in duration-300">
    <div
        class="bg-white w-full max-w-md rounded-[3rem] shadow-2xl border border-slate-100 p-10 space-y-8 animate-in zoom-in duration-300">
        <div class="text-center space-y-2">
            <div
                class="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-[2.5rem] flex items-center justify-center mx-auto mb-4">
                <i data-lucide="plus-circle" id="modalIcon" class="w-10 h-10"></i>
            </div>
            <h2 id="modalTitle" class="text-2xl font-black text-slate-900 uppercase">确定发放积分</h2>
            <p id="modalSub" class="text-slate-400 text-sm font-medium">请确认积分数量与发放理由</p>
        </div>

        <div class="space-y-6">
            <div class="space-y-2">
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">发放额度
                    (Points)</label>
                <div class="relative">
                    <i data-lucide="zap" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-amber-500"></i>
                    <input type="number" id="modalPoints" placeholder="请输入正整数"
                        class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-lg font-black outline-none focus:border-indigo-500 transition-all">
                </div>
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">发放原因 / 备注</label>
                <textarea id="modalReason" rows="3" placeholder="例如：运营活动奖励..."
                    class="w-full p-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-medium outline-none focus:border-indigo-500 transition-all resize-none"></textarea>
            </div>
        </div>

        <div class="flex items-center gap-4">
            <button onclick="closeGrantModal()"
                class="flex-1 py-4 bg-slate-100 text-slate-600 rounded-2xl font-black text-sm hover:bg-slate-200 transition-all">取消</button>
            <button id="btnModalConfirm" onclick="confirmGrant()"
                class="flex-1 py-4 bg-indigo-600 text-white rounded-2xl font-black text-sm hover:bg-indigo-700 transition-all shadow-xl shadow-indigo-100">确认发放</button>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    // --- State Management ---
    let currentTab = 'grant';
    let userPage = 1;
    let grantPage = 1;
    let invitePage = 1;
    let currentGrantTarget = 'selected'; // 'selected' or 'all'

    // --- Tab Logic ---
    function switchTab(tab) {
        currentTab = tab;
        document.querySelectorAll('[id^="tab-"]').forEach(btn => {
            if (btn.id === `tab-${tab}`) {
                btn.classList.add('bg-white', 'text-slate-900', 'shadow-sm', 'scale-105');
                btn.classList.remove('text-slate-400');
            } else {
                btn.classList.remove('bg-white', 'text-slate-900', 'shadow-sm', 'scale-105');
                btn.classList.add('text-slate-400');
            }
        });

        document.getElementById('view-grant').classList.toggle('hidden', tab !== 'grant');
        document.getElementById('view-history').classList.toggle('hidden', tab !== 'history');
        document.getElementById('view-invite').classList.toggle('hidden', tab !== 'invite');

        if (tab === 'grant') loadUserList();
        if (tab === 'history') loadGrantHistory();
        if (tab === 'invite') loadInviteRewards();
    }

    // --- Overall Stats ---
    async function loadStats() {
        try {
            const r = await fetch('/api/admin/invite/stats');
            const d = await r.json();
            document.getElementById('stat-total-invited').innerText = d.total_invited;
            document.getElementById('stat-total-rewards').innerText = d.total_rewards;
            document.getElementById('stat-total-grants').innerText = d.total_grants;
            if (d.top_inviters && d.top_inviters.length > 0) {
                document.getElementById('stat-top-inviter').innerText = d.top_inviters[0].phone;
            } else {
                document.getElementById('stat-top-inviter').innerText = '尚无排名';
            }
        } catch (e) {
            console.error('加载统计失败', e);
        }
    }

    // --- User Management (Grant Tab) ---
    async function loadUserList() {
        const q = document.getElementById('userSearchInput').value;
        const r = await fetch(`/api/admin/users?page=${userPage}&q=${q}&per_page=15`);
        const d = await r.json();

        const tbody = document.getElementById('userTableBody');
        document.getElementById('userPageInfo').innerText = `第 ${d.current_page} / ${d.pages} 页 (共 ${d.total} 人)`;

        tbody.innerHTML = d.users.map(u => `
            <tr class="hover:bg-slate-50/80 transition-all duration-300">
                <td class="px-8 py-5">
                    <input type="checkbox" name="userSelect" value="${u.id}" class="user-checkbox w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 transition-all">
                </td>
                <td class="px-4 py-5 font-mono text-xs text-slate-400">#${u.id}</td>
                <td class="px-8 py-5 font-black text-slate-800">${u.phone}</td>
                <td class="px-8 py-5">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black bg-indigo-50 text-indigo-600">
                        <i data-lucide="zap" class="w-3 h-3 text-amber-500"></i>
                        ${u.points}
                    </span>
                </td>
                <td class="px-8 py-5">
                    <span class="text-xs font-bold text-slate-500">${u.role || '普通用户'}</span>
                </td>
                <td class="px-8 py-5 text-right text-[10px] font-black text-slate-300 uppercase italic">
                    ${u.created_at}
                </td>
            </tr>
        `).join('');
        lucide.createIcons();
        document.getElementById('selectAllUsers').checked = false;
    }

    function toggleSelectAll(master) {
        const checkboxes = document.getElementsByName('userSelect');
        for (let cb of checkboxes) {
            cb.checked = master.checked;
        }
    }

    function changeUserPage(delta) {
        userPage += delta;
        if (userPage < 1) userPage = 1;
        loadUserList();
    }

    // --- Modal Logic ---
    function openGrantModal(target) {
        currentGrantTarget = target;
        const modal = document.getElementById('grantModal');
        const title = document.getElementById('modalTitle');
        const sub = document.getElementById('modalSub');

        if (target === 'all') {
            title.innerText = "全员普惠发放";
            sub.innerText = "注意：此动作将影响系统内所有注册用户";
        } else {
            const selectedCount = Array.from(document.getElementsByName('userSelect')).filter(c => c.checked).length;
            if (selectedCount === 0) return showToast('请先在列表中勾选目标用户', 'warning');
            title.innerText = `批量发放 (${selectedCount} 人)`;
            sub.innerText = "仅对选中的用户进行积分补偿或奖励";
        }

        modal.classList.remove('hidden');
    }

    function closeGrantModal() {
        document.getElementById('grantModal').classList.add('hidden');
        document.getElementById('modalPoints').value = '';
        document.getElementById('modalReason').value = '';
    }

    async function confirmGrant() {
        const points = document.getElementById('modalPoints').value;
        const reason = document.getElementById('modalReason').value;

        if (!points || points <= 0) return showToast('请输入有效的积分数', 'warning');

        let url = '';
        let body = { points, reason };

        if (currentGrantTarget === 'all') {
            url = '/api/admin/points/global_grant';
        } else {
            url = '/api/admin/points/batch_grant_ids';
            const selectedIds = Array.from(document.getElementsByName('userSelect'))
                .filter(c => c.checked)
                .map(c => parseInt(c.value));
            body.user_ids = selectedIds;
        }

        const btn = document.getElementById('btnModalConfirm');
        btn.disabled = true;
        btn.innerText = '执行中...';

        try {
            const r = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body)
            });
            const d = await r.json();
            if (d.message) {
                showToast(`✅ ${d.message}`, 'success');
                closeGrantModal();
                loadUserList();
                loadStats();
            } else {
                showToast(d.error, 'error');
            }
        } catch (e) {
            showToast('请求异常，发送失败', 'error');
        } finally {
            btn.disabled = false;
            btn.innerText = '确认发放';
        }
    }

    // --- Grant History ---
    async function loadGrantHistory() {
        const q = document.getElementById('historySearch').value;
        const r = await fetch(`/api/admin/points/grants?page=${grantPage}&q=${q}`);
        const d = await r.json();

        const tbody = document.getElementById('grantHistoryTable');
        document.getElementById('grantPageInfo').innerText = `第 ${d.current_page} / ${d.pages} 页 (共 ${d.total} 条记录)`;

        tbody.innerHTML = d.grants.map(g => `
            <tr class="hover:bg-slate-50 transition-colors border-b border-slate-50 last:border-0 text-sm">
                <td class="px-8 py-5">
                    <div class="flex flex-col">
                        <span class="font-black text-slate-800 text-sm">${g.user_phone}</span>
                        <span class="text-[9px] text-slate-400 font-mono italic">UID: ${g.user_id}</span>
                    </div>
                </td>
                <td class="px-8 py-5">
                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-black bg-emerald-50 text-emerald-600">
                        +${g.points}
                    </span>
                </td>
                <td class="px-8 py-5 font-bold text-slate-500">${g.reason || '-'}</td>
                <td class="px-8 py-5">
                    <span class="text-xs font-black text-slate-700 underline decoration-indigo-200">${g.admin_phone}</span>
                </td>
                <td class="px-8 py-5 text-right text-[10px] font-black text-slate-300 uppercase">
                    ${g.created_at}
                </td>
            </tr>
        `).join('');
        lucide.createIcons();
    }

    function changeGrantPage(delta) {
        grantPage += delta;
        if (grantPage < 1) grantPage = 1;
        loadGrantHistory();
    }

    // --- Invite Rewards ---
    async function loadInviteRewards() {
        const q = document.getElementById('inviteSearch').value;
        const r = await fetch(`/api/admin/invite/rewards?page=${invitePage}&q=${q}`);
        const d = await r.json();

        const tbody = document.getElementById('inviteRewardsTable');
        document.getElementById('invitePageInfo').innerText = `第 ${d.current_page} / ${d.pages} 页 (共 ${d.total} 条数据)`;

        tbody.innerHTML = d.rewards.map(r => `
            <tr class="hover:bg-slate-50 transition-colors border-b border-slate-50 last:border-0 text-sm">
                <td class="px-8 py-5">
                    <div class="flex items-center gap-2">
                         <div class="w-8 h-8 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center font-black text-[9px]">师</div>
                         <span class="font-black text-slate-800">${r.inviter_phone}</span>
                    </div>
                </td>
                <td class="px-8 py-5">
                    <div class="flex flex-col">
                        <span class="font-bold text-slate-700">${r.invitee_phone}</span>
                        <span class="text-[9px] text-slate-400">UID: ${r.invitee_id}</span>
                    </div>
                </td>
                <td class="px-8 py-5">
                    <span class="text-indigo-600 font-black">+${r.reward_points} 积分</span>
                </td>
                <td class="px-8 py-5">
                    <span class="px-2 py-0.5 bg-slate-100 text-slate-500 text-[10px] font-black rounded uppercase">充值 #${r.recharge_count}</span>
                </td>
                <td class="px-8 py-5 text-right text-[10px] font-black text-slate-300 uppercase">
                    ${r.created_at}
                </td>
            </tr>
        `).join('');
        lucide.createIcons();
    }

    function changeInvitePage(delta) {
        invitePage += delta;
        if (invitePage < 1) invitePage = 1;
        loadInviteRewards();
    }

    // --- Init ---
    document.addEventListener('DOMContentLoaded', () => {
        switchTab('grant');
        loadStats();
    });
</script>
{% endblock %}