{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/post.css">
{% endblock %}
{% block content %}
<div class="post-page">
    <a href="/feed" style="display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 1rem;">&larr; Back to Feed</a>

    <article class="post-detail">
        <div class="post-detail-header">
            <a href="/profile/{{ author['username'] if author else '#' }}">
            <img src="{{ avatar_url('multiavatar', author['username'] if author else '?', 40) }}" class="avatar-img" style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ author['username'] if author else '?' }}" loading="lazy">
            </a>
            <div>
                <a href="/profile/{{ author['username'] if author else '#' }}" class="post-detail-author">{{ author['username'] if author else 'Unknown' }}</a>
                {% if author and author.get('role') %}
                <span class="post-detail-role">&middot; {{ author['role'] }}</span>
                {% endif %}
            </div>
            <span class="post-detail-time">{{ time_ago }}</span>
        </div>

        <div style="margin-bottom: 0.75rem;">
            <span class="badge badge-{{ post['topic'] }}">{{ post['topic'] }}</span>
        </div>

        {% if post.get('title') %}
        <h1 class="post-detail-title">{{ post['title'] }}</h1>
        {% endif %}

        <div class="post-detail-content rendered-content" data-render>{{ post['content'] }}</div>

        <div class="post-detail-actions">
            <form method="POST" action="/votes/post/{{ post['uid'] }}" style="display:inline;">
                <input type="hidden" name="value" value="1">
                <button type="submit" class="post-action-btn vote-up">+{{ post.get('stars', 0) }}</button>
            </form>
            <button class="post-action-btn">&#x1F517; Share</button>
            {% if user and post['user_uid'] == user['uid'] %}
            <button class="post-action-btn" data-modal="edit-post-modal">Edit</button>
            <form method="POST" action="/posts/delete/{{ post['uid'] }}" style="display:inline;">
                <button type="submit" class="post-action-btn" onclick="return confirm('Delete this post?')">Delete</button>
            </form>
            {% endif %}
        </div>
    </article>

    {% if user and post['user_uid'] == user['uid'] %}
    <div class="modal-overlay" id="edit-post-modal">
        <div class="card" style="width: 100%; max-width: 560px; margin: 1rem; max-height: 90vh; overflow-y: auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h3 style="font-size: 1.125rem; font-weight: 700;">Edit Post</h3>
                <button type="button" class="modal-close btn-ghost btn-icon" style="font-size: 1.25rem;">&times;</button>
            </div>
            <form method="POST" action="/posts/edit/{{ post['uid'] }}">
                <div style="display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 1rem;">
                    {% for t in topics %}
                    <label style="display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: var(--bg-card-hover); transition: all 0.2s;">
                        <input type="radio" name="topic" value="{{ t }}" {% if t == post['topic'] %}checked{% endif %} style="width: auto; accent-color: var(--accent);">
                        {{ t|capitalize }}
                    </label>
                    {% endfor %}
                </div>
                <div class="auth-field" style="margin-bottom: 0.75rem;">
                    <label for="edit-title">Title</label>
                    <input type="text" id="edit-title" name="title" maxlength="500" value="{{ post.get('title', '') }}">
                </div>
                <div class="auth-field" style="margin-bottom: 0.75rem;">
                    <label for="edit-content">Content</label>
                    <textarea id="edit-content" name="content" required maxlength="2000" style="min-height: 200px;">{{ post['content'] }}</textarea>
                </div>
                <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
                    <button type="button" class="modal-close btn btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    <section class="comments-section">
        <h3>Comments</h3>

        {% macro render_comment(item, depth=0) %}
        <div class="comment" style="margin-left: {{ depth * 1.5 }}rem;">
            <div class="comment-votes">
                <form method="POST" action="/votes/comment/{{ item.comment['uid'] }}">
                    <input type="hidden" name="value" value="1">
                    <button type="submit" class="comment-vote-btn">+</button>
                </form>
                <span class="comment-vote-count">{{ item.votes.up - item.votes.down }}</span>
                <form method="POST" action="/votes/comment/{{ item.comment['uid'] }}">
                    <input type="hidden" name="value" value="-1">
                    <button type="submit" class="comment-vote-btn">-</button>
                </form>
            </div>

            <div class="comment-body" data-comment-uid="{{ item.comment['uid'] }}">
                <div class="comment-header">
                    <a href="/profile/{{ item.author['username'] if item.author else '#' }}">
                    <img src="{{ avatar_url('multiavatar', item.author['username'] if item.author else '?', 24) }}" class="avatar-img" style="width: 24px; height: 24px; border-radius: 50%;" alt="{{ item.author['username'] if item.author else '?' }}" loading="lazy">
                    </a>
                    <a href="/profile/{{ item.author['username'] if item.author else '#' }}" class="comment-author">{{ item.author['username'] if item.author else 'Unknown' }}</a>
                    <span class="comment-time">{{ item.time_ago }}</span>
                </div>
                <div class="comment-text rendered-content" data-render>{{ item.comment['content'] }}</div>
                <div class="comment-actions">
                    <button class="comment-action-btn">Reply</button>
                    {% if user and item.comment['user_uid'] == user['uid'] %}
                    <form method="POST" action="/comments/delete/{{ item.comment['uid'] }}" style="display:inline;">
                        <button type="submit" class="comment-action-btn">Delete</button>
                    </form>
                    {% endif %}
                </div>

                {% if item.children %}
                <div class="comment-replies">
                    {% for child in item.children %}
                    {{ render_comment(child, depth + 1) }}
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endmacro %}

        {% for item in comments %}
        {{ render_comment(item, 0) }}
        {% else %}
        <p style="color: var(--text-muted); font-size: 0.875rem; text-align: center; padding: 2rem 0;">No comments yet. Start the discussion.</p>
        {% endfor %}

        {% if user %}
        <form class="comment-form" method="POST" action="/comments/create">
            <input type="hidden" name="post_uid" value="{{ post['uid'] }}">
            <a href="/profile/{{ user['username'] }}">
            <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
            </a>
            <textarea name="content" placeholder="Your opinion goes here..." required maxlength="1000" class="emoji-picker-target"></textarea>
            <div class="comment-form-actions">
                <button type="submit" class="comment-form-submit">Post</button>
            </div>
        </form>
        {% endif %}
    </section>

    {% if related_posts %}
    <section class="comments-section" style="margin-top: 1.5rem;">
        <h3>Related Discussions</h3>
        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            {% for item in related_posts %}
            <a href="/posts/{{ item.post['uid'] }}" class="post-action-btn" style="flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.75rem; width: 100%;">
                <strong style="color: var(--text-primary); font-size: 0.875rem;">{{ item.post.get('title') or item.post['content'][:60] }}</strong>
                <span style="color: var(--text-muted); font-size: 0.75rem;">{{ item.author['username'] }} · {{ item.time_ago }}</span>
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}