<!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, viewport-fit=cover">
    <link rel="manifest" href="data:application/json;base64,ewogICJuYW1lIjogIuW/g+aLv+erryWcupAiLAogICJzaG9ydF9uYW1lIjogIuW/g+aLvyIsCiAgImRlc2NyaXB0aW9uIjogIuivsOmXuuOAgeS6pOaLieOAgepghumHjuS8muiDvSIsCiAgInN0YXJ0X3VybCI6ICIvIiwKICAiZGlzcGxheSI6ICJzdGFuZGFsb25lIiwKICAib3JpZW50YXRpb24iOiAicG9ydHJhaXQiLAogICJiYWNrZ3JvdW5kX2NvbG9yIjogIiNmYWY1ZjAiLAogICJ0aGVtZV9jb2xvciI6ICIjZmFmNWYwIiwKICAiaWNvbnMiOiBbCiAgICB7ICJzcmMiOiAiL2ljb24tMTkyLnBuZyIsICJzaXplcyI6ICIxOTJ4MTkyIiwgInR5cGUiOiAiaW1hZ2UvcG5nIiwgInB1cnBvc2UiOiAiYW55IiB9LAogICAgeyAic3JjIjogIi9pY29uLTUxMi5wbmciLCAic2l6ZXMiOiAiNTEyeDUxMiIsICJ0eXBlIjogImltYWdlL3BuZyIsICJwdXJwb3NlIjogImFueSIgfQogIF0KfQ==">
    <link rel="apple-touch-icon" href="/icon-192.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="心愿论坛">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#faf5f0">
    <title>心愿论坛 · 许愿池</title>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <style>
        /* ... 您的所有 CSS 样式 ... */
        *{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;-webkit-tap-highlight-color:transparent}
        body{background:#faf5f0;min-height:100vh;display:flex;justify-content:center;padding:12px 8px;-webkit-text-size-adjust:100%}
        #app{max-width:600px;width:100%;background:#fffcf9;border-radius:32px;box-shadow:0 12px 30px rgba(180,130,100,0.08);padding:18px 14px 24px;border:1px solid #f0e3d8}
        h1{font-size:24px;font-weight:600;color:#4a3729;display:flex;align-items:center;gap:6px;margin-bottom:14px;letter-spacing:-0.2px}
        h1 small{font-size:14px;font-weight:400;color:#b8a091;margin-left:4px}
        .user-bar{display:flex;justify-content:space-between;align-items:center;background:#f7efe8;padding:8px 14px;border-radius:36px;margin-bottom:14px;border:1px solid #e5d6cb;min-height:44px}
        .user-info{display:flex;align-items:center;gap:8px}
        .user-avatar{width:32px;height:32px;background:#e6d3c4;border-radius:40px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#5e4a38;flex-shrink:0}
        .username{font-weight:500;font-size:15px;color:#3d2c1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
        .user-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
        .btn{border:none;background:transparent;padding:5px 12px;border-radius:30px;font-size:13px;font-weight:500;cursor:pointer;transition:0.15s;color:#3d2c1e;background:#eee4db;white-space:nowrap;touch-action:manipulation;-webkit-user-select:none;user-select:none}
        .btn:active{transform:scale(0.96)}
        .btn-primary{background:#c9b09b;color:#2f2117}.btn-primary:active{background:#b89f89}
        .btn-outline{background:transparent;border:1px solid #d6c4b6}.btn-outline:active{background:#f0e4da}
        .btn-danger{color:#8f4a3a;background:#f5ded8}.btn-danger:active{background:#edccc2}
        .btn-success{background:#8fbc8f;color:#1f3b1f}.btn-success:active{background:#7dab7d}
        .btn-gold{background:#e8d5b5;color:#4d3826;font-weight:600;border:1px solid #dbbd9a}.btn-gold:active{background:#dec9a5}
        .btn-sm{padding:3px 10px;font-size:12px}
        .post-card,.search-box,.donate-card{background:#fcf8f4;border-radius:20px;padding:12px 14px;margin-bottom:14px;border:1px solid #ece0d5}
        .post-card textarea,.search-box input{width:100%;padding:10px 14px;border:1px solid #dccfc3;border-radius:36px;font-size:15px;background:white;transition:0.15s;outline:none;-webkit-appearance:none;appearance:none}
        .post-card textarea:focus,.search-box input:focus{border-color:#c9b09b;box-shadow:0 0 0 3px rgba(180,140,110,0.15)}
        .post-card textarea{border-radius:16px;resize:vertical;min-height:56px}
        .post-card .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
        .search-box{display:flex;gap:6px;padding:10px 12px}
        .search-box input{flex:1}
        .feed-item{background:#fcf8f4;border-radius:18px;padding:14px 14px;margin-bottom:12px;border:1px solid #e8dbd0;transition:0.1s}
        .feed-item .meta{display:flex;justify-content:space-between;color:#8a7a6b;font-size:12px;margin-bottom:4px}
        .feed-item .meta strong{color:#4a3729}
        .feed-item .content{font-size:15px;line-height:1.5;margin:6px 0 8px;word-break:break-word;color:#2f241b}
        .feed-item .tip-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b5b4b;border-top:1px dashed #e2d2c4;padding-top:8px;margin-top:4px;flex-wrap:wrap}
        .pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin:18px 0 4px}
        .pagination button{background:#eee4db;border:none;padding:5px 14px;border-radius:36px;font-weight:500;color:#3d2c1e;cursor:pointer;font-size:13px;touch-action:manipulation}
        .pagination button:disabled{opacity:0.4;pointer-events:none}
        .pagination span{color:#7a6a5a;font-size:14px}
        .empty-state{text-align:center;color:#b8a091;padding:30px 0;font-size:14px}
        .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#4a3729;color:#fef6ef;padding:10px 22px;border-radius:60px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:999;opacity:0;transition:opacity 0.25s;pointer-events:none;max-width:92%;text-align:center}
        .toast.show{opacity:1}
        .hidden{display:none !important}
        .flex{display:flex;gap:6px;flex-wrap:wrap}
        .label-badge{background:#ede3d9;color:#5e4a38;font-size:11px;padding:2px 10px;border-radius:20px}
        .donate-card{padding:12px 14px 14px;background:#fcf6ef;border:1px solid #e5d0bd;border-radius:24px}
        .donate-card .title{font-weight:600;font-size:16px;color:#4d3826;margin-bottom:8px;display:flex;align-items:center;gap:6px;justify-content:space-between}
        .donate-card .title span{background:#e8d5b5;padding:1px 10px;border-radius:30px;font-size:12px}
        .donate-main-btn{width:100%;padding:10px 0;background:#e8d5b5;border:2px solid #dbbd9a;border-radius:50px;font-size:17px;font-weight:600;color:#3d2c1e;cursor:pointer;transition:0.15s;margin-bottom:10px;letter-spacing:1px;touch-action:manipulation}
        .donate-main-btn:active{background:#dec9a5;transform:scale(0.98)}
        .donate-qr-area{background:white;border-radius:18px;padding:12px;text-align:center;border:1px dashed #d6c4b6;margin-bottom:10px}
        .donate-qr-area img{max-width:140px;width:100%;height:auto;border-radius:12px;background:#fcf8f4;padding:4px}
        .donate-qr-area .qr-hint{font-size:13px;color:#7a6a5a;margin-top:4px}
        .donate-register{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#f7efe8;padding:8px 12px;border-radius:36px;margin-top:4px}
        .donate-register span{font-size:13px;font-weight:500;color:#4d3826;white-space:nowrap}
        .donate-register input{flex:1;min-width:60px;padding:6px 12px;border:1px solid #dccfc3;border-radius:36px;font-size:14px;background:white;outline:none;-webkit-appearance:none;appearance:none}
        .donate-register input:focus{border-color:#c9b09b;box-shadow:0 0 0 3px rgba(180,140,110,0.12)}
        .donate-register .btn{padding:6px 14px;font-size:13px}
        .donate-history{margin-top:10px;font-size:13px;color:#6b5b4b;border-top:1px solid #e2d2c4;padding-top:10px}
        .donate-history .stats-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
        .donate-history .stats-row .total{font-weight:500;color:#4d3826;font-size:13px}
        .donate-history .record-scroll{height:54px;overflow:hidden;font-size:12px;color:#7a6a5a;margin-top:2px;padding-right:2px;position:relative}
        .donate-history .record-scroll .scroll-inner{animation:scrollUp 12s linear infinite}
        .donate-history .record-scroll .record-item{padding:2px 0;border-bottom:1px dashed #f0e4da;font-size:12px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .donate-history .record-scroll .record-item:last-child{border-bottom:none}
        @keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
        .donate-history .record-scroll.paused .scroll-inner{animation:none !important}
        .inline-auth{background:#fcf8f4;border-radius:20px;padding:12px 14px 14px;margin-bottom:14px;border:1px solid #ece0d5}
        .inline-auth .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
        .inline-auth input{flex:1;min-width:80px;padding:8px 12px;border:1px solid #dccfc3;border-radius:36px;font-size:14px;background:white;outline:none;-webkit-appearance:none;appearance:none}
        .inline-auth input:focus{border-color:#c9b09b;box-shadow:0 0 0 3px rgba(180,140,110,0.12)}
        .inline-auth .hint{font-size:12px;color:#8a7a6b;margin-top:6px}
        .my-donate-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(60,40,30,0.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}
        .my-donate-modal{background:#fffcf9;border-radius:28px;padding:24px 20px;max-width:380px;width:100%;max-height:70vh;box-shadow:0 24px 48px rgba(0,0,0,0.15);border:1px solid #f0e3d8}
        .my-donate-modal h3{color:#4d3826;margin-bottom:14px;font-size:18px;display:flex;justify-content:space-between;align-items:center}
        .my-donate-modal .close-btn{background:none;border:none;font-size:22px;cursor:pointer;color:#b8a091;padding:0 4px;touch-action:manipulation}
        .my-donate-modal .list{max-height:260px;overflow-y:auto;font-size:14px;color:#5e4a38;-webkit-overflow-scrolling:touch}
        .my-donate-modal .list .item{padding:6px 0;border-bottom:1px solid #f0e4da;font-size:14px}
        .my-donate-modal .list .empty{color:#b8a091;text-align:center;padding:24px 0}
        @media (max-width:420px){#app{padding:14px 10px 18px}h1{font-size:20px}.user-bar{padding:6px 10px}.username{max-width:80px;font-size:14px}.btn{font-size:12px;padding:4px 10px}.post-card,.search-box,.donate-card{padding:10px 12px}.donate-main-btn{font-size:15px;padding:8px 0}.donate-register span{font-size:12px}.donate-register input{font-size:13px;padding:5px 10px}.donate-history .record-scroll{height:48px}.my-donate-modal{padding:18px 16px}}
        @media (max-width:360px){.user-actions .btn{font-size:11px;padding:3px 8px}.inline-auth .row{gap:4px}.inline-auth input{min-width:60px;font-size:13px;padding:6px 10px}}
        @supports (padding:max(0px)){.toast{bottom:max(20px,env(safe-area-inset-bottom))}.my-donate-overlay{padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}}
    </style>
</head>
<body>
<div id="app">
    <h1>🌟 心愿论坛 <small>· 许愿池</small></h1>
    <div class="user-bar" id="userBar">
        <div class="user-info">
            <div class="user-avatar" id="avatarDisplay">👤</div>
            <span class="username" id="currentUsername">未登录</span>
        </div>
        <div class="user-actions" id="userActions">
            <button class="btn btn-primary" id="loginBtn">登录</button>
            <button class="btn btn-outline" id="registerBtn">注册</button>
        </div>
    </div>
    <div id="inlineAuth" class="inline-auth hidden">
        <div class="row">
            <input type="text" id="authUser" placeholder="用户名">
            <input type="password" id="authPass" placeholder="密码">
            <button class="btn btn-primary" id="authSubmitBtn">登录</button>
            <button class="btn btn-outline" id="authToggleBtn">注册</button>
        </div>
        <div class="hint" id="authHint">👋 注册新账号或登录</div>
    </div>
    <div id="postCard" class="post-card hidden">
        <textarea id="postContent" placeholder="写下你的心愿或想法..."></textarea>
        <div class="actions">
            <button class="btn btn-success" id="postSubmitBtn">✨ 许下心愿</button>
        </div>
    </div>
    <div id="donateCard" class="donate-card">
        <div class="title">💛 随缘打赏 <span>支持运营</span></div>
        <button class="donate-main-btn" id="donateMainBtn">🌸 随缘打赏</button>
        <div id="qrArea" class="donate-qr-area hidden">
            <img src="qrcode.png" alt="收款二维码" style="max-width:180px;width:100%;border-radius:12px;background:#fcf8f4;padding:8px;">
            <div class="qr-hint">💚 微信 / 支付宝 扫码支持</div>
            <button class="btn btn-outline btn-sm" id="closeQrBtn" style="margin-top:4px;">收起</button>
        </div>
        <div class="donate-register">
            <span>📝 登记</span>
            <input type="number" id="donateAmountInput" placeholder="金额" min="0.01" step="0.01" value="10">
            <button class="btn btn-gold" id="registerDonateBtn">✅ 登记</button>
        </div>
        <div class="donate-history">
            <div class="stats-row">
                <span class="total" id="totalDonateWrap">💎 累计：<strong id="totalDonate">0</strong> 元</span>
                <button class="btn btn-outline btn-sm" id="myDonateBtn">📜 我的</button>
            </div>
            <div class="record-scroll" id="donateRecordList">
                <div class="scroll-inner" id="scrollInner"><div class="record-item">加载中...</div></div>
            </div>
        </div>
    </div>
    <div class="search-box">
        <input type="text" id="searchInput" placeholder="🔍 搜索用户名 / 留言">
        <button class="btn btn-primary" id="searchBtn">搜索</button>
        <button class="btn btn-outline" id="clearSearchBtn">✕</button>
    </div>
    <div id="feedContainer">
        <div id="feedList"></div>
        <div class="pagination" id="pagination">
            <button id="prevPage" disabled>‹ 上一页</button>
            <span id="pageInfo">1 / 1</span>
            <button id="nextPage" disabled>下一页 ›</button>
        </div>
    </div>
    <div id="toast" class="toast"></div>
    <div id="myDonateOverlay" class="my-donate-overlay hidden">
        <div class="my-donate-modal">
            <h3><span>📖 我的打赏</span><button class="close-btn" id="closeMyDonateBtn">✕</button></h3>
            <div class="list" id="myDonateList"><div class="empty">暂无记录</div></div>
        </div>
    </div>
</div>
<script>
// ============================================================
// 心愿论坛 · Supabase 版本
// 替换下面的 SUPABASE_URL 和 SUPABASE_ANON_KEY 为您自己的值
// ============================================================

const SUPABASE_URL = 'https://snjpilrpadumghfxuiqn.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNuanBpbHJwYWR1bWdoZnh1aXFuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODMwOTE3NjIsImV4cCI6MjA5ODY2Nzc2Mn0.ICaRJ6bgD1nQMlZ586bpTzmBBsUH4C2U7j8o0x2UKyI';

const { createClient } = supabase;
const sb = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

const ADMIN_USER = 'admin';
let currentUser = null;
let currentPage = 1;
const PAGE_SIZE = 10;
let filteredPosts = [];
let searchKeyword = '';
let currentUserId = null;

const $ = id => document.getElementById(id);
const avatarDisplay = $('avatarDisplay');
const currentUsername = $('currentUsername');
const userActions = $('userActions');
const loginBtn = $('loginBtn');
const registerBtn = $('registerBtn');
const inlineAuth = $('inlineAuth');
const authUser = $('authUser');
const authPass = $('authPass');
const authSubmitBtn = $('authSubmitBtn');
const authToggleBtn = $('authToggleBtn');
const authHint = $('authHint');
const postCard = $('postCard');
const postContent = $('postContent');
const postSubmitBtn = $('postSubmitBtn');
const searchInput = $('searchInput');
const searchBtn = $('searchBtn');
const clearSearchBtn = $('clearSearchBtn');
const feedList = $('feedList');
const prevPage = $('prevPage');
const nextPage = $('nextPage');
const pageInfo = $('pageInfo');
const toastEl = $('toast');
const donateMainBtn = $('donateMainBtn');
const qrArea = $('qrArea');
const closeQrBtn = $('closeQrBtn');
const donateAmountInput = $('donateAmountInput');
const registerDonateBtn = $('registerDonateBtn');
const totalDonate = $('totalDonate');
const totalDonateWrap = $('totalDonateWrap');
const donateRecordList = $('donateRecordList');
const scrollInner = $('scrollInner');
const myDonateBtn = $('myDonateBtn');
const myDonateOverlay = $('myDonateOverlay');
const closeMyDonateBtn = $('closeMyDonateBtn');
const myDonateList = $('myDonateList');
let toastTimer = null;

function showToast(msg, duration = 2000) {
    if (toastTimer) clearTimeout(toastTimer);
    toastEl.textContent = msg;
    toastEl.classList.add('show');
    toastTimer = setTimeout(() => toastEl.classList.remove('show'), duration);
}

function escapeHtml(text) {
    if (!text) return '';
    return String(text).replace(/[&<>"]/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[m] || m));
}

function formatTime(ts) {
    if (!ts) return '';
    const d = new Date(ts);
    return d.toLocaleString('zh-CN', { hour12: false });
}

// ---------- 表单控制 ----------
function showAuthForm() { inlineAuth.classList.remove('hidden'); }
function hideAuthForm() { inlineAuth.classList.add('hidden'); }

// ---------- 认证 ----------
async function handleAuth(mode) {
    const username = authUser.value.trim();
    const password = authPass.value.trim();
    if (!username || !password) { showToast('用户名和密码不能为空'); return; }

    if (mode === 'register') {
        const { data: authData, error: authError } = await sb.auth.signUp({
            email: username + '@temp.com',
            password: password
        });
        if (authError) { showToast(authError.message); return; }
        if (!authData.user) { showToast('注册失败，请重试'); return; }

        const { error: profileError } = await sb
            .from('profiles')
            .insert([{ id: authData.user.id, username: username }]);
        if (profileError) {
            showToast('创建用户资料失败: ' + profileError.message);
            return;
        }
        showToast('注册成功，请登录');
        setAuthMode('login');
        authUser.value = username;
        authPass.value = '';
    } else {
        const { data, error } = await sb.auth.signInWithPassword({
            email: username + '@temp.com',
            password: password
        });
        if (error) { showToast('用户名或密码错误'); return; }
        if (!data.user) { showToast('登录失败'); return; }

        const { data: profile, error: pErr } = await sb
            .from('profiles')
            .select('username')
            .eq('id', data.user.id)
            .single();
        if (pErr || !profile) {
            showToast('用户资料获取失败');
            return;
        }

        currentUser = profile.username;
        currentUserId = data.user.id;
        localStorage.setItem('sb_user', currentUser);
        localStorage.setItem('sb_user_id', currentUserId);
        updateUIForUser();
        showToast('欢迎回来，' + currentUser);
        hideAuthForm();
        render();
    }
}

function setAuthMode(mode) {
    if (mode === 'login') {
        authSubmitBtn.textContent = '登录';
        authToggleBtn.textContent = '注册';
        authHint.textContent = '👋 输入用户名密码登录';
        authSubmitBtn.onclick = () => handleAuth('login');
        authToggleBtn.onclick = () => setAuthMode('register');
    } else {
        authSubmitBtn.textContent = '注册';
        authToggleBtn.textContent = '登录';
        authHint.textContent = '📝 注册新账号，请使用唯一用户名';
        authSubmitBtn.onclick = () => handleAuth('register');
        authToggleBtn.onclick = () => setAuthMode('login');
    }
}

async function logout() {
    if (!currentUser) return;
    await sb.auth.signOut();
    currentUser = null;
    currentUserId = null;
    localStorage.removeItem('sb_user');
    localStorage.removeItem('sb_user_id');
    updateUIForUser();
    showToast('已退出');
    render();
}

// ============================================================
// 注销账号（使用 Edge Functions）
// ============================================================
async function deleteAccount() {
    if (!currentUser || !currentUserId) {
        showToast('请先登录');
        return;
    }
    
    if (!confirm('确定要注销账号 "' + currentUser + '" 吗？\n\n⚠️ 警告：\n• 所有留言将被删除\n• 所有打赏记录将被删除\n• 此操作不可恢复！')) {
        return;
    }

    try {
        showToast('正在处理注销请求...');
        
        const { data: sessionData, error: sessionError } = await sb.auth.getSession();
        if (sessionError || !sessionData.session) {
            showToast('请重新登录后再试');
            return;
        }
        
        const token = sessionData.session.access_token;
        
        const response = await fetch(
            'https://snjpilrpadumghfxuiqn.supabase.co/functions/v1/delete-account',
            {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer ' + token,
                    'Content-Type': 'application/json'
                }
            }
        );
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            showToast('✅ ' + result.message);
            localStorage.removeItem('sb_user');
            localStorage.removeItem('sb_user_id');
            await sb.auth.signOut();
            currentUser = null;
            currentUserId = null;
            updateUIForUser();
            render();
            setTimeout(() => { location.reload(); }, 1500);
        } else {
            showToast('❌ 注销失败: ' + (result.error || '未知错误'));
        }
    } catch (error) {
        console.error('注销异常:', error);
        showToast('❌ 注销失败，请重试');
    }
}

function updateUIForUser() {
    const stored = localStorage.getItem('sb_user');
    if (stored) {
        currentUser = stored;
        currentUserId = localStorage.getItem('sb_user_id');
        currentUsername.textContent = currentUser;
        avatarDisplay.textContent = currentUser.charAt(0).toUpperCase();
        
        userActions.innerHTML = '<button class="btn btn-danger" id="logoutBtn">退出</button>';
        document.getElementById('logoutBtn').addEventListener('click', logout);
        
        postCard.classList.remove('hidden');
        loginBtn.classList.add('hidden');
        registerBtn.classList.add('hidden');
        
        if (!document.getElementById('deleteAccountBtn')) {
            const delBtn = document.createElement('button');
            delBtn.id = 'deleteAccountBtn';
            delBtn.className = 'btn btn-danger';
            delBtn.textContent = '注销账号';
            delBtn.style.marginLeft = '4px';
            delBtn.addEventListener('click', deleteAccount);
            userActions.appendChild(delBtn);
        }
    } else {
        currentUser = null;
        currentUserId = null;
        currentUsername.textContent = '未登录';
        avatarDisplay.textContent = '👤';
        
        userActions.innerHTML = '<button class="btn btn-primary" id="loginBtn">登录</button><button class="btn btn-outline" id="registerBtn">注册</button>';
        document.getElementById('loginBtn').addEventListener('click', () => { showAuthForm(); setAuthMode('login'); });
        document.getElementById('registerBtn').addEventListener('click', () => { showAuthForm(); setAuthMode('register'); });
        
        postCard.classList.add('hidden');
    }
}

// ---------- 数据操作 ----------
async function render() {
    let query = sb.from('posts').select('*, post_tips(*)').order('created_at', { ascending: false });
    if (searchKeyword.trim()) {
        query = query.ilike('username', '%' + searchKeyword.trim() + '%');
    }
    const from = (currentPage - 1) * PAGE_SIZE;
    const to = from + PAGE_SIZE - 1;
    query = query.range(from, to);

    const { data: posts, error } = await query;
    if (error) { showToast('加载失败: ' + error.message); return; }

    const { count: total } = await sb.from('posts').select('*', { count: 'exact', head: true });
    const totalPages = Math.max(1, Math.ceil((total || 0) / PAGE_SIZE));

    if (!posts || posts.length === 0) {
        feedList.innerHTML = '<div class="empty-state">💭 池中暂无愿望，来许下第一个吧</div>';
    } else {
        let html = '';
        posts.forEach(p => {
            const tips = p.post_tips || [];
            const tipCount = tips.length;
            const tipAmounts = tips.map(t => t.username + ' 💰' + t.amount).join('；');
            const isOwner = currentUser === p.username;
            html += '<div class="feed-item"><div class="meta"><strong>' + escapeHtml(p.username) + '</strong><span>' + formatTime(p.created_at) + '</span></div>';
            html += '<div class="content">' + escapeHtml(p.content) + '</div>';
            html += '<div class="tip-row"><span>❤️ ' + tipCount + ' 人助力</span>';
            if (tipCount > 0) html += '<span class="label-badge">' + escapeHtml(tipAmounts) + '</span>';
            if (currentUser && !isOwner) html += '<button data-postid="' + p.id + '" class="tip-btn" style="background:#f0e4da;border:1px solid #d6c4b6;font-size:12px;padding:2px 10px;border-radius:30px;cursor:pointer;">助力</button>';
            if (currentUser && isOwner) html += '<button data-postid="' + p.id + '" class="delete-btn" style="background:#f5ded8;color:#8f4a3a;font-size:12px;padding:2px 10px;border-radius:30px;cursor:pointer;border:none;">删除</button>';
            html += '</div></div>';
        });
        feedList.innerHTML = html;
        document.querySelectorAll('.tip-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const postId = parseInt(this.dataset.postid);
                handleTipPost(postId);
            });
        });
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const postId = parseInt(this.dataset.postid);
                if (confirm('确定删除此愿望吗？')) deletePost(postId);
            });
        });
    }

    pageInfo.textContent = currentPage + ' / ' + totalPages;
    prevPage.disabled = (currentPage <= 1);
    nextPage.disabled = (currentPage >= totalPages);

    await loadDonateData();
}

// ============================================================
// 打赏记录加载 + 滚动动画（修复版）
// ============================================================
async function loadDonateData() {
    const { data, error } = await sb.from('donations').select('*').order('created_at', { ascending: false }).limit(10);
    if (error) { 
        console.error('加载打赏数据失败:', error);
        scrollInner.innerHTML = '<div class="record-item">加载失败</div>';
        donateRecordList.classList.add('paused');
        return; 
    }

    // 累计总额
    const { data: totalData } = await sb.from('donations').select('amount');
    const total = (totalData || []).reduce((sum, d) => sum + d.amount, 0);
    totalDonate.textContent = total.toFixed(2);
    if (currentUser === ADMIN_USER) totalDonateWrap.classList.remove('hidden');
    else totalDonateWrap.classList.add('hidden');

    const list = data || [];
    
    // 清空并重新构建滚动内容
    if (list.length === 0) {
        scrollInner.innerHTML = '<div class="record-item">暂无打赏记录</div>';
        donateRecordList.classList.add('paused');
        scrollInner.style.animation = 'none';
        return;
    }
    
    if (list.length <= 3) {
        let html = '';
        list.forEach(d => { 
            html += `<div class="record-item">${formatTime(d.created_at)} ${d.username} 打赏 ¥${d.amount}</div>`; 
        });
        scrollInner.innerHTML = html;
        donateRecordList.classList.add('paused');
        scrollInner.style.animation = 'none';
        return;
    }
    
    // 超过3条：循环滚动（显示两遍）
    let html = '';
    list.forEach(d => { 
        html += `<div class="record-item">${formatTime(d.created_at)} ${d.username} 打赏 ¥${d.amount}</div>`; 
    });
    list.forEach(d => { 
        html += `<div class="record-item">${formatTime(d.created_at)} ${d.username} 打赏 ¥${d.amount}</div>`; 
    });
    scrollInner.innerHTML = html;
    donateRecordList.classList.remove('paused');
    
    // 重置动画
    scrollInner.style.animation = 'none';
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            scrollInner.style.animation = 'scrollUp 12s linear infinite';
        });
    });
}

async function handleTipPost(postId) {
    if (!currentUser || !currentUserId) { showToast('请先登录'); return; }
    const amount = Math.floor(Math.random() * 10) + 1;
    const { error } = await sb.from('post_tips').insert([{
        post_id: postId,
        user_id: currentUserId,
        username: currentUser,
        amount: amount
    }]);
    if (error) { showToast('助力失败: ' + error.message); return; }
    showToast('✨ 助力成功 +' + amount);
    render();
}

async function deletePost(postId) {
    if (!currentUser) return;
    const { error } = await sb.from('posts').delete().eq('id', postId).eq('user_id', currentUserId);
    if (error) { showToast('删除失败: ' + error.message); return; }
    showToast('已删除');
    render();
}

async function addPost(content) {
    if (!currentUser || !currentUserId) { showToast('请先登录'); return; }
    if (!content.trim()) { showToast('内容不能为空'); return; }
    const { error } = await sb.from('posts').insert([{
        user_id: currentUserId,
        username: currentUser,
        content: content.trim()
    }]);
    if (error) { showToast('发布失败: ' + error.message); return; }
    postContent.value = '';
    showToast('🌟 心愿已许下');
    render();
}

async function registerDonate() {
    if (!currentUser || !currentUserId) { showToast('请先登录'); return; }
    const val = parseFloat(donateAmountInput.value);
    if (!val || val <= 0) { showToast('请输入有效金额'); return; }
    const { error } = await sb.from('donations').insert([{
        user_id: currentUserId,
        username: currentUser,
        amount: val
    }]);
    if (error) { showToast('登记失败: ' + error.message); return; }
    donateAmountInput.value = '';
    showToast('✅ 登记成功！感谢支持 ¥' + val.toFixed(2));
    render();
}

async function showMyDonate() {
    if (!currentUser || !currentUserId) { showToast('请先登录'); return; }
    const { data, error } = await sb.from('donations').select('*').eq('user_id', currentUserId).order('created_at', { ascending: false });
    myDonateOverlay.classList.remove('hidden');
    if (error || !data || data.length === 0) {
        myDonateList.innerHTML = '<div class="empty">暂无打赏记录</div>';
    } else {
        let html = '';
        data.forEach(d => { html += '<div class="item">' + formatTime(d.created_at) + ' 打赏 ¥' + d.amount + '</div>'; });
        myDonateList.innerHTML = html;
    }
}

function closeMyDonate() { myDonateOverlay.classList.add('hidden'); }
function toggleQr() { qrArea.classList.toggle('hidden'); }

function applySearch() {
    searchKeyword = searchInput.value.trim();
    currentPage = 1;
    render();
}
function clearSearch() {
    searchInput.value = '';
    searchKeyword = '';
    currentPage = 1;
    render();
}

// ---------- 初始化 ----------
function init() {
    const stored = localStorage.getItem('sb_user');
    if (stored) {
        currentUser = stored;
        currentUserId = localStorage.getItem('sb_user_id');
        updateUIForUser();
        hideAuthForm();
        render();
    } else {
        updateUIForUser();
        hideAuthForm();
        render();
    }

    donateMainBtn.addEventListener('click', toggleQr);
    closeQrBtn.addEventListener('click', () => qrArea.classList.add('hidden'));
    registerDonateBtn.addEventListener('click', registerDonate);
    myDonateBtn.addEventListener('click', showMyDonate);
    closeMyDonateBtn.addEventListener('click', closeMyDonate);
    myDonateOverlay.addEventListener('click', function(e) { if (e.target === this) closeMyDonate(); });
    postSubmitBtn.addEventListener('click', () => addPost(postContent.value));
    searchBtn.addEventListener('click', applySearch);
    clearSearchBtn.addEventListener('click', clearSearch);
    searchInput.addEventListener('keyup', e => { if (e.key === 'Enter') applySearch(); });
    prevPage.addEventListener('click', () => { if (currentPage > 1) { currentPage--; render(); } });
    nextPage.addEventListener('click', () => {
        const totalPages = parseInt(pageInfo.textContent.split('/')[1]) || 1;
        if (currentPage < totalPages) { currentPage++; render(); }
    });
}

init();
</script>
</body>
</html>