<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: layout(~{::title}, ~{::content})}">
<head>
    <title>首页</title>
</head>
<body>
    <div th:fragment="content">
        <!-- Welcome Section -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="card bg-primary text-white">
                    <div class="card-body text-center py-5">
                        <h1 class="display-4 mb-3">
                            <i class="fas fa-rocket me-3"></i>欢迎使用 AIGC Demo
                        </h1>
                        <p class="lead mb-4">现代化的Spring Boot应用，集成用户管理、支付系统等功能</p>
                        <div class="row justify-content-center">
                            <div class="col-md-8">
                                <div class="row text-center">
                                    <div class="col-md-4 mb-3">
                                        <i class="fas fa-users fa-2x mb-2"></i>
                                        <h5>用户管理</h5>
                                        <small>完整的用户注册、登录、权限管理</small>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <i class="fas fa-credit-card fa-2x mb-2"></i>
                                        <h5>支付系统</h5>
                                        <small>支持支付宝、PayPal多种支付方式</small>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <i class="fas fa-shield-alt fa-2x mb-2"></i>
                                        <h5>安全可靠</h5>
                                        <small>Spring Security安全框架保护</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="row mb-5">
            <div class="col-12">
                <h3 class="mb-4">
                    <i class="fas fa-bolt me-2"></i>快速操作
                </h3>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card h-100 text-center">
                    <div class="card-body">
                        <i class="fas fa-credit-card fa-3x text-primary mb-3"></i>
                        <h5 class="card-title">支付接入</h5>
                        <p class="card-text">创建新的支付订单，支持支付宝和PayPal</p>
                        <a th:href="@{/payment/create}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>创建支付
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3" sec:authorize="hasRole('ADMIN')">
                <div class="card h-100 text-center">
                    <div class="card-body">
                        <i class="fas fa-users fa-3x text-success mb-3"></i>
                        <h5 class="card-title">用户管理</h5>
                        <p class="card-text">管理系统用户，查看用户列表和权限</p>
                        <a th:href="@{/users}" class="btn btn-success">
                            <i class="fas fa-cog me-2"></i>管理用户
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3" sec:authorize="isAuthenticated()">
                <div class="card h-100 text-center">
                    <div class="card-body">
                        <i class="fas fa-history fa-3x text-info mb-3"></i>
                        <h5 class="card-title">支付记录</h5>
                        <p class="card-text">查看您的支付历史和交易详情</p>
                        <a th:href="@{/payment/history}" class="btn btn-info">
                            <i class="fas fa-list me-2"></i>查看记录
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Stats -->
        <div class="row mb-5" sec:authorize="hasRole('ADMIN')">
            <div class="col-12">
                <h3 class="mb-4">
                    <i class="fas fa-chart-bar me-2"></i>系统统计
                </h3>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stats-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">总用户数</h6>
                            <h3 class="mb-0" th:text="${userCount ?: 0}">0</h3>
                        </div>
                        <i class="fas fa-users stats-icon"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #198754, #146c43);">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">支付订单</h6>
                            <h3 class="mb-0" th:text="${paymentCount ?: 0}">0</h3>
                        </div>
                        <i class="fas fa-credit-card stats-icon"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #ffc107, #e0a800);">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">成功支付</h6>
                            <h3 class="mb-0" th:text="${successPaymentCount ?: 0}">0</h3>
                        </div>
                        <i class="fas fa-check-circle stats-icon"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #0dcaf0, #0aa2c0);">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">在线用户</h6>
                            <h3 class="mb-0" th:text="${onlineUserCount ?: 0}">0</h3>
                        </div>
                        <i class="fas fa-user-check stats-icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activities -->
        <div class="row" sec:authorize="isAuthenticated()">
            <div class="col-12">
                <h3 class="mb-4">
                    <i class="fas fa-clock me-2"></i>最近活动
                </h3>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-muted mb-3">最近支付</h6>
                                <div th:if="${recentPayments != null and !recentPayments.empty}">
                                    <div th:each="payment : ${recentPayments}" class="d-flex justify-content-between align-items-center mb-2">
                                        <div>
                                            <small class="text-muted" th:text="${payment.orderId}"></small>
                                            <div>
                                                <span th:text="${payment.currency}"></span>
                                                <span th:text="${payment.amount}"></span>
                                            </div>
                                        </div>
                                        <span th:if="${payment.status.name() == 'SUCCESS'}" class="badge bg-success" th:text="${payment.status.displayName}"></span>
                                        <span th:if="${payment.status.name() == 'PENDING'}" class="badge bg-warning" th:text="${payment.status.displayName}"></span>
                                        <span th:if="${payment.status.name() == 'FAILED'}" class="badge bg-danger" th:text="${payment.status.displayName}"></span>
                                    </div>
                                </div>
                                <div th:if="${recentPayments == null or recentPayments.empty}" class="text-muted">
                                    <i class="fas fa-inbox me-2"></i>暂无支付记录
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted mb-3">系统信息</h6>
                                <div class="mb-2">
                                    <small class="text-muted">当前用户：</small>
                                    <span sec:authentication="name" class="fw-bold"></span>
                                </div>
                                <div class="mb-2">
                                    <small class="text-muted">用户角色：</small>
                                    <span sec:authentication="authorities" class="fw-bold"></span>
                                </div>
                                <div class="mb-2">
                                    <small class="text-muted">登录时间：</small>
                                    <span class="fw-bold" th:text="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd HH:mm:ss')}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


