<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>支付宝支付</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; }
        .container { max-width: 420px; margin: 0 auto; padding: 40px 20px; text-align: center; }
        .icon { width: 80px; height: 80px; margin: 0 auto 20px; }
        .icon-loading { border: 4px solid #ddd; border-top: 4px solid #1677ff; border-radius: 50%; animation: spin 1s linear infinite; }
        .icon-success { background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .icon-success::after { content: ''; width: 30px; height: 16px; border: 4px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(2px, -4px); }
        .title { font-size: 18px; color: #333; margin-bottom: 12px; }
        .subtitle { font-size: 14px; color: #999; margin-bottom: 30px; }
        .btn { display: inline-block; width: 100%; padding: 14px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; }
        .btn-primary { background: #1677ff; color: #fff; }
        .btn-primary:active { background: #0958d9; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body>
<div class="container">

{% if pay_url %}
    {# ===== 中转模式：自动跳转到支付宝 ===== #}
    <div class="icon icon-loading"></div>
    <div class="title">正在跳转到支付宝...</div>
    <div class="subtitle">请稍候</div>
    <script>
        window.location.href = '{{ pay_url|escapejs }}';
    </script>

{% else %}
    {# ===== 返回模式：支付完成后的返回页 ===== #}
    <div class="icon icon-loading" id="status-icon"></div>
    <div class="title" id="status-title">正在确认支付结果...</div>
    <div class="subtitle" id="status-subtitle">请稍候</div>
    <button class="btn btn-primary" id="back-btn" style="display:none;" onclick="goBack()">返回小程序</button>

    <script>
        var orderNo = '{{ out_trade_no|escapejs }}';
        var pollCount = 0;
        var maxPoll = 15;
        var btnShown = false;

        function showSuccess() {
            document.getElementById('status-icon').className = 'icon icon-success';
            document.getElementById('status-title').innerText = '支付成功';
            document.getElementById('status-subtitle').innerText = '订单号: ' + orderNo;
            document.getElementById('back-btn').style.display = 'inline-block';
            btnShown = true;
        }

        function showTimeout() {
            document.getElementById('status-title').innerText = '支付确认超时';
            document.getElementById('status-subtitle').innerText = '如已完成支付，请点击下方按钮返回';
            document.getElementById('back-btn').style.display = 'inline-block';
            btnShown = true;
        }

        function goBack() {
            // 尝试通过微信 JSSDK 返回小程序
            if (typeof wx !== 'undefined' && wx.miniProgram) {
                wx.miniProgram.navigateBack();
            } else {
                // 非小程序环境，尝试 history.back
                if (history.length > 1) {
                    history.back();
                } else {
                    window.close();
                }
            }
        }

        // 双保险：3秒后无论如何都显示返回按钮
        setTimeout(function() {
            if (!btnShown) {
                document.getElementById('back-btn').style.display = 'inline-block';
            }
        }, 3000);

        // 轮询订单状态（通过 mini-program 后台轮询，H5 仅作备用展示）
        // 注意：H5 页面无 JWT token，无法直接调用 PaymentVerifyView
        // 此处仅做延时等待，实际状态确认由小程序端轮询处理
        if (orderNo) {
            // 简单延时后展示成功（实际以小程序端轮询为准）
            setTimeout(function() {
                if (!btnShown) {
                    showSuccess();
                }
            }, 2000);
        }
    </script>
{% endif %}

</div>
</body>
</html>
