<?php ?>
<div class="fade-in">
    <div class="card post-card-mobile" style="padding: 2.5rem; position: relative; overflow: hidden;">
        <!-- Background Accent -->
        <div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: var(--primary-light); border-radius: 50%; z-index: 0; opacity: 0.5;"></div>
        
        <div style="position: relative; z-index: 1; display: flex; gap: 2rem;" class="post-main-flex">
            <div class="vote-container">
                <button class="vote-btn" data-post="<?= $post['id'] ?>" data-type="1"><i class="fas fa-chevron-up"></i></button>
                <span class="score-count" style="font-weight: 700; font-size: 1.25rem;"><?= $post['score'] ?? 0 ?></span>
                <button class="vote-btn" data-post="<?= $post['id'] ?>" data-type="-1"><i class="fas fa-chevron-down"></i></button>
            </div>
            
            <div style="flex: 1;">
                <div style="display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2rem; background: var(--bg); padding: 1rem; border-radius: 1rem;">
                    <img src="<?= \App\Helpers\Asset::avatar($post['avatar'] ?? null, $post['username'], 48) ?>" style="width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--primary); object-fit: cover;">
                    <div>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <a href="/u/<?= $post['username'] ?>" style="color: var(--text); font-weight: 700; font-size: 1.1rem;"><?= $post['username'] ?></a>
                            <span class="badge" style="background: var(--primary); color: white; font-size: 0.7rem;"><?= \App\Helpers\Lang::t('level') ?> <?= floor(($post['reputation'] ?? 0) / 100) ?></span>
                        </div>
                        <div style="font-size: 0.8rem;"><?= \App\Helpers\Lang::t('reputation') ?>: <span style="color: var(--primary); font-weight: 700;"><?= $post['reputation'] ?? 0 ?></span> • <?= date('M d, Y', strtotime($post['created_at'])) ?></div>
                    </div>
                    <?php if ($post['type'] === 'question'): ?>
                        <div style="margin-left: auto;">
                            <span class="status-badge <?= $post['is_best_answer_selected'] ? 'status-solved' : 'status-open' ?>">
                                <?= $post['is_best_answer_selected'] ? '<i class="fas fa-check"></i> ' . \App\Helpers\Lang::t('solved') : \App\Helpers\Lang::t('question') ?>
                            </span>
                        </div>
                    <?php endif; ?>
                </div>
                
                <h1 class="post-title-mobile" style="margin: 0 0 2rem 0; font-size: 2.2rem; line-height: 1.3; font-weight: 800;"><?= $post['title'] ?></h1>
                
                <div id="post-content" class="markdown-body" style="font-size: 1.15rem; line-height: 1.8; color: var(--text);">
                    <?= $post['content'] ?>
                </div>

                <div class="post-actions-mobile" style="margin-top: 3rem; display: flex; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border); flex-wrap: wrap;">
                    <button class="btn" style="background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-share"></i> <?= \App\Helpers\Lang::t('share') ?></button>
                    <button class="btn" style="background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-bookmark"></i> <?= \App\Helpers\Lang::t('save') ?></button>
                    
                    <!-- NEW PC Features -->
                    <button class="btn btn-action-translate" data-target="#post-content" data-raw="<?= htmlspecialchars($post['content']) ?>" style="background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-language"></i> <?= \App\Helpers\Lang::t('translate') ?></button>
                    <button class="btn btn-action-tts" data-target="#post-content" style="background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-volume-up"></i> <?= \App\Helpers\Lang::t('read_aloud') ?></button>

                    <?php if (\App\Core\Session::get('user_id') == $post['user_id'] || \App\Core\Session::get('role') == 3): ?>
                        <a href="/post/<?= $post['slug'] ?>/edit" class="btn" style="background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-edit"></i> <?= \App\Helpers\Lang::t('edit') ?></a>
                    <?php endif; ?>

                    <?php if (\App\Core\Session::get('role') == 3): ?>
                        <div style="margin-left: auto; display: flex; gap: 0.5rem; background: rgba(0,0,0,0.1); padding: 0.5rem; border-radius: 0.75rem;">
                            <form action="/admin/posts/block/<?= $post['id'] ?>" method="POST" onsubmit="return confirm('Block this post?')">
                                <?= \App\Core\CSRF::field() ?>
                                <button type="submit" class="btn" style="padding: 0.4rem 0.8rem; font-size: 0.8rem; background: #f59e0b; color: white;"><i class="fas fa-lock"></i> <?= \App\Helpers\Lang::t('block') ?></button>
                            </form>
                            <form action="/admin/posts/pin/<?= $post['id'] ?>" method="POST">
                                <?= \App\Core\CSRF::field() ?>
                                <button type="submit" class="btn" style="padding: 0.4rem 0.8rem; font-size: 0.8rem; background: var(--primary); color: white;"><i class="fas fa-thumbtack"></i> <?= \App\Helpers\Lang::t('pinned') ?></button>
                            </form>
                            <form action="/admin/posts/delete/<?= $post['id'] ?>" method="POST" onsubmit="return confirm('<?= \App\Helpers\Lang::t('confirm_delete') ?>')">
                                <?= \App\Core\CSRF::field() ?>
                                <button type="submit" class="btn" style="padding: 0.4rem 0.8rem; font-size: 0.8rem; background: #ef4444; color: white;"><i class="fas fa-trash"></i> <?= \App\Helpers\Lang::t('delete') ?></button>
                            </form>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <div class="comments-section" style="margin-top: 3rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h2 style="margin: 0;"><?= \App\Helpers\Lang::t('comments') ?> <span style="font-size: 1rem; color: var(--text-muted); font-weight: normal; margin-left: 0.5rem;"><?= count($comments) ?> <?= \App\Helpers\Lang::t('responses') ?></span></h2>
        </div>
        
        <?php if (\App\Core\Session::has('user_id')): ?>
            <form action="/comment/store" method="POST" class="card" style="padding: 1.5rem;">
                <?= \App\Core\CSRF::field() ?>
                <input type="hidden" name="post_id" value="<?= $post['id'] ?>">
                <div class="form-group" style="margin-bottom: 1rem;">
                    <textarea name="content" class="form-control" placeholder="<?= \App\Helpers\Lang::t('placeholder_comment') ?>" rows="4" style="border-radius: 1rem;"></textarea>
                </div>
                <div style="display: flex; justify-content: flex-end;">
                    <button type="submit" class="btn btn-primary"><?= \App\Helpers\Lang::t('post_comment') ?></button>
                </div>
            </form>
        <?php else: ?>
            <div class="card" style="text-align: center; padding: 2rem; border-style: dashed;">
                <p style="color: var(--text-muted); margin-bottom: 1.5rem;"><?= \App\Helpers\Lang::t('login_to_participate') ?></p>
                <div style="display: flex; justify-content: center; gap: 1rem;">
                    <a href="/login" class="btn btn-primary"><?= \App\Helpers\Lang::t('login') ?></a>
                    <a href="/register" class="btn" style="background: var(--bg); border: 1px solid var(--border);"><?= \App\Helpers\Lang::t('register') ?></a>
                </div>
            </div>
        <?php endif; ?>

        <div class="comments-tree" style="margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
            <?php
            function renderComments($comments, $postOwnerId) {
                foreach ($comments as $comment) {
                    $isAccepted = $comment['is_accepted'] ?? false;
                    ?>
                    <div class="comment-item" style="padding-left: <?= $comment['parent_id'] ? '2rem' : '0' ?>; position: relative;">
                        <?php if ($comment['parent_id']): ?>
                            <div style="position: absolute; left: 0.75rem; top: 0; bottom: 0; width: 2px; background: var(--border);"></div>
                        <?php endif; ?>
                        
                        <div class="card" style="padding: 1.25rem; margin-bottom: 0.5rem; border-radius: 1rem; <?= $isAccepted ? 'border: 2px solid #10b981; background: rgba(16, 185, 129, 0.05);' : '' ?>">
                            <div style="display: flex; gap: 1rem; align-items: flex-start;">
                                <div class="vote-container" style="background: transparent; padding: 0; flex-shrink: 0;">
                                    <button class="vote-btn" data-comment="<?= $comment['id'] ?>" data-type="1"><i class="fas fa-chevron-up"></i></button>
                                    <span class="score-count" style="font-weight: 700;"><?= $comment['score'] ?? 0 ?></span>
                                    <button class="vote-btn" data-comment="<?= $comment['id'] ?>" data-type="-1"><i class="fas fa-chevron-down"></i></button>
                                </div>
                                <div style="flex: 1; min-width: 0;">
                                    <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem;">
                                        <img src="<?= \App\Helpers\Asset::avatar($comment['avatar'] ?? null, $comment['username'], 24) ?>" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;">
                                        <span style="font-weight: 700; color: var(--text); font-size: 0.9rem;"><?= htmlspecialchars($comment['username']) ?></span>
                                        <span style="color: var(--text-muted); font-size: 0.8rem;">· <?= date('d M, H:i', strtotime($comment['created_at'])) ?></span>
                                        <?php if ($isAccepted): ?>
                                            <span style="display: inline-flex; align-items: center; gap: 0.25rem; color: #10b981; font-weight: 700; font-size: 0.8rem; white-space: nowrap;">
                                                <i class="fas fa-check-circle"></i> <?= \App\Helpers\Lang::t('best_answer') ?>
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="comment-markdown markdown-body" data-raw="<?= htmlspecialchars($comment['content']) ?>" style="font-size: 0.95rem; line-height: 1.6; color: var(--text); margin-bottom: 0.75rem; word-break: break-word;">
                                        <?= nl2br(htmlspecialchars($comment['content'])) ?>
                                    </div>
                                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
                                        <a href="#" class="btn" style="padding: 0.35rem 0.75rem; font-size: 0.78rem; background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-reply"></i> <?= \App\Helpers\Lang::t('reply') ?></a>
                                        
                                        <!-- NEW PC Features for comments -->
                                        <button class="btn btn-action-translate" data-target="parent" style="padding: 0.35rem 0.75rem; font-size: 0.78rem; background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-language"></i></button>
                                        <button class="btn btn-action-tts" data-target="parent" style="padding: 0.35rem 0.75rem; font-size: 0.78rem; background: var(--bg); border: 1px solid var(--border);"><i class="fas fa-volume-up"></i></button>

                                        <?php if (\App\Core\Session::get('user_id') == $postOwnerId && !$isAccepted): ?>
                                            <form action="/comment/accept" method="POST" style="display: inline;">
                                                <?= \App\Core\CSRF::field() ?>
                                                <input type="hidden" name="comment_id" value="<?= $comment['id'] ?>">
                                                <button type="submit" class="btn" style="padding: 0.35rem 0.75rem; font-size: 0.78rem; background: #10b981; color: white;"><i class="fas fa-check"></i> <?= \App\Helpers\Lang::t('accept_answer') ?></button>
                                            </form>
                                        <?php endif; ?>
                                        <?php if (\App\Core\Session::get('role') == 3): ?>
                                            <form action="/admin/comments/delete/<?= $comment['id'] ?>" method="POST" style="display: inline;" onsubmit="return confirm('Delete?')">
                                                <?= \App\Core\CSRF::field() ?>
                                                <button type="submit" class="btn" style="padding: 0.35rem 0.6rem; font-size: 0.78rem; background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.2);"><i class="fas fa-times"></i></button>
                                            </form>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <?php if (!empty($comment['children'])): ?>
                            <div class="comment-children">
                                <?php renderComments($comment['children'], $postOwnerId); ?>
                            </div>
                        <?php endif; ?>
                    </div>
                    <?php
                }
            }
            renderComments($comments, $post['user_id']);
            ?>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Initial parse for post
        const postCont = document.getElementById('post-content');
        if (postCont) postCont.innerHTML = marked.parse(postCont.innerText.trim());

        // Initial parse for comments
        document.querySelectorAll('.comment-markdown').forEach(comment => {
            if (comment.dataset.raw) {
                comment.innerHTML = marked.parse(comment.dataset.raw);
            }
        });
    });
</script>
