<div class="invite-container">
    <div class="page-header">
        <h2>🤝 邀请返利</h2>
        <p>邀请好友注册并消费，获得返利佣金</p>
    </div>
    
    <div class="invite-stats">
        <div class="stat-card">
            <div class="stat-value" id="invite_count">-</div>
            <div class="stat-label">成功邀请</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="rebate_balance">-</div>
            <div class="stat-label">可提现余额</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="rebate_total">-</div>
            <div class="stat-label">累计返利</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="pending_rebate">-</div>
            <div class="stat-label">待结算</div>
        </div>
    </div>
    
    <div class="invite-link-box">
        <h3>🔗 邀请链接</h3>
        <div class="link-copy-box">
            <input type="text" id="invite_url" class="form-control" readonly>
            <button class="btn btn-primary" onclick="copyInviteLink()">复制链接</button>
        </div>
        <p class="tip">好友通过此链接注册，消费后您将获得 <strong>10%</strong> 返利</p>
    </div>
    
    <div class="withdraw-box">
        <h3>💰 申请提现</h3>
        <div class="withdraw-form">
            <input type="number" id="withdraw_amount" class="form-control" placeholder="输入提现金额" step="0.01">
            <button class="btn btn-success" onclick="applyWithdraw()">申请提现</button>
        </div>
        <p class="tip">最低提现金额 ¥10，提交后需管理员审核</p>
    </div>
    
    <div class="rebate-list">
        <h3>📋 返利记录</h3>
        <div class="table-container">
            <table class="data-table" id="rebate_table">
                <thead>
                    <tr><th>时间</th><th>来源用户</th><th>金额</th><th>状态</th></tr>
                </thead>
                <tbody id="rebate_list"></tbody>
            </table>
        </div>
    </div>
    
    <div class="invite-list">
        <h3>👥 邀请记录</h3>
        <div class="table-container">
            <table class="data-table" id="invite_table">
                <thead>
                    <tr><th>被邀请人</th><th>注册时间</th><th>状态</th></tr>
                </thead>
                <tbody id="invite_list"></tbody>
            </table>
        </div>
    </div>
</div>

<style>
.invite-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.stat-card {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border-color);
}
.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
}
.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}
.invite-link-box {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}
.link-copy-box {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}
.link-copy-box input {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.withdraw-box {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}
.withdraw-form {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}
.withdraw-form input {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.tip {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}
.btn-success {
    background: #10b981;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
}
</style>

<script>
// 加载邀请数据
function loadInviteData() {
    fetch('/api/invite.php?action=info')
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.getElementById('invite_count').innerText = data.data.invite_count;
                document.getElementById('rebate_balance').innerText = '¥' + parseFloat(data.data.rebate_balance).toFixed(2);
                document.getElementById('rebate_total').innerText = '¥' + parseFloat(data.data.rebate_total).toFixed(2);
                document.getElementById('pending_rebate').innerText = '¥' + parseFloat(data.data.pending_rebate).toFixed(2);
                document.getElementById('invite_url').value = data.data.invite_url;
                
                // 渲染返利列表
                let rebateHtml = '';
                data.data.recent_rebates.forEach(item => {
                    rebateHtml += `<tr>
                        <td>${item.created_at}</td>
                        <td>${item.from_username || '-'}</td>
                        <td>¥${parseFloat(item.amount).toFixed(2)}</td>
                        <td>${item.status == 1 ? '已结算' : '待结算'}</td>
                    </tr>`;
                });
                document.getElementById('rebate_list').innerHTML = rebateHtml || '<tr><td colspan="4">暂无数据</td></tr>';
                
                // 渲染邀请列表
                let inviteHtml = '';
                data.data.recent_invites.forEach(item => {
                    inviteHtml += `<tr>
                        <td>${item.invitee_username || '-'}</td>
                        <td>${item.created_at}</td>
                        <td>${item.status == 1 ? '已消费' : '已注册'}</td>
                    </tr>`;
                });
                document.getElementById('invite_list').innerHTML = inviteHtml || '<tr><td colspan="3">暂无数据</td></tr>';
            }
        });
}

// 复制邀请链接
function copyInviteLink() {
    const input = document.getElementById('invite_url');
    input.select();
    document.execCommand('copy');
    alert('邀请链接已复制');
}

// 申请提现
function applyWithdraw() {
    const amount = document.getElementById('withdraw_amount').value;
    if (!amount || amount <= 0) {
        alert('请输入提现金额');
        return;
    }
    
    fetch('/api/invite.php?action=withdraw', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'amount=' + amount
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            loadInviteData();
            document.getElementById('withdraw_amount').value = '';
        } else {
            alert(data.message);
        }
    });
}

// 页面加载
loadInviteData();
</script>