<?php
/**
 * defaultpro 移动端详情页
 */
$currentPage = 'detail';
$pageType = 'detail';
$bodyClass = 'detail-page';
$showBack = true;
$pageData = ['postId' => $id];
$this->setLayout('app');
?>
<div id="detailContent">
    <div class="detail-loading">
        <div class="loading-spinner"></div>
        加载中...
    </div>
</div>

<div class="comment-section">
    <div class="comment-header">
        <h3>评论 <span id="commentCount">(0)</span></h3>
    </div>
    <div class="comment-input-wrapper">
        <textarea class="comment-input" id="commentInput" placeholder="写下你的评论..." rows="2"></textarea>
        <button class="comment-submit-btn" id="commentSubmitBtn">发送</button>
    </div>
    <div class="comment-list" id="commentList">
        <div class="loading-indicator">
            <div class="loading-spinner"></div>
        </div>
    </div>
</div>

<script>
(function() {
    var postId = document.body.dataset.postId;
    var currentCommentId = null;
    
    // 加载帖子详情
    fetch(App.baseUrl + '/mobileApi/postDetail?id=' + postId, {credentials: 'same-origin'})
    .then(function(res) { return res.json(); })
    .then(function(data) {
        if (data.code === 0) {
            var post = data.data.post;
            var html = '<div class="detail-post">' +
                '<div class="m-post-header">' +
                '<a href="'+App.baseUrl+'/mobile/user?id=' + post.user_id + '">' +
                '<img class="m-post-avatar" src="' + (post.avatar || '/templates/defaultpro/images/avatar_default.png') + '" alt=""></a>' +
                '<div class="m-post-user-info">' +
                '<a href="'+App.baseUrl+'/mobile/user?id=' + post.user_id + '" class="m-post-username">' + escapeHtml(post.username) + '</a>' +
                '<div class="m-post-time">' + (post.time_ago || '') + '</div>' +
                '</div></div>' +
                '<div class="m-post-content" style="padding:12px 0;">' + post.content + '</div>';
            
            if (post.images && post.images.length > 0) {
                var gridClass = post.images.length === 1 ? 'single' : 'multi';
                html += '<div class="m-post-images ' + gridClass + '">';
                post.images.forEach(function(img) {
                    html += '<img class="m-post-image" src="' + img + '" alt="">';
                });
                html += '</div>';
            }
            
            // 转发内容
            if (post.is_repost && post.original_post) {
                var orig = post.original_post;
                html += '<div class="m-repost-original">' +
                    '<a href="'+App.baseUrl+'/mobile/user?id=' + orig.user_id + '">@' + escapeHtml(orig.username) + '</a>: ' +
                    orig.content +
                    '</div>';
            }
            
            html += '<div class="m-post-actions">' +
                '<button class="m-action-btn ' + (post.is_liked ? 'liked' : '') + '" id="likeBtn">' +
                '<i class="m-action-icon ' + (post.is_liked ? 'fa-solid' : 'fa-regular') + ' fa-heart"' + (post.is_liked ? ' style="color:#ff4d4f;"' : '') + '></i>' +
                '<span class="m-action-count">' + post.likes + '</span>' +
                '</button>' +
                '<button class="m-action-btn ' + (post.is_favorited ? 'favorited' : '') + '" id="favBtn">' +
                '<i class="m-action-icon ' + (post.is_favorited ? 'fa-solid' : 'fa-regular') + ' fa-star"' + (post.is_favorited ? ' style="color:#ffad1f;"' : '') + '></i>' +
                '</button>' +
                '<a href="'+App.baseUrl+'/mobile/repost?id=' + post.id + '" class="m-action-btn">' +
                '<i class="m-action-icon fa-solid fa-retweet"></i>' +
                '</a>' +
                '</div></div>';
            
            document.getElementById('detailContent').innerHTML = html;
            
            // 绑定点赞
            document.getElementById('likeBtn').addEventListener('click', function() {
                var isLiked = this.classList.contains('liked');
                var url = isLiked ? App.baseUrl + '/mobileApi/unlike' : App.baseUrl + '/mobileApi/like';
                fetch(url, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({id: postId})
                }).then(function(r) { return r.json(); }).then(function(d) {
                    if (d.code === 0) {
                        document.getElementById('likeBtn').classList.toggle('liked');
                        var icon = document.querySelector('#likeBtn i');
                        if (isLiked) {
                            icon.className = 'm-action-icon fa-regular fa-heart';
                            icon.style.color = '';
                        } else {
                            icon.className = 'm-action-icon fa-solid fa-heart';
                            icon.style.color = '#ff4d4f';
                        }
                    }
                });
            });
            
            // 绑定收藏
            document.getElementById('favBtn').addEventListener('click', function() {
                var isFav = this.classList.contains('favorited');
                var url = isFav ? App.baseUrl + '/mobileApi/unfavorite' : App.baseUrl + '/mobileApi/favorite';
                fetch(url, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({id: postId})
                }).then(function(r) { return r.json(); }).then(function(d) {
                    if (d.code === 0) {
                        document.getElementById('favBtn').classList.toggle('favorited');
                        var icon = document.querySelector('#favBtn i');
                        if (isFav) {
                            icon.className = 'm-action-icon fa-regular fa-star';
                            icon.style.color = '';
                        } else {
                            icon.className = 'm-action-icon fa-solid fa-star';
                            icon.style.color = '#ffad1f';
                        }
                    }
                });
            });
            
            document.getElementById('commentCount').textContent = '(' + (post.comments || 0) + ')';
        } else {
            document.getElementById('detailContent').innerHTML = '<div class="error-state">加载失败</div>';
        }
    });
    
    // 加载评论
    loadComments();
    
    function loadComments() {
        fetch(App.baseUrl + '/mobileApi/comments?post_id=' + postId, {credentials: 'same-origin'})
        .then(function(res) { return res.json(); })
        .then(function(data) {
            if (data.code === 0) {
                var comments = data.data.items || [];
                if (comments.length === 0) {
                    document.getElementById('commentList').innerHTML = '<div class="empty-state">暂无评论</div>';
                } else {
                    var html = '';
                    comments.forEach(function(c) {
                        html += '<div class="comment-item">' +
                            '<img class="comment-avatar" src="' + (c.avatar || '/templates/defaultpro/images/avatar_default.png') + '" alt="">' +
                            '<div class="comment-body">' +
                            '<div class="comment-meta">' +
                            '<span class="comment-name">' + escapeHtml(c.username) + '</span>' +
                            '<span class="comment-time">' + (c.time_ago || '') + '</span>' +
                            '</div>' +
                            '<div class="comment-content">' + c.content + '</div>' +
                            '</div></div>';
                    });
                    document.getElementById('commentList').innerHTML = html;
                }
            }
        });
    }
    
    // 提交评论
    document.getElementById('commentSubmitBtn').addEventListener('click', function() {
        var content = document.getElementById('commentInput').value.trim();
        if (!content) {
            alert('请输入评论内容');
            return;
        }
        
        this.disabled = true;
        fetch(App.baseUrl + '/mobileApi/comment', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({post_id: postId, content: content})
        }).then(function(res) { return res.json(); }).then(function(data) {
            if (data.code === 0) {
                document.getElementById('commentInput').value = '';
                loadComments();
                alert('评论成功');
            } else {
                alert(data.message || '评论失败');
            }
        }).finally(function() {
            document.getElementById('commentSubmitBtn').disabled = false;
        });
    });
})();
</script>
