@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>
</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>
</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;
    }
    .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() {
    // 设置默认日期范围（过去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);
});
</script>
@endpush