@extends('admin.layouts.admin')

@section('title', '管理后台')
@section('page-title', '仪表板')

@section('content')

<!-- Tab 导航 -->
<ul class="nav nav-tabs mb-4" id="dashboardTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="user-stats-tab" data-bs-toggle="tab" data-bs-target="#user-stats" type="button" role="tab" aria-controls="user-stats" aria-selected="true">
            <i class="fas fa-users me-2"></i>用户统计分析
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="card-stats-tab" data-bs-toggle="tab" data-bs-target="#card-stats" type="button" role="tab" aria-controls="card-stats" aria-selected="false">
            <i class="fas fa-credit-card me-2"></i>卡片统计分析
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="enrollment-stats-tab" data-bs-toggle="tab" data-bs-target="#enrollment-stats" type="button" role="tab" aria-controls="enrollment-stats" aria-selected="false">
            <i class="fas fa-clipboard-check me-2"></i>活动报名统计分析
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="funnel-stats-tab" data-bs-toggle="tab" data-bs-target="#funnel-stats" type="button" role="tab" aria-controls="funnel-stats" aria-selected="false">
            <i class="fas fa-filter me-2"></i>转化漏斗分析
        </button>
    </li>
</ul>

<!-- Tab 内容 -->
<div class="tab-content" id="dashboardTabsContent">
    <!-- 用户统计分析 Tab -->
    <div class="tab-pane fade show active" id="user-stats" role="tabpanel" aria-labelledby="user-stats-tab">

        <!-- 统计卡片区域 -->
        <div class="row mb-4">
            <!-- 用户总数 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    用户总数
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-primary stats-number" id="stat-total">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-3x text-primary opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 今日新增 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    今日新增
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-success stats-number" id="stat-today">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1" id="stat-today-growth"></div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-user-plus fa-3x text-success opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 7日内新增 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    7日内新增
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-info stats-number" id="stat-seven-days">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1" id="stat-seven-days-growth"></div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar-week fa-3x text-info opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 本月新增 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    本月新增
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-warning stats-number" id="stat-month">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1" id="stat-month-growth"></div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar-alt fa-3x text-warning opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户趋势混合图表 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-chart-area me-2"></i>用户趋势分析
                        </h6>
                        <div class="d-flex align-items-center gap-2">
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">开始日期</span>
                                <input type="date" class="form-control" id="chart-start-date" style="width: 140px;">
                            </div>
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">结束日期</span>
                                <input type="date" class="form-control" id="chart-end-date" style="width: 140px;">
                            </div>
                            <button class="btn btn-sm btn-primary" id="btn-refresh-chart">
                                <i class="fas fa-sync-alt me-1"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 350px;">
                            <canvas id="userTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 渠道分布图表 -->
        <div class="row">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-chart-pie me-2"></i>用户注册渠道分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 300px;">
                            <canvas id="channelDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-list-ol me-2"></i>渠道明细
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0" id="channelTable">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th>渠道</th>
                                        <th class="text-end">用户数</th>
                                        <th class="text-end">占比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            <span class="spinner-border spinner-border-sm" role="status"></span> 加载中...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 卡片统计分析 Tab -->
    <div class="tab-pane fade" id="card-stats" role="tabpanel" aria-labelledby="card-stats-tab">

        <!-- 统计卡片区域 -->
        <div class="row mb-4">
            <!-- 卡片总数 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    卡片总数
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-primary stats-number" id="card-stat-total">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-credit-card fa-3x text-primary opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 今日新增 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    今日新增
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-success stats-number" id="card-stat-today">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1" id="card-stat-today-growth"></div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-plus-circle fa-3x text-success opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 7日内新增 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    7日内新增
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-info stats-number" id="card-stat-seven-days">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1" id="card-stat-seven-days-growth"></div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar-week fa-3x text-info opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 本月新增 -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    本月新增
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-warning stats-number" id="card-stat-month">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1" id="card-stat-month-growth"></div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar-alt fa-3x text-warning opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 持卡数统计卡片行 -->
        <div class="row mb-4">
            <!-- 人均持卡 -->
            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-secondary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
                                    人均持卡
                                </div>
                                <div class="h4 mb-0 font-weight-bold text-secondary" id="card-per-user-avg">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 绑卡率 -->
            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    绑卡率
                                </div>
                                <div class="h4 mb-0 font-weight-bold text-success" id="card-bindcard-rate">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 有卡用户 -->
            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    有卡用户
                                </div>
                                <div class="h4 mb-0 font-weight-bold text-info" id="card-users-with">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 持卡1张 -->
            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card shadow h-100 py-2" style="border-left: 0.25rem solid #858796 !important;">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-muted text-uppercase mb-1">
                                    持卡1张
                                </div>
                                <div class="h4 mb-0 font-weight-bold text-muted" id="card-dist-1">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 持卡2张 -->
            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card shadow h-100 py-2" style="border-left: 0.25rem solid #858796 !important;">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-muted text-uppercase mb-1">
                                    持卡2张
                                </div>
                                <div class="h4 mb-0 font-weight-bold text-muted" id="card-dist-2">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 持卡3张+ -->
            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card shadow h-100 py-2" style="border-left: 0.25rem solid #858796 !important;">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-muted text-uppercase mb-1">
                                    持卡3张+
                                </div>
                                <div class="h4 mb-0 font-weight-bold text-muted" id="card-dist-3plus">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 绑卡趋势混合图表 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-chart-area me-2"></i>绑卡趋势分析
                        </h6>
                        <div class="d-flex align-items-center gap-2">
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">开始日期</span>
                                <input type="date" class="form-control" id="card-chart-start-date" style="width: 140px;">
                            </div>
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">结束日期</span>
                                <input type="date" class="form-control" id="card-chart-end-date" style="width: 140px;">
                            </div>
                            <button class="btn btn-sm btn-primary" id="btn-refresh-card-chart">
                                <i class="fas fa-sync-alt me-1"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 350px;">
                            <canvas id="cardTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 绑卡渠道分布图表 -->
        <div class="row">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-chart-pie me-2"></i>绑卡渠道分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 300px;">
                            <canvas id="cardChannelDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-list-ol me-2"></i>渠道明细
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0" id="cardChannelTable">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th>渠道</th>
                                        <th class="text-end">卡片数</th>
                                        <th class="text-end">占比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            <span class="spinner-border spinner-border-sm" role="status"></span> 加载中...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 发卡行分布 -->
        <div class="row">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-university me-2"></i>发卡行分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 300px;">
                            <canvas id="cardIssuerDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-list-ol me-2"></i>发卡行明细
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0" id="cardIssuerTable">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th>发卡行</th>
                                        <th class="text-end">卡片数</th>
                                        <th class="text-end">占比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            <span class="spinner-border spinner-border-sm" role="status"></span> 加载中...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 卡片类型和等级分布 -->
        <div class="row">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-tags me-2"></i>卡片类型分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 300px;">
                            <canvas id="cardTypeDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-layer-group me-2"></i>卡片等级分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 300px;">
                            <canvas id="cardLevelDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 活动报名统计分析 Tab -->
    <div class="tab-pane fade" id="enrollment-stats" role="tabpanel" aria-labelledby="enrollment-stats-tab">

        <!-- 核心统计卡片（6个合并卡片，2行） -->
        <div class="row mb-4">
            <!-- 报名总数 + 今日新增 -->
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-enrollment shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-enrollment text-uppercase mb-1">报名总数</div>
                                <div class="h3 mb-0 font-weight-bold text-enrollment" id="enrollment-stat-total">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="mt-2 pt-2 border-top">
                                    <span class="text-xs text-muted">今日新增</span>
                                    <span class="font-weight-bold text-success ms-2" id="enrollment-stat-today">-</span>
                                    <span class="small ms-1" id="enrollment-stat-today-growth"></span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clipboard-check fa-2x text-enrollment opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 7日 + 本月新增 -->
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">新增报名</div>
                                <div class="d-flex align-items-baseline">
                                    <span class="text-xs text-muted me-1">7日</span>
                                    <span class="h4 mb-0 font-weight-bold text-info" id="enrollment-stat-seven-days">-</span>
                                    <span class="small ms-1" id="enrollment-stat-seven-days-growth"></span>
                                </div>
                                <div class="mt-2 pt-2 border-top d-flex align-items-baseline">
                                    <span class="text-xs text-muted me-1">本月</span>
                                    <span class="font-weight-bold text-warning" id="enrollment-stat-month">-</span>
                                    <span class="small ms-1" id="enrollment-stat-month-growth"></span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-chart-line fa-2x text-info opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 活动覆盖 -->
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">活动覆盖</div>
                                <div class="d-flex align-items-baseline">
                                    <span class="h4 mb-0 font-weight-bold text-success" id="campaigns-with-enrollments">-</span>
                                    <span class="text-muted mx-1">/</span>
                                    <span class="font-weight-bold" id="enroll-required-campaigns">-</span>
                                </div>
                                <div class="mt-2 pt-2 border-top">
                                    <span class="text-xs text-muted">覆盖率</span>
                                    <span class="font-weight-bold text-success ms-2" id="enrollment-coverage-rate">-</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-bullseye fa-2x text-success opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <!-- 用户参与 -->
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">用户参与</div>
                                <div class="d-flex align-items-baseline">
                                    <span class="h4 mb-0 font-weight-bold text-primary" id="enrollment-users">-</span>
                                    <span class="text-muted ms-2 small">人</span>
                                    <span class="text-muted mx-2">|</span>
                                    <span class="text-xs text-muted">转化率</span>
                                    <span class="font-weight-bold text-success ms-1" id="user-conversion-rate">-</span>
                                </div>
                                <div class="mt-2 pt-2 border-top">
                                    <span class="text-xs text-muted">近7日活跃</span>
                                    <span class="font-weight-bold text-info ms-2" id="recent-active-users">-</span>
                                    <span class="text-muted small">人</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-primary opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 人均报名 -->
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card shadow h-100 py-2" style="border-left: 0.25rem solid #6f42c1 !important;">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #6f42c1;">人均报名</div>
                                <div class="h3 mb-0 font-weight-bold" style="color: #6f42c1;" id="enrollment-avg-per-user">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="text-xs text-muted mt-1">每位用户平均报名活动数</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-user-check fa-2x opacity-25" style="color: #6f42c1;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 活动平均报名 -->
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card shadow h-100 py-2" style="border-left: 0.25rem solid #858796 !important;">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-muted text-uppercase mb-1">活动平均报名</div>
                                <div class="h3 mb-0 font-weight-bold text-muted" id="enrollment-avg-per-campaign">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="text-xs text-muted mt-1">每个活动平均报名人数</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-flag-checkered fa-2x text-muted opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报名趋势混合图表 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-enrollment">
                            <i class="fas fa-chart-area me-2"></i>报名趋势分析
                        </h6>
                        <div class="d-flex align-items-center gap-2">
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">开始日期</span>
                                <input type="date" class="form-control" id="enrollment-chart-start-date" style="width: 140px;">
                            </div>
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">结束日期</span>
                                <input type="date" class="form-control" id="enrollment-chart-end-date" style="width: 140px;">
                            </div>
                            <button class="btn btn-sm btn-primary" id="btn-refresh-enrollment-chart">
                                <i class="fas fa-sync-alt me-1"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 350px;">
                            <canvas id="enrollmentTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 活动报名热度排行和报名时段分布 -->
        <div class="row">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-enrollment">
                            <i class="fas fa-fire me-2"></i>活动报名热度 Top 10
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0" id="enrollmentRankingTable">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th style="width: 50px;">排名</th>
                                        <th>活动名称</th>
                                        <th class="text-center">状态</th>
                                        <th class="text-end">报名卡数</th>
                                        <th class="text-end">用户数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">
                                            <span class="spinner-border spinner-border-sm" role="status"></span> 加载中...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-enrollment">
                            <i class="fas fa-clock me-2"></i>报名时段分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 300px;">
                            <canvas id="enrollmentHourlyDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 活动类型与形态报名分布 -->
        <div class="row">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-enrollment">
                            <i class="fas fa-coins me-2"></i>活动类型报名分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 250px;">
                            <canvas id="enrollmentCampaignTypeDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-enrollment">
                            <i class="fas fa-tags me-2"></i>活动形态报名分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 250px;">
                            <canvas id="enrollmentCampaignFormatDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 转化漏斗分析 Tab -->
    <div class="tab-pane fade" id="funnel-stats" role="tabpanel" aria-labelledby="funnel-stats-tab">

        <!-- 主漏斗卡片 -->
        <div class="row mb-4">
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    总用户
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-primary" id="funnel-total-users">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small text-muted mt-1">100%</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-3x text-primary opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    绑卡用户
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-success" id="funnel-card-users">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1">
                                    <span class="text-muted">绑卡率</span>
                                    <span class="font-weight-bold text-success ms-1" id="funnel-card-binding-rate">-</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-credit-card fa-3x text-success opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    报名用户
                                </div>
                                <div class="h2 mb-0 font-weight-bold text-info" id="funnel-enrollment-users">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </div>
                                <div class="small mt-1">
                                    <span class="text-muted">报名率</span>
                                    <span class="font-weight-bold text-info ms-1" id="funnel-enrollment-rate">-</span>
                                    <span class="text-muted ms-2">整体</span>
                                    <span class="font-weight-bold text-warning ms-1" id="funnel-overall-rate">-</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clipboard-check fa-3x text-info opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 漏斗图和流失分析 -->
        <div class="row mb-4">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-filter me-2"></i>转化漏斗
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 300px;">
                            <canvas id="funnelChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>流失分析
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted">未绑卡用户</span>
                                <span class="font-weight-bold text-warning" id="loss-users-without-cards">-</span>
                            </div>
                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar bg-warning" role="progressbar" id="loss-bar-without-cards" style="width: 0%"></div>
                            </div>
                            <small class="text-muted">注册后未绑定任何卡片</small>
                        </div>

                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted">绑卡未报名用户</span>
                                <span class="font-weight-bold text-info" id="loss-users-no-enrollment">-</span>
                            </div>
                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar bg-info" role="progressbar" id="loss-bar-no-enrollment" style="width: 0%"></div>
                            </div>
                            <small class="text-muted">已绑卡但从未成功报名</small>
                        </div>

                        {{-- 报名失败用户暂时隐藏，后续处理 --}}
                    </div>
                </div>
            </div>
        </div>

        <!-- 转化率趋势 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-chart-line me-2"></i>转化率趋势
                        </h6>
                        <div class="d-flex align-items-center gap-2">
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">开始日期</span>
                                <input type="date" class="form-control" id="funnel-chart-start-date" style="width: 140px;">
                            </div>
                            <div class="input-group input-group-sm" style="width: auto;">
                                <span class="input-group-text">结束日期</span>
                                <input type="date" class="form-control" id="funnel-chart-end-date" style="width: 140px;">
                            </div>
                            <button class="btn btn-sm btn-primary" id="btn-refresh-funnel-chart">
                                <i class="fas fa-sync-alt me-1"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height: 350px;">
                            <canvas id="conversionTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 渠道转化和发卡行分析 -->
        <div class="row">
            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-code-branch me-2"></i>渠道转化对比
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0" id="channelFunnelTable">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th>渠道</th>
                                        <th class="text-end">用户数</th>
                                        <th class="text-end">报名用户</th>
                                        <th class="text-end">报名率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">
                                            <span class="spinner-border spinner-border-sm" role="status"></span> 加载中...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6 col-lg-6 mb-4">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-university me-2"></i>发卡行转化分析
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0" id="issuerFunnelTable">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th>发卡行</th>
                                        <th class="text-end">用户数</th>
                                        <th class="text-end">报名用户</th>
                                        <th class="text-end">报名率</th>
                                        <th class="text-end">人均报名</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">
                                            <span class="spinner-border spinner-border-sm" role="status"></span> 加载中...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@push('styles')
<style>
    .border-left-primary {
        border-left: 0.25rem solid #4e73df !important;
    }
    .border-left-success {
        border-left: 0.25rem solid #1cc88a !important;
    }
    .border-left-info {
        border-left: 0.25rem solid #36b9cc !important;
    }
    .border-left-warning {
        border-left: 0.25rem solid #f6c23e !important;
    }
    .border-left-enrollment {
        border-left: 0.25rem solid #fd7e14 !important;
    }
    .text-enrollment {
        color: #fd7e14 !important;
    }
    .stats-number {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }

    /* Tab 样式 */
    .nav-tabs .nav-link {
        color: #5a5c69;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .nav-tabs .nav-link:hover {
        color: #4e73df;
        border-bottom-color: #4e73df;
    }
    .nav-tabs .nav-link.active {
        color: #4e73df;
        background-color: transparent;
        border-bottom: 2px solid #4e73df;
    }

    /* 图表容器 */
    .chart-container {
        min-height: 350px;
    }

    /* 卡片悬停效果 */
    .card.shadow {
        transition: all 0.3s ease;
    }
    .card.shadow:hover {
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
    }

    /* 日期选择器样式 */
    .input-group-text {
        background-color: #f8f9fc;
        border-color: #d1d3e2;
        font-size: 0.85rem;
    }

    /* 响应式 */
    @media (max-width: 992px) {
        .card-header .d-flex {
            flex-direction: column;
            gap: 1rem !important;
        }
        .card-header .d-flex > div,
        .card-header .d-flex > button {
            width: 100%;
        }
        .card-header .input-group {
            width: 100% !important;
        }
    }

    @media (max-width: 768px) {
        .stats-number {
            font-size: 2rem !important;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ==================== Tab 状态持久化 ====================
    const TAB_STORAGE_KEY = 'admin_dashboard_active_tab';

    // 监听所有Tab切换事件并保存状态
    document.querySelectorAll('#dashboardTabs button[data-bs-toggle="tab"]').forEach(tabEl => {
        tabEl.addEventListener('shown.bs.tab', function (event) {
            localStorage.setItem(TAB_STORAGE_KEY, event.target.id);
        });
    });

    // 设置默认日期范围（过去30天）
    const today = new Date();
    const thirtyDaysAgo = new Date(today);
    thirtyDaysAgo.setDate(today.getDate() - 29);

    const formatDate = (date) => date.toISOString().split('T')[0];

    // 初始化日期选择器
    document.getElementById('chart-start-date').value = formatDate(thirtyDaysAgo);
    document.getElementById('chart-end-date').value = formatDate(today);

    // 图表实例
    let userTrendChart = null;
    let channelDistributionChart = null;

    // 格式化增长率显示
    function formatGrowth(growth) {
        if (growth === 0) return '<span class="text-muted">- 持平</span>';
        const icon = growth > 0 ? 'fa-arrow-up' : 'fa-arrow-down';
        const color = growth > 0 ? 'text-success' : 'text-danger';
        const sign = growth > 0 ? '+' : '';
        return `<span class="${color}"><i class="fas ${icon} me-1"></i>${sign}${growth}%</span>`;
    }

    // 加载用户统计数据
    async function loadUserStats() {
        try {
            const response = await adminFetch('/admin/user-stats');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();

            document.getElementById('stat-total').textContent = data.total.toLocaleString();
            document.getElementById('stat-today').textContent = data.today_new.toLocaleString();
            document.getElementById('stat-seven-days').textContent = data.seven_days_new.toLocaleString();
            document.getElementById('stat-month').textContent = data.month_new.toLocaleString();

            // 显示增长率
            document.getElementById('stat-today-growth').innerHTML = formatGrowth(data.today_growth);
            document.getElementById('stat-seven-days-growth').innerHTML = formatGrowth(data.seven_days_growth);
            document.getElementById('stat-month-growth').innerHTML = formatGrowth(data.month_growth);
        } catch (error) {
            console.error('加载用户统计失败:', error);
            document.querySelectorAll('.stats-number').forEach(el => {
                el.textContent = '-';
            });
        }
    }

    // 加载用户趋势数据
    async function loadUserTrend(startDate, endDate) {
        try {
            const params = new URLSearchParams({
                start_date: startDate,
                end_date: endDate
            });
            const response = await adminFetch(`/admin/user-trend?${params}`);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();

            return data;
        } catch (error) {
            console.error('加载用户趋势失败:', error);
            return null;
        }
    }

    // 渲染混合图表
    async function renderUserTrendChart() {
        const startDate = document.getElementById('chart-start-date').value;
        const endDate = document.getElementById('chart-end-date').value;

        const data = await loadUserTrend(startDate, endDate);
        if (!data) return;

        const ctx = document.getElementById('userTrendChart').getContext('2d');

        if (userTrendChart) {
            userTrendChart.destroy();
        }

        const labels = data.total_trend.map(item => item.date);
        const totalValues = data.total_trend.map(item => item.count);
        const newValues = data.new_trend.map(item => item.count);

        userTrendChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        type: 'line',
                        label: '用户总数',
                        data: totalValues,
                        borderColor: '#4e73df',
                        backgroundColor: 'rgba(78, 115, 223, 0.1)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.3,
                        pointRadius: 3,
                        pointBackgroundColor: '#4e73df',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointHoverRadius: 5,
                        yAxisID: 'y',
                        order: 1
                    },
                    {
                        type: 'bar',
                        label: '每日新增',
                        data: newValues,
                        backgroundColor: 'rgba(28, 200, 138, 0.7)',
                        borderColor: '#1cc88a',
                        borderWidth: 1,
                        borderRadius: 4,
                        hoverBackgroundColor: 'rgba(28, 200, 138, 0.9)',
                        yAxisID: 'y1',
                        order: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false,
                    mode: 'index'
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 20
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        titleFont: { size: 14 },
                        bodyFont: { size: 13 },
                        callbacks: {
                            label: function(context) {
                                const label = context.dataset.label || '';
                                const value = context.parsed.y.toLocaleString();
                                return `${label}: ${value}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            maxRotation: 45,
                            minRotation: 45
                        }
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        beginAtZero: false,
                        title: {
                            display: true,
                            text: '用户总数',
                            color: '#4e73df',
                            font: { weight: 'bold' }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            color: '#4e73df',
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '每日新增',
                            color: '#1cc88a',
                            font: { weight: 'bold' }
                        },
                        grid: {
                            drawOnChartArea: false
                        },
                        ticks: {
                            color: '#1cc88a',
                            stepSize: 1,
                            callback: function(value) {
                                if (Number.isInteger(value)) {
                                    return value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            }
        });
    }

    // 渠道颜色配置
    const channelColors = [
        '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
        '#858796', '#5a5c69', '#2e59d9', '#17a673', '#2c9faf',
        '#dda20a', '#be2617', '#6f42c1', '#fd7e14', '#20c997'
    ];

    // 加载渠道分布数据
    async function loadChannelDistribution() {
        try {
            const response = await adminFetch('/admin/user-channel-distribution');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();
            return data;
        } catch (error) {
            console.error('加载渠道分布失败:', error);
            return null;
        }
    }

    // 渲染渠道分布图表
    async function renderChannelDistributionChart() {
        const data = await loadChannelDistribution();
        if (!data || !data.distribution || data.distribution.length === 0) {
            document.querySelector('#channelTable tbody').innerHTML = `
                <tr><td colspan="3" class="text-center text-muted">暂无数据</td></tr>
            `;
            return;
        }

        const ctx = document.getElementById('channelDistributionChart').getContext('2d');

        if (channelDistributionChart) {
            channelDistributionChart.destroy();
        }

        const labels = data.distribution.map(item => item.channel || 'unknown');
        const values = data.distribution.map(item => item.count);
        const colors = labels.map((_, index) => channelColors[index % channelColors.length]);

        channelDistributionChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    borderColor: '#fff',
                    borderWidth: 2,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            padding: 15,
                            usePointStyle: true,
                            font: { size: 12 }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const value = context.raw;
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${context.label}: ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // 更新表格
        const total = data.total;
        const tableBody = document.querySelector('#channelTable tbody');
        tableBody.innerHTML = data.distribution.map((item, index) => {
            const percentage = ((item.count / total) * 100).toFixed(1);
            const color = channelColors[index % channelColors.length];
            return `
                <tr>
                    <td>
                        <span class="badge me-2" style="background-color: ${color}; width: 12px; height: 12px; display: inline-block; border-radius: 50%;"></span>
                        ${item.channel || 'unknown'}
                    </td>
                    <td class="text-end">${item.count.toLocaleString()}</td>
                    <td class="text-end">${percentage}%</td>
                </tr>
            `;
        }).join('');
    }

    // 刷新按钮事件
    document.getElementById('btn-refresh-chart').addEventListener('click', renderUserTrendChart);

    // 初始加载
    loadUserStats();
    renderUserTrendChart();
    renderChannelDistributionChart();

    // 自动刷新统计数据（每5分钟）
    setInterval(loadUserStats, 5 * 60 * 1000);

    // ==================== 卡片统计分析 ====================

    // 卡片图表实例
    let cardTrendChart = null;
    let cardChannelDistributionChart = null;
    let cardStatsLoaded = false;

    // 初始化卡片日期选择器
    document.getElementById('card-chart-start-date').value = formatDate(thirtyDaysAgo);
    document.getElementById('card-chart-end-date').value = formatDate(today);

    // 加载卡片统计数据
    async function loadCardStats() {
        try {
            const response = await adminFetch('/admin/card-stats');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();

            document.getElementById('card-stat-total').textContent = data.total.toLocaleString();
            document.getElementById('card-stat-today').textContent = data.today_new.toLocaleString();
            document.getElementById('card-stat-seven-days').textContent = data.seven_days_new.toLocaleString();
            document.getElementById('card-stat-month').textContent = data.month_new.toLocaleString();

            // 显示增长率
            document.getElementById('card-stat-today-growth').innerHTML = formatGrowth(data.today_growth);
            document.getElementById('card-stat-seven-days-growth').innerHTML = formatGrowth(data.seven_days_growth);
            document.getElementById('card-stat-month-growth').innerHTML = formatGrowth(data.month_growth);
        } catch (error) {
            console.error('加载卡片统计失败:', error);
            ['card-stat-total', 'card-stat-today', 'card-stat-seven-days', 'card-stat-month'].forEach(id => {
                document.getElementById(id).textContent = '-';
            });
        }
    }

    // 加载卡片趋势数据
    async function loadCardTrend(startDate, endDate) {
        try {
            const params = new URLSearchParams({
                start_date: startDate,
                end_date: endDate
            });
            const response = await adminFetch(`/admin/card-trend?${params}`);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('加载卡片趋势失败:', error);
            return null;
        }
    }

    // 渲染卡片趋势图表
    async function renderCardTrendChart() {
        const startDate = document.getElementById('card-chart-start-date').value;
        const endDate = document.getElementById('card-chart-end-date').value;

        const data = await loadCardTrend(startDate, endDate);
        if (!data) return;

        const ctx = document.getElementById('cardTrendChart').getContext('2d');

        if (cardTrendChart) {
            cardTrendChart.destroy();
        }

        const labels = data.total_trend.map(item => item.date);
        const totalValues = data.total_trend.map(item => item.count);
        const newValues = data.new_trend.map(item => item.count);

        cardTrendChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        type: 'line',
                        label: '卡片总数',
                        data: totalValues,
                        borderColor: '#6f42c1',
                        backgroundColor: 'rgba(111, 66, 193, 0.1)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.3,
                        pointRadius: 3,
                        pointBackgroundColor: '#6f42c1',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointHoverRadius: 5,
                        yAxisID: 'y',
                        order: 1
                    },
                    {
                        type: 'bar',
                        label: '每日新增',
                        data: newValues,
                        backgroundColor: 'rgba(253, 126, 20, 0.7)',
                        borderColor: '#fd7e14',
                        borderWidth: 1,
                        borderRadius: 4,
                        hoverBackgroundColor: 'rgba(253, 126, 20, 0.9)',
                        yAxisID: 'y1',
                        order: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false,
                    mode: 'index'
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 20
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        titleFont: { size: 14 },
                        bodyFont: { size: 13 },
                        callbacks: {
                            label: function(context) {
                                const label = context.dataset.label || '';
                                const value = context.parsed.y.toLocaleString();
                                return `${label}: ${value}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            maxRotation: 45,
                            minRotation: 45
                        }
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        beginAtZero: false,
                        title: {
                            display: true,
                            text: '卡片总数',
                            color: '#6f42c1',
                            font: { weight: 'bold' }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            color: '#6f42c1',
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '每日新增',
                            color: '#fd7e14',
                            font: { weight: 'bold' }
                        },
                        grid: {
                            drawOnChartArea: false
                        },
                        ticks: {
                            color: '#fd7e14',
                            stepSize: 1,
                            callback: function(value) {
                                if (Number.isInteger(value)) {
                                    return value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            }
        });
    }

    // 加载卡片渠道分布数据
    async function loadCardChannelDistribution() {
        try {
            const response = await adminFetch('/admin/card-channel-distribution');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('加载卡片渠道分布失败:', error);
            return null;
        }
    }

    // 渲染卡片渠道分布图表
    async function renderCardChannelDistributionChart() {
        const data = await loadCardChannelDistribution();
        if (!data || !data.distribution || data.distribution.length === 0) {
            document.querySelector('#cardChannelTable tbody').innerHTML = `
                <tr><td colspan="3" class="text-center text-muted">暂无数据</td></tr>
            `;
            return;
        }

        const ctx = document.getElementById('cardChannelDistributionChart').getContext('2d');

        if (cardChannelDistributionChart) {
            cardChannelDistributionChart.destroy();
        }

        const labels = data.distribution.map(item => item.channel || 'unknown');
        const values = data.distribution.map(item => item.count);
        const colors = labels.map((_, index) => channelColors[index % channelColors.length]);

        cardChannelDistributionChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    borderColor: '#fff',
                    borderWidth: 2,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            padding: 15,
                            usePointStyle: true,
                            font: { size: 12 }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const value = context.raw;
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${context.label}: ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // 更新表格
        const total = data.total;
        const tableBody = document.querySelector('#cardChannelTable tbody');
        tableBody.innerHTML = data.distribution.map((item, index) => {
            const percentage = ((item.count / total) * 100).toFixed(1);
            const color = channelColors[index % channelColors.length];
            return `
                <tr>
                    <td>
                        <span class="badge me-2" style="background-color: ${color}; width: 12px; height: 12px; display: inline-block; border-radius: 50%;"></span>
                        ${item.channel || 'unknown'}
                    </td>
                    <td class="text-end">${item.count.toLocaleString()}</td>
                    <td class="text-end">${percentage}%</td>
                </tr>
            `;
        }).join('');
    }

    // 新增图表实例
    let cardIssuerDistributionChart = null;
    let cardTypeDistributionChart = null;
    let cardLevelDistributionChart = null;

    // 加载持卡数统计
    async function loadCardPerUserStats() {
        try {
            const response = await adminFetch('/admin/card-per-user-stats');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();

            // 更新统计卡片
            document.getElementById('card-per-user-avg').textContent = data.avg_cards_per_user.toFixed(2) + ' 张';
            document.getElementById('card-bindcard-rate').textContent = data.bindcard_rate + '%';
            document.getElementById('card-users-with').textContent = data.users_with_cards.toLocaleString();

            // 计算持卡分布
            let dist1 = 0, dist2 = 0, dist3plus = 0;
            data.distribution.forEach(item => {
                if (item.cards === 1) dist1 = item.users;
                else if (item.cards === 2) dist2 = item.users;
                else if (item.cards >= 3) dist3plus += item.users;
            });

            document.getElementById('card-dist-1').textContent = dist1.toLocaleString();
            document.getElementById('card-dist-2').textContent = dist2.toLocaleString();
            document.getElementById('card-dist-3plus').textContent = dist3plus.toLocaleString();

        } catch (error) {
            console.error('加载持卡数统计失败:', error);
            ['card-per-user-avg', 'card-bindcard-rate', 'card-users-with', 'card-dist-1', 'card-dist-2', 'card-dist-3plus'].forEach(id => {
                document.getElementById(id).textContent = '-';
            });
        }
    }

    // 加载发卡行分布
    async function loadCardIssuerDistribution() {
        try {
            const response = await adminFetch('/admin/card-issuer-distribution');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('加载发卡行分布失败:', error);
            return null;
        }
    }

    // 渲染发卡行分布图表
    async function renderCardIssuerDistributionChart() {
        const data = await loadCardIssuerDistribution();
        if (!data || !data.distribution || data.distribution.length === 0) {
            document.querySelector('#cardIssuerTable tbody').innerHTML = `
                <tr><td colspan="3" class="text-center text-muted">暂无数据</td></tr>
            `;
            return;
        }

        const ctx = document.getElementById('cardIssuerDistributionChart').getContext('2d');

        if (cardIssuerDistributionChart) {
            cardIssuerDistributionChart.destroy();
        }

        const labels = data.distribution.map(item => item.issuer);
        const values = data.distribution.map(item => item.count);
        const colors = labels.map((_, index) => channelColors[index % channelColors.length]);

        cardIssuerDistributionChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    borderColor: '#fff',
                    borderWidth: 2,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            padding: 15,
                            usePointStyle: true,
                            font: { size: 12 }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const value = context.raw;
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${context.label}: ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // 更新表格
        const total = data.total;
        const tableBody = document.querySelector('#cardIssuerTable tbody');
        tableBody.innerHTML = data.distribution.map((item, index) => {
            const percentage = ((item.count / total) * 100).toFixed(1);
            const color = channelColors[index % channelColors.length];
            return `
                <tr>
                    <td>
                        <span class="badge me-2" style="background-color: ${color}; width: 12px; height: 12px; display: inline-block; border-radius: 50%;"></span>
                        ${item.issuer}
                    </td>
                    <td class="text-end">${item.count.toLocaleString()}</td>
                    <td class="text-end">${percentage}%</td>
                </tr>
            `;
        }).join('');
    }

    // 加载卡片类型分布
    async function loadCardTypeDistribution() {
        try {
            const response = await adminFetch('/admin/card-type-distribution');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('加载卡片类型分布失败:', error);
            return null;
        }
    }

    // 卡片类型颜色
    const cardTypeColors = {
        'C': '#4e73df',  // 信用卡 - 蓝色
        'D': '#1cc88a',  // 借记卡 - 绿色
        'P': '#f6c23e'   // 预付卡 - 黄色
    };

    // 渲染卡片类型分布图表
    async function renderCardTypeDistributionChart() {
        const data = await loadCardTypeDistribution();
        if (!data || !data.distribution || data.distribution.length === 0) {
            return;
        }

        const ctx = document.getElementById('cardTypeDistributionChart').getContext('2d');

        if (cardTypeDistributionChart) {
            cardTypeDistributionChart.destroy();
        }

        const labels = data.distribution.map(item => item.label);
        const values = data.distribution.map(item => item.count);
        const colors = data.distribution.map(item => cardTypeColors[item.type] || '#858796');

        cardTypeDistributionChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    borderColor: '#fff',
                    borderWidth: 2,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            padding: 15,
                            usePointStyle: true,
                            font: { size: 14 }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const value = context.raw;
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${context.label}: ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }

    // 加载卡片等级分布
    async function loadCardLevelDistribution() {
        try {
            const response = await adminFetch('/admin/card-level-distribution');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('加载卡片等级分布失败:', error);
            return null;
        }
    }

    // 卡片等级颜色
    const cardLevelColors = {
        'Classic': '#858796',    // 普卡 - 灰色
        'Gold': '#f6c23e',       // 金卡 - 金色
        'Platinum': '#36b9cc',   // 白金卡 - 青色
        'Signature': '#6f42c1',  // 御玺卡 - 紫色
        'Infinite': '#1f1f1f'    // 无限卡 - 黑色
    };

    // 渲染卡片等级分布图表
    async function renderCardLevelDistributionChart() {
        const data = await loadCardLevelDistribution();
        if (!data || !data.distribution || data.distribution.length === 0) {
            return;
        }

        const ctx = document.getElementById('cardLevelDistributionChart').getContext('2d');

        if (cardLevelDistributionChart) {
            cardLevelDistributionChart.destroy();
        }

        const labels = data.distribution.map(item => item.label);
        const values = data.distribution.map(item => item.count);
        const colors = data.distribution.map(item => cardLevelColors[item.level] || '#858796');

        cardLevelDistributionChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    borderColor: '#fff',
                    borderWidth: 2,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            padding: 15,
                            usePointStyle: true,
                            font: { size: 14 }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const value = context.raw;
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${context.label}: ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }

    // 加载卡片统计所有数据
    function loadCardStatsAll() {
        if (cardStatsLoaded) return;
        cardStatsLoaded = true;
        loadCardStats();
        loadCardPerUserStats();
        renderCardTrendChart();
        renderCardChannelDistributionChart();
        renderCardIssuerDistributionChart();
        renderCardTypeDistributionChart();
        renderCardLevelDistributionChart();
    }

    // 卡片刷新按钮事件
    document.getElementById('btn-refresh-card-chart').addEventListener('click', renderCardTrendChart);

    // Tab 切换时延迟加载卡片数据
    document.getElementById('card-stats-tab').addEventListener('shown.bs.tab', function () {
        loadCardStatsAll();
    });

    // 自动刷新卡片统计数据（每5分钟，仅当已加载时）
    setInterval(function() {
        if (cardStatsLoaded) {
            loadCardStats();
        }
    }, 5 * 60 * 1000);

    // ==================== 活动报名统计分析 ====================

    // 报名图表实例
    let enrollmentTrendChart = null;
    let enrollmentHourlyDistributionChart = null;
    let enrollmentCampaignTypeDistributionChart = null;
    let enrollmentCampaignFormatDistributionChart = null;
    let enrollmentStatsLoaded = false;

    // 初始化报名日期选择器
    document.getElementById('enrollment-chart-start-date').value = formatDate(thirtyDaysAgo);
    document.getElementById('enrollment-chart-end-date').value = formatDate(today);

    // 报名相关颜色配置
    const enrollmentColors = {
        primary: '#fd7e14',
        secondary: '#e85d04',
        success: '#1cc88a',
        danger: '#e74a3b',
        info: '#36b9cc',
        warning: '#f6c23e'
    };

    const campaignTypeColors = {
        'cash': '#1cc88a',
        'non-cash': '#6f42c1'
    };

    const campaignFormatColors = {
        'normal': '#4e73df',
        'coupon': '#fd7e14',
        'brand': '#e74a3b'
    };

    // 加载报名统计数据
    async function loadEnrollmentStats() {
        try {
            const response = await adminFetch('/admin/enrollment-stats');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();

            document.getElementById('enrollment-stat-total').textContent = data.total.toLocaleString();
            document.getElementById('enrollment-stat-today').textContent = data.today_new.toLocaleString();
            document.getElementById('enrollment-stat-seven-days').textContent = data.seven_days_new.toLocaleString();
            document.getElementById('enrollment-stat-month').textContent = data.month_new.toLocaleString();

            // 显示增长率
            document.getElementById('enrollment-stat-today-growth').innerHTML = formatGrowth(data.today_growth);
            document.getElementById('enrollment-stat-seven-days-growth').innerHTML = formatGrowth(data.seven_days_growth);
            document.getElementById('enrollment-stat-month-growth').innerHTML = formatGrowth(data.month_growth);
        } catch (error) {
            console.error('加载报名统计失败:', error);
            ['enrollment-stat-total', 'enrollment-stat-today', 'enrollment-stat-seven-days', 'enrollment-stat-month'].forEach(id => {
                document.getElementById(id).textContent = '-';
            });
        }
    }

    // 加载报名效率统计
    async function loadEnrollmentEfficiencyStats() {
        try {
            const response = await adminFetch('/admin/enrollment-efficiency-stats');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();

            // 活动覆盖卡片
            document.getElementById('enroll-required-campaigns').textContent = data.enroll_required_campaigns.toLocaleString();
            document.getElementById('campaigns-with-enrollments').textContent = data.campaigns_with_enrollments.toLocaleString();
            document.getElementById('enrollment-coverage-rate').textContent = data.enrollment_coverage_rate + '%';

            // 用户参与卡片
            document.getElementById('enrollment-users').textContent = data.enrollment_users.toLocaleString();
            document.getElementById('user-conversion-rate').textContent = data.user_conversion_rate + '%';
            document.getElementById('recent-active-users').textContent = data.recent_active_users.toLocaleString();

            // 人均报名卡片
            document.getElementById('enrollment-avg-per-user').textContent = data.avg_enrollments_per_user.toFixed(2) + ' 个';

            // 活动平均报名卡片
            document.getElementById('enrollment-avg-per-campaign').textContent = data.avg_users_per_campaign.toFixed(1) + ' 人';
        } catch (error) {
            console.error('加载报名效率统计失败:', error);
            ['enroll-required-campaigns', 'campaigns-with-enrollments', 'enrollment-coverage-rate',
             'enrollment-users', 'user-conversion-rate', 'recent-active-users',
             'enrollment-avg-per-user', 'enrollment-avg-per-campaign'].forEach(id => {
                document.getElementById(id).textContent = '-';
            });
        }
    }

    // 加载报名趋势数据
    async function loadEnrollmentTrend(startDate, endDate) {
        try {
            const params = new URLSearchParams({
                start_date: startDate,
                end_date: endDate
            });
            const response = await adminFetch(`/admin/enrollment-trend?${params}`);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('加载报名趋势失败:', error);
            return null;
        }
    }

    // 渲染报名趋势图表
    async function renderEnrollmentTrendChart() {
        const startDate = document.getElementById('enrollment-chart-start-date').value;
        const endDate = document.getElementById('enrollment-chart-end-date').value;

        const data = await loadEnrollmentTrend(startDate, endDate);
        if (!data) return;

        const ctx = document.getElementById('enrollmentTrendChart').getContext('2d');

        if (enrollmentTrendChart) {
            enrollmentTrendChart.destroy();
        }

        const labels = data.total_trend.map(item => item.date);
        const totalValues = data.total_trend.map(item => item.count);
        const newValues = data.new_trend.map(item => item.count);

        enrollmentTrendChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        type: 'line',
                        label: '报名总数',
                        data: totalValues,
                        borderColor: enrollmentColors.primary,
                        backgroundColor: 'rgba(253, 126, 20, 0.1)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.3,
                        pointRadius: 3,
                        pointBackgroundColor: enrollmentColors.primary,
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointHoverRadius: 5,
                        yAxisID: 'y',
                        order: 1
                    },
                    {
                        type: 'bar',
                        label: '每日新增',
                        data: newValues,
                        backgroundColor: 'rgba(28, 200, 138, 0.7)',
                        borderColor: '#1cc88a',
                        borderWidth: 1,
                        borderRadius: 4,
                        hoverBackgroundColor: 'rgba(28, 200, 138, 0.9)',
                        yAxisID: 'y1',
                        order: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false,
                    mode: 'index'
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 20
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        titleFont: { size: 14 },
                        bodyFont: { size: 13 },
                        callbacks: {
                            label: function(context) {
                                const label = context.dataset.label || '';
                                const value = context.parsed.y.toLocaleString();
                                return `${label}: ${value}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            maxRotation: 45,
                            minRotation: 45
                        }
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        beginAtZero: false,
                        title: {
                            display: true,
                            text: '报名总数',
                            color: enrollmentColors.primary,
                            font: { weight: 'bold' }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            color: enrollmentColors.primary,
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '每日新增',
                            color: '#1cc88a',
                            font: { weight: 'bold' }
                        },
                        grid: {
                            drawOnChartArea: false
                        },
                        ticks: {
                            color: '#1cc88a',
                            stepSize: 1,
                            callback: function(value) {
                                if (Number.isInteger(value)) {
                                    return value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            }
        });
    }

    // 渲染报名时段分布图表（柱状图）
    async function renderEnrollmentHourlyDistributionChart() {
        try {
            const response = await adminFetch('/admin/enrollment-hourly-distribution');
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();

            if (!data || !data.distribution || data.distribution.length === 0) return;

            const ctx = document.getElementById('enrollmentHourlyDistributionChart').getContext('2d');

            if (enrollmentHourlyDistributionChart) {
                enrollmentHourlyDistributionChart.destroy();
            }

            const labels = data.distribution.map(item => item.label);
            const values = data.distribution.map(item => item.count);

            // 找出峰值用于高亮
            const maxValue = Math.max(...values);

            enrollmentHourlyDistributionChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '报名数',
                        data: values,
                        backgroundColor: values.map(v => v === maxValue ? 'rgba(253, 126, 20, 0.9)' : 'rgba(253, 126, 20, 0.6)'),
                        borderColor: values.map(v => v === maxValue ? '#e85d04' : '#fd7e14'),
                        borderWidth: 1,
                        borderRadius: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 12,
                            callbacks: {
                                title: function(context) {
                                    return context[0].label + ' - ' + String(parseInt(context[0].label) + 1).padStart(2, '0') + ':00';
                                },
                                label: function(context) {
                                    const total = data.total;
                                    const value = context.raw;
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return `报名数: ${value.toLocaleString()} (${percentage}%)`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                maxRotation: 0,
                                callback: function(value, index) {
                                    // 每3小时显示一个标签
                                    return index % 3 === 0 ? this.getLabelForValue(value) : '';
                                }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                callback: function(value) {
                                    if (Number.isInteger(value)) {
                                        return value.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('加载报名时段分布失败:', error);
        }
    }

    // 渲染活动类型报名分布图表
    async function renderEnrollmentCampaignTypeDistributionChart() {
        try {
            const response = await adminFetch('/admin/enrollment-campaign-type-distribution');
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();

            if (!data || !data.distribution || data.distribution.length === 0) return;

            const ctx = document.getElementById('enrollmentCampaignTypeDistributionChart').getContext('2d');

            if (enrollmentCampaignTypeDistributionChart) {
                enrollmentCampaignTypeDistributionChart.destroy();
            }

            const labels = data.distribution.map(item => item.label);
            const values = data.distribution.map(item => item.count);
            const colors = data.distribution.map(item => campaignTypeColors[item.type] || '#858796');

            enrollmentCampaignTypeDistributionChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: colors,
                        borderColor: '#fff',
                        borderWidth: 2,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'right',
                            labels: {
                                padding: 15,
                                usePointStyle: true,
                                font: { size: 14 }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 12,
                            callbacks: {
                                label: function(context) {
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const value = context.raw;
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${context.label}: ${value.toLocaleString()} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('加载活动类型报名分布失败:', error);
        }
    }

    // 渲染活动形态报名分布图表
    async function renderEnrollmentCampaignFormatDistributionChart() {
        try {
            const response = await adminFetch('/admin/enrollment-campaign-format-distribution');
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();

            if (!data || !data.distribution || data.distribution.length === 0) return;

            const ctx = document.getElementById('enrollmentCampaignFormatDistributionChart').getContext('2d');

            if (enrollmentCampaignFormatDistributionChart) {
                enrollmentCampaignFormatDistributionChart.destroy();
            }

            const labels = data.distribution.map(item => item.label);
            const values = data.distribution.map(item => item.count);
            const colors = data.distribution.map(item => campaignFormatColors[item.format] || '#858796');

            enrollmentCampaignFormatDistributionChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: colors,
                        borderColor: '#fff',
                        borderWidth: 2,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'right',
                            labels: {
                                padding: 15,
                                usePointStyle: true,
                                font: { size: 14 }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 12,
                            callbacks: {
                                label: function(context) {
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const value = context.raw;
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${context.label}: ${value.toLocaleString()} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('加载活动形态报名分布失败:', error);
        }
    }

    // 加载活动报名热度排行
    async function loadEnrollmentCampaignRanking() {
        try {
            const response = await adminFetch('/admin/enrollment-campaign-ranking');
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();

            const tableBody = document.querySelector('#enrollmentRankingTable tbody');

            if (!data || !data.ranking || data.ranking.length === 0) {
                tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">暂无数据</td></tr>';
                return;
            }

            const statusBadgeColors = {
                0: 'bg-secondary',  // 草稿
                1: 'bg-success',    // 上线
                2: 'bg-danger',     // 停用
                3: 'bg-warning text-dark'  // 下线（过期）
            };

            tableBody.innerHTML = data.ranking.map((item, index) => {
                const rankIcon = index < 3 ? ['🥇', '🥈', '🥉'][index] : (index + 1);
                const badgeClass = statusBadgeColors[item.display_status] || 'bg-secondary';
                const vikBadge = item.is_vik ? '<span class="badge bg-info ms-1">VIK</span>' : '';
                const displayName = item.name.length > 18 ? item.name.substring(0, 18) + '...' : item.name;
                return `
                    <tr>
                        <td class="text-center">${rankIcon}</td>
                        <td title="${item.name}">${displayName}${vikBadge}</td>
                        <td class="text-center"><span class="badge ${badgeClass}">${item.status_label}</span></td>
                        <td class="text-end fw-bold">${item.enrollment_count.toLocaleString()}</td>
                        <td class="text-end">${item.user_count.toLocaleString()}</td>
                    </tr>
                `;
            }).join('');
        } catch (error) {
            console.error('加载活动报名热度排行失败:', error);
            document.querySelector('#enrollmentRankingTable tbody').innerHTML =
                '<tr><td colspan="5" class="text-center text-danger">加载失败</td></tr>';
        }
    }

    // 加载报名统计所有数据
    function loadEnrollmentStatsAll() {
        if (enrollmentStatsLoaded) return;
        enrollmentStatsLoaded = true;
        loadEnrollmentStats();
        loadEnrollmentEfficiencyStats();
        renderEnrollmentTrendChart();
        loadEnrollmentCampaignRanking();
        renderEnrollmentHourlyDistributionChart();
        renderEnrollmentCampaignTypeDistributionChart();
        renderEnrollmentCampaignFormatDistributionChart();
    }

    // 报名刷新按钮事件
    document.getElementById('btn-refresh-enrollment-chart').addEventListener('click', renderEnrollmentTrendChart);

    // Tab 切换时延迟加载报名数据
    document.getElementById('enrollment-stats-tab').addEventListener('shown.bs.tab', function () {
        loadEnrollmentStatsAll();
    });

    // 自动刷新报名统计数据（每5分钟，仅当已加载时）
    setInterval(function() {
        if (enrollmentStatsLoaded) {
            loadEnrollmentStats();
        }
    }, 5 * 60 * 1000);

    // ==================== 漏斗分析 ====================
    let funnelStatsLoaded = false;
    let funnelChart = null;
    let conversionTrendChart = null;

    // 初始化漏斗分析日期
    document.getElementById('funnel-chart-start-date').value = formatDate(thirtyDaysAgo);
    document.getElementById('funnel-chart-end-date').value = formatDate(today);

    // 漏斗分析 Tab 切换监听
    document.getElementById('funnel-stats-tab').addEventListener('shown.bs.tab', function() {
        if (!funnelStatsLoaded) {
            loadFunnelStatsAll();
        }
    });

    // 刷新按钮
    document.getElementById('btn-refresh-funnel-chart').addEventListener('click', function() {
        renderConversionTrendChart();
    });

    // 加载所有漏斗分析数据
    async function loadFunnelStatsAll() {
        funnelStatsLoaded = true;
        await Promise.all([
            loadFunnelAnalysis(),
            loadChannelFunnelAnalysis(),
            loadIssuerFunnelAnalysis(),
            renderConversionTrendChart()
        ]);
    }

    // 加载主漏斗数据
    async function loadFunnelAnalysis() {
        try {
            const response = await fetch('/admin/funnel-analysis');
            const data = await response.json();

            // 更新主漏斗卡片
            document.getElementById('funnel-total-users').textContent = data.funnel[0].count.toLocaleString();
            document.getElementById('funnel-card-users').textContent = data.funnel[1].count.toLocaleString();
            document.getElementById('funnel-enrollment-users').textContent = data.funnel[2].count.toLocaleString();

            document.getElementById('funnel-card-binding-rate').textContent = data.conversion_rates.card_binding_rate + '%';
            document.getElementById('funnel-enrollment-rate').textContent = data.conversion_rates.enrollment_conversion_rate + '%';
            document.getElementById('funnel-overall-rate').textContent = data.conversion_rates.overall_conversion_rate + '%';

            // 更新流失分析
            const totalUsers = data.funnel[0].count;
            document.getElementById('loss-users-without-cards').textContent = data.loss_analysis.users_without_cards.toLocaleString();
            document.getElementById('loss-users-no-enrollment').textContent = data.loss_analysis.users_with_cards_no_enrollment.toLocaleString();

            const lossWithoutCardsRate = totalUsers > 0 ? (data.loss_analysis.users_without_cards / totalUsers * 100).toFixed(1) : 0;
            const lossNoEnrollmentRate = totalUsers > 0 ? (data.loss_analysis.users_with_cards_no_enrollment / totalUsers * 100).toFixed(1) : 0;

            document.getElementById('loss-bar-without-cards').style.width = lossWithoutCardsRate + '%';
            document.getElementById('loss-bar-no-enrollment').style.width = lossNoEnrollmentRate + '%';

            // 绘制漏斗图
            renderFunnelChart(data.funnel);
        } catch (error) {
            console.error('Error loading funnel analysis:', error);
        }
    }

    // 绘制漏斗图
    function renderFunnelChart(funnelData) {
        const ctx = document.getElementById('funnelChart').getContext('2d');

        if (funnelChart) {
            funnelChart.destroy();
        }

        const labels = funnelData.map(item => item.level);
        const counts = funnelData.map(item => item.count);
        const rates = funnelData.map(item => item.rate);

        funnelChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '用户数',
                    data: counts,
                    backgroundColor: ['rgba(78, 115, 223, 0.8)', 'rgba(28, 200, 138, 0.8)', 'rgba(54, 185, 204, 0.8)'],
                    borderColor: ['#4e73df', '#1cc88a', '#36b9cc'],
                    borderWidth: 1,
                    borderRadius: 4
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const rate = rates[context.dataIndex];
                                return `${context.parsed.x.toLocaleString()} 人 (${rate}%)`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
    }

    // 加载渠道漏斗数据
    async function loadChannelFunnelAnalysis() {
        try {
            const response = await fetch('/admin/channel-funnel-analysis');
            const data = await response.json();

            renderChannelFunnelTable(data.channels);
        } catch (error) {
            console.error('Error loading channel funnel analysis:', error);
        }
    }

    // 渲染渠道转化表格
    function renderChannelFunnelTable(channels) {
        const tbody = document.querySelector('#channelFunnelTable tbody');
        tbody.innerHTML = '';

        if (channels.length === 0) {
            tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">暂无数据</td></tr>';
            return;
        }

        channels.forEach(channel => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${channel.label}</td>
                <td class="text-end">${channel.users.toLocaleString()}</td>
                <td class="text-end">${channel.enrollment_users.toLocaleString()}</td>
                <td class="text-end">
                    <span class="badge ${channel.enrollment_rate >= 50 ? 'bg-success' : channel.enrollment_rate >= 30 ? 'bg-warning' : 'bg-secondary'}">
                        ${channel.enrollment_rate}%
                    </span>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }

    // 加载发卡行漏斗数据
    async function loadIssuerFunnelAnalysis() {
        try {
            const response = await fetch('/admin/issuer-funnel-analysis');
            const data = await response.json();

            renderIssuerFunnelTable(data.issuers);
        } catch (error) {
            console.error('Error loading issuer funnel analysis:', error);
        }
    }

    // 渲染发卡行转化表格
    function renderIssuerFunnelTable(issuers) {
        const tbody = document.querySelector('#issuerFunnelTable tbody');
        tbody.innerHTML = '';

        if (issuers.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">暂无数据</td></tr>';
            return;
        }

        issuers.forEach(issuer => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${issuer.issuer_name}</td>
                <td class="text-end">${issuer.user_count.toLocaleString()}</td>
                <td class="text-end">${issuer.enrollment_users.toLocaleString()}</td>
                <td class="text-end">
                    <span class="badge ${issuer.enrollment_rate >= 50 ? 'bg-success' : issuer.enrollment_rate >= 30 ? 'bg-warning' : 'bg-secondary'}">
                        ${issuer.enrollment_rate}%
                    </span>
                </td>
                <td class="text-end">${issuer.avg_enrollments_per_user}</td>
            `;
            tbody.appendChild(tr);
        });
    }

    // 渲染转化率趋势图
    async function renderConversionTrendChart() {
        const startDate = document.getElementById('funnel-chart-start-date').value;
        const endDate = document.getElementById('funnel-chart-end-date').value;
        const chartContainer = document.getElementById('conversionTrendChart').parentElement;

        try {
            const response = await fetch(`/admin/conversion-trend?start_date=${startDate}&end_date=${endDate}`);
            const data = await response.json();

            const ctx = document.getElementById('conversionTrendChart').getContext('2d');

            if (conversionTrendChart) {
                conversionTrendChart.destroy();
            }

            // 检查数据是否为空
            if (!data.card_user_trend || data.card_user_trend.length === 0) {
                // 显示提示信息
                chartContainer.innerHTML = `
                    <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted">
                        <i class="fas fa-clock fa-3x mb-3"></i>
                        <p class="mb-2">${data.message || '数据正在生成中'}</p>
                        <small>定时任务每日凌晨5点更新，请稍后刷新</small>
                        <button class="btn btn-sm btn-outline-primary mt-3" onclick="location.reload()">
                            <i class="fas fa-sync-alt me-1"></i>刷新页面
                        </button>
                    </div>
                `;
                return;
            }

            // 确保 canvas 元素存在
            if (!document.getElementById('conversionTrendChart')) {
                chartContainer.innerHTML = '<canvas id="conversionTrendChart"></canvas>';
            }

            const labels = data.card_user_trend.map(item => item.date);
            const cardRates = data.card_user_trend.map(item => item.rate);
            const enrollmentRates = data.enrollment_user_trend.map(item => item.rate);

            conversionTrendChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '绑卡率',
                            data: cardRates,
                            borderColor: '#1cc88a',
                            backgroundColor: 'rgba(28, 200, 138, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3,
                            pointRadius: 2,
                            pointBackgroundColor: '#1cc88a'
                        },
                        {
                            label: '报名率（相对绑卡用户）',
                            data: enrollmentRates,
                            borderColor: '#36b9cc',
                            backgroundColor: 'rgba(54, 185, 204, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3,
                            pointRadius: 2,
                            pointBackgroundColor: '#36b9cc'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.dataset.label}: ${context.parsed.y}%`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45
                            }
                        },
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('Error loading conversion trend:', error);
        }
    }

    // ==================== 恢复上次激活的Tab（放在最后确保所有事件监听器已注册） ====================
    const savedTabId = localStorage.getItem(TAB_STORAGE_KEY);
    if (savedTabId) {
        const savedTab = document.getElementById(savedTabId);
        if (savedTab) {
            const tab = new bootstrap.Tab(savedTab);
            tab.show();
        }
    }
});
</script>
@endpush