{% extends 'agent/base_agent.html' %}
{% block title %}Facebook Comments | ChatLab{% endblock %}

{% block agent_fb_comments_active %}active{% endblock %}

{% block workspace %}
<div style="padding: 2rem;">
    <div class="page-header" style="display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h1 style="margin: 0 0 0.5rem 0; font-size: 1.5rem; color: var(--text);">Facebook Comments</h1>
            <p style="margin: 0; color: var(--text-muted);">View and reply to comments on your Facebook Page.</p>
        </div>
    </div>

    <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;">
        {% for comment in comments %}
            <div class="glass-card" style="padding: 1.5rem;">
                <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
                    {% if comment.profile_pic %}
                        <img src="{{ comment.profile_pic }}" alt="{{ comment.sender_name }}" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;">
                    {% else %}
                        <div style="width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold;">
                            {{ comment.sender_name|slice:":1"|upper|default:"U" }}
                        </div>
                    {% endif %}
                    
                    <div style="flex: 1;">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                            <div>
                                <h4 style="margin: 0 0 0.25rem 0; font-size: 1.1rem; color: var(--text);">{{ comment.sender_name|default:"Unknown User" }}</h4>
                                <span style="font-size: 0.85rem; color: var(--text-muted);">{{ comment.created_at|date:"M d, Y h:i A" }}</span>
                            </div>
                            {% if comment.is_handled %}
                                <span class="status-badge" style="background: #E8F5E9; color: var(--success); border-color: #C8E6C9;">
                                    Replied
                                </span>
                            {% else %}
                                <span class="status-badge" style="background: #FFF3E0; color: #F57C00; border-color: #FFE0B2;">
                                    Pending Reply
                                </span>
                            {% endif %}
                        </div>
                        
                        <div style="margin-top: 1rem; padding: 1rem; background-color: var(--hover-bg); border-radius: 8px; color: var(--text);">
                            {{ comment.message|linebreaksbr }}
                        </div>
                    </div>
                </div>

                {% if not comment.is_handled %}
                    <form method="POST" action="{% url 'agent_reply_facebook_comment' comment.id %}" style="display: flex; gap: 0.75rem; margin-top: 1.5rem;">
                        {% csrf_token %}
                        <input type="text" name="message" placeholder="Write a reply..." required style="flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 24px; outline: none; background-color: var(--bg); color: var(--text);">
                        <button type="submit" style="background-color: var(--primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 24px; cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.2s;">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                            Reply
                        </button>
                    </form>
                {% endif %}
            </div>
        {% empty %}
            <div class="glass-card" style="padding: 3rem; text-align: center; color: var(--text-muted);">
                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-bottom: 1rem; opacity: 0.5;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                <h3 style="margin: 0 0 0.5rem 0; color: var(--text);">No Comments Yet</h3>
                <p style="margin: 0;">When visitors comment on your Facebook posts, they will appear here.</p>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}