{% extends 'layouts/base.html' %}
{% load social_filters %}
{% load social_icons %}
{% load action_icons %}
{% load star_rating %}

{% block title %}Comments - {{ platform_name }}{% endblock %}
{% block page_title %}{{ platform_name }} Comments{% endblock %}
{% block page_subtitle %}View and manage comments from {{ account.name }}{% endblock %}

{% block content %}

<!-- Page Header with Gradient -->
<div class="page-header-gradient">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold mb-1">{{ platform_name }} Comments</h1>
            <p class="text-blue-100 text-sm">View and manage comments from {{ account.name }}</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{% url 'social:dashboard' %}" class="inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
                Back to Dashboard
            </a>
            <a href="{% url 'social:sync' platform_type %}" class="inline-flex items-center px-4 py-2.5 bg-white text-navy font-medium rounded-xl hover:bg-blue-50 transition">
                <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i>
                Sync Now
            </a>
        </div>
    </div>
</div>

<!-- Filter Section -->
<div class="hh-filter-panel">
    <form method="get">
        <div class="flex flex-wrap gap-4 items-end">
            <div class="flex-1 min-w-64">
                <div class="relative">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                    <input type="text" 
                           name="search" 
                           placeholder="Search comments..." 
                           value="{{ search_query|default:'' }}"
                           class="hh-form-input pl-10">
                </div>
            </div>
            
            <div class="flex flex-wrap gap-2">
                <select name="sentiment" class="hh-form-select w-auto min-w-32">
                    <option value="">All Sentiments</option>
                    <option value="positive" {% if sentiment_filter == 'positive' %}selected{% endif %}>Positive</option>
                    <option value="neutral" {% if sentiment_filter == 'neutral' %}selected{% endif %}>Neutral</option>
                    <option value="negative" {% if sentiment_filter == 'negative' %}selected{% endif %}>Negative</option>
                </select>
                
                <select name="sync_via_webhook" class="hh-form-select w-auto min-w-32">
                    <option value="">All Sync Methods</option>
                    <option value="true" {% if sync_filter == 'true' %}selected{% endif %}>Real-time Only</option>
                    <option value="false" {% if sync_filter == 'false' %}selected{% endif %}>Polling Only</option>
                </select>
                
                {% if platform_type == 'META' %}
                <select name="source_platform" class="hh-form-select w-auto min-w-32">
                    <option value="">All Sources</option>
                    <option value="FB" {% if request.GET.source_platform == 'FB' %}selected{% endif %}>Facebook</option>
                    <option value="IG" {% if request.GET.source_platform == 'IG' %}selected{% endif %}>Instagram</option>
                </select>
                {% endif %}
            </div>
        </div>
        
        <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
            <div class="flex flex-wrap gap-2">
                {% if search_query %}
                    <span class="hh-badge hh-badge-info">
                        <i data-lucide="search" class="w-3 h-3 inline mr-1"></i>
                        Search: {{ search_query|truncatechars:20 }}
                        <a href="{% url 'social:comments_list' platform_type %}" class="ml-1 hover:text-red-500">
                            <i data-lucide="x" class="w-3 h-3 inline"></i>
                        </a>
                    </span>
                {% endif %}
                
                {% if sentiment_filter %}
                    <span class="hh-badge hh-badge-info">
                        <i data-lucide="smile" class="w-3 h-3 inline mr-1"></i>
                        Sentiment: {{ sentiment_filter|capfirst }}
                        <a href="?{% if search_query %}search={{ search_query }}{% endif %}{% if sync_filter %}&sync_via_webhook={{ sync_filter }}{% endif %}{% if request.GET.source_platform %}&source_platform={{ request.GET.source_platform }}{% endif %}" class="ml-1 hover:text-red-500">
                            <i data-lucide="x" class="w-3 h-3 inline"></i>
                        </a>
                    </span>
                {% endif %}
                
                {% if sync_filter %}
                    <span class="hh-badge hh-badge-info">
                        <i data-lucide="refresh-cw" class="w-3 h-3 inline mr-1"></i>
                        Sync: {% if sync_filter == 'true' %}Real-time{% else %}Polling{% endif %}
                        <a href="?{% if search_query %}search={{ search_query }}{% endif %}{% if sentiment_filter %}&sentiment={{ sentiment_filter }}{% endif %}{% if request.GET.source_platform %}&source_platform={{ request.GET.source_platform }}{% endif %}" class="ml-1 hover:text-red-500">
                            <i data-lucide="x" class="w-3 h-3 inline"></i>
                        </a>
                    </span>
                {% endif %}
            </div>
            
            <div class="flex items-center gap-2">
                <button type="submit" class="hh-btn hh-btn-primary">
                    <i data-lucide="filter" class="w-4 h-4"></i>
                    Apply Filters
                </button>
                
                <a href="{% url 'social:comments_list' platform_type %}" class="hh-btn hh-btn-secondary">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    Clear
                </a>
                
                <a href="{% url 'social:export_comments_csv' platform_type %}{% if search_query %}?search={{ search_query }}{% endif %}{% if sentiment_filter %}{% if search_query %}&{% else %}?{% endif %}sentiment={{ sentiment_filter }}{% endif %}{% if sync_filter %}{% if search_query or sentiment_filter %}&{% else %}?{% endif %}sync_via_webhook={{ sync_filter }}{% endif %}{% if request.GET.source_platform %}{% if search_query or sentiment_filter or sync_filter %}&{% else %}?{% endif %}source_platform={{ request.GET.source_platform }}{% endif %}" class="hh-btn hh-btn-success">
                    <i data-lucide="download" class="w-4 h-4"></i>
                    Export CSV
                </a>
            </div>
        </div>
    </form>
</div>

<!-- Results Info -->
{% if page_obj %}
<div class="hh-card mb-3">
    <div class="p-4 flex justify-between items-center">
        <div class="text-sm text-gray-600">
            Showing <strong>{{ page_obj.start_index }}</strong> to <strong>{{ page_obj.end_index }}</strong> of <strong>{{ page_obj.paginator.count }}</strong> comments
        </div>
        <div class="text-sm text-gray-500 flex items-center gap-1">
            <i data-lucide="info" class="w-4 h-4"></i>
            Use filters to narrow down results
        </div>
    </div>
</div>
{% endif %}

<!-- Comments List -->
{% if page_obj %}
<div class="space-y-3">
    {% for comment in page_obj %}
    <a href="{% url 'social:comment_detail' platform_type comment.comment_id %}" class="hh-card block hover:shadow-md transition-shadow">
        <div class="p-4">
            <div class="flex gap-4">
                <!-- Author Avatar -->
                <div class="w-12 h-12 rounded-full bg-navy text-white flex items-center justify-center text-lg font-bold flex-shrink-0">
                    {{ comment.author_name|slice:":1"|upper }}
                </div>
                
                <!-- Content -->
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start mb-2">
                        <div class="min-w-0">
                            <h5 class="font-semibold text-gray-900 mb-1">{{ comment.author_name }}</h5>
                            <p class="text-sm text-gray-600 truncate">{{ comment.text|truncatewords:20 }}</p>
                        </div>
                    </div>
                    
                    <!-- Badges -->
                    <div class="flex flex-wrap gap-2 mt-3">
                        {% if comment.is_reply %}
                            <span class="hh-badge hh-badge-info">
                                <i data-lucide="reply" class="w-3 h-3 inline mr-1"></i> Reply
                            </span>
                        {% endif %}
                        
                        {% if comment.is_replied %}
                            <span class="hh-badge hh-badge-success">
                                <i data-lucide="check-circle" class="w-3 h-3 inline mr-1"></i> Replied
                            </span>
                        {% endif %}
                        
                        {% if comment.synced_via_webhook %}
                            <span class="hh-badge hh-badge-success">
                                <i data-lucide="circle-dot" class="w-3 h-3 inline mr-1"></i>
                                Real-time
                            </span>
                        {% endif %}
                        
                        {% if comment.rating %}
                            <span class="hh-badge" style="background: #fef3c7; color: #92400e;">
                                <i data-lucide="star" class="w-3 h-3 inline mr-1"></i> {{ comment.rating }}
                            </span>
                        {% endif %}
                        
                        {% if comment.ai_analysis and comment.ai_analysis.actionable_insights.requires_followup %}
                            <span class="hh-badge hh-badge-danger">
                                <i data-lucide="bell" class="w-3 h-3 inline mr-1"></i> Follow-up
                            </span>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Right Side Info -->
                <div class="flex flex-col items-end gap-2 flex-shrink-0">
                    <!-- Sentiment -->
                    {% if comment.ai_analysis %}
                        <span class="hh-badge {% if comment.ai_analysis.sentiment.classification.en == 'positive' %}hh-badge-success{% elif comment.ai_analysis.sentiment.classification.en == 'negative' %}hh-badge-danger{% else %}hh-badge-neutral{% endif %}">
                            {{ comment.ai_analysis.sentiment.classification.en|capfirst }}
                        </span>
                    {% else %}
                        <span class="text-xs text-gray-500">Pending</span>
                    {% endif %}
                    
                    <!-- Score -->
                    {% if comment.ai_analysis and comment.ai_analysis.business_intelligence.patient_satisfaction_score %}
                        <span class="hh-badge {% if comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 80 %}hh-badge-success{% elif comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 60 %}hh-badge-warning{% else %}hh-badge-danger{% endif %}">
                            {{ comment.ai_analysis.business_intelligence.patient_satisfaction_score }}%
                        </span>
                    {% endif %}
                    
                    <!-- Engagement -->
                    <div class="flex items-center gap-3 text-sm text-gray-500">
                        {% if comment.like_count > 0 %}
                            <span class="flex items-center gap-1">
                                <i data-lucide="heart" class="w-4 h-4 text-red-500"></i>
                                {{ comment.like_count }}
                            </span>
                        {% endif %}
                        
                        {% if comment.reply_count > 0 %}
                            <span class="flex items-center gap-1">
                                <i data-lucide="message-circle" class="w-4 h-4 text-navy"></i>
                                {{ comment.reply_count }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </a>
    {% endfor %}
</div>

<!-- Pagination -->
{% if page_obj.has_other_pages %}
<nav class="mt-6" aria-label="Comments pagination">
    <div class="hh-pagination">
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if sentiment_filter %}&sentiment={{ sentiment_filter }}{% endif %}{% if sync_filter %}&sync_via_webhook={{ sync_filter }}{% endif %}{% if request.GET.source_platform %}&source_platform={{ request.GET.source_platform }}{% endif %}" 
               class="hh-pagination-btn prev">
                <i data-lucide="chevron-left" class="w-4 h-4"></i> Previous
            </a>
        {% endif %}
        
        {% for page_num in page_obj.paginator.page_range %}
            {% if page_num == page_obj.number %}
                <span class="hh-pagination-btn active">{{ page_num }}</span>
            {% else %}
                <a href="?page={{ page_num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if sentiment_filter %}&sentiment={{ sentiment_filter }}{% endif %}{% if sync_filter %}&sync_via_webhook={{ sync_filter }}{% endif %}{% if request.GET.source_platform %}&source_platform={{ request.GET.source_platform }}{% endif %}" 
                   class="hh-pagination-btn">{{ page_num }}</a>
            {% endif %}
        {% endfor %}
        
        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if sentiment_filter %}&sentiment={{ sentiment_filter }}{% endif %}{% if sync_filter %}&sync_via_webhook={{ sync_filter }}{% endif %}{% if request.GET.source_platform %}&source_platform={{ request.GET.source_platform }}{% endif %}" 
               class="hh-pagination-btn next">
                Next <i data-lucide="chevron-right" class="w-4 h-4"></i>
            </a>
        {% endif %}
    </div>
</nav>
{% endif %}

{% else %}
<!-- Empty State -->
<div class="hh-empty-state hh-card">
    <i data-lucide="message-circle" class="hh-empty-state-icon"></i>
    <h4 class="hh-empty-state-title">No Comments Found</h4>
    <p class="hh-empty-state-text">
        {% if search_query %}
            No comments match your search criteria. Try adjusting your filters.
        {% elif sync_filter %}
            No comments with selected sync method.
        {% else %}
            No comments found for this account. Try syncing to fetch new comments.
        {% endif %}
    </p>
    <a href="{% url 'social:sync' platform_type %}" class="hh-btn hh-btn-primary">
        <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i>
        Sync Now
    </a>
</div>
{% endif %}

{% endblock %}
