@extends('admin.layouts.admin')

@section('title', '卡片验证安全管理')

@section('content')
<div class="container-fluid" id="cardValidationSecurityApp">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">卡片验证安全仪表板</h5>
                </div>
                <div class="card-body">
                    <!-- 概览统计 -->
                    <div class="row mb-4" v-if="dashboardData">
                        <div class="col-md-3">
                            <div class="card text-white bg-primary">
                                <div class="card-body">
                                    <h4 class="card-title">@{{ dashboardData.overview.total_attempts || 0 }}</h4>
                                    <p class="card-text">总验证次数（全部）</p>
                                    <small class="text-white-50">24小时内: @{{ dashboardData.overview_24h?.total_attempts || 0 }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-danger">
                                <div class="card-body">
                                    <h4 class="card-title">@{{ dashboardData.overview.failed_attempts || 0 }}</h4>
                                    <p class="card-text">失败次数（全部）</p>
                                    <small class="text-white-50">24小时内: @{{ dashboardData.overview_24h?.failed_attempts || 0 }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-success">
                                <div class="card-body">
                                    <h4 class="card-title">@{{ (dashboardData.overview.total_attempts - dashboardData.overview.failed_attempts) || 0 }}</h4>
                                    <p class="card-text">成功次数（全部）</p>
                                    <small class="text-white-50">24小时内: @{{ ((dashboardData.overview_24h?.total_attempts || 0) - (dashboardData.overview_24h?.failed_attempts || 0)) }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-info">
                                <div class="card-body">
                                    <h4 class="card-title">@{{ dashboardData.overview.unique_ips || 0 }}</h4>
                                    <p class="card-text">活跃IP（全部）</p>
                                    <small class="text-white-50">24小时内: @{{ dashboardData.overview_24h?.unique_ips || 0 }}</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 锁定状态统计 -->
                    <div class="row mb-4" v-if="dashboardData">
                        <div class="col-md-4">
                            <div class="card text-white bg-warning" style="cursor: pointer;" @click="showLockedUsers" title="点击查看锁定用户详情">
                                <div class="card-body">
                                    <h4 class="card-title">@{{ dashboardData.lockout_stats.locked_users || 0 }}</h4>
                                    <p class="card-text"><i class="fas fa-user-lock"></i> 锁定用户 <i class="fas fa-eye ms-1"></i></p>
                                    <small class="text-white-50">≥5次失败 · 点击查看详情</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card text-white bg-secondary" style="cursor: pointer;" @click="showLockedCards" title="点击查看锁定卡片详情">
                                <div class="card-body">
                                    <h4 class="card-title">@{{ dashboardData.lockout_stats.locked_cards || 0 }}</h4>
                                    <p class="card-text"><i class="fas fa-credit-card"></i> 锁定卡片 <i class="fas fa-eye ms-1"></i></p>
                                    <small class="text-white-50">≥3次失败 · 点击查看详情</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card text-white bg-dark" style="cursor: pointer;" @click="showLockedIps" title="点击查看锁定IP详情">
                                <div class="card-body">
                                    <h4 class="card-title">@{{ dashboardData.lockout_stats.locked_ips || 0 }}</h4>
                                    <p class="card-text"><i class="fas fa-network-wired"></i> 锁定IP <i class="fas fa-eye ms-1"></i></p>
                                    <small class="text-white-50">≥10次失败 · 点击查看详情</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 功能按钮组 -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="btn-toolbar" role="toolbar">
                                <div class="btn-group mr-2" role="group">
                                    <button type="button" class="btn btn-outline-success" @click="refreshData">
                                        <i class="fas fa-sync-alt"></i> 刷新数据
                                    </button>
                                </div>
                                <div class="btn-group mr-2" role="group">
                                    <button type="button" class="btn btn-outline-warning" @click="showUnlockModal">
                                        <i class="fas fa-unlock"></i> 手动解锁
                                    </button>
                                </div>
                                <div class="btn-group mr-2" role="group">
                                    <button type="button" class="btn btn-outline-info" @click="showWhitelistModal">
                                        <i class="fas fa-list"></i> 白名单管理
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab 导航 -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#attempts-tab" role="tab">验证记录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#analytics-tab" role="tab">分析统计</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#whitelist-tab" role="tab">白名单</a>
                        </li>
                    </ul>

                    <!-- Tab 内容 -->
                    <div class="tab-content mt-3">
                        <!-- 验证记录 Tab -->
                        <div class="tab-pane fade show active" id="attempts-tab" role="tabpanel">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" v-model="filters.userUid" placeholder="用户UID">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" v-model="filters.mobile" placeholder="手机号(11位)">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" v-model="filters.ipAddress" placeholder="IP地址">
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control" v-model="filters.isSuccessful">
                                        <option value="">所有状态</option>
                                        <option value="1">成功</option>
                                        <option value="0">失败</option>
                                    </select>
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-primary" @click="loadAttempts">搜索</button>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12">
                                    <small class="text-muted">
                                        共 <strong>@{{ attempts.total || 0 }}</strong> 条记录
                                    </small>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>用户UID</th>
                                            <th>IP地址</th>
                                            <th>BIN</th>
                                            <th>后4位</th>
                                            <th>发卡行</th>
                                            <th>虚拟卡ID</th>
                                            <th>状态</th>
                                            <th>失败原因</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="attempt in attempts.data" :key="attempt.id">
                                            <td style="white-space: nowrap;">@{{ formatDateTime(attempt.attempted_at) }}</td>
                                            <td>@{{ attempt.user_uid || attempt.user_id || 'N/A' }}</td>
                                            <td>@{{ attempt.ip_address }}</td>
                                            <td style="font-family: monospace;">@{{ attempt.bin || '-' }}</td>
                                            <td style="font-family: monospace;">@{{ attempt.last_4 || '-' }}</td>
                                            <td>@{{ attempt.issuer_name || '-' }}</td>
                                            <td style="font-family: monospace;">@{{ attempt.vcard_id || '-' }}</td>
                                            <td>
                                                <span class="badge" :class="attempt.is_successful ? 'badge-success' : 'badge-danger'"
                                                      :style="attempt.is_successful ? 'background-color: #28a745; color: white;' : 'background-color: #dc3545; color: white;'">
                                                    @{{ attempt.is_successful ? '成功' : '失败' }}
                                                </span>
                                            </td>
                                            <td>@{{ attempt.failure_reason || '-' }}</td>
                                            <td>
                                                <!-- 优先显示用户级锁定解锁按钮 -->
                                                <button class="btn btn-sm btn-outline-warning"
                                                        @click="unlockUser(attempt.user_id)"
                                                        v-if="!attempt.is_successful && attempt.user_id && isUserLocked(attempt.user_id)"
                                                        :disabled="!attempt.user_id">
                                                    解锁用户
                                                </button>
                                                <!-- 如果用户未锁定但卡片锁定，显示卡片解锁按钮 -->
                                                <button class="btn btn-sm btn-outline-danger"
                                                        @click="unlockCard(attempt.card_number_hash)"
                                                        v-else-if="!attempt.is_successful && !isUserLocked(attempt.user_id) && isCardLocked(attempt.card_number_hash)">
                                                    解锁卡片
                                                </button>
                                                <!-- 都未锁定时显示未锁定状态 -->
                                                <span v-else-if="!attempt.is_successful && !isUserLocked(attempt.user_id) && !isCardLocked(attempt.card_number_hash)"
                                                      class="text-muted small">未锁定</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <nav v-if="attempts.last_page > 1">
                                <ul class="pagination">
                                    <li class="page-item" :class="{ disabled: attempts.current_page === 1 }">
                                        <a class="page-link" @click="loadAttempts(attempts.current_page - 1)">Previous</a>
                                    </li>
                                    <li class="page-item" v-for="page in visiblePages" :key="page"
                                        :class="{ active: page === attempts.current_page }">
                                        <a class="page-link" @click="loadAttempts(page)">@{{ page }}</a>
                                    </li>
                                    <li class="page-item" :class="{ disabled: attempts.current_page === attempts.last_page }">
                                        <a class="page-link" @click="loadAttempts(attempts.current_page + 1)">Next</a>
                                    </li>
                                </ul>
                                <div class="text-center text-muted small">
                                    第 @{{ attempts.current_page }} / @{{ attempts.last_page }} 页，共 @{{ attempts.total }} 条记录
                                </div>
                            </nav>
                        </div>

                        <!-- 分析统计 Tab -->
                        <div class="tab-pane fade" id="analytics-tab" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">风险等级分布</div>
                                        <div class="card-body">
                                            <div class="progress mb-2">
                                                <div class="progress-bar bg-success" :style="{ width: dashboardData?.risk_distribution?.low + '%' }">
                                                    低风险 @{{ dashboardData?.risk_distribution?.low.toFixed(1) }}%
                                                </div>
                                            </div>
                                            <div class="progress mb-2">
                                                <div class="progress-bar bg-warning" :style="{ width: dashboardData?.risk_distribution?.medium + '%' }">
                                                    中风险 @{{ dashboardData?.risk_distribution?.medium.toFixed(1) }}%
                                                </div>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-danger" :style="{ width: dashboardData?.risk_distribution?.high + '%' }">
                                                    高风险 @{{ dashboardData?.risk_distribution?.high.toFixed(1) }}%
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">最近高风险尝试</div>
                                        <div class="card-body">
                                            <div class="list-group">
                                                <div class="list-group-item" v-for="attempt in dashboardData?.recent_high_risk?.slice(0, 5)" :key="attempt.id">
                                                    <small class="text-muted">@{{ formatDateTime(attempt.attempted_at) }}</small><br>
                                                    <strong>@{{ attempt.user_uid || attempt.user_id || 'N/A' }}</strong> from @{{ attempt.ip_address }}<br>
                                                    <span class="text-danger">@{{ attempt.failure_reason }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 白名单 Tab -->
                        <div class="tab-pane fade" id="whitelist-tab" role="tabpanel">
                            <button class="btn btn-success mb-3" @click="showAddWhitelistModal">
                                <i class="fas fa-plus"></i> 添加白名单
                            </button>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>类型</th>
                                            <th>值</th>
                                            <th>原因</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in whitelist.data" :key="item.id">
                                            <td>@{{ item.type }}</td>
                                            <td>@{{ item.value }}</td>
                                            <td>@{{ item.reason || '-' }}</td>
                                            <td>@{{ formatDateTime(item.created_at) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-danger" @click="removeFromWhitelist(item.id)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 解锁模态框 -->
    <div class="modal fade" id="unlockModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">手动解锁</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="performUnlock">
                        <div class="form-group">
                            <label>解锁类型</label>
                            <select class="form-control" v-model="unlockForm.type" required>
                                <option value="">选择类型</option>
                                <option value="user">用户</option>
                                <option value="card">卡号</option>
                                <option value="ip">IP地址</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>标识符</label>
                            <input type="text" class="form-control" v-model="unlockForm.identifier"
                                   :placeholder="getIdentifierPlaceholder()" required>
                        </div>
                        <div class="form-group">
                            <label>解锁原因</label>
                            <textarea class="form-control" v-model="unlockForm.reason" rows="3"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-warning" :disabled="unlocking">
                                <span v-if="unlocking"><i class="fas fa-spinner fa-spin"></i> 解锁中...</span>
                                <span v-else>确认解锁</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 白名单模态框 -->
    <div class="modal fade" id="whitelistModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加白名单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="addToWhitelist">
                        <div class="form-group">
                            <label>类型</label>
                            <select class="form-control" v-model="whitelistForm.type" required>
                                <option value="">选择类型</option>
                                <option value="user_id">用户UID</option>
                                <option value="ip_address">IP地址</option>
                                <option value="email">邮箱</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>值</label>
                            <input type="text" class="form-control" v-model="whitelistForm.value" required>
                        </div>
                        <div class="form-group">
                            <label>原因</label>
                            <textarea class="form-control" v-model="whitelistForm.reason" rows="3"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-success" :disabled="addingToWhitelist">
                                <span v-if="addingToWhitelist"><i class="fas fa-spinner fa-spin"></i> 添加中...</span>
                                <span v-else>确认添加</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 锁定用户模态框 -->
    <div class="modal fade" id="lockedUsersModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-user-lock"></i> 锁定用户详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-if="loadingLockedDetails" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                    <div v-else>
                        <div v-if="lockedDetails.users && lockedDetails.users.length > 0" class="mb-4">
                            <div class="table-responsive">
                                <table class="table table-sm table-striped">
                                    <thead>
                                        <tr>
                                            <th>用户ID</th>
                                            <th>用户UID</th>
                                            <th>用户名</th>
                                            <th>失败次数</th>
                                            <th>首次尝试</th>
                                            <th>最后尝试</th>
                                            <th>锁定至</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="user in lockedDetails.users" :key="user.user_id">
                                            <td>@{{ user.user_id }}</td>
                                            <td>@{{ user.user_uid }}</td>
                                            <td>@{{ user.user_name }}</td>
                                            <td><span class="badge bg-danger">@{{ user.failure_count }}</span></td>
                                            <td>@{{ formatDateTime(user.first_attempt) }}</td>
                                            <td>@{{ formatDateTime(user.last_attempt) }}</td>
                                            <td>@{{ formatDateTime(user.locked_until) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-warning" @click="quickUnlock('user', user.user_id)">
                                                    <i class="fas fa-unlock"></i> 解锁
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div v-else class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3"></i>
                            <p>当前没有被锁定的用户</p>
                            <small class="text-muted">用户在60分钟内失败5次或以上才会被锁定</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="refreshLockedDetails">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 锁定卡片模态框 -->
    <div class="modal fade" id="lockedCardsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-credit-card"></i> 锁定卡片详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-if="loadingLockedDetails" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                    <div v-else>
                        <div v-if="lockedDetails.cards && lockedDetails.cards.length > 0" class="mb-4">
                            <div class="table-responsive">
                                <table class="table table-sm table-striped">
                                    <thead>
                                        <tr>
                                            <th>卡片哈希</th>
                                            <th>失败次数</th>
                                            <th>涉及用户</th>
                                            <th>首次尝试</th>
                                            <th>最后尝试</th>
                                            <th>锁定至</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="card in lockedDetails.cards" :key="card.card_number_hash">
                                            <td><code>@{{ card.card_hash }}</code></td>
                                            <td><span class="badge bg-info">@{{ card.failure_count }}</span></td>
                                            <td>
                                                <span v-if="card.involved_user_uids && card.involved_user_uids.length > 0">
                                                    <span v-for="(uid, index) in card.involved_user_uids" :key="uid">
                                                        <code>@{{ uid }}</code><span v-if="index < card.involved_user_uids.length - 1">, </span>
                                                    </span>
                                                </span>
                                                <span v-else class="text-muted">无关联用户</span>
                                            </td>
                                            <td>@{{ formatDateTime(card.first_attempt) }}</td>
                                            <td>@{{ formatDateTime(card.last_attempt) }}</td>
                                            <td>@{{ formatDateTime(card.locked_until) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-warning" @click="quickUnlock('card', card.card_number_hash)">
                                                    <i class="fas fa-unlock"></i> 解锁
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- 分页控件 -->
                            <nav v-if="lockedDetails.pagination && lockedDetails.pagination.last_page > 1" class="mt-3">
                                <ul class="pagination justify-content-center">
                                    <li class="page-item" :class="{ disabled: lockedDetails.pagination.current_page === 1 }">
                                        <a class="page-link" href="#" @click.prevent="loadLockedCards(lockedDetails.pagination.current_page - 1, 20)">
                                            <i class="fas fa-chevron-left"></i> 上一页
                                        </a>
                                    </li>
                                    <li class="page-item"
                                        v-for="page in getVisiblePages(lockedDetails.pagination)"
                                        :key="page"
                                        :class="{ active: page === lockedDetails.pagination.current_page }">
                                        <a class="page-link" href="#" @click.prevent="loadLockedCards(page, 20)">@{{ page }}</a>
                                    </li>
                                    <li class="page-item" :class="{ disabled: lockedDetails.pagination.current_page === lockedDetails.pagination.last_page }">
                                        <a class="page-link" href="#" @click.prevent="loadLockedCards(lockedDetails.pagination.current_page + 1, 20)">
                                            下一页 <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                                </ul>
                                <div class="text-center text-muted small">
                                    显示第 @{{ (lockedDetails.pagination.current_page - 1) * lockedDetails.pagination.per_page + 1 }}
                                    到 @{{ Math.min(lockedDetails.pagination.current_page * lockedDetails.pagination.per_page, lockedDetails.pagination.total) }}
                                    条，共 @{{ lockedDetails.pagination.total }} 条记录
                                </div>
                            </nav>
                        </div>
                        <div v-else class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3"></i>
                            <p>当前没有被锁定的卡片</p>
                            <small class="text-muted">卡片在60分钟内失败3次或以上才会被锁定</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="refreshLockedCards(1, 20)">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 锁定IP模态框 -->
    <div class="modal fade" id="lockedIpsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-network-wired"></i> 锁定IP详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-if="loadingLockedDetails" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                    <div v-else>
                        <div v-if="lockedDetails.ips && lockedDetails.ips.length > 0" class="mb-4">
                            <div class="table-responsive">
                                <table class="table table-sm table-striped">
                                    <thead>
                                        <tr>
                                            <th>IP地址</th>
                                            <th>失败次数</th>
                                            <th>涉及用户</th>
                                            <th>首次尝试</th>
                                            <th>最后尝试</th>
                                            <th>锁定至</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="ip in lockedDetails.ips" :key="ip.ip_address">
                                            <td>@{{ ip.ip_address }}</td>
                                            <td><span class="badge bg-warning">@{{ ip.failure_count }}</span></td>
                                            <td>
                                                <span v-if="ip.involved_user_uids && ip.involved_user_uids.length > 0">
                                                    <span v-for="(uid, index) in ip.involved_user_uids" :key="uid">
                                                        <code>@{{ uid }}</code><span v-if="index < ip.involved_user_uids.length - 1">, </span>
                                                    </span>
                                                </span>
                                                <span v-else class="text-muted">无关联用户</span>
                                            </td>
                                            <td>@{{ formatDateTime(ip.first_attempt) }}</td>
                                            <td>@{{ formatDateTime(ip.last_attempt) }}</td>
                                            <td>@{{ formatDateTime(ip.locked_until) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-warning" @click="quickUnlock('ip', ip.ip_address)">
                                                    <i class="fas fa-unlock"></i> 解锁
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div v-else class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3"></i>
                            <p>当前没有被锁定的IP</p>
                            <small class="text-muted">IP在60分钟内失败10次或以上才会被锁定</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="refreshLockedDetails">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
new Vue({
    el: '#cardValidationSecurityApp',
    data: {
        dashboardData: null,
        attempts: { data: [], current_page: 1, last_page: 1 },
        whitelist: { data: [] },
        lockedUsers: new Set(), // 存储被锁定的用户ID
        lockedCards: new Set(), // 存储被锁定的卡片hash
        lockedDetails: { users: [], ips: [], cards: [] }, // 锁定详情数据
        filters: {
            userUid: '',
            mobile: '',
            ipAddress: '',
            isSuccessful: ''
        },
        unlockForm: {
            type: '',
            identifier: '',
            reason: ''
        },
        whitelistForm: {
            type: '',
            value: '',
            reason: ''
        },
        unlocking: false,
        addingToWhitelist: false,
        loading: false,
        loadingLockedDetails: false
    },
    computed: {
        visiblePages() {
            const current = this.attempts.current_page;
            const total = this.attempts.last_page;
            const pages = [];
            const start = Math.max(1, current - 2);
            const end = Math.min(total, current + 2);

            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            return pages;
        }
    },
    methods: {
        async loadDashboard() {
            try {
                const response = await axios.get('/admin/card-validation-security/api/dashboard');
                this.dashboardData = response.data.data;
            } catch (error) {
                console.error('加载仪表板数据失败:', error);
                alert('加载仪表板数据失败');
            }
        },
        async loadAttempts(page = 1) {
            try {
                this.loading = true;
                const response = await axios.get('/admin/card-validation-security/api/attempts', {
                    params: {
                        page,
                        per_page: 20,
                        user_uid: this.filters.userUid,
                        mobile: this.filters.mobile,
                        ip_address: this.filters.ipAddress,
                        is_successful: this.filters.isSuccessful
                    }
                });
                this.attempts = response.data.data;
            } catch (error) {
                console.error('加载验证记录失败:', error);
                alert('加载验证记录失败');
            } finally {
                this.loading = false;
            }
        },
        async loadWhitelist() {
            try {
                const response = await axios.get('/admin/card-validation-security/api/whitelist');
                this.whitelist = response.data.data;
            } catch (error) {
                console.error('加载白名单失败:', error);
            }
        },
        async performUnlock() {
            try {
                this.unlocking = true;
                await axios.post('/admin/card-validation-security/api/unlock', this.unlockForm);
                alert('解锁成功');
                const unlockModal = bootstrap.Modal.getInstance(document.getElementById('unlockModal'));
                unlockModal.hide();
                this.unlockForm = { type: '', identifier: '', reason: '' };
                this.refreshData();
            } catch (error) {
                console.error('解锁失败:', error);
                alert('解锁失败: ' + (error.response?.data?.message || error.message));
            } finally {
                this.unlocking = false;
            }
        },
        async addToWhitelist() {
            try {
                this.addingToWhitelist = true;
                await axios.post('/admin/card-validation-security/api/whitelist', this.whitelistForm);
                alert('添加白名单成功');
                const whitelistModal = bootstrap.Modal.getInstance(document.getElementById('whitelistModal'));
                whitelistModal.hide();
                this.whitelistForm = { type: '', value: '', reason: '' };
                this.loadWhitelist();
            } catch (error) {
                console.error('添加白名单失败:', error);
                alert('添加白名单失败: ' + (error.response?.data?.message || error.message));
            } finally {
                this.addingToWhitelist = false;
            }
        },
        async removeFromWhitelist(id) {
            if (!confirm('确认删除此白名单项？')) return;

            try {
                await axios.delete(`/admin/card-validation-security/api/whitelist/${id}`);
                alert('删除成功');
                this.loadWhitelist();
            } catch (error) {
                console.error('删除失败:', error);
                alert('删除失败');
            }
        },
        async unlockUser(userId) {
            if (!confirm('确认解锁此用户？')) return;

            try {
                await axios.post('/admin/card-validation-security/api/unlock', {
                    type: 'user',
                    identifier: userId,
                    reason: '管理员手动解锁'
                });
                alert('用户解锁成功');
                this.refreshData();
            } catch (error) {
                console.error('解锁用户失败:', error);
                alert('解锁用户失败');
            }
        },
        async unlockCard(cardHash) {
            if (!confirm('确认解锁此卡片？')) return;

            try {
                await axios.post('/admin/card-validation-security/api/unlock', {
                    type: 'card',
                    identifier: cardHash,
                    reason: '管理员手动解锁'
                });
                alert('卡片解锁成功');
                this.refreshData();
            } catch (error) {
                console.error('解锁卡片失败:', error);
                alert('解锁卡片失败');
            }
        },
        showUnlockModal() {
            const unlockModal = new bootstrap.Modal(document.getElementById('unlockModal'));
            unlockModal.show();
        },
        showWhitelistModal() {
            const whitelistModal = new bootstrap.Modal(document.getElementById('whitelistModal'));
            whitelistModal.show();
        },
        showAddWhitelistModal() {
            const whitelistModal = new bootstrap.Modal(document.getElementById('whitelistModal'));
            whitelistModal.show();
        },
        async refreshData() {
            // 先更新锁定状态，然后再加载其他数据
            await this.updateLockedUsers();
            await Promise.all([
                this.loadDashboard(),
                this.loadAttempts(),
                this.loadWhitelist()
            ]);
        },
        formatDateTime(datetime) {
            return new Date(datetime).toLocaleString('zh-CN');
        },
        getIdentifierPlaceholder() {
            const placeholders = {
                user: '用户UID',
                card: '卡号 (完整PAN)',
                ip: 'IP地址'
            };
            return placeholders[this.unlockForm.type] || '请选择类型';
        },
        async updateLockedUsers() {
            // 通过API获取真实的锁定状态
            try {
                this.lockedUsers.clear();
                this.lockedCards.clear();

                // 从后端API获取锁定状态（基于完整数据和服务器时间）
                const response = await axios.get('/admin/card-validation-security/api/locked-status');
                const data = response.data;

                if (data.success) {
                    // 添加被锁定的用户ID
                    if (data.data.locked_users) {
                        data.data.locked_users.forEach(userId => {
                            this.lockedUsers.add(parseInt(userId));
                        });
                    }
                    // 添加被锁定的卡片hash
                    if (data.data.locked_cards) {
                        data.data.locked_cards.forEach(cardHash => {
                            this.lockedCards.add(cardHash);
                        });
                    }
                }
            } catch (error) {
                console.error('获取锁定状态失败:', error);

                // 降级到客户端计算（但仅作为备用，基于当前页面数据）
                this.updateLockedUsersClientSide();
            }
        },

        updateLockedUsersClientSide() {
            // 客户端锁定状态检测（仅基于当前页面数据）
            this.lockedUsers.clear();

            if (this.attempts.data) {
                const userFailureCounts = {};
                const ipFailureCounts = {};
                const now = new Date();
                const timeWindow = 60 * 60 * 1000; // 1小时的毫秒数

                this.attempts.data.forEach(attempt => {
                    if (!attempt.is_successful) {
                        const attemptTime = new Date(attempt.attempted_at);
                        if (now - attemptTime <= timeWindow) {
                            // 统计用户失败次数
                            if (attempt.user_id) {
                                userFailureCounts[attempt.user_id] = (userFailureCounts[attempt.user_id] || 0) + 1;
                            }
                            // 统计IP失败次数
                            if (attempt.ip_address) {
                                ipFailureCounts[attempt.ip_address] = (ipFailureCounts[attempt.ip_address] || 0) + 1;
                            }
                        }
                    }
                });

                // 判断用户锁定（5次失败）
                Object.keys(userFailureCounts).forEach(userId => {
                    if (userFailureCounts[userId] >= 5) {
                        this.lockedUsers.add(parseInt(userId));
                    }
                });
            }
        },
        isUserLocked(userId) {
            return userId && this.lockedUsers.has(parseInt(userId));
        },
        isCardLocked(cardHash) {
            return cardHash && this.lockedCards.has(cardHash);
        },

        // 锁定详情相关方法
        async showLockedUsers() {
            try {
                const modal = new bootstrap.Modal(document.getElementById('lockedUsersModal'));
                modal.show();
                await this.loadLockedDetails();
            } catch (error) {
                console.error('显示锁定用户失败:', error);
                alert('无法加载锁定用户详情');
            }
        },

        async showLockedCards() {
            try {
                const modal = new bootstrap.Modal(document.getElementById('lockedCardsModal'));
                modal.show();
                // 加载卡片类型的分页数据
                await this.loadLockedCards(1, 20); // 默认显示前20条
            } catch (error) {
                console.error('显示锁定卡片失败:', error);
                alert('无法加载锁定卡片详情');
            }
        },

        async showLockedIps() {
            try {
                const modal = new bootstrap.Modal(document.getElementById('lockedIpsModal'));
                modal.show();
                await this.loadLockedDetails();
            } catch (error) {
                console.error('显示锁定IP失败:', error);
                alert('无法加载锁定IP详情');
            }
        },

        // 兼容旧的方法名（如果其他地方还在使用）
        async showLockedDetails() {
            await this.showLockedCards(); // 默认显示锁定卡片
        },

        async loadLockedDetails() {
            try {
                this.loadingLockedDetails = true;
                const response = await axios.get('/admin/card-validation-security/api/locked-details');

                if (response.data.success) {
                    this.lockedDetails = response.data.data;
                } else {
                    console.error('加载锁定详情失败:', response.data.message);
                    alert('加载锁定详情失败');
                }
            } catch (error) {
                console.error('加载锁定详情失败:', error);
                alert('加载锁定详情失败');
            } finally {
                this.loadingLockedDetails = false;
            }
        },

        // 新增：加载卡片分页数据
        async loadLockedCards(page = 1, perPage = 20) {
            try {
                this.loadingLockedDetails = true;
                const response = await axios.get('/admin/card-validation-security/api/locked-details', {
                    params: {
                        type: 'cards',
                        page: page,
                        per_page: perPage
                    }
                });

                if (response.data.success) {
                    this.lockedDetails = response.data.data;
                } else {
                    console.error('加载锁定卡片失败:', response.data.message);
                    alert('加载锁定卡片失败');
                }
            } catch (error) {
                console.error('加载锁定卡片失败:', error);
                alert('加载锁定卡片失败');
            } finally {
                this.loadingLockedDetails = false;
            }
        },

        async refreshLockedDetails() {
            await this.loadLockedDetails();
        },

        // 新增：刷新卡片分页数据
        async refreshLockedCards(page = 1, perPage = 20) {
            await this.loadLockedCards(page, perPage);
        },

        // 新增：获取可见页码数组
        getVisiblePages(pagination) {
            if (!pagination) return [];

            const current = pagination.current_page;
            const last = pagination.last_page;
            const delta = 2; // 当前页前后显示的页码数量

            let pages = [];
            let start = Math.max(1, current - delta);
            let end = Math.min(last, current + delta);

            // 如果起始页大于1，添加第一页
            if (start > 1) {
                pages.push(1);
                if (start > 2) {
                    pages.push('...');
                }
            }

            // 添加中间页码
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }

            // 如果结束页小于最后页，添加最后页
            if (end < last) {
                if (end < last - 1) {
                    pages.push('...');
                }
                pages.push(last);
            }

            return pages.filter(page => page !== '...' || true); // 保留省略号
        },

        async quickUnlock(type, identifier) {
            if (!confirm(`确认要解锁这个${type === 'user' ? '用户' : type === 'ip' ? 'IP地址' : '卡片'}吗？`)) {
                return;
            }

            try {
                await axios.post('/admin/card-validation-security/api/unlock', {
                    type: type,
                    identifier: identifier,
                    reason: `通过锁定详情页面快速解锁 ${type} ${identifier}`
                });

                alert('解锁成功');

                // 刷新锁定详情和仪表板数据
                await this.refreshLockedCards(1, 20);
                await this.loadDashboard();
                this.updateLockedUsers();

            } catch (error) {
                console.error('解锁失败:', error);
                alert('解锁失败: ' + (error.response?.data?.message || error.message));
            }
        }
    },
    mounted() {
        this.refreshData();

        // 每30秒自动刷新数据
        setInterval(() => {
            this.loadDashboard();
        }, 30000);
    }
});
</script>
@endsection