<!-- 加载指示器 -->
<div class="loading-indicator" style="display:none;">
    <div class="loading-spinner"></div>
    <span>加载中...</span>
</div>

<!-- 登录弹窗 -->
<div class="modal-overlay" id="loginModal">
    <div class="modal-container" style="max-height: 90vh;">
        <div class="modal-header">
            <h3 class="modal-title">登录</h3>
            <button class="modal-close" onclick="closeModal('loginModal')">×</button>
        </div>
        <div class="modal-body" style="padding: 20px;">
            <form id="modalLoginForm" onsubmit="handleModalLogin(event)">
                <div class="form-group" style="margin-bottom: 16px;">
                    <div class="input-icon-wrap">
                        <span class="input-icon"><span class="iconify" data-icon="mdi:account-outline"></span></span>
                        <input type="text" class="form-input with-icon" name="username" placeholder="用户名/手机号/邮箱" required>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom: 20px;">
                    <div class="input-icon-wrap">
                        <span class="input-icon"><span class="iconify" data-icon="mdi:lock-outline"></span></span>
                        <input type="password" class="form-input with-icon" id="modalLoginPassword" name="password" placeholder="密码" required style="padding-right: 44px;">
                        <button type="button" class="password-toggle-btn" onclick="toggleModalPassword('modalLoginPassword', this)">
                            <span class="iconify" data-icon="mdi:eye"></span>
                        </button>
                    </div>
                </div>
                <button type="submit" class="auth-btn login-btn" id="loginSubmitBtn">
                    <span class="btn-text">登录</span>
                    <span class="btn-loading" style="display:none;">登录中...</span>
                </button>
            </form>
            <div class="auth-footer">
                <a href="javascript:void(0)" onclick="switchToRegister()" class="auth-link">还没有账号？立即注册</a>
            </div>
        </div>
    </div>
</div>

<!-- 注册弹窗 -->
<div class="modal-overlay" id="registerModal">
    <div class="modal-container" style="max-height: 90vh;">
        <div class="modal-header">
            <h3 class="modal-title">注册</h3>
            <button class="modal-close" onclick="closeModal('registerModal')">×</button>
        </div>
        <div class="modal-body" style="padding: 20px;">
            <form id="modalRegisterForm" onsubmit="handleModalRegister(event)">
                <div class="form-group" style="margin-bottom: 14px;">
                    <div class="input-icon-wrap">
                        <span class="input-icon"><span class="iconify" data-icon="mdi:account-outline"></span></span>
                        <input type="text" class="form-input with-icon" name="username" placeholder="设置用户名" required>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom: 20px;">
                    <div class="input-icon-wrap">
                        <span class="input-icon"><span class="iconify" data-icon="mdi:key-outline"></span></span>
                        <input type="password" class="form-input with-icon" id="modalRegisterPassword" name="password" placeholder="设置密码（6位以上）" required style="padding-right: 44px;">
                        <button type="button" class="password-toggle-btn" onclick="toggleModalPassword('modalRegisterPassword', this)">
                            <span class="iconify" data-icon="mdi:eye"></span>
                        </button>
                    </div>
                </div>
                <button type="submit" class="auth-btn register-btn" id="registerSubmitBtn">
                    <span class="btn-text">注册</span>
                    <span class="btn-loading" style="display:none;">注册中...</span>
                </button>
            </form>
            <div class="auth-footer">
                <a href="javascript:void(0)" onclick="switchToLogin()" class="auth-link">已有账号？立即登录</a>
            </div>
        </div>
    </div>
</div>

<!-- 发布弹窗 -->
<div class="modal-overlay publish-modal" id="publishModal">
    <div class="modal-container">
        <div class="modal-header">
            <button class="modal-close" onclick="closeModal('publishModal')">×</button>
            <h3 class="modal-title">发布动态</h3>
            <button class="publish-submit-btn" id="publishSubmitBtn" onclick="handlePublishSubmit()">发布</button>
        </div>
        <form class="publish-form" id="publishForm" onsubmit="return false;" autocomplete="off">
            <textarea class="publish-textarea" id="publishContent" placeholder="分享你的新鲜事..." maxlength="500"></textarea>
            <div class="publish-media-wrapper" id="publishMediaWrapper">
                <div class="publish-images" id="publishImages"></div>
                <div class="publish-videos" id="publishVideos"></div>
            </div>
            <input type="file" id="publishImageInput" accept="image/*,video/*" multiple style="display:none;">
            <input type="file" id="publishMediaInput" accept="image/*,video/*" multiple style="display:none;">
            <input type="hidden" id="publishCircleId" name="circle_id" value="0">
            <input type="hidden" id="publishCircleName" name="circle_name" value="">
            <input type="hidden" id="locationLatLng" name="location_latlng" value="">
            <div class="publish-toolbar">
                <div class="publish-tools">
                    <button type="button" class="publish-tool-btn" onclick="document.getElementById('publishMediaInput').click()">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
                        </svg>
                        <span class="tool-label">图片/视频</span>
                    </button>
                    <?php if ((int)Setting::get('circles_enabled', 1) === 1): ?>
                    <button type="button" class="publish-tool-btn" id="circleToolbarBtn" onclick="toggleCircleSelect()">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                        </svg>
                        <span class="tool-label">圈子</span>
                    </button>
                    <?php endif; ?>
                    <?php if ((int)Setting::get('mobile_emoji_enabled', 1) === 1): ?>
                    <button type="button" class="publish-tool-btn" onclick="togglePublishEmojiPicker()">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
                        </svg>
                        <span class="tool-label">表情</span>
                    </button>
                    <?php endif; ?>
                    <?php if ((int)Setting::get('mobile_topic_enabled', 1) === 1): ?>
                    <button type="button" class="publish-tool-btn" onclick="insertTopic()">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/>
                        </svg>
                        <span class="tool-label">话题</span>
                    </button>
                    <?php endif; ?>
                    <?php if ((int)Setting::get('mobile_location_enabled', 1) === 1): ?>
                    <button type="button" class="publish-tool-btn" id="locationToolbarBtn" onclick="toggleLocation(this)">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
                        <span class="tool-label">位置</span>
                    </button>
                    <?php endif; ?>
                    <?php if ((int)Setting::get('mobile_at_enabled', 1) === 1): ?>
                    <button type="button" class="publish-tool-btn" onclick="insertAt()">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
                        </svg>
                        <span class="tool-label">@</span>
                    </button>
                    <?php endif; ?>
                    <?php if ((int)Setting::get('mobile_privacy_enabled', 1) === 1): ?>
                    <button type="button" class="publish-tool-btn" onclick="toggleAnonymous(this)">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                        </svg>
                        <span class="tool-label">隐私</span>
                    </button>
                    <?php endif; ?>
                </div>
                <div class="publish-char-count">
                    <span id="publishCharCount">0</span>/500
                </div>
            </div>
            <!-- 表情选择器 -->
            <div class="emoji-picker" id="emojiPicker">
                <div class="emoji-category">
                    <button type="button" class="emoji-tab active" data-category="default"><span class="iconify" data-icon="mdi:emoticon-outline"></span></button>
                    <button type="button" class="emoji-tab" data-category="hot"><span class="iconify" data-icon="mdi:fire"></span></button>
                    <button type="button" class="emoji-tab" data-category="emoji"><span class="iconify" data-icon="mdi:emoticon-happy-outline"></span></button>
                </div>
                <div class="emoji-grid" id="emojiGrid"></div>
            </div>
        </form>
    </div>
</div>

<!-- 圈子选择弹窗 -->
<div class="modal-overlay circle-select-modal" id="circleSelectModal" style="display:none;">
    <div class="modal-container circle-select-container">
        <div class="modal-header">
            <button class="modal-close" onclick="toggleCircleSelect()">×</button>
            <h3 class="modal-title">选择圈子</h3>
            <div style="width: 32px;"></div>
        </div>
        <div class="circle-list-container" id="circleList">
            <div class="circle-item" data-circle-id="0" onclick="selectCircle(0, '')">
                <span class="circle-radio" id="circleRadio0"></span>
                <span class="circle-text">不发布到圈子</span>
            </div>
        </div>
    </div>
</div>

<!-- 分享弹窗 -->
<div class="modal-overlay" id="shareModal">
    <div class="modal-container share-modal">
        <div class="modal-header">
            <h3 class="modal-title">分享</h3>
            <button class="modal-close" onclick="closeModal('shareModal')">×</button>
        </div>
        <div class="modal-body">
            <div class="share-card-preview" id="shareCardPreview">
                <div class="share-card-content">
                    <div class="share-card-text" id="shareText">分享内容</div>
                    <div class="share-card-url" id="shareUrl"></div>
                </div>
            </div>
            <div class="share-actions">
                <div class="share-action" onclick="shareToWechat()">
                    <div class="share-action-icon" style="background: linear-gradient(135deg, #07C160, #3CB371);"><span class="iconify" data-icon="mdi:wechat"></span></div>
                    <span class="share-action-label">微信</span>
                </div>
                <div class="share-action" onclick="shareToMoments()">
                    <div class="share-action-icon" style="background: linear-gradient(135deg, #07C160, #228B22);"><span class="iconify" data-icon="mdi:circle-double"></span></div>
                    <span class="share-action-label">朋友圈</span>
                </div>
                <div class="share-action" onclick="shareToQQ()">
                    <div class="share-action-icon" style="background: linear-gradient(135deg, #12B7F5, #0080FF);"><span class="iconify" data-icon="mdi:qqchat"></span></div>
                    <span class="share-action-label">QQ</span>
                </div>
                <div class="share-action" onclick="shareToQzone()">
                    <div class="share-action-icon" style="background: linear-gradient(135deg, #FFB800, #FF8C00);"><span class="iconify" data-icon="mdi:star-outline"></span></div>
                    <span class="share-action-label">QQ空间</span>
                </div>
                <div class="share-action" onclick="shareToWeibo()">
                    <div class="share-action-icon" style="background: linear-gradient(135deg, #E6162D, #DC143C);"><span class="iconify" data-icon="mdi:sina-weibo"></span></div>
                    <span class="share-action-label">动态</span>
                </div>
                <div class="share-action" onclick="shareToCopy()">
                    <div class="share-action-icon" style="background: linear-gradient(135deg, #8E8E93, #636366);"><span class="iconify" data-icon="mdi:link-variant"></span></div>
                    <span class="share-action-label">复制链接</span>
                </div>
            </div>
            <div class="share-extra-actions">
                <div class="share-extra-action" onclick="reportContent()">
                    <span><span class="iconify" data-icon="mdi:flag-outline"></span></span> 举报
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 评论弹窗 -->
<div class="modal-overlay comment-modal" id="commentModal">
    <div class="modal-container" style="max-height: 85vh;">
        <div class="modal-header">
            <h3 class="modal-title">评论 <span id="commentCount" class="count-badge">0</span></h3>
            <button class="modal-close" onclick="closeModal('commentModal')">×</button>
        </div>
        <div class="comment-post-preview" id="commentPostPreview"></div>
        <div class="modal-body comment-body" id="commentListContainer">
            <div class="comment-loading" id="commentLoading">
                <div class="loading-dots">
                    <span></span><span></span><span></span>
                </div>
            </div>
        </div>
        <div class="comment-input-area" id="commentInputArea">
            <div class="comment-reply-tip" id="commentReplyTip" style="display:none;">
                <span>回复 @<span id="replyToUsername"></span></span>
                <button onclick="cancelReply()">×</button>
            </div>
            <div class="comment-input-row">
                <div class="comment-user-avatar" id="commentUserAvatar">
                    <img src="<?php echo !empty($currentUserAvatar) ? $currentUserAvatar : $this->themeUrl() . '/images/avatar_default.png'; ?>" alt="">
                </div>
                <div class="comment-input-wrapper">
                    <textarea class="comment-textarea" id="modalCommentInput" placeholder="写评论..." rows="1"></textarea>
                    <button class="comment-emoji-btn" id="commentEmojiBtn" onclick="toggleCommentEmoji()">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"></circle>
                            <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                            <line x1="9" y1="9" x2="9.01" y2="9"></line>
                            <line x1="15" y1="9" x2="15.01" y2="9"></line>
                        </svg>
                    </button>
                </div>
                <button class="comment-submit-btn" id="modalCommentSubmit" onclick="submitModalComment()">
                    <span>发送</span>
                </button>
            </div>
            <div class="comment-emoji-picker" id="commentEmojiPicker" style="display:none;">
                <div class="emoji-tabs">
                    <button class="emoji-tab active" data-category="default"><span class="iconify" data-icon="mdi:emoticon-outline"></span></button>
                </div>
                <div class="emoji-grid" id="commentEmojiGrid"></div>
            </div>
        </div>
    </div>
</div>

<!-- 确认对话框 -->
<div class="modal-overlay" id="confirmModal">
    <div class="modal-container" style="max-width: 320px; margin: 0 auto;">
        <div class="modal-header">
            <h3 class="modal-title">确认操作</h3>
            <button class="modal-close" onclick="closeModal('confirmModal')">×</button>
        </div>
        <div class="modal-body">
            <p id="confirmMessage" style="margin-bottom: 20px; text-align: center; font-size: 16px; line-height: 1.5;">确认消息</p>
            <div style="display: flex; gap: 10px;">
                <button id="confirmCancel" class="auth-btn" style="flex: 1; background: var(--border-color);" onclick="closeModal('confirmModal')">取消</button>
                <button id="confirmOK" class="auth-btn" style="flex: 1;">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 举报弹窗 -->
<div class="modal-overlay" id="reportModal">
    <div class="modal-container" style="max-width: 320px; margin: 0 auto;">
        <div class="modal-header">
            <h3 class="modal-title">举报内容</h3>
            <button class="modal-close" onclick="closeModal('reportModal')">×</button>
        </div>
        <div class="modal-body">
            <p style="margin-bottom: 12px; font-size: 14px; color: var(--text-secondary-color);">请选择举报原因：</p>
            <div class="report-reasons" id="reportReasons">
                <label class="report-reason-item"><input type="radio" name="reportReason" value="spam"> 垃圾广告</label>
                <label class="report-reason-item"><input type="radio" name="reportReason" value="porn"> 色情低俗</label>
                <label class="report-reason-item"><input type="radio" name="reportReason" value="violence"> 暴力血腥</label>
                <label class="report-reason-item"><input type="radio" name="reportReason" value="fraud"> 欺诈诈骗</label>
                <label class="report-reason-item"><input type="radio" name="reportReason" value="harassment"> 人身攻击</label>
                <label class="report-reason-item"><input type="radio" name="reportReason" value="privacy"> 侵犯隐私</label>
                <label class="report-reason-item"><input type="radio" name="reportReason" value="copyright"> 抄袭侵权</label>
                <label class="report-reason-item"><input type="radio" name="reportReason" value="other"> 其他</label>
            </div>
            <textarea id="reportDetail" class="repost-textarea" placeholder="补充说明（选填）" rows="3" style="margin-top: 12px; resize: none;"></textarea>
            <div style="display: flex; gap: 10px; margin-top: 16px;">
                <button class="auth-btn" style="flex: 1; background: var(--border-color);" onclick="closeModal('reportModal')">取消</button>
                <button id="reportSubmit" class="auth-btn" style="flex: 1;">提交举报</button>
            </div>
        </div>
    </div>
</div>

<!-- 私信弹窗 -->
<div class="modal-overlay" id="messageModal">
    <div class="modal-container" style="max-width: 360px; margin: 0 auto;">
        <div class="modal-header">
            <h3 class="modal-title">发送私信</h3>
            <button class="modal-close" onclick="closeModal('messageModal')">×</button>
        </div>
        <div class="modal-body">
            <div class="message-user-info" id="messageUserInfo" style="display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px;">
                <img id="messageUserAvatar" src="" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;">
                <div>
                    <div id="messageUserName" style="font-weight: 600; font-size: 14px;"></div>
                    <div id="messageUserBio" style="font-size: 12px; color: #999; margin-top: 2px;"></div>
                </div>
            </div>
            <textarea id="messageInput" class="repost-textarea" placeholder="输入私信内容..." rows="4" style="resize: none;"></textarea>
            <button id="messageSubmit" class="repost-submit-btn" style="margin-top: 12px;">
                <span>发送</span>
            </button>
        </div>
    </div>
</div>

<!-- 转发弹窗 -->
<div class="modal-overlay" id="repostModal">
    <div class="modal-container">
        <div class="modal-header">
            <h3 class="modal-title">转发</h3>
            <button class="modal-close" onclick="closeModal('repostModal')">×</button>
        </div>
        <div class="modal-body">
            <div class="repost-preview-card" id="repostPreviewCard"></div>
            <div class="repost-options">
                <label class="repost-option">
                    <input type="checkbox" id="repostAddComment">
                    <span>同时评论</span>
                </label>
            </div>
            <textarea class="repost-textarea" id="repostInput" placeholder="说说你的想法..." rows="3"></textarea>
            <button class="repost-submit-btn" onclick="submitRepost()">
                <span>转发</span>
            </button>
        </div>
    </div>
</div>