<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#667eea">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>我的钱包 - KK搜索任务平台</title>
    <link rel="manifest" href="mobile-manifest.json">
    <link rel="preconnect" href="https://ybrveusbwjusnrzgfnok.supabase.co">
    <link rel="dns-prefetch" href="https://ybrveusbwjusnrzgfnok.supabase.co">
    <link rel="stylesheet" href="mobile-optimizations.css">
    <link rel="stylesheet" href="theme.css">
    <!-- 紧急数据库修复器 -->
    <script src="emergency-database-fix.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar .back-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
        
        .navbar .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
        
        .navbar .title {
            color: white;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }
        
        .navbar .title i {
            margin-right: 8px;
        }
        
        /* 钱包卡片区域 */
        .wallet-overview {
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .wallet-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 28px 24px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .wallet-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
        }
        
        .wallet-balance {
            text-align: center;
            margin-bottom: 28px;
        }
        
        .balance-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .balance-amount {
            color: white;
            font-size: 42px;
            font-weight: 700;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            margin-bottom: 4px;
            letter-spacing: -1px;
        }
        
        .sync-status {
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 8px;
        }
        
        .action-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        
        .action-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 16px;
            padding: 16px 8px;
            color: white;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(10px);
        }
        
        .action-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        .action-btn:active {
            transform: translateY(-1px) scale(0.98);
        }
        
        .action-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 4px;
        }
        
        .action-btn.primary .action-icon {
            background: linear-gradient(135deg, #ff6b6b, #feca57);
        }
        
        /* 主要内容区域 */
        .main-content {
            background: white;
            border-radius: 24px 24px 0 0;
            min-height: calc(100vh - 300px);
            padding: 24px 20px 40px;
            position: relative;
        }
        
        .content-section {
            margin-bottom: 24px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 700;
            color: #2d3748;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .refresh-btn {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 8px 16px;
            color: #667eea;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .refresh-btn:hover {
            background: #edf2f7;
            transform: translateY(-1px);
        }
        
        .refresh-btn:active {
            transform: translateY(0);
        }
        
        /* 交易记录卡片 */
        .transactions-card {
            background: white;
            border-radius: 16px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }
        
        .transaction-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #f1f5f9;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .transaction-item:last-child {
            border-bottom: none;
        }
        
        .transaction-item:hover {
            background: #f8fafc;
        }
        
        .transaction-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .transaction-item:hover::before {
            opacity: 1;
        }
        
        .transaction-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .transaction-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        
        .transaction-info h4 {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 4px;
        }
        
        .transaction-time {
            font-size: 13px;
            color: #718096;
        }
        
        .transaction-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
        }
        
        .transaction-amount {
            font-size: 16px;
            font-weight: 700;
            color: #ef4444;
        }
        .amount-positive { color: #10b981; }
        .amount-negative { color: #ef4444; }
        .transaction-note { font-size: 12px; color: #9ca3af; }
        
        .transaction-status {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background: #fef3c7;
            color: #d97706;
        }
        
        .status-approved {
            background: #d1fae5;
            color: #059669;
        }
        
        .status-rejected {
            background: #fee2e2;
            color: #dc2626;
        }
        
        .status-completed {
            background: #e0e7ff;
            color: #7c3aed;
        }
        
        /* 说明卡片 */
        .info-card {
            background: white;
            border-radius: 16px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            padding: 20px;
        }
        
        .info-list {
            list-style: none;
        }
        
        .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
            padding: 12px;
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .info-item:last-child {
            margin-bottom: 0;
        }
        
        .info-item:hover {
            background: #f8fafc;
        }
        
        .info-dot {
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            margin: 8px 16px 0 0;
            flex-shrink: 0;
        }
        
        .info-text {
            font-size: 14px;
            color: #4a5568;
            line-height: 1.6;
            font-weight: 500;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #6b7280;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            color: #d1d5db;
        }
        
        .empty-state h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #374151;
        }
        
        .empty-state p {
            font-size: 14px;
            margin-bottom: 20px;
        }
        
        .empty-state .retry-btn {
            background: #667eea;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .empty-state .retry-btn:hover {
            background: #5a67d8;
            transform: translateY(-1px);
        }
        
        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }
        
        .loader {
            width: 40px;
            height: 40px;
            border: 4px solid #e2e8f0;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 脉冲动画 */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .sync-icon {
            animation: pulse 2s infinite;
        }
        
        /* 动画效果 */
        .fade-in {
            animation: fadeInUp 0.6s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .wallet-card {
                padding: 20px 16px;
            }
            
            .balance-amount {
                font-size: 36px;
            }
            
            .action-buttons {
                gap: 8px;
            }
            
            .action-btn {
                padding: 12px 6px;
                font-size: 12px;
            }
            
            .action-icon {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }
        }
        
        @supports(padding: max(0px)) {
            .navbar {
                padding-top: max(16px, env(safe-area-inset-top));
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <a href="javascript:history.back()" class="back-btn">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="title">
            <i class="fas fa-wallet"></i>
            我的钱包
        </h1>
        <div style="width: 44px;"></div>
    </nav>
    
    <!-- 钱包总览 -->
    <div class="wallet-overview fade-in">
        <div class="wallet-card">
            <div class="wallet-balance">
                <div class="balance-label">总资产 (元)</div>
                <div class="balance-amount" id="wallet-balance">0.00</div>
                <div class="sync-status">
                    <i class="fas fa-sync-alt sync-icon"></i>
                    <span id="sync-status-text">正在同步数据...</span>
                </div>
            </div>
            
            <div class="action-buttons">
                <a href="#" class="action-btn" data-action="recharge">
                    <div class="action-icon">
                        <i class="fas fa-credit-card"></i>
                    </div>
                    <span>充值</span>
                </a>
                <a href="withdrawal.html" class="action-btn primary" data-action="withdraw">
                    <div class="action-icon">
                        <i class="fas fa-hand-holding-usd"></i>
                    </div>
                    <span>提现</span>
                </a>
                <a href="#" class="action-btn" data-action="bankcard">
                    <div class="action-icon">
                        <i class="fas fa-university"></i>
                    </div>
                    <span>银行卡</span>
                </a>
                <a href="#" class="action-btn" data-action="details">
                    <div class="action-icon">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <span>明细</span>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 主要内容区域 -->
    <main class="main-content fade-in" style="animation-delay: 0.2s;">
        <!-- 交易记录 -->
        <div class="content-section">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-history"></i>
                    交易记录
                </h2>
                <button class="refresh-btn" onclick="refreshTransactions()">
                    <i class="fas fa-sync-alt"></i>
                    刷新
                </button>
            </div>
            
            <div class="transactions-card">
                <div id="transactions-container">
                    <div class="loading">
                        <div class="loader"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 钱包说明 -->
        <div class="content-section">
            <div class="info-card">
                <h3 class="section-title" style="margin-bottom: 16px;">
                    <i class="fas fa-info-circle"></i>
                    钱包说明
                </h3>
                <ul class="info-list">
                    <li class="info-item">
                        <div class="info-dot"></div>
                        <div class="info-text">任务收益将自动转入钱包余额</div>
                    </li>
                    <li class="info-item">
                        <div class="info-dot"></div>
                        <div class="info-text">提现需满足最低10元起提条件</div>
                    </li>
                    <li class="info-item">
                        <div class="info-dot"></div>
                        <div class="info-text">提现将在1-3个工作日内到账</div>
                    </li>
                    <li class="info-item">
                        <div class="info-dot"></div>
                        <div class="info-text">如有问题请联系客服处理</div>
                    </li>
                </ul>
            </div>
        </div>
    </main>

    <!-- 保留原有的JavaScript功能 -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script defer src="mobile-optimizer.js"></script>
    <script defer src="mobile-interactions.js"></script>
    <script>
        // 统一获取 Supabase 客户端（优先紧急修复器）
        async function ensureClient(){
            try{
                // 1) 紧急修复器客户端
                let c = (typeof window.getEmergencyClient==='function') ? window.getEmergencyClient() : null;
                if(!c && typeof window.emergencyInitDatabase==='function'){
                    await window.emergencyInitDatabase();
                    c = (typeof window.getEmergencyClient==='function') ? window.getEmergencyClient() : null;
                }
                // 2) 退化：已有 supabase 客户端
                if(!c && window.supabase && typeof window.supabase.from==='function') c = window.supabase;
                // 3) 最后兜底：若仅加载了 SDK，没有实例，则用公开 anon key 创建
                if(!c && window.supabase && typeof window.supabase.createClient==='function'){
                    const SUPABASE_URL = 'https://ybrveusbwjusnrzgfnok.supabase.co';
                    const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlicnZldXNid2p1c25yemdmbm9rIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTY0ODU1NjIsImV4cCI6MjA3MjA2MTU2Mn0.JKPSUli-q9wRuDagE6kwltLk9XgfygE8yznm-Ca82Qk';
                    c = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
                }
                if(c){ window.supabase = c; }
                return c;
            }catch(e){ console.warn('ensureClient 失败:', e&&e.message); return null; }
        }
        // 兼容旧初始化函数
        async function initSupabase(){ return !!(await ensureClient()); }

        // 查询超时兜底
        async function withTimeout(promise, ms){
            return Promise.race([
                promise,
                new Promise((_,rej)=> setTimeout(()=> rej(new Error('请求超时，请稍后重试')), ms||8000))
            ]);
        }
        
        // 计算实际余额
        async function calculateActualBalance() {
            try {
                // 获取用户信息
                const userDataStr = localStorage.getItem("currentUser");
                if (!userDataStr) {
                    console.warn('未找到用户信息');
                    return 0;
                }

                const userData = JSON.parse(userDataStr);
                const userId = userData.id || userData.用户ID;
                
                if (!userId) {
                    console.warn('未找到用户ID');
                    return 0;
                }

                const c = await ensureClient();
                if(!c) throw new Error('客户端未就绪');
                // 获取所有收益记录
                const { data: dbEarnings, error: earningsError } = await withTimeout(
                    c
                    .from('earnings')
                    .select('*')
                    .eq('user_id', userId)
                    .or('status.eq.已完成,status.eq.completed'), 8000);

                if (earningsError) {
                    console.error('获取收益记录失败:', earningsError);
                    return 0;
                }

                // 合并本地收益记录（localStorage中的临时数据）
                let earnings = dbEarnings || [];
                try {
                    console.log('🔍 检查localStorage中的本地收益记录...');
                    const localEarnings = [];
                    for (let i = 0; i < localStorage.length; i++) {
                        const key = localStorage.key(i);
                        if (key && key.startsWith('earning_')) {
                            try {
                                const earning = JSON.parse(localStorage.getItem(key));
                                const uid = earning.user_id || earning.userId || earning.用户ID;
                                if (String(uid) === String(userId)) {
                                    // 检查状态是否为已完成
                                    const status = String(earning.status || '').toLowerCase();
                                    if (status === '已完成' || status === 'completed') {
                                        localEarnings.push(earning);
                                        console.log(`✅ 找到本地收益: ${key}, 金额: ${earning.amount}`);
                                    }
                                }
                            } catch (e) {
                                console.warn(`解析本地收益失败: ${key}`, e);
                            }
                        }
                    }
                    if (localEarnings.length > 0) {
                        console.log(`📦 合并 ${localEarnings.length} 条本地收益记录`);
                        earnings = earnings.concat(localEarnings);
                    }
                } catch (e) {
                    console.warn('读取本地收益记录失败:', e);
                }

                // 计算总收益
                let totalEarnings = 0;
                earnings.forEach(earning => {
                    const amount = parseFloat(earning.amount || earning.金额 || 0);
                    totalEarnings += amount;
                });

                // 获取提现记录
                const { data: withdrawals, error: withdrawalsError } = await withTimeout(
                    c
                    .from('withdrawals')
                    .select('*')
                    .eq('user_id', userId), 8000);

                if (withdrawalsError) {
                    console.error('获取提现记录失败:', withdrawalsError);
                    return 0;
                }

                // 计算总提现（统计：已完成/已批准/已支付/审核中(pending)；忽略：已拒绝）
                let totalWithdrawn = 0;
                withdrawals?.forEach(withdrawal => {
                    const status = String(withdrawal.status || '').toLowerCase();
                    // 统计：completed/approved/paid/pending
                    if (status === '已完成' || status === 'completed' || 
                        status === '已批准' || status === 'approved' ||
                        status === '已支付' || status === 'paid' ||
                        status === '审核中' || status === 'pending') {
                        const amount = parseFloat(withdrawal.amount || withdrawal.金额 || 0);
                        totalWithdrawn += amount;
                        console.log(`✅ 统计提现: ${amount}元, 状态: ${status}`);
                    } else {
                        console.log(`⏭️ 跳过提现: ${withdrawal.amount}元, 状态: ${status}`);
                    }
                });

                // 计算实际余额
                const actualBalance = totalEarnings - totalWithdrawn;
                console.log('计算结果:', {
                    totalEarnings,
                    totalWithdrawn,
                    actualBalance
                });

                return actualBalance;
            } catch (error) {
                console.error('计算余额失败:', error);
                return 0;
            }
        }

        // 更新余额显示
        async function updateBalance() {
            try {
                // 显示同步动画
                document.getElementById('sync-status-text').textContent = '正在同步数据...';
                document.querySelector('.sync-icon').style.animation = 'spin 1s linear infinite';
                
                const balance = await calculateActualBalance();
                
                // 更新余额显示
                const balanceElement = document.getElementById("wallet-balance");
                if (balanceElement) {
                    animateNumber(balanceElement, parseFloat(balanceElement.textContent) || 0, balance, 1000);
                    console.log("余额已更新:", balance);
                }
                
                // 更新本地存储
                const userDataStr = localStorage.getItem("currentUser");
                if (userDataStr) {
                    try {
                        const userData = JSON.parse(userDataStr);
                        userData.wallet_balance = balance;
                        userData.钱包余额 = balance;
                        localStorage.setItem('currentUser', JSON.stringify(userData));
                        localStorage.setItem('wallet_balance', balance.toString());
                        localStorage.setItem('钱包余额', balance.toString());
                        console.log("已同步余额到localStorage:", balance);
                        
                        // 🔄 触发钱包余额更新事件，通知其他页面同步数据
                        try {
                            window.dispatchEvent(new CustomEvent('walletBalanceUpdated', {
                                detail: { 
                                    balance: balance,
                                    source: 'wallet_page',
                                    timestamp: new Date().toISOString()
                                }
                            }));
                            console.log('✅ 已触发钱包余额更新事件');
                        } catch (eventError) {
                            console.warn('触发更新事件失败:', eventError);
                        }
                    } catch (syncError) {
                        console.warn("同步余额到localStorage失败:", syncError);
                    }
                }
                
                // 停止同步动画
                document.querySelector('.sync-icon').style.animation = '';
                document.getElementById('sync-status-text').textContent = '数据已同步';
            } catch (error) {
                console.error("更新余额失败:", error);
                document.getElementById('sync-status-text').textContent = '同步失败';
                document.querySelector('.sync-icon').style.animation = '';
            }
        }
        
        // 数字动画更新
        function animateNumber(element, fromValue, toValue, duration = 1000) {
            const startTime = performance.now();
            const difference = toValue - fromValue;
            
            function updateNumber(currentTime) {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / duration, 1);
                
                // 使用缓动函数
                const easeOutQuart = 1 - Math.pow(1 - progress, 4);
                const currentValue = fromValue + (difference * easeOutQuart);
                
                element.textContent = Math.max(0, currentValue).toFixed(2);
                
                if (progress < 1) {
                    requestAnimationFrame(updateNumber);
                } else {
                    element.textContent = Math.max(0, toValue).toFixed(2);
                }
            }
            
            requestAnimationFrame(updateNumber);
        }
        
        // 加载交易记录
        async function loadTransactions() {
            const container = document.getElementById('transactions-container');
            if (!container) return;
            
            try {
                // 显示加载状态
                container.innerHTML = `
                    <div class="loading">
                        <div class="loader"></div>
                    </div>
                `;
                let timedOut=false; const tm=setTimeout(()=>{
                    timedOut=true;
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fas fa-exclamation-triangle"></i>
                            <h3>加载超时</h3>
                            <p>网络波动或服务器繁忙，请稍后重试</p>
                            <button class="retry-btn" onclick="loadTransactions()">重新加载</button>
                        </div>
                    `;
                }, 8000);
                
                // 获取当前用户信息
                const userDataStr = localStorage.getItem("currentUser");
                if (!userDataStr) {
                    clearTimeout(tm);
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fas fa-user-lock"></i>
                            <h3>未登录</h3>
                            <p>请先登录查看交易记录</p>
                        </div>
                    `;
                    return;
                }
                
                const userData = JSON.parse(userDataStr);
                const userId = userData.id || userData.用户ID;
                
                if (!userId) {
                    clearTimeout(tm);
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fas fa-exclamation-triangle"></i>
                            <h3>用户信息不完整</h3>
                            <p>请重新登录</p>
                        </div>
                    `;
                    return;
                }
                
                // 查询提现记录 + 收益记录（合并展示）
                console.log('查询用户ID:', userId);
                const c = await ensureClient(); if(!c) throw new Error('客户端未就绪');
                const [withdrawalsRes, earningsRes] = await Promise.all([
                    withTimeout(
                        c
                            .from('withdrawals')
                            .select('*')
                            .eq('user_id', userId)
                            .order('created_at', { ascending: false }), 8000),
                    withTimeout(
                        c
                            .from('earnings')
                            .select('*')
                            .eq('user_id', userId)
                            .order('created_at', { ascending: false }), 8000)
                ]);

                const withdrawals = withdrawalsRes.data || [];
                const earnings = earningsRes.data || [];
                const error = withdrawalsRes.error || earningsRes.error;
                if (error) {
                    clearTimeout(tm);
                    console.error('查询提现记录失败:', error);
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fas fa-exclamation-triangle"></i>
                            <h3>加载失败</h3>
                            <p>${error.message}</p>
                            <button class="retry-btn" onclick="loadTransactions()">重新加载</button>
                        </div>
                    `;
                    return;
                }
                
                // 组装合并的交易列表
                const mappedWithdrawals = withdrawals.map(w => ({
                    type: 'withdrawal',
                    id: w.id,
                    amount: -Math.abs(parseFloat(w.amount || 0)),
                    created_at: w.created_at,
                    status: w.status,
                    raw: w
                }));
                const mappedEarnings = earnings.map(e => ({
                    type: 'earning',
                    id: e.id,
                    amount: Math.abs(parseFloat(e.amount || 0)),
                    created_at: e.created_at,
                    status: e.status || '已完成',
                    reward_type: e.reward_type,
                    task_name: e.task_name,
                    raw: e
                }));
                
                // 如果存在“提现退回”记录，会显示为正数到账
                const transactions = mappedWithdrawals.concat(mappedEarnings)
                    .sort((a,b)=> new Date(b.created_at) - new Date(a.created_at));

                if (!transactions || transactions.length === 0) {
                    clearTimeout(tm);
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fas fa-chart-line"></i>
                            <h3>暂无交易记录</h3>
                            <p>您还没有进行过任何交易</p>
                        </div>
                    `;
                    return;
                }
                
                // 渲染交易记录
                const transactionsHTML = transactions.map(t => {
                    const time = new Date(t.created_at).toLocaleString('zh-CN');
                    if (t.type === 'withdrawal') {
                        const status = getStatusText(t.status);
                        const statusClass = getStatusClass(t.status);
                        const absAmount = Math.abs(t.amount).toFixed(2);
                        const note = (String(t.status).toLowerCase()==='rejected') ? '<div class="transaction-note">已拒绝，不扣款</div>' : '';
                        return `
                            <div class="transaction-item">
                                <div class="transaction-left">
                                    <div class="transaction-icon">
                                        <i class="fas fa-hand-holding-usd"></i>
                                    </div>
                                    <div class="transaction-info">
                                        <h4>提现申请</h4>
                                        <div class="transaction-time">${time}</div>
                                    </div>
                                </div>
                                <div class="transaction-right">
                                    <div class="transaction-amount amount-negative">-¥${absAmount}</div>
                                    <div class="transaction-status ${statusClass}">${status}</div>
                                    ${note}
                                </div>
                            </div>
                        `;
                    } else {
                        const title = t.reward_type === '提现退回' ? '提现退回' : (t.task_name || '任务收益');
                        const amount = Math.abs(t.amount).toFixed(2);
                        return `
                            <div class="transaction-item">
                                <div class="transaction-left">
                                    <div class="transaction-icon">
                                        <i class="fas fa-coins"></i>
                                    </div>
                                    <div class="transaction-info">
                                        <h4>${title}</h4>
                                        <div class="transaction-time">${time}</div>
                                    </div>
                                </div>
                                <div class="transaction-right">
                                    <div class="transaction-amount amount-positive">+¥${amount}</div>
                                    <div class="transaction-status status-completed">已到账</div>
                                </div>
                            </div>
                        `;
                    }
                }).join('');
                
                clearTimeout(tm);
                container.innerHTML = transactionsHTML;
                
            } catch (error) {
                console.error('加载交易记录失败:', error);
                container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-exclamation-triangle"></i>
                        <h3>加载失败</h3>
                        <p>请检查网络连接后重试</p>
                        <button class="retry-btn" onclick="loadTransactions()">重新加载</button>
                    </div>
                `;
            }
        }
        
        // 获取状态文本
        function getStatusText(status) {
            switch (status) {
                case 'pending': return '审核中';
                case 'approved': return '已通过';
                case 'rejected': return '已拒绝';
                case 'completed': return '已打款';
                default: return '未知状态';
            }
        }
        
        // 获取状态样式类
        function getStatusClass(status) {
            switch (status) {
                case 'pending': return 'status-pending';
                case 'approved': return 'status-approved';
                case 'rejected': return 'status-rejected';
                case 'completed': return 'status-completed';
                default: return 'status-pending';
            }
        }
        
        // 刷新交易记录
        function refreshTransactions() {
            // 添加动画效果
            const refreshBtn = document.querySelector('.refresh-btn i');
            refreshBtn.style.animation = 'spin 1s linear infinite';
            
            loadTransactions().finally(() => {
                setTimeout(() => {
                    refreshBtn.style.animation = '';
                }, 1000);
            });
        }
        
        // 显示Toast消息
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            const bgColor = {
                'success': '#10b981',
                'error': '#ef4444',
                'info': '#374151'
            }[type] || '#374151';
            
            toast.style.cssText = `
                position: fixed;
                top: 100px;
                left: 50%;
                transform: translateX(-50%);
                background: ${bgColor};
                color: white;
                padding: 12px 24px;
                border-radius: 12px;
                font-size: 14px;
                font-weight: 500;
                z-index: 1000;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
                opacity: 0;
                transition: opacity 0.3s ease;
            `;
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            requestAnimationFrame(() => {
                toast.style.opacity = '1';
            });
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    if (document.body.contains(toast)) {
                        document.body.removeChild(toast);
                    }
                }, 300);
            }, 3000);
        }
        
        // 页面加载完成后执行
        document.addEventListener("DOMContentLoaded", async function() {
            console.log("DOM加载完成");
            
            try {
                // 初始化 Supabase
                await initSupabase();
                
                // 初始化时更新余额
                await updateBalance();
                
                // 加载交易记录
                await loadTransactions();
                
                // 刷新频率控制
                let lastRefreshAt = Date.now();
                async function refreshDataIfStale(minIntervalMs){
                    try{
                        const now = Date.now();
                        if(now - lastRefreshAt < (minIntervalMs||0)) return;
                        await updateBalance();
                        await loadTransactions();
                        lastRefreshAt = Date.now();
                    }catch(_){ }
                }
                
                // 定时刷新：仅在页面可见时，每2分钟刷新一次
                setInterval(async () => {
                    if(document.hidden) return;
                    await refreshDataIfStale(0);
                }, 120000); // 每120秒刷新一次
                
                // 页面获得焦点时自动刷新
                window.addEventListener('focus', async function() {
                    console.log('页面获得焦点，刷新数据...');
                    await refreshDataIfStale(60000); // 距上次小于60秒则跳过，避免过于频繁
                });
                
                // 页面可见性变化时刷新
                document.addEventListener('visibilitychange', async function() {
                    if (!document.hidden) {
                        console.log('页面变为可见，刷新数据...');
                        await refreshDataIfStale(0);
                    }
                });
                
                // 监听钱包余额更新事件（仅响应外部页面的更新）
                window.addEventListener('walletBalanceUpdated', async function(event) {
                    console.log('收到钱包余额更新事件:', event.detail);
                    // 🔒 如果是当前页面触发的，忽略，避免无限循环
                    if (event.detail && event.detail.source === 'wallet_page') {
                        console.log('⏭️ 跳过：本页面触发的更新事件');
                        return;
                    }
                    console.log('✅ 响应外部页面的余额更新');
                    await refreshDataIfStale(0);
                });
                
                // 按钮点击事件
                document.querySelectorAll(".action-btn").forEach(btn => {
                    btn.addEventListener("click", function(e) {
                        const action = this.getAttribute("data-action");
                        
                        // 添加点击反馈
                        this.style.transform = 'translateY(-1px) scale(0.98)';
                        setTimeout(() => {
                            this.style.transform = '';
                        }, 150);
                        
                        if (action === "recharge") {
                            e.preventDefault();
                            showToast("充值功能开发中，敬请期待！", 'info');
                        } else if (action === "bankcard") {
                            e.preventDefault();
                            showToast("银行卡管理功能开发中", 'info');
                        } else if (action === "details") {
                            e.preventDefault();
                            showToast("交易明细功能开发中", 'info');
                        } else if (action === "withdraw") {
                            showToast("正在跳转到提现页面...", 'info');
                        }
                    });
                });
                
                // 设置页面动画
                setTimeout(() => {
                    document.body.classList.add('fade-in');
                }, 50);

                // 启用原生下拉刷新
                try{
                    enablePullToRefresh({
                        onRefresh: async ()=>{ try{ await updateBalance(); await loadTransactions(); showToast && showToast('已刷新'); }catch(_){ } }
                    });
                }catch(_){ }
                // 懒加载图片（如有）
                try{ lazyLoadImages && lazyLoadImages(); }catch(_){ }
                
            } catch (error) {
                console.error('页面初始化失败:', error);
                showToast('页面初始化失败: ' + error.message, 'error');
            }
        });
    </script>
</body>
</html>