{% extends 'agent/base_agent.html' %}

{% block title %}Facebook Comments | ChatLab{% endblock %}
{% block agent_fb_comments_active %}active{% endblock %}

{% block header_center %}
    <span style="font-weight: 700; font-size: 16px;">Facebook Comments</span>
{% endblock %}

{% block workspace %}
<div class="workspace-container container-medium">
    <div class="page-header">
        <div>
            <h2 class="page-title">Facebook Comments</h2>
            <p class="page-subtitle">View and reply to comments on your Facebook Page. AI auto-replies are enabled.</p>
        </div>
        <div style="display: flex; gap: 0.75rem; align-items: center;">
            <span id="refresh-status" style="font-size: 12px; color: var(--text-muted);"></span>
            <button id="manual-refresh-btn" onclick="refreshComments()" class="btn btn-secondary" style="height: 36px; font-size: 13px; padding: 0 1rem;">
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-right: 4px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                Refresh
            </button>
        </div>
    </div>

    <!-- Stats row -->
    <div style="display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;">
        <div class="glass-card" style="padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; min-width: 140px;">
            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--primary-blue); flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
            <div>
                <div style="font-size: 1.25rem; font-weight: 700; color: var(--text-primary);">{{ comments|length }}</div>
                <div style="font-size: 11px; color: var(--text-muted);">Total Comments</div>
            </div>
        </div>
        <div class="glass-card" style="padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; min-width: 140px;">
            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--success-green); flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <div>
                <div style="font-size: 1.25rem; font-weight: 700; color: var(--text-primary);">{{ comments|length }}{% with handled=0 %}{% for c in comments %}{% if c.is_handled %}{% with handled=handled|add:1 %}{% endwith %}{% endif %}{% endfor %}{% endwith %}</div>
                <div style="font-size: 11px; color: var(--text-muted);">Replied</div>
            </div>
        </div>
        <div class="glass-card" style="padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; min-width: 140px;">
            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--warning-orange); flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <div>
                <div style="font-size: 1.25rem; font-weight: 700; color: var(--text-primary);">{% with pending=0 %}{% for c in comments %}{% if not c.is_handled %}{% with pending=pending|add:1 %}{% endwith %}{% endif %}{% endfor %}{{ pending }}{% endwith %}</div>
                <div style="font-size: 11px; color: var(--text-muted);">Pending</div>
            </div>
        </div>
    </div>

    <div id="comments-container" style="display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem;">
        {% for comment in comments %}
            <div class="glass-card comment-card" data-comment-id="{{ comment.id }}" style="padding: 1.5rem; transition: box-shadow 0.2s;">
                <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                    {% if comment.profile_pic %}
                        <img src="{{ comment.profile_pic }}" alt="{{ comment.sender_name }}" style="width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border-color);">
                    {% else %}
                        <div style="width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-blue), #7c3aed); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; font-size: 15px;">
                            {{ comment.sender_name|slice:":1"|upper|default:"U" }}
                        </div>
                    {% endif %}
                    
                    <div style="flex: 1; min-width: 240px;">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem;">
                            <div>
                                <h4 style="margin: 0 0 2px 0; font-size: 1rem; color: var(--text-primary); font-weight: 600;">{{ comment.sender_name|default:"Unknown User" }}</h4>
                                <span style="font-size: 0.78rem; color: var(--text-muted);">{{ comment.created_at|date:"M d, Y h:i A" }}</span>
                            </div>
                            <div style="display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;">
                                {% if comment.ai_reply %}
                                    <span class="badge" style="background: rgba(99, 102, 241, 0.1); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.2); font-size: 11px;">
                                        🤖 AI Replied
                                    </span>
                                {% endif %}
                                {% if comment.is_handled %}
                                    <span class="badge" style="background: rgba(49, 162, 76, 0.08); color: var(--success-green); border: 1px solid rgba(49, 162, 76, 0.15);">
                                        ✓ Replied
                                    </span>
                                {% else %}
                                    <span class="badge" style="background: rgba(245, 158, 11, 0.08); color: var(--warning-orange); border: 1px solid rgba(245, 158, 11, 0.15);">
                                        ⏳ Pending
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Comment message -->
                        <div style="margin-top: 0.75rem; padding: 0.75rem 1rem; background-color: var(--hover-bg); border-radius: 10px; color: var(--text-primary); font-size: 14px; line-height: 1.5; border-left: 3px solid var(--primary-blue);">
                            {{ comment.message|linebreaksbr }}
                        </div>

                        <!-- AI Reply (if exists) -->
                        {% if comment.ai_reply %}
                        <div style="margin-top: 0.75rem;">
                            <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 4px;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="color: #818cf8;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
                                AI Auto-Reply{% if comment.replied_at %} · {{ comment.replied_at|date:"M d, h:i A" }}{% endif %}
                            </div>
                            <div style="padding: 0.65rem 1rem; background: rgba(99, 102, 241, 0.07); border-radius: 10px; color: var(--text-primary); font-size: 13.5px; line-height: 1.5; border-left: 3px solid #6366f1;">
                                {{ comment.ai_reply|linebreaksbr }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Manual Reply Form -->
                {% 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.25rem; flex-wrap: wrap; align-items: center;">
                        {% csrf_token %}
                        <input type="text" name="message" placeholder="Write a manual reply..." required class="form-input" style="flex: 1; min-width: 200px; border-radius: 20px; height: 38px;">
                        <button type="submit" class="btn btn-primary" style="border-radius: 20px; padding: 0 1.25rem; height: 38px; font-size: 13.5px;">
                            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-right: 4px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                            Reply
                        </button>
                    </form>
                {% else %}
                    <!-- Already replied — show override option -->
                    <details style="margin-top: 1rem;">
                        <summary style="font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;">Send another reply</summary>
                        <form method="POST" action="{% url 'agent_reply_facebook_comment' comment.id %}" style="display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; align-items: center;">
                            {% csrf_token %}
                            <input type="text" name="message" placeholder="Send another reply..." required class="form-input" style="flex: 1; min-width: 200px; border-radius: 20px; height: 38px;">
                            <button type="submit" class="btn btn-secondary" style="border-radius: 20px; padding: 0 1.25rem; height: 38px; font-size: 13.5px;">
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-right: 4px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                                Send
                            </button>
                        </form>
                    </details>
                {% endif %}
            </div>
        {% empty %}
            <div class="glass-card" style="padding: 4rem 2rem; text-align: center; color: var(--text-muted);">
                <svg width="56" height="56" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-bottom: 1rem; opacity: 0.35; color: var(--text-primary);"><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-primary); font-size: 1.25rem; font-weight: 700;">No Comments Yet</h3>
                <p style="margin: 0; font-size: 14px; max-width: 420px; margin-inline: auto; line-height: 1.6;">
                    When visitors comment on your Facebook Page posts, they will appear here automatically.<br>
                    Make sure <strong>Feed</strong> subscription is enabled in your Facebook App Webhooks settings.
                </p>
            </div>
        {% endfor %}
    </div>
</div>

<script>
// Auto-refresh every 30 seconds to show new comments
let refreshTimer;
let countdown = 30;

function updateCountdown() {
    const el = document.getElementById('refresh-status');
    if (el) {
        el.textContent = `Auto-refresh in ${countdown}s`;
        countdown--;
        if (countdown < 0) {
            countdown = 30;
            refreshComments();
        }
    }
}

function refreshComments() {
    clearInterval(refreshTimer);
    const el = document.getElementById('refresh-status');
    if (el) el.textContent = 'Refreshing...';
    window.location.reload();
}

// Start countdown
refreshTimer = setInterval(updateCountdown, 1000);
</script>
{% endblock %}