<?php

require __DIR__ . '/includes/bootstrap.php';

$total = total_paid();
$goal = (float)setting('goal_amount', '10000.00');
$items = donation_items(true);
$methods = payment_methods(true, true);
$paymentEnabled = count($methods) > 0;
$recentOrders = recent_paid_orders(10);
$topOrders = top_paid_orders(10);
$paymentVerified = false;
$returnedOrderNo = '';

if (($_GET['paid'] ?? '') === '1' && !empty($_GET['order_no'])) {
    $returnedOrderNo = (string)$_GET['order_no'];
    $order = find_order($returnedOrderNo);
    $paymentVerified = $order && $order['status'] === 'paid';
}

$title = setting('site_title');
$avatarUrl = setting('avatar_url', 'images/avatar.png');
if (!preg_match('#^https?://#', $avatarUrl)) {
    $avatarUrl = site_url($avatarUrl);
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= h($title) ?></title>
    <link rel="stylesheet" href="assets/style.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <meta name="description" content="<?= h(setting('seo_description')) ?>">
    <meta name="keywords" content="<?= h(setting('seo_keywords')) ?>">
    <meta name="author" content="<?= h(setting('seo_author')) ?>">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="<?= h(setting('canonical_url', site_url())) ?>">
    <meta property="og:type" content="website">
    <meta property="og:title" content="<?= h($title) ?>">
    <meta property="og:description" content="<?= h(setting('seo_description')) ?>">
    <meta property="og:url" content="<?= h(setting('canonical_url', site_url())) ?>">
    <meta property="og:site_name" content="<?= h($title) ?>">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="<?= h($title) ?>">
    <meta name="twitter:description" content="<?= h(setting('seo_description')) ?>">
    <link rel="icon" href="images/avatar.png" type="image/png">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": <?= json_encode($title, JSON_UNESCAPED_UNICODE) ?>,
        "description": <?= json_encode(setting('seo_description'), JSON_UNESCAPED_UNICODE) ?>,
        "url": <?= json_encode(setting('canonical_url', site_url()), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>,
        "potentialAction": {
            "@type": "DonateAction",
            "target": <?= json_encode(site_url(), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>
        }
    }
    </script>
</head>
<body>
    <div class="coins-container" id="coinsContainer"></div>

    <div class="main-container">
        <div class="begging-card">
            <div class="beggar-avatar-section">
                <div class="beggar-avatar" style="background-image:url('<?= h($avatarUrl) ?>');"></div>
                <div class="beggar-status">
                    <span class="status-dot"></span> <?= h(setting('status_text', '在线乞讨中')) ?>
                </div>
                <div class="beggar-name"><?= h(setting('beggar_name', '落魄的乞讨者')) ?></div>
            </div>

            <div class="begging-story">
                <div class="story-icon">📖</div>
                <p><?= h(setting('story')) ?></p>
            </div>

            <div class="fundraising-progress">
                <div class="progress-info">
                    <span>已筹：¥<?= h(money($total)) ?></span>
                    <span>目标：¥<?= h(money($goal)) ?></span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: <?= h(progress_width($total, $goal)) ?>"></div>
                </div>
                <div class="total-donated">
                    <span class="amount">¥<?= h(money($total)) ?></span>
                </div>
            </div>

            <div class="donation-section">
                <div class="donation-title">🍽️ <?= h(setting('donation_title', '请施主赏口饭吃')) ?></div>

                <div class="donation-items">
                    <?php foreach ($items as $item): ?>
                    <div class="donation-item" data-amount="<?= h($item['amount']) ?>" onclick="selectItem(this)">
                        <div class="item-icon"><?= h($item['icon']) ?></div>
                        <div class="item-name"><?= h($item['name']) ?></div>
                        <div class="item-price">¥<?= h(rtrim(rtrim(number_format((float)$item['amount'], 2, '.', ''), '0'), '.')) ?></div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <div style="text-align:center;">
                    <div class="custom-amount-btn" id="customAmountBtn" onclick="toggleCustomAmount()">
                        <span class="custom-btn-icon">✏️</span>
                        <span class="custom-btn-text">自定义金额</span>
                    </div>
                </div>

                <div class="custom-amount-wrapper" id="customAmountWrapper" style="display:none;">
                    <input type="number" id="customAmount" class="form-input" placeholder="输入金额" step="0.01" min="0.01" max="999999">
                </div>

                <div class="selected-amount-display" id="selectedAmountDisplay"></div>

                <div class="form-group">
                    <input type="text" id="donorName" class="form-input" placeholder="施主大名（选填）">
                </div>

                <div class="form-group">
                    <textarea id="donorMessage" class="form-input" placeholder="留言寄语（选填）" rows="3"></textarea>
                </div>

                <div class="payment-options">
                    <?php foreach ($methods as $index => $method): ?>
                    <label class="payment-option">
                        <input type="radio" name="payment_type" value="<?= h($method['type']) ?>" <?= $index === 0 ? 'checked' : '' ?>>
                        <span class="payment-label"><?= h(payment_public_label($method['type'], $method['label'])) ?></span>
                    </label>
                    <?php endforeach; ?>
                </div>

                <div class="pay-tip" id="payTip" style="<?= $paymentEnabled ? 'display:none;' : 'display:flex;' ?>">
                    <span class="pay-tip-icon">⚠️</span>
                    暂无已配置完成的支付方式
                </div>

                <button class="btn-donate" id="btnDonate" disabled><?= $paymentEnabled ? '立即施舍 🙏' : '暂无可用支付方式' ?></button>
            </div>
        </div>

        <div class="donor-list-wrap">
            <h3 class="donor-list-title">📜 施主芳名录</h3>

            <div class="tab-bar">
                <span class="tab-item active" data-tab="recent" onclick="switchTab('recent')">🕐 最新施舍</span>
                <span class="tab-item" data-tab="top" onclick="switchTab('top')">🏆 施舍榜单</span>
            </div>

            <div class="tab-content" id="tabRecent">
                <?php foreach ($recentOrders as $order): ?>
                <?php $region = order_region($order); ?>
                <div class="donor-card">
                    <div class="donor-icon">🙏</div>
                    <div class="donor-info">
                        <div class="donor-name"><?= h(donor_recent_name($order)) ?></div>
                        <?php if ($region !== ''): ?>
                        <div class="donor-region">📍 <?= h($region) ?></div>
                        <?php endif; ?>
                    </div>
                    <div class="donor-amount">¥<?= h(money($order['amount'])) ?></div>
                    <span class="donor-time"><?= h(display_time($order['paid_at'] ?: $order['created_at'])) ?></span>
                </div>
                <?php endforeach; ?>
            </div>

            <div class="tab-content" id="tabTop" style="display:none;">
                <?php foreach ($topOrders as $rank => $order): ?>
                <?php $region = order_region($order); ?>
                <div class="donor-card">
                    <div class="donor-rank">
                        <?php if ($rank < 3): ?>
                        <?= h(rank_icon($rank + 1)) ?>
                        <?php else: ?>
                        <span class="rank-num"><?= h($rank + 1) ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="donor-info">
                        <div class="donor-name"><?= h(donor_top_name($order)) ?></div>
                        <?php if ($region !== ''): ?>
                        <div class="donor-region">📍 <?= h($region) ?></div>
                        <?php endif; ?>
                    </div>
                    <span class="donor-amount">¥<?= h(money($order['amount'])) ?></span>
                    <span class="donor-time"><?= h(display_time($order['paid_at'] ?: $order['created_at'])) ?></span>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="footer-text">
            <p>💡 <?= h(setting('footer_note')) ?></p>
            <p><?= h(setting('footer_copyright')) ?></p>
        </div>
    </div>

    <div class="modal-overlay" id="successModal" style="display:none;">
        <div class="modal-content">
            <div class="modal-icon">🎉</div>
            <h3>感谢施舍！</h3>
            <p>好人有好报，愿你天天开心！</p>
            <button class="btn-modal-close" onclick="closeModal()">确定</button>
        </div>
    </div>

    <?php if (setting('music_enabled', '1') === '1' && setting('music_url') !== ''): ?>
    <div class="music-player" id="musicPlayer">
        <button class="music-btn" id="musicBtn" onclick="toggleMusic()">🎵</button>
        <audio id="bgMusic" loop autoplay>
            <source src="<?= h(setting('music_url')) ?>" type="audio/mpeg">
        </audio>
    </div>
    <?php endif; ?>

    <script>
        let musicPlaying = false;
        const bgMusic = document.getElementById('bgMusic');
        const musicBtn = document.getElementById('musicBtn');

        function toggleMusic() {
            if (!bgMusic) return;
            if (musicPlaying) {
                bgMusic.pause();
                musicBtn.textContent = '🎵';
                musicBtn.classList.remove('playing');
            } else {
                bgMusic.play().then(() => {
                    musicBtn.textContent = '🎶';
                    musicBtn.classList.add('playing');
                }).catch(e => {
                    alert('播放失败，请检查音乐链接');
                });
            }
            musicPlaying = !musicPlaying;
        }

        window.addEventListener('load', function() {
            if (bgMusic) {
                bgMusic.play().then(() => {
                    musicBtn.textContent = '🎶';
                    musicBtn.classList.add('playing');
                    musicPlaying = true;
                }).catch(e => {
                    document.addEventListener('click', function initOnClick() {
                        if (!musicPlaying) {
                            bgMusic.play().then(() => {
                                musicBtn.textContent = '🎶';
                                musicBtn.classList.add('playing');
                                musicPlaying = true;
                                document.removeEventListener('click', initOnClick);
                            }).catch(e => {});
                        }
                    });
                });
            }
        });

        let selectedAmount = 0;
        let paymentEnabled = <?= $paymentEnabled ? 'true' : 'false' ?>;
        let paymentVerified = <?= $paymentVerified ? 'true' : 'false' ?>;
        const returnedOrderNo = <?= json_encode($returnedOrderNo, JSON_UNESCAPED_UNICODE) ?>;
        const paidReturnBase = <?= json_encode(site_url('index.php?paid=1&order_no='), JSON_UNESCAPED_SLASHES) ?>;
        let activePayOrderNo = '';
        let paymentPollTimer = null;
        let paymentPollBusy = false;

        function normalizeAmount(value) {
            const amount = Number.parseFloat(value);
            if (!Number.isFinite(amount)) {
                return 0;
            }
            return Math.round(amount * 100) / 100;
        }

        function isCustomAmountActive() {
            const btn = document.getElementById('customAmountBtn');
            const wrapper = document.getElementById('customAmountWrapper');
            return btn.classList.contains('active') || wrapper.style.display === 'block';
        }

        function currentDonationAmount() {
            if (isCustomAmountActive()) {
                return normalizeAmount(document.getElementById('customAmount').value);
            }
            return normalizeAmount(selectedAmount);
        }

        function selectItem(el) {
            document.querySelectorAll('.donation-item').forEach(i => i.classList.remove('active'));
            el.classList.add('active');
            document.getElementById('customAmountBtn').classList.remove('active');
            document.getElementById('customAmountWrapper').style.display = 'none';
            document.getElementById('customAmount').value = '';
            selectedAmount = normalizeAmount(el.dataset.amount);
            updateDonateButton();
            updateSelectedAmountDisplay();
        }

        function toggleCustomAmount() {
            const wrapper = document.getElementById('customAmountWrapper');
            const btn = document.getElementById('customAmountBtn');
            if (wrapper.style.display === 'block') {
                wrapper.style.display = 'none';
                btn.classList.remove('active');
                selectedAmount = 0;
                document.querySelectorAll('.donation-item').forEach(i => i.classList.remove('active'));
            } else {
                document.querySelectorAll('.donation-item').forEach(i => i.classList.remove('active'));
                btn.classList.add('active');
                wrapper.style.display = 'block';
                document.getElementById('customAmount').focus();
                selectedAmount = 0;
            }
            updateDonateButton();
            updateSelectedAmountDisplay();
        }

        document.getElementById('customAmount').addEventListener('input', function() {
            selectedAmount = normalizeAmount(this.value);
            updateDonateButton();
            updateSelectedAmountDisplay();
        });

        function updateSelectedAmountDisplay() {
            const display = document.getElementById('selectedAmountDisplay');
            const amount = currentDonationAmount();
            if (amount > 0) {
                display.innerHTML = `已选择：<strong>¥${amount.toFixed(2)}</strong>`;
            } else {
                display.innerHTML = '';
            }
        }

        function updateDonateButton() {
            const btn = document.getElementById('btnDonate');
            const amount = currentDonationAmount();

            if (!paymentEnabled) {
                btn.disabled = true;
                btn.textContent = '暂无可用支付方式';
            } else if (amount > 0) {
                btn.disabled = false;
                btn.textContent = `立即施舍 ¥${amount.toFixed(2)} 🙏`;
            } else {
                btn.disabled = true;
                btn.textContent = '立即施舍 🙏';
            }
        }

        function checkActivePayment(showWaiting) {
            if (!activePayOrderNo || paymentPollBusy) {
                return;
            }
            paymentPollBusy = true;

            fetch('api/check_order.php?order_no=' + encodeURIComponent(activePayOrderNo) + '&_=' + Date.now(), {cache: 'no-store'})
                .then(res => res.json())
                .then(data => {
                    if (data.paid) {
                        if (paymentPollTimer) {
                            clearInterval(paymentPollTimer);
                            paymentPollTimer = null;
                        }
                        window.location.href = paidReturnBase + encodeURIComponent(activePayOrderNo);
                        return;
                    }
                    if (showWaiting) {
                        const btn = document.getElementById('btnDonate');
                        btn.textContent = '等待支付确认...';
                    }
                })
                .catch(() => {})
                .finally(() => {
                    paymentPollBusy = false;
                });
        }

        function startActivePaymentPolling(orderNo) {
            activePayOrderNo = orderNo || '';
            if (!activePayOrderNo) {
                return;
            }
            if (paymentPollTimer) {
                clearInterval(paymentPollTimer);
            }
            checkActivePayment(true);
            paymentPollTimer = setInterval(() => checkActivePayment(false), 3000);
        }

        window.addEventListener('focus', () => checkActivePayment(true));
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden) {
                checkActivePayment(true);
            }
        });

        document.getElementById('donorMessage').addEventListener('input', updateDonateButton);

        document.getElementById('btnDonate').addEventListener('click', function() {
            if (!paymentEnabled) {
                const tip = document.getElementById('payTip');
                tip.style.display = 'flex';
                setTimeout(() => { tip.style.display = 'none'; }, 3000);
                return;
            }

            const amount = currentDonationAmount();
            selectedAmount = amount;
            const donorName = document.getElementById('donorName').value.trim();
            const donorMessage = document.getElementById('donorMessage').value.trim();
            const paymentTypeEl = document.querySelector('input[name="payment_type"]:checked');
            const paymentType = paymentTypeEl ? paymentTypeEl.value : 'wxpay';

            if (!amount || amount <= 0) {
                alert('请选择或输入金额');
                return;
            }

            this.disabled = true;
            this.textContent = '正在跳转...';

            fetch('api/pay.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: new URLSearchParams({
                    amount: amount,
                    donor_name: donorName,
                    donor_message: donorMessage,
                    payment_type: paymentType
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    if (data.open_url) {
                        startActivePaymentPolling(data.order_no);
                        this.textContent = '等待支付确认...';
                        setTimeout(() => {
                            window.location.href = data.open_url;
                        }, 120);
                        return;
                    }
                    window.location.href = data.pay_url;
                } else {
                    alert(data.message || '支付请求失败');
                    this.disabled = false;
                    this.textContent = `立即施舍 ¥${amount.toFixed(2)} 🙏`;
                }
            })
            .catch(err => {
                alert('网络错误，请重试');
                this.disabled = false;
                this.textContent = `立即施舍 ¥${amount.toFixed(2)} 🙏`;
            });
        });

        updateDonateButton();

        if (!paymentVerified && returnedOrderNo) {
            startActivePaymentPolling(returnedOrderNo);
            const btn = document.getElementById('btnDonate');
            btn.disabled = true;
            btn.textContent = '正在确认支付结果...';
        }

        function closeModal() {
            document.getElementById('successModal').style.display = 'none';
        }

        if (paymentVerified) {
            document.getElementById('successModal').style.display = 'flex';
            window.history.replaceState({}, document.title, window.location.pathname);
        }

        function switchTab(tab) {
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
            document.querySelector('.tab-item[data-tab="' + tab + '"]').classList.add('active');
            document.getElementById(tab === 'recent' ? 'tabRecent' : 'tabTop').style.display = 'block';
        }

        function createFallingCoin() {
            const container = document.getElementById('coinsContainer');
            const coin = document.createElement('div');
            coin.className = 'falling-coin';
            coin.style.left = Math.random() * 100 + '%';
            coin.style.fontSize = (20 + Math.random() * 20) + 'px';
            coin.style.animationDuration = (3 + Math.random() * 4) + 's';
            coin.style.opacity = 0.3 + Math.random() * 0.5;
            coin.textContent = Math.random() > 0.5 ? '💰' : '💵';
            container.appendChild(coin);

            setTimeout(() => {
                coin.remove();
            }, 7000);
        }

        setInterval(createFallingCoin, 800);
        for (let i = 0; i < 5; i++) {
            setTimeout(createFallingCoin, i * 200);
        }
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
