@extends('admin.layouts.admin')

@section('title', '用户管理')
@section('page-title', '用户管理')

@push('styles')
<style>
    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }
    .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    
    .table-actions {
        white-space: nowrap;
    }
    .table-actions .btn {
        margin-right: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .mobile-info {
        font-family: monospace;
        font-size: 0.85rem;
    }
    
    .deleted-row {
        background-color: #f8f9fa;
        opacity: 0.7;
    }
    
    .search-filters {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">

    <!-- 搜索和筛选区域 -->
    <div class="search-filters">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="searchInput" class="form-label">搜索用户</label>
                    <input type="text" class="form-control" id="searchInput" placeholder="UID、姓名、邮箱或手机尾号">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="statusFilter" class="form-label">状态筛选</label>
                    <select class="form-control" id="statusFilter">
                        <option value="">全部状态</option>
                        <option value="active">活跃用户</option>
                        <option value="inactive">非活跃用户</option>
                        <option value="deleted">已删除用户</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="perPageSelect" class="form-label">每页显示</label>
                    <select class="form-control" id="perPageSelect">
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button type="button" class="btn btn-primary" onclick="searchUsers()">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetFilters()">
                            <i class="fas fa-undo"></i> 重置
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#userModal" onclick="openCreateModal()">
                <i class="fas fa-plus"></i> 添加用户
            </button>
            <button type="button" class="btn btn-info" onclick="refreshUserList()">
                <i class="fas fa-sync-alt"></i> 刷新
            </button>
        </div>
        <div id="userStats" class="text-muted"></div>
    </div>

    <!-- 用户列表 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th onclick="sortBy('id')" style="cursor: pointer;">
                                ID <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortBy('uid')" style="cursor: pointer;">
                                UID <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortBy('vuid')" style="cursor: pointer;">
                                VUID <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortBy('name')" style="cursor: pointer;">
                                姓名 <i class="fas fa-sort"></i>
                            </th>
                            <th>邮箱</th>
                            <th>手机号</th>
                            <th onclick="sortBy('status')" style="cursor: pointer;">
                                状态 <i class="fas fa-sort"></i>
                            </th>
                            <th>活动数</th>
                            <th>奖励数</th>
                            <th>卡片数</th>
                            <th>会员数</th>
                            <th onclick="sortBy('created_at')" style="cursor: pointer;">
                                创建时间 <i class="fas fa-sort"></i>
                            </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        <tr>
                            <td colspan="13" class="text-center">
                                <i class="fas fa-spinner fa-spin"></i> 加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <nav id="paginationContainer" class="mt-3"></nav>
        </div>
    </div>
</div>

<!-- 用户编辑模态框 -->
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalTitle">添加用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <input type="hidden" id="editUserId" value="">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="userName" class="form-label">姓名 *</label>
                                <input type="text" class="form-control" id="userName" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="userEmail" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="userEmail">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="mobileCountryCode" class="form-label">国家代码</label>
                                <input type="text" class="form-control" id="mobileCountryCode" placeholder="86">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="mobileHeading3" class="form-label">手机前3位</label>
                                <input type="text" class="form-control" id="mobileHeading3" placeholder="138">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="mobileLast4" class="form-label">手机后4位</label>
                                <input type="text" class="form-control" id="mobileLast4" placeholder="1234">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="userLevel" class="form-label">用户等级</label>
                                <select class="form-control" id="userLevel">
                                    <option value="">请选择</option>
                                    <option value="Classic">Classic</option>
                                    <option value="Gold">Gold</option>
                                    <option value="Platinum">Platinum</option>
                                    <option value="Signature">Signature</option>
                                    <option value="Infinite">Infinite</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="userStatus" class="form-label">状态 *</label>
                                <select class="form-control" id="userStatus" required>
                                    <option value="1">活跃</option>
                                    <option value="0">非活跃</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="receiveEdm">
                            <label class="form-check-label" for="receiveEdm">
                                接收EDM邮件
                            </label>
                        </div>
                    </div>

                    <hr class="my-3">
                    <h6 class="text-muted mb-3"><i class="fas fa-shield-alt me-2"></i>后台管理权限</h6>

                    <div class="form-group mb-3">
                        <div class="form-check form-switch">
                            <input type="checkbox" class="form-check-input" id="isAdmin" onchange="togglePasswordField()">
                            <label class="form-check-label" for="isAdmin">
                                允许后台管理
                            </label>
                        </div>
                        <small class="text-muted">开启后，该用户可以使用邮箱和密码登录VSRP后台管理系统</small>
                    </div>

                    <div id="passwordFieldContainer" class="form-group mb-3" style="display: none;">
                        <label for="userPassword" class="form-label">管理员密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="userPassword" placeholder="请输入密码">
                            <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility()">
                                <i class="fas fa-eye" id="passwordToggleIcon"></i>
                            </button>
                        </div>
                        <small class="text-muted">
                            密码要求：至少10位字符，包含大写字母、小写字母和特殊字符(@$!%*#?&)
                        </small>
                        <div id="passwordStrength" class="mt-1"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 用户详情模态框 -->
<div class="modal fade" id="userDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">用户详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="userDetailContent">
                <!-- 用户详情内容将通过JavaScript加载 -->
            </div>
        </div>
    </div>
</div>

<!-- 设置手机号模态框 -->
<div class="modal fade" id="setMobileModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">设置用户手机号</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="setMobileForm">
                    <input type="hidden" id="setMobileUserId" value="">
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        手机号将使用AES-GCM加密存储，并生成SHA256哈希用于查询验证。
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="mobileCountryCodeSet" class="form-label">国家代码 *</label>
                                <select class="form-control" id="mobileCountryCodeSet" required>
                                    <option value="86">+86 (中国)</option>
                                    <option value="852">+852 (香港)</option>
                                    <option value="853">+853 (澳门)</option>
                                    <option value="886">+886 (台湾)</option>
                                    <option value="1">+1 (美国/加拿大)</option>
                                    <option value="44">+44 (英国)</option>
                                    <option value="81">+81 (日本)</option>
                                    <option value="82">+82 (韩国)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group mb-3">
                                <label for="mobileNumberSet" class="form-label">手机号码 *</label>
                                <input type="text" class="form-control" id="mobileNumberSet" 
                                       placeholder="请输入完整手机号" required pattern="[0-9]{11}">
                                <div class="form-text">
                                    请输入不含国家代码的手机号，如：13800138000
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label">预览完整号码</label>
                        <div class="form-control-plaintext bg-light p-2 rounded" id="fullMobilePreview">
                            +86 请输入手机号
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveUserMobile()">
                    <i class="fas fa-lock me-1"></i>加密保存
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 用户卡片管理模态框 -->
<div class="modal fade" id="userCardsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userCardsModalTitle">用户卡片管理</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 用户基本信息 -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="card bg-light">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <h6 class="mb-1" id="cardUserInfo">加载中...</h6>
                                        <small class="text-muted" id="cardUserStats">统计信息加载中...</small>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <select class="form-select form-select-sm d-inline-block w-auto" id="cardStatusFilter">
                                            <option value="">全部状态</option>
                                            <option value="0">未激活</option>
                                            <option value="1">已激活</option>
                                            <option value="2">已验证</option>
                                        </select>
                                        <button class="btn btn-sm btn-outline-primary ms-2" onclick="refreshUserCards()">
                                            <i class="fas fa-sync-alt"></i>
                                        </button>
                                        <button class="btn btn-sm btn-success ms-2" onclick="showManualCardBinding()">
                                            <i class="fas fa-plus"></i> 手动绑卡
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 卡片列表 -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>卡片ID</th>
                                <th>卡片信息</th>
                                <th>发卡机构</th>
                                <th>产品等级</th>
                                <th>状态</th>
                                <th>日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="userCardsTableBody">
                            <tr>
                                <td colspan="7" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> 加载中...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 卡片分页 -->
                <nav id="cardsPaginationContainer" class="mt-3"></nav>
            </div>
        </div>
    </div>
</div>

<!-- 卡片详情模态框 -->
<div class="modal fade" id="cardDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">卡片详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="cardDetailContent">
                <!-- 卡片详情内容将通过JavaScript加载 -->
            </div>
        </div>
    </div>
</div>

<!-- 手动绑卡模态框 -->
<div class="modal fade" id="manualCardBindingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">手动绑卡</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="manualCardBindingForm">
                    <!-- 步骤1: 输入卡号 -->
                    <div id="step1" class="binding-step">
                        <h6 class="mb-3">第一步：输入完整卡号</h6>
                        <div class="mb-3">
                            <label for="cardPan" class="form-label">卡号 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="cardPan" 
                                   placeholder="请输入16-19位完整卡号" maxlength="19"
                                   oninput="validateCardPan(this)">
                            <div class="form-text">请输入完整的银行卡号</div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-primary" onclick="getCardInfo()" 
                                    id="getCardInfoBtn" disabled>
                                <i class="fas fa-search"></i> 获取卡片信息
                            </button>
                        </div>
                    </div>

                    <!-- 步骤2: 显示卡片信息并编辑 -->
                    <div id="step2" class="binding-step" style="display: none;">
                        <h6 class="mb-3">第二步：确认卡片信息</h6>
                        
                        <!-- 卡片基本信息显示 -->
                        <div id="cardInfoDisplay" class="mb-4"></div>
                        
                        <!-- 可编辑的字段 -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="issueDate" class="form-label">发卡时间</label>
                                    <input type="date" class="form-control" id="issueDate">
                                    <div class="form-text">可选，发卡时间</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="activationDate" class="form-label">激活时间</label>
                                    <input type="date" class="form-control" id="activationDate">
                                    <div class="form-text">可选，激活时间</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-secondary" onclick="resetToStep1()">
                                <i class="fas fa-arrow-left"></i> 重新输入卡号
                            </button>
                            <button type="button" class="btn btn-success" onclick="addCardToUser()" 
                                    id="addCardBtn">
                                <i class="fas fa-plus"></i> 添加到用户
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let currentPage = 1;
let currentSort = 'created_at';
let currentSortDirection = 'desc';

document.addEventListener('DOMContentLoaded', function() {
    loadUsers();
    loadUserStats();
    
    // 搜索框回车事件
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            searchUsers();
        }
    });
    
    // 添加手机号输入监听
    document.addEventListener('input', function(e) {
        if (e.target.id === 'mobileNumberSet' || e.target.id === 'mobileCountryCodeSet') {
            updateMobilePreview();
        }
    });
});

function loadUsers(page = 1) {
    currentPage = page;
    
    const search = document.getElementById('searchInput').value;
    const statusFilter = document.getElementById('statusFilter').value;
    const perPage = document.getElementById('perPageSelect').value;
    
    const params = new URLSearchParams({
        page: page,
        search: search,
        status_filter: statusFilter,
        per_page: perPage,
        sort_by: currentSort,
        sort_direction: currentSortDirection
    });
    
    fetch(`/api/admin/users?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderUserTable(data.data);
                renderPagination(data.pagination);
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error loading users:', error);
            showAlert('加载用户列表失败', 'danger');
        });
}

function renderUserTable(users) {
    const tbody = document.getElementById('userTableBody');
    
    if (users.length === 0) {
        tbody.innerHTML = '<tr><td colspan="13" class="text-center text-muted">暂无用户数据</td></tr>';
        return;
    }
    
    tbody.innerHTML = users.map(user => {
        const isDeleted = user.deleted_at !== null;
        const statusBadge = user.status == 1 ? 
            '<span class="badge bg-success status-badge">活跃</span>' : 
            '<span class="badge bg-secondary status-badge">非活跃</span>';
            
        const mobileInfo = user.mobile_country_code && user.mobile_heading_3 && user.mobile_last_4 ? 
            `<span class="mobile-info">+${user.mobile_country_code} ${user.mobile_heading_3}****${user.mobile_last_4}</span>` : 
            '<span class="text-muted">-</span>';
            
        const deleteAction = isDeleted ? 
            `<button class="btn btn-sm btn-success" onclick="restoreUser(${user.id})" title="恢复用户">
                <i class="fas fa-undo"></i>
             </button>` :
            `<button class="btn btn-sm btn-danger" onclick="confirmDeleteUser(${user.id}, '${user.name}')" title="删除用户">
                <i class="fas fa-trash"></i>
             </button>`;
             
        const rowClass = isDeleted ? 'deleted-row' : '';
        
        const cardCount = user.cards ? user.cards.length : 0;
        const campaignsCount = user.campaigns_count || 0;
        const rewardsCount = user.rewards_count || 0;
        const membershipsCount = user.memberships_count || 0;

        return `
            <tr class="${rowClass}">
                <td>${user.id}</td>
                <td><code>${user.uid}</code></td>
                <td>
                    ${user.vuid ? '<code class="text-success">' + user.vuid + '</code>' : '<span class="text-muted">-</span>'}
                </td>
                <td>${user.name || '-'}</td>
                <td>${user.email || '-'}</td>
                <td>${mobileInfo}</td>
                <td>${statusBadge}${isDeleted ? ' <span class="badge bg-danger status-badge">已删除</span>' : ''}</td>
                <td class="text-center">
                    ${campaignsCount > 0 ? `<span class="badge bg-primary">${campaignsCount}</span>` : '<span class="text-muted">-</span>'}
                </td>
                <td class="text-center">
                    ${rewardsCount > 0 ? `<span class="badge bg-success">${rewardsCount}</span>` : '<span class="text-muted">-</span>'}
                </td>
                <td class="text-center">
                    ${cardCount > 0 ? `<span class="badge bg-info">${cardCount}</span>` : '<span class="text-muted">-</span>'}
                </td>
                <td class="text-center">
                    ${membershipsCount > 0 ? `<span class="badge bg-warning text-dark">${membershipsCount}</span>` : '<span class="text-muted">-</span>'}
                </td>
                <td>${new Date(user.created_at).toLocaleString()}</td>
                <td class="table-actions">
                    <button class="btn btn-sm btn-info" onclick="showUserDetail(${user.id})" title="查看详情">
                        <i class="fas fa-eye"></i>
                    </button>
                    ${!isDeleted ? '<button class="btn btn-sm btn-warning" onclick="editUser(' + user.id + ')" title="编辑用户"><i class="fas fa-edit"></i></button>' : ''}
                    ${deleteAction}
                </td>
            </tr>
        `;
    }).join('');
}

function renderPagination(pagination) {
    const container = document.getElementById('paginationContainer');
    
    if (pagination.last_page <= 1) {
        container.innerHTML = '';
        return;
    }
    
    let paginationHtml = '<ul class="pagination justify-content-center">';
    
    // 上一页
    if (pagination.current_page > 1) {
        paginationHtml += `<li class="page-item">
            <a class="page-link" href="#" onclick="loadUsers(${pagination.current_page - 1})">上一页</a>
        </li>`;
    }
    
    // 页码
    const startPage = Math.max(1, pagination.current_page - 2);
    const endPage = Math.min(pagination.last_page, pagination.current_page + 2);
    
    for (let i = startPage; i <= endPage; i++) {
        const activeClass = i === pagination.current_page ? 'active' : '';
        paginationHtml += `<li class="page-item ${activeClass}">
            <a class="page-link" href="#" onclick="loadUsers(${i})">${i}</a>
        </li>`;
    }
    
    // 下一页
    if (pagination.current_page < pagination.last_page) {
        paginationHtml += `<li class="page-item">
            <a class="page-link" href="#" onclick="loadUsers(${pagination.current_page + 1})">下一页</a>
        </li>`;
    }
    
    paginationHtml += '</ul>';
    
    // 分页信息
    paginationHtml += `<div class="text-center text-muted mt-2">
        显示 ${pagination.from} 到 ${pagination.to} 条，共 ${pagination.total} 条记录
    </div>`;
    
    container.innerHTML = paginationHtml;
}

function loadUserStats() {
    fetch('/api/admin/users/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('userStats').innerHTML = 
                    `总用户: ${data.data.total} | 活跃: ${data.data.active} | 非活跃: ${data.data.inactive} | 已删除: ${data.data.deleted} | 最近7天新增: ${data.data.recent}`;
            }
        })
        .catch(error => console.error('Error loading user stats:', error));
}

function searchUsers() {
    currentPage = 1;
    loadUsers();
}

function resetFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('perPageSelect').value = '15';
    currentPage = 1;
    currentSort = 'created_at';
    currentSortDirection = 'desc';
    loadUsers();
}

function sortBy(column) {
    if (currentSort === column) {
        currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
    } else {
        currentSort = column;
        currentSortDirection = 'asc';
    }
    currentPage = 1;
    loadUsers();
}

function refreshUserList() {
    loadUsers(currentPage);
    loadUserStats();
}

function openCreateModal() {
    document.getElementById('userModalTitle').textContent = '添加用户';
    document.getElementById('userForm').reset();
    document.getElementById('editUserId').value = '';
    document.getElementById('isAdmin').checked = false;
    document.getElementById('userPassword').value = '';
    togglePasswordField();
}

// 切换密码字段显示/隐藏
function togglePasswordField() {
    const isAdmin = document.getElementById('isAdmin').checked;
    const passwordContainer = document.getElementById('passwordFieldContainer');
    const passwordInput = document.getElementById('userPassword');

    if (isAdmin) {
        passwordContainer.style.display = 'block';
    } else {
        passwordContainer.style.display = 'none';
        passwordInput.value = '';
    }
}

// 切换密码可见性
function togglePasswordVisibility() {
    const passwordInput = document.getElementById('userPassword');
    const toggleIcon = document.getElementById('passwordToggleIcon');

    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}

// 验证密码强度
function validatePassword(password) {
    const errors = [];

    if (password.length < 10) {
        errors.push('密码长度至少为10位');
    }
    if (!/[a-z]/.test(password)) {
        errors.push('需要包含小写字母');
    }
    if (!/[A-Z]/.test(password)) {
        errors.push('需要包含大写字母');
    }
    if (!/[@$!%*#?&]/.test(password)) {
        errors.push('需要包含特殊字符(@$!%*#?&)');
    }

    return errors;
}

// 实时显示密码强度提示
document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.getElementById('userPassword');
    if (passwordInput) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            const strengthDiv = document.getElementById('passwordStrength');

            if (!password) {
                strengthDiv.innerHTML = '';
                return;
            }

            const errors = validatePassword(password);

            if (errors.length === 0) {
                strengthDiv.innerHTML = '<span class="text-success"><i class="fas fa-check-circle"></i> 密码符合要求</span>';
            } else {
                strengthDiv.innerHTML = '<span class="text-danger"><i class="fas fa-exclamation-circle"></i> ' + errors.join('，') + '</span>';
            }
        });
    }
});

function editUser(id) {
    fetch(`/api/admin/users/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const user = data.data;
                document.getElementById('userModalTitle').textContent = '编辑用户';
                document.getElementById('editUserId').value = user.id;
                document.getElementById('userName').value = user.name || '';
                document.getElementById('userEmail').value = user.email || '';
                document.getElementById('mobileCountryCode').value = user.mobile_country_code || '';
                document.getElementById('mobileHeading3').value = user.mobile_heading_3 || '';
                document.getElementById('mobileLast4').value = user.mobile_last_4 || '';
                document.getElementById('userLevel').value = user.level || '';
                document.getElementById('userStatus').value = user.status;
                document.getElementById('receiveEdm').checked = user.receive_edm;

                // 设置 is_admin 开关状态
                document.getElementById('isAdmin').checked = user.is_admin || false;
                document.getElementById('userPassword').value = ''; // 密码不回显
                document.getElementById('passwordStrength').innerHTML = user.is_admin ?
                    '<span class="text-info"><i class="fas fa-info-circle"></i> 如不修改密码请留空</span>' : '';
                togglePasswordField();

                new bootstrap.Modal(document.getElementById('userModal')).show();
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error fetching user:', error);
            showAlert('获取用户信息失败', 'danger');
        });
}

function saveUser() {
    const userId = document.getElementById('editUserId').value;
    const isEdit = userId !== '';
    const isAdmin = document.getElementById('isAdmin').checked;
    const password = document.getElementById('userPassword').value;

    // 如果开启了 is_admin 且输入了密码，进行前端验证
    if (isAdmin && password) {
        const errors = validatePassword(password);
        if (errors.length > 0) {
            showAlert('密码不符合要求：' + errors.join('，'), 'danger');
            return;
        }
    }

    // 如果是新设置 is_admin 为 true，必须提供密码
    if (isAdmin && !password && !isEdit) {
        showAlert('请为管理员设置密码', 'danger');
        return;
    }

    const formData = {
        name: document.getElementById('userName').value,
        email: document.getElementById('userEmail').value,
        mobile_country_code: document.getElementById('mobileCountryCode').value,
        mobile_heading_3: document.getElementById('mobileHeading3').value,
        mobile_last_4: document.getElementById('mobileLast4').value,
        level: document.getElementById('userLevel').value,
        status: document.getElementById('userStatus').value,
        receive_edm: document.getElementById('receiveEdm').checked,
        is_admin: isAdmin
    };

    // 只有当输入了密码时才发送密码字段
    if (password) {
        formData.password = password;
    }

    const url = isEdit ? `/api/admin/users/${userId}` : '/api/admin/users';
    const method = isEdit ? 'PUT' : 'POST';
    
    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            bootstrap.Modal.getInstance(document.getElementById('userModal')).hide();
            loadUsers(currentPage);
            loadUserStats();
        } else {
            showAlert(data.message, 'danger');
            if (data.errors) {
                console.log('Validation errors:', data.errors);
            }
        }
    })
    .catch(error => {
        console.error('Error saving user:', error);
        showAlert('保存用户失败', 'danger');
    });
}

function confirmDeleteUser(id, name) {
    if (confirm(`确定要删除用户 "${name}" 吗？\n\n注意：这是软删除，用户数据将被保留但标记为已删除状态。`)) {
        deleteUser(id);
    }
}

function deleteUser(id) {
    fetch(`/api/admin/users/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            loadUsers(currentPage);
            loadUserStats();
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error deleting user:', error);
        showAlert('删除用户失败', 'danger');
    });
}

function restoreUser(id) {
    if (confirm('确定要恢复这个用户吗？')) {
        fetch(`/api/admin/users/${id}/restore`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                loadUsers(currentPage);
                loadUserStats();
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error restoring user:', error);
            showAlert('恢复用户失败', 'danger');
        });
    }
}

function showUserDetail(id) {
    fetch(`/api/admin/users/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderUserDetail(data.data);
                new bootstrap.Modal(document.getElementById('userDetailModal')).show();
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error fetching user detail:', error);
            showAlert('获取用户详情失败', 'danger');
        });
}

function renderUserDetail(user) {
    const isDeleted = user.deleted_at !== null;
    const deletedInfo = isDeleted ? 
        `<div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i> 
            此用户已被删除，删除时间：${new Date(user.deleted_at).toLocaleString()}
         </div>` : '';
    
    document.getElementById('userDetailContent').innerHTML = `
        ${deletedInfo}
        
        <!-- 导航标签页 -->
        <ul class="nav nav-tabs" id="userDetailTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="detail-tab" data-bs-toggle="tab" data-bs-target="#detail" type="button" role="tab">
                    用户详情
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="mobile-tab" data-bs-toggle="tab" data-bs-target="#mobile" type="button" role="tab">
                    手机号管理
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="cards-tab" data-bs-toggle="tab" data-bs-target="#cards" type="button" role="tab">
                    卡片管理
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="memberships-tab" data-bs-toggle="tab" data-bs-target="#memberships" type="button" role="tab">
                    会员管理
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="enrollments-tab" data-bs-toggle="tab" data-bs-target="#enrollments" type="button" role="tab">
                    活动报名
                </button>
            </li>
        </ul>
        
        <!-- 标签页内容 -->
        <div class="tab-content" id="userDetailTabsContent">
            <!-- 用户详情 -->
            <div class="tab-pane fade show active" id="detail" role="tabpanel">
                <div class="p-3">
                            <!-- 基本信息概览 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0 text-primary">基本信息</h6>
                                </div>
                                <div class="card-body">
                                    <p><strong>UID:</strong> <code>${user.uid}</code></p>
                                    <p><strong>VUID:</strong> ${user.vuid ? '<code class="text-success">' + user.vuid + '</code>' : '<span class="text-muted">-</span>'}</p>
                                    <p><strong>姓名:</strong> ${user.name || '-'}</p>
                                    <p><strong>邮箱:</strong> ${user.email || '-'}</p>
                                    <p><strong>等级:</strong> ${user.level || '-'}</p>
                                    <p><strong>状态:</strong> <span class="badge ${user.status == 1 ? 'bg-success' : 'bg-secondary'}">${user.status == 1 ? '活跃' : '非活跃'}</span></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0 text-info">关联数据统计</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row text-center">
                                        <div class="col-4">
                                            <div class="border-end">
                                                <h4 class="text-primary">${(user.campaigns ? user.campaigns.length : 0) > 0 ? (user.campaigns ? user.campaigns.length : 0) : '-'}</h4>
                                                <small>活动</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="border-end">
                                                <h4 class="text-success">${(user.rewards ? user.rewards.length : 0) > 0 ? (user.rewards ? user.rewards.length : 0) : '-'}</h4>
                                                <small>奖励</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <h4 class="text-info">${(user.cards ? user.cards.length : 0) > 0 ? (user.cards ? user.cards.length : 0) : '-'}</h4>
                                            <small>卡片</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 奖励列表 -->
                    <div class="mb-4">
                        <h6 class="text-success">获得的奖励</h6>
                        <div id="userRewardsContent">
                            <div class="text-center">
                                <i class="fas fa-spinner fa-spin"></i> 加载中...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 手机号管理 -->
            <div class="tab-pane fade" id="mobile" role="tabpanel">
                <div class="p-3">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        手机号将使用AES-GCM加密存储，并生成SHA256哈希用于查询验证。
                    </div>
                    
                    <!-- 发送短信OTP区域 -->
                    ${user.mobile_country_code && user.mobile_heading_3 && user.mobile_last_4 && !isDeleted ?
                    '<div class="card mb-3">' +
                        '<div class="card-header bg-warning-subtle">' +
                            '<i class="fas fa-sms me-2"></i><strong>发送短信验证码</strong>' +
                            '<small class="text-muted ms-2">（用于客服验证用户身份）</small>' +
                        '</div>' +
                        '<div class="card-body">' +
                            '<p class="text-muted mb-3">点击按钮向用户手机发送验证码，验证码将显示在下方供客服确认。</p>' +
                            '<button type="button" class="btn btn-warning" id="sendOtpBtn" onclick="sendSmsOtpToUser(' + user.id + ')">' +
                                '<i class="fas fa-paper-plane me-1"></i>发送短信OTP' +
                            '</button>' +
                            '<div id="otpResultArea" class="mt-3" style="display: none;">' +
                                '<div class="alert alert-success">' +
                                    '<div class="d-flex align-items-center">' +
                                        '<div class="me-4">' +
                                            '<strong>验证码：</strong>' +
                                            '<span id="otpCode" class="fs-3 fw-bold text-primary font-monospace"></span>' +
                                        '</div>' +
                                        '<div>' +
                                            '<strong>发送时间：</strong>' +
                                            '<span id="otpSentTime"></span>' +
                                        '</div>' +
                                    '</div>' +
                                    '<small class="text-muted d-block mt-2">' +
                                        '<i class="fas fa-exclamation-circle me-1"></i>此信息刷新页面后消失，验证码5分钟内有效' +
                                    '</small>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>' : ''}

                    <div class="card">
                        <div class="card-header">
                            <strong>当前手机号：</strong>
                            ${user.mobile_country_code && user.mobile_heading_3 && user.mobile_last_4 ?
                              '+' + user.mobile_country_code + ' ' + user.mobile_heading_3 + '****' + user.mobile_last_4 :
                              '<span class="text-muted">未设置</span>'}
                        </div>
                        <div class="card-body">
                            ${!isDeleted ? '<form id="setMobileFormInDetail">' +
                                '<div class="row">' +
                                    '<div class="col-md-4">' +
                                        '<div class="form-group mb-3">' +
                                            '<label class="form-label">国家代码 *</label>' +
                                            '<select class="form-control" id="mobileCountryCodeDetail" required>' +
                                                '<option value="86">+86 (中国)</option>' +
                                                '<option value="852">+852 (香港)</option>' +
                                                '<option value="853">+853 (澳门)</option>' +
                                                '<option value="886">+886 (台湾)</option>' +
                                                '<option value="1">+1 (美国/加拿大)</option>' +
                                                '<option value="44">+44 (英国)</option>' +
                                                '<option value="81">+81 (日本)</option>' +
                                                '<option value="82">+82 (韩国)</option>' +
                                            '</select>' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="col-md-8">' +
                                        '<div class="form-group mb-3">' +
                                            '<label class="form-label">手机号码 *</label>' +
                                            '<input type="text" class="form-control" id="mobileNumberDetail" ' +
                                                   'placeholder="请输入完整手机号" required>' +
                                            '<div class="form-text">' +
                                                '请输入不含国家代码的手机号，如：13800138000' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="form-group mb-3">' +
                                    '<label class="form-label">预览完整号码</label>' +
                                    '<div class="form-control-plaintext bg-light p-2 rounded" id="fullMobilePreviewDetail">' +
                                        '+86 请输入手机号' +
                                    '</div>' +
                                '</div>' +
                                '<button type="button" class="btn btn-primary" onclick="saveUserMobileFromDetail(' + user.id + ')">' +
                                    '<i class="fas fa-lock me-1"></i>加密保存' +
                                '</button>' +
                            '</form>' : '<div class="text-muted">用户已删除，无法修改手机号</div>'}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 卡片管理 -->
            <div class="tab-pane fade" id="cards" role="tabpanel">
                <div class="p-3" id="cardsManagementContent">
                    <!-- 卡片管理内容将通过JavaScript动态加载 -->
                    <div class="text-center">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                </div>
            </div>

            <!-- 会员管理 -->
            <div class="tab-pane fade" id="memberships" role="tabpanel">
                <div class="p-3" id="membershipsManagementContent">
                    <!-- 会员管理内容将通过JavaScript动态加载 -->
                    <div class="text-center">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                </div>
            </div>

            <!-- 活动报名 -->
            <div class="tab-pane fade" id="enrollments" role="tabpanel">
                <div class="p-3" id="enrollmentsManagementContent">
                    <!-- 活动报名内容将通过JavaScript动态加载 -->
                    <div class="text-center">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // 设置手机号字段的默认值
    if (user.mobile_country_code) {
        setTimeout(() => {
            const countryCodeSelect = document.getElementById('mobileCountryCodeDetail');
            if (countryCodeSelect) {
                countryCodeSelect.value = user.mobile_country_code;
            }
        }, 100);
    }
    
    // 绑定手机号预览更新事件
    setTimeout(() => {
        const countryCodeSelect = document.getElementById('mobileCountryCodeDetail');
        const mobileNumberInput = document.getElementById('mobileNumberDetail');
        
        if (countryCodeSelect && mobileNumberInput) {
            countryCodeSelect.addEventListener('change', updateMobilePreviewDetail);
            mobileNumberInput.addEventListener('input', updateMobilePreviewDetail);
            updateMobilePreviewDetail(); // 初始化预览
        }
        
        // 绑定标签页切换事件
        const cardsTab = document.getElementById('cards-tab');
        if (cardsTab) {
            cardsTab.addEventListener('shown.bs.tab', () => {
                loadUserCardsInDetail(user.id);
            });
        }

        // 绑定会员标签页切换事件
        const membershipsTab = document.getElementById('memberships-tab');
        if (membershipsTab) {
            membershipsTab.addEventListener('shown.bs.tab', () => {
                loadUserMembershipsInDetail(user.id);
            });
        }

        // 绑定活动报名标签页切换事件
        const enrollmentsTab = document.getElementById('enrollments-tab');
        if (enrollmentsTab) {
            enrollmentsTab.addEventListener('shown.bs.tab', () => {
                loadUserEnrollments(user.id);
            });
        }
    }, 100);

    // 自动加载奖励列表
    loadUserRewards(user.id);
}

function setUserMobile(id) {
    fetch(`/api/admin/users/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const user = data.data;
                document.getElementById('setMobileUserId').value = user.id;
                document.getElementById('mobileCountryCodeSet').value = user.mobile_country_code || '86';
                document.getElementById('mobileNumberSet').value = '';
                updateMobilePreview();
                
                new bootstrap.Modal(document.getElementById('setMobileModal')).show();
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error fetching user:', error);
            showAlert('获取用户信息失败', 'danger');
        });
}

function updateMobilePreview() {
    const countryCode = document.getElementById('mobileCountryCodeSet').value;
    const mobile = document.getElementById('mobileNumberSet').value;
    const preview = document.getElementById('fullMobilePreview');
    
    if (mobile) {
        preview.textContent = `+${countryCode} ${mobile}`;
    } else {
        preview.textContent = `+${countryCode} 请输入手机号`;
    }
}

function saveUserMobile() {
    const userId = document.getElementById('setMobileUserId').value;
    const countryCode = document.getElementById('mobileCountryCodeSet').value;
    const mobile = document.getElementById('mobileNumberSet').value;
    
    if (!mobile) {
        showAlert('请输入手机号', 'warning');
        return;
    }
    
    // 验证手机号格式（简单验证）
    if (countryCode === '86' && !/^1[3-9]\d{9}$/.test(mobile)) {
        showAlert('请输入正确的中国大陆手机号格式', 'warning');
        return;
    }
    
    const formData = {
        mobile: mobile,
        country_code: countryCode
    };
    
    const saveBtn = event.target;
    const originalText = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>加密中...';
    saveBtn.disabled = true;
    
    fetch(`/api/admin/users/${userId}/set-mobile`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            bootstrap.Modal.getInstance(document.getElementById('setMobileModal')).hide();
            loadUsers(currentPage);
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error setting mobile:', error);
        showAlert('设置手机号失败', 'danger');
    })
    .finally(() => {
        saveBtn.innerHTML = originalText;
        saveBtn.disabled = false;
    });
}

let currentCardUserId = null;
let currentCardPage = 1;

function showUserCards(userId) {
    currentCardUserId = userId;
    currentCardPage = 1;
    
    // 显示模态框
    new bootstrap.Modal(document.getElementById('userCardsModal')).show();
    
    // 加载用户卡片
    loadUserCards();
}

function loadUserCards(page = 1) {
    if (!currentCardUserId) return;
    
    currentCardPage = page;
    const statusFilter = document.getElementById('cardStatusFilter').value;
    
    const params = new URLSearchParams({
        page: page,
        status: statusFilter,
        per_page: 10,
        sort_by: 'created_at',
        sort_direction: 'desc'
    });
    
    fetch(`/api/admin/users/${currentCardUserId}/cards?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderUserCardsTable(data.data);
                renderCardsPagination(data.pagination);
                updateCardUserInfo(data.user, data.pagination.total);
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error loading user cards:', error);
            showAlert('加载用户卡片失败', 'danger');
        });
}

function updateCardUserInfo(user, totalCards) {
    document.getElementById('cardUserInfo').innerHTML = `
        <strong>${user.name || user.uid}</strong> 
        <small class="text-muted">(${user.uid})</small>
    `;
    document.getElementById('cardUserStats').textContent = `共有 ${totalCards} 张卡片`;
}

function renderUserCardsTable(cards) {
    const tbody = document.getElementById('userCardsTableBody');
    
    if (!cards || cards.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">该用户暂无卡片</td></tr>';
        return;
    }
    
    tbody.innerHTML = cards.map(card => {
        const statusBadge = getCardStatusBadge(card.status);
        const fundingSourceText = getFundingSourceText(card.funding_source);
        const issuerInfo = card.issuer_name ? 
            '<div class="fw-bold">' + card.issuer_name + '</div><small class="text-muted">' + (card.issuer_code || '') + '</small>' : 
            '<span class="text-muted">未知机构</span>';
        
        return `
            <tr>
                <td>
                    <code>${card.vcard_id}</code>
                    ${card.name ? '<br><small class="text-muted">' + card.name + '</small>' : ''}
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <div>
                            <div class="fw-bold">****${card.last_4}</div>
                            <small class="text-muted">${fundingSourceText} • ${card.bin}</small>
                        </div>
                    </div>
                </td>
                <td>${issuerInfo}</td>
                <td>
                    <span class="badge bg-secondary">${card.product_level}</span>
                    <br><small class="text-muted">${card.product_name || ''}</small>
                </td>
                <td>${statusBadge}</td>
                <td>
                    ${card.issue_date ? '<small>发卡：' + card.issue_date + '</small><br>' : ''}
                    ${card.activation_date ? '<small>激活：' + card.activation_date + '</small><br>' : ''}
                    <small class="text-muted">创建：${new Date(card.created_at).toLocaleDateString()}</small>
                </td>
                <td>
                    <button class="btn btn-sm btn-outline-info" onclick="showCardDetail(${currentCardUserId}, ${card.id})" title="查看详情">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger ms-1" onclick="confirmDeleteCard(${currentCardUserId}, ${card.id}, '****${card.last_4}')" title="删除卡片">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
    }).join('');
}

// 确认删除卡片
function confirmDeleteCard(userId, cardId, cardNumber) {
    if (confirm(`确定要删除卡片 ${cardNumber} 吗？\n\n此操作不可恢复！`)) {
        deleteCard(userId, cardId);
    }
}

// 删除卡片
function deleteCard(userId, cardId) {
    fetch(`/api/admin/users/${userId}/cards/${cardId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('卡片删除成功');
            // 刷新卡片列表
            if (document.getElementById('userCardsModal').classList.contains('show')) {
                loadUserCards();
            }
            // 如果在用户详情页，也刷新
            if (typeof loadUserCardsInDetail === 'function') {
                loadUserCardsInDetail(userId);
            }
        } else {
            alert('删除失败: ' + (data.message || '未知错误'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('删除卡片时发生错误');
    });
}

function renderCardsPagination(pagination) {
    const container = document.getElementById('cardsPaginationContainer');

    if (pagination.last_page <= 1) {
        container.innerHTML = '';
        return;
    }
    
    let paginationHtml = '<ul class="pagination justify-content-center pagination-sm">';
    
    // 上一页
    if (pagination.current_page > 1) {
        paginationHtml += `<li class="page-item">
            <a class="page-link" href="#" onclick="loadUserCards(${pagination.current_page - 1})">上一页</a>
        </li>`;
    }
    
    // 页码
    const startPage = Math.max(1, pagination.current_page - 2);
    const endPage = Math.min(pagination.last_page, pagination.current_page + 2);
    
    for (let i = startPage; i <= endPage; i++) {
        const activeClass = i === pagination.current_page ? 'active' : '';
        paginationHtml += `<li class="page-item ${activeClass}">
            <a class="page-link" href="#" onclick="loadUserCards(${i})">${i}</a>
        </li>`;
    }
    
    // 下一页
    if (pagination.current_page < pagination.last_page) {
        paginationHtml += `<li class="page-item">
            <a class="page-link" href="#" onclick="loadUserCards(${pagination.current_page + 1})">下一页</a>
        </li>`;
    }
    
    paginationHtml += '</ul>';
    
    // 分页信息
    paginationHtml += `<div class="text-center text-muted mt-2">
        显示 ${pagination.from} 到 ${pagination.to} 条，共 ${pagination.total} 条记录
    </div>`;
    
    container.innerHTML = paginationHtml;
}

function refreshUserCards() {
    loadUserCards(currentCardPage);
}

function showCardDetail(userId, cardId) {
    fetch(`/api/admin/users/${userId}/cards/${cardId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderCardDetail(data.data, data.user);
                new bootstrap.Modal(document.getElementById('cardDetailModal')).show();
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error fetching card details:', error);
            showAlert('获取卡片详情失败', 'danger');
        });
}

function renderCardDetail(card, user) {
    const statusBadge = getCardStatusBadge(card.status);
    const fundingSourceText = getFundingSourceText(card.funding_source);
    
    document.getElementById('cardDetailContent').innerHTML = `
        <div class="row">
            <div class="col-md-6">
                <h6 class="text-primary">基本信息</h6>
                <table class="table table-sm table-bordered">
                    <tr><th>卡片ID</th><td><code>${card.vcard_id}</code></td></tr>
                    <tr><th>用户</th><td>${user.name || user.uid}</td></tr>
                    <tr><th>卡片名称</th><td>${card.name || '-'}</td></tr>
                    <tr><th>状态</th><td>${statusBadge}</td></tr>
                    <tr><th>绑定渠道</th><td>${card.channel || '-'}</td></tr>
                    <tr><th>卡片信息</th><td>****${card.last_4} (${card.bin})</td></tr>
                    <tr><th>资金类型</th><td>${fundingSourceText}</td></tr>
                    <tr><th>芯片卡</th><td>${card.is_chip ? '是' : '否'}</td></tr>
                    <tr><th>DCDB</th><td>${card.is_dcdb ? '是' : '否'}</td></tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6 class="text-success">发卡机构信息</h6>
                <table class="table table-sm table-bordered">
                    <tr><th>机构名称</th><td>${card.issuer_name || '-'}</td></tr>
                    <tr><th>机构代码</th><td>${card.issuer_code || '-'}</td></tr>
                    <tr><th>机构BID</th><td>${card.issuer_bid || '-'}</td></tr>
                    <tr><th>机构颜色</th><td>
                        ${card.issuer_color ? '<span class="badge" style="background-color: ' + card.issuer_color + ';">' + card.issuer_color + '</span>' : '-'}
                    </td></tr>
                    <tr><th>机构Logo</th><td>
                        ${card.issuer_logo_url ? '<img src="' + card.issuer_logo_url + '" alt="Logo" style="max-height: 30px;">' : '-'}
                    </td></tr>
                </table>
                
                <h6 class="text-info mt-3">产品信息</h6>
                <table class="table table-sm table-bordered">
                    <tr><th>产品代码</th><td>${card.product_code}</td></tr>
                    <tr><th>产品等级</th><td><span class="badge bg-secondary">${card.product_level}</span></td></tr>
                    <tr><th>产品名称</th><td>${card.product_name || '-'}</td></tr>
                </table>
            </div>
        </div>
        
        <div class="row mt-3">
            <div class="col-md-6">
                <h6 class="text-warning">日期信息</h6>
                <table class="table table-sm table-bordered">
                    <tr><th>发卡日期</th><td>${card.issue_date || '-'}</td></tr>
                    <tr><th>激活日期</th><td>${card.activation_date || '-'}</td></tr>
                    <tr><th>创建时间</th><td>${new Date(card.created_at).toLocaleString()}</td></tr>
                    <tr><th>更新时间</th><td>${new Date(card.updated_at).toLocaleString()}</td></tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6 class="text-danger">关联信息</h6>
                <div class="mb-2">
                    <strong>卡片状态：</strong>
                    <span class="badge bg-success">已注册</span>
                </div>
                <div class="mb-2">
                    <strong>关联奖励：</strong>
                    <span class="badge bg-info">${card.rewards ? card.rewards.length : 0} 个奖励</span>
                </div>
            </div>
        </div>
    `;
}

function getCardStatusBadge(status) {
    switch(status) {
        case 0: return '<span class="badge bg-secondary">未激活</span>';
        case 1: return '<span class="badge bg-warning text-dark">已激活</span>';
        case 2: return '<span class="badge bg-success">已验证</span>';
        default: return '<span class="badge bg-light text-dark">未知</span>';
    }
}

function getCardStatusText(status) {
    switch(status) {
        case 0: return '未激活';
        case 1: return '已激活';
        case 2: return '已验证';
        default: return '未知';
    }
}

function getCardStatusBadgeClass(status) {
    switch(status) {
        case 0: return 'bg-secondary';
        case 1: return 'bg-warning text-dark';
        case 2: return 'bg-success';
        default: return 'bg-light text-dark';
    }
}

function getFundingSourceText(fundingSource) {
    switch(fundingSource) {
        case 'C': return '信用卡';
        case 'D': return '借记卡';
        case 'P': return '预付卡';
        default: return fundingSource || '未知';
    }
}

// 卡片状态筛选事件
document.addEventListener('change', function(e) {
    if (e.target.id === 'cardStatusFilter') {
        loadUserCards(1);
    }
});

function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.parentNode.removeChild(alertDiv);
        }
    }, 5000);
}

// 手动绑卡相关变量
let currentCardData = null;
let manualBindingModal = null;

// 显示手动绑卡模态框
function showManualCardBinding() {
    if (!currentCardUserId) {
        showAlert('请先选择一个用户', 'warning');
        return;
    }
    
    // 重置表单
    resetManualBindingForm();
    
    // 显示模态框
    manualBindingModal = new bootstrap.Modal(document.getElementById('manualCardBindingModal'));
    manualBindingModal.show();
}

// 显示给用户添加卡片的模态框（从用户详情页调用）
function showAddCardToUser(userId) {
    // 设置当前用户ID
    currentCardUserId = userId;
    
    // 重置表单
    resetManualBindingForm();
    
    // 显示模态框
    manualBindingModal = new bootstrap.Modal(document.getElementById('manualCardBindingModal'));
    manualBindingModal.show();
}

// 重置手动绑卡表单
function resetManualBindingForm() {
    document.getElementById('cardPan').value = '';
    document.getElementById('issueDate').value = '';
    document.getElementById('activationDate').value = '';
    document.getElementById('getCardInfoBtn').disabled = true;
    
    // 显示步骤1，隐藏步骤2
    document.getElementById('step1').style.display = 'block';
    document.getElementById('step2').style.display = 'none';
    
    currentCardData = null;
}

// 回到步骤1
function resetToStep1() {
    resetManualBindingForm();
}

// 验证卡号输入
function validateCardPan(input) {
    const pan = input.value.replace(/\D/g, ''); // 只保留数字
    input.value = pan;
    
    const getCardInfoBtn = document.getElementById('getCardInfoBtn');
    
    if (pan.length >= 16 && pan.length <= 19) {
        getCardInfoBtn.disabled = false;
    } else {
        getCardInfoBtn.disabled = true;
    }
}

// 获取卡片信息
function getCardInfo() {
    const pan = document.getElementById('cardPan').value;
    const getCardInfoBtn = document.getElementById('getCardInfoBtn');
    
    if (!pan || pan.length < 16) {
        showAlert('请输入有效的卡号', 'warning');
        return;
    }
    
    if (!currentCardUserId) {
        showAlert('请先选择一个用户', 'warning');
        return;
    }
    
    // 设置按钮为加载状态
    getCardInfoBtn.disabled = true;
    getCardInfoBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在获取...';
    
    // 首先获取用户信息以获得vuid
    fetch(`/api/admin/users/${currentCardUserId}`)
        .then(response => response.json())
        .then(userData => {
            if (!userData.success) {
                throw new Error(userData.message);
            }
            
            const userVuid = userData.data.vuid;
            if (!userVuid) {
                throw new Error('该用户没有VUID，无法进行卡片绑定');
            }
            
            // 调用获取卡片信息API
            return fetch('/api/admin/users/get-card-info', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    pan: pan,
                    user_vuid: userVuid
                })
            });
        })
    .then(response => response.json())
    .then(data => {
        getCardInfoBtn.disabled = false;
        getCardInfoBtn.innerHTML = '<i class="fas fa-search"></i> 获取卡片信息';
        
        if (data.success) {
            currentCardData = data.data;
            displayCardInfo(data.data);
            showStep2();
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        getCardInfoBtn.disabled = false;
        getCardInfoBtn.innerHTML = '<i class="fas fa-search"></i> 获取卡片信息';
        showAlert(error.message || '获取卡片信息失败', 'danger');
    });
}

// 显示卡片信息
function displayCardInfo(cardData) {
    const cardInfoDisplay = document.getElementById('cardInfoDisplay');
    
    const fundingSourceText = getFundingSourceText(cardData.accountFundingSource);
    
    const boundToUserAlert = cardData.isAlreadyBoundToUser ? 
        `<div class="alert alert-info mb-3">
            <i class="fas fa-info-circle"></i> 该卡片已绑定到该用户，操作将更新卡片信息
         </div>` : '';
    
    cardInfoDisplay.innerHTML = `
        ${boundToUserAlert}
        <div class="card bg-light">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary">卡片信息</h6>
                        <table class="table table-sm">
                            <tr><th>卡号后四位:</th><td>****${cardData.panLastFour}</td></tr>
                            <tr><th>BIN:</th><td>${cardData.bin}</td></tr>
                            <tr><th>VUID:</th><td>
                                ${cardData.vuid ? 
                                    `<code class="text-success">${cardData.vuid}</code>` : 
                                    '<span class="text-muted">无</span>'
                                }
                            </td></tr>
                            <tr><th>卡类型:</th><td><span class="badge bg-info">${fundingSourceText}</span></td></tr>
                            <tr><th>是否芯片卡:</th><td>${cardData.isChip ? '是' : '否'}</td></tr>
                            <tr><th>双标卡:</th><td>${cardData.isDualBrand ? '是' : '否'}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-success">发卡机构</h6>
                        <table class="table table-sm">
                            <tr><th>机构名称:</th><td>${cardData.issuerNameNative}</td></tr>
                            <tr><th>机构代码:</th><td>${cardData.issuerCode}</td></tr>
                            <tr><th>产品名称:</th><td>${cardData.productNameNative}</td></tr>
                            <tr><th>产品等级:</th><td><span class="badge bg-secondary">${cardData.productName}</span></td></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    `;
}

// 显示步骤2
function showStep2() {
    document.getElementById('step1').style.display = 'none';
    document.getElementById('step2').style.display = 'block';
    
    // 根据卡片状态更新按钮文字
    const addCardBtn = document.getElementById('addCardBtn');
    if (currentCardData && currentCardData.isAlreadyBoundToUser) {
        addCardBtn.innerHTML = '<i class="fas fa-edit"></i> 更新卡片信息';
    } else {
        addCardBtn.innerHTML = '<i class="fas fa-plus"></i> 添加到用户';
    }
}

// 添加卡片到用户
function addCardToUser() {
    if (!currentCardData) {
        showAlert('请先获取卡片信息', 'warning');
        return;
    }
    
    const issueDate = document.getElementById('issueDate').value;
    const activationDate = document.getElementById('activationDate').value;
    const pan = document.getElementById('cardPan').value;
    const addCardBtn = document.getElementById('addCardBtn');
    
    // 设置按钮为加载状态
    addCardBtn.disabled = true;
    addCardBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在添加...';
    
    fetch(`/api/admin/users/${currentCardUserId}/add-card`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            pan: pan,
            card_data: currentCardData,
            issue_date: issueDate || null,
            activation_date: activationDate || null
        })
    })
    .then(response => response.json())
    .then(data => {
        addCardBtn.disabled = false;
        addCardBtn.innerHTML = '<i class="fas fa-plus"></i> 添加到用户';
        
        if (data.success) {
            showAlert('卡片添加成功！', 'success');
            manualBindingModal.hide();
            resetManualBindingForm();
            // 刷新卡片列表
            loadUserCards();
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        addCardBtn.disabled = false;
        addCardBtn.innerHTML = '<i class="fas fa-plus"></i> 添加到用户';
        showAlert('添加卡片失败', 'danger');
    });
}

// 详情页面的手机号预览更新函数
function updateMobilePreviewDetail() {
    const countryCode = document.getElementById('mobileCountryCodeDetail')?.value || '86';
    const mobile = document.getElementById('mobileNumberDetail')?.value || '';
    const preview = document.getElementById('fullMobilePreviewDetail');
    
    if (preview) {
        if (mobile) {
            preview.textContent = `+${countryCode} ${mobile}`;
        } else {
            preview.textContent = `+${countryCode} 请输入手机号`;
        }
    }
}

// 从详情页保存用户手机号
function saveUserMobileFromDetail(userId) {
    const countryCode = document.getElementById('mobileCountryCodeDetail').value;
    const mobile = document.getElementById('mobileNumberDetail').value;
    
    if (!mobile) {
        showAlert('请输入手机号', 'warning');
        return;
    }
    
    // 验证手机号格式（简单验证）
    if (countryCode === '86' && !/^1[3-9]\d{9}$/.test(mobile)) {
        showAlert('请输入正确的中国大陆手机号格式', 'warning');
        return;
    }
    
    const formData = {
        mobile: mobile,
        country_code: countryCode
    };
    
    const saveBtn = event.target;
    const originalText = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>加密中...';
    saveBtn.disabled = true;
    
    fetch(`/api/admin/users/${userId}/set-mobile`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            // 刷新用户详情
            showUserDetail(userId);
            // 刷新用户列表
            loadUsers(currentPage);
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error setting mobile:', error);
        showAlert('设置手机号失败', 'danger');
    })
    .finally(() => {
        saveBtn.innerHTML = originalText;
        saveBtn.disabled = false;
    });
}

// 发送短信OTP给用户
function sendSmsOtpToUser(userId) {
    const sendBtn = document.getElementById('sendOtpBtn');
    const resultArea = document.getElementById('otpResultArea');
    const otpCodeSpan = document.getElementById('otpCode');
    const otpTimeSpan = document.getElementById('otpSentTime');

    if (!sendBtn) return;

    const originalText = sendBtn.innerHTML;
    sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>发送中...';
    sendBtn.disabled = true;

    fetch(`/api/admin/users/${userId}/send-sms-otp`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 显示OTP结果区域
            if (resultArea) {
                resultArea.style.display = 'block';
            }
            if (otpCodeSpan) {
                otpCodeSpan.textContent = data.data.otp;
            }
            if (otpTimeSpan) {
                otpTimeSpan.textContent = data.data.sent_at;
            }
            showAlert('短信OTP已发送至 ' + data.data.mobile_display, 'success');
        } else {
            showAlert(data.message || '发送失败', 'danger');
        }
    })
    .catch(error => {
        console.error('Error sending SMS OTP:', error);
        showAlert('发送短信OTP失败', 'danger');
    })
    .finally(() => {
        sendBtn.innerHTML = originalText;
        sendBtn.disabled = false;
    });
}

// 在详情页加载用户卡片管理
function loadUserCardsInDetail(userId) {
    const cardsContent = document.getElementById('cardsManagementContent');
    if (!cardsContent) return;
    
    // 显示加载状态
    cardsContent.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';
    
    fetch(`/api/admin/users/${userId}/cards?per_page=20`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderCardsManagement(data.data, data.user, data.pagination, userId);
            } else {
                cardsContent.innerHTML = '<div class="alert alert-danger">加载卡片失败: ' + data.message + '</div>';
            }
        })
        .catch(error => {
            console.error('Error loading user cards:', error);
            cardsContent.innerHTML = '<div class="alert alert-danger">加载卡片失败</div>';
        });
}

// 渲染卡片管理界面
function renderCardsManagement(cards, user, pagination, userId) {
    const cardsContent = document.getElementById('cardsManagementContent');
    
    cardsContent.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h6 class="mb-0">卡片管理</h6>
                <small class="text-muted">用户: ${user.name || user.uid} - 共有 ${pagination.total} 张卡片</small>
            </div>
            <button class="btn btn-sm btn-primary" onclick="showAddCardToUser(${userId})">
                <i class="fas fa-plus"></i> 添加卡片
            </button>
        </div>
        
        <div class="mb-3">
            <select class="form-select form-select-sm" id="cardStatusFilterDetail" onchange="filterCardsInDetail(${userId})">
                <option value="">全部状态</option>
                <option value="0">待激活</option>
                <option value="1">已激活</option>
                <option value="2">已冻结</option>
                <option value="3">已关闭</option>
                <option value="4">已过期</option>
            </select>
        </div>
        
        <div class="table-responsive">
            <table class="table table-sm table-hover">
                <thead class="table-light">
                    <tr>
                        <th>卡片ID</th>
                        <th>卡号</th>
                        <th>发卡机构</th>
                        <th>产品级别</th>
                        <th>状态</th>
                        <th>日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    ${cards.length === 0 ? 
                        '<tr><td colspan="7" class="text-center text-muted">该用户暂无卡片</td></tr>' :
                        cards.map(card => {
                            const statusBadge = getCardStatusBadge(card.status);
                            const fundingSourceText = getFundingSourceText(card.funding_source);
                            const issuerInfo = card.issuer_name ? 
                                '<div class="fw-bold">' + card.issuer_name + '</div><small class="text-muted">' + (card.issuer_code || '') + '</small>' : 
                                '<span class="text-muted">未知机构</span>';
                            
                            return '<tr>' +
                                '<td>' +
                                    '<code>' + card.vcard_id + '</code>' +
                                    (card.name ? '<br><small class="text-muted">' + card.name + '</small>' : '') +
                                '</td>' +
                                '<td>' +
                                    '<div class="fw-bold">****' + card.last_4 + '</div>' +
                                    '<small class="text-muted">' + fundingSourceText + ' • ' + card.bin + '</small>' +
                                '</td>' +
                                '<td>' + issuerInfo + '</td>' +
                                '<td>' +
                                    '<span class="badge bg-secondary">' + card.product_level + '</span>' +
                                    '<br><small class="text-muted">' + (card.product_name || '') + '</small>' +
                                '</td>' +
                                '<td>' + statusBadge + '</td>' +
                                '<td>' +
                                    (card.issue_date ? '<small>发卡：' + card.issue_date + '</small><br>' : '') +
                                    (card.activation_date ? '<small>激活：' + card.activation_date + '</small><br>' : '') +
                                    '<small class="text-muted">创建：' + new Date(card.created_at).toLocaleDateString() + '</small>' +
                                '</td>' +
                                '<td>' +
                                    '<button class="btn btn-sm btn-outline-info" onclick="showCardDetail(' + userId + ', ' + card.id + ')" title="查看详情">' +
                                        '<i class="fas fa-eye"></i>' +
                                    '</button>' +
                                    '<button class="btn btn-sm btn-outline-danger ms-1" onclick="confirmDeleteCard(' + userId + ', ' + card.id + ', \'****' + card.last_4 + '\')" title="删除卡片">' +
                                        '<i class="fas fa-trash"></i>' +
                                    '</button>' +
                                '</td>' +
                            '</tr>';
                        }).join('')
                    }
                </tbody>
            </table>
        </div>
    `;
}

// 筛选详情页的卡片
function filterCardsInDetail(userId) {
    loadUserCardsInDetail(userId);
}

// 加载用户活动报名列表
function loadUserEnrollments(userId) {
    const content = document.getElementById('enrollmentsManagementContent');
    if (!content) return;

    content.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';

    fetch(`/api/admin/users/${userId}/enrollments`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderUserEnrollments(data.data, userId);
            } else {
                content.innerHTML = `<div class="alert alert-danger">${data.message || '加载失败'}</div>`;
            }
        })
        .catch(error => {
            console.error('Error loading user enrollments:', error);
            content.innerHTML = '<div class="alert alert-danger">加载活动报名列表失败</div>';
        });
}

// 渲染用户活动报名列表
function renderUserEnrollments(enrollments, userId) {
    const content = document.getElementById('enrollmentsManagementContent');

    content.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h6 class="mb-0">活动报名</h6>
                <small class="text-muted">共报名 ${enrollments.length} 个活动</small>
            </div>
            <button class="btn btn-sm btn-primary" onclick="showManualEnrollModal(${userId})">
                <i class="fas fa-plus"></i> 手动报名
            </button>
        </div>

        ${enrollments.length === 0 ?
            '<div class="alert alert-info">该用户暂未报名任何活动</div>' :
            enrollments.map(enrollment => `
                <div class="card mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <strong>${enrollment.campaign_name || enrollment.acampaign_id}</strong>
                            <span class="badge ${enrollment.campaign_status == 1 ? 'bg-success' : 'bg-secondary'} ms-2">
                                ${enrollment.campaign_status_text}
                            </span>
                        </div>
                        <small class="text-muted">报名时间: ${enrollment.enrolled_at}</small>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1"><strong>活动ID:</strong> <code>${enrollment.acampaign_id}</code></p>
                                ${enrollment.venrollment_group_id ?
                                    `<p class="mb-1"><strong>报名组ID:</strong> <code>${enrollment.venrollment_group_id}</code></p>` : ''}
                            </div>
                            <div class="col-md-6">
                                ${enrollment.extended_data ?
                                    `<p class="mb-1"><strong>扩展数据:</strong></p>
                                    <pre class="bg-light p-2 rounded small mb-0" style="max-height: 100px; overflow: auto;">${JSON.stringify(enrollment.extended_data, null, 2)}</pre>` : ''}
                            </div>
                        </div>

                        ${enrollment.cards && enrollment.cards.length > 0 ? `
                            <hr class="my-2">
                            <p class="mb-2"><strong>报名卡片:</strong></p>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>卡号</th>
                                            <th>银行</th>
                                            <th>卡类型</th>
                                            <th>等级</th>
                                            <th>报名时间</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        ${enrollment.cards.map(card => `
                                            <tr>
                                                <td><code>${card.bin}****${card.last_4}</code></td>
                                                <td>${card.issuer_name || '-'}</td>
                                                <td>${card.funding_source || '-'}</td>
                                                <td>${card.product_level || '-'}</td>
                                                <td>${card.enrolled_at || '-'}</td>
                                            </tr>
                                        `).join('')}
                                    </tbody>
                                </table>
                            </div>
                        ` : (enrollment.venrollment_group_id ? '<p class="text-muted mb-0"><small>暂无报名卡片</small></p>' : '')}
                    </div>
                </div>
            `).join('')
        }
    `;
}

// 显示手动报名弹窗
let currentEnrollUserId = null;
function showManualEnrollModal(userId) {
    currentEnrollUserId = userId;

    // 创建或获取弹窗
    let modal = document.getElementById('manualEnrollModal');
    if (!modal) {
        modal = document.createElement('div');
        modal.id = 'manualEnrollModal';
        modal.className = 'modal fade';
        modal.tabIndex = -1;
        modal.innerHTML = `
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">手动报名活动</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">选择活动 *</label>
                            <select class="form-select" id="enrollCampaignSelect" onchange="onCampaignSelectChange()">
                                <option value="">请选择活动...</option>
                            </select>
                            <div id="campaignEnrollStatus" class="form-text"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">选择卡片 *</label>
                            <select class="form-select" id="enrollCardSelect" disabled>
                                <option value="">请先选择活动...</option>
                            </select>
                            <div id="cardLoadingStatus" class="form-text"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">扩展数据 (JSON格式，可选)</label>
                            <textarea class="form-control" id="enrollExtendedData" rows="3" placeholder='例如: {"rewardContentCode": "JUNEYAO160POINTS"}'></textarea>
                            <div class="form-text">用于存储报名的额外信息，如选择的奖励内容等</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="submitManualEnroll()">
                            <i class="fas fa-check"></i> 确认报名
                        </button>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    // 重置表单
    document.getElementById('enrollCampaignSelect').innerHTML = '<option value="">加载中...</option>';
    document.getElementById('enrollCardSelect').innerHTML = '<option value="">请先选择活动...</option>';
    document.getElementById('enrollCardSelect').disabled = true;
    document.getElementById('enrollExtendedData').value = '';
    document.getElementById('campaignEnrollStatus').textContent = '';
    document.getElementById('cardLoadingStatus').textContent = '';

    // 加载可报名活动列表
    loadEnrollableCampaigns(userId);

    // 显示弹窗
    new bootstrap.Modal(modal).show();
}

// 加载可报名活动列表
function loadEnrollableCampaigns(userId) {
    fetch(`/api/admin/users/${userId}/enrollable-campaigns`)
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById('enrollCampaignSelect');
            if (data.success && data.data.length > 0) {
                select.innerHTML = '<option value="">请选择活动...</option>' +
                    data.data.map(campaign => `
                        <option value="${campaign.acampaign_id}"
                                data-enrolled="${campaign.is_enrolled}"
                                data-name="${campaign.name}">
                            ${campaign.name} ${campaign.is_enrolled ? '(已报名)' : ''}
                            [${campaign.starts_at || ''} ~ ${campaign.ends_at || ''}]
                        </option>
                    `).join('');
            } else {
                select.innerHTML = '<option value="">暂无可报名的活动</option>';
            }
        })
        .catch(error => {
            console.error('Error loading enrollable campaigns:', error);
            document.getElementById('enrollCampaignSelect').innerHTML = '<option value="">加载失败</option>';
        });
}

// 活动选择变化事件
function onCampaignSelectChange() {
    const campaignSelect = document.getElementById('enrollCampaignSelect');
    const cardSelect = document.getElementById('enrollCardSelect');
    const statusDiv = document.getElementById('campaignEnrollStatus');
    const cardLoadingDiv = document.getElementById('cardLoadingStatus');

    const selectedOption = campaignSelect.options[campaignSelect.selectedIndex];
    const campaignId = campaignSelect.value;

    if (!campaignId) {
        cardSelect.innerHTML = '<option value="">请先选择活动...</option>';
        cardSelect.disabled = true;
        statusDiv.textContent = '';
        return;
    }

    // 显示是否已报名
    const isEnrolled = selectedOption.dataset.enrolled === 'true';
    statusDiv.innerHTML = isEnrolled ?
        '<span class="text-warning"><i class="fas fa-exclamation-circle"></i> 用户已报名此活动，可为其他卡片报名</span>' :
        '<span class="text-success"><i class="fas fa-check-circle"></i> 用户尚未报名此活动</span>';

    // 加载未报名的卡片
    cardSelect.innerHTML = '<option value="">加载中...</option>';
    cardSelect.disabled = true;
    cardLoadingDiv.textContent = '正在检查卡片报名状态...';

    loadUnenrolledCards(currentEnrollUserId, campaignId);
}

// 加载未报名的卡片列表
function loadUnenrolledCards(userId, campaignId) {
    fetch(`/api/admin/users/${userId}/unenrolled-cards/${campaignId}`)
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById('enrollCardSelect');
            const statusDiv = document.getElementById('cardLoadingStatus');

            if (data.success && data.data.length > 0) {
                select.innerHTML = '<option value="">请选择卡片...</option>' +
                    data.data.map(card => `
                        <option value="${card.vcard_id}">
                            ${card.bin}****${card.last_4} - ${card.issuer_name || '未知银行'}
                            ${card.product_level ? `(${card.product_level})` : ''}
                        </option>
                    `).join('');
                select.disabled = false;
                statusDiv.innerHTML = `<span class="text-success">找到 ${data.data.length} 张可报名的卡片</span>`;
            } else if (data.success) {
                select.innerHTML = '<option value="">该活动已无可报名的卡片</option>';
                select.disabled = true;
                statusDiv.innerHTML = '<span class="text-warning">用户所有卡片都已报名此活动</span>';
            } else {
                select.innerHTML = '<option value="">加载失败</option>';
                select.disabled = true;
                statusDiv.innerHTML = `<span class="text-danger">${data.message || '加载失败'}</span>`;
            }
        })
        .catch(error => {
            console.error('Error loading unenrolled cards:', error);
            document.getElementById('enrollCardSelect').innerHTML = '<option value="">加载失败</option>';
            document.getElementById('cardLoadingStatus').innerHTML = '<span class="text-danger">加载卡片列表失败</span>';
        });
}

// 提交手动报名
function submitManualEnroll() {
    const campaignId = document.getElementById('enrollCampaignSelect').value;
    const vcardId = document.getElementById('enrollCardSelect').value;
    const extendedData = document.getElementById('enrollExtendedData').value.trim();

    if (!campaignId) {
        showAlert('请选择活动', 'warning');
        return;
    }

    if (!vcardId) {
        showAlert('请选择卡片', 'warning');
        return;
    }

    // 验证 JSON 格式
    if (extendedData) {
        try {
            JSON.parse(extendedData);
        } catch (e) {
            showAlert('扩展数据格式不正确，请输入有效的JSON', 'danger');
            return;
        }
    }

    // 禁用提交按钮
    const submitBtn = document.querySelector('#manualEnrollModal .btn-primary');
    const originalBtnText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 报名中...';

    fetch(`/api/admin/users/${currentEnrollUserId}/enroll`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            campaign_id: campaignId,
            vcard_id: vcardId,
            extended_data: extendedData || null
        })
    })
    .then(response => response.json())
    .then(data => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalBtnText;

        if (data.success) {
            showAlert('报名成功', 'success');
            // 关闭弹窗
            bootstrap.Modal.getInstance(document.getElementById('manualEnrollModal')).hide();
            // 刷新报名列表
            loadUserEnrollments(currentEnrollUserId);
        } else {
            showAlert(data.message || '报名失败', 'danger');
        }
    })
    .catch(error => {
        console.error('Error submitting manual enroll:', error);
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalBtnText;
        showAlert('报名请求失败', 'danger');
    });
}

// 加载用户奖励列表
function loadUserRewards(userId) {
    const rewardsContent = document.getElementById('userRewardsContent');
    if (!rewardsContent) return;
    
    fetch(`/api/admin/users/${userId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data.rewards) {
                renderUserRewards(data.data.rewards);
            } else {
                rewardsContent.innerHTML = '<div class="alert alert-info">该用户暂未获得任何奖励</div>';
            }
        })
        .catch(error => {
            console.error('Error loading user rewards:', error);
            rewardsContent.innerHTML = '<div class="alert alert-danger">加载奖励列表失败</div>';
        });
}

// 渲染用户奖励列表
function renderUserRewards(rewards) {
    const rewardsContent = document.getElementById('userRewardsContent');
    
    if (!rewards || rewards.length === 0) {
        rewardsContent.innerHTML = '<div class="alert alert-info">该用户暂未获得任何奖励</div>';
        return;
    }
    
    rewardsContent.innerHTML = `
        <div class="table-responsive">
            <table class="table table-sm table-hover">
                <thead class="table-light">
                    <tr>
                        <th>奖励ID</th>
                        <th>奖励名称</th>
                        <th>奖励类型</th>
                        <th>奖励值</th>
                        <th>描述</th>
                        <th>状态</th>
                        <th>获得时间</th>
                        <th>领取时间</th>
                    </tr>
                </thead>
                <tbody>
                    ${rewards.map(reward => {
                        let statusBadge = '';
                        let statusText = '';
                        switch(reward.status) {
                            case 0:
                                statusBadge = 'bg-secondary';
                                statusText = '待处理';
                                break;
                            case 2:
                                statusBadge = 'bg-warning text-dark';
                                statusText = '可领取';
                                break;
                            case 4:
                                statusBadge = 'bg-success';
                                statusText = '已领取';
                                break;
                            default:
                                statusBadge = 'bg-light text-dark';
                                statusText = '未知';
                        }
                        
                        // 处理奖励类型显示
                        const typeMap = {
                            'cash': '现金',
                            'points': '积分',
                            'voucher': '优惠券',
                            'material': '实物'
                        };
                        const rewardType = reward.reward_content ? (typeMap[reward.reward_content.type] || reward.reward_content.type) : '-';
                        
                        return `
                            <tr>
                                <td><code>${reward.vreward_id || reward.id}</code></td>
                                <td>${reward.reward_content ? reward.reward_content.name : (reward.reward_content_code || '-')}</td>
                                <td><span class="badge bg-info">${rewardType}</span></td>
                                <td>${reward.reward_content ? (reward.reward_content.value + (reward.reward_content.unit || '')) : (reward.amount || '-')}</td>
                                <td class="text-truncate" style="max-width: 200px;" title="${reward.reward_content ? (reward.reward_content.description || '-') : '-'}">${reward.reward_content ? (reward.reward_content.description || '-') : '-'}</td>
                                <td><span class="badge ${statusBadge}">${statusText}</span></td>
                                <td>${reward.created_at ? new Date(reward.created_at).toLocaleDateString() : '-'}</td>
                                <td>${reward.claimed_at ? new Date(reward.claimed_at).toLocaleDateString() : '-'}</td>
                            </tr>
                        `;
                    }).join('')}
                </tbody>
            </table>
        </div>
    `;
}

// ===== 会员管理相关函数 =====

let currentMembershipUserId = null;
let availablePartners = [];

// 在详情页加载用户会员管理
function loadUserMembershipsInDetail(userId) {
    currentMembershipUserId = userId;
    const membershipsContent = document.getElementById('membershipsManagementContent');
    if (!membershipsContent) return;

    // 显示加载状态
    membershipsContent.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';

    fetch(`/api/admin/users/${userId}/memberships`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderMembershipsManagement(data.data, data.user, userId);
            } else {
                membershipsContent.innerHTML = '<div class="alert alert-danger">加载会员列表失败: ' + data.message + '</div>';
            }
        })
        .catch(error => {
            console.error('Error loading user memberships:', error);
            membershipsContent.innerHTML = '<div class="alert alert-danger">加载会员列表失败</div>';
        });
}

// 渲染会员管理界面
function renderMembershipsManagement(memberships, user, userId) {
    const membershipsContent = document.getElementById('membershipsManagementContent');

    membershipsContent.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h6 class="mb-0">会员管理</h6>
                <small class="text-muted">用户: ${user.name || user.uid} - 共有 ${memberships.length} 个会员身份</small>
            </div>
            <button class="btn btn-sm btn-primary" onclick="showAddMembershipModal(${userId})">
                <i class="fas fa-plus"></i> 添加会员
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-hover">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>合作伙伴</th>
                        <th>会员号</th>
                        <th>等级</th>
                        <th>名</th>
                        <th>姓</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    ${memberships.length === 0 ?
                        '<tr><td colspan="9" class="text-center text-muted">该用户暂无会员记录</td></tr>' :
                        memberships.map(membership => {
                            const statusBadge = membership.status === 'active' ?
                                '<span class="badge bg-success">有效</span>' :
                                '<span class="badge bg-secondary">无效</span>';
                            const partnerInfo = membership.partner ?
                                `<div class="d-flex align-items-center">
                                    ${membership.partner.small_logo_url ? '<img src="' + membership.partner.small_logo_url + '" class="me-2" style="width:24px;height:24px;object-fit:contain;">' : ''}
                                    <div>
                                        <div class="fw-bold">${membership.partner.name}</div>
                                        <small class="text-muted">${membership.partner_code}</small>
                                    </div>
                                </div>` :
                                `<code>${membership.partner_code}</code>`;

                            return `<tr>
                                <td>${membership.id}</td>
                                <td>${partnerInfo}</td>
                                <td><code>${membership.membership_number}</code></td>
                                <td>${membership.level_name ? '<span class="badge bg-info">' + membership.level_name + '</span>' : '-'}</td>
                                <td>${membership.first_name || '-'}</td>
                                <td>${membership.last_name || '-'}</td>
                                <td>${statusBadge}</td>
                                <td>${new Date(membership.created_at).toLocaleDateString()}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary" onclick="showEditMembershipModal(${userId}, ${membership.id})" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger ms-1" onclick="confirmDeleteMembership(${userId}, ${membership.id}, '${membership.membership_number}')" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>`;
                        }).join('')
                    }
                </tbody>
            </table>
        </div>
    `;
}

// 显示添加会员模态框
function showAddMembershipModal(userId) {
    currentMembershipUserId = userId;

    // 先获取合作伙伴列表
    fetch('/api/admin/users/partners-for-membership')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                availablePartners = data.data;
                renderMembershipModal(null, userId);
            } else {
                showAlert('获取合作伙伴列表失败: ' + data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error fetching partners:', error);
            showAlert('获取合作伙伴列表失败', 'danger');
        });
}

// 显示编辑会员模态框
function showEditMembershipModal(userId, membershipId) {
    currentMembershipUserId = userId;

    // 先获取会员详情和合作伙伴列表
    Promise.all([
        fetch(`/api/admin/users/${userId}/memberships/${membershipId}`).then(r => r.json()),
        fetch('/api/admin/users/partners-for-membership').then(r => r.json())
    ])
    .then(([membershipData, partnersData]) => {
        if (membershipData.success && partnersData.success) {
            availablePartners = partnersData.data;
            renderMembershipModal(membershipData.data, userId);
        } else {
            showAlert('获取数据失败', 'danger');
        }
    })
    .catch(error => {
        console.error('Error fetching data:', error);
        showAlert('获取数据失败', 'danger');
    });
}

// 渲染会员模态框
function renderMembershipModal(membership, userId) {
    const isEdit = membership !== null;
    const modalTitle = isEdit ? '编辑会员' : '添加会员';

    // 移除已存在的模态框
    const existingModal = document.getElementById('membershipModal');
    if (existingModal) {
        existingModal.remove();
    }

    const modalHtml = `
        <div class="modal fade" id="membershipModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">${modalTitle}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="membershipForm">
                            <input type="hidden" id="membershipId" value="${isEdit ? membership.id : ''}">
                            <input type="hidden" id="membershipUserId" value="${userId}">

                            <div class="mb-3">
                                <label for="membershipPartnerCode" class="form-label">合作伙伴 <span class="text-danger">*</span></label>
                                <select class="form-select" id="membershipPartnerCode" ${isEdit ? 'disabled' : 'required'}>
                                    <option value="">请选择合作伙伴</option>
                                    ${availablePartners.map(p =>
                                        `<option value="${p.code}" ${isEdit && membership.partner_code === p.code ? 'selected' : ''}>
                                            ${p.name} (${p.code})
                                        </option>`
                                    ).join('')}
                                </select>
                                ${isEdit ? '<small class="text-muted">编辑时不能更改合作伙伴</small>' : ''}
                            </div>

                            <div class="mb-3">
                                <label for="membershipNumber" class="form-label">会员号 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="membershipNumber"
                                       value="${isEdit ? membership.membership_number : ''}" required>
                            </div>

                            <div class="mb-3">
                                <label for="membershipLevelName" class="form-label">等级</label>
                                <input type="text" class="form-control" id="membershipLevelName"
                                       value="${isEdit && membership.level_name ? membership.level_name : ''}"
                                       placeholder="例如: 金卡, 白金卡">
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="membershipFirstName" class="form-label">名 (First Name)</label>
                                        <input type="text" class="form-control" id="membershipFirstName"
                                               value="${isEdit && membership.first_name ? membership.first_name : ''}"
                                               placeholder="名字">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="membershipLastName" class="form-label">姓 (Last Name)</label>
                                        <input type="text" class="form-control" id="membershipLastName"
                                               value="${isEdit && membership.last_name ? membership.last_name : ''}"
                                               placeholder="姓氏">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="membershipStatus" class="form-label">状态</label>
                                <select class="form-select" id="membershipStatus">
                                    <option value="active" ${!isEdit || membership.status === 'active' ? 'selected' : ''}>有效</option>
                                    <option value="inactive" ${isEdit && membership.status === 'inactive' ? 'selected' : ''}>无效</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveMembership()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);
    new bootstrap.Modal(document.getElementById('membershipModal')).show();
}

// 保存会员
function saveMembership() {
    const membershipId = document.getElementById('membershipId').value;
    const userId = document.getElementById('membershipUserId').value;
    const isEdit = membershipId !== '';

    const formData = {
        partner_code: document.getElementById('membershipPartnerCode').value,
        membership_number: document.getElementById('membershipNumber').value,
        level_name: document.getElementById('membershipLevelName').value || null,
        first_name: document.getElementById('membershipFirstName').value || null,
        last_name: document.getElementById('membershipLastName').value || null,
        status: document.getElementById('membershipStatus').value
    };

    // 验证必填字段
    if (!formData.membership_number) {
        showAlert('请输入会员号', 'warning');
        return;
    }
    if (!isEdit && !formData.partner_code) {
        showAlert('请选择合作伙伴', 'warning');
        return;
    }

    const url = isEdit ?
        `/api/admin/users/${userId}/memberships/${membershipId}` :
        `/api/admin/users/${userId}/memberships`;
    const method = isEdit ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            bootstrap.Modal.getInstance(document.getElementById('membershipModal')).hide();
            // 刷新会员列表
            loadUserMembershipsInDetail(userId);
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error saving membership:', error);
        showAlert('保存会员失败', 'danger');
    });
}

// 确认删除会员
function confirmDeleteMembership(userId, membershipId, membershipNumber) {
    if (confirm(`确定要删除会员号 "${membershipNumber}" 吗？\n\n此操作不可恢复！`)) {
        deleteMembership(userId, membershipId);
    }
}

// 删除会员
function deleteMembership(userId, membershipId) {
    fetch(`/api/admin/users/${userId}/memberships/${membershipId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            // 刷新会员列表
            loadUserMembershipsInDetail(userId);
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error deleting membership:', error);
        showAlert('删除会员失败', 'danger');
    });
}

</script>
@endpush